/* Аркона — шапка и подвал */

/* ---------- ШАПКА ---------- */
/* Липнет вся шапка, но «поднятая» на высоту верхней части: логотип с поиском
   уезжают за край, на экране остаётся только полоса меню. Делать sticky на самой
   .header__nav НЕЛЬЗЯ: sticky живёт в пределах своего родителя, и меню уезжало
   вместе с шапкой, то есть навигация при прокрутке пропадала совсем. */
.header {
  position: sticky;
  top: calc(var(--sticky-h) - var(--header-h));
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.header__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 130px;
  padding-inline: var(--gutter);
}

/* Логотип строго по центру шапки, как в макете */
.header__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--ink);
  width: 199px;
}
.header__logo svg { width: 100%; height: auto; }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  /* эталон из макета: плашка 163 x 31.3, обводка 1.13, текст с отступом 16.5 слева,
     лупа 14.2 и правый отступ 13.8 (просьба клиента 30.08 «уменьшить как в макете») */
  width: 163px;
  height: 31px;
  padding-inline: 16px 14px;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 999px;
}
.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-size: var(--fs-input);
  color: var(--ink);
}
.search__input::placeholder { color: var(--ink-soft); }
.search__btn { display: grid; place-items: center; color: var(--ink); }

.header__actions {
  display: flex;
  align-items: center;
  /* в макете зазоры между иконками 20.3 и 21.4, счётчик «0» в 5.7 от корзины */
  gap: 21px;
}
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  color: var(--ink);
}
.icon-btn__count {
  font-size: var(--fs-nav);
  line-height: 1;
  margin-left: 6px;
}

/* Нижняя строка: меню */
.header__nav {
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;                     /* в макете между пунктами меню 38.5 */
  min-height: 48px;
  padding-inline: var(--gutter);
}
.nav__item { position: relative; align-self: stretch; display: flex; align-items: center; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 14px;
  font-size: var(--fs-nav);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}

/* Подчёркивание растёт слева направо и уезжает обратно влево */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .15s var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__item[data-open="true"] > .nav__link::after,
.nav__link.is-active::after { transform: scaleX(1); }

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

.nav__phone::after { content: none; }

.nav__caret {
  width: 8px; height: 5px; flex: none;
  transition: transform .15s var(--ease);
}
.nav__item[data-open="true"] .nav__caret { transform: rotate(180deg); }

/* Выпадающее меню */
.dropdown {
  position: absolute;
  top: 100%;                       /* верх плашки вплотную к нижнему краю строки меню, без зазора */
  left: 50%;
  transform: translate(-50%, 12px);
  min-width: 320px;
  padding: 22px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  /* тень деликатная и только вниз: у выпадающего меню в макетах нет отдельного мокапа,
     в «поиске» панель нарисована вообще без тени, поэтому берём минимум */
  box-shadow: 0 6px 12px -8px rgba(44, 44, 44, .16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 5;
}
.nav__item[data-open="true"] .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.dropdown a {
  display: block;
  padding: 13px 34px;              /* больше воздуха между пунктами */
  font-size: 17px;                 /* крупнее, как в макете */
  line-height: 1.3;
  text-transform: uppercase;       /* просьба клиента 30.08: пункты заглавными */
  color: var(--ink);
  white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.dropdown a:hover { color: var(--ink-muted); }   /* текст сереет, серой плашки нет */

.burger { display: none; }

/* Мобильная шапка */
@media (max-width: 1023px) {
  .header__top {
    min-height: var(--header-h);
    justify-content: space-between;
  }
  .header__logo {
    position: static;
    transform: none;
    width: 128px;
  }
  .search { display: none; }
  .burger {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: -8px;
  }
  .header__actions { gap: var(--sp-2); }
  .header__nav { display: none; }

  .drawer {
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 39;
    background: var(--surface);
    padding: var(--sp-3) var(--gutter) var(--sp-6);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s var(--ease);
  }
  .drawer[data-open="true"] { transform: none; visibility: visible; pointer-events: auto; }
  .drawer .search { display: flex; width: 100%; margin-bottom: var(--sp-3); }
  .drawer .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-inline: 0;
  }
  .drawer .nav { width: 100%; }
  .drawer .nav__item { width: 100%; }
  .drawer .nav__link {
    width: 100%;
    justify-content: space-between;
    padding-block: 14px;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-base);
  }
  .drawer .nav__link::after { content: none; }
  .drawer .dropdown {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    display: none;
  }
  .drawer .nav__item[data-open="true"] .dropdown { display: block; transform: none; }
  .drawer .dropdown a { padding: 12px 0 12px var(--sp-2); border-bottom: 1px solid var(--line); }
}

/* ТЕЛЕФОН: бургер не нужен — навигация через таб-бар снизу, поиск постоянно сверху */
@media (max-width: 599px) {
  .burger { display: none !important; }
  .drawer { display: none !important; }
  .header { border-bottom: 0; }          /* убираем двойную линию: остаётся только линия под поиском */
  .header__top { border-bottom: 0; }
  .header__logo { margin-left: 0; }
  /* поиск внутри msearch должен показываться (базовое .search{display:none} его гасило) */
  .msearch { display: block !important; }
  .msearch .search { display: flex !important; width: 100%; height: 44px; }
}

@media (min-width: 1024px) {
  .drawer { display: contents; }
  .drawer .search { display: none; }
}

/* ---------- ПОДВАЛ ---------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding-block: 39px var(--sp-4);    /* в макете логотип на 39 от линии подвала */
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;                        /* в макете колонки подвала идут по 320 впритык, без зазора */
  align-items: start;
  padding-bottom: 79px;          /* в макете от низа логотипа до заголовков колонок 97 */
}
/* В макете верхняя строка подвала выровнена НЕ по общей линии: логотип начинается
   на 39 от линии подвала, а текстовые колонки на 80. Разница 41. */
.footer__top > *:not(.footer__logo) { margin-top: 41px; }
.footer__address { font-style: normal; }
.footer__note { margin-bottom: 12px; }
.footer__logo { width: 199px; color: var(--ink); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-bottom: var(--sp-5);
}
.footer__title {
  font-size: var(--fs-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: 20px;           /* в макете от заголовка до первого пункта 20 */
}
.footer__list li + li { margin-top: 20.4px; }   /* шаг пунктов в макете 40.8 = строка 20.4 + 20.4 */

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--ink);            /* в макете копирайт тёмный, 2C2C2C, а не серый */
}

.badges { display: flex; align-items: center; gap: var(--sp-2); }
.badge {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 28px;
  padding-inline: 8px;
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.iconset { display: flex; align-items: center; gap: 10px; }
.iconset__item {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
}
.iconset__item img { width: 40px; height: 40px; display: block; }
/* запасной вид, если картинки нет */
.iconset__item--text {
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 0;
}

@media (max-width: 1023px) {
  .footer__top { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); column-gap: var(--sp-4); }
  .footer__cols { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); column-gap: var(--sp-4); }
}
@media (max-width: 599px) {
  /* Подвал на телефоне был «простынёй» в одну колонку — Ольга просила короче.
     Держим два столбца, режем воздух и шаг пунктов. */
  .footer__top { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-3); column-gap: var(--sp-3); }
  .footer__cols { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-4); column-gap: var(--sp-3); padding-bottom: var(--sp-4); }
  .footer { padding-block: var(--sp-4) var(--sp-3); }
  .footer__top { padding-bottom: var(--sp-4); }
  .footer__title { margin-bottom: 12px; }
  .footer__list li + li { margin-top: 12px; }
  .footer__logo { width: 150px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* ==== Иконки шапки: убираем серую прямоугольную подсветку. Анимации нет — просьба клиента ==== */
html { -webkit-tap-highlight-color: transparent; }
.icon-btn, .tabbar__item, .burger, .nav__link, a, button { -webkit-tap-highlight-color: transparent; }

.icon-btn { border-radius: 8px; }
/* У иконок шапки контур упирается в границы viewBox, а обводка рисуется ПО ЦЕНТРУ линии,
   поэтому её внешняя половина срезалась (у профиля и корзины был плоский низ).
   overflow: visible даёт обводке дорисоваться целиком. */
.icon-btn svg,
.tabbar__item svg { overflow: visible; }

/* Иконки шапки НЕ подсвечиваются вообще и сердечко в меню НЕ красится:
   просьба клиента 30.08. Заливка сердца при наведении осталась только
   на карточках товаров (.pcard__fav), это разные элементы. */
.icon-btn:hover,
.icon-btn:focus-visible,
.icon-btn:active,
.icon-btn:hover svg,
.icon-btn:focus-visible svg,
.icon-btn.is-active svg {
  color: var(--ink);
  background: transparent;
  stroke: currentColor;
  fill: none;
}

/* Таб-бар: активный пункт — без прямоугольника, плавная подсветка + микро-подъём иконки */
.tabbar__item { transition: color .2s var(--ease); border-radius: 10px; }
.tabbar__item svg { transition: transform .2s var(--ease); }
.tabbar__item:active svg { transform: scale(.9); }
.tabbar__item.is-active svg { transform: translateY(-2px); }
.tabbar__item[aria-label], .tabbar__item { outline: none; }