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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .frk-accordion__icon {
    display: none;
  }

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

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

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

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

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

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

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

/* End */


/* Start:/local/templates/frk/css/datepicker.css?17906096413964*/
/*
 * Выбор даты и времени — поповер под полем.
 *
 * В макете «Подарочный сертификат» (2075:22426) нарисовано только поле со
 * стрелкой; сам календарь заказчик поручил собрать по стилю сайта. Схема
 * та же, что у остальных выпадающих списков проекта (.frk-sort-menu):
 * position: absolute под триггером, закрытие по клику вовне и Escape.
 * Разметку внутри поповера строит js/datepicker.js.
 */

.frk-datepicker {
  position: relative;
}

.frk-datepicker__trigger {
  text-align: left;
  cursor: pointer;
  color: rgb(19 18 18 / 60%);
}

.frk-datepicker__trigger.is-filled {
  color: var(--frk-color-ink);
}

.frk-datepicker__popover {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  display: grid;
  gap: var(--frk-space-sm);
  width: 344px;
  max-width: 100%;
  margin-top: var(--frk-space-2xs);
  padding: var(--frk-space-sm);
  border: 1px solid var(--frk-color-border);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface);
  color: var(--frk-color-ink);
}

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

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

.frk-datepicker__month {
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-title-md);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-datepicker__nav {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--frk-radius);
  background: url("/local/templates/frk/css/../images/icons/chevron.svg") center / 16px no-repeat;
  transition: background-color var(--frk-motion-fast) var(--frk-motion-ease);
}

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

.frk-datepicker__nav--prev {
  transform: scaleX(-1);
}

.frk-datepicker__nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.frk-datepicker__nav:disabled:hover {
  background-color: transparent;
}

.frk-datepicker__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--frk-space-2xs);
}

.frk-datepicker__weekday {
  padding-bottom: var(--frk-space-xs);
  text-align: center;
  font-size: var(--frk-size-ui-sm);
  color: rgb(19 18 18 / 60%);
}

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

.frk-datepicker__day {
  width: 100%;
  height: 40px;
  border-radius: var(--frk-radius);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  transition:
    background-color var(--frk-motion-fast) var(--frk-motion-ease),
    color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-datepicker__day:hover:not(:disabled) {
  background: var(--frk-color-surface-muted);
}

.frk-datepicker__day[aria-current="date"] {
  box-shadow: inset 0 0 0 1px var(--frk-color-ink);
}

.frk-datepicker__cell[aria-selected="true"] .frk-datepicker__day {
  background: var(--frk-color-gold);
  color: var(--frk-color-text-inverse);
  box-shadow: none;
}

.frk-datepicker__day:disabled {
  opacity: 0.3;
  cursor: default;
}

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

.frk-datepicker__select {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  padding: var(--frk-space-xs) 36px var(--frk-space-xs) var(--frk-space-sm);
  border: none;
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted) url("/local/templates/frk/css/../images/icons/field-chevron.svg") right var(--frk-space-sm) center / 13px auto no-repeat;
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  cursor: pointer;
}

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

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

.frk-datepicker__done {
  width: 100%;
}

/* End */


/* Start:/local/templates/frk/css/gift-card.css?179060964114496*/
/*
 * Страница «Подарочный сертификат» (ТЗ 7.1, макет node 2075:21411, 1920).
 *
 * Поля, радиокнопки, выпадающий список, кнопка и чекбокс согласия —
 * компоненты checkout (checkout.css, включая .frk-checkout__consent —
 * появился в main после старта этой ветки, тот же кольцевой глиф, что
 * у радиокнопки, без придуманной галочки; свой checkbox.css убрали),
 * аккордеон — accordion.css: вторых наборов нет. Здесь только раскладка
 * страницы и блок «Значения из макета сертификата» ниже — там, где общие
 * компоненты на 1920 расходятся с макетом.
 *
 * Ниже 1280 форма встаёт в одну колонку по общему паттерну проекта: кадры
 * 768 и 360 в макете сертификата не приложены, размеры там не сверены.
 */

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

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

.frk-gift-card__lead {
  max-width: 800px;
  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-gift-card__panel {
  display: grid;
  gap: var(--frk-space-lg);
  margin-top: var(--frk-space-lg);
  padding: var(--frk-plate-padding);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
}

/*
 * Колонки 938 : 931 — ширины из макета (2075:22365, 2075:22368), тянутся вместе с экраном.
 *
 * Порог для двух колонок — 1280, а не 1024 (общий брейкпоинт десктопа): при
 * gap: 0 зазор между картинкой сертификата (центрирована в своей колонке,
 * фиксирована на 544px) и правой колонкой — это просто разница между шириной
 * левой колонки и 544px. При сужении окна она linearly падает и на 1200px уже
 * 17px, на 1100px — 0 (колонки касаются). 1280px даёт ~37px запаса, ниже —
 * макет сертификата и колонка формы/сообщения идут друг под другом, тем же
 * паттерном, что ниже 1024 у остальных внутренних страниц.
 */
@media (min-width: 1280px) {
  .frk-gift-card__panel {
    grid-template-columns: minmax(0, 938fr) minmax(0, 931fr);
    align-items: start;
    gap: 0;
  }

  .frk-gift-card__intro {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
  }

  .frk-gift-card__form,
  .frk-gift-card__success {
    grid-column: 2;
    grid-row: 1;
  }
}

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

.frk-gift-card__panel-title {
  font-size: 32px;
  line-height: 1.1;
}

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

.frk-gift-card__caption {
  max-width: 634px;
  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%);
}

/* На десктопе сертификат стоит по центру свободного места под подписью, как в макете (2075:28597) */
.frk-gift-card__image {
  width: min(544px, 100%);
  height: auto;
  margin: var(--frk-space-md) auto;
}

@media (min-width: 1280px) {
  .frk-gift-card__image {
    margin: auto;
    /* Симметричный отступ не двигает картинку, пока места много, но не даёт ей прилипнуть к подписи, когда форма заменена сообщением и плашка сжалась */
    padding-block: var(--frk-space-lg);
  }
}

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

.frk-gift-card__form {
  display: grid;
  gap: var(--frk-space-md);
  /* Число колонок полей зависит от ширины самой формы, а не окна: она стоит и в узкой колонке, и на всю плашку */
  container-type: inline-size;
}

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

.frk-gift-card__group {
  display: grid;
  gap: var(--frk-space-xs);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.frk-gift-card__legend {
  padding: 0;
  margin-bottom: var(--frk-space-xs);
}

.frk-gift-card__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--frk-space-xs);
}

@container (min-width: 600px) {
  .frk-gift-card__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.frk-gift-card__field {
  min-width: 0;
}

.frk-gift-card__field--full {
  grid-column: 1 / -1;
}

.frk-gift-card__comment {
  min-height: 192px;
  resize: none;
}

.frk-gift-card__error {
  margin-top: var(--frk-space-2xs);
  color: var(--frk-color-error);
  font-size: var(--frk-size-ui-md);
}

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

.frk-gift-card__form .frk-checkout__field[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--frk-color-error);
}

/* Слот под виджет капчи — тот же приём, что в contacts.css: пока пуст, схлопывается; отступ от соседей несёт gap формы */
.frk-gift-card__captcha:empty {
  display: none;
}

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

.frk-gift-card__submit .frk-button {
  width: 100%;
}

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

/* --- Форма отправлена ----------------------------------------------------- */

/* Сообщение встаёт на место формы внутри той же серой плашки (решение заказчика) */
.frk-gift-card__success {
  display: grid;
  gap: var(--frk-space-sm);
  padding: var(--frk-space-lg);
  border-radius: var(--frk-radius);
  background: var(--frk-color-paper);
}

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

/* Фокус сюда ставит скрипт, чтобы читалка озвучила результат; кликабельного тут нет */
.frk-gift-card__success:focus {
  outline: none;
}

.frk-gift-card__success-title {
  font-size: var(--frk-size-display-lg);
  line-height: 1.1;
}

.frk-gift-card__success-text {
  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-gift-card__success .frk-button {
  justify-self: start;
}

/*
 * Значения из макета сертификата поверх компонентов checkout и аккордеона.
 *
 * Макеты сертификата (2075:21411) и checkout (2056:37724, 2056:37739) рисуют
 * поле 48px, шрифт 20px, выбранную радиокнопку сплошной точкой, стрелку поля
 * 19×15 и половинный ряд способов оплаты с разделителем по центру. checkout.css
 * на 1920 даёт поле 60.8px, шрифт 24px, кольцо в радио и стрелку 12px, а
 * accordion.css — разделитель 2px #f4f4f4 без серой полосы под открытым пунктом
 * (2069:28485 рисует и то, и другое). Компоненты здесь не правим: они общие
 * с уже принятыми страницами, расхождение снимается отдельной правкой самих файлов.
 */

/* Крошки на 1920 — 14px (2075:22355), общий токен даёт 16 */
.frk-gift-card .frk-breadcrumb {
  font-size: 14px;
}

.frk-gift-card__field > .frk-checkout__field,
.frk-gift-card__form [data-gift-card-cards] .frk-checkout__field {
  display: block;
  width: 100%;
}

.frk-gift-card__form .frk-checkout__field {
  padding: 12px var(--frk-space-sm);
  background: var(--frk-color-paper);
  font-size: 20px;
  line-height: var(--frk-leading-base);
}

.frk-gift-card__form .frk-checkout__field--select {
  /* 16px поле + стрелка 19px + 16px */
  padding-right: 51px;
  background-image: url("/local/templates/frk/css/../images/icons/field-chevron.svg");
  /* background: выше сбрасывает повтор, который у checkout задан для стрелки */
  background-repeat: no-repeat;
  background-position: right var(--frk-space-sm) center;
  background-size: 19px 15px;
}

.frk-gift-card__form .frk-checkout__card-select {
  margin-top: 0;
}

/* Ряд «Банковской картой | СБП»: два равных полуряда, разделитель ровно по центру (2075:22458) */
.frk-gift-card__payment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  height: 45px;
  padding: 0 var(--frk-space-sm);
  background: var(--frk-color-paper);
}

.frk-gift-card__payment .frk-checkout__radio {
  height: 21px;
  padding-right: 0;
  border-right: 0;
  font-weight: var(--frk-weight-light);
  font-size: 20px;
}

.frk-gift-card__payment .frk-checkout__radio:first-child {
  border-right: 1px solid rgb(19 18 18 / 20%);
}

/* Текст в полях и в ряду оплаты до десктопа — 16px (баг-лист 2, строка 22) */
@media (max-width: 1023px) {
  .frk-gift-card__form .frk-checkout__field,
  .frk-gift-card__payment .frk-checkout__radio {
    font-size: 16px;
  }
}

.frk-gift-card__payment .frk-checkout__radio:last-child {
  padding-left: var(--frk-space-sm);
}

/* Родной отступ радиокнопки в браузере (3px 3px 3px 4px) сдвигает её и текст; в макете точка стоит на 16px от края ряда */
.frk-gift-card__payment .frk-checkout__radio input {
  margin: 0;
}

.frk-gift-card__payment .frk-checkout__radio input:checked {
  box-shadow: none;
}

/*
 * В узкой форме «Банковской картой» не помещается в половину ряда и переносится
 * на вторую строку поверх нижней границы: варианты встают друг под другом,
 * как в checkout на телефоне, а ряд растёт по высоте.
 */
@container (max-width: 439px) {
  .frk-gift-card__payment {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    padding-block: var(--frk-space-sm);
    row-gap: var(--frk-space-sm);
  }

  .frk-gift-card__payment .frk-checkout__radio:first-child {
    border-right: 0;
  }

  .frk-gift-card__payment .frk-checkout__radio:last-child {
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  /* Кнопка 49px: в макете обводка внутри рамки, в CSS она добавляется к отступам */
  .frk-gift-card__submit .frk-button {
    padding: 11px 19px;
  }
}

/* --- Вопросы и ответы ---------------------------------------------------- */

.frk-gift-card__faq {
  padding-top: var(--frk-rhythm);
  padding-bottom: 80px;
}

/*
 * Отступ до тёмной плашки подвала несёт секция FAQ, а не padding-top самого
 * <footer>: он лежит снаружи плашки и складывался бы с отступом секции.
 */
.frk-gift-card ~ .frk-footer {
  padding-top: 0;
}

.frk-gift-card__faq-title {
  margin-bottom: var(--frk-space-md);
  font-size: 32px;
  line-height: var(--frk-leading-tight);
}

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

@media (min-width: 1024px) {
  .frk-gift-card__faq {
    /* От низа серой плашки до заголовка — 100px (2075:22364 → 2075:22478) */
    padding-top: 100px;
    /* 80px от текста последнего вопроса до плашки; 24 из них — padding-block самого пункта */
    padding-bottom: 56px;
  }

  /* Те же 24px до первого вопроса даёт padding-block пункта аккордеона, второй раз их не добавляем */
  .frk-gift-card__faq-title {
    margin-bottom: 0;
  }

  /*
   * Разделитель — 1px #131212 при 20% (2075:22486) и не занимает места в потоке,
   * поэтому это тень, а не border: шаг пунктов остаётся 96px, как в макете.
   * Заливка, сдвиг вопроса и колонки — общие, из accordion.css.
   */
  .frk-gift-card__faq .frk-accordion .frk-accordion__item {
    border: 0;
    box-shadow: 0 1px 0 rgb(19 18 18 / 20%);
    padding-block: var(--frk-space-md);
  }

  .frk-gift-card__faq .frk-accordion .frk-accordion__item:last-child {
    box-shadow: none;
  }

  /* Тень-разделитель предыдущего пункта лежит в верхнем пикселе этого — заливка его не закрывает */
  .frk-gift-card__faq .frk-accordion__item::before {
    inset: 1px 0 0;
  }
}

/* End */


/* Start:/local/templates/frk/css/field-select.css?17906096415638*/
/*
 * Выпадающий список поля (js/field-select.js): кнопка того же вида, что поле,
 * и список-поповер в стилистике сайта — белая плашка с тонкой рамкой, пункты
 * с серой подсветкой, выбранный пункт золотом, как в сортировке каталога
 * (.frk-sort-menu). Макета раскрытого списка нет — решение заказчика
 * собрать его из стилистики сайта.
 *
 * Обёртка встаёт на место select и занимает его ячейку в ряду полей,
 * размеры поля (поля, кегль, ширина) кнопка берёт с его же классов.
 */

.frk-select {
  position: relative;
  display: flex;
  flex: 1 1 220px;
  min-width: 0;
}

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

.frk-select__trigger {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--frk-color-ink);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

/* Пока ничего не выбрано, в поле подсказка — цветом плейсхолдера, как у текстовых полей */
.frk-select__trigger.is-placeholder {
  color: rgb(19 18 18 / 60%);
}

/* Поповер под полем: сам список или плашка списка с поиском (.frk-select__panel) */
.frk-select__list,
.frk-select__panel {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: 0;
  left: 0;
  margin: var(--frk-space-2xs) 0 0;
  padding: var(--frk-space-2xs);
  border: 1px solid var(--frk-color-border);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface);
}

.frk-select__list {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.frk-select__list[hidden],
.frk-select__panel[hidden] {
  display: none;
}

/* Внизу экрана не хватает места — список над полем; «>» — не задеть список внутри плашки */
.frk-select.is-up > .frk-select__list,
.frk-select.is-up > .frk-select__panel {
  top: auto;
  bottom: 100%;
  margin: 0 0 var(--frk-space-2xs);
}

.frk-select__option {
  padding: var(--frk-space-xs) var(--frk-space-sm);
  border-radius: var(--frk-radius);
  font-family: var(--frk-font-ui);
  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);
  cursor: pointer;
  transition: background-color var(--frk-motion-fast) var(--frk-motion-ease);
}

/* Подзаголовок группы пунктов (optgroup): «Пункты выдачи», «Постаматы» */
.frk-select__group {
  padding: var(--frk-space-xs) var(--frk-space-sm) var(--frk-space-2xs);
  font-family: var(--frk-font-ui);
  font-size: var(--frk-size-ui-sm);
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
}

/* Поле выключено (пунктов ещё нет — не выбран город): не раскрывается; aria-disabled — см. field-select.js */
.frk-select__trigger[aria-disabled="true"] {
  cursor: default;
}

/*
 * Список с поиском (data-field-select-search, пункты выдачи СДЭК): поле поиска
 * и пункты в одной плашке; сам список в ней — без своей рамки и отступов
 */
.frk-select__empty[hidden],
.frk-select__option[hidden],
.frk-select__group[hidden] {
  display: none;
}

.frk-select__list--in-panel {
  position: static;
  max-height: 240px;
  margin: 0;
  padding: 0;
  border: none;
}

/* Поле поиска — как поля формы: серая заливка, кегль пунктов */
.frk-select__search {
  width: 100%;
  margin-bottom: var(--frk-space-2xs);
  padding: var(--frk-space-xs) 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-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  color: var(--frk-color-ink);
}

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

/* Крестик очистки — крест сайта вместо синего системного (есть только в Chromium и Safari) */
.frk-select__search::-webkit-search-cancel-button {
  width: 12px;
  height: 12px;
  background: var(--frk-color-ink);
  cursor: pointer;
  appearance: none;
  -webkit-mask: url("/local/templates/frk/css/../images/icons/close-thin.svg") center / contain no-repeat;
  mask: url("/local/templates/frk/css/../images/icons/close-thin.svg") center / contain no-repeat;
}

.frk-select__search:focus {
  outline: 1px solid var(--frk-color-gold);
  outline-offset: -1px;
}

.frk-select__empty {
  padding: var(--frk-space-xs) var(--frk-space-sm);
  font-family: var(--frk-font-ui);
  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-select__option.is-active {
  background: var(--frk-color-surface-muted);
}

.frk-select__option[aria-selected="true"] {
  color: var(--frk-color-gold);
}

.frk-select__list:focus {
  outline: none;
}

.frk-select__list:focus-visible .frk-select__option.is-active {
  outline: 1px solid var(--frk-color-gold);
  outline-offset: -1px;
}

/* End */
/* /local/templates/frk/css/breadcrumbs.css?17906096411350 */
/* /local/templates/frk/css/checkout.css?179069252128623 */
/* /local/templates/frk/css/accordion.css?17906096417565 */
/* /local/templates/frk/css/datepicker.css?17906096413964 */
/* /local/templates/frk/css/gift-card.css?179060964114496 */
/* /local/templates/frk/css/field-select.css?17906096415638 */