/* 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/shops.css?17906096417280*/
/*
 * Страница «Магазины» (ТЗ 7.7, макет node 2069:28489, 1920).
 *
 * Сетка и колонки берутся из layout.css: описание занимает колонки 1–6,
 * сведения о магазине — 7–12. Хлебные крошки переиспользуют breadcrumbs.css.
 *
 * В макете есть только 1920. Ниже раскладка собрана по общим правилам
 * проекта: до 1024 блоки идут друг под другом, кегли берутся из токенов
 * и растут линейно между 768 и 1920.
 */

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

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

/* --- Описание и сведения о магазине ------------------------------------- */

/* Колонки ниже 1024 не вмещают крупные значения — блоки встают друг под другом */
.frk-shops__info {
  row-gap: var(--frk-space-lg);
}

@media (min-width: 768px) {
  .frk-shops__info {
    row-gap: var(--frk-space-xl);
  }
}

@media (max-width: 1023px) {
  .frk-shops__about,
  .frk-shops__facts {
    grid-column: 1 / -1;
  }
}

/*
 * Пояснение о расположении прижато к низу левой колонки: его нижняя
 * кромка совпадает с нижней кромкой правой (в макете 628 и 627.6).
 * В одну колонку оно просто идёт следом за описанием.
 */
.frk-shops__about {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--frk-space-sm);
}

@media (min-width: 1024px) {
  .frk-shops__about {
    gap: var(--frk-space-lg);
  }
}

.frk-shops__text {
  /* Ширина 818px в макете при кегле 20 — держим её в долях кегля */
  max-width: 40.9em;
  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%);

  /*
   * В макете набрана текстовая гарнитура Inter (оптический размер 14).
   * Автоподбор по кеглю сужает буквы, и строки переносятся не там, где
   * в макете: «Здесь» и «другими» остаются на прежней строке.
   */
  font-optical-sizing: none;
}

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

.frk-shops__facts {
  display: grid;
  gap: var(--frk-space-md);
  align-content: start;
  margin: 0;
}

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

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

.frk-shops__fact-value {
  /* Адрес в макете переносится в блоке 893px при кегле 48 */
  max-width: 18.6em;
  margin: 0;
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-display-lg);
  line-height: 1.1;
  letter-spacing: var(--frk-tracking-serif);
}

/* --- Карта --------------------------------------------------------------- */

.frk-shops-map {
  margin-top: var(--frk-space-xl);
}

@media (min-width: 1024px) {
  .frk-shops-map {
    margin-top: var(--frk-space-2xl);
  }
}

/*
 * Полотно карты. Пропорции: 5:6 на телефоне, 4:3 на планшете и 1904:852
 * на десктопе, как в макете 1920. Шире 1920 высота замирает на 852px —
 * иначе карта вытягивалась бы выше экрана.
 */
.frk-shops-map__canvas {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  background: var(--frk-color-surface-muted);
}

@media (min-width: 768px) {
  .frk-shops-map__canvas {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1024px) {
  .frk-shops-map__canvas {
    aspect-ratio: 1904 / 852;
    max-height: 852px;
  }
}

.frk-shops-map__view,
.frk-shops-map__placeholder {
  position: absolute;
  inset: 0;
}

/* Плитки Яндекса цветные, в макете карта серая; метки и подписи фильтр не затрагивает */
.frk-shops-map__view [class*="-ground-pane"] {
  filter: grayscale(1);
}

/*
 * Заглушка стоит, пока карта не загружена: без ключа Яндекс.Карт или
 * если API не ответил. Метка в ней — та же разметка, что уходит на карту.
 */
.frk-shops-map__placeholder {
  display: grid;
  place-items: center;
}

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

/* --- Метка магазина ------------------------------------------------------- */

/*
 * Круг со знаком и плашка с адресом одного золотого цвета, поэтому в макете
 * они читаются как одна фигура: слева круг 48px, справа скругление в 2px.
 * Ширина по макету 2673:4500 — плашка 226 от середины круга: номер дома
 * стоит в одной строке с улицей (баг-лист 2, строка 18).
 */
.frk-shops-marker {
  position: relative;
  display: block;
  width: 250px;
  height: 48px;
  border-radius: 24px var(--frk-radius) var(--frk-radius) 24px;
  background: var(--frk-color-gold);
  color: var(--frk-color-text-inverse);
}

.frk-shops-marker__logo {
  position: absolute;
  top: 15.28px;
  left: 11.81px;
  width: 24.31px;
  height: 20.84px;
}

.frk-shops-marker__label {
  position: absolute;
  top: 6px;
  left: 48px;
  width: 202px;
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-regular);
  font-size: 13.9px;
  line-height: var(--frk-leading-base);

  /* Подпись набрана Source Serif, но трекинг в макете интерфейсный: −5% */
  letter-spacing: var(--frk-tracking-ui);
}

/*
 * В макете плашка подвала стоит в 8px от карты, а не в 91px секционного
 * ритма, который .frk-footer держит под остальные страницы. Между <main>
 * и подвалом лежат диалог быстрого выбора и корзина, поэтому соседа по
 * «+» здесь нет — берём любого следующего.
 */
.frk-shops ~ .frk-footer {
  --frk-rhythm-footer: var(--frk-layout-gutter);
}

/* End */
/* /local/templates/frk/css/breadcrumbs.css?17906096411350 */
/* /local/templates/frk/css/shops.css?17906096417280 */