/* main.css */

/* Подключение шрифта */
@font-face {
  font-family: 'TTRuns-DemiBold';
  src: url('../fonts/tt-runs-demibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

/* Сброс отступов и изображений */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.frame-img {
  width: 100%;
  height: 271px;
  object-fit: cover;
  border-top-left-radius: 19.84px;
  border-top-right-radius: 19.84px;
  display: block;
}

/* Миниатюры в корзине */
.cart-item-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  margin-right: 16px;
}

/* Изображение в попапе «Подробнее» */
.popup-image {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

/* Логотип в шапке и баннеры — не резинятся */
.site-navbar__logo img,
.banner-slide {
  max-width: none;
  width: auto;
  height: auto;
}

body {
  font-family: 'Manrope', sans-serif;
  background: #f5f5f5;
}

/* Навбар */
.site-navbar {
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-navbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-navbar__logo img {
  height: 40px;
  width: auto;
}
.site-navbar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.btn-login, .btn-cart {
  font-family: 'TTRuns-DemiBold', sans-serif;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
}
.btn-login {
  background-color: #E0C685;
  color: #000000;
}
.btn-cart {
  background-color: #AEF44A;
  color: #000000;
  position: relative;
}
.site-navbar__user {
  font-family: 'TTRuns-DemiBold', sans-serif;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Категории */
.categories-bar {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 56px;
  z-index: 90;
}
.categories-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  gap: 16px;
}
.categories-bar__item {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: #626C77;
  background-color: #F0F1F2;
  padding: 8px 16px;
  border: 1px solid #F0F1F2;
  border-radius: 32px;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.categories-bar__item:hover,
.categories-bar__item.is-active {
  border-color: #AEF44A;
}
.categories-bar__item.is-active {
  color: #000;
}

/* Баннер-слайдер */
.banner-carousel {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 40px auto;
  overflow: hidden;
  border-radius: 8px;
}
.banner-carousel__slides {
  display: flex;
  transition: transform .5s ease-in-out;
  gap: 24px;
}
.banner-slide {
  min-width: 60%;
  flex-shrink: 0;
  object-fit: cover;
}
.banner-carousel__arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255,255,255,.8);
  border: none;
  padding: 8px;
  font-size: 24px;
  cursor: pointer;
  border-radius: 4px;
}
.banner-carousel__arrow:hover {
  background: rgba(255,255,255,1);
}

/* Категории секций */
.category-section {
  padding: 40px 0;
}
.category-title {
  font-family: 'TTRuns-DemiBold', sans-serif;
  font-size: 24px;
  color: rgba(43,42,41,1);
  margin-bottom: 24px;
}

/* Сетка карточек */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 24px;
}

/* Карточка продукта */
.frame { position: relative; }
.frame-img {
  width: 100%;
  height: 271px;
  object-fit: cover;
  border-top-left-radius: 19.84px;
  border-top-right-radius: 19.84px;
  display: block;
}
.frame-inner {
  width: 100%;
  background: #fff;
  border-radius: 19.86px;
  padding: 16px;
  margin-top: -20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.text-wrapper {
  font-family: 'TTRuns-DemiBold', sans-serif;
  font-size: 16px;
  text-align: center;
}
.text-weight {
  font-family: 'TTRuns-DemiBold', sans-serif;
  font-size: 14px;
  color: #B0AEA3;
}
.button-info {
  font-family: 'TTRuns-DemiBold', sans-serif;
  font-size: 14px;
  background: #f7f6f0;
  border: none;
  border-radius: 45px;
  padding: 12px 0;
  width: 218px;
  cursor: pointer;
}

/* Общая обёртка контента */
.page-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ====== СТИЛИ КОРЗИНЫ ====== */

.cart-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #F0F1F2;
}
.cart-item:last-child {
  border-bottom: none;
}

.cart-item-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  margin-right: 16px;
}

.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-item-info .name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #043D36;
}
.cart-item-info .desc {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #000000;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  background: #F0F1F2;
  border-radius: 8px;
  padding: 4px;
  margin: 0 61px 0 16px;
}
.cart-item-qty button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  width: 24px;
  height: 24px;
}

.cart-item-price {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #F777A2;
}

/* Промокод и кнопка оформления */
.promo-input {
  flex: 1 1 auto;        /* позволяем полю растягиваться и сжиматься */
  min-width: 0;          /* чтобы flex-элемент мог ужиматься меньше своего содержимого */
  width: auto;           /* убираем жёсткую ширину */
  margin-right: 24px;     /* небольшой отступ до кнопки */
}

.checkout-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 24px;
  background-color: #AEF44A;
  color: #043D36;
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: 47px;
  height: 54px;
  padding: 0 24px;
  cursor: pointer;
  gap: 12px;
}

/* Футер */
.site-footer {
  background-color: #043D36;
  height: 254px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  margin-top: 40px;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* … остальной CSS … */

.footer-container {
  max-width: 1280px;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-link {
  font-family: 'Manrope', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

.footer-logo img {
  height: 70px;
  width: auto;
}

.footer-text {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 16px;
  color: #ffffff;
}

.footer-description {
  font-family: 'Manrope', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 14px;
  color: #ffffff;
  line-height: 1.4;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

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

.popup {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 800px;
  max-height: 90%;
  overflow-y: auto;
  position: relative;
}

.popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.popup-content {
  display: flex;
  gap: 24px;
}

.popup-left {
  flex: 1;
}

.popup-image {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.popup-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.popup-category {
  color: #008763;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.popup-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 24px;
}

.popup-weight {
  color: #555555;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
}

.popup-add-cart {
  background: #AEF44A;
  border: none;
  border-radius: 32px;
  padding: 12px 24px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

/* Когда в попапе товар уже в корзине */
.popup-add-cart.in-cart {
  background: none;             /* убираем заливку */
  border: 2px solid #AEF44A;    /* зелёная рамка, как на главной */
  color: #000;                  /* чёрный текст */
}

.popup-description {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: #2B2A29;
  margin-top: 12px;
}

.popup-nutrition {
  display: flex;
  gap: 16px;
  margin-top: 5px;
}

.nutrition-item {
  background: #f7f6f0;
  border-radius: 12px;
  padding: 8px 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  text-align: center;
}

.hidden {
  display: none;
}

.auth-popup {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.auth-popup-inner {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  width: 300px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  position: relative;
}

.auth-title {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
}

.auth-subtitle {
  font-size: 14px;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
}

.auth-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  background: #f1f1f1;
  margin-bottom: 16px;
  font-family: 'Manrope', sans-serif;
}

.auth-btn {
  width: 100%;
  padding: 12px;
  background: #AEF44A;
  color: black;
  font-weight: 600;
  font-size: 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

.auth-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 180px;
  z-index: 1000;
}

.profile-dropdown.hidden {
  display: none;
}

.profile-dropdown .dropdown-item {
  display: block;
  padding: 10px 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: #333;
  text-decoration: none;
}

.profile-dropdown .dropdown-item:hover {
  background-color: #f0f0f0;
}

.profile-dropdown form {
  margin: 0;
}
.profile-dropdown form button.profile-dropdown__link {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  text-align: left;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.profile-dropdown form button.profile-dropdown__link:hover {
  background: #f0f1f2;
}

.delivery-popup {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.delivery-popup.hidden { display: none; }
.delivery-popup__backdrop {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
}
.delivery-popup__inner {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  z-index: 10;
}
.popup-close {
  position: absolute;
  top: 8px; right: 12px;
  font-size: 24px;
  background: none; border: none; cursor: pointer;
  z-index: 20;
}

/* 1) размер поля «Промокод» */
.promo-input {
  flex: 1 1 auto;        /* позволяем полю растягиваться и сжиматься */
  min-width: 0;          /* чтобы flex-элемент мог ужиматься меньше своего содержимого */
  width: auto;           /* убираем жёсткую ширину */
  margin-right: 8px;     /* небольшой отступ до кнопки */
}

/* 2) кнопка «К оформлению заказа» */
.checkout-btn {
  display: inline-flex;
  align-items: center;
  background-color: #AEF44A;
  color: #043D36;
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: 47px;
  height: 54px;
  padding: 0 24px;
  cursor: pointer;
  /* теперь между текстом и ценой */
  gap: 12px;
}

.cart-footer {
  display: flex;         /* уже есть */
  flex-wrap: wrap;       /* на узких экранах позволит переносить элементы */
  gap: 8px;              /* автоматически ставит отступы между всеми «детьми» */
  align-items: center;   /* выравнивание по вертикали */
}

.text-wrapper {
  font-family: 'TTRuns-DemiBold', sans-serif;
  font-size: 16px;
  color: #000000;
  text-align: center;
}

.text-weight {
  font-family: 'TTRuns-DemiBold', sans-serif;
  font-size: 14px;
  color: #B0AEA3;
  text-align: center;
}

.text-wrapper-3 {
  font-family: 'TTRuns-DemiBold', sans-serif;
  font-size: 16px;
  color: #F777A2;
  text-align: center;
}

/* Кнопка "Добавить" в карточке */
.button-info {
  font-family: 'TTRuns-DemiBold', sans-serif;
  font-size: 14px;
  color: #000000;
  background: #f7f6f0;
  border: none;
  border-radius: 45px;
  padding: 12px 24px;
  cursor: pointer;
}

.button-info .increment,
.button-info .decrement {
  background: none;
  border: none;
  font-size: 20px;
  color: #043D36;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}

/* Число в счётчике */
.button-info .count {
  margin: 0 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: #000;
}

/* === СТИЛИ СЧЁТЧИКА («+»/«–») КАК У КНОПКИ “Добавить” === */
.frame .button-info {
  width: 218px !important;
  height: 45px !important;
  border-radius: 45px !important;
  background: #f7f6f0 !important;
  font-family: 'TTRuns-DemiBold', sans-serif !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;  /* ЦЕНТР текста */
  padding: 0 !important;                /* убираем лишние отступы */
  cursor: pointer;
}

/* 2) То же, когда превращается в счётчик */
.frame .button-info.is-counter {
  justify-content: space-between !important;  /* Минус краю, плюс краю */
  padding: 0 16px !important;                  /* Отступы внутри */
}

/* 3) Центрирование цифры внутри счётчика */
.frame .button-info.is-counter .count {
  flex: 1;
  text-align: center;
}

/* Счётчик внутри .button-info */
.button-info.is-counter {
  display: flex;             /* включаем флекс для выравнивания */
  align-items: center;       /* по вертикали */
  justify-content: space-between; /* «–» слева, «+» справа */
  width: 218px;              /* фиксированная ширина */
  height: 45px;              /* фиксированная высота */
  padding: 0 16px;           /* отступы по бокам */
}

/* Кнопки «+»/«–» */
.button-info.is-counter .decrement,
.button-info.is-counter .increment {
  flex: 0 0 24px;            /* фикс ширина/высота */
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}

/* Счёт в центре */
.button-info.is-counter .count {
  flex: 1;                   /* занимает всё свободное */
  text-align: center;
}

/* Переход «счётчика» на попап «Подробнее» */
.popup-add-cart.is-counter {
  background: #f7f6f0 !important;
  color: #000 !important;
  width: 218px;
  height: 45px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup-add-cart.is-counter .decrement,
.popup-add-cart.is-counter .increment {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
}

.popup-add-cart.is-counter .count {
  flex: 1;
  text-align: center;
}

/* address-popup.css */

/* Контейнер всего попапа (фиксируется на весь экран) */
.delivery-popup {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.delivery-popup.hidden {
  display: none;
}

/* Полупрозрачный фон */
.delivery-popup__backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* Блок с «окошком» попапа */
.delivery-popup__inner {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  z-index: 10;
}

/* Кнопки закрытия */
.popup-close {
  position: absolute;
  top: 8px; right: 12px;
  font-size: 20px;
  background: none; border: none; cursor: pointer;
}

/* Стили для кнопок внутри попапа выбора способа доставки */
.delivery-options {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.delivery-options .btn {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.delivery-options .btn:first-child {
  background-color: #AEF44A;
  color: #043D36;
}
.delivery-options .btn:last-child {
  background-color: #f0f1f2;
  color: #043D36;
}

/* Стиль ссылки «Уже есть аккаунт? Войти» */
#open-login-from-delivery {
  color: #008763;
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
}
#open-login-from-delivery:hover {
  text-decoration: underline;
}

/* Стили для списка подсказок адресов */
.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
  display: none;
}
.suggestions-list li {
  padding: 8px;
  cursor: pointer;
}
.suggestions-list li:hover {
  background: #eee;
}

/* Стили для поля ввода адреса */
.delivery-input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* Стили для карты */
#address-map {
  width: 100%;
  height: 200px;
  margin-bottom: 12px;
}

/* Кнопка «Подтвердить» */
#confirm-address {
  background: #AEF44A;
  color: #043D36;
  border: none;
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
#confirm-address:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.hidden {
  display: none;
}

/* 1) Задаём, чтобы фон-подложка был позади контента */
.delivery-popup__backdrop {
  z-index: 1;               /* фон позади */
}

/* 2) Устанавливаем белый фон и более высокий z-index для самой «коробки» */
.delivery-popup__content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  /* Увеличили максимальную ширину до 800px, чтобы карта помещалась сбоку */
  max-width: 800px;
  width: 90%;
  z-index: 10;
  /* Делаем контейнер flex, чтобы инпуты были слева, а карта — справа */
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
}

/* 3) Если используется класс __inner вместо __content, тоже можно продублировать */
.delivery-popup__inner {
  position: relative;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 24px;
  z-index: 2;
}

/* 4) Убедимся, что сам контейнер pop-up лежит поверх остального контента */
.delivery-popup {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.delivery-popup.hidden {
  display: none;
}

/* ========== Dropdown меню профиля ========== */
.profile-wrapper {
  position: relative; /* чтобы dropdown позиционировался относительно контейнера */
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 4px); /* чуть ниже кнопки-профиля */
  right: 0;               /* привязка к правому краю кнопки */
  width: 279px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  z-index: 1000;
}

.profile-dropdown.hidden {
  display: none;
}

.profile-dropdown__item {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  gap: 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  color: #043D36;
  cursor: pointer;
  text-decoration: none;
}

.profile-dropdown__item:hover {
  background-color: #F0F1F2;
}

.profile-dropdown__item--user {
  border-bottom: 1px solid #E5E5E5; /* разделитель после имени/иконки */
}

.profile-dropdown__icon {
  width: 24px;
  height: 24px;
}

.profile-dropdown__text {
  flex: 1;
}

.profile-dropdown__link {
  display: block;
  width: 100%;
  color: #043D36;
  text-decoration: none;
}

.profile-dropdown__link:hover {
  text-decoration: underline;
}

.profile-dropdown__logout-button {
  background: none;
  border: none;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  color: #043D36;
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding: 0;
}

.profile-dropdown__logout-button:hover {
  text-decoration: underline;
}
/* ========== Стили футера ========== */
.site-footer {
  background-color: #043D36;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 40px 20px;
  color: #FFFFFF;
  margin-top: 40px;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* 1) Лого */
.footer-logo img {
  height: 70px;
  width: auto;
}

/* 2) Текстовый блок */
.footer-text-block {
  flex: 1 1 400px; /* займёт основное пространство, но не менее 400px */
  max-width: 500px;
}

.footer-text-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}

.footer-text-description {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}

/* 3) Быстрые ссылки */
.footer-links {
  flex: 0 1 200px; /* фиксированная зона справа около 200px */
}

.footer-links-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}

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

.footer-links li {
  margin-bottom: 8px;
}

.footer-link {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #FFFFFF;
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

/* ===== 1) Попап «Как доставить?» (Choice) ===== */
.choice-content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  /* Устанавливаем узкую фиксированную ширину */
  max-width: 350px;
  width: 90%;
  box-sizing: border-box;
  display: block; /* обычная «колонка» */
  text-align: left;
}

/* Заголовок «Как доставить?» */
.choice-title {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #2B2A29;
}

/* Текст-подсказка под заголовком */
.choice-subtitle {
  margin: 12px 0 16px 0;
  font-family: Manrope, sans-serif;
  font-size: 17px;
  color: #2B2A29;
  line-height: 1.4;
}

/* Кнопки «Указать адрес доставки» и «Забрать самовывозом» */
.delivery-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.btn-big {
  width: 100%;
  padding: 12px 0;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 24px;
  cursor: pointer;
}
.btn-green {
  background-color: #AEF44A;
  color: #043D36;
}
.btn-gray {
  background-color: #F0F1F2;
  color: #A0A0A0;
}

/* Нижняя строка «Уже есть аккаунт? Войти» */
.choice-footer {
  margin-top: 16px;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  color: #2B2A29;
}
.choice-footer a {
  color: #043D36;
  text-decoration: none;
  font-weight: 600;
}

/* ===== 2) Попап «Укажите ваш адрес» (Enter-with-map) ===== */
.enter-content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  /* Делаем широкий флекс-контейнер: две колонки */
  max-width: 800px;
  width: 90%;
  box-sizing: border-box;

  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
}

/* Левая часть: поля ввода */
.address-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Заголовок «Укажите ваш адрес» */
.enter-title {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #2B2A29;
}

/* Обёртка поля автоподсказок */
.address-field-wrapper {
  position: relative;
}
.delivery-input {
  width: 100%;
  padding: 8px;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  color: #2B2A29;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Список подсказок Яндекс */
.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  list-style: none;
  margin: 0; padding: 0;
  z-index: 1000;
  display: none;
}
.suggestions-list li {
  padding: 8px;
  cursor: pointer;
}
.suggestions-list li:hover {
  background: #f0f0f0;
}

/* Обычные поля (Подъезд, Код двери, Этаж, Квартира, Комментарий) */
.simple-input,
.simple-textarea {
  width: 100%;
  padding: 8px;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  color: #2B2A29;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}
.simple-textarea {
  resize: none;
}

/* Кнопка «Заказать сюда» */
#confirm-address {
  width: 100%;
  padding: 12px 0;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 700;
  background-color: #AEF44A;
  color: #043D36;
  border: none;
  border-radius: 24px;
  cursor: pointer;
}

/* Список сохранённых адресов */
.saved-addresses {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.saved-addresses a {
  font-family: Manrope, sans-serif;
  font-size: 14px;
  color: #043D36;
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  transition: background-color 0.2s;
}

.saved-addresses a:hover {
  background: #F0F1F2;
}

/* Правая часть: контейнер для карты */
.address-right {
  flex: 1;
  min-width: 300px;    /* гарантируем, что она достаточно широка */
  display: flex;
  flex-direction: column;  /* колонки: сначала карта, затем адреса */
  gap: 16px;               /* небольшой отступ между картой и списком адресов */
}
.map-container {
  width: 100%;
  height: 300px;       /* или любое другое удобное значение */
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
}

/* Если у пользователя нет сохранённых адресов, можно скрыть контейнер */
.saved-addresses:empty {
  display: none;
}

/* === Orders Page === */
.orders {
  padding: 24px;
  max-width: 720px;
  margin: 0 auto;
  background: #FFFFFF;
}

.orders__header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.orders__title {
  font-size: 32px;
  font-weight: 700;
  color: #1F3D2F;
  margin: 0;
}

.orders__close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  margin-left: auto;
  cursor: pointer;
  color: #888888;
}

.orders__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order {
  border-top: 1px solid #E5E5E5;
  padding-top: 16px;
}

.order__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order__left {
  display: flex;
  gap: 12px;
  font-size: 16px;
}

.order__number {
  font-weight: 600;
  color: #1F3D2F;
}

.order__date {
  color: #888888;
}

.order__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
}

/* Стили для каждого статуса */
.status-badge--new {
  background: #F0F0F0;
  color: #1F3D2F;
}
.status-badge--processing {
  background: #C8FF8C;
  color: #1F3D2F;
}
.status-badge--in_delivery {
  background: #FFCDD2;
  color: #C62828;
}
.status-badge--completed {
  background: #E0E0E0;
  color: #888888;
}
.status-badge--cancelled {
  background: #F5F5F5;
  color: #888888;
}

.order__toggle {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #888888;
}

/* Детали заказа */
.order__details {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #E5E5E5;
}

.hidden {
  display: none;
}

.order__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.order__total-label {
  font-size: 18px;
  font-weight: 600;
  color: #1F3D2F;
}

.order__total-value {
  font-size: 18px;
  font-weight: 600;
  color: #C62828;
}

.order__meta {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.order__meta li {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #555555;
  margin-bottom: 8px;
}

.order__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.order__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  font-size: 14px;
  color: #333333;
}

.order__item-info {
  display: flex;
  gap: 4px;
}

.order__item-name {
  font-weight: 500;
}

.order__item-weight {
  color: #888888;
}

.order__item-qty,
.order__item-price {
  white-space: nowrap;
}

.order__track-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: #F1F1F1;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1F3D2F;
  cursor: pointer;
}
/* === Глобальный фон страницы === */
body {
  background-color: #FFFFFF;
}

/* === Контейнер заказов === */
/* Вместо фиксированного центрирования убираем margin-auto,
   чтобы блок начинался там же, где и логотип в шапке */
.orders {
  margin: 0;            /* убираем автосентр */
  padding: 24px;        /* отступы слева/справа подшаблона */
  background: none;     /* контейнер прозрачный, фон белый у body */
  max-width: none;      /* позволяем растягиваться на всю ширину контента */
}

/* === Статусы === */
.status-badge--new {
  background: #626C77;
  border: 1px solid #AEF44A;
  color: #FFFFFF;
}
.status-badge--processing {
  background: #AEF44A;
  border: none;
  color: #000000;
}
.status-badge--in_delivery {
  background: #F777A2;
  border: none;
  color: #FFFFFF;
}
.status-badge--completed {
  background: #626C77;
  border: none;
  color: #FFFFFF;
}
.status-badge--cancelled {
  background: #F0F1F2;
  border: none;
  color: #626C77;
}

/* === Итого === */
.order__total-label,
.order__total-value {
  color: #F777A2;
}

/* === Мета-данные (скидки, бонусы, итого без скидки) === */
.order__meta li {
  display: flex;
  justify-content: space-between;
  color: #8E8E93;
  font-size: 14px;
  margin-bottom: 8px;
}

/* === Позиции блюда === */
.order__item-name,
.order__item-weight,
.order__item-qty,
.order__item-price {
  color: #000000;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
}

/* === Кнопка «Отследить заказ» === */
.order__track-btn {
  display: inline-block;
  padding: 8px 16px;      /* чуть уже */
  background: #F1F1F1;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #585555;
  cursor: pointer;
  margin-top: 16px;
}
/* 1) Контейнер контента выравниваем под логотип в шапке */
.orders {
  /* максимальная ширина точно такая же, как у вашего header-container */
  max-width: 1200px;   /* или то значение, которое вы используете в шапке */
  margin: 0 auto;      /* центрируем блок по горизонтали */
  padding: 24px 0;      /* только вертикальные отступы, горизонтальные отступы даёт ваш общий контейнер */
}

/* 2) Маленький пробел между кол-вом и ценой блюда */
.order__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 8px;      /* вот этот gap создаёт отступ между qty и price */
}

/* === Общие поправки === */
body {
  background-color: #FFFFFF;
}

/* === Профиль === */
.profile-info {
  max-width: 1200px;    /* совпадает с шириной контейнера шапки */
  margin: 0 auto;
  padding: 24px;
  background: none;
}

.profile-info__title {
  font-size: 32px;
  font-weight: 700;
  color: #1F3D2F;
  margin-bottom: 8px;
}

.profile-info__greeting {
  font-size: 18px;
  color: #1F3D2F;
  margin-bottom: 16px;
}

.profile-info__bonuses {
  margin-bottom: 32px;
}

.bonuses-badge {
  display: inline-block;
  padding: 8px 16px;
  background: #FF6584;
  color: #FFFFFF;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
}

/* === Лояльность === */
.loyalty {
  margin-bottom: 32px;
}

.loyalty__title {
  font-size: 20px;
  font-weight: 600;
  color: #1F3D2F;
  margin-bottom: 16px;
}

.loyalty__cards {
  display: flex;
  gap: 16px;
}

.loyalty-card {
  flex: 1;
  background: #F8F9FA;
  border: 1px solid #AEF44A;
  border-radius: 12px;
  padding: 16px;
  opacity: 0.5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loyalty-card--active {
  opacity: 1;
}

.loyalty-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.loyalty-card__dot {
  width: 12px;
  height: 12px;
  background: #AEF44A;
  border-radius: 50%;
}

.loyalty-card__label {
  font-size: 16px;
  font-weight: 600;
  color: #1F3D2F;
}

.loyalty-card__desc {
  font-size: 14px;
  color: #555555;
  margin: 0;
}

/* === Достижения === */
.achievements {
  margin-bottom: 32px;
}

.achievements__title {
  font-size: 20px;
  font-weight: 600;
  color: #1F3D2F;
  margin-bottom: 16px;
}

.achievements__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 16px;
}

.achievement {
  text-align: center;
  opacity: 0.5;
}

.achievement--earned {
  opacity: 1;
}

.achievement__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
}

.achievement__label {
  display: block;
  font-size: 14px;
  color: #1F3D2F;
}

/* === Адреса === */
.addresses__title {
  font-size: 20px;
  font-weight: 600;
  color: #1F3D2F;
  margin-bottom: 16px;
}

.addresses__list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F8F9FA;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.address-item__text {
  font-size: 14px;
  color: #333333;
}

.address-item__remove {
  background: none;
  border: none;
  color: #FF6584;
  font-size: 14px;
  cursor: pointer;
}

/* === Футер профиля === */
.profile-info__footer {
  background: #F8F9FA;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__name {
  font-size: 16px;
  font-weight: 600;
  color: #1F3D2F;
}

.footer__birth {
  font-size: 14px;
  color: #555555;
}
.birthdate-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.birthdate-form input[type="date"] {
  padding: 4px 8px;
  border: 1px solid #CED4DA;
  border-radius: 4px;
}
.birthdate-form button {
  padding: 6px 12px;
  background: #FF6584;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Блок “Нет заказов” */
.orders__empty-block {
  text-align: center;
  padding: 64px 24px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  margin-top: 16px;
}

.orders__empty-title {
  font-size: 24px;
  font-weight: 600;
  color: #1F3D2F;
  margin-bottom: 8px;
}

.orders__empty-subtitle {
  font-size: 16px;
  color: #888888;
  margin: 0;
}

/* === Страница «Успех» === */
.order-success {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  background: #FFFFFF;
}

.order-success__title {
  font-size: 32px;
  font-weight: 700;
  color: #1F3D2F;
  margin-bottom: 8px;
}

.order-success__number {
  font-size: 16px;
  color: #888888;
  margin-bottom: 24px;
}

.order-success__box {
  background: #F0F1F2;
  border-radius: 12px;
  padding: 16px 24px;
}

.order-success__box-title {
  font-size: 18px;
  font-weight: 600;
  color: #1F3D2F;
  margin: 0 0 16px;
}

.order-success__status {
  display: flex;
  align-items: center;
  gap: 12px;
}

#delivery-countdown {
  font-size: 16px;
  color: #555555;
}

/* Берётся ваш существующий статус-бейдж */
.status-badge--new {
  background: #626C77;
  border: 1px solid #AEF44A;
  color: #FFFFFF;
}
/* остальные статусы (повторяем из main.css) */
.status-badge--processing  { background: #AEF44A; color: #000; }
.status-badge--in_delivery { background: #F777A2; color: #FFF; }
.status-badge--completed   { background: #626C77; color: #FFF; }
.status-badge--cancelled   { background: #F0F1F2; color: #626C77; }

/* Отключаем outline у всех инпутов внутри формы оформления заказа */
.page-container #order-form input:focus,
.page-container #order-form textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Убираем рамку и тень у всех инпутов в форме оформления заказа */
.page-container #order-form input,
.page-container #order-form textarea {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
#order-form input#id_name {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 1) Контейнер с вариантами должен быть сдвинут под кнопку «Списать» */
#bonus-options {
  display: none;               /* по умолчанию скрыт */
  margin-top: 16px;
  margin-left: calc(50% + 6px);/* сдвиг под вторую кнопку (50% ширины родителя + половина gap) */
  gap: 8px;
  /* flex-контейнер, чтобы кнопки выстраивались в ряд */
  display: flex;
}

/* 2) Кнопки-варианты: белый фон, чёрный текст, без рамки */
#bonus-options button {
  background-color: #fff;
  color: #000;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  cursor: pointer;
}

/* 3) Состояние «выбран» */
#bonus-options button.selected {
  border: 1px solid #AEF44A;
}
#bonus-options button {
  border: none !important;
  outline: none !important;
}

#bonus-options button.selected {
  border: 1px solid #AEF44A !important;
}

/* ===== Мобильная навигация ===== */
.mobile-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-icon-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.mobile-icon-btn img {
  width: 24px;
  height: 24px;
}

.mobile-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #F777A2;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-categories {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}
.mobile-categories .categories-bar__inner {
  flex-wrap: wrap;
  padding: 12px 16px;
  gap: 12px;
}

.site-footer {
  background-color: #003c36;
  color: #fff;
  padding: 40px 0;
  box-sizing: border-box;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  box-sizing: border-box;
}

.footer-logo img {
  max-width: 180px;
  width: auto;
  height: auto;
  display: block;
}

.footer-text-block {
  flex: 1;
  min-width: 200px;
  font-size: 15px;
  line-height: 1.6;
}

.footer-text-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
}
.footer-links a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  /* отменяем жёсткую высоту, отступы и центрирование */
  .site-footer {
    height: auto !important;
    padding: 24px 16px 1px !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    display: block !important;
  }

  /* контейнер делаем колонкой */
  .footer-container {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: none;
    padding: 0 !important;
  }

  /* логотип: ограничиваем блок и вписываем картинку */
  .footer-logo {
    max-width: 140px;
    margin-bottom: 12px;
    width: 100%;
  }
  .footer-logo img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* текстовый блок чуть меньше шрифт, убираем лишний отступ */
  .footer-text-block {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .footer-text-title {
    font-size: 16px;
    margin-bottom: 8px;
  }

  /* ссылки */
  .footer-links {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }
  .footer-links a {
    font-size: 14px;
  }
}

/* ————— Попап “Подробнее” — Адаптация для мобильных ————— */
/* На экранах уже 576px — делаем вертикальный стек */
@media (max-width: 576px) {
  .popup-content {
    flex-direction: column;
  }
  /* Чтобы картинка (левая часть) и текст (правая часть) были по 100% */
  .popup-left,
  .popup-right {
    width: 100%;
  }
  /* Немного отступа между картинкой и текстом */
  .popup-left {
    margin-bottom: 16px;
  }
}

/* по умолчанию мобильная картинка скрыта */
.popup-image--mobile {
  display: none;
}

/* на экранах ≤576px: прячем левый столбец и показываем мобильную картинку */
@media (max-width: 576px) {
  .popup-left {
    display: none;
  }
  .popup-image--mobile {
    display: block;
    width: 100%;
    margin: 16px 0;
    object-fit: cover;
  }
}

/* Описание в корзине: пусть сжимается и переносит текст */
.cart-description {
  flex: 1 1 auto;
  min-width: 0;               /* разрешаем ужиматься */
  overflow-wrap: break-word;  /* перенос длинных слов */
  word-break: break-word;     /* ещё чуть увереннее */
}

/* уменьшаем ширину поля промокода и добавляем отступ между кнопками в футере корзины */
.cart-footer {
  display: flex;
  align-items: center;
  gap: 8px;              /* общий отступ между всеми прямыми детьми */
  flex-wrap: wrap;       /* чтобы на очень узких экранах кнопки не съезжали */
}

/* пусть поле промокода берёт только то место, что нужно */
.cart-footer .promo-input {
  flex: 0 0 auto;        /* не растягиваем по ширине */
  width: 120px;          /* или подберите своё оптимальное значение */
  min-width: 80px;
  margin: 0;             /* общий gap уже задаётся .cart-footer */
}

/* кнопка «Применить» получает стили как обычно */
.cart-footer .promo-btn {
  /* если у вас она называется по-другому — поправьте селектор */
}

/* кнопка «К оформлению заказа» */
.cart-footer .checkout-btn {
  flex: 0 0 auto;        /* не растягиваем */
  margin: 0;             /* общий gap уже задаётся .cart-footer */
}

/* Мобильная адаптация для промокода и кнопки оформления */
@media (max-width: 576px) {
  .cart-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;               /* минимальный промежуток между элементами */
  }
  .promo-input {
    /* убираем жёсткую ширину 839px, делаем гибким */
    flex: 1 1 auto;
    min-width: 0;           /* позволяет полю ужиматься меньше своего контента */
    width: auto;
    margin: 0;              /* убираем отступ справа */
  }
  .checkout-btn {
    /* кнопка тоже гибкая, займёт только необходимое место */
    flex: 0 0 auto;
    width: auto;
  }
}

/* Мобильная выравнивалка контента «Заказы» под логотип */
@media (max-width: 768px) {
  .orders {
    /* убираем автосентрирование и даём отступы слева-справа как у шапки (20px) */
    margin: 0;
    padding: 0 20px;
  }
}
/* центрируем цифру в кружочке на иконке корзины */
.mobile-icons {
  position: relative;
}

.mobile-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  transform: translate(30%, -30%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F777A2;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  line-height: 2;
  padding: 0 0 0 5px;   /* сдвиг цифры вправо на 1px */
}

/* если .consents стоит на том же элементе, что и .form-row */
.form-row.consents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

/* или, если вы хотите ориентироваться на .consents внутри .form-row: */
/*.form-row .consents { … }*/

/* и для лейблов внутри */
.form-row.consents label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-footer {
  /* Задаём именно ваш зелёный фон: */
  background-color: #00392F; /* ← поправьте на тот, что у вас в дизайне */
  width: 100%;
  /* Убираем любую фиксированную высоту, если была */
  height: auto !important;
  /* Достаточный внутренний отступ сверху/снизу */
  padding-top:    60px !important;
  padding-bottom: 60px !important;
}

/* ──────────────────────────────────────────────────────────
   Сбрасываем отступы у соседних блоков, чтобы не было «просвета»
────────────────────────────────────────────────────────── */
.page-container {
  margin-bottom: 0 !important;
}

  /* 1. Заголовки секций — одинаковые для “Достижения”, “Программа лояльности” и “Сохранённые адреса” */
  h2.addresses__title,
  h2.loyalty-carousel__title,
  h2.achievements-carousel__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #043D36;
    margin-bottom: 1rem;
    text-align: left;
  }

  /* 2. Заголовок карточки (h3) + картинка индикатора в одну строку */
  .carousel-card .card__indicator {
    display: inline-block;
    vertical-align: middle;
    width: 20px;  /* подстройте под свой макет */
    height: 20px;
    margin-right: 8px;
  }
  .carousel-card .card__title {
    display: inline-block;
    vertical-align: middle;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #043D36;
    margin: 0;
  }

  /* 3. Текст кэшбэка: жирный “Кэшбэк:”, остальное medium */
  .card__cashback {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    margin: 0.5rem 0;
  }
  .card__cashback strong {
    font-weight: 700;
  }
  .card__cashback span {
    font-weight: 500;
  }

  /* 4. “Подарок-сюрприз” */
  .card__gift {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  .card__gift img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }
  .card__gift span {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #000;
  }

  /* 5. Размеры карточки ачивки */
  .achievements-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
  }
  .achievements-container .achievement-card {
    width: 160px;
    height: 144px;
    background: #fff;
    border: 1px solid #AEF44A;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;    /* по горизонтали */
    justify-content: center; /* по вертикали */
    text-align: center;      /* для текста */
    transition: transform 0.2s;
  }
  .achievement-card__img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 0.75rem;
  }
  .achievement-card__placeholder {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    margin-bottom: 0.75rem;
  }
  .achievement-card__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    color: #043D36;
    word-wrap: break-word;
  }

  /* стили для разблокированной/заблокированной ачивки */
  .achievement-card.unlocked {
    opacity: 1;
    transform: scale(1.02);
  }
  .achievement-card.locked {
    opacity: 0.5;
  }

  /* ==== Адаптив для экранов <=768px (мобилка) ==== */
  @media (max-width: 768px) {

    /* Заголовки уменьшаем */
    h2.addresses__title,
    h2.loyalty-carousel__title,
    h2.achievements-carousel__title {
      font-size: 18px;
      line-height: 24px;
    }

    /* h3 заголовок + индикатор */
    .carousel-card .card__indicator {
      width: 32px;
      height: 32px;
      margin-right: 6px;
    }
    .carousel-card .card__title {
      font-size: 18px;
      line-height: 24px;
    }

    /* текст кэшбэка и подарок */
    .card__cashback,
    .card__gift span {
      font-size: 12px;
      line-height: 16px;
    }
    .card__gift img {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }

    /* карточка ачивки */
    .achievements-container .achievement-card {
      width: 140px;
      height: 124px;
      padding: 0.5rem;
    }
    .achievement-card__img,
    .achievement-card__placeholder {
      width: 32px;
      height: 32px;
      margin-bottom: 0.5rem;
    }
    .achievement-card__name {
      font-size: 18px;
      line-height: 24px;
    }
  }

  /* === Карусель уровней лояльности === */
  .loyalty-carousel {
    margin: 2rem 0;
  }
  .loyalty-carousel__title {
    /* ваш общий стиль h2 */
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #043D36;
    margin-bottom: 1rem;
  }

  /* Обёртка для стрелок и контейнера */
  .carousel-wrapper {
    position: relative;
  }

  /* Горизонтальный флекс-контейнер */
  .carousel-container {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }
  .carousel-container::-webkit-scrollbar {
    display: none;
  }

  /* Карточка уровня */
  .carousel-card {
    flex: 0 0 calc((100% - 2rem) / 3); /* три на строку */
    scroll-snap-align: center;
    background: #fff;
    border-radius: 8px;
    padding: 1rem;
    box-sizing: border-box;
    transition: transform 0.2s;
  }

  /* Стрелки навигации */
  .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    border: none;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
  }
  .carousel-prev { left: 0; }
  .carousel-next { right: 0; }

  /* Активная карточка — чуть больше и полностью непрозрачная */
  .carousel-card {
    opacity: 0.6;
    transition: transform 0.2s, opacity 0.2s;
  }

  .carousel-card.active {
    opacity: 1;
    border: 1px solid #AEF44A;
  }

  /* Фон и скругления карточек в карусели лояльности */
  .carousel-card {
    background-color: #F0F1F2;  /* белый фон */
    border-radius: 8px;         /* мягкие скругления */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);  /* лёгкая тень */
    padding: 1rem;              /* внутренние отступы */
    box-sizing: border-box;
  }

  .achievements-carousel {
    margin: 2rem 0 3rem;  /* сверху 2rem (как было), снизу 3rem */
  }



  /* === Адаптив для мобилки: одна карточка на экран === */
  @media (max-width: 768px) {
    .carousel-card {
      flex: 0 0 80%;
    }
    .carousel-nav {
      display: block;
      font-size: 1.5rem;
    }
  }

  /* Контейнер для двух бейджей */
  .profile-info__balances {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem; /* можно подкорректировать */
  }

  /* Общие стили для обоих бейджей */
  .bonuses-badge,
  .coins-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 15rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  /* Фон и цвет для бонусов (оставляем ваш текущий) */
  .bonuses-badge {
    background-color: #E0F7FA; /* пример — ваш текущий фон */
    color: #006064;            /* пример — ваш текущий цвет */
  }

  /* Фон и цвет для монет */
  .coins-badge {
    background-color: #FFF3E0; /* светло-оранжевый фон */
    color: #E65100;            /* тёмно-оранжевый текст */
  }