/* 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/checkout.css?179069252128623*/
/*
 * Оформление заказа (макеты «Чекаут_самовывоз/пвз/курьер», node
 * 2056:36952 / 2056:38434 / 2056:39076 — три состояния одной формы,
 * переключаемые способом доставки, а не три разные страницы) и
 * «Успешное оформление» (2056:37785).
 *
 * Список товаров справа собирается из корзины (frk-cart-store.js),
 * а не захардкожен — «3 товара» и сами позиции в макете лишь пример.
 *
 * Сноска подвала с картой России, которая в макетах чекаута — на этих
 * четырёх экранах, а не на остальных страницах, — не воспроизведена:
 * иллюстрация карты хранится только во временных ассетах Figma, готового
 * файла для неё в проекте нет. Здесь подключён обычный подвал.
 */

.frk-checkout {
  /* 8px от шапки до заголовков (2056:36953/37465 vs. низ чёрного бара) */
  padding-top: 8px;
}

.frk-checkout__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--frk-space-md);
  /* До формы/товаров 24px, на десктопе 32 (баг-лист, строка 16; в макете 2056:37782 было 47) */
  margin-bottom: var(--frk-space-md);
}

@media (min-width: 1024px) {
  .frk-checkout__head {
    margin-bottom: var(--frk-space-lg);
  }
}

.frk-checkout__title,
.frk-checkout__count {
  /* Заказчик подтвердил: крупные заголовки страницы — Roboto Serif, а не Source
     Serif 4 из макета (тот держим для названий товаров/цены, см. fonts.css) */
  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-page-title);
  line-height: var(--frk-leading-title);
  letter-spacing: var(--frk-tracking-serif);
}

/*
 * «N товаров» до десктопа стоит не рядом с «Оформление заказа», а над
 * списком товаров после формы (2600:4100 / 2600:4805; баг-лист, строка 53),
 * на десктопе — в строке заголовков над своей колонкой. Элементов два,
 * оба обновляет checkout.js, виден один.
 */
.frk-checkout__head .frk-checkout__count {
  display: none;
}

.frk-checkout__count--list {
  margin-bottom: calc(12px - var(--frk-title-leading-trim));
}

.frk-checkout__layout {
  display: grid;
  gap: var(--frk-space-xl);
}

/* --- Форма --------------------------------------------------------------- */

.frk-checkout__section {
  display: grid;
  gap: var(--frk-space-xs);
  margin-bottom: var(--frk-space-lg);
}

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

.frk-checkout__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--frk-space-xs);
}

.frk-checkout__field {
  flex: 1 1 220px;
  padding: var(--frk-space-sm);
  border: none;
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
  font-family: var(--frk-font-ui);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-title-md);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-checkout__field::placeholder {
  color: rgb(19 18 18 / 60%);
}

.frk-checkout__field--full {
  flex-basis: 100%;
}

/* Стрелка — уголок «»», повёрнутый вниз, 19×15 (2600:1780; баг-лист, строка 46): тот же файл, что у полей сертификата */
.frk-checkout__field--select {
  appearance: none;
  background-image: url("/local/templates/frk/css/../images/icons/field-chevron.svg");
  background-repeat: no-repeat;
  background-position: right var(--frk-space-sm) center;
  background-size: 19px 15px;
  transform: none;
  padding-right: calc(var(--frk-space-sm) * 2 + 19px);
}

/*
 * Поле на серой плашке — форма «Есть вопросы?» на странице «Контакты»
 * (макет 2075:21399). Заливка белая, а не серая, отступ 12/16 и кегль 20
 * держатся на любой ширине: поле плотнее, чем в оформлении заказа.
 */
.frk-checkout__field--on-muted {
  padding: 12px var(--frk-space-sm);
  background: var(--frk-color-surface);
  font-size: 20px;
}

/*
 * Плашка с переключателем — общая для оформления заказа и оплаты на
 * странице сертификата (gift-card.css перестраивает её в два полуряда).
 */
.frk-checkout__delivery {
  display: flex;
  flex-wrap: wrap;
  padding: var(--frk-space-sm);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
  gap: var(--frk-space-md);
}

.frk-checkout__radio {
  display: flex;
  align-items: center;
  gap: var(--frk-space-xs);
  padding-right: var(--frk-space-md);
  border-right: 1px solid rgb(19 18 18 / 15%);
  font-size: var(--frk-size-title-md);
  letter-spacing: var(--frk-tracking-ui);
  cursor: pointer;
}

.frk-checkout__radio:last-child {
  border-right: none;
  padding-right: 0;
}

/*
 * Выбор доставки и оплаты в оформлении заказа. Базово пункты идут колонкой:
 * между ними горизонтальный разделитель с отступом 16 сверху и снизу, поля
 * плашки 16/12, текст 16 (2600:4903 / 2600:3925; баг-лист, строка 52).
 * В строку пункты встают только на десктопе и только когда все помещаются
 * по 295px с зазором 16, — разделитель у правого края колонки (2600:1759;
 * строки 48 и 50). Это решает контейнерный запрос по ширине самой плашки:
 * три пункта доставки помещаются только около 1920, два пункта оплаты —
 * уже с ~1300.
 */
.frk-checkout__form .frk-checkout__delivery {
  container-type: inline-size;
  gap: var(--frk-space-sm);
  padding: var(--frk-space-sm) 12px;
}

.frk-checkout__form .frk-checkout__radio {
  flex: 0 0 100%;
  padding-right: 0;
  padding-bottom: var(--frk-space-sm);
  border-right: none;
  border-bottom: 1px solid rgb(19 18 18 / 20%);
  font-weight: var(--frk-weight-light);

  /* 16 на планшете и телефоне, 20 на 1920 (2600:4907 / 2600:1764) — плавно, без скачка на 1024 */
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
}

.frk-checkout__form .frk-checkout__radio:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/*
 * Сумма колонок 3×295 + 2×16 = 917, для двух пунктов — 606; порог на
 * несколько px ниже, а сами колонки — flex: 1 1 0 с потолком 295: колонка
 * формы на 1920 выходит 948, а не 949, и с базой 295 третий пункт
 * переносился бы, не успев ужаться на доли px. Разделитель — у всех,
 * кроме последнего пункта.
 */
@media (min-width: 1024px) {
  .frk-checkout__form .frk-checkout__delivery {
    padding: 12px var(--frk-space-sm);
  }

  @container (min-width: 600px) {
    .frk-checkout__form .frk-checkout__radio:first-child:nth-last-child(2),
    .frk-checkout__form .frk-checkout__radio:first-child:nth-last-child(2) ~ .frk-checkout__radio {
      flex: 1 1 0;
      max-width: 295px;
      padding-bottom: 0;
      border-bottom: none;
    }

    .frk-checkout__form .frk-checkout__radio:first-child:nth-last-child(2) {
      padding-right: var(--frk-space-sm);
      border-right: 1px solid rgb(19 18 18 / 20%);
    }
  }

  @container (min-width: 910px) {
    .frk-checkout__form .frk-checkout__radio {
      flex: 1 1 0;
      max-width: 295px;
      padding-bottom: 0;
      border-bottom: none;
    }

    /* Отступ перед разделителем — текст не упирается в линию, если колонка ужалась */
    .frk-checkout__form .frk-checkout__radio:not(:last-child) {
      padding-right: var(--frk-space-sm);
      border-right: 1px solid rgb(19 18 18 / 20%);
    }
  }
}

/* Кольцо 16px одно на переключатель способа доставки и на чекбокс согласия — в макете это один и тот же кружок */
.frk-checkout__radio input,
.frk-checkout__consent input {
  appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid var(--frk-color-ink);
  border-radius: 50%;
  transition: background-color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-checkout__radio input:checked,
.frk-checkout__consent input:checked {
  background: var(--frk-color-ink);
  box-shadow: inset 0 0 0 3px var(--frk-color-surface-muted);
}

/* Выбранный способ доставки и оплаты — кружок залит целиком (2600:1763 / 2600:4914), без светлого кольца внутри */
.frk-checkout__radio input:checked {
  box-shadow: none;
}

/*
 * Согласие на обработку персональных данных (152-ФЗ). Подпись набрана Light 14
 * на любой ширине; кольцо краснеет, когда отправку остановило неотмеченное
 * согласие (aria-invalid ставит скрипт формы).
 */
.frk-checkout__consent {
  display: flex;
  align-items: center;
  gap: var(--frk-space-xs);
  font-weight: var(--frk-weight-light);
  font-size: 14px;
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  cursor: pointer;
}

.frk-checkout__consent input {
  margin: 0;
}

.frk-checkout__consent input[aria-invalid="true"] {
  border-color: var(--frk-color-error);
}

/* Ссылка на страницу согласия: подчёркнута всегда, по наведению становится золотой */
.frk-checkout__consent a {
  color: inherit;
  text-decoration: underline;
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-checkout__consent a:hover {
  color: var(--frk-color-text-accent);
}

.frk-checkout__delivery-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--frk-space-xs);
  margin-top: var(--frk-space-xs);
}

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

/* Ссылка и примечание — отдельной строкой под парой полей, а не рядом с ними в ряду */
.frk-checkout__delivery-fields > .frk-checkout__link,
.frk-checkout__delivery-fields > .frk-checkout__links,
.frk-checkout__delivery-fields > .frk-checkout__note {
  flex: 0 0 100%;
}

/* «Выбрать ПВЗ на карте» и «Выбрать постамат» — рядом, в одну строку */
.frk-checkout__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--frk-space-md);
}

.frk-checkout__links[hidden],
.frk-checkout__note[hidden] {
  display: none;
}

.frk-checkout__link {
  display: inline-block;
  margin-top: var(--frk-space-xs);
  color: var(--frk-color-gold);
  font-size: var(--frk-size-title-md);
  letter-spacing: var(--frk-tracking-ui);
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

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

.frk-checkout__note {
  display: flex;
  align-items: center;
  gap: var(--frk-space-xs);

  /* От ссылки над ним 16px: 8 своих + 8 зазора группы полей (2600:4775 → 4776; баг-лист, строка 47) */
  margin-top: var(--frk-space-xs);
  font-size: var(--frk-size-ui-md);
  color: rgb(19 18 18 / 60%);
}

.frk-checkout__note strong {
  font-weight: var(--frk-weight-regular);
  color: var(--frk-color-ink);
}

.frk-checkout__card-select {
  margin-top: var(--frk-space-xs);
  width: 100%;
}

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

/* --- Итого ----------------------------------------------------------------- */

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

/* Без товаров итог прячется вместе с формой (checkout.js) */
.frk-checkout__summary[hidden] {
  display: none;
}

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

.frk-checkout__totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--frk-space-sm);
  font-size: var(--frk-size-ui-md);
}

.frk-checkout__totals-row .frk-checkout__totals-value {
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: 24px;
}

.frk-checkout__totals-row--grand .frk-checkout__totals-value {
  font-size: 36px;
}

.frk-checkout__submit {
  width: 100%;
}

.frk-checkout__error {
  color: var(--frk-color-error);
  font-size: var(--frk-size-ui-md);
}

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

/* --- Список товаров ---------------------------------------------------------- */

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

.frk-checkout-item {
  display: flex;
  gap: var(--frk-space-xs);
  padding-bottom: var(--frk-space-md);
  border-bottom: 1px solid var(--frk-color-surface-muted);
}

.frk-checkout-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/*
 * Фото держит пропорцию рамки и не тянется на высоту текста рядом
 * (align-self), картинка лежит поверх рамки абсолютно — так же, как
 * в строке корзины (cart.css). Иначе на 360 при трёх строках описания
 * фото вытягивалось до 140×200.
 */
.frk-checkout-item__media {
  position: relative;
  flex-shrink: 0;
  align-self: flex-start;
  width: 140px;
  aspect-ratio: 473 / 540;
  overflow: hidden;
  border-radius: var(--frk-radius);
  background: rgb(19 18 18 / 4%);
}

.frk-checkout-item__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frk-checkout-item__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--frk-space-sm);
}

.frk-checkout-item__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--frk-space-sm);
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-title-md);
}

/* Цена не переносится: знак ₽ не должен оставаться на второй строке — вместо неё переносится название */
.frk-checkout-item__title-row > p:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}

/* не длиннее двух строк, как описание в карточке товара */
.frk-checkout-item__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: var(--frk-size-ui-md);
  line-height: var(--frk-leading-base);
  color: rgb(19 18 18 / 60%);
}

/*
 * До десктопа описание живёт в колонке названия и под цену не заходит:
 * шапка строки — сетка «название | цена», описание во второй строке левой
 * колонки, 8px от названия, не длиннее двух строк (2600:4926). На телефоне
 * описания нет, как в макете 2600:4046 (решение заказчика). title-row
 * растворяется (display: contents), чтобы название и цена стали ячейками
 * этой сетки; шрифт они по-прежнему наследуют от него.
 */
@media (max-width: 1023px) {
  .frk-checkout-item__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--frk-space-sm);
  }

  .frk-checkout-item__head .frk-checkout-item__title-row {
    display: contents;
  }

  .frk-checkout-item__excerpt {
    grid-column: 1;
    margin-top: var(--frk-space-xs);
  }
}

@media (max-width: 767px) {
  .frk-checkout-item__excerpt {
    display: none;
  }
}

.frk-checkout-item__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--frk-space-sm);
  flex-wrap: wrap;
}

.frk-checkout-item__variants {
  display: flex;
  gap: var(--frk-space-md);
}

.frk-checkout-item__variant {
  display: grid;
  gap: var(--frk-space-2xs);
}

/*
 * Количество прижато к правому краю строки вместе с подписью (2600:1693;
 * баг-лист, строка 49). margin-left: auto — на узком экране блок уходит
 * на свою строку и без него встал бы слева.
 */
.frk-checkout-item__variant--qty {
  justify-items: end;
  margin-left: auto;
  text-align: right;
}

.frk-checkout-item__variant-label {
  /* 16px, чёрный — как в макете (2056:37479 и рядом), а не серый 12px */
  font-size: 16px;
  letter-spacing: var(--frk-tracking-ui);
  color: var(--frk-color-ink);
}

.frk-checkout-item__variant-value {
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-title-md);
}

/*
 * Цвет — кружок без подписи названия (тот же приём, что у чипа цвета
 * в фильтре и у варианта в корзине): 24×24, заливка инлайн-стилем по hex.
 */
.frk-checkout-item__swatch {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgb(19 18 18 / 15%);
}

/* --- Пусто (некуда оформлять) ------------------------------------------------ */

/*
 * Стилистика и отступы — с пустого «Избранного» (favorites.css:
 * .frk-favorites__empty-title/-note, кнопка высотой 49px), а не собственный
 * набор: тот же приём «заголовок + подпись + кнопка», левый край, а не центр.
 */
.frk-checkout__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--frk-space-lg);
}

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

.frk-checkout__empty-head {
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-xs);
}

.frk-checkout__empty-title {
  margin-top: -5.8px;
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: var(--frk-tracking-serif);
  color: var(--frk-color-ink);
}

.frk-checkout__empty-note {
  font-family: var(--frk-font-ui);
  font-weight: var(--frk-weight-light);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
}

.frk-checkout__empty .frk-button {
  height: 49px;
}

/*
 * Без товаров форма и колонка товаров пустые, и весь зазор до подвала
 * шёл ещё и от собственного padding-top футера (--frk-rhythm-footer) —
 * получался двойной отступ, тот же баг, что заранее обойдён в catalog.css
 * и favorites.css. :has() ограничивает фикс только пустым состоянием —
 * с товарами отступ до подвала не трогаем, он уже сверен и принят.
 */
.frk-checkout:has(> [data-checkout-empty]:not([hidden])) {
  padding-bottom: 80px;
}

.frk-checkout:has(> [data-checkout-empty]:not([hidden])) ~ .frk-footer {
  padding-top: 0;
}

/* --- Успешное оформление -------------------------------------------------- */

.frk-checkout-success {
  /* Класс .frk-page на <body> прижимает футер к низу окна (base.css) — короткая страница, как и пустой чекаут */

  /* 8px от шапки до заголовка, как на самом чекауте */
  padding-top: 8px;
  padding-bottom: var(--frk-rhythm);
  display: grid;

  /*
   * До блока поддержки 24 на телефоне и планшете (2600:5776 / 2600:6074),
   * 32 на 1920 (2600:3105 → 3564; баг-лист, строка 51) — плавно от 768.
   */
  gap: clamp(24px, 18.67px + 0.694vw, 32px);

  /* Страница короче окна (футер прижат к низу) — без этого сетка раздала бы свободную высоту между строками */
  align-content: start;
}

.frk-checkout-success__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-page-title);
  line-height: var(--frk-leading-title);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-checkout-success__meta {
  margin-top: var(--frk-space-sm);
  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-checkout-success__meta strong {
  font-weight: var(--frk-weight-regular);
  color: var(--frk-color-ink);
}

/* Поддержка → кнопка 32px на всех ширинах (2600:3564 / 2600:5767); до десктопа блок во всю ширину (2600:6074) */
.frk-checkout-success__support {
  display: grid;
  align-content: start;
  gap: var(--frk-space-lg);
}

.frk-checkout-success__support-note {
  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%);
}

/* Подпись → контакты 16px, между контактами 8 (2600:3565 / 2600:5768) */
.frk-checkout-success__support-contacts {
  display: grid;
  gap: var(--frk-space-xs);
  margin-top: var(--frk-space-sm);
  font-size: var(--frk-size-ui-lg);
}

/*
 * До десктопа кнопка во всю ширину — на телефоне и на планшете (2600:5773 /
 * 2600:6080), на десктопе по тексту. По той же логике «В каталог» в пустой
 * корзине (решение заказчика).
 */
.frk-checkout-success__cta,
.frk-checkout__empty .frk-button {
  width: 100%;
}

@media (min-width: 1024px) {
  .frk-checkout-success__support {
    max-width: 420px;
  }

  .frk-checkout-success__cta,
  .frk-checkout__empty .frk-button {
    width: max-content;
  }
}

/* ========================================================================= *
 * До десктопа: форма → товары → итог
 * ========================================================================= */

/*
 * Итог в разметке стоит после списка товаров, поэтому до десктопа блоки
 * идут в порядке макета сами: форма → «N товаров» и товары → итог
 * и «Оформить заказ» (2600:4452 / 2600:3618; баг-лист, строка 53).
 * Зазор сетки снят — отступы задают margin секций формы и колонки товаров
 * (от комментария до товаров и от товаров до итога по 32).
 */
@media (max-width: 1023px) {
  .frk-checkout__layout {
    gap: 0;
  }

  .frk-checkout__items-col {
    margin-bottom: var(--frk-space-lg);
  }
}

/* ========================================================================= *
 * Десктоп: форма слева, список товаров справа
 * ========================================================================= */

@media (min-width: 1024px) {
  /* На десктопе «N товаров» — в строке заголовков, над колонкой товаров */
  .frk-checkout__head .frk-checkout__count {
    display: block;
  }

  .frk-checkout__count--list {
    display: none;
  }


  /*
   * Заголовки садятся над своими колонками (2056:37465 — «3 товара» стоит
   * над фото, а не прижат к правому краю страницы), поэтому ряд заголовков
   * повторяет ту же 12-колоночную сетку, что и .frk-checkout__layout ниже.
   */
  .frk-checkout__head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--frk-space-xs);
    align-items: start;
  }

  .frk-checkout__title {
    grid-column: 1 / span 6;
  }

  .frk-checkout__count {
    grid-column: 7 / span 6;
  }

  .frk-checkout__label {
    /* 16px на 1920, а не 12 (2056:37583 и рядом) */
    font-size: 16px;
  }

  /* Контактная информация и город/адрес доставки — 2 поля в ряд одной ширины (470.5px при зазоре 8px, 2056:37585) */
  .frk-checkout__fields .frk-checkout__field,
  .frk-checkout__delivery-fields > .frk-checkout__field,
  .frk-checkout__delivery-fields > .frk-select,
  .frk-checkout__delivery-fields > .frk-city-search {
    flex-basis: calc(50% - var(--frk-space-xs) / 2);
  }

  .frk-checkout__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--frk-space-xs);
  }

  /*
   * Итог — под формой в левой колонке, как было, когда он жил внутри неё;
   * колонка товаров — на обе строки. Если товары выше формы с итогом,
   * лишняя высота уходит во вторую строку (1fr), а итог прижат к её верху —
   * иначе он отъезжал бы от формы.
   */
  .frk-checkout__layout {
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }

  .frk-checkout__form,
  .frk-checkout__summary {
    grid-column: 1 / span 6;
  }

  .frk-checkout__summary {
    align-self: start;
  }

  .frk-checkout__items-col {
    grid-column: 7 / span 6;
    grid-row: 1 / span 2;

    /*
     * Своя полоса скролла у товаров: колонка не тянется по высоте формы,
     * а листается сама, пока форма остаётся на месте (заказчик подтвердил
     * этот вариант, а не «доскролливание» левой колонки до одной высоты).
     */
    position: sticky;
    top: calc(80px + var(--frk-space-sm));
    max-height: calc(100vh - 80px - var(--frk-space-sm) * 2);
    overflow-y: auto;
  }

  .frk-checkout-item {
    align-items: stretch;
  }

  .frk-checkout-item__media {
    /*
     * 470×540 — размер именно на 1920 (2056:37528), а не фиксированное
     * значение на весь десктоп: при жёстких 470px фото не помещалось
     * рядом с текстом уже на 1024–1500. Фото и текст в макете делят
     * строку ровно пополам (470+8+470=948) — тот же расчёт flex:1 1 0
     * у обоих (у .frk-checkout-item__body он уже есть) даёт этот
     * зазор на любой ширине и останавливается на 470px, как только
     * колонка дорастает до 1920 и шире.
     */
    flex: 1 1 0;
    min-width: 0;
    max-width: 470px;
    aspect-ratio: 470 / 540;
  }

  .frk-checkout-item__title-row {
    font-size: 36px;
  }

  .frk-checkout-item__excerpt {
    font-size: 20px;
  }
}

/* End */


/* Start:/local/templates/frk/css/contacts.css?17906925219235*/
/*
 * Страница «Контакты» (макет «Контакты_1920», node 2069:29085; ТЗ 7.8).
 *
 * Кадров 360 и 768 у страницы нет. Ниже десктопа раскладка идёт стопкой,
 * заголовки и крошки — как в каталоге, кегли — по шкалам тех же ролей:
 * это вывод по паттерну проекта, а не замер с макета. Сверять с макетом
 * можно только на 1920.
 *
 * Поля, кнопка, чекбокс согласия и строка ошибки — компоненты оформления
 * заказа (checkout.css); здесь только раскладка страницы и серой плашки.
 */

.frk-contacts {
  /* 16px от шапки до крошек и от крошек до заголовка — как на остальных внутренних страницах */
  padding-top: var(--frk-space-sm);
}

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

.frk-contacts-form__title {
  margin-block: calc(-1 * var(--frk-title-leading-trim));
  font-size: var(--frk-size-section-title);
  line-height: var(--frk-leading-title);
}

/* --- Контакты и реквизиты ------------------------------------------------- */

.frk-contacts__layout {
  display: grid;
  gap: var(--frk-space-xl);
}

.frk-contacts__list {
  display: grid;
  gap: var(--frk-space-md);
  margin: 0;
}

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

.frk-contacts__label,
.frk-contacts__copy-note {
  margin: 0;
  font-family: var(--frk-font-ui);
  font-weight: var(--frk-weight-regular);
  /* 12 на 768, 16 на 1920 — подписи блоков, как «Контактная информация» в оформлении заказа */
  font-size: clamp(12px, 9.3333px + 0.3472vw, 16px);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

/*
 * Значения до десктопа — 32px на любой ширине (баг-лист 2, строка 20): кегль
 * не уменьшается ради почты, почта переносится перед «@» (<wbr> в разметке).
 * На совсем узком экране, где не влезает и половина до «@», она ломается
 * посреди слова, а не распирает страницу.
 */
.frk-contacts__value {
  margin: 0;
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--frk-tracking-serif);
  overflow-wrap: anywhere;
}

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

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

.frk-contacts__requisites-head {
  display: flex;
  align-items: flex-start;
  gap: var(--frk-space-xs);
  margin-bottom: var(--frk-space-2xs);
}

.frk-contacts__copy {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--frk-color-ink);
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

/* Иконка нарисована 20×20, но попасть в неё пальцем трудно: зона нажатия шире картинки */
.frk-contacts__copy::after {
  content: "";
  position: absolute;
  inset: -8px;
}

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

/* Иконка красится currentColor через маску: один файл на все состояния */
.frk-contacts__copy-icon {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: url("/local/templates/frk/css/../images/icons/copy.svg") center / contain no-repeat;
  mask: url("/local/templates/frk/css/../images/icons/copy.svg") center / contain no-repeat;
}

.frk-contacts__copy-note {
  font-weight: var(--frk-weight-light);
  color: rgb(19 18 18 / 60%);
}

/*
 * Реквизиты и благодарность после отправки — Heading/H4 макета: 32 на 1920.
 * Кегль по двум точкам: 20 на 768 и 32 на 1920.
 */
.frk-contacts__requisites-text,
.frk-contacts-form__success-text {
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: clamp(20px, 12px + 1.042vw, 32px);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

/* 901px — ширина текстового блока в макете; от неё зависит, где переносится последняя строка */
.frk-contacts__requisites-text {
  max-width: 901px;
}

/* --- Форма «Есть вопросы?» ------------------------------------------------ */

.frk-contacts-form {
  position: relative;
  display: grid;
  gap: var(--frk-space-lg);
  margin-top: var(--frk-rhythm);
  padding: var(--frk-plate-padding);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
}

.frk-contacts-form__head {
  display: grid;
  gap: var(--frk-space-xs);
  align-content: start;
}

.frk-contacts-form__lead {
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  color: rgb(19 18 18 / 60%);
}

.frk-contacts-form__body {
  position: relative;
}

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

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

/* Поле «Ваш вопрос» — на всю ширину и 192px в высоту; тянуть за уголок нельзя, плашка держит размер */
.frk-contacts-form .frk-contacts-form__message {
  flex-basis: 100%;
  height: 192px;
  resize: none;
}

/* Место под виджет капчи: пока он не подключён, слот пуст и ничего не занимает */
.frk-contacts-form__captcha:empty {
  display: none;
}

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

/* Благодарность стоит вровень с верхом заголовка «Есть вопросы?» — там же, где начинались поля */
.frk-contacts-form__success {
  display: flex;
  align-items: flex-start;
}

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

/* Знак «У» за плашкой слева от полей: на узких экранах места ему нет */
.frk-contacts-form__watermark {
  display: none;
}

/* Плашка стоит в 8px от подвала: две плитки одного полотна */
.frk-contacts ~ .frk-footer {
  padding-top: var(--frk-space-xs);
}

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

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

  .frk-contacts__info {
    grid-column: 1 / span 6;
  }

  .frk-contacts__requisites {
    grid-column: 7 / span 6;
  }

  /*
   * Почта — одно слово длиной в 15 своих кеглей (Roboto Serif). На шкале
   * значений (38.7 на 1024) она шире колонки в 502px и ломается посреди
   * слова, а ниже 1024 колонка на всю ширину. Здесь кегль идёт по прямой
   * от 33 на 1024 до 48 на 1920, где он совпадает с макетом.
   */
  .frk-contacts__value {
    font-size: clamp(33px, 15.857px + 1.6741vw, 48px);
  }

  /* 100px от низа реквизитов до плашки на 1920, 80 на 1024 — прямая между ними */
  .frk-contacts-form {
    grid-template-columns: minmax(0, 1fr) calc(50% - 2px);
    align-items: start;
    gap: 0;
    margin-top: clamp(80px, 57.14px + 2.232vw, 100px);
  }

  /*
   * Правая колонка начинается там же, где седьмая колонка сетки страницы:
   * на 1920 это x=962, ровно под реквизитами. Знак стоит в 79px левее неё
   * и упирается в низ плашки (2075:21403).
   */
  .frk-contacts-form__watermark {
    display: block;
    position: absolute;
    bottom: 0;
    left: calc(50% - 391px);
    width: 313.789px;
    height: 189px;
    pointer-events: none;
  }

  /*
   * После отправки плашка держит высоту формы (её записывает скрипт): слева
   * остаются заголовок и знак, знак ростом 189px без этого вылез бы выше
   * плашки. В стопке знака нет, и плашка сжимается до самой благодарности.
   */
  .frk-contacts-form__success {
    min-height: var(--frk-contacts-form-height, 0);
  }
}

/* End */
/* /local/templates/frk/css/breadcrumbs.css?17906096411350 */
/* /local/templates/frk/css/checkout.css?179069252128623 */
/* /local/templates/frk/css/contacts.css?17906925219235 */