/* ============================================================
   SOUPRRR — общие стили (токены, база, логотип, полоса копирайта)

   Брейкпоинты соответствуют макетам Figma:
     <768   → 375  (76:702 / 76:1217)
     ≥768   → 768  (60:336 / 76:1122)
     ≥1024  → 1440 (60:107 / 76:1024)
     ≥1441  → 1920 (58:3   / 76:846)
   ============================================================ */

/* --- Токены из макета ------------------------------------- */
:root {
  --color-black:  #000000;   /* Черный    */
  --color-teal:   #25C0B9;   /* Бирюзовый */
  --color-blue:   #2F65D4;   /* Синий     */
  --color-red:    #E33716;   /* Красный   */
  --color-yellow: #D99E1C;   /* Желтый    */
  --color-bg:     #F7F2EB;   /* Фон       */
  --color-plate:  #F6ECE7;   /* Подложка этикетки на упаковке */
  --color-invert: #FEFDFE;   /* Текст на чёрном подвале       */

  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Header reg — 16px на 375/768/1440, 18px на 1920 */
  --fs-header: 16px;
  /* Отступ от края страницы: 15 → 20 → 20 → 40 */
  --gutter: 15px;
  /* Логотип: 375 → 768 → 1024+ */
  --logo-w: 164.363px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-black);
  font-family: var(--font);
  font-size: var(--fs-header);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* <picture> — только обёртка над webp/png, собственный бокс не нужен */
picture { display: contents; }

:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 3px; }

/* --- Страница --------------------------------------------- */
.page {
  position: relative;
  width: 100%;
  background: var(--color-bg);      /* подложка для режима «Затемнение» */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: clip;
}

/* --- Логотип ---------------------------------------------- */
/* Пропорция едина на всех макетах: 246 / 70.5808 */
.brand {
  display: block;
  flex: none;
  width: var(--logo-w);
  aspect-ratio: 246 / 70.5808;
  margin-top: 20px;
}

.brand img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Полоса контактов внизу (29:799) -----------------------
   Чёрная полоса, прижатая к низу страницы. На 1920 — одна строка:
   контакты слева, копирайт и ссылка на политику справа.        */
.bar {
  flex: none;
  width: 100%;
  margin-top: auto;               /* прижата к низу; минимальный отступ
                                     задаёт margin-bottom предыдущего блока */
  padding: 16px 15px;
  border-radius: 16px 16px 0 0;
  background: var(--color-black);
  color: var(--color-invert);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: var(--fs-header);   /* 18px на 1920, 16px ниже */
  line-height: 1.2;
  text-align: center;
}

.bar a { text-decoration: none; }

/* Контакты: две почты в строку, телефон под ними (макет 58:95) */
.bar__contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                      /* на 375 все строки подвала через 12px */
}

.bar__mails {
  display: flex;
  flex-wrap: wrap;                /* на узких экранах почты переносятся */
  justify-content: center;
  gap: 12px;
}

/* Почта и телефон не должны разрываться посередине */
.bar__contacts a { white-space: nowrap; }

.bar__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.bar__copy { white-space: nowrap; }

.bar__policy {
  text-decoration: underline;
  text-underline-position: from-font;
  white-space: nowrap;
  transition: opacity .2s ease;
}

.bar__policy:hover,
.bar__policy:focus-visible { opacity: .7; }

/* ============================================================
   ≥768 — макет 768
   ============================================================ */
@media (min-width: 768px) {
  :root {
    --gutter: 20px;
    --logo-w: 205.637px;
  }

  .bar {
    padding: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
  }

  .bar__contacts {
    align-items: flex-start;
    gap: 8px;
  }

  .bar__mails { justify-content: flex-start; }

  .bar__legal {
    align-items: flex-end;
    gap: 8px;
    text-align: right;
  }
}

/* ============================================================
   ≥1024 — макет 1440/1920: полоса уезжает в шапку
   ============================================================ */
@media (min-width: 1024px) {
  :root { --logo-w: 246px; }

  /* Центрируем полями, а не transform — дробное смещение трансформа
     заставляет браузер пересэмплировать содержимое. */
  .brand {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
  }

  .bar {
    position: absolute;
    top: 20px;
    left: var(--gutter);
    right: var(--gutter);
    bottom: auto;
    width: auto;
    /* Высота строки задана логотипом (246 × 70.5808) */
    height: 70.5808px;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--color-black);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
    z-index: 2;
  }

  /* Колонки по 345px из макета: при space-between логотип встаёт
     ровно по центру строки. */
  .bar__contacts,
  .bar__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 345px;
  }

  .bar__mails { gap: 12px; }

  .bar__legal { text-align: right; align-items: flex-end; }

  .bar a { transition: color .2s ease; }

  .bar a:hover,
  .bar a:focus-visible {
    color: var(--color-teal);
    opacity: 1;
    text-decoration: underline;
    text-underline-position: from-font;
  }
}

/* ============================================================
   ≥1441 — макет 1920
   ============================================================ */
@media (min-width: 1441px) {
  :root {
    --fs-header: 18px;
    --gutter: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}