/* ==========================================================================
   Сообщение о куках — Figma 39:4867 (320–575), 39:4513 (576–767), 39:4562
   (768–1023), 39:4635 (1024–1279), 39:4696 (1280–1920), 39:4769 (1920–max),
   секция «Cookie Policy Push».

   Во всех шести кадрах оно прибито к низу окна и лежит поверх страницы:
   кадры высотой ровно 1024, и полоса стоит в них на 929 / 950 / 985 / 982 —
   то есть её низ всегда совпадает с низом экрана. Подложка непрозрачная, из
   того же токена, что и фон страницы, — содержимое под ней не просвечивает.

   Раскладок две, ломается на 768:
     до 768 — в колонку, подписи под текстом (высота 95 при 425, 74 при 576);
     с 768  — в строку, подписи прижаты к правому краю (высота 39 при 768,
              42 на 1024+).

   Высоты из макета:
     425  · 8 + 42 + 8 + 21 + 16 = 95   (текст в две строки)
     576  · 8 + 21 + 8 + 21 + 16 = 74
     768  · 8 + 21 + 10 = 39
     1024+· 8 + 24 + 10 = 42            (шкала шрифта переключается сама)

   Контейнер и боковые поля — общие с шапкой и футером (.container), поэтому
   на 1920+ полоса так же встаёт по центру 1872. В макете кадр 2560 её не
   растянули — она осталась шириной 1920 и прижата влево; здесь она идёт во
   всю ширину, как шапка и футер, иначе на широком экране подписи висели бы
   не под теми же 1872, что весь остальной сайт.
   ========================================================================== */

/* z-index ниже шапки (10): на узких ширинах меню — оверлей во весь экран, и
   накрывать его полосой нельзя. Строку фильтров каталога (5) при этом
   перекрывает — она залипает сверху, полоса стоит снизу, пересечься им негде,
   но порядок всё равно определён. */
.cookie {
  position: fixed;
  z-index: 9;
  inset-inline: 0;
  inset-block-end: 0;
  background-color: var(--color-bg-base);
}

.cookie[hidden] {
  display: none;
}

/* Поле под полосой: пока она показана, страница снизу длиннее ровно на её
   высоту, и футер доезжает выше неё. Величину ставит js/cookies.js по факту
   (высота зависит от числа строк и от безопасной зоны); полосы нет — нет и
   переменной, остаётся 0, и ничего не меняется. */
.page {
  padding-block-end: var(--cookie-space, 0px);
}

.cookie__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  /* Полоса прибита к нижнему краю окна, а там на телефоне без кнопки живёт
     полоса «домой»: нижнее поле 16 из макета отсчитывается от неё, а не от
     края экрана. На всём остальном env() равен нулю и остаются те же 16. */
  padding-block: var(--spacing-md) calc(var(--spacing-lg) + var(--safe-block-end));
}

/* Text md приглушённым цветом — как подписи в футере, только не в верхнем
   регистре */
.cookie__text {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-text-relaxed);
  letter-spacing: var(--letter-spacing-text);
}

/* align-self — чтобы бокс подписей был по содержимому (в макете 196 и 226),
   а не во всю колонку: сам текст над ними идёт на всю ширину, поэтому
   выравнивание колонки менять нельзя. В строчной раскладке ниже возвращаем
   auto — там нужна центровка по вертикали от контейнера. */
.cookie__actions {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--spacing-lg);
}

/* Подписи набраны и подчёркнуты ровно как Ru и Menu в шапке: Uppercase sm,
   поле снизу 4 и линия тенью (border добавил бы пиксель к высоте бокса —
   21 вместо макетных 21 = 17 + 4). */
.cookie__button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block-end: var(--spacing-sm);
  box-shadow: inset 0 -1px 0 var(--color-border-primary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-uppercase);
  text-transform: uppercase;
  white-space: nowrap;
}

/* 768+ · текст и подписи в одной строке, поле снизу 10 вместо 16. Десятка —
   буквально из макета: у строчной раскладки поля 8 / 10, у колоночной 8 / 16. */
@media (min-width: 768px) {
  .cookie__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--spacing-md) 10px;
  }

  .cookie__actions {
    align-self: auto;
  }
}