/* Header / Footer.
   Figma: Header/scroll/pc 975:2488, Header/scroll/mb 975:2574,
          Phooter/pc 975:2535, Phooter/mb 975:2580.
   Все значения — из .design/spec/layout.header.md и .design/spec/layout.footer.md. */

/* ─── Header ─────────────────────────────────────────────────────────────── */

.au-header {
  background: var(--au-white);
  padding-bottom: 41px; /* 232 − (135 + 1 + 16 + 39) */
}

/* верхняя полоса: 134px + hairline 1px в ряду 134 (Figma Line 1 975:2505 стоит якорем на
   y=135 с inset -1px, то есть штрих ложится над якорем) */
.au-header__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  height: 135px; /* 134 контент + 1 border-bottom (border-box) */
  padding: 0 43px 0 42px; /* бургер x=42; иконки правый край 1877 = 1920 − 43 */
  border-bottom: 1px solid var(--au-hairline-dark);
}

/* бургер: 3 линии по 54×1, y 47 / 61 / 75, шаг 14 (975:2506–2508) */
.au-burger {
  margin-top: 47px;
  display: flex;
  flex-direction: column;
  gap: 13px; /* 14 шаг − 1 толщина */
  width: 54px;
}

.au-burger__line {
  display: block;
  width: 54px;
  height: 1px;
  background: var(--au-burger-line);
}

/* Menu burger/pc 975:2593: hover и click снимают полупрозрачность линий;
   :focus-visible идёт парой — с клавиатуры бургер иначе не отзывается */
.au-burger:hover .au-burger__line,
.au-burger:active .au-burger__line,
.au-burger:focus-visible .au-burger__line {
  background: var(--au-black);
}

.au-header__logo {
  margin-top: 40px; /* Mask group 975:2489 y=40 */
  justify-self: center;
}

.au-header__logo img {
  width: 163px;
  height: 42.0234px;
}

/* правая группа: корзина (1091:2440, правый край 1760) и соц-иконки (1796…1877).
   Верхние края разные — 37 у корзины, 48 у иконок, поэтому выравниваю по
   собственным margin-top, а не по общему align-items. */
.au-header__right {
  justify-self: end;
  display: flex;
  align-items: start;
  gap: 36px; /* 1796 − 1760 */
}

/* Basket/pc 1091:2440 — бокс 125×48 с padding 10 и gap 10 */
.au-header__basket {
  margin-top: 37px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  opacity: 0.5; /* и текст, и глиф в макете полупрозрачные */
  font-weight: 600;
  font-size: 16px;
  color: var(--au-black);
  transition: opacity 0.2s;
}

.au-header__basket:hover,
.au-header__basket:focus-visible {
  opacity: 1;
}

/* иконка уже несёт opacity 0.5 внутри SVG — гасить второй раз нельзя */
.au-header__basket img {
  width: 28px;
  height: 28px;
  opacity: 1;
}

/* соц-иконки: 1796 и 1851, 26×26 → gap 29 (975:2509, 975:2510) */
.au-header__social {
  margin-top: 48px;
  display: flex;
  gap: 29px;
}

.au-header__social-link,
.au-header__social-link img {
  width: 26px;
  height: 26px;
}

/* nav: Frame 7 975:2492 — 1855×39, y=152, space-between */
.au-header__nav {
  margin-top: 17px; /* 152 − 135 */
}

.au-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1855px;
  max-width: calc(100% - 65px);
  height: 39px;
  margin-left: 32px; /* Frame 7 975:2492 x=32 */
}

.au-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Header/Hover menu/pc 975:2511: на ховере участок хэйрлайна под пунктом становится
   чёрным. Line 13 975:2534 — 1px, ширина 143 при боксе пункта 130, ряд 134 (18 над
   боксом). Линия висит на <li>, а не на ссылке: у ссылки opacity 0.7, и она бы
   осветлила штрих до тона 67 вместо чёрного. У текущей страницы подсветки нет —
   в макетах внутренних страниц ряд 134 чистый, штрих приходит только с ховером. */
.au-nav__item::after {
  content: "";
  position: absolute;
  top: -18px;
  right: -6.5px;
  left: -6.5px;
  height: 1px;
  background: var(--au-black);
  opacity: 0;
}

.au-nav__item:hover::after,
.au-nav__item:focus-within::after {
  opacity: 1;
}

.au-nav__link {
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px; /* Figma text h=19 (975:2494) */
  color: var(--au-black);
  opacity: 0.7;
}

/* в 975:2511 у подсвеченного пункта текст без прозрачности; :focus-visible —
   клавиатурный эквивалент ховера, в макете состояний фокуса нет */
.au-nav__link:hover,
.au-nav__link:focus-visible {
  opacity: 1;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.au-footer {
  position: relative;
  background: var(--au-black);
  color: var(--au-white);
  overflow: hidden;
}

.au-footer__inner,
.au-footer__legal {
  width: 1728px; /* контент 96 … 1824 */
  max-width: calc(100% - var(--au-gutter) * 2);
  margin: 0 auto;
}

.au-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 96px; /* логотип y=96 */
}

.au-footer__logo img {
  width: 163px;
  height: 42.0234px;
}

.au-footer__phone,
.au-footer__email {
  display: block;
  width: fit-content;
  font-size: 32px;
  font-weight: 500;
  line-height: 39px; /* Figma height 39 при lh normal */
  letter-spacing: 4.8px;
  color: var(--au-white);
  white-space: nowrap;
}

.au-footer__phone {
  margin-top: 56.977px; /* 195 − (96 + 42.023) */
}

.au-footer__email {
  margin-top: 44px; /* 278 − 234 */
}

/* соц-иконки 96 / 151 (gap 29), лого студии прижато к правому краю колонки */
.au-footer__social {
  display: flex;
  align-items: flex-start;
  gap: 29px;
  margin-top: 44px; /* 361 − 317 */
  height: 31px; /* 361 … 392 */
}

.au-footer__social-link,
.au-footer__social-link img {
  width: 26px;
  height: 26px;
}

.au-footer__social-link--mb {
  display: none; /* третья иконка есть только в мобильном макете */
}

/* Group 975:2565: x=1751 (=1920 − 96 − 73.06), y=363 — правый край контентной колонки.
   Абсолют осознанный: в DOM логотип стоит четвёртым в соц-строке, потому что на mb
   (975:2565 в mb-фрейме) он идёт именно там, с зазором 29 от иконок. На pc макет
   отодвигает его к правому краю страницы, а правую половину строки занимает колонка
   пилюль: в потоке логотип упирается в неё на 1259 вместо 1751 (замерено). */
.au-footer__studio {
  position: absolute;
  right: var(--au-gutter);
  top: 363px;
}

.au-footer__studio img {
  width: 73.0637px;
  height: 28.9994px;
}

/* пилюли: 1332 … 1824 = 492 (Phooter/pc 975:2549 …) */
.au-footer__nav {
  /* не 0 0 492: между 1024 и 1920 колонка обязана сжиматься, иначе третий
     ряд уходит за правый край, а .au-footer скрывает это overflow: hidden */
  flex: 0 1 492px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px; /* шаг рядов 71 = 47 + 24 */
}

.au-footer__nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.au-footer__nav-row--tight {
  gap: 16px; /* ряд 3: 1535 − 1519 */
}

.au-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 47px;
  padding: 0 20px;
  border-radius: 96px;
  background: var(--au-pill-bg);
  font-size: 16px;
  font-weight: 400;
  line-height: 19px; /* Figma text h=19 внутри 47 (padding 14) */
  color: var(--au-white);
  white-space: nowrap;
}

/* разделитель 96 … 1824 на y=442, реквизиты y=480 */
.au-footer__legal {
  display: flex;
  align-items: center;
  gap: 42px; /* 281 − 239, 432 − 390, 609 − 567 */
  margin-top: 50px; /* 442 − 392 */
  padding-top: 37px; /* 480 − (442 + 1 border) */
  padding-bottom: 33px; /* 537 − 504 */
  border-top: 1px solid var(--au-hairline-light);
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  text-transform: uppercase;
}

.au-footer__copyright {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Оверлей меню ───────────────────────────────────────────────────────── */
/* Menu/Default/pc 975:2613 — перекрытие вьюпорта, а не блок в потоке страницы.
   Все координаты из .design/spec/menu.md — от левого верхнего угла вьюпорта. */

.au-menu {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--au-black);
  overflow: clip;
}

/* фон под панелью не скроллится */
html.au-menu-open {
  overflow: hidden;
}

/* Close/pc 975:2634 (тот же компонент в поп-апе сертификата 975:1421) — две линии
   54 × 1 под ±45° в боксе 38.184. У линий opacity 0.5 и у группы 0.5, итог 0.25;
   hover снимает групповую. */
.au-close {
  position: absolute;
  width: 38.184px;
  height: 38.184px;
  opacity: 0.5;
}

.au-close::before,
.au-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px; /* 38.184 × √2 */
  height: 1px;
  margin: -0.5px 0 0 -27px;
  background: rgba(255, 255, 255, 0.5);
}

.au-close::before {
  transform: rotate(45deg);
}

.au-close::after {
  transform: rotate(-45deg);
}

.au-close:hover,
.au-close:focus-visible {
  opacity: 1;
}

/* в оверлее меню крестик стоит слева сверху */
.au-menu__close {
  top: 47px;
  left: 42px;
}

.au-menu__col {
  position: absolute;
  display: flex;
  flex-direction: column;
}

/* товары: left 851, y 171, шаг 142 при боксе 70.
   Ниже 1920 макета нет: координата задана долей от макетной ширины (851/1920),
   иначе колонки стоят на абсолютных 851 и 1378 и уходят за вьюпорт целиком —
   панель кроет экран и прокрутки в ней нет, то есть пункты просто недоступны */
.au-menu__col--products {
  top: 171px;
  left: calc(851 / 1920 * 100%);
  gap: 72px;
}

/* категории: left 1378, y 171, шаг 108 при боксе 36.
   max() держит зазор от колонки товаров: у неё правый край 851 + 291 = 1142,
   а доля 1378/1920 опускается до 735 уже при 1024 */
.au-menu__col--cats {
  top: 171px;
  left: max(calc(1378 / 1920 * 100%), calc(851 / 1920 * 100% + 315px));
  gap: 72px;
}

.au-menu__link {
  position: relative;
  display: block;
  width: max-content;
  color: var(--au-white);
  opacity: 0.3;
}

.au-menu__link:hover,
.au-menu__link:focus-visible,
.au-menu__link--here {
  opacity: 1;
}

.au-menu__link--product {
  font-size: 72px;
  font-weight: 600;
  line-height: 70px;
}

.au-menu__link--cat {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
}

/* Line 14 975:2633 — акцент под активным товаром: 203 × 2, отступ 24 от низа бокса.
   Ширина в макете к слову не привязана (203 при боксе «Ампул» 287), это константа. */
.au-menu__link--product::after {
  content: "";
  position: absolute;
  top: calc(100% + 24px);
  left: 2px;
  width: 203px;
  height: 2px;
  background: var(--au-white);
  opacity: 0;
}

.au-menu__link--product:hover::after,
.au-menu__link--product:focus-visible::after,
.au-menu__link--product.au-menu__link--here::after {
  opacity: 1;
}

/* ─── Мобильный макет: 390px ─────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* Header/scroll/mb 975:2574 — 390×65 */
  .au-header {
    padding-bottom: 0;
  }

  .au-header__top {
    grid-template-columns: 1fr auto auto; /* логотип | корзина | бургер */
    column-gap: 24px; /* корзина 283…311, бургер 335 */
    height: 65px; /* 64 контент + hairline 1px внутри границы: линия занимает строку 64…65 */
    padding: 0 20px;
  }

  /* Basket/mb 1091:2612 — 283,18 28×28: только иконка, без подписи и padding */
  .au-header__right {
    order: 2;
    gap: 0;
  }

  .au-header__basket {
    margin-top: 18px;
    padding: 0;
  }

  .au-header__basket-label {
    display: none;
  }

  .au-header__logo {
    order: 1;
    margin-top: 18px;
    justify-self: start;
  }

  .au-header__logo img {
    width: 111px;
    height: 28.6172px;
  }

  .au-burger {
    order: 3; /* логотип 1, корзина 2, бургер 3 */
    margin-top: 23px;
    gap: 8.4259px; /* шаг 9.0742 − 0.6481 */
    width: 35px;
    opacity: 0.5;
  }

  .au-burger__line {
    width: 35px;
    height: 0.6481px;
    background: var(--au-black);
  }

  /* Menu burger/mb 975:2674: у компонента нет варианта Click, клик = ховер */
  .au-burger:hover,
  .au-burger:active,
  .au-burger:focus-visible {
    opacity: 1;
  }

  /* Menu/default/mb 975:2654 — одна колонка, категории под товарами */
  .au-menu__close {
    top: 40px;
    left: 326px;
    width: 28px;
    height: 28px;
  }

  .au-menu__close::before,
  .au-menu__close::after {
    width: 39.598px; /* 28 × √2 */
    margin-left: -19.799px;
  }

  .au-menu__col--products {
    top: 54px;
    left: 48px;
    gap: 72px; /* шаг 116 − бокс 44 */
  }

  .au-menu__col--cats {
    top: 402px;
    left: 48px;
    gap: 52px; /* шаг 88 − бокс 36 */
  }

  .au-menu__link--product {
    font-size: 36px;
    line-height: 44px; /* в макете lh normal при боксе 44 */
  }

  .au-menu__link--cat {
    font-size: 20px;
  }

  .au-menu__link--product::after {
    left: 0;
    width: 114px;
  }

  .au-header__social,
  .au-header__nav {
    display: none;
  }

  /* Phooter/mb 975:2580 — 390×853, всё центрировано */
  .au-footer__inner {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: none;
    padding-top: 64px; /* логотип y=64 */
  }

  .au-footer__contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .au-footer__phone,
  .au-footer__email {
    font-size: 24px;
    line-height: 29px;
    letter-spacing: 3.6px;
    margin-right: -3.6px; /* компенсация трейлинг-спейса letter-spacing */
  }

  .au-footer__phone {
    margin-top: 40.977px; /* 147 − (64 + 42.023) */
  }

  .au-footer__email {
    margin-top: 26px; /* 202 − 176 */
  }

  /* иконки 74 / 129 / 184 (gap 29) + Gasfort 242, ряд центрирован по 390 */
  .au-footer__social {
    justify-content: center;
    margin-top: 41px; /* 272 − 231 */
  }

  .au-footer__social-link--mb {
    display: block;
  }

  .au-footer__studio {
    position: static;
    margin-left: 3px; /* 242 − 210 = 32 = gap 29 + 3 */
    margin-top: 2px; /* 274 − 272 */
  }

  /* 5 рядов по 61px (47 + 14), разделитель y=362, первый ряд y=426 */
  .au-footer__nav {
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    width: 100%;
    margin-top: 59px; /* 362 − 303 */
    padding-top: 63px; /* 426 − 363 */
    border-top: 1px solid var(--au-hairline-light);
  }

  /* ряды PC растворяем: перенос по ширине 390 даёт разбивку макета mb */
  .au-footer__nav-row {
    display: contents;
  }

  /* в mb «Политика» стоит выше «Публичной оферты» */
  .au-footer__nav-row--tight .au-pill:first-child {
    order: 1;
  }

  .au-footer__legal {
    flex-wrap: wrap;
    gap: 0 10px; /* колонки: 152 − 142, 256 − 246; ряды разводит margin copyright */
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: 64px 19px 16px; /* copyright y=781, реквизиты y=814, низ 853 */
    border-top: 0;
    font-size: 12px;
  }

  .au-footer__legal-item {
    font-size: 12px;
    opacity: 0.5;
  }

  .au-footer__legal-item--company {
    display: none; /* в мобильном макете строки «Компания» нет */
  }

  .au-footer__copyright {
    order: -1;
    width: 100%;
    margin: 0 0 10px; /* copyright 781…804, реквизиты 814 */
    text-align: right;
  }
}