/* Start:/local/templates/frk/css/footer.css?17906096419777*/
/*
 * Подвал.
 *
 * Тёмная плашка во всю ширину полотна.
 *
 * Десктоп: слева контакты и два списка разделов, справа за тонкой линией —
 * знак с назначением магазина, адрес и лев. Правая половина начинается на
 * той же высоте, что и левые колонки: знак стоит в строку с текстом, адрес
 * прижат к низу плашки, лев — в её правый нижний угол.
 *
 * Ниже 768 порядок макета другой: сначала знак с текстом и львом, под ними
 * линия, дальше контакты, а списки разделов идут по два в ряд.
 */

.frk-footer {
  padding: var(--frk-layout-gutter);
  padding-top: var(--frk-rhythm-footer);
}

.frk-footer__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--frk-space-lg) var(--frk-space-sm);
  padding: var(--frk-space-sm);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-inverse);
  color: var(--frk-color-text-inverse);
}

.frk-footer__group {
  display: grid;
  gap: var(--frk-space-sm);
  align-content: start;
}

.frk-footer__group--contacts {
  grid-column: span 2;
}

/*
 * В макете 360 списки идут по два в ряд, каталог слева от сервиса —
 * обратно порядку разметки, где сервис объявлен раньше.
 */
.frk-footer__group--catalog {
  order: 1;
}

.frk-footer__group--service {
  order: 2;
}

.frk-footer__caption {
  font-size: var(--frk-size-ui-sm);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-footer__list {
  display: grid;
  gap: var(--frk-space-xs);
  font-weight: var(--frk-weight-medium);
  font-size: var(--frk-size-ui-md);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-footer__list a,
.frk-footer__legal a {
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-footer__list a:hover,
.frk-footer__legal a:hover {
  color: var(--frk-color-gold);
}

/* Телефон, почта и соцсети набраны крупнее разделов */
.frk-footer__list--contacts {
  font-size: var(--frk-size-ui-lg);
}

/* От контактов до подписи соцсетей 40px на всех ширинах (2396:2126), а не шаг группы */
.frk-footer__list--contacts + .frk-footer__caption {
  margin-top: calc(40px - var(--frk-space-sm));
}

/* --- Знак и адрес --------------------------------------------------------- */

.frk-footer__brand {
  display: grid;
  gap: var(--frk-space-md);
  justify-items: center;
  text-align: center;

  /* На узком экране знак стоит первым — так в макете 360 */
  order: -1;
  grid-column: span 2;
  padding-bottom: var(--frk-space-lg);
  border-bottom: 1px solid rgb(255 255 255 / 20%);
}

.frk-footer__brand-head {
  display: grid;
  gap: var(--frk-space-md);
  justify-items: center;
}

.frk-footer__mark {
  width: 48px;
  height: auto;
}

.frk-footer__about,
.frk-footer__address {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-regular);
  font-size: var(--frk-size-footer-lead);
  line-height: var(--frk-leading-tight);
  letter-spacing: var(--frk-tracking-serif);
}

/* Адрес мельче назначения магазина (20 против 24 на 360 и 640) и сжат сильнее: −5% против −3% */
.frk-footer__address {
  font-size: 20px;
  letter-spacing: var(--frk-tracking-ui);
}

/*
 * Знак Национального центра — надпись и лев одним файлом (2396:2063).
 * Ведёт на сайт центра. Ссылка внешняя, поэтому открывается в новой
 * вкладке; при наведении знак окрашивается золотом.
 */
.frk-footer__sign img {
  width: 71px;
  height: auto;
  transition: filter var(--frk-motion-fast) var(--frk-motion-ease);
}

/*
 * Знак нарисован белым. Золотой оттенок получаем поворотом тона — так
 * не нужен второй файл и ховер остаётся ровно одним правилом.
 */
.frk-footer__sign:hover img {
  filter: brightness(0.72) sepia(1) saturate(1.6) hue-rotate(4deg);
}

/* --- Правовые ссылки ------------------------------------------------------ */

.frk-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--frk-space-xs) var(--frk-space-md);
  grid-column: span 2;

  /* Порядок макета 360: знак, контакты, списки по два в ряд, правовые ссылки */
  order: 3;
  font-weight: var(--frk-weight-medium);
  font-size: var(--frk-size-ui-md);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

/* ========================================================================= *
 * Планшет (макет 640, 2413:1321): знак с назначением в строку, под ними
 * адрес и лев, дальше линия, контакты, соцсети, каталог в две колонки
 * с сервисом по правому краю и правовые ссылки столбиком. Между блоками 40px.
 * ========================================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
  .frk-footer__inner {
    row-gap: 40px;
  }

  .frk-footer__brand {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 40px var(--frk-space-sm);
    justify-items: start;
    text-align: left;
    padding-bottom: 40px;
  }

  .frk-footer__brand-head {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    justify-items: start;
  }

  .frk-footer__mark {
    width: 57px;
  }

  /* Адрес в две строки: «Москва,» и улица, как в макете */
  .frk-footer__address {
    max-width: 13em;
  }

  .frk-footer__sign {
    justify-self: end;
  }

  .frk-footer__group--catalog .frk-footer__list,
  .frk-footer__group--service .frk-footer__list {
    gap: var(--frk-space-sm);
  }

  /* Каталог — две колонки по пять пунктов: первая 148px, вторая через 4px */
  .frk-footer__group--catalog .frk-footer__list {
    grid-template-rows: repeat(5, auto);
    grid-template-columns: 148px auto;
    grid-auto-flow: column;
    column-gap: var(--frk-space-2xs);
  }

  .frk-footer__group--service {
    justify-items: end;
    text-align: right;
  }

  .frk-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--frk-space-sm);
  }
}

/* ========================================================================= *
 * Десктоп: четыре колонки и знак за разделительной линией
 * ========================================================================= */

@media (min-width: 1024px) {
  /*
   * Доли колонок сняты с макета 1920: контакты занимают 477 пикселей от
   * левого края плашки, «Сервис» начинается на 477, «Каталог» на 710,
   * линия проходит по 944 — ровно по середине плашки.
   */
  .frk-footer__inner {
    grid-template-columns: 25.4% 12.3% 12.3% 50%;
    grid-template-rows: 1fr auto;
    gap: var(--frk-space-lg) 0;
    padding: var(--frk-space-xs);
  }

  .frk-footer__group--contacts {
    grid-column: 1;
    grid-row: 1;
  }

  .frk-footer__group--service {
    grid-column: 2;
    grid-row: 1;
    order: 0;
  }

  .frk-footer__group--catalog {
    grid-column: 3;
    grid-row: 1;
    order: 0;
  }

  /*
   * Правая половина отделена тонкой линией и занимает обе строки: знак
   * встаёт вровень с колонками, а адрес и лев — в одну нижнюю строку
   * плашки, адрес слева, лев в правом углу (2396:2141, 2396:2063).
   */
  .frk-footer__brand {
    grid-column: 4;
    grid-row: 1 / span 2;
    order: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    align-items: end;
    justify-items: start;
    text-align: left;
    padding-bottom: 0;
    padding-left: 10px;
    border-bottom: none;
    border-left: 1px solid rgb(255 255 255 / 20%);
  }

  /* Знак и назначение магазина стоят в строку — так в макете */
  .frk-footer__brand-head {
    grid-column: 1 / -1;
    align-self: start;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--frk-space-xs);
    justify-items: start;
  }

  /* Верх заглавных — по верху знака: у Roboto Serif при интерлиньяже 1.05 это 0.14em над строкой */
  .frk-footer__about {
    margin-top: -0.14em;
  }

  /* 28px на 1920 (20 на 1024), две строки в колонке 365px, как в макете */
  .frk-footer__address {
    max-width: 13em;
    font-size: clamp(20px, 10.857px + 0.8929vw, 28px);
  }

  .frk-footer__sign {
    justify-self: end;
  }

  .frk-footer__legal {
    grid-column: 1 / span 3;
    grid-row: 2;
    order: 0;
    align-items: flex-end;
  }
}

/* End */


/* Start:/local/templates/frk/css/filter-panel.css?17906096418898*/
/*
 * Панель фильтра каталога (макет «Каталог_фильтр», node 2096:1000) и лента
 * применённых тегов (node 2096:1770).
 *
 * Панель лежит в разметке всегда, скрипт только переключает hidden —
 * так фильтр остаётся доступен поисковым роботам и работает без JS
 * как обычная форма (см. catalog-toolbar.js).
 *
 * На десктопе всплывает поповером под кнопкой «Фильтр»; на планшете
 * и телефоне, где точного позиционирования недостаточно ширины,
 * раскрывается на всю ширину контейнера под панелью инструментов.
 */

.frk-filter-panel {
  position: relative;
  z-index: 10;
  /* Ребёнок тулбара: на мобильном должна занять всю строку целиком */
  flex: 1 0 100%;
  margin-top: var(--frk-space-sm);
  padding: var(--frk-space-xs);
  border: 1px solid var(--frk-color-border);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface);
}

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

.frk-filter-panel__reset {
  display: block;
  margin-bottom: var(--frk-space-sm);
  color: var(--frk-color-gold);
  font-size: var(--frk-size-title-sm);
  line-height: var(--frk-leading-tight);
  letter-spacing: var(--frk-tracking-ui);
  text-align: right;
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

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

.frk-filter-panel__group {
  display: grid;
  gap: var(--frk-space-xs);
  padding-block: var(--frk-space-sm);
  border-top: 1px solid var(--frk-color-surface-muted);
}

.frk-filter-panel__group:first-of-type {
  border-top: none;
  padding-top: 0;
}

.frk-filter-panel__label {
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

/*
 * Одна строка на любой ширине, а не перенос: если плитки не помещаются,
 * лента листается протяжкой — data-drag-scroll на этом элементе в разметке,
 * тот же приём и тот же generic-стиль [data-drag-scroll] (layout.css), что
 * у категорий каталога. min-width:0 обязателен — иначе flex-контейнер
 * растягивается по контенту и overflow-x не срабатывает.
 */
.frk-filter-panel__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--frk-space-2xs);
  min-width: 0;
}

.frk-filter-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--frk-space-xs);
  padding: 12px var(--frk-space-sm);
  border: 1px solid transparent;
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-title-md);
  letter-spacing: var(--frk-tracking-ui);
  transition:
    background-color var(--frk-motion-fast) var(--frk-motion-ease),
    border-color var(--frk-motion-fast) var(--frk-motion-ease),
    color var(--frk-motion-fast) var(--frk-motion-ease);
}

/*
 * Плитка размера — фиксированные 48px независимо от длины подписи (S…4XL),
 * так в макете (2096:1007…1019): семь плиток по 48px + 6 зазоров по 4px
 * укладываются в 359px группы ровно в одну строку.
 */
.frk-filter-chip[data-group="size"] {
  width: 48px;
}

/* Цвет набран начертанием Light, а не Extra Light, как размер — так в макете (2096:1038) */
.frk-filter-chip[data-group="color"] {
  font-weight: var(--frk-weight-light);
}

.frk-filter-chip:hover {
  background: #ebebeb;
}

/*
 * Выбранный чип — только золотая обводка, серая заливка остаётся (прототип
 * карточки 2155:8607 / 2155:8624; баг-лист, строка 38). Правило общее
 * для фильтра, быстрого добавления и карточки товара.
 */
.frk-filter-chip[aria-pressed="true"] {
  border-color: var(--frk-color-gold);
  color: var(--frk-color-ink);
}

.frk-filter-chip__swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgb(19 18 18 / 15%);
}

.frk-filter-panel__price {
  display: flex;
  gap: var(--frk-space-sm);

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

.frk-filter-panel__price-field {
  flex: 1 0 0;
  min-width: 0;
  padding: 12px var(--frk-space-sm);
  border: none;
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
  font-weight: var(--frk-weight-light);
  /* Фиксированные 20px (2096:1050) — не --frk-size-title-md, тот растёт до 24px на десктопе */
  font-size: 20px;
  letter-spacing: var(--frk-tracking-ui);
}

.frk-filter-panel__price-field::placeholder {
  color: var(--frk-color-ink);
  opacity: 0.5;
}

.frk-filter-panel__apply {
  width: 100%;
  margin-top: var(--frk-space-md);
  padding: 12px 20px;
  /* Фиксированные 24px (Button/Label в макете), а не display-lg — тот растёт до 48px на десктопе */
  font-size: 24px;
}

@media (min-width: 768px) {
  .frk-filter-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: min(45rem, 100%);
  }

  /*
   * Только «Размер» держит фиксированную ширину группы (2096:1004) — по ней
   * рассчитана раскладка плиток в одну строку. «Цвет» не задан шириной в
   * макете (2096:1030) — подстраивается под контент. «Цена» растянута на
   * всю ширину панели (2096:1046, w-full) — иначе инпуты «От»/«До» сжимаются
   * до той же узкой колонки, что и размеры.
   */
  .frk-filter-panel__group--size {
    width: 359px;
  }

  .frk-filter-panel__group--price {
    width: 100%;
  }
}

/* ========================================================================= *
 * Применённые фильтры
 * ========================================================================= */

/* Часть общей ленты — не переносится, лента листается протяжкой целиком (см. .frk-catalog-toolbar__filters-scroll) */
.frk-active-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--frk-space-sm);
  min-width: 0;
}

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

.frk-active-filters__tag {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--frk-space-2xs);
  font-size: var(--frk-size-ui-lg);
  letter-spacing: var(--frk-tracking-ui);
  white-space: nowrap;
}

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

.frk-active-filters__tag-value {
  font-weight: var(--frk-weight-regular);
}

.frk-active-filters__tag-remove {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  transition: opacity var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-active-filters__tag-remove:hover {
  opacity: 0.6;
}

.frk-active-filters__tag-remove img {
  width: 10px;
  height: 10px;
}

.frk-active-filters__reset {
  color: var(--frk-color-gold);
  font-size: var(--frk-size-ui-lg);
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

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

/*
 * Десктоп (2096:1060): «Сбросить все» не отдельной строкой над группами,
 * а в правом верхнем углу плашки, вровень с подписью первой группы
 * (баг-лист, строка 33).
 */
@media (min-width: 1024px) {
  /* Интерлиньяж как у подписи группы — иначе при одинаковом верхе базовые линии расходятся на 2px */
  .frk-filter-panel__reset {
    position: absolute;
    top: var(--frk-space-xs);
    right: var(--frk-space-xs);
    margin: 0;
    line-height: var(--frk-leading-base);
  }
}

/* End */


/* Start:/local/templates/frk/css/quick-add.css?17906530783401*/
/*
 * Быстрый выбор размера и цвета — открывается кнопкой «В корзину» прямо
 * на карточке каталога, без перехода в карточку товара. Переиспользует
 * чипы из панели фильтра (frk-filter-chip): та же форма, то же значение
 * «выбрано», разный смысл — там фильтруют список, здесь выбирают вариант.
 *
 * Не в макете — решение принято по согласованию: открывает попап у карточки,
 * а не отдельное модальное окно на весь экран, чтобы не терять контекст
 * списка при повторных добавлениях разных товаров.
 */

.frk-quick-add {
  position: fixed;
  z-index: 200;
  inset: 0;
  /*
   * Та же причина, что у .frk-cart (cart.css). --frk-vh безопасен и здесь —
   * в быстром выборе нет текстовых полей (только чипы-кнопки), клавиатура
   * не появляется.
   */
  height: 100vh;
  height: 100dvh;
  height: var(--frk-vh, 100dvh);
  display: grid;
  place-items: center;
  padding: var(--frk-space-sm);
  background: rgb(19 18 18 / 40%);
}

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

/* До десктопа страница под открытым выбором не прокручивается (держит scroll-lock.js) */
@media (max-width: 1023px) {
  .frk-quick-add-open {
    overflow: hidden;
  }
}

.frk-quick-add__dialog {
  display: grid;
  gap: var(--frk-space-md);
  width: min(360px, 100%);
  padding: var(--frk-space-sm);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface);
}

.frk-quick-add__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--frk-space-sm);
}

.frk-quick-add__title {
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-title-md);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-quick-add__price {
  color: rgb(19 18 18 / 60%);
  font-size: var(--frk-size-ui-md);
}

.frk-quick-add__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.frk-quick-add__close img {
  width: 14px;
  height: 14px;
}

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

.frk-quick-add__label {
  font-size: var(--frk-size-ui-md);
  color: rgb(19 18 18 / 60%);
}

/* Одна строка, а не перенос: не помещается — листается протяжкой (data-drag-scroll, тот же приём, что в фильтре каталога) */
.frk-quick-add__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--frk-space-2xs);
  min-width: 0;
}

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

/* display у группы и кнопки перебивает [hidden]: у кепки без размеров оставалась пустая строка «Размер» */
.frk-quick-add__group[hidden],
.frk-quick-add__error[hidden],
.frk-quick-add__submit[hidden] {
  display: none;
}

.frk-quick-add__submit {
  width: 100%;
}

/* End */


/* Start:/local/templates/frk/css/cart.css?179060964120635*/
/*
 * Корзина — выезжающая справа панель (макеты node 2053:28417 «пусто»
 * и 2053:29135 «с товарами»), а не отдельная страница: открывается
 * поверх любой страницы кликом по «Корзина» в шапке.
 *
 * Оба присланных макета — десктопные (642px панель на широком экране).
 * Макета для планшета/телефона не было — на узких экранах панель растянута
 * на всю ширину, тот же приём, что у панели фильтра и быстрого выбора
 * варианта: решение принято по аналогии, а не с потолка.
 */

.frk-cart {
  position: fixed;
  inset: 0;
  /*
   * inset: 0 на fixed-элементе в теории уже растягивает его на весь экран,
   * но в мобильном Safari, если адресная строка в момент открытия ещё не
   * доехала до конечного положения, высота не пересчитывается вслед за ней —
   * снизу остаётся пустая полоса. dvh считает текущую видимую область живьём,
   * но и он не спасает на части реальных устройств Safari (репорт с
   * реального iPhone после возврата на чистый dvh).
   *
   * --frk-vh (viewport-height.js, window.visualViewport) — точнее, и здесь
   * это безопасно: в корзине нет текстовых полей, экранная клавиатура тут
   * не появляется, значит нет и риска регрессии, из-за которой откатывали
   * этот приём для панели поиска и входа/ЛК (см. cart.css в истории /
   * feedback_dvh_vs_visualviewport_keyboard).
   */
  height: 100vh;
  height: 100dvh;
  height: var(--frk-vh, 100dvh);
  z-index: 300;
  display: flex;
  justify-content: flex-end;
}

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

/* Страница под открытой панелью не должна прокручиваться вместе с ней */
.frk-cart-open {
  overflow: hidden;
}

.frk-cart__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(19 18 18 / 40%);
}

.frk-cart__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 642px;
  height: 100%;
  padding: var(--frk-space-lg);
  background: var(--frk-color-surface);
  overflow-y: auto;
  /* На iOS Safari скролл панели иначе может проваливаться в заблокированный фон (.frk-cart-open) */
  overscroll-behavior: contain;
  animation: frk-cart-in var(--frk-motion-base) var(--frk-motion-ease);
}

@keyframes frk-cart-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}

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

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

.frk-cart__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--frk-tracking-serif);
}

/* Крест в этом блоке выведен из потока (см. .frk-cart__close), в строке остаётся «Очистить корзину» */
.frk-cart__head-actions {
  display: flex;
}

.frk-cart__clear {
  color: var(--frk-color-gold);
  font-size: var(--frk-size-ui-lg);
  letter-spacing: var(--frk-tracking-ui);
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

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

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

/*
 * Крест прибит к углу панели на любой ширине, и с товарами, и в пустой
 * корзине: иконка в 13px от верха и 12px от правого края (2600:726).
 * Кнопка 24, иконка 20 по центру.
 */
.frk-cart__close {
  position: absolute;
  top: 11px;
  right: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

/*
 * Маска, а не <img src="close.svg"> — у файла зашита золотая заливка
 * (используется как есть в поиске, тегах фильтра и т.п.), а крест корзины
 * в макете чёрный. Маска игнорирует заливку файла и берёт цвет из CSS.
 */
.frk-cart__close-icon {
  width: 20px;
  height: 20px;
  background: var(--frk-color-ink);
  -webkit-mask: url("/local/templates/frk/css/../images/icons/close.svg") center / contain no-repeat;
  mask: url("/local/templates/frk/css/../images/icons/close.svg") center / contain no-repeat;
}

/* --- Пусто ------------------------------------------------------------------ */

.frk-cart__empty {
  display: grid;
  gap: var(--frk-space-xs);
  margin-top: var(--frk-space-xs);
  margin-bottom: var(--frk-space-2xl);
}

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

.frk-cart__empty-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%);
}

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

/* От заголовка «Корзина» до первой карточки 12px — на десктопе (2583:4621; баг-лист, строка 57) и так же на телефоне (2588:5394) */
.frk-cart__list {
  display: grid;
  gap: var(--frk-space-md);
  margin-top: 12px;
  margin-bottom: var(--frk-space-lg);
}

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

/*
 * До 768 — макеты 2588:5394 (360) и 2583:4704 (640):
 *   поля панели 6px, как у всего сайта (баг-лист, строка 59);
 *   крест в углу панели, «Корзина» и «Очистить корзину» в одну строку,
 *   по центру заголовка (строка 58);
 *   итог и кнопка всегда у нижнего края экрана, листается только список
 *   товаров (строка 60; правило — ниже, до 1024). Пустая корзина
 *   с «Вы смотрели» листается целиком.
 */
@media (max-width: 767px) {
  /* Заголовок — в 46px от верха (2588:5394), крест над ним в углу панели */
  .frk-cart__panel {
    padding: 46px var(--frk-layout-gutter) var(--frk-layout-gutter);
  }

  .frk-cart__head {
    align-items: center;
    gap: var(--frk-space-sm);
  }

  /* Заголовок по макету телефона (2588:5686): Light 40 */
  .frk-cart__title {
    font-weight: var(--frk-weight-light);
    font-size: 40px;
  }

  .frk-cart__clear {
    font-size: 14px;
    white-space: nowrap;
  }
}

/*
 * Итог у нижнего края — на всём планшете, до 1024: с 768 панель уже
 * десктопная (642px), но экран планшета по высоте тот же, и без этого
 * кнопка уходила вниз под прокрутку.
 */
@media (max-width: 1023px) {
  /*
   * Список занимает всю высоту до итога и листается сам; строки — по верху,
   * иначе сетка раздала бы им свободное место. Панель прокрутку сохраняет:
   * на низком экране (телефон боком) шапка с итогом не влезают, и тогда
   * листается вся панель, а список не сжимается меньше одной карточки.
   */
  .frk-cart__list {
    flex: 1 1 auto;
    align-content: start;
    min-height: 160px;
    margin-bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

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

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

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

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

.frk-cart-item__body {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  gap: var(--frk-space-sm);
  align-content: space-between;
}

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

.frk-cart-item__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--frk-space-sm);
}

.frk-cart-item__name {
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-title-md);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-cart-item__price {
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-title-md);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

/* не длиннее двух строк, как описание в карточке товара */
.frk-cart-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);
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
}

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

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

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

.frk-cart-item__variant-label {
  font-size: var(--frk-size-ui-sm);
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
}

/* Кнопка-триггер выпадающего списка размера/цвета — сброс дефолтных стилей button */
.frk-cart-item__variant-value {
  display: flex;
  align-items: center;
  gap: var(--frk-space-2xs);
  font-family: var(--frk-font-title);
  font-size: var(--frk-size-ui-md);
  text-align: left;
  cursor: pointer;
}

.frk-cart-item__swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgb(19 18 18 / 15%);
}

.frk-cart-item__variant-chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background: currentColor;
  transform: rotate(90deg);
  transition: transform var(--frk-motion-fast) var(--frk-motion-ease);
  -webkit-mask: url("/local/templates/frk/css/../images/icons/chevron.svg") center / contain no-repeat;
  mask: url("/local/templates/frk/css/../images/icons/chevron.svg") center / contain no-repeat;
}

.frk-cart-item__variant-value[aria-expanded="true"] .frk-cart-item__variant-chevron {
  transform: rotate(-90deg);
}

/* Список — тот же приём, что у .frk-sort-menu (catalog.css): абсолютный поповер под триггером */
.frk-cart-item__variant-menu {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  margin-top: var(--frk-space-2xs);
  min-width: 120px;
  max-height: 220px;
  overflow-y: auto;
  padding: var(--frk-space-2xs);
  border: 1px solid var(--frk-color-border);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface);
  box-shadow: 0 4px 16px rgb(19 18 18 / 12%);
}

/* Снизу в списке места нет — меню над кнопкой; bottom ставит cart-drawer.js (placeMenu) */
.frk-cart-item__variant-menu.is-up {
  top: auto;
  margin-top: 0;
}

.frk-cart-item__variant-menu[hidden] {
  display: none;
}

.frk-cart-item__variant-option {
  display: flex;
  align-items: center;
  gap: var(--frk-space-xs);
  width: 100%;
  padding: var(--frk-space-xs) var(--frk-space-sm);
  border-radius: var(--frk-radius);
  text-align: left;
  font-family: var(--frk-font-ui);
  font-size: var(--frk-size-ui-md);
  letter-spacing: var(--frk-tracking-ui);
  transition: background-color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-cart-item__variant-option:hover {
  background: var(--frk-color-surface-muted);
}

.frk-cart-item__variant-option[aria-current="true"] {
  color: var(--frk-color-gold);
  font-weight: var(--frk-weight-medium);
}

.frk-cart-item__variant-option .frk-cart-item__swatch {
  width: 16px;
  height: 16px;
}

@media (max-width: 767px) {
  /*
   * Строка товара — по тем же правилам, что в оформлении заказа
   * (checkout.css, решение заказчика): фото 140px, шапка — сетка
   * «название | цена»; описания на телефоне нет, как в макете 2588:5736.
   * Карточка → разделитель → карточка по 12px (2588:5394).
   */
  .frk-cart__list {
    gap: 12px;
  }

  .frk-cart-item {
    gap: var(--frk-space-xs);
    padding-bottom: 12px;
  }

  .frk-cart-item__media {
    width: 140px;
  }

  .frk-cart-item__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--frk-space-sm);
    row-gap: 0;
  }

  .frk-cart-item__title-row {
    display: contents;
  }

  .frk-cart-item__excerpt {
    display: none;
  }
}

/* --- Счётчик количества (макет 2053:29304) ------------------------------------- */

.frk-cart-item__qty {
  display: flex;
  align-items: center;
  gap: var(--frk-space-sm);
  height: 40px;
  padding: 12px var(--frk-space-sm);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
}

.frk-cart-item__qty-value {
  min-width: 1ch;
  font-size: var(--frk-size-ui-md);
  text-align: center;
}

.frk-cart-item__qty-button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.frk-cart-item__qty-button img {
  width: 16px;
  height: 16px;
}

/* --- Итого и рекомендации ------------------------------------------------------ */

.frk-cart__summary {
  display: grid;
  gap: var(--frk-space-md);
  margin-top: auto;
  padding-top: var(--frk-space-lg);
}

@media (min-width: 768px) {
  .frk-cart__summary {
    padding-bottom: 72px;
  }
}

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

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

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

/* display:flex перебивает нативный [hidden] — строка «Скидка» без скидки */
.frk-cart__totals-row[hidden] {
  display: none;
}

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

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

.frk-cart__checkout {
  width: 100%;
}

/*
 * Телефон (2589:5823): «Скидка» → «Итого» 12, «Итого» → кнопка 24. Блок
 * стоит после базовых правил итога, иначе они перебили бы его.
 */
@media (max-width: 767px) {
  .frk-cart__summary {
    gap: 12px;
  }

  .frk-cart__checkout {
    margin-top: 12px;
  }
}

.frk-cart__recent {
  margin-top: var(--frk-space-2xl);
}

@media (min-width: 768px) {
  /*
   * Блок прижат к низу панели (макет 2053:28418), не идёт сразу под
   * «Здесь пока нет товаров» — margin-top: auto в flex-column панели.
   * 36.37px от последней карточки «Вы смотрели» до низа панели (2053:28463 vs. кадр 1080).
   */
  .frk-cart__recent {
    margin-top: auto;
    padding-bottom: 36.37px;
  }
}

/* Заголовок и стрелки слайдера — один ряд, тот же приём, что у «Выбора в деталях» на главной (picks.css) */
.frk-cart__recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--frk-space-md);
  /* 4px до ленты (2053:28463) */
  margin-bottom: var(--frk-space-2xs);
}

.frk-cart__recent-title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: 36px;
  letter-spacing: var(--frk-tracking-serif);
}

/*
 * .frk-slider__track уже даёт display:flex и scroll-snap (slider.css);
 * тут только то, что отличает эту ленту — зазор и ширина карточки.
 * data-drag-scroll (layout.css) даёт протяжку и скрытую полосу скролла —
 * тот же приём, что у категорий каталога и «Выбора в деталях» на главной.
 */
.frk-cart__recent-track {
  gap: var(--frk-layout-gap);
}

.frk-cart__recent-item {
  flex: 0 0 auto;
  width: 308px;
  scroll-snap-align: start;
}

/*
 * Описание — тот же стиль, что у карточки каталога (product-card.css,
 * .frk-product-card--large .frk-product-card__excerpt): без модификатора
 * --large карточка забирает только базовый (мелкий) стиль текста, а
 * пропорцию фото трогать не нужно — она у «Вы смотрели» другая (473/540).
 */
.frk-cart__recent-item .frk-product-card__excerpt {
  display: -webkit-box;
  opacity: 0.5;
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
}

@media (min-width: 768px) {
  /*
   * Отступы по макету (2053:29135, 1920): заголовок в 72px от верха панели,
   * 16px слева/справа (не 32, тот был случайно унаследован от других
   * панелей). Крест в углу панели, в потоке его нет.
   */
  .frk-cart__panel {
    /*
     * Низ не задаём здесь: у «с товарами» и «пусто» разный отступ до конца
     * панели (72px у «Итого»/кнопки, 36.37px у последней карточки «Вы
     * смотрели») — каждый выставляет его сам, на своём последнем блоке.
     */
    padding: 72px 16px 0 16px;
  }

  .frk-cart__title {
    font-size: 48px;
  }

  /* «Очистить корзину» — в 96px от верха панели, на 24 ниже верха заголовка (2053:29135) */
  .frk-cart__clear {
    margin-top: 24px;
  }

  /* --- Строка товара: фото 200×228, отступ до контента меньше (2053:29332) --- */

  .frk-cart-item {
    gap: var(--frk-space-2xs);
  }

  .frk-cart-item__media {
    width: 200px;
    aspect-ratio: 200 / 228;
  }

  .frk-cart-item__name,
  .frk-cart-item__price {
    font-size: 32px;
  }

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

  .frk-cart-item__variant-label {
    font-size: 16px;
  }

  .frk-cart-item__variant-value {
    font-size: 24px;
  }

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

  .frk-cart__totals-row {
    font-size: 16px;
  }

  .frk-cart__totals-row .frk-cart__totals-value {
    font-size: 32px;
  }

  .frk-cart__totals-row--grand .frk-cart__totals-value {
    font-size: 48px;
  }
}

/* End */


/* Start:/local/templates/frk/css/cookie-banner.css?17906617043439*/
/*
 * Уведомление о файлах cookie (секция «Куки», 2804:884) — на всех страницах,
 * пока посетитель не нажмёт «Хорошо». В разметке блок скрыт, показывает его
 * cookie-banner.js: у того, кто уже согласился, он не мелькает при загрузке.
 *
 * До 640 (кадр 360, 2804:5538) — полоса внизу экрана: текст, под ним кнопка
 * во всю ширину. С 640 (2804:5169) текст и кнопка в ряд, кнопка по низу
 * текста. Шире 646 полоса упирается в 634px из кадра 1920 (2804:4765)
 * и становится карточкой в правом нижнем углу — отдельный брейкпоинт
 * для этого не нужен.
 *
 * Слой — над закреплённой миниатюрой товара (50), под шапкой с её панелями
 * (100) и под окнами: быстрый выбор, корзина, вход (200–300).
 */

.frk-cookie-banner {
  position: fixed;
  right: 6px;
  bottom: 8px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-sm);
  width: min(634px, 100% - 12px);
  padding: 6px;
  border: 1px solid var(--frk-color-border);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface);
}

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

.frk-cookie-banner__text {
  font-size: var(--frk-size-ui-lg);
  font-weight: var(--frk-weight-light);
  line-height: var(--frk-leading-base);
  opacity: 0.5;

  /* Переносы как в макете: с оптическим размером Inter на 1920 строка забирала лишнее слово */
  font-optical-sizing: none;
}

/* Кегль кнопки в кадрах 360 и 640 свой — у .frk-button там 14 */
.frk-cookie-banner__button {
  font-size: 16px;
}

/*
 * Низ подвала уведомление может закрывать (решение заказчика 2026-09-29):
 * отступ под блок у body дал бы белую полосу под тёмной плашкой. Он остаётся
 * только на странице без подвала (404), чтобы блок не закрывал её низ.
 * Переход по Tab докручивает поле или кнопку («Оформить заказ» на телефоне)
 * выше блока, а не под него. Переменную ставит cookie-banner.js — высота
 * блока плюс его отступ снизу.
 */
html {
  scroll-padding-bottom: var(--frk-cookie-banner-space, 0px);
}

body:not(:has(.frk-footer)) {
  padding-bottom: var(--frk-cookie-banner-space, 0px);
}

@media (min-width: 640px) {
  .frk-cookie-banner {
    /* От низа окна: 12 в кадре 640, 19 в кадре 1920 */
    bottom: clamp(12px, 8.5px + 0.547vw, 19px);
    flex-direction: row;
    align-items: flex-end;
  }

  .frk-cookie-banner__text {
    flex: 1 1 0;
    min-width: 0;
  }

  .frk-cookie-banner__button {
    flex: none;
    font-size: 20px;
  }
}

@media (min-width: 768px) {
  .frk-cookie-banner__button {
    font-size: var(--frk-size-button);
  }
}

@media (min-width: 1024px) {
  .frk-cookie-banner {
    padding: var(--frk-space-xs);
  }
}

/* End */


/* Start:/local/templates/frk/css/panel-base.css?17906096417167*/
/*
 * Общая основа выдвижных панелей: входа (.frk-auth-panel), личного кабинета
 * (.frk-lk-panel) и карты пунктов СДЭК в оформлении (.frk-map-panel, sdek-map.css).
 * Механика — та же, что у .frk-cart (cart.css): фиксированный
 * оверлей, подложка 30%, панель 642px справа. Макеты обеих панелей нарисованы
 * на одной сетке, поэтому правила общие; отличия лежат в auth-panel.css и
 * lk-panel.css. Брейкпоинта для мобильного нет: width:100% + max-width даёт
 * полноширинную панель на 360; панель входа до десктопа во всю ширину
 * и на планшете (auth-panel.css).
 *
 * Окно «Таблица размеров» (.frk-size-chart, size-chart.css) берёт отсюда
 * замок страницы, подложку и крест; сам оверлей у него свой: на сайте
 * panel-base.css может встать и после size-chart.css.
 */

.frk-auth-panel,
.frk-lk-panel,
.frk-map-panel {
  position: fixed;
  inset: 0;
  /* Та же причина, что у .frk-cart (cart.css) — иначе на мобильном Safari снизу остаётся пустая полоса */
  height: 100vh;
  height: 100dvh;
  z-index: 300;
  display: flex;
  justify-content: flex-end;
}

.frk-auth-panel[hidden],
.frk-lk-panel[hidden],
.frk-map-panel[hidden] {
  display: none;
}

.frk-auth-panel-open,
.frk-lk-panel-open,
.frk-map-panel-open,
.frk-size-chart-open {
  overflow: hidden;
}

.frk-auth-panel__backdrop,
.frk-lk-panel__backdrop,
.frk-map-panel__backdrop,
.frk-size-chart__backdrop {
  position: absolute;
  inset: 0;
  background: var(--frk-color-backdrop);
}

.frk-auth-panel__panel,
.frk-lk-panel__panel,
.frk-map-panel__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 642px;
  height: 100%;
  padding: 72px var(--frk-space-sm) var(--frk-space-lg);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface);
  overflow-y: auto;
  /* На iOS Safari скролл панели иначе может проваливаться в заблокированный фон (.frk-auth-panel-open/.frk-lk-panel-open) */
  overscroll-behavior: contain;
  animation: frk-panel-in var(--frk-motion-base) var(--frk-motion-ease);
}

@keyframes frk-panel-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frk-auth-panel__panel,
  .frk-lk-panel__panel,
  .frk-map-panel__panel {
    animation: none;
  }
}

.frk-auth-panel__close,
.frk-lk-panel__close,
.frk-map-panel__close {
  position: absolute;
  top: 28.4px;
  right: 24.2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

/* Крест 19.64×18.82 в макете стоит в 31px от верха и 26.36px от края; кнопка 24px даёт нормальную зону нажатия */
.frk-auth-panel__close-icon,
.frk-lk-panel__close-icon,
.frk-map-panel__close-icon,
.frk-size-chart__close-icon {
  width: 19.64px;
  height: 18.82px;
  background: var(--frk-color-ink);
  -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-auth-panel__view,
.frk-lk-panel__view {
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-md);
}

.frk-auth-panel__view[hidden],
.frk-lk-panel__view[hidden] {
  display: none;
}

.frk-auth-panel__head,
.frk-lk-panel__head,
.frk-map-panel__head {
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-xs);
}

.frk-auth-panel__title,
.frk-lk-panel__title,
.frk-map-panel__title {
  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);
  overflow-wrap: break-word;
  text-wrap: wrap;

  /* Рамка заголовка в макете 47px при строке 52.8px: текст выступает вверх на 5.8px */
  margin-top: -5.8px;
}

.frk-auth-panel__caption,
.frk-lk-panel__caption,
.frk-map-panel__caption,
.frk-lk-panel__meta,
.frk-auth-panel__resend-status,
.frk-lk-panel__resend-status {
  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-auth-panel__resend-status[hidden],
.frk-lk-panel__resend-status[hidden] {
  display: none;
}

.frk-auth-panel__form,
.frk-lk-panel__form {
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-md);
}

.frk-auth-panel__fields,
.frk-lk-panel__fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.frk-auth-panel__field,
.frk-lk-panel__field {
  display: flex;
}

.frk-auth-panel__input,
.frk-lk-panel__input {
  width: 100%;
  height: 45px;
  padding: 0 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: 20px;
  letter-spacing: var(--frk-tracking-ui);
  color: var(--frk-color-ink);
}

.frk-auth-panel__input::placeholder,
.frk-lk-panel__input::placeholder {
  color: rgb(19 18 18 / 60%);
}

.frk-auth-panel__error,
.frk-lk-panel__error {
  font-family: var(--frk-font-ui);
  font-size: var(--frk-size-ui-sm);
  color: var(--frk-color-error);
}

.frk-auth-panel__error[hidden],
.frk-lk-panel__error[hidden] {
  display: none;
}

.frk-auth-panel__submit,
.frk-lk-panel__submit {
  width: 100%;
}

.frk-auth-panel .frk-link,
.frk-lk-panel .frk-link {
  font-size: 20px;
  font-weight: var(--frk-weight-regular);
}

/* Пауза между отправками: ссылка серая и не реагирует, но остаётся в порядке табуляции */
.frk-auth-panel .frk-link[aria-disabled="true"],
.frk-lk-panel .frk-link[aria-disabled="true"] {
  color: rgb(19 18 18 / 60%);
  cursor: default;
}

/* Ссылка «назад» одинакова в панели входа и на странице заказа личного кабинета */
.frk-auth-panel__back,
.frk-lk-orders__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-family: var(--frk-font-ui);
  font-weight: var(--frk-weight-light);
  font-size: 14px;
  letter-spacing: var(--frk-tracking-ui);
  color: var(--frk-color-ink);
}

/* Стрелка выступает на 0.69px влево от 12px-бокса, как в макете (штрих вылезает за границу) */
.frk-auth-panel__back-icon,
.frk-lk-orders__back-icon {
  width: 12.69px;
  height: 12.7px;
  margin-left: -0.69px;
  background: var(--frk-color-ink);
  -webkit-mask: url("/local/templates/frk/css/../images/icons/arrow-left.svg") center / contain no-repeat;
  mask: url("/local/templates/frk/css/../images/icons/arrow-left.svg") center / contain no-repeat;
}

/* End */


/* Start:/local/templates/frk/css/auth-panel.css?17906930575058*/
/*
 * Панель входа/регистрации: то, чего нет у панели личного кабинета.
 * Оверлей, панель, поля, заголовки и ссылка «назад» — в panel-base.css
 * (подключается раньше этого файла).
 */

.frk-auth-panel__tabs {
  display: flex;
  gap: var(--frk-space-lg);
  align-items: center;
}

.frk-auth-panel__tab {
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: var(--frk-tracking-serif);
  color: rgb(19 18 18 / 60%);
}

.frk-auth-panel__tab[aria-selected="true"] {
  color: var(--frk-color-ink);
}

.frk-auth-panel__view {
  margin-top: var(--frk-space-lg);
}

.frk-auth-panel__method {
  display: flex;
  align-items: center;
  gap: var(--frk-space-sm);
  height: 45px;
  padding: 0 var(--frk-space-sm);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
}

/* В макете первый пункт занимает 284px вместе с разделителем, второй начинается через 16px;
   на узкой панели ужимается только первый, второй остаётся целым */
.frk-auth-panel__method .frk-auth-panel__radio {
  white-space: nowrap;
}

.frk-auth-panel__method .frk-auth-panel__radio:first-of-type {
  flex: 0 1 267px;
  min-width: 0;
}

.frk-auth-panel__method .frk-auth-panel__radio:last-of-type {
  flex-shrink: 0;
}

.frk-auth-panel__radio {
  display: flex;
  align-items: center;
  gap: var(--frk-space-xs);
  font-family: var(--frk-font-ui);
  font-weight: var(--frk-weight-light);
  font-size: 20px;
  letter-spacing: var(--frk-tracking-ui);
  color: var(--frk-color-ink);
  cursor: pointer;
}

.frk-auth-panel__radio input {
  appearance: none;
  flex-shrink: 0;
  margin: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--frk-color-ink);
  border-radius: 50%;
  transition: background-color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-auth-panel__radio input:checked {
  background: var(--frk-color-ink);
}

.frk-auth-panel__divider {
  flex-shrink: 0;
  width: 1px;
  height: 21px;
  background: rgb(19 18 18 / 20%);
}

.frk-auth-panel__captcha-slot:empty {
  display: none;
}

/* Номер на экране после регистрации — одной строкой, чтобы его было легко проверить глазами */
.frk-auth-panel__phone {
  white-space: nowrap;
}

.frk-auth-panel__submit {
  height: 49px;
}

.frk-auth-panel__code-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--frk-space-xs) var(--frk-space-sm);
  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-auth-panel__code-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.frk-auth-panel__code-meta strong {
  font-weight: var(--frk-weight-light);
  color: var(--frk-color-ink);
}

.frk-auth-panel__code-actions {
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-sm);
}

.frk-auth-panel__resend {
  align-self: center;
  text-align: center;
}

.frk-auth-panel__resend-status {
  align-self: center;
}

.frk-auth-panel__field-group {
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-xs);
}

.frk-auth-panel__forgot {
  align-self: flex-start;
}

.frk-auth-panel__consent {
  display: flex;
  align-items: center;
  gap: var(--frk-space-xs);
  max-width: 450px;
  font-family: var(--frk-font-ui);
  font-weight: var(--frk-weight-light);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: var(--frk-tracking-ui);
  color: var(--frk-color-ink);
  cursor: pointer;
}

/* В макете согласие нарисовано тем же кружком, что и переключатель метода входа */
.frk-auth-panel__consent input {
  appearance: none;
  flex-shrink: 0;
  margin: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--frk-color-ink);
  border-radius: 50%;
}

.frk-auth-panel__consent input:checked {
  background: var(--frk-color-ink);
}

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

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

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

/* До десктопа панель входа и регистрации — во всю ширину экрана, на планшете так же, как на телефоне (баг-лист 2, строка 29) */
@media (max-width: 1023px) {
  .frk-auth-panel__panel {
    max-width: none;
  }
}

/* End */
/* /local/templates/frk/css/footer.css?17906096419777 */
/* /local/templates/frk/css/filter-panel.css?17906096418898 */
/* /local/templates/frk/css/quick-add.css?17906530783401 */
/* /local/templates/frk/css/cart.css?179060964120635 */
/* /local/templates/frk/css/cookie-banner.css?17906617043439 */
/* /local/templates/frk/css/panel-base.css?17906096417167 */
/* /local/templates/frk/css/auth-panel.css?17906930575058 */