/* ==========================================================================
   MIROLINE — топ-полоса, шапка, мега-меню, поиск, мобильное меню
   ========================================================================== */

/* --- Топ-полоса ----------------------------------------------------------- */

.topbar {
  position: relative;
  /* выше sticky-шапки, иначе выпадающий список городов уходит под неё */
  z-index: var(--z-topbar);
  background: var(--c-surface);
  color: var(--c-ink-2);
  /* полоса и шапка — светлые: без границы они слились бы в одно пятно */
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-xs);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: 2.25rem;
}

.city-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-ink);
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}

/* единственный город выводится тем же блоком, но без кнопки — подсвечивать
   при наведении нечего: нажимать не на что */
button.city-toggle:hover { color: var(--c-accent); }

.topbar__city { position: relative; }

.topbar__place {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}

.topbar__address {
  position: relative;
  padding-left: var(--sp-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* тонкие разделители между городом, адресом и телефоном.
   Телефон адресуем через .topbar__place: тот же класс носит телефон
   в подвале мобильного меню, там разделитель не нужен */
.topbar__address::before,
.topbar__place .topbar__phone::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: .75rem;
  margin-top: -.375rem;
  background: var(--c-line);
}

.city-menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 13rem;
  padding: var(--sp-2);
  background: var(--c-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: 0 .625rem 1.875rem rgba(28, 24, 21, .13);
}

.city-menu button, .city-menu a {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  text-decoration: none;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast) var(--ease);
}

.city-menu button:hover, .city-menu a:hover { background: var(--c-surface); }

.topbar__phone {
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.topbar__place .topbar__phone {
  position: relative;
  padding-left: var(--sp-4);
}

.topbar__phone:hover { color: var(--c-accent); }

.topbar__links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.topbar__links a {
  text-decoration: none;
  color: var(--c-ink-2);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.topbar__links a:hover { color: var(--c-accent); }

/* --- Шапка ---------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 4.75rem;
}

/* --- Логотип -------------------------------------------------------------- */

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .1875rem;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--c-ink);
}

.logo:hover { color: var(--c-ink); }

.logo__word {
  /* единственный элемент на антикве — знак марки, а не текст интерфейса */
  font-family: var(--f-logo);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-logo);
  text-indent: var(--ls-logo);
  white-space: nowrap;
}

.logo__line {
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .3;
}

.logo__sub {
  font-family: var(--f-text);
  font-size: .5rem;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  /* цвет задан явно: opacity давала контраст 3.9:1 — ниже нормы AA */
  color: var(--c-ink-2);
}

.logo--footer,
/* Логотип подвала цвет при наведении не меняет. Перебиваем два общих правила:
   .logo:hover (красит в --c-ink ради светлой шапки) и .on-dark a:hover
   (высветляет ссылки на тёмном фоне) — отсюда .on-dark в селекторе, без него
   второе правило оказывается сильнее. */
.on-dark .logo--footer:hover { color: var(--c-on-dark); }

.logo--footer .logo__sub { color: var(--c-on-dark-2); }

/* логотип в шапке крупнее подвального: он же — кнопка «на главную» */
.header .logo__word { font-size: 1.6875rem; }

/* подпись под словом уменьшена в той же пропорции, что и само слово; в подвале
   логотип остаётся прежнего размера */
.header .logo__sub { font-size: .45rem; }

/* --- Кнопка каталога ------------------------------------------------------ */

.catalog-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  /* кнопка отодвинута от логотипа; ровно на столько же укорочено поле поиска
     (его max-width), поэтому правая часть шапки осталась на месте */
  margin-left: 2.5rem;
  /* шапка на десятую долю компактнее: высота, отступы и кегль сжаты вместе,
     иначе кнопка и поиск разъезжаются по высоте */
  height: 2.5875rem;
  padding-inline: 1.35rem;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: .9rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: background var(--t-fast) var(--ease);
}

.catalog-btn:hover { background: var(--c-accent-hover); }

/* три полоски превращаются в крестик, пока меню раскрыто */
.catalog-btn__icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  width: .9rem;
  height: .9rem;
}

.catalog-btn__icon span {
  display: block;
  /* Целые пиксели обязательны: при height 1.5px и gap 4px шаг между полосками
     выходил 5.5px, каждая ложилась на свою долю пиксельной сетки и они
     выглядели разной толщины. 2px + 4px дают шаг 6px — сетка одна для всех. */
  height: 2px;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}

.catalog-btn[aria-expanded="true"] .catalog-btn__icon span:nth-child(1) { transform: translateY(.375rem) rotate(45deg); }
.catalog-btn[aria-expanded="true"] .catalog-btn__icon span:nth-child(2) { opacity: 0; }
.catalog-btn[aria-expanded="true"] .catalog-btn__icon span:nth-child(3) { transform: translateY(-.375rem) rotate(-45deg); }

/* --- Инструменты шапки ---------------------------------------------------- */

/* Лупа нужна только там, где поле поиска спрятано, — правило показа
   лежит в responsive.css рядом с остальной мобильной шапкой. */
.search-toggle { display: none; }

/* Размер значка задаётся здесь, а не атрибутами width/height внутри самого
   svg: пиксели в атрибутах не растут ни от увеличенного шрифта, ни от
   масштабирования только текста, и значки оставались мелкими, пока вся
   остальная шапка (она в rem) увеличивалась вместе с экраном. */
.header__tools .icon-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

.header__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* в шапке цели крупнее базовых: иконки здесь — основная навигация */
.header__tools .icon-btn {
  width: 2.875rem;
  height: 2.875rem;
}

.icon-btn { position: relative; }

.header__tools .counter {
  top: .3125rem;
  right: .3125rem;
}

.counter {
  position: absolute;
  top: .125rem;
  right: .125rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 .25rem;
  display: grid;
  place-items: center;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: .625rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}

/* --- Поиск ---------------------------------------------------------------- */

/* поиск забирает всё место между кнопкой каталога и иконками */
.search {
  position: relative;
  flex: 1;
  min-width: 0;
  /* было 46rem: поле укорочено на 2.5rem в пользу отступа перед кнопкой каталога */
  max-width: 43.5rem;
}

.search__input {
  width: 100%;
  height: 2.5875rem;
  padding: 0 2.7rem 0 .9rem;
  font-size: .9rem;
  background: var(--c-surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.search__input::placeholder { color: var(--c-ink-2); }

/* собственная рамка при фокусе не подсвечивается: её роль берёт на себя
   внешний outline, иначе получается две рамки с зазором между ними */
.search__input:focus {
  background: var(--c-bg);
}

.search__input::-webkit-search-cancel-button { display: none; }

.search__submit {
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  transform: translateY(-50%);
  width: 2.025rem;
  height: 2.025rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  color: var(--c-ink-2);
  transition: color var(--t-fast) var(--ease);
}

.search__submit:hover { color: var(--c-accent); }

/* по той же причине, что и значки справа: иначе лупа в поле останется
   единственной, кто не вырос */
.search__submit svg {
  width: 1.25rem;
  height: 1.25rem;
}

.search__results {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  max-height: 22rem;
  overflow-y: auto;
  padding: var(--sp-2);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: 0 .75rem 2.125rem rgba(28, 24, 21, .14);
}

.search__item a,
.search__item button {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  text-align: left;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast) var(--ease);
}

.search__item[aria-selected="true"] a,
.search__item[aria-selected="true"] button,
.search__item a:hover,
.search__item button:hover { background: var(--c-surface); }

/* Пустой элемент того же размера держит строки-запросы на одной сетке с товарами */
.search__item-thumb {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  background: var(--c-surface);
  border-radius: var(--radius-sm);
}

.search__item-price {
  margin-left: auto;
  color: var(--c-ink-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.search__empty {
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

/* --- Меню каталога -------------------------------------------------------- */

/* Панель занимает всё, что осталось под шапкой, и прокручивается сама:
   разделов с подборками больше, чем помещается в экран.
   Позиция считается от самой шапки (она sticky, то есть позиционирована),
   а не от --header-h: над шапкой бывает админ-панель, и она сдвигает
   её вниз уже после того, как переменную посчитали. */
.catalog-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 1rem 2.5rem rgba(28, 24, 21, .1);
}

/* панель живёт внутри шапки, поэтому на время показа шапка поднимается
   над затемнением — иначе оверлей накрыл бы и её, и саму панель.
   Топ-полоса идёт следом: она выше шапки и без этого темнела бы одна */
body[data-catalog-open] .header { z-index: var(--z-drawer); }
body[data-catalog-open] .topbar { z-index: calc(var(--z-drawer) + 1); }

/* ширина колонки с заголовком: по ней же считается карточка в лентах ниже */
.catalog-menu { --catalog-aside: 13rem; }

.catalog-menu__inner {
  display: grid;
  grid-template-columns: var(--catalog-aside) minmax(0, 1fr);
  gap: var(--sp-12);
  padding-block: var(--sp-8) var(--sp-12);
}

/* заголовок едет за прокруткой панели — иначе в подборках теряется контекст */
.catalog-menu__aside {
  position: sticky;
  top: var(--sp-8);
  align-self: start;
}

.catalog-menu__heading {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
}

.catalog-menu__pin {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface);
  color: var(--c-ink-2);
  font-size: var(--fs-xs);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.catalog-menu__pin:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.catalog-menu__group + .catalog-menu__group { margin-top: var(--sp-8); }

.catalog-menu__group-title {
  margin-bottom: var(--sp-4);
  font-family: var(--f-text);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-2);
}

.catalog-menu__group-title a {
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.catalog-menu__group-title a:hover { color: var(--c-accent); }

.catalog-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.catalog-tile {
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: 4 / 3;
  padding: var(--sp-3);
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--c-ink);
}

.catalog-tile__media {
  position: absolute;
  inset: 0;
}

.catalog-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* снимки вертикальные: центр кадра приходится на пояс, кадрируем выше */
  object-position: center 25%;
  transition: transform var(--t-base) var(--ease);
}

.catalog-tile:hover .catalog-tile__media img { transform: scale(1.04); }

.catalog-tile__title {
  position: relative;
  justify-self: center;
  max-width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(253, 251, 248, .92);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  text-align: center;
  transition: color var(--t-fast) var(--ease);
}

.catalog-tile:hover .catalog-tile__title { color: var(--c-accent); }

/* Плитка без фото: подложка под подписью здесь только мешала бы, а высота
   в 4:3 читалась бы как незагрузившаяся картинка */
.catalog-tile--flat {
  aspect-ratio: auto;
  align-content: center;
  min-height: 3.5rem;
  transition: background var(--t-fast) var(--ease);
}

.catalog-tile--flat:hover { background: var(--c-accent-soft); }

.catalog-tile--flat .catalog-tile__title {
  padding: 0;
  background: none;
}

/* --- Подборки в меню ------------------------------------------------------ */

.catalog-menu__blocks {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-line);
}

.catalog-menu__block + .catalog-menu__block { margin-top: var(--sp-12); }

.catalog-menu__block-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.catalog-menu__block-title {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h2);
}

.catalog-menu__block-title a {
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.catalog-menu__block-title a:hover { color: var(--c-accent); }

/* Лента здесь уже страницы — слева колонка с заголовком, поэтому ширина
   карточки и отступы считаются заново: в секциях они привязаны к контейнеру */
.catalog-menu .slider-wrap {
  --card-w: calc((min(var(--container), 100vw - var(--container-pad) * 2)
                  - var(--catalog-aside) - var(--sp-12) - var(--grid-gap) * 3) / 4);
}

.catalog-menu .slider { scroll-padding-inline: 0; }

.catalog-menu .slider__track { padding-inline: 0; }

/* стрелки не выходят наружу: у панели своя прокрутка, и вылет дал бы полосу */
.catalog-menu .slider__nav--prev { left: 0; }
.catalog-menu .slider__nav--next { right: 0; }

/* Баннер шире карточки вдвое — в ленте он читается как обложка подборки.
   Высота задана явно и равна фото соседней карточки (3/4 её ширины):
   иначе снимок растянул бы ленту на всю высоту исходника */
.catalog-menu__banner {
  grid-column: span 2;
  align-self: start;
  scroll-snap-align: start;
  height: calc(var(--card-w) * 4 / 3);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-surface);
}

.catalog-menu__banner a,
.catalog-menu__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Бургер --------------------------------------------------------------- */

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: .3125rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  /* Полоски внутри не имеют собственной ширины, поэтому при нехватке места
     флекс сжимал кнопку до одних отступов — иконка меню пропадала с экрана. */
  flex-shrink: 0;
}

.burger span {
  display: block;
  height: 1.5px;
  background: var(--c-ink);
  transition: transform var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.4062rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.4062rem) rotate(-45deg); }

/* --- Мобильное меню -------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-drawer);
  width: min(20rem, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  transform: translateX(-100%);
  transition: transform var(--t-base) var(--ease);
}

.drawer[data-open] { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--c-line);
}

.drawer__title {
  font-family: var(--f-display);
  font-size: 1.375rem;
}

.drawer__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-6);
}

.drawer__nav a {
  display: block;
  padding: var(--sp-3) 0;
  font-size: 1.0625rem;
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
}

.drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-6);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}

.drawer__foot .topbar__phone { color: var(--c-ink); }
.drawer__foot .topbar__hours { color: var(--c-ink-2); }

/* --- Второй уровень мобильного меню ---------------------------------------- */

.drawer__row {
  display: flex;
  align-items: center;
  /* разделитель на всей строке, включая кнопку-галочку */
  border-bottom: 1px solid var(--c-line);
}

.drawer__row a,
/* Название раздела — кнопка (открывает подкатегории), но выглядит как
   соседние пункты меню: те же кегль, отступы и выравнивание по левому краю. */
.drawer__section {
  flex: 1;
  border-bottom: none;
}

.drawer__section {
  padding: var(--sp-3) 0;
  font-family: inherit;
  font-size: 1.0625rem;
  color: inherit;
  text-align: left;
  background: none;
  cursor: pointer;
}

/* «Назад в меню» — первая строка списка подкатегорий. Значок в шапке подменю
   остаётся, но замечают в первую очередь пункт списка. */
.drawer__return {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  color: var(--c-ink-2);
  border-bottom: 1px solid var(--c-line);
}

.drawer__return:hover { color: var(--c-accent); }

/* кнопка-галочка: отдельная цель нажатия во всю высоту строки */
.drawer__expand {
  display: grid;
  place-items: center;
  align-self: stretch;
  padding-inline: var(--sp-4);
  color: var(--c-ink-2);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.drawer__expand:hover { color: var(--c-accent); }

/* подпанель занимает всё меню и выезжает справа поверх первого уровня */
.drawer__sub {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease);
}

.drawer__sub[data-open] { transform: translateX(0); }

.drawer__back {
  margin-right: var(--sp-2);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(28, 24, 21, .42);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.overlay[data-open] { opacity: 1; }

body[data-scroll-locked] { overflow: hidden; }