/* 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/product.css?179069252129644*/
/*
 * Карточка товара (ТЗ, макеты node 2399:12972 / 2413:1667 / 2399:11950).
 *
 * Десктоп: фото слева обычным потоком, панель товара справа — она
 * зафиксирована (sticky), пока фото длиннее панели, так покупатель
 * не теряет из виду цену и кнопку «В корзину», прокручивая снимок.
 * До десктопа фото и панель идут одна за другой, sticky снимается —
 * закреплять нечего, на экране и так помещается только один блок.
 *
 * Чипы цвета и размера — те же .frk-filter-chip, что и в панели фильтра
 * каталога: тот же компонент, разный смысл (там фильтруют список,
 * здесь выбирают вариант товара).
 */

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

/*
 * Отступ от крошек до фото — тоже фиксированные 16px во всех трёх макетах,
 * а не default-марджин браузерного <p>: сам компонент .frk-breadcrumb
 * общий для всех страниц и марджинов не задаёт, поэтому зазор — решение
 * именно карточки товара.
 */
.frk-product .frk-breadcrumb {
  margin-bottom: var(--frk-space-sm);
}

.frk-product__layout {
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-xl);
}

/*
 * Вводный абзац под галереей (2399:13061 / 2413:2028 / 2408:1826) — не часть
 * .frk-product__layout, отступ отсчитывается от него, а не от шапки панели
 * товара: на десктопе .frk-product__info выше галереи, но ниже неё, если
 * фото длиннее панели, поэтому опираться нужно именно на нижний край
 * .frk-product__layout, а не на конкретную колонку.
 */
.frk-product__lead {
  margin-top: var(--frk-rhythm);

  /* Крупное утверждение: в макете Source Serif 4 Light, в проекте — Roboto Serif ExtraLight (fonts.css) */
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: 24px;
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-serif);
  color: var(--frk-color-ink);
}

@media (min-width: 1024px) {
  .frk-product__lead {
    /* Не совпадает с --frk-rhythm (80px) — так в макете (2399:13060) */
    margin-top: 82.99px;
    max-width: 1282px;

    /*
     * В макете 48px (Source Serif 4), но Roboto Serif шире: при 48 абзац
     * уезжает на четвёртую строку. 42px удерживает переносы там же, где
     * в макете (после «деталям.» и «остается») — тот же приём, что у
     * заголовка героя (tokens.css).
     */
    font-size: clamp(24px, 12px + 1.5625vw, 42px);
    line-height: 1.1;
  }
}

/*
 * До десктопа точки-пагинация лежат на фото, а стикер «Новинка» — отдельной
 * строкой под ним (2408:1828 / 2408:1843: точки внутри рамки фото, стикер
 * ниже неё). На десктопе наоборот: стикер лежит на фото (2399:13057),
 * а миниатюры — отдельным рядом под ним. Оба элемента делят с фото одну
 * grid-area, чтобы накладываться на него без absolute-позиционирования.
 */
.frk-product__gallery {
  display: grid;
  grid-template-areas: "media" "badge";
  gap: var(--frk-space-2xs);
}

.frk-product__media {
  grid-area: media;
  aspect-ratio: 347 / 436;
  overflow: hidden;
  border-radius: var(--frk-radius);
  background: rgb(19 18 18 / 4%);
  position: relative;
}

/*
 * На десктопе главное фото тянется свайпом (product-gallery.js ставит
 * is-swipeable, когда кадров больше одного). Горизонтальный жест пальцем
 * тоже отдаём свайпу — вертикальный остаётся прокруткой страницы.
 */
@media (min-width: 1024px) {
  .frk-product__media.is-swipeable {
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
  }

  .frk-product__media.is-dragging {
    cursor: grabbing;
  }

  .frk-product__media.is-swipeable video {
    cursor: auto;
  }
}

.frk-product__media img,
.frk-product__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/*
 * До десктопа фото — настоящая лента: несколько слайдов подряд, снап
 * по одному в кадре, листается протяжкой (data-drag-scroll, тот же приём,
 * что у миниатюр на десктопе и у «Вам может понравиться») и нативным
 * тачем — им пальцем скроллят без единой строчки JS. Общий одиночный
 * <img>/<video> для десктопа при этом остаётся в разметке, но скрыт —
 * там панель товара переключает не слайды, а его src по клику миниатюры.
 */
.frk-product__slides {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.frk-product__slides::-webkit-scrollbar {
  display: none;
}

.frk-product__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
}

.frk-product__slide img,
.frk-product__slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frk-product__slide img[hidden],
.frk-product__slide video[hidden] {
  display: none;
}

/*
 * Кнопка play на слайде с видео — тот же стеклянный круг, что у миниатюры
 * на десктопе (see .frk-product__thumb-play), но крупнее: тут это не
 * значок на превью 231px, а центр полноразмерного кадра.
 */
.frk-product__slide-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgb(255 255 255 / 25%);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 65%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(255 255 255 / 40%);
}

.frk-product__slide-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  background: rgb(255 255 255 / 95%);
  mask: url("/local/templates/frk/css/../images/icons/play.svg") center / contain no-repeat;
  -webkit-mask: url("/local/templates/frk/css/../images/icons/play.svg") center / contain no-repeat;
}

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

/*
 * Стрелки навигации по фото — десктопная замена свайпу (там, где фото
 * одно общее, а не лента). Кликабельная зона — полоса у края во всю высоту
 * кадра, а не маленькая иконка: так проще попасть курсором, не прицеливаясь.
 * Полоса — 12.5% ширины фото (120px на 1920), стрелка по её центру,
 * ближе к краю (баг-лист, строка 41). До 1024 не нужны — там работает
 * протяжка ленты слайдов.
 */
.frk-product__gallery-nav {
  display: none;
}

@media (min-width: 1024px) {
  .frk-product__gallery-nav {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 12.5%;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--frk-motion-fast) var(--frk-motion-ease);
  }

  .frk-product__gallery-nav:hover,
  .frk-product__gallery-nav:focus-visible {
    opacity: 1;
    background: rgb(19 18 18 / 22%);
  }

  .frk-product__gallery-nav--prev {
    left: 0;
  }

  .frk-product__gallery-nav--next {
    right: 0;
  }

  .frk-product__gallery-nav-chevron {
    width: 40px;
    height: 40px;
    background: rgb(255 255 255 / 85%);
    -webkit-mask: url("/local/templates/frk/css/../images/icons/chevron-thin.svg") center / contain no-repeat;
    mask: url("/local/templates/frk/css/../images/icons/chevron-thin.svg") center / contain no-repeat;
  }

  /* «Назад» — та же иконка, отражённая по горизонтали (тот же приём, что у .frk-slider__chevron) */
  .frk-product__gallery-nav--prev .frk-product__gallery-nav-chevron {
    transform: scaleX(-1);
  }
}

/*
 * Общий <img>/<video> — только для десктопа. Префикс .frk-product__media
 * нужен из-за специфичности: без него `.frk-product__media img { display:
 * block }` выше перебивает этот display:none, и до десктопа общее фото
 * отрисовано под лентой слайдов (а видео играет под ней со звуком).
 */
.frk-product__media [data-product-main-image],
.frk-product__media [data-product-main-video] {
  display: none;
}

/*
 * Кадр видео-миниатюры: превью + значок play поверх, стеклянным кругом —
 * полупрозрачная заливка с блюром и такой же обводкой, чтобы не сливаться
 * с белым на фото, сам треугольник — не картинка, а маска: так им можно
 * управлять цветом/прозрачностью отдельно от обводки круга. Виден только
 * на десктопе, где миниатюра — настоящее превью, а не точка пагинации.
 */
.frk-product__thumb-play {
  display: none;
}

.frk-product__badge {
  grid-area: badge;
  justify-self: start;
  z-index: 1;
  padding: var(--frk-space-badge);
  border-radius: 1px;
  background: var(--frk-color-ink);
  color: var(--frk-color-paper);
  font-family: var(--frk-font-ui);
  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;
}

/*
 * До десктопа миниатюр в макете нет — точки-пагинация лежат на фото,
 * у его нижнего края (node 2408:1828 / 2413:2189, эллипсы 6×6 с шагом 12):
 * текущая залита чёрным, остальные — чёрный контур 0.5px без заливки
 * (баг-лист, строка 44). Кнопки остаются теми же, что и на десктопе —
 * меняется только их вид, клик по-прежнему переключает главное фото.
 */
.frk-product__thumbs {
  grid-area: media;
  align-self: end;
  justify-self: center;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}

.frk-product__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border: 0.5px solid var(--frk-color-ink);
  border-radius: 50%;
  overflow: hidden;
}

.frk-product__thumb img {
  display: none;
}

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

/* --- Панель товара --------------------------------------------------------- */

/*
 * Отступы между блоками панели — margin-bottom на каждом, а не общий grid
 * gap: у разделителя перед табами он уже (24px, а не 32 — см. .divider),
 * а отрицательный margin для локального сужения одного шага внутри
 * общего gap ведёт себя в CSS Grid непредсказуемо (трек дорастает под
 * отступ вместо того, чтобы наплыть на соседний).
 */
.frk-product__info {
  display: grid;
}

.frk-product__head,
.frk-product__options {
  margin-bottom: var(--frk-space-lg);
}

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

.frk-product__title-row {
  display: grid;
  gap: var(--frk-space-xs);
}

.frk-product__title {
  margin-block: calc(-1 * var(--frk-title-leading-trim));
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-page-title);
  line-height: var(--frk-leading-title);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-product__excerpt {
  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);
  color: rgb(19 18 18 / 60%);
}

.frk-product__sku {
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
}

.frk-product__price {
  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);
  color: #383838;
  font-variant-numeric: lining-nums tabular-nums;
}

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

.frk-product__option {
  display: grid;
  gap: var(--frk-space-xs);
}

.frk-product__option-label {
  font-size: var(--frk-size-ui-sm);
  letter-spacing: var(--frk-tracking-ui);
}

/*
 * Чипы цвета — не перенос строки, а лента в одну строку: по макету их
 * не 7, как у размера, а 4, но она тоже листается протяжкой (тот же
 * data-drag-scroll, что у вкладок описания), а не переносится на вторую
 * строку, когда не помещается. Чипы размера переопределяют раскладку
 * своим модификатором ниже — эта база их не касается.
 */
.frk-product__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--frk-space-2xs);
  overflow-x: auto;
  scrollbar-width: none;
}

.frk-product__chips::-webkit-scrollbar {
  display: none;
}

.frk-product__chips .frk-filter-chip {
  flex-shrink: 0;
}

/*
 * Чипы размера — не лента по содержимому, а сетка фиксированных колонок
 * во всю ширину блока: 3 на мобильном (node 2407:1773), 5 на планшете
 * (2413:1984, второй ряд — 3XL/4XL), 7 в один ряд на десктопе (2399:13006).
 */
.frk-product__chips--size {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--frk-space-2xs);
}

.frk-product__chips--size .frk-filter-chip {
  justify-content: center;
  height: 35px;
  padding: 0;
}

/* Кнопка окна «Таблица размеров» (size-chart.js): в сетке опции не растягивается на всю ширину */
.frk-product__size-table {
  display: block;
  justify-self: start;
  margin-top: var(--frk-space-sm);
  text-align: left;
  color: var(--frk-color-gold);
  font-size: var(--frk-size-ui-md);
  letter-spacing: var(--frk-tracking-ui);
  white-space: nowrap;
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-product__size-table:hover {
  color: var(--frk-color-ink);
}

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

  /*
   * Вокруг разделителя перед табами в макете (2399:13037 / 2413:2001 /
   * 2407:1798) по 24px с обеих сторон, а не 32, как между остальными
   * блоками панели — разделитель ниже даёт такой же отступ снизу.
   */
  margin-bottom: var(--frk-space-md);
}

.frk-product__buy-row {
  display: flex;
  gap: var(--frk-layout-gap);
}

/*
 * Высота ряда — 48px во всех трёх макетах (2407:1799 / 2413:2002 /
 * 2399:13032), не только на десктопе: кегль кнопки меняется по ширинам,
 * а высота остаётся одна и та же, поэтому задаём её явно, а не через
 * паддинги, зависимые от кегля.
 */
.frk-product__buy {
  flex: 1 1 auto;
  height: 48px;
}

/*
 * Выбранный вариант уже в корзине — чёрная «В корзине» (2648:733; баг-лист,
 * строка 40). Состояние ставит product-options.js, оно же у кнопки
 * закреплённой миниатюры. Наведение — как у золотой: заливка уходит, рамка остаётся.
 */
.frk-product__buy.is-in-cart,
.frk-product-mini__buy.is-in-cart {
  border-color: var(--frk-color-ink);
  background: var(--frk-color-ink);
  color: var(--frk-color-text-inverse);
}

.frk-product__buy.is-in-cart:hover,
.frk-product-mini__buy.is-in-cart:hover {
  background: transparent;
  color: var(--frk-color-ink);
}

.frk-product__favorite {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(0 0 0 / 40%);
  border-radius: var(--frk-radius);
  transition: border-color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-product__favorite:hover {
  border-color: var(--frk-color-ink);
}

/* В избранном — рамка тем же золотым, что и обводка сердца (heart-active.svg) */
.frk-product__favorite[aria-pressed="true"] {
  border-color: var(--frk-color-gold);
}

.frk-product__favorite img {
  width: 32px;
  height: 32px;
}

.frk-product__divider {
  border: none;
  border-top: 1px solid #d9d9d9;
  margin: 0 0 var(--frk-space-md);
}

/* --- Вкладки описания -------------------------------------------------------- */

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

/*
 * Список вкладок в макете (2407:1817) шире контейнера (553 / 348 на
 * мобильном) — переносом строк это не показано, значит ряд один и едет
 * вбок. До десктопа лента листается протяжкой (data-drag-scroll),
 * на десктопе вкладки умещаются полностью и перенос/прокрутка не нужны.
 */
.frk-product__tablist {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--frk-space-lg);
  overflow-x: auto;
  scrollbar-width: none;
}

.frk-product__tablist::-webkit-scrollbar {
  display: none;
}

/* Те же вкладки — размеры в окне «Таблица размеров» до десктопа (size-chart.css) */
.frk-product__tab,
.frk-size-chart__size {
  flex: 0 0 auto;
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: 24px;
  letter-spacing: var(--frk-tracking-serif);
  color: rgb(19 18 18 / 60%);
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-product__tab:hover,
.frk-size-chart__size:hover {
  color: var(--frk-color-ink);
}

.frk-product__tab[aria-selected="true"],
.frk-size-chart__size[aria-selected="true"] {
  color: var(--frk-color-ink);
}

/*
 * Размер, которого нет в выбранном цвете (решение заказчика): виден, но не
 * выбирается. Вид — как у прошедших дней в календаре (datepicker.css)
 */
.frk-product__chips .frk-filter-chip:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.frk-product__tabpanel {
  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);
  color: rgb(19 18 18 / 60%);
  max-width: 46ch;
}

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

/* ========================================================================= *
 * До десктопа: отступы галереи и панели по макету 360/768 отличаются
 * от общего ритма — переопределяем точечно, не трогая десктопные значения,
 * которые эти же свойства держат в других медиазапросах.
 * ========================================================================= */

@media (max-width: 1023px) {
  /* Фото → стикер «Новинка» — 10px (2408:1828 / 2413:2189), не 4 из ритма сетки */
  .frk-product__gallery {
    gap: 10px;
  }

  /* Стикер → заголовок — 8px, а не общий десктопный отступ секций (48px) */
  .frk-product__layout {
    gap: var(--frk-space-xs);
  }

  /* Цена → кнопки цвета — 60px по макету, шире стандартного lg-отступа (32px) */
  .frk-product__head {
    margin-bottom: 60px;
  }
}

/* ========================================================================= *
 * Планшет: чипы размера занимают вторую строку (3XL/4XL)
 * ========================================================================= */

@media (min-width: 768px) {
  .frk-product__chips--size {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ========================================================================= *
 * Десктоп: две колонки, панель зафиксирована
 * ========================================================================= */

@media (min-width: 1024px) {
  .frk-product__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--frk-layout-gap);
  }

  /*
   * На десктопе стикер лежит на фото (2399:13057), а миниатюры уходят
   * в отдельный ряд под ним — обратный расклад по сравнению с мобильным
   * и планшетом, поэтому области меняются местами.
   */
  .frk-product__gallery {
    flex: 0 0 50%;
    grid-template-areas: "media" "thumbs";
  }

  .frk-product__media {
    aspect-ratio: 949 / 1050;
  }

  /*
   * На десктопе снимок один общий (переключается кликом по миниатюре
   * в отдельном ряду, не лента) — прячем слайдер и возвращаем img/video.
   */
  .frk-product__slides {
    display: none;
  }

  .frk-product__media [data-product-main-image],
  .frk-product__media [data-product-main-video] {
    display: block;
  }

  .frk-product__media [data-product-main-image][hidden],
  .frk-product__media [data-product-main-video][hidden] {
    display: none;
  }

  .frk-product__badge {
    grid-area: media;
    align-self: start;
    margin: var(--frk-space-2xs);
  }

  .frk-product__info {
    flex: 1 1 0;
    min-width: 0;
    position: sticky;

    /* Высота плашки шапки плюс тот же отступ, что и у неё сверху */
    top: calc(80px + var(--frk-space-sm));
  }

  .frk-product__title {
    grid-area: title;
  }

  /*
   * Артикул в макете (2399:12983) стоит у верхнего правого края, в одной
   * строке с заголовком, а не отдельной строкой под описанием — так
   * только на десктопе, до него он идёт в потоке после описания.
   * .title-row теряет собственный бокс (display:contents), и заголовок
   * с описанием становятся вложенными ячейками сетки .head напрямую —
   * иначе артикул, лежащий на уровне .head, а не внутри .title-row,
   * нельзя было бы поставить в одну строку с заголовком.
   */
  .frk-product__head {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title sku" "excerpt excerpt" "price price";
    row-gap: var(--frk-space-lg);
  }

  .frk-product__title-row {
    display: contents;
  }

  .frk-product__sku {
    grid-area: sku;
    justify-self: end;
  }

  /* 733 из 950px колонки на 1920 (2399:12984; баг-лист, строка 39) — на узких десктопах в той же доле */
  .frk-product__excerpt {
    grid-area: excerpt;
    max-width: 77.2%;
  }

  .frk-product__price {
    grid-area: price;
    font-size: 48px;
  }

  .frk-product__option-label {
    font-size: var(--frk-size-ui-lg);
  }

  .frk-product__chips--size {
    display: flex;
    flex-wrap: nowrap;
  }

  .frk-product__chips--size .frk-filter-chip {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }

  /*
   * Только на десктопе (2399:13029) ссылка «Таблица размеров» возвращается
   * в строку заголовка «Размер», выровненная по правому краю.
   */
  .frk-product__option[data-product-option="размер"] {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label link" "chips chips";
    align-items: center;
  }

  .frk-product__option[data-product-option="размер"] .frk-product__option-label {
    grid-area: label;
  }

  .frk-product__option[data-product-option="размер"] .frk-product__chips {
    grid-area: chips;
  }

  .frk-product__option[data-product-option="размер"] .frk-product__size-table {
    grid-area: link;
    margin-top: 0;
  }

  .frk-product__tab {
    font-size: 36px;
  }

  /*
   * Слайдер миниатюр (2399:13601): ширина миниатюры фиксирована по макету
   * (230.94px), а не делит ширину галереи поровну — на 951px это ровно
   * 4 штуки плюс край пятой, и этот кусок виден нарочно: подсказывает,
   * что лента едет дальше. Остальные докручиваются протяжкой
   * (data-drag-scroll) — решение по интерактиву не из макета, а от заказчика.
   */
  .frk-product__thumbs {
    grid-area: thumbs;
    align-self: auto;
    justify-self: auto;
    margin-bottom: 0;
    justify-content: flex-start;
    gap: var(--frk-layout-gap);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .frk-product__thumbs::-webkit-scrollbar {
    display: none;
  }

  .frk-product__thumbs.is-dragging {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  .frk-product__thumb {
    flex: 0 0 231px;
    width: 231px;
    height: auto;
    aspect-ratio: 230.94 / 263.01;
    border: none;
    border-radius: var(--frk-radius);
    background: rgb(19 18 18 / 4%);
    opacity: 0.6;
    scroll-snap-align: start;
    transition: opacity var(--frk-motion-fast) var(--frk-motion-ease);
  }

  .frk-product__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .frk-product__thumb:hover,
  .frk-product__thumb[aria-current="true"] {
    opacity: 1;
    background: none;
  }

  .frk-product__thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: rgb(255 255 255 / 25%);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgb(255 255 255 / 65%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(255 255 255 / 40%);
    pointer-events: none;
  }

  .frk-product__thumb-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    background: rgb(255 255 255 / 95%);
    mask: url("/local/templates/frk/css/../images/icons/play.svg") center / contain no-repeat;
    -webkit-mask: url("/local/templates/frk/css/../images/icons/play.svg") center / contain no-repeat;
  }
}

/* End */


/* Start:/local/templates/frk/css/product-story.css?17906096419685*/
/*
 * Карточки «Премиальные материалы / Продуманный крой / Долговечная печать».
 *
 * Тот же приём чередования, что у .frk-detail на главной (см. details.css):
 * порядок в разметке не меняется, зеркалится только раскладка — так текст
 * читается в одном порядке и глазом, и скринридером. Отличие от .frk-detail —
 * здесь у каждой пары своя подложка-карточка, а не общее полотно.
 *
 * Три раскладки, по макетам 2408:1880 / 2413:2027 / 2399:13060:
 *   мобильный — колонка: текст, под ним портретное фото;
 *   планшет   — две равные колонки, фото портретное, карточки чередуются;
 *   десктоп   — фото 66% шириной, альбомное, чередование сохраняется.
 *
 * Дойдя до экрана, фото на десктопе раскрывается по высоте, а до десктопа —
 * разворачивается сверху вниз (product-story.js).
 */

/*
 * Отступ от вводного абзаца (.frk-product__lead в product.css) до первой
 * карточки — 24px на мобильном/планшете, 32 на десктопе (2399:13060 /
 * 2413:2027 / 2408:1880).
 */
.frk-product-story {
  display: grid;
  gap: var(--frk-layout-gap);
  padding-top: var(--frk-space-md);
}

.frk-product-story__item {
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-md);

  /* 6px по макетам мобильного и планшета (2408:1854 / 2413:2031), не 8 из шага сетки */
  padding: 6px;
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
}

/* В разметке фото идёт первым, а на мобильном под текстом — порядок меняем только визуально */
.frk-product-story__media {
  order: 1;
  aspect-ratio: 335 / 400;
  overflow: hidden;
  border-radius: var(--frk-radius);
}

/*
 * <picture> по умолчанию высотой по снимку, а не по рамке — без height:100%
 * у него img берёт натуральную пропорцию файла и object-fit не работает.
 */
.frk-product-story__media picture {
  display: block;
  height: 100%;
}

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

/* 12px между заголовком и описанием на мобильном и планшете (2408:1855 / 2413:2032) */
.frk-product-story__text {
  display: grid;
  gap: 12px;
}

/* Гарнитура одна на всех ширинах: Roboto Serif ExtraLight, как у заголовков секций (fonts.css) */
.frk-product-story__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: 36px;
  line-height: var(--frk-leading-display);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-product-story__note {
  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);
  color: rgb(19 18 18 / 60%);
}

/*
 * Планшет (2413:2031): текст и фото в две равные колонки, текст по центру
 * карточки по вертикали. Нечётные карточки — текст слева, фото справа;
 * чётные зеркальны, и их текст прижат к правому краю.
 */
@media (min-width: 768px) {
  .frk-product-story__item {
    flex-direction: row;
    align-items: center;
    gap: var(--frk-layout-gap);
  }

  .frk-product-story__media {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 307 / 366;
  }

  .frk-product-story__text {
    flex: 1 1 0;

    /* Без этого flex-элемент не сжимается уже своего контента и рвёт строку */
    min-width: 0;
  }

  .frk-product-story__item:nth-child(even) .frk-product-story__media {
    order: 0;
  }

  .frk-product-story__item:nth-child(even) .frk-product-story__text {
    text-align: right;
    align-items: flex-end;
  }
}

/*
 * До десктопа размер кадра не меняется — растянутое по высоте фото на узком
 * экране смотрелось вытянутым (решение заказчика). Вместо этого снимок
 * разворачивается сверху вниз из полосы, на планшете следом проявляется
 * текст — как в референсе анимации блока (2648:1447, кривые оттуда же). Место под фото
 * занято заранее, страница под пальцем не прыгает. Класс is-waiting ставит
 * и снимает product-story.js — без скрипта всё видно сразу.
 *
 * clip-path в покое явный inset(0), а не none: между none и inset
 * переход не интерполируется.
 */
@media (max-width: 1023px) {
  .frk-product-story__media {
    clip-path: inset(0);
    transition: clip-path 900ms cubic-bezier(0.42, 0, 0.18, 1);
  }

  /* В ожидание — мгновенно: иначе при загрузке фото сначала видно, а потом сворачивается */
  .frk-product-story__item.is-waiting .frk-product-story__media {
    clip-path: inset(0 0 100% 0);
    transition: none;
  }
}

/* Текст проявляется только рядом с фото: на телефоне он над снимком и висел бы пустым местом, пока фото не дойдёт до экрана */
@media (min-width: 768px) and (max-width: 1023px) {
  .frk-product-story__text {
    transition: opacity 650ms cubic-bezier(0.5, 0, 0.5, 1) 250ms;
  }

  .frk-product-story__item.is-waiting .frk-product-story__text {
    opacity: 0;
    transition: none;
  }
}

@media (min-width: 1024px) {
  .frk-product-story {
    padding-top: var(--frk-space-lg);
  }

  .frk-product-story__item {
    padding: var(--frk-space-sm);
  }

  /* 1254 из 1872px внутренней ширины карточки (2399:13064) — 66.99%, а не круглые 66 */
  .frk-product-story__media {
    flex: 0 0 66.99%;
    aspect-ratio: 1254 / 480;
  }

  /*
   * Раскрытое фото — 1254×800 (2187:337; баг-лист, строка 42), класс ставит
   * product-story.js. Снимок один на оба состояния: кадр 480 — середина
   * кадра 800, её показывает object-fit: cover.
   */
  .frk-product-story__item.is-expanded .frk-product-story__media {
    aspect-ratio: 1254 / 800;
  }

  /*
   * Кривая — из референса анимации блока (2648:1423). Длительность дольше
   * --frk-motion-slow: на 560ms фото раздвигало страницу рывком (замечание
   * заказчика).
   */
  .frk-product-story__media.is-growing {
    transition: height 900ms cubic-bezier(0.42, 0, 0.18, 1);
  }

  /* 24px между заголовком и описанием (2399:13065) */
  .frk-product-story__text {
    gap: var(--frk-space-md);
  }

  /*
   * Колонка текста в макете 614px и стоит в 4px от фото, но описание
   * переносится раньше и до фото не доходит. Inter у нас отрисовывается
   * на ~1% уже, чем в Figma: в строку влезало лишнее слово и текст
   * упирался в фото (баг-лист, строка 43). 94.5% колонки (580 из 614)
   * возвращают переносы макета; во второй карточке описание в макете
   * и так уже — 414 из 614 (2399:13074).
   */
  .frk-product-story__note {
    max-width: 94.5%;
  }

  /* Колонка — грид: к правому краю узкое описание прижимает justify-self, а не text-align */
  .frk-product-story__item:nth-child(even) .frk-product-story__note {
    max-width: 67.4%;
    justify-self: end;
  }

  /*
   * Кегль растёт линейно, а не скачком на 96 при входе в десктоп — иначе
   * на 1024–1300 слово «Продуманный» не помещается в колонку текста и
   * ломает раскладку на всю ширину страницы. В макете 96px (Source Serif 4),
   * но Roboto Serif шире: «Продуманный» при 96px даёт 627px при колонке
   * 614, то есть вылезает на 13px к фото. Оптический размер шрифта
   * вариативный (слово на малом кегле шире пропорционально), поэтому наклон
   * подобран по замеру ширины слова на разных кеглях: на любой ширине
   * от 1024 до 2560 «Продуманный» помещается в колонку с запасом от 5px.
   */
  .frk-product-story__title {
    font-size: clamp(36px, 5.25vw - 7.7px, 94px);
  }
}

/* End */


/* Start:/local/templates/frk/css/product-related.css?17906925212327*/
/*
 * «Вам может понравиться» — лента похожих товаров.
 *
 * Общий слайдер (.frk-slider + slider.js): стрелки у заголовка —
 * .frk-slider__arrows--head, как в «Выборе в деталях» на главной и в «Вы
 * смотрели» в корзине. Карточки — .frk-product-card--large, тот же
 * компонент, что в каталоге.
 */

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

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

/*
 * Заголовок секции (2399:13086): в макете Source Serif 4 Light, в проекте
 * заголовки секций и крупные утверждения — Roboto Serif ExtraLight (fonts.css),
 * как у .frk-catalog__title и заголовков главной. 36px до десктопа, дальше
 * плавно до 96 на 1920 (--frk-size-section-title).
 */
.frk-related__title {
  margin-block: calc(-1 * var(--frk-title-leading-trim));
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-section-title);
  line-height: var(--frk-leading-title);
  letter-spacing: var(--frk-tracking-serif);
}

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

.frk-related__item {
  flex: 0 0 auto;
  width: 278px;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .frk-related__item {
    width: 312px;
  }
}

@media (min-width: 1024px) {
  /*
   * Фиксированные 632px верны только на холсте макета (1920) — на любой
   * промежуточной десктопной ширине (1024–1919) карточка той же ширины
   * либо не влезает, либо оставляет пустой хвост в ленте. Та же формула,
   * что у .frk-picks__item (picks.css): 632 из 1904px канвы, дальше течёт
   * вместе с шириной вьюпорта и упирается в 632px уже на холсте макета.
   */
  .frk-related__item {
    width: min(33.2vw, 632px);
  }
}

/* End */


/* Start:/local/templates/frk/css/product-mini.css?17906096415906*/
/*
 * Закреплённая миниатюра товара (макет 2381:15828; баг-лист, строка 45) —
 * плашка в правом нижнем углу экрана, только на десктопе. Показывает её
 * product-mini.js, когда основная кнопка «Добавить в корзину» уходит за
 * верх экрана.
 *
 * Внутри — та же строка товара, что в корзине: кегли названия, цены,
 * описания и выпадающие списки цвета и размера берём из cart.css
 * (.frk-cart-item__variant*), здесь только раскладка плашки и отличия
 * от корзины.
 */

.frk-product-mini {
  display: none;
}

@media (min-width: 1024px) {
  /* 636×269: фото 223 + зазор 4 + колонка 393, поля по 8 (2381:15828) */
  .frk-product-mini {
    position: fixed;
    right: var(--frk-space-xs);
    /* Пока внизу уведомление о cookie, плашка стоит над ним (cookie-banner.js) */
    bottom: calc(var(--frk-space-xs) + var(--frk-cookie-banner-space, 0px));
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--frk-space-2xs);
    width: 636px;
    padding: var(--frk-space-xs);
    border-radius: var(--frk-radius);
    background: var(--frk-color-surface-muted);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition:
      opacity var(--frk-motion-base) var(--frk-motion-ease),
      transform var(--frk-motion-base) var(--frk-motion-ease),
      visibility 0s linear var(--frk-motion-base);
  }

  /*
   * В покое плашка полупрозрачная — под ней видно страницу (решение заказчика,
   * в макете её нет). Полностью проявляется под курсором, при открытом списке
   * (иначе он читается сквозь страницу) и при переходе с клавиатуры.
   */
  .frk-product-mini.is-visible {
    opacity: 0.7;
    visibility: visible;
    transform: none;
    transition:
      opacity var(--frk-motion-base) var(--frk-motion-ease),
      transform var(--frk-motion-base) var(--frk-motion-ease);
  }

  .frk-product-mini.is-visible:hover,
  .frk-product-mini.is-visible:has(:focus-visible),
  .frk-product-mini.is-visible:has(.frk-cart-item__variant-menu:not([hidden])) {
    opacity: 1;
  }

  /* Фото в макете на 2px выше строки (255 при 253) и заходит в поля плашки */
  .frk-product-mini__media {
    flex: 0 0 223px;
    height: 255px;
    margin-block: -1px;
    overflow: hidden;
    border-radius: var(--frk-radius);
    background: rgb(19 18 18 / 4%);
  }

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

  .frk-product-mini__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
  }

  .frk-product-mini__about {
    display: grid;
    gap: var(--frk-space-xs);
  }

  .frk-product-mini__head {
    display: flex;
    justify-content: space-between;
    gap: var(--frk-space-sm);
    font-family: var(--frk-font-title);
    font-weight: var(--frk-weight-light);
    font-size: 32px;
    line-height: var(--frk-leading-base);
    letter-spacing: var(--frk-tracking-serif);
    white-space: nowrap;
  }

  .frk-product-mini__title {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .frk-product-mini__price {
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* В макете две строки; описание из каталога бывает длиннее — обрезаем по второй */
  .frk-product-mini__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-weight: var(--frk-weight-light);
    font-size: 20px;
    line-height: var(--frk-leading-base);
    letter-spacing: var(--frk-tracking-ui);
    color: rgb(19 18 18 / 60%);
  }

  .frk-product-mini__options {
    display: flex;
    gap: var(--frk-space-md);
  }

  /* Подпись в макете чёрная, а не приглушённая, как в корзине */
  .frk-product-mini .frk-cart-item__variant-label {
    color: var(--frk-color-ink);
  }

  /* Значение набрано с интерлиньяжем 1.05 (Heading/H5 в 2381:15812), а не 1.2, как в корзине */
  .frk-product-mini .frk-cart-item__variant-value {
    line-height: var(--frk-leading-tight);
  }

  .frk-product-mini .frk-cart-item__variant-value.is-empty {
    color: rgb(19 18 18 / 60%);
  }

  /*
   * Уголок в макете — «»», повёрнутый вниз (18.8×10.5), тот же глиф, что
   * у стрелки FAQ. Квадратная рамка: поворот не меняет место в строке.
   */
  .frk-product-mini .frk-cart-item__variant-chevron {
    width: 19px;
    height: 19px;
    -webkit-mask-image: url("/local/templates/frk/css/../images/icons/chevron-quote.svg");
    mask-image: url("/local/templates/frk/css/../images/icons/chevron-quote.svg");
  }

  /* Плашка у нижнего края экрана — список раскрывается вверх */
  .frk-product-mini .frk-cart-item__variant-menu {
    top: auto;
    bottom: 100%;
    margin: 0 0 var(--frk-space-2xs);
  }

  .frk-product-mini__buy {
    width: 100%;
    height: 48px;
  }
}

/* Размер, которого нет в выбранном цвете, — как неактивный чип карточки (product.css) */
.frk-product-mini .frk-cart-item__variant-option:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* End */


/* Start:/local/templates/frk/css/size-chart.css?17906601329166*/
/*
 * Окно «Таблица размеров» на карточке товара: 2808:5545 (1920),
 * 2808:6007 (640), 2808:5845 (360).
 *
 * На десктопе это таблица по центру экрана. До десктопа макет другой:
 * заголовок с крестом, строка размеров и мерки выбранного размера
 * списком; на планшете окно прижато к низу экрана, на телефоне занимает
 * его целиком. Обе раскладки лежат в разметке (шаблон выводит их из одних
 * данных); размер переключает product-tabs.js, окно — size-chart.js.
 *
 * Подложка и крест — общие с выдвижными панелями: подключать вместе
 * с panel-base.css. Страницу под окном держит scroll-lock.js.
 */

.frk-size-chart {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  justify-content: center;
  /* Полей ввода в окне нет — живая высота безопасна, как у корзины (cart.css) */
  height: 100vh;
  height: 100dvh;
  height: var(--frk-vh, 100dvh);
}

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

.frk-size-chart__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px 6px 8px;
  border: 1px solid var(--frk-color-border);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface);
  animation: frk-size-chart-in var(--frk-motion-base) var(--frk-motion-ease);
}

@keyframes frk-size-chart-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frk-size-chart__panel {
    animation: none;
  }
}

/* Линия под заголовком — стиль Color/Overlay 40 в макете, как и линия под шапкой таблицы */
.frk-size-chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--frk-space-sm);
  padding-bottom: var(--frk-space-sm);
  border-bottom: 1px solid var(--frk-color-overlay);
}

.frk-size-chart__title {
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: 24px;
  line-height: var(--frk-leading-tight);
  color: var(--frk-color-ink);
}

/* Крест 19.64×18.82 стоит в 6px от края линии (2808:6037); кнопка 24px — зона нажатия */
.frk-size-chart__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 4px;
}

/*
 * Прокручивается только содержимое: заголовок с крестом остаются на месте.
 * Область шире строки на поля окна, иначе обводка фокуса у крайней вкладки
 * и у списка мерок обрезается краем прокрутки; снизу добирает 12px поля.
 */
.frk-size-chart__body {
  flex: 1 1 auto;
  min-height: 0;
  margin-inline: -6px;
  padding: 15px 6px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------------------- *
 * До десктопа: размеры — вкладки того же вида, что «Описание / Материал…»
 * на карточке (общие правила с .frk-product__tab в product.css), под ними
 * мерки выбранного размера.
 * ------------------------------------------------------------------------- */

.frk-size-chart__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--frk-space-sm) var(--frk-space-md);
}

.frk-size-chart__size {
  line-height: var(--frk-leading-tight);
}

.frk-size-chart__measures {
  margin-top: var(--frk-space-sm);
}

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

.frk-size-chart__list {
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-xs);
  margin: 0;
}

.frk-size-chart__item {
  display: flex;
  justify-content: space-between;
  gap: var(--frk-space-sm);
  font-weight: var(--frk-weight-light);
  font-size: 16px;
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-size-chart__item dt {
  font-family: var(--frk-font-title);
}

.frk-size-chart__item dd {
  margin: 0;
  color: rgb(19 18 18 / 50%);
  white-space: nowrap;
}

.frk-size-chart__table {
  display: none;
}

/* Телефон — окно на весь экран (2808:5845), планшет — по высоте содержимого у нижнего края (2808:6007) */
@media (min-width: 640px) and (max-width: 1023px) {
  .frk-size-chart {
    align-items: flex-end;
  }

  .frk-size-chart__panel {
    max-height: calc(100% - var(--frk-space-xl));
  }
}

/* ------------------------------------------------------------------------- *
 * Десктоп (2808:5545): одна таблица, заголовка в макете нет — он остаётся
 * для экранных читалок. Креста в макете тоже нет: он над правым углом окна,
 * чтобы не менять само окно.
 * ------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* Поля сверху и снизу оставляют место кресту над окном любой высоты */
  .frk-size-chart {
    align-items: center;
    padding: var(--frk-space-xl) var(--frk-space-sm);
  }

  .frk-size-chart__panel {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    padding: var(--frk-space-xs);
  }

  .frk-size-chart__head {
    padding: 0;
    border: none;
  }

  /* То же, что .frk-visually-hidden (base.css): до десктопа заголовок виден */
  .frk-size-chart__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /*
   * Над окном может оказаться и светлая страница, и чёрная шапка — крест
   * на белой плашке в рамке окна виден на любом фоне. Зазор до окна 8px.
   */
  .frk-size-chart__close {
    position: absolute;
    right: -1px;
    bottom: 100%;
    width: 32px;
    height: 32px;
    margin: 0 0 9px;
    border: 1px solid var(--frk-color-border);
    border-radius: var(--frk-radius);
    background: var(--frk-color-surface);
  }

  .frk-size-chart__body {
    margin-inline: 0;
    padding: 0;
    overflow: auto;
  }

  .frk-size-chart__tabs {
    display: none;
  }

  /*
   * Ширины столбцов в макете — по содержимому (110…254 при ширине 1206),
   * поэтому раскладка автоматическая: заголовок плюс по 18px с боков дают
   * на 1920 те же столбцы с точностью до нескольких пикселей. Кегль и поля
   * от 20/18 на 1920 до 16/13 на 1024 — так заголовки столбцов и на узком
   * десктопе стоят в одну строку.
   */
  .frk-size-chart__table {
    display: table;
    border-collapse: separate;
    border-spacing: 0;
    font-size: clamp(16px, 0.4464vw + 11.43px, 20px);
    font-weight: var(--frk-weight-light);
    color: var(--frk-color-ink);
  }

  /* Шаг строк 40px: текст 24 и по 8 сверху и снизу — то есть 16 между строками */
  .frk-size-chart__table th,
  .frk-size-chart__table td {
    padding: var(--frk-space-xs) clamp(13px, 0.558vw + 7.29px, 18px);
    text-align: center;
    vertical-align: middle;
  }

  .frk-size-chart__table th {
    font-family: var(--frk-font-title);
    font-weight: inherit;
    line-height: var(--frk-leading-tight);
    letter-spacing: var(--frk-tracking-serif);
  }

  /* Линия под шапкой: 16px от заголовков и 16px до первой строки */
  .frk-size-chart__table thead th {
    padding-top: 0;
    padding-bottom: var(--frk-space-sm);
    border-bottom: 1px solid var(--frk-color-overlay);
  }

  .frk-size-chart__table tbody tr:first-child > * {
    padding-top: 15px;
  }

  .frk-size-chart__table tbody tr:last-child > * {
    padding-bottom: 0;
  }

  .frk-size-chart__table td {
    line-height: var(--frk-leading-base);
    letter-spacing: var(--frk-tracking-ui);
    color: rgb(19 18 18 / 50%);
    white-space: nowrap;
    transition: background-color var(--frk-motion-base) var(--frk-motion-ease);
  }
}

/* Строка и столбец ячейки под курсором (size-chart.js) — серая подложка, текст как был */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .frk-size-chart__table td.is-active {
    background-color: rgb(19 18 18 / 6%);
  }
}

/* End */
/* /local/templates/frk/css/breadcrumbs.css?17906096411350 */
/* /local/templates/frk/css/product.css?179069252129644 */
/* /local/templates/frk/css/product-story.css?17906096419685 */
/* /local/templates/frk/css/product-related.css?17906925212327 */
/* /local/templates/frk/css/product-mini.css?17906096415906 */
/* /local/templates/frk/css/size-chart.css?17906601329166 */