/* =====================================================
   Оджахи — грузинская лавка. Стили главной страницы.
   ===================================================== */

/* ---------- Шрифты ---------- */
@font-face {
  font-family: "Circe";
  src: url("../fonts/Circe-Light.woff2") format("woff2"),
       url("../fonts/Circe-Light.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circe";
  src: url("../fonts/Circe-Bold.woff2") format("woff2"),
       url("../fonts/Circe-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circe";
  src: url("../fonts/Circe-ExtraBold.woff2") format("woff2"),
       url("../fonts/Circe-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Дизайн-токены ---------- */
:root {
  --color-black: #000006;
  --color-white: #ffffff;
  --color-green: #9ab06f;
  --color-blue: #c0e2ec;
  --color-burgundy: #570d0e;
  --color-orange: #fa8d7d;
  --color-cream: #f7ebde;

  --radius-full: 100rem;
  --radius-card: 1.6rem;

  --container-max: 120rem;
  --container-pad: 2rem;

  --font-nav: "Circe", sans-serif;
  --font-body: "Circe", sans-serif;
  --font-heading: "Circe", sans-serif;

  --shadow-card: 0.3rem 0.3rem 1rem 0 rgba(0, 0, 0, 0.25);
}

/* ---------- Сброс ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Десктоп: 1rem = 10px при ширине 1440px (эталонный фрейм Figma).
   Плавно масштабируется от 1280px, дальше — зафиксировано на границах. */
@media (min-width: 768px) {
  html {
    font-size: clamp(8.889px, 0.694444vw, 10px);
  }
}

/* Мобильный: 1rem = 10px при ширине 360px (эталонный мобильный фрейм). */
@media (max-width: 767px) {
  html {
    font-size: clamp(8.889px, 2.77778vw, 13.333px);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* ---------- Контейнер ---------- */
/* На ширине 1440px (макет Figma) даёт ровно 120px отступа от края */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---------- Общие элементы ---------- */
.section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 5.8rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-green);
}

.section-title--white {
  color: var(--color-white);
}

.section-divider {
  display: block;
  width: 100%;
  max-width: 119.7rem;
  height: auto;
  margin: 0 auto;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-bottom: 6rem;
  text-align: center;
}

.section-head--left {
  align-items: flex-start;
  text-align: left;
}

/* Кнопка-пилюля (переиспользуемый компонент из Figma) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.8rem 2.8rem 1.6rem 2.8rem;
  border-radius: var(--radius-full);
  background: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1.8rem;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  opacity: 0.88;
}

.btn:active {
  transform: scale(0.97);
}

.btn--orange {
  background: var(--color-orange);
}

/* Кнопка-пилюля с обводкой (без заливки) — вариант из карточек лавок */
.btn--outline {
  background: transparent;
  border: 2px solid var(--color-green);
  color: var(--color-green);
}

/* Короткий текст кнопки "Доставка" — показывается только на ≤780px (см. медиа-запрос) */
.btn__text-short {
  display: none;
}

/* =====================================================
   Шапка + hero-баннер
   ===================================================== */
.hero {
  position: relative;
  margin-top: -10rem;
  min-height: 80rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding-bottom: 8rem;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* ---------- Хедер / навигация (липкий, вынесен из hero) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  padding: 1rem 0;
  padding-bottom: 0;
  /* Прозрачный поверх hero, белеет при скролле — класс is-scrolled добавляет js/main.js */
  background: transparent;
  filter: none;
  transition: 0.25s ease, filter 0.25s ease;
}

.site-header::after {
  content: '';
  opacity: 0;
  position: absolute;
  width: 100vw;
  height: 3rem;
  bottom: -3rem;
  left: 0;
  transition: 0.25s ease, opacity 0.25s ease;
  background: url("data:image/svg+xml,%3Csvg width='1440' height='30' viewBox='0 0 1440 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 19.2524C4.0799 19.1259 8.16595 19.0449 12.2292 18.9636C20.2805 18.8027 28.2444 18.6409 36.0437 18.1341C43.7491 17.6337 50.3787 16.3072 57.4344 15.1917C64.4275 14.0861 71.6751 13.2243 80.1432 13.8358C97.7837 15.1109 118.175 14.8406 136.796 14.3301C169.885 13.4242 200.236 15.873 232.303 17.7505C250.938 18.8416 269.593 19.9007 288.267 20.9278C305.754 21.8893 325.115 23.9013 342.269 22.894C363.558 21.6447 382.556 18.7296 403.323 16.6254C415.266 15.4153 425.836 14.6001 438.6 14.6906C475.475 14.9507 508.74 15.4059 542.958 20.1229C554.168 21.6689 565.678 23.7545 577.408 24.3291C590.461 24.9683 603.119 25.1263 616.343 25.1592C629.812 25.1929 642.71 24.4335 655.4 22.9684L656.477 22.8408C661.833 22.1902 666.821 21.3456 671.78 20.4499C677.044 19.4989 682.33 18.4796 687.889 17.6023C700.009 15.6902 712.938 15.2952 725.893 15.4654C738.791 15.6349 751.985 16.3738 764.339 16.7544C781.577 17.2859 798.693 18.0992 815.782 18.8885C832.881 19.6783 849.958 20.4442 867.162 20.8841C884.857 21.3359 902.381 21.3521 919.967 21.4112C937.538 21.4701 955.162 21.5719 972.981 22.1997C986.083 22.6615 997.877 22.3888 1010.22 20.9811C1042.11 17.3468 1058.6 14.5903 1092.57 17.7204C1113.09 19.6114 1134.33 18.9532 1155.79 19.4886C1179.26 20.0745 1196.45 22.4653 1216.83 25.7464C1230.01 27.8674 1242.61 29.9643 1257.77 29.9997C1267.99 30.0226 1277.13 28.8995 1287.27 28.1297L1289.84 27.9317C1316.35 25.8408 1343.62 22.5188 1371.54 22.3089C1389.7 22.1721 1418.78 22.2941 1440 22.3396V0H0V19.2524Z' fill='%23F7EBDE'/%3E%3C/svg%3E%0A") no-repeat bottom center;
  background-size: cover;
}

.site-header.is-scrolled::after {
  opacity: 1;
}

.site-header.is-scrolled {
  background: var(--color-cream);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.main-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.main-nav__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
}

.main-nav__burger img {
  width: 1.6rem;
  height: 1rem;
}

.main-nav__link {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1.8rem;
  text-transform: uppercase;
  color: var(--color-black);
  white-space: nowrap;
  margin-top: 0.2rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.header-actions .btn {
  height: 4.5rem;
}

.header-actions__delivery-logo {
  height: 4.5rem;
  width: auto;
}

.header-actions__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  padding: 0 1.6rem;
  border-radius: 2.3rem;
  background: var(--color-blue);
}

.header-actions__badge img {
  height: 2rem;
  width: auto;
}

/* ---------- Логотип и заголовок hero ---------- */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6rem;
  width: 100%;
}

.hero__logo {
  width: 45rem;
  max-width: 80vw;
  height: auto;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 6.4rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-white);
}

.hero__subtitle {
  max-width: 99.6rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.6;
  text-align: center;
  color: var(--color-white);
  padding: 0 2rem;
}

/* =====================================================
   Секция "Оджахи — больше, чем лавка"
   ===================================================== */
.about {
  padding: 12rem 0;
  background: linear-gradient(to bottom, var(--color-cream), var(--color-white));
}

.about__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-bottom: 6rem;
}

.about__body {
  display: flex;
  gap: 4.5rem;
  align-items: stretch;
}

.about__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4.2rem;
  flex: 1 1 55%;
}

.about__text p {
  font-size: 2.4rem;
  line-height: 1.6;
  color: var(--color-black);
}

.about__welcome {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 1;
}

.about__image {
  flex: 0 0 50rem;
  width: 50rem;
  height: 50rem;
  border-radius: 0 0 1.6rem 1.6rem;
  overflow: hidden;
}

.about__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =====================================================
   "Что попробовать"
   ===================================================== */
.menu-preview {
  padding: 0 0 12rem;
}
.menu-preview .section-head {
  margin: 0;
}

.menu-preview__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
}

.dish-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
}

.dish-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.6rem;
  height: 48.3rem;
  padding: 3rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: var(--color-white);
}

.dish-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.dish-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
/*  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(4, 4, 4, 1));*/
}

.dish-card__title {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.2;
}

.dish-card__desc {
  font-size: 2rem;
  line-height: 1.2;
}

.dish-card__price {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1.2;
  color: var(--color-green);
}

/* =====================================================
   Блок с адресами лавок
   ===================================================== */
.shops {
  padding: 0 0 12rem;
}

.shops .section-head {
  margin-bottom: 3rem;
}

.shops__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

/* Ряды карточек лавок: ряд 1 — 3 карточки, ряд 2 — 4 карточки */
.shops__rows {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.shops__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.1rem;
  width: 100%;
}

.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 100%;
  height: 33rem;
  padding: 3rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.shop-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.shop-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Тёмная плашка снизу карточки + общее затемнение фото — как в макете */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.87) 100%);
}

.shop-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem;
}

.shop-card__logo img {
  max-height: 12rem;
  width: auto;
  object-fit: contain;
}

.shop-card__address {
  font-size: 1.6rem;
  color: var(--color-white);
  text-align: center;
  line-height: 1;
}

.shop-card__phone {
  font-size: 2rem;
  color: var(--color-white);
  white-space: nowrap;
  line-height: 1;
  font-weight: 600;
}

.shop-card__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 32.6rem;
}

.shop-card__actions .btn {
  padding: 0.9rem 2.8rem 0.7rem 2.8rem;
}

.shop-card__logo--text {
  font-family: "Circe", sans-serif;
  font-weight: 700;
  font-size: 4.8rem;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

/* Блок "Карта" под адресами лавок — заглушка под будущую интерактивную карту */
.shops-map {
  width: 100%;
  height: 40rem;
  margin-top: 3rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-cream);
}

.shops-map__canvas {
  width: 100%;
  height: 100%;
}

/* Содержимое балуна метки лавки на карте */
.ymap-balloon {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.4rem 0.4rem 1rem;
  min-width: 22rem;
}

.ymap-balloon__name {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1.8rem;
  text-transform: uppercase;
  color: var(--color-black);
}

.ymap-balloon__address,
.ymap-balloon__phone {
  font-size: 1.5rem;
  color: var(--color-black);
}

.ymap-balloon__actions {
  display: flex;
  gap: 1.2rem;
  margin-top: 0.8rem;
}

.ymap-balloon__actions .btn {
  padding: 1rem 1.6rem;
  font-size: 1.4rem;
}

/* =====================================================
   Карта лояльности
   ===================================================== */
.loyalty {
  padding: 12rem 0;
  background: var(--color-green);
  color: var(--color-white);
  position: relative;
}

.loyalty::before {
  content: '';
  display: block;
  position: absolute;
  width: 100vw;
  height: 2rem;
  background: url("../img/wave-green.svg") no-repeat top;
  background-size: cover;
  top: -2rem;
}
.loyalty::after {
  content: '';
  display: block;
  position: absolute;
  width: 100vw;
  height: 2rem;
  background: url("../img/wave-green.svg") no-repeat top;
  background-size: cover;
  bottom: -2rem;
  transform: rotate(180deg);
}

.loyalty .section-head {
  margin-bottom: 2rem;
}

.loyalty__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}

.loyalty__lead {
  max-width: 120rem;
  text-align: center;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 2.4rem;
  text-transform: uppercase;
  line-height: 1.4;
}

.loyalty__status .btn {
  max-width: 28rem;
}

.tiers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.tier-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 27.9rem;
  padding: 2rem 4rem;
  border-radius: 1.6rem;
  /* Все 3 уровня теперь на одинаковой бежевой плашке (было: крем/голубой/оранжевый) */
  background: #ffe0af;
  color: var(--color-black);
}

.tier-card__icons {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1rem;
}

/* Один и тот же значок-огонёк повторяется 1/2/3 раза по уровням близости */
.tier-flame {
  display: block;
  width: 3.8rem;
  height: 4.2rem;
  background-repeat: no-repeat;
  background-image:
    url("../img/tier-flame-dot.svg"),
    url("../img/tier-flame-outline.svg"),
    url("../img/tier-flame-fill.svg");
  background-position: 1.5rem 1.8rem, 0 0, 0.1rem 0.1rem;
  background-size: 0.7rem 0.8rem, 3.8rem 4.2rem, 3.7rem 4.1rem;
}

.tier-card__name {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 2.4rem;
  text-transform: uppercase;
  color: var(--color-black);
}

.tier-card__sub {
  font-size: 1.6rem;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--color-black);
}

.tier-arrow {
  width: 13rem;
  flex-shrink: 0;
}

.loyalty__title-row {
  width: 100%;
  max-width: 120rem;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 3.6rem;
  text-transform: uppercase;
}

.loyalty__columns {
  display: flex;
  gap: 6rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 120rem;
}

.loyalty__perks {
  flex: 1 1 50rem;
  font-size: 2.4rem;
  line-height: 1.6;
}

.loyalty__perks li {
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 0.4rem;
}

.loyalty__perks li::before {
  content: "•";
  position: absolute;
  left: 0.6rem;
}

.loyalty__status {
  flex: 1 1 35rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.loyalty__status-title {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1.8rem;
  text-transform: uppercase;
}

.loyalty__status-text {
  font-size: 2rem;
}

/* =====================================================
   Акции и новинки
   ===================================================== */
.promo {
  padding: 12rem 0;
}

.promo__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Слайдер: нативный horizontal-scroll + scroll-snap (без сторонних библиотек) */
.promo-slider {
  position: relative;
  width: 100%;
}

.promo-slider__track {
  display: flex;
  gap: 2rem;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.promo-slider__track::-webkit-scrollbar {
  display: none;
}

.promo-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.2);
  font-size: 2.8rem;
  line-height: 1;
  color: var(--color-green);
}

.promo-slider__arrow:hover {
  background: var(--color-cream);
}

.promo-slider__arrow--prev {
  left: -2.4rem;
}

.promo-slider__arrow--next {
  right: -2.4rem;
}

/* Карточки — фото без текста, как в макете; теперь кликабельны (открывают попап) */
.promo-card {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 calc((100% - 4rem) / 3);
  scroll-snap-align: start;
  height: 48.3rem;
  padding: 2rem;
  border-radius: var(--radius-card);
  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.promo-card:hover {
  transform: scale(1.02);
}

.promo-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  border-radius: var(--radius-card);
}

.promo-card__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
}

.promo-card__badge--right {
  margin-left: auto;
}

.promo-card__badge img:first-child {
  width: 100%;
  height: 100%;
}

.promo-card__badge-icon {
  position: absolute;
  width: 2rem;
  height: 2rem;
}

/* =====================================================
   Почему выбирают Оджахи
   ===================================================== */
.why-us {
  padding: 12rem 0;
  background: var(--color-cream);
  position: relative;
}

.why-us::before {
  content: '';
  display: block;
  position: absolute;
  width: 100vw;
  height: 2rem;
  background: url("../img/wave-cream.svg") no-repeat top;
  background-size: cover;
  top: -2rem;
}
.why-us::after {
  content: '';
  display: block;
  position: absolute;
  width: 100vw;
  height: 2rem;
  background: url("../img/wave-cream.svg") no-repeat top;
  background-size: cover;
  bottom: -2rem;
  transform: rotate(180deg);
}

.why-us__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  width: 100%;
}

.why-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 3rem;
  background: var(--color-white);
  border-radius: var(--radius-card);
}

.why-card__icon {
  width: 10rem;
  height: 10rem;
  object-fit: contain;
}

.why-card__title {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 2.4rem;
  text-transform: uppercase;
  color: var(--color-black);
}

.why-card__desc {
  font-size: 2rem;
  line-height: 1.4;
  color: var(--color-black);
}

/* =====================================================
   Блок вакансий
   ===================================================== */
.careers {
  padding: 12rem 0;
  background: var(--color-white);
  color: var(--color-black);
}

.careers__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6rem;
  flex-wrap: wrap;
}

.careers__text {
  flex: 1 1 48rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}

.careers__desc {
  font-size: 2.2rem;
  line-height: 1.5;
}

.careers__image {
  max-width: 48rem;
  aspect-ratio: 4 / 3;
  border-radius: 1.6rem;
  overflow: hidden;
}

.careers__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================
   Футер
   ===================================================== */
.site-footer {
  padding: 6rem 0 4rem;
  background: var(--color-green);
  color: var(--color-black);
  position: relative;
}

.site-footer::before {
    content: '';
    display: block;
    position: absolute;
    width: 100vw;
    height: 2rem;
    background: url(../img/wave-green.svg) no-repeat top;
    background-size: cover;
    top: -2rem;
}

.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
  flex-wrap: wrap;
  padding-bottom: 4rem;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}


.site-footer__slogan {
  font-size: 1.6rem;
  color: var(--color-black);
}

.site-footer__menu {
  display: flex;
  gap: 6rem;
  flex-wrap: wrap;
}

.site-footer__menu-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.site-footer__menu-link {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--color-black);
}

.site-footer__social {
  display: flex;
  gap: 1.2rem;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
}

.site-footer__social-link img {
  display: block;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6rem;
  font-size: 1.4rem;
  color: var(--color-black);
  flex-wrap: wrap;
  gap: 1.2rem;
  background: url("../img/footer-wave.svg") no-repeat top center;
}

/* =====================================================
   Волнистые разделители между секциями
   ===================================================== */
.wave-divider {
  display: block;
  width: 100%;
  height: 4rem;
  margin-top: -0.1rem;
}

/* =====================================================
   Бургер-меню (мобильное)
   ===================================================== */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  padding: 2rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.5);
}

/* margin: auto (а не align-items/justify-content) — чтобы контент центрировался,
   но оставался доступен через скролл, если не помещается по высоте */
.popup-overlay > * {
  margin: auto;
}

.popup-overlay[hidden] {
  display: none;
}

.popup {
  position: relative;
  background: var(--color-white);
  border-radius: 2.4rem;
  box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25);
}

.popup__close {
  position: absolute;
  top: 1.6rem;
  right: 2rem;
  font-size: 4rem;
  line-height: 1;
  color: var(--color-black);
}

/* Попап бургер-меню: дропдаун рядом с бургером (не модалка), простые текстовые ссылки в столбик */
.popup--nav {
  position: absolute;
  top: calc(100% + 1.2rem);
  left: 0;
  z-index: 100;
  padding: 2.8rem 3.6rem;
  white-space: nowrap;
}

.popup--nav[hidden] {
  display: none;
}

.popup-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.popup-nav__link {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1.8rem;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-black);
}

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

/* "Адреса лавок" и бейджи служб доставки — видны в попапе только на ≤780px,
   где убраны из хедера (см. медиа-запрос в конце файла) */
.popup-nav__mobile-extra {
  display: none;
}

.popup-nav__badges {
  display: flex;
  gap: 1.2rem;
}

/* Попап выбора меню лавки */
.popup-shops-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
  max-width: min(44rem, calc(100vw - 4rem));
}

.popup-shops__label {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.7);
}

.popup--shops {
  padding: 6rem 3.2rem 4rem 3.2rem;
}

.popup-shops__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.shop-pill {
  display: block;
  width: 100%;
  padding: 1.8rem 1.8rem 1.6rem 1.8rem;
  border-radius: var(--radius-full);
  background: var(--color-blue);
  color: var(--color-black);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.shop-pill:hover {
  opacity: 0.8;
}

/* Попап с подробным описанием акции/новинки */
.popup--promo {
  padding: 4rem;
  width: 100%;
  max-width: min(52rem, calc(100vw - 4rem));
}

.popup-promo__image {
  width: 100%;
  height: 24rem;
  object-fit: cover;
  border-radius: var(--radius-card);
  margin-bottom: 2.4rem;
}

.popup-promo__title {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 2.4rem;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 1.2rem;
}

.popup-promo__desc {
  font-size: 1.8rem;
  line-height: 1.5;
  color: var(--color-black);
}

/* =====================================================
   Адаптивность
   ===================================================== */
@media (max-width: 1100px) {
  .dish-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .promo-card {
    flex-basis: calc((100% - 2rem) / 2);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about__body {
    flex-direction: column;
  }

  .about__image {
    width: 100%;
    flex-basis: auto;
    align-self: center;
  }

  .hero__title {
    font-size: 4.8rem;
  }

  .section-title {
    font-size: 4.4rem;
  }
}

@media (max-width: 780px) {
  .site-header {
    min-height: 5rem;
  }

  .site-header::after {
    bottom: -2.5rem;
    z-index: -1;
  }

  /* "Адреса лавок" и бейджи Деливери/Яндекс Еда переезжают в попап-меню (см. .popup-nav__mobile-extra) */
  .header-actions__badge {
    display: none;
  }

  /* Полный текст не помещается рядом с "МЕНЮ" на узких экранах — сокращаем текст,
     размер кнопки не трогаем (см. .btn__text-full/.btn__text-short) */
  .btn__text-full {
    display: none;
  }

  .btn__text-short {
    display: inline;
  }

  .main-nav__link:nth-child(3) {
    display: none;
  }

  .popup-nav__mobile-extra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  /* Копии бейджей внутри попапа не должны прятаться под общим правилом выше */
  .popup-nav__badges .header-actions__badge {
    display: flex;
  }

  .dish-cards,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .promo-card {
    flex-basis: 85%;
  }

  .promo-slider__arrow {
    display: none;
  }

  .shop-card {
    width: 100%;
  }

  .tiers {
    flex-direction: column;
  }

  .tier-arrow {
    transform: rotate(90deg);
  }

  .loyalty__columns {
    flex-direction: column;
  }

  .careers__inner {
    flex-direction: column;
  }

  .site-footer__top {
    flex-direction: column;
  }

  .hero {
    min-height: 60rem;
    margin-top: -6rem;
    padding-bottom: 5rem;
  }

  .hero__content {
    gap: 4rem;
  }

  .hero__title {
    font-size: 3.2rem;
    line-height: 1.4;
  }

  .hero__subtitle {
    font-size: 1.6rem;
  }

  .section-title {
    font-size: 3.2rem;
    line-height: 1.2;
  }

  .about {
    padding-top: 5rem;
    padding-bottom: 0;
  }

  .about__head {
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .about__text {
    gap: 2rem;
  }

  .about__text p {
    font-size: 1.8rem;
  }

  .about__image {
    height: 30rem;
  }

  .about__image img {
    object-fit: cover;
  }

  .menu-preview,
  .promo,
  .why-us,
  .careers,
  .loyalty {
    padding: 5rem 0;
  }

  .menu-preview__inner {
    gap: 3rem;
  }

  .shops {
    padding-bottom: 8rem;
  }

  .shops .section-head,
  .loyalty .section-head {
    margin-bottom: 0;
  }

  .loyalty__lead {
    font-size: 1.8rem;
  }

  .tiers {
    gap: 4rem;
  }

  .tier-arrow {
    width: 8rem;
  }

  .loyalty__title-row {
    font-size: 2.2rem;
  }

  .loyalty__perks {
    font-size: 1.8rem;
    flex: auto;
  }

  .loyalty__status {
    flex: auto;
  }

  .loyalty__status-text {
    font-size: 1.8rem;
  }

  .section-head {
    margin-bottom: 3rem;
  }

  .why-grid {
    gap: 1.6rem;
  }

  .why-card__title {
    font-size: 2rem;
  }

  .why-card__desc {
    font-size: 1.6rem;
  }

  /* Переопределяет общее .padding: 5rem 0 из правила выше — у вакансий свой отступ */
  .careers {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .careers__text {
    flex: auto;
  }

  .careers__desc {
    font-size: 1.8rem;
  }

  .site-footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .site-footer__top {
    gap: 3rem;
    padding-bottom: 3rem;
  }

  .site-footer__menu {
    gap: 3rem;
  }

  .site-footer__bottom {
    padding-top: 4rem;
  }

  :root {
    --container-pad: 1.6rem;
  }
}