/* ======================= THEME ======================= */
:root{
  /* Фирменная оливковая палитра */
  --olive:        #6A7A3A;   /* оливковый основной (обновлено) */
  --olive-hover:  #4E5C3A;   /* темнее для hover */
  --olive-light:  #7B8F5C;   /* дополнительный */
  --olive-pale:   #E6ECD9;   /* светлый оливковый */
  --olive-muted:  #9AA3AD;   /* неактивный текст */
  --olive-10:     rgba(106,122,58,0.10); /* оливковый 10% */
  --olive-12:     rgba(106,122,58,0.12); /* оливковый 12% для фокуса */
  --olive-14:     rgba(106,122,58,0.14); /* оливковый 14% для бордеров */
  --olive-20:     rgba(106,122,58,0.20); /* оливковый 20% */
  
  /* Фирменный розовый */
  --pink:         #FCE2EA;   /* розовый основной (для корзины) */
  --pink-50:      #FFF5F8;   /* очень светлый розовый для акцентов */
  --pink-light:   #FFE8EF;   /* светлый розовый */
  --pink-badge:   #FFD6E3;   /* для бейджей */
  
  /* Базовые цвета */
  --white:        #FFFFFF;
  --bg:           #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #FAFBFC;
  
  /* Текстовые цвета (для корзины) */
  --text:         #222;
  --muted:        #777;
  --border:       #EDEDED;
  
  /* Геометрия */
  --radius:       16px;
  
  /* Устаревшие (для совместимости) */
  --olive-200: var(--olive-pale);
  --olive-600: var(--olive-hover);
  --olive-700: var(--olive);
  --macaron:   var(--pink-light);
  --macaron-600: var(--pink-badge);
  --macaron-700: var(--olive);
  
  /* Текст и UI */
  --text:         #24313a;
  --text-muted:   var(--olive-muted);
  --muted:        var(--olive-muted);
  --line:         #E9EDF3;
  --shadow:       0 8px 24px rgba(95, 112, 72, .08);
  
  /* Высоты для фиксированных элементов */
  --header-h: 56px;
  --catbar-h: 56px;
  --tabbar-h: 64px;
}

/* ======================= BASE ======================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 1200px at -30% -20%, var(--macaron) 0%, transparent 40%),
    radial-gradient(900px 900px at 120% -10%, rgba(122,140,89,.08) 0%, transparent 45%),
    var(--bg);
  /* Отключаем двойной тап для зума на iOS */
  touch-action: manipulation;
}

/* Отключаем двойной тап для зума на всех интерактивных элементах */
button, a, input, textarea, select, [role="button"], [onclick] {
  touch-action: manipulation;
}

/* ======================= HEADER ======================= */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
  .header-row {
    margin-bottom: 12px;
    gap: 8px;
  }
  
  .header-row h1 {
    font-size: 24px;
    margin: 0;
  }
}

/* Social Links */
.social-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--olive-pale);
  border-radius: 12px;
  background: var(--white);
  color: var(--olive);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.social-link:hover {
  background: var(--olive-pale);
  border-color: var(--olive);
  transform: translateX(4px);
}

.social-link:active {
  transform: scale(0.98);
}

.social-link svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.social-link:hover svg {
  transform: scale(1.1);
}

/* ======================= AUTH SHEET ======================= */
.auth-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(0,0,0,.12);
  transform: translateY(100%);
  transition: transform .18s ease-out;
  max-height: 80vh;
  overflow: hidden;
  overscroll-behavior: contain;
}

.auth-sheet.open {
  transform: translateY(0);
}

.auth-sheet-content {
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  max-height: calc(100dvh - var(--auth-header-h, 56px));
  scroll-padding-bottom: calc(env(safe-area-inset-bottom) + var(--kb, 0px) + 16px);
}

.auth-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.auth-sheet-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.auth-sheet-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.auth-sheet-close:hover {
  background: var(--olive-50);
  color: var(--olive);
}

/* Auth Methods */
.auth-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-method-btn {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.2s ease;
  position: relative;
}

.telegram-btn {
  background: #0088cc;
  color: white;
}

.telegram-btn:hover {
  background: #006699;
  transform: translateY(-1px);
}

.phone-btn {
  background: var(--olive);
  color: white;
}

.phone-btn:hover {
  background: var(--olive-600);
  transform: translateY(-1px);
}

.phone-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 8px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-divider span {
  padding: 0 16px;
  background: #fff;
}

/* Tabs */
.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab:hover {
  background: var(--olive-50);
  border-color: var(--olive-200);
}

.auth-tab.active {
  background: var(--olive);
  color: white;
  border-color: var(--olive);
}

.auth-tab-content {
  display: none;
}

.auth-tab-content.active {
  display: block;
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Phone Form (legacy) */
.auth-phone-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-form-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.auth-form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease;
}

.auth-form-group input:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(107, 142, 35, 0.1);
}

.auth-form-group small.auth-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: -4px;
}

.auth-link {
  text-align: center;
  margin-top: -8px;
}

.auth-forgot-link {
  font-size: 14px;
  color: var(--olive);
  text-decoration: none;
  transition: color 0.2s ease;
}

.auth-forgot-link:hover {
  color: var(--olive-600);
  text-decoration: underline;
}

/* User Info */
.auth-user-info {
  text-align: center;
  margin-bottom: 24px;
}

.auth-user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: var(--olive);
  background: var(--olive-100);
}

.auth-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.auth-user-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

/* Auth Actions */
.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-action-btn {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.auth-action-btn:hover {
  background: var(--olive-50);
  border-color: var(--olive-200);
}

.auth-action-btn.logout-btn {
  color: #dc3545;
  border-color: #dc3545;
}

.auth-action-btn.logout-btn:hover {
  background: #fff5f5;
  border-color: #dc3545;
}

/* Spinner */
.btn-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Keyboard hide chip */
.auth-kb-chip{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + var(--kb, 0px) + 8px);
  background: #F1F5EB;
  color: #68873D;
  border: 1px solid #DCE8CD;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  display: none;
}
.auth-kb-chip.visible{ display:inline-flex; }

/* Reserve spacing for inputs when centered with keyboard */
#authSheet input, #authSheet select, #authSheet textarea{ scroll-margin-bottom: 120px; }

/* Mobile adjustments */
@media (max-width: 768px) {
  .auth-sheet {
    max-height: 85vh;
  }
  
  .auth-sheet-content {
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  
  .auth-sheet-title {
    font-size: 18px;
  }
}
/* блокируем прокрутку фона при открытых шитах */
body.no-scroll{ overflow:hidden; }
body.no-scroll{
  position: fixed;
  width: 100%;
  top: var(--scroll-lock-top, 0px);
}
/* Блокируем скролл у корневого html при открытых шитах (Mini App iOS) */
html.no-scroll{
  overflow: hidden;
  overscroll-behavior: none;
  position: fixed;
  width: 100%;
  top: var(--scroll-lock-top, 0px);
}

/* контейнер страницы */
.container{max-width:980px;margin:0 auto;padding:24px 16px}

/* заголовок/приветствие */
h1 {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--olive) 0%, #6B8E23 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h2 {
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #2B2E2A;
}
#hello{font-weight:600;font-size:22px;margin-bottom:8px}

/* мелкий текст */
.muted{color:var(--olive-muted);font-size:13px}

/* ряды/чипсы/кнопки */
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

button{
  appearance:none;border:0;cursor:pointer;user-select:none;
  background:var(--olive); color:#fff;
  padding:10px 14px; border-radius:12px; font-weight:600;
  box-shadow:var(--shadow);
  transition:transform .08s ease, background .15s ease, opacity .15s ease;
}
button:hover{background:var(--olive-600)}
button:active{transform:translateY(1px)}
button.secondary{
  background:transparent; color:var(--olive-700);
  border:1px solid var(--line); box-shadow:none;
}
button.secondary:hover{background:var(--macaron); border-color:var(--macaron-600)}

/* инпуты - оптимизировано для iOS */
input[type="text"],input[type="number"],input[type="search"],input[type="tel"],textarea,select{
  width:100%; max-width:100%;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line);
  border-radius:15px; 
  padding:14px 16px;
  font-size:16px; /* Минимум 16px чтобы iOS не зумила */
  line-height:1.4;
  min-height:48px; /* Минимальная высота для удобного тапа */
  outline:none; transition:border .15s ease, box-shadow .15s ease;
  -webkit-appearance:none; /* Убираем нативный стиль iOS */
  appearance:none;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--olive); 
  box-shadow:0 0 0 3px rgba(122,140,89,.12)
}

/* ======================= Табы категорий - фирменный стиль ======================= */
#catalog .row{margin:8px 0 14px}
#catalog .row button{
  padding:8px 16px;
  border-radius:999px;
  border: 1.5px solid var(--olive-pale);
  font-weight: 500;
  transition: all 180ms ease-out;
}
/* Активная категория */
#catalog .row button:not(.secondary){
  background:var(--olive-pale);
  color: var(--olive);
  border-color: var(--olive-pale);
}
/* Неактивная категория */
#catalog .row button.secondary{
  background:#fff;
  color: var(--olive);
  border-color: var(--olive-pale);
}
#catalog .row button.secondary:hover{
  background:var(--pink-light);
  border-color: var(--olive-light);
}

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

/* карточка товара */
.card{
  position:relative;
  background:var(--olive-pale);
  border:1px solid var(--line);
  border-radius:15px; padding:12px;
  box-shadow:0 2px 4px rgba(95, 112, 72, 0.06);
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 3px 8px rgba(95, 112, 72, 0.1)}
.card img{
  width:100%; height:210px; object-fit:cover;
  border-radius:14px; display:block; margin-bottom:10px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  transition: filter 0.3s ease;
  filter: blur(5px);
  opacity: 0.8;
}
.card img.loaded{
  filter: blur(0);
  opacity: 1;
}

/* заголовок + цена */
.title{font-weight:600; font-size:16px; margin:4px 0 6px; color: #2B2E2A}
.price{font-weight:700; color:var(--olive); margin:4px 0 10px}

/* описание/аллергены */
.card .muted{margin:6px 0; color: var(--olive-muted)}

/* Упрощенные карточки товаров как в McDonald's */
.card .title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin: 8px 0 12px 0;
}

.price-button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.card .price {
  font-size: 18px;
  font-weight: 700;
  color: var(--olive);
  margin: 0;
  flex: 1;
}

.add-btn {
  width: 40px;
  height: 40px;
  background: var(--olive);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;  /* Убирает лишние отступы текста для идеального центрирования */
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.add-btn:hover:not(:disabled) {
  background: var(--olive-600);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(107, 142, 35, 0.3);
}

.add-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* бейджи (Хит/Новинка) */
.badges{
  position:absolute; top:10px; right:10px;
  display:flex; gap:6px; z-index:2;
}
.badge{
  padding:4px 10px; font-size:12px; color:#fff; border-radius:999px;
  backdrop-filter:saturate(150%) blur(4px);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.badge.hit{ background:#f59e0b }    /* оранжевый */
.badge.new{ background:#10b981 }    /* зелёный */

/* «нет в наличии» */
.soldout{opacity:.75}
.badge-out{
  position:absolute; left:10px; top:10px; z-index:2;
  background:linear-gradient(135deg, #9aa7b1, #79828a);
  color:#fff; font-weight:700; font-size:12px; letter-spacing:.3px;
  padding:6px 10px; border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}

/* селект размеров */
.card select{
  margin-top:6px; margin-bottom:10px;
  background:#fff;
}

/* счётчик количества */
.qty{display:flex; align-items:center; gap:8px; margin-top:6px}
.qty .count{
  min-width:28px; text-align:center; font-weight:700; color:var(--text);
  padding:4px 8px; background:var(--surface-2); border-radius:10px; border:1px solid var(--line);
}
.qty button{
  width:36px; height:36px; padding:0; display:inline-grid; place-items:center;
  border-radius:12px; background:var(--olive); color:#fff;
}
.qty button:disabled{background:#d1d5db; color:#fff; box-shadow:none}

/* ======================= Корзина ======================= */
#cart .row{
  justify-content:space-between; width:100%;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:10px 12px; box-shadow:var(--shadow);
}
.total{
  margin-top:10px; font-weight:800; font-size:18px; color:var(--olive-700);
}

/* ======================= Верхняя панель/кнопки действий ======================= */
#userBar{display:none; gap:10px; align-items:center}
#payBlock{display:none}

/* ======================= Поисковая строка - Улучшенный дизайн ======================= */

/* Контейнер для поиска - главный акцент */
.search-container {
  position: relative;
  width: min(720px, 100%);
  margin: 16px auto 12px;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 21px;
  height: 21px;
  color: var(--olive);
  pointer-events: none;
  transition: color 180ms ease;
}

/* Вариант А: белый фон + тонкая оливковая рамка */
#search {
  display: block;
  width: 100%;
  padding: 15px 16px 15px 50px;
  border-radius: 15px;
  border: 1px solid var(--olive-pale);
  background: var(--white);
  font-size: 15px;
  color: #2B2E2A;
  transition: all 200ms ease-out;
  box-shadow: 0 2px 4px rgba(95, 112, 72, 0.04);
}

#search::placeholder {
  color: var(--olive-muted);
  opacity: 0.85;
}

#search:hover {
  border-color: var(--olive-light);
  box-shadow: 0 2px 6px rgba(95, 112, 72, 0.08);
}

#search:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 2px 8px rgba(95, 112, 72, 0.12);
  background: var(--white);
}

#search:focus + .search-icon {
  color: var(--olive);
}

/* Кнопка "Готово" для поиска */
#btnSearchDone {
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: scale(0.9);
}

#btnSearchDone.visible {
  opacity: 1;
  transform: scale(1);
}

/* Адаптивность */
@media (max-width: 480px) {
  .search-container {
    margin: 12px auto 16px;
  }
  
  #search {
    padding: 12px 14px 12px 44px;
    font-size: 14px;
  }
  
  .search-icon {
    left: 14px;
    width: 18px;
    height: 18px;
  }
}

/* ======================= Misc ======================= */
a{color:var(--olive-700); text-decoration:none}
a:hover{text-decoration:underline}

/* Адаптивная сетка карточек товаров */
.grid{ display:grid; gap:18px; }

/* ≤ 599px — телефоны: 2 карточки */
@media (max-width: 599px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* 600–991px — большие телефоны/маленькие планшеты: 3 карточки */
@media (min-width: 600px) and (max-width: 991px){
  .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* 992–1279px — ноутбуки: 3 карточки (можно 4, если хочется плотнее) */
@media (min-width: 992px) and (max-width: 1279px){
  .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ≥ 1280px — десктопы: 4 карточки */
@media (min-width: 1280px){
  .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
/* плавающая панель */
.cart-bar{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 40;
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid #e6e6e6;
  border-radius: 16px; padding: 10px 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.cart-bar.hidden{ display:none; }
.cart-bar__left{ display:flex; align-items:center; gap:8px; font-size: 16px; padding:8px 10px; border-radius:12px; }
.cart-btn{ cursor:pointer; }
.cart-btn:focus{ outline:3px solid rgba(122,140,89,.35); outline-offset:2px; }
.cart-icon-holder{ position:relative; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; }
.cart-icon{ font-size:20px; line-height:1; }
.cart-badge{ position:absolute; right:-4px; top:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--olive); color:#fff; font-size:11px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.cart-bar__total{ font-size: 16px; display:inline-flex; align-items:center; white-space:nowrap; }
#cartBarTotal{ white-space:nowrap; }

/* Tooltip for desktop */
.cart-btn[title]{ position:relative; }
.cart-btn:hover::after{
  content: attr(title);
  position:absolute; left:0; bottom: calc(100% + 8px);
  background: #111; color:#fff; font-size:12px; padding:6px 8px; border-radius:8px; white-space:nowrap;
}

/* Coachmark */
.coachmark{ position:fixed; left:50%; transform:translateX(-50%); bottom:72px; z-index:39; background:#111; color:#fff; padding:10px 12px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.25); }
.coachmark::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-8px; border:8px solid transparent; border-top-color:#111; }

/* Safe area for mobile */
@supports (padding-bottom: env(safe-area-inset-bottom)){
  .cart-bar{ padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* Bounce animation */
@keyframes bounceIn {
  0% { transform: translateX(-50%) scale(1); }
  30% { transform: translateX(-50%) scale(1.06); }
  60% { transform: translateX(-50%) scale(0.98); }
  100%{ transform: translateX(-50%) scale(1); }
}
.cart-bar.bounce{ animation: bounceIn .35s ease; }

/* bottom-sheet */
.sheet-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:900; }
.sheet-overlay{ overscroll-behavior: contain; }

.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:901;
  background:#fff; border-radius:16px 16px 0 0;
  box-shadow:0 -6px 24px rgba(0,0,0,.12);
  transform:translateY(100%); transition:transform .18s ease-out;
  padding:14px 16px;
  max-height:92vh;
  display:flex; flex-direction:column;
}
.sheet__drag{ display: none; /* Скрыто, т.к. свайп не реализован */ }
.sheet.open{ transform: translateY(0); }
.sheet-overlay.hidden{ display:none; }
.sheet.hidden{ display:none; }

/* небольшие утилиты */
.input{ 
  width:100%; 
  padding:14px 16px; 
  border:1px solid #e6e6e6; 
  border-radius:15px;
  font-size:16px; /* iOS антизум */
  min-height:48px;
  -webkit-appearance:none;
  appearance:none;
}
.btn{ padding:10px 14px; border-radius:12px; border:1px solid transparent; cursor:pointer; }
.btn-primary{ background:var(--olive); color:#fff; }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }
.btn-secondary{ background:var(--macaron); color:var(--text); border-color:var(--macaron-600); }
.btn-olive{ 
  background: #4a5d3e !important;
  color: #ffffff !important; 
  border: none !important; 
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}
.btn-olive:hover{ 
  background: #3d4f34 !important; 
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* корзина */
.sheet-line{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid #eee;
}
.sheet-line .title{ flex:1; margin-right:8px; }
.sheet-line .price{ min-width:90px; text-align:right; opacity:.8; }
.sheet-line .qty{ display:flex; gap:8px; align-items:center; }
.sheet-line .qty .count{ min-width:20px; text-align:center; }

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
.shake { animation: shake .35s; }


/* подсветка совпадений в поиске */
.hl { background: #fff2a8; padding: 0 .15em; border-radius: .2em; }

/* маленькая ссылочка-комментарий к позиции */
.note-link { color: #6b7b43; font-size: 12px; cursor: pointer; margin-left: 8px; }
.note-text { color: #667; font-size: 12px; margin-top: 4px; }


/* Старые стили mode tabs - используем новые выше */

/* Карточка с адресом - премиум стиль с иконкой в круге */
.mode-card {
  margin: 16px 0;
  min-height: 50px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--pink-light) 0%, var(--olive-pale) 100%);
  border-radius: 15px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(95, 112, 72, 0.06);
  transition: all 180ms ease;
}

.mode-card:hover {
  box-shadow: 0 3px 8px rgba(95, 112, 72, 0.1);
  transform: translateY(-1px);
}

.mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mode-row #modeSummary {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--olive);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Адрес в одну строку с многоточием */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Иконка пин в круге - премиум стиль */
.mode-row #modeSummary::before {
  content: '';
  width: 34px;
  height: 34px;
  min-width: 34px;
  background: var(--olive-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z' fill='none' stroke='%235F7048' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='9' r='2.5' fill='none' stroke='%235F7048' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}

.mode-row .linklike {
  padding: 8px 16px;
  background: var(--olive);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease-out;
  white-space: nowrap;
  flex-shrink: 0;
}

.mode-row .linklike:hover {
  background: var(--olive-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(95, 112, 72, 0.2);
}

.mode-row .linklike:active {
  transform: scale(0.96);
}

.mode-row .linklike[hidden] { 
  display: none !important; 
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {
  .mode-card {
    padding: 12px;
    margin: 12px 0;
  }
  
  .mode-row #modeSummary {
    font-size: 14px;
  }
  
  .mode-row #modeSummary::before {
    font-size: 16px;
  }
  
  .mode-row .linklike {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* Список заказов */
.orders-list .order {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 0; border-bottom: 1px solid #eee;
}
.orders-list .left { display:flex; flex-direction:column; gap:2px; }
.orders-list .id { font-weight:600; }
.orders-list .muted { color:#6b7280; font-size:12px; }
.order-more-btn{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:8px; padding:6px 10px; border-radius:999px;
  background:transparent; border:1px solid var(--line); color:var(--olive-700);
  cursor:pointer;
}
.order-more-btn:hover{ background:var(--macaron); border-color: var(--macaron-600); }
.order-more-btn .chev{ font-weight:700; font-size:16px; line-height:1; }
.status-chip {
  font-size:12px; border-radius:999px; padding:4px 10px; white-space:nowrap;
  background:#eef2ff; color:#1f2937;
}
.status--new      { background:#fff7ed; color:#7c2d12; }   /* В ожидании */
.status--cooking  { background:#ecfeff; color:#164e63; }   /* Принят */
.status--ready    { background:#ecfdf5; color:#065f46; }   /* Готов */
.status--sent     { background:#eef2ff; color:#3730a3; }   /* В доставке */
.status--done     { background:#f0fdf4; color:#166534; }   /* Завершён */

/* Список заказов скроллится внутри шита */
#ordersSheet { overflow:hidden; }
#ordersList  { flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; }

/* Детали заказа */
#orderDetailsSheet{ overflow:hidden; }
.order-details-dialog{
  max-width: 720px; margin: 0 auto;
}
.order-details-body{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.order-details-footer{
  position: sticky; bottom: 0;
  background:#fff; border-top:1px solid #eee;
  padding: 12px 16px;
}
.order-meta{ display:grid; grid-template-columns: 1fr; gap:6px; margin:8px 0 12px; }
.order-meta .row{ justify-content:space-between; }
.order-items{ margin:6px 0 10px; }
.order-item{ display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid #eee; }
.order-item .left{ display:flex; flex-direction:column; gap:2px; }
.order-item .right{ text-align:right; min-width:100px; }
.order-sum{ margin-top:10px; border-top:1px dashed #e3e3e3; padding-top:10px; }
.order-error{ color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; padding:10px; border-radius:10px; }
.order-loader{ color:#6b7280; font-size:14px; padding:8px 0; }

/* Desktop (Web / Telegram WebApp) modal constraints */
@media (min-width: 992px){
  #orderDetailsSheet{
    left: 50%; right: auto; transform: translateX(-50%) translateY(100%);
    width: min(720px, 92vw);
  }
  #orderDetailsSheet.open{
    transform: translateX(-50%) translateY(0);
  }
}

.sheet__x{
  position:absolute; right:12px; top:12px;
  background:transparent; border:0; cursor:pointer;
  font-size:22px; line-height:1;
}

/* Заголовок шита с крестиком справа */
.sheet__title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;   /* заголовок по центру */
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 56px 10px;
}

.sheet__title h3{
  margin: 0;
}

/* Кнопка закрытия справа от заголовка */
/* Крестик в правом верхнем углу шита, но ниже/левее шапки Telegram */
.sheet__close-btn{
  position: absolute;
  right: 56px;                     /* было: right: 8px;  — уходим от кнопки "⋯" */
  top: calc(env(safe-area-inset-top, 0px) + 14px); /* было: top:50%; transform... */
  transform: none;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.06);
  color: #222;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  pointer-events: auto;
}


.sheet__close-btn svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: .8;
}

.sheet__close-btn:hover svg{ opacity: 1; }
.sheet__close-btn:active{ transform: translateY(-50%) translateY(1px); }

/* Принудительно отключаем темную тему - всегда светлая тема */
.tg-theme-dark,
.tg-theme-dark * {
  background: white !important;
  color: #333 !important;
}

/* Принудительно устанавливаем светлую тему для всего body */
body {
  background: white !important;
  color: #333 !important;
}

/* Переопределяем темную тему Telegram */
.tg-theme-dark body,
.tg-theme-dark .container,
.tg-theme-dark .main-content {
  background: white !important;
  color: #333 !important;
}

/* В тёмной теме Telegram - отключено */
.tg-theme-dark .sheet__close-btn{
  background: rgba(0,0,0,0.08) !important;
  color: #333 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
}
/* --- Опустить заголовок/крестик ниже шапки Telegram (iOS) --- */
:root { --safe-top: env(safe-area-inset-top, 0px); }

/* больше отступ сверху у шапки листа => крестик центрируется ниже */
.sheet__title{
  padding-top: calc(var(--safe-top) + 10px); /* было: 8px; стало: safe-area + 10px */
}

/* маленькая полоска-"drag" тоже чуть ниже */
.sheet__drag{
  margin-top: calc(env(safe-area-inset-top, 0px) + 18px);
}
/* Бар заголовка шита ("Мои заказы" + крестик) */
.sheet__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 8px;
  position: sticky; top: 0;
  background:#fff; z-index: 2;
}

/* Чуть ниже для iOS с учётом safe-area, но внутри шита, не под шапкой TG */
@supports (padding-top: env(safe-area-inset-top)){
  .sheet.open .sheet__bar{
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  }
}

.sheet__bar-title{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

/* Кнопка-иконка рядом с заголовком */
.btn-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: #222;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.btn-icon svg{ fill: currentColor; opacity:.8; }
.btn-icon:hover svg{ opacity:1; }
.tg-theme-dark .btn-icon{
  background: rgba(0,0,0,0.08) !important;
  color: #333 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
}

/* Keyboard Done Button (iOS) */
#keyboardDoneBtn:hover{
  background: var(--olive-pale) !important;
}
#keyboardDoneBtn:active{
  transform: scale(0.96);
}

/* Promo code section */
.promo-section {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #f9f9f9;
}

.promo-error {
  color: #d32f2f;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

.promo-success {
  color: #2e7d32;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

/* Cart totals breakdown */
.cart-totals {
  margin-top: 12px;
}

.total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.total-line.total-final {
  border-top: 1px solid #e0e0e0;
  padding-top: 8px;
  margin-top: 8px;
  font-size: 16px;
}

.promo-line {
  color: #2e7d32;
}

.btn-icon-small {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 4px;
  border-radius: 4px;
}

/* Переключатель режимов - чистый плоский стиль */
.mode-tabs-container {
  padding: 12px 16px 8px;
  margin: 0 -16px 16px;
  border-bottom: 1px solid var(--olive-pale);
  display: flex;
  justify-content: center;
  gap: 6px;
  background: var(--surface-2);
}

.mode-tab {
  flex: 1;
  max-width: 200px;
  height: 48px;
  padding: 0 24px;
  border: 1.5px solid var(--olive-pale);
  border-radius: 15px;
  background: var(--white);
  color: var(--olive);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms ease-out;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.mode-tab:hover:not(.active) {
  border-color: var(--olive-light);
  background: var(--pink-light);
}

/* Активная кнопка - плоский стиль без теней */
.mode-tab.active {
  background: var(--olive);
  color: var(--white);
  border-color: var(--olive);
  font-weight: 600;
}

.mode-tab:active {
  transform: scale(0.98);
  transition: transform 100ms ease-out;
}

.mode-tab:focus {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

.mode-tab:focus:not(:focus-visible) {
  outline: none;
}

/* Адаптивность */
@media (max-width: 480px) {
  .mode-tabs-container {
    padding: 8px 12px 6px;
    margin: 0 -12px 12px;
  }
  
  .mode-tab {
    height: 44px;
    padding: 0 20px;
    font-size: 15px;
  }
}

/* Статус геолокации */
.geo-status {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 12px;
  display: none;
}

.geo-status.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  display: block;
}

.geo-status.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  display: block;
}

.geo-status.loading {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
  display: block;
}

/* Кнопка "Попробовать снова" */
.btn-outline {
  background: transparent;
  border: 1px solid #007bff;
  color: #007bff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  background: #007bff;
  color: white;
}

.btn-outline:active {
  transform: translateY(1px);
}

/* Кнопка геолокации */
#addrGeoBtn {
  background: #6c757d;
  color: white;
  border: 1px solid #6c757d;
}

#addrGeoBtn:hover {
  background: #5a6268;
  border-color: #545b62;
}

#addrGeoBtn:disabled {
  background: #e9ecef;
  color: #6c757d;
  border-color: #dee2e6;
  cursor: not-allowed;
}

.btn-icon-small:hover {
  background: #f0f0f0;
  color: #333;
}

/* ===== TAB BAR (Нижняя навигация) - Фирменный стиль ===== */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--white);
  border-top: 1px solid var(--olive-pale);
  display: flex;
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 6px rgba(95, 112, 72, 0.04);
}

.tabbar button,
.tabbar .tabbar-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 10px 4px;
  cursor: pointer;
  transition: all 150ms ease-out;
  min-height: 44px;
  min-width: 44px;
  position: relative;
  text-decoration: none;
  color: var(--olive-muted);
  -webkit-tap-highlight-color: transparent;
}

/* Неактивные табы */
.tabbar button:not([aria-selected="true"]),
.tabbar .tabbar-tab:not(.active) {
  color: var(--olive-muted);
}

/* Hover для десктопа */
@media (hover: hover) {
  .tabbar button:hover:not([aria-selected="true"]),
  .tabbar .tabbar-tab:hover:not(.active) {
    color: var(--olive-light);
    background: var(--pink-light);
  }
}

/* Активный таб */
.tabbar button[aria-selected="true"],
.tabbar .tabbar-tab.active {
  color: var(--olive);
}

/* Pressed состояние */
.tabbar button:active,
.tabbar .tabbar-tab:active {
  transform: scale(0.96);
  transition: transform 120ms ease-out;
}

/* SVG иконки */
.tabbar button svg,
.tabbar .tabbar-tab svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 150ms ease-out;
}

/* Текст таба */
.tabbar button span,
.tabbar .tabbar-tab span {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: all 150ms ease-out;
}

.tabbar button[aria-selected="true"] span,
.tabbar .tabbar-tab.active span {
  font-weight: 600;
}

/* Бейдж корзины - нежный оливковый стиль */
.tabbar .badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--olive-pale);
  color: var(--olive);
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
  border: 2px solid var(--white);
  box-shadow: 0 2px 6px rgba(106, 122, 58, 0.15);
  z-index: 1;
}

.tabbar .badge[hidden] {
  display: none;
}

/* Автообрезка для больших чисел */
.tabbar .badge::before {
  content: attr(data-count);
}

/* Иконки-обертка */
.tabbar .tab-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

/* Фирменные SVG иконки для табов */
/* Удаляем emoji-иконки - теперь используем SVG */

/* ===== ЭКРАНЫ ===== */

.screen {
  display: none;
  min-height: 100vh;
  padding-bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 12px);
}

.screen.active {
  display: block;
}

/* ===== ЭКРАН АКЦИЙ ===== */

.promos-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  padding-bottom: calc(var(--tabbar-h) + 20px); /* Отступ снизу для таббара */
}

.promo-placeholder {
  text-align: center;
  padding: 40px 20px;
  background: var(--olive-pale);
  border-radius: 16px;
  border: 2px dashed var(--olive);
}

.promo-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.promo-placeholder h3 {
  margin: 0 0 8px 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
}

.promo-placeholder p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Карточка акции */
.promo-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.promo-card:hover, .promo-card:active {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.promo-card__image {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--olive-pale);
  position: relative;
}

.promo-card__content {
  padding: 16px;
  position: relative;
}

.promo-card__title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.promo-card__subtitle {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.promo-card__expires {
  font-size: 13px;
  color: var(--olive);
  font-weight: 500;
  margin-top: 8px;
}

.promo-card__badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--olive-pale);
  color: var(--olive);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}

/* Статус акции */
.promo-card__status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.promo-card__status--active {
  background: rgba(40, 167, 69, 0.9);
  color: white;
}

.promo-card__status--upcoming {
  background: rgba(108, 117, 125, 0.9);
  color: white;
}

.promo-card__status--expired {
  background: rgba(220, 53, 69, 0.9);
  color: white;
}

/* [PROMO2] Бар фильтра акций в каталоге */
.mm-promo-bar {
  background: linear-gradient(135deg, #4a5d3e 0%, #2d3a23 100%) !important;
  color: #ffffff !important;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  animation: slideDown 0.3s ease-out;
  border: 1px solid rgba(255,255,255,0.15);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mm-promo-bar__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mm-promo-bar__title {
  font-size: 16px;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.mm-promo-bar__subtitle {
  font-size: 13px;
  color: #ffffff !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.mm-promo-bar__close {
  background: rgba(255,255,255,0.25) !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  color: white !important;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.mm-promo-bar__close:hover {
  background: rgba(255,255,255,0.4) !important;
  border-color: rgba(255,255,255,0.6) !important;
  transform: scale(1.15);
}

.mm-promo-bar__close:active {
  transform: scale(0.95);
}

/* [PROMO2] Бейдж "Акция" на карточках товаров */
.mm-chip--promo {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);
  color: white;
  font-weight: 600;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(255,107,107,0.3);
}

/* Модалка с деталями акции */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.modal-content {
  background: var(--white);
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  margin: auto; /* Центрирование по вертикали */
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7) !important;
  color: #fff !important;
  border: none;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.85) !important;
  transform: scale(1.1);
}

.promo-details__image {
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-color: var(--olive-pale);
  border-radius: 20px 20px 0 0;
}

.promo-details__body {
  padding: 24px;
}

.promo-details__body h2 {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.promo-details__subtitle {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.5;
}

.promo-details__description {
  margin: 0 0 24px 0;
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}

.promo-details__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.promo-code-display {
  text-align: center;
  padding: 12px;
  background: var(--olive-pale);
  border-radius: 12px;
  font-size: 16px;
  color: var(--text);
}

.promo-code-display strong {
  color: var(--olive);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1px;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 16px; /* Небольшие отступы для безопасной зоны */
    align-items: flex-start; /* Начинаем сверху, чтобы модалка была видна сразу */
    padding-top: 60px; /* Отступ от верхнего бара Telegram */
  }
  
  .modal-content {
    max-width: 100%;
    border-radius: 16px;
    max-height: calc(100vh - 80px); /* Высота с учётом отступов */
    margin: 0;
  }
  
  .promo-details__image {
    height: 200px;
  }
  
  .promo-details__body {
    padding: 20px;
  }
  
  .promo-details__body h2 {
    font-size: 22px;
  }
}

.loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 16px;
}

/* ===== ЭКРАН АДРЕСОВ ===== */

.location-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

.location-card h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 20px;
}

.location-info {
  margin-bottom: 20px;
}

.location-info p {
  margin: 8px 0;
  color: #555;
  font-size: 14px;
}

.location-info a {
  color: #6B8E23;
  text-decoration: none;
}

.location-info a:hover {
  text-decoration: underline;
}

.location-actions {
  margin-bottom: 20px;
}

.location-map {
  margin-top: 20px;
}

.map-placeholder {
  background: #f0f0f0;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  color: #666;
}

.map-placeholder p {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.map-placeholder small {
  font-size: 12px;
}

/* Стили для Яндекс.Карты */
#yandex-map {
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Адаптивность карты */
@media (max-width: 768px) {
  #yandex-map {
    height: 250px !important;
  }
}

/* Стили для графика работы */
.working-hours {
  margin: 10px 0;
}

.schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 8px;
}

.schedule-day {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 2px solid #e9ecef;
  transition: all 0.2s ease;
  font-size: 14px;
}

.schedule-day.today {
  background: #f0f4e8;
  border-left-color: #8b9a5b;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(139, 154, 91, 0.2);
}

.schedule-day.today .day-name {
  color: #6b7c32;
}

.schedule-day.today .day-hours {
  color: #6b7c32;
  font-weight: 600;
}

.day-name {
  font-weight: 500;
  color: #333;
  min-width: 25px;
}

.day-hours {
  color: #666;
  font-size: 13px;
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {
  .schedule-day {
    padding: 4px 6px;
    font-size: 13px;
  }
  
  .day-hours {
    font-size: 12px;
  }
}

/* ===== ЭКРАН КОРЗИНЫ ===== */

#cartContent {
  margin-top: 16px;
}

/* Адаптивность для tab bar */
@media (max-width: 480px) {
  .tabbar {
    height: 60px;
  }
  
  .tabbar button {
    padding: 6px 2px;
  }
  
  .tabbar button i {
    font-size: 20px;
  }
  
  .tabbar button span {
    font-size: 9px;
  }
  
  .screen {
    padding-bottom: 76px;
  }
}

/* Фокус для доступности */
.tabbar button:focus {
  outline: 2px solid #6B8E23;
  outline-offset: 2px;
}

.tabbar button:focus:not(:focus-visible) {
  outline: none;
}

/* ===== BREADCRUMB НАВИГАЦИЯ ===== */

.breadcrumb {
  margin: 8px 0 16px 0;
  font-size: 14px;
  color: #666;
}

.breadcrumb a {
  color: #6B8E23;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

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

.empty-cart {
  text-align: center;
  padding: 40px 20px;
}

.empty-cart-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-cart h3 {
  margin: 0 0 8px 0;
  color: #333;
}

.empty-cart p {
  margin: 0 0 20px 0;
  color: #666;
}

.cart-items {
  margin-bottom: 20px;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
  gap: 12px;
}

.cart-item__image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.cart-item__info {
  flex: 1;
  min-width: 0;
}

.cart-item__info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.cart-item__price {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.cart-item__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-item__qty {
  min-width: 24px;
  text-align: center;
  font-weight: 500;
}

.cart-item__total {
  font-weight: 600;
  color: #6B8E23;
  min-width: 60px;
  text-align: right;
}

.cart-summary {
  background: #f8f8f8;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #666;
}

.cart-summary__total {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  padding-top: 8px;
  border-top: 1px solid #ddd;
}

.btn-block {
  width: 100%;
}

/* ===== ПРОМОКОД В КОРЗИНЕ ===== */

.promo-section {
  margin: 20px 0;
  padding: 16px;
  background: var(--macaron);
  border-radius: 8px;
}

.promo-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #333;
}

.promo-input-group {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.promo-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.promo-message {
  font-size: 14px;
  padding: 8px;
  border-radius: 4px;
  margin-top: 8px;
}

.promo-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.promo-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.promo-applied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  color: #155724;
}

.promo-applied strong {
  color: #0c5460;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

.btn-outline {
  background: transparent;
  border: 1px solid #6c757d;
  color: #6c757d;
}

.btn-outline:hover {
  background: #6c757d;
  color: white;
}

/* ===== РЕЖИМ ЗАКАЗА ===== */
.order-mode-section {
  margin: 20px 0;
  padding: 16px;
  background: var(--macaron);
  border-radius: 8px;
  border: 1px solid var(--macaron-600);
}

.order-mode-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #333;
}

/* Дубликат стилей mode-tab удален - используем единый стиль выше */

/* ===== ФОРМА ДОСТАВКИ ===== */
.delivery-section {
  margin: 20px 0;
  padding: 16px;
  background: var(--macaron);
  border-radius: 15px;
  border: 1px solid var(--macaron-600);
}

.delivery-section h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #2B2E2A;
}

/* Плашка адреса (Этап 3) */
.delivery-address-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--olive-pale);
  border-radius: 15px;
  min-height: 50px;
  transition: all 0.2s ease;
}

.delivery-address-card:hover {
  border-color: var(--olive-light);
  box-shadow: 0 2px 8px rgba(95, 112, 72, 0.08);
}

.delivery-address-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--olive-pale);
  border-radius: 50%;
  color: var(--olive);
}

.delivery-address-icon svg {
  width: 20px;
  height: 20px;
}

.delivery-address-text {
  flex: 1;
  min-width: 0;
}

.delivery-address-main {
  font-size: 15px;
  font-weight: 500;
  color: #2B2E2A;
  margin-bottom: 2px;
}

.delivery-address-contact {
  font-size: 13px;
  color: var(--olive-muted);
}

/* Пустое состояние адреса */
.address-empty-state {
  text-align: center;
  padding: 32px 16px;
}

.address-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.address-empty-state h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #2B2E2A;
}

.address-empty-state p {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: var(--olive-muted);
}

.delivery-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: flex;
  gap: 8px;
}

.form-input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #6B8E23;
  box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.1);
}

.form-input::placeholder {
  color: #999;
}

/* ===== МОДАЛКА ТОВАРА ===== */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.open {
  opacity: 1;
  visibility: visible;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-content {
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 0;
  max-height: 100vh;
  width: 100%;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.open .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.2);
}

.product-image-container {
  width: 100%;
  height: 280px;  /* Фиксированная высота (больше чем 210px в меню) */
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Фон как в меню */
  border-radius: 20px 20px 0 0;  /* Скругление сверху */
  flex-shrink: 0;  /* Запрещаем сжатие — картинка всегда 280px даже с кучей опций */
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Обрезает края, показывает центр БЕЗ серых полос */
  object-position: center;  /* Берёт ЦЕНТР картинки */
}

.product-info {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.product-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.product-price-container {
  margin-bottom: 16px;
}

.product-price {
  font-size: 20px;
  font-weight: 600;
  color: var(--olive);
}

.product-composition {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.4;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--macaron);
  border-radius: 8px;
}

.product-selectors {
  margin-bottom: 20px;
}

.selector-group {
  margin-bottom: 16px;
}

.selector-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.selector-select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--olive-200);
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.selector-select:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 2px rgba(107, 142, 35, 0.1);
}

.size-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.size-btn {
  flex: 1;
  min-width: 80px;
  padding: 12px 16px;
  border: 1px solid var(--olive-200);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.size-btn.active {
  background: var(--olive);
  color: white;
  border-color: var(--olive);
}

.size-btn:hover:not(.active) {
  background: var(--macaron);
  border-color: var(--macaron-600);
}

.temp-buttons {
  display: flex;
  gap: 8px;
}

.temp-btn {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--olive-200);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.temp-btn.active {
  background: var(--olive);
  color: white;
  border-color: var(--olive);
}

.temp-btn:hover:not(.active) {
  background: var(--macaron);
  border-color: var(--macaron-600);
}

/* === Product Options (Yandex Eda style) === */
.product-options {
  margin-bottom: 20px;
}

.option-group {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-light);
  border-radius: 12px;
  border: 1px solid var(--olive-100);
}

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

.option-group-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.option-group-required {
  font-size: 12px;
  color: var(--error);
  font-weight: 500;
}

.option-group-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.option-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: white;
  border: 1px solid var(--olive-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option-item:hover {
  background: var(--macaron);
  border-color: var(--olive);
}

.option-item.selected {
  background: var(--olive-pale);
  border-color: var(--olive);
}

.option-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.option-item-radio,
.option-item-checkbox {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--olive-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.option-item-checkbox {
  border-radius: 4px;
}

.option-item.selected .option-item-radio {
  border-color: var(--olive);
  background: var(--olive);
}

.option-item.selected .option-item-checkbox {
  border-color: var(--olive);
  background: var(--olive);
}

.option-item-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.option-item.selected .option-item-radio::after {
  opacity: 1;
}

.option-item-checkbox::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.option-item.selected .option-item-checkbox::after {
  opacity: 1;
}

.option-item-name {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
}

.option-item-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.option-item-price {
  font-size: 14px;
  color: var(--olive);
  font-weight: 600;
  white-space: nowrap;
}

.option-item-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-stepper-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--olive-200);
  background: white;
  color: var(--olive);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-stepper-btn:hover {
  background: var(--olive);
  color: white;
  border-color: var(--olive);
}

.option-stepper-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.option-stepper-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  min-width: 20px;
  text-align: center;
}

.quantity-selector {
  margin-bottom: 20px;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.quantity-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--olive-200);
  background: #fff;
  color: var(--olive);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-btn:hover {
  background: var(--olive);
  color: white;
  border-color: var(--olive);
}

.quantity-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantity-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  min-width: 30px;
  text-align: center;
}

.modal-footer {
  padding: 20px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  position: sticky;
  bottom: 0;
}

.add-to-cart-btn {
  width: 100%;
  padding: 16px;
  background: var(--olive);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-to-cart-btn:hover {
  background: var(--olive-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(107, 142, 35, 0.3);
}

.add-to-cart-btn:disabled,
.add-to-cart-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.7;
}

.add-to-cart-btn.disabled {
  background: var(--olive-400);
  color: white;
}

.add-to-cart-btn .price {
  font-size: 18px;
  font-weight: 700;
}

/* ===== УМНЫЕ КАТЕГОРИИ ===== */

.catbar {
  position: static;
  background: var(--bg);
  padding: 8px 12px;
  border-radius: 12px;
  margin: 0 -16px 16px;
  transition: box-shadow 0.2s ease, background 0.2s ease;
  z-index: 40;
}

.catbar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 0;
  margin: 0;
  padding: 8px 16px;
}

.catbar-placeholder {
  height: var(--catbar-h, 56px);
  display: none;
}

.catbar.fixed + .catbar-placeholder {
  display: block;
}

.catbar-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 4px 0;
  scroll-behavior: smooth;
  /* Скрываем скроллбар на мобильных */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.catbar-scroll::-webkit-scrollbar {
  display: none;
}

.cat-pill {
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--olive-200);
  background: var(--bg);
  color: var(--olive-700);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  scroll-snap-align: start;
  flex-shrink: 0;
}

.cat-pill:hover {
  background: var(--macaron);
  border-color: var(--macaron-600);
  color: var(--text);
}

.cat-pill.active {
  background: var(--olive) !important;
  color: white !important;
  border-color: var(--olive) !important;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(107, 142, 35, 0.3);
}

.cat-pill.clicking {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

.cat-pill:not(.active):hover {
  background: var(--olive-50);
  border-color: var(--olive-300);
}

.cat-pill:not(.active):active {
  background: var(--olive-100);
  border-color: var(--olive-400);
}

.cat-section {
  scroll-margin-top: calc(var(--header-h, 56px) + var(--catbar-h, 56px) + 16px);
  margin-bottom: 24px;
}

.cat-section h2 {
  margin: 0 0 16px 0;
  padding: 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

/* Отступ для контента под плашку категорий */
#screenMenu {
  padding-top: 8px;
}

/* ===== ИСПРАВЛЕНИЕ ПЕРЕКРЫТИЙ ===== */

/* Плавающие элементы должны быть выше tab bar */
.cart-bar, .fab, .sticky-footer, .pickup-action {
  bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 12px);
  z-index: 60;
}

/* Модалки и оверлеи должны быть выше всего */
.sheet-overlay, .sheet {
  z-index: 1000;
}

/* Обновляем существующие стили для cart-bar */
.cart-bar {
  position: fixed;
  bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 12px);
  left: 0;
  right: 0;
  z-index: 60;
}

/* ======================= DELIVERY SAVINGS BAR ======================= */
.delivery-savings-bar {
  margin: 20px 0;
  padding: 16px;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.savings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.savings-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.savings-badge {
  padding: 6px 12px;
  background: var(--olive);
  color: white;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
}

.savings-badge.max-reached {
  background: linear-gradient(135deg, var(--olive) 0%, var(--olive-600) 100%);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.savings-progress-container {
  margin-bottom: 16px;
}

.savings-progress-bar {
  position: relative;
  height: 10px;
  background: var(--line);
  border-radius: 10px;
  overflow: visible;
}

.savings-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--olive-200) 0%, var(--olive) 100%);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.savings-progress-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: white;
  border: 3px solid var(--line);
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 2;
}

.savings-progress-pin.reached {
  background: var(--olive);
  border-color: var(--olive);
  box-shadow: 0 0 0 4px rgba(107, 142, 35, 0.2);
}

.savings-milestones {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.savings-milestone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 8px;
  background: white;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.savings-milestone.reached {
  background: var(--olive-200);
  color: var(--text);
}

.milestone-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  background: var(--olive-200);
  color: var(--olive-600);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

.savings-milestone.reached .milestone-marker {
  background: var(--olive);
  color: white;
}

.milestone-text {
  flex: 1;
  color: var(--text);
  font-size: 13px;
}

.savings-milestone.reached .milestone-text {
  color: var(--olive-700);
  font-weight: 500;
}

.savings-max-badge {
  margin-top: 12px;
  padding: 12px;
  background: linear-gradient(135deg, var(--olive-200) 0%, var(--olive-600) 100%);
  color: white;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  animation: slideInUp 0.5s ease;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Адаптив для маленьких экранов */
@media (max-width: 480px) {
  .delivery-savings-bar {
    padding: 12px;
  }
  
  .savings-header h4 {
    font-size: 14px;
  }
  
  .savings-badge {
    font-size: 12px;
    padding: 4px 10px;
  }
  
  .milestone-text {
    font-size: 12px;
  }
}

/* Стиль для строки субсидии в итогах */
.cart-summary__subsidy {
  color: var(--muted);
  font-size: 0.9em;
}

.cart-summary__subsidy span {
  color: var(--olive);
}

/* ===== SESSION EXPIRED BANNER ===== */
.session-expired-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: 480px;
  width: calc(100% - 32px);
  padding: 16px;
  background: var(--white);
  border: 2px solid var(--olive-pale);
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(95, 112, 72, 0.15), 0 2px 8px rgba(95, 112, 72, 0.08);
  animation: slideDown 300ms ease-out;
  transition: all 0.2s ease;
}

.session-expired-banner.hidden {
  display: none;
}

.session-expired-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.session-expired-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.session-expired-text {
  flex: 1;
  min-width: 0;
}

.session-expired-title {
  font-size: 15px;
  font-weight: 600;
  color: #2B2E2A;
  margin-bottom: 2px;
}

.session-expired-subtitle {
  font-size: 13px;
  color: var(--olive-muted);
  line-height: 1.3;
}

.session-expired-btn {
  flex-shrink: 0;
  padding: 10px 20px;
  background: var(--olive);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.session-expired-btn:hover {
  background: var(--olive-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(95, 112, 72, 0.2);
}

.session-expired-btn:active {
  transform: scale(0.96);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Мобильная адаптация */
@media (max-width: 480px) {
  .session-expired-banner {
    top: 12px;
    width: calc(100% - 24px);
    padding: 12px;
  }
  
  .session-expired-content {
    gap: 10px;
  }
  
  .session-expired-icon {
    font-size: 24px;
  }
  
  .session-expired-title {
    font-size: 14px;
  }
  
  .session-expired-subtitle {
    font-size: 12px;
  }
  
  .session-expired-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* ======================= CART REDESIGN 2.0 ======================= */

/* 9) Общие утилиты */
.card {
  background: var(--olive-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.section {
  margin: 16px 0;
}

.h-sep {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* Маленький розовый чип-акцент для заголовков (опционально) */
.chip-title {
  display: inline-block;
  background: var(--pink-50);
  color: #9C7987;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 2) Сегмент-контрол "Самовывоз/Доставка" (обновление) */
.order-mode-section {
  margin: 16px 0 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.order-mode-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--text);
}

.mode-tabs-container {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex;
  gap: 8px;
  margin: 0 !important;
  border: none !important;
}

.mode-tab {
  flex: 1;
  height: 48px !important;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
  border: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  min-width: 44px;
}

.mode-tab:not(.active) {
  background: var(--white) !important;
  color: var(--olive) !important;
  border: 1px solid var(--olive) !important;
}

.mode-tab.active {
  background: var(--olive) !important;
  color: var(--white) !important;
  border: none !important;
  box-shadow: 0 6px 14px rgba(106,122,58,0.25) !important;
}

.mode-tab:active {
  transform: scale(0.98);
}

/* 3) Блок адреса */
.delivery-section {
  margin: 16px 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.delivery-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--text);
}

.address-section {
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin: 0;
}

.delivery-address-card,
.address-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--white);
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.delivery-address-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--olive-10);
  color: var(--olive);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.delivery-address-icon svg {
  width: 20px;
  height: 20px;
}

.delivery-address-text {
  flex: 1;
  min-width: 0;
}

.delivery-address-main {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
}

.delivery-address-contact {
  font-size: 13px;
  color: var(--muted);
}

.delivery-address-card .btn,
.delivery-address-card button {
  flex-shrink: 0;
  background: var(--white) !important;
  color: var(--olive) !important;
  border: 1px solid var(--olive) !important;
  border-radius: 9999px !important;
  height: 36px !important;
  padding: 0 14px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.delivery-address-card .btn:hover,
.delivery-address-card button:hover {
  background: var(--olive-pale) !important;
}

.delivery-address-card .btn:active,
.delivery-address-card button:active {
  transform: scale(0.96);
}

/* Пустое состояние адреса */
.address-empty-state {
  text-align: center;
  padding: 24px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.address-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.address-empty-state h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
}

.address-empty-state p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 16px 0;
}

/* 4) Прогресс-бар "Добавьте ещё — доставка дешевле" */
.delivery-savings-bar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  margin: 12px 0;
}

.delivery-savings-bar h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px 0;
}

.delivery-progress-container {
  position: relative;
  height: 8px;
  background: #F1F1F1;
  border-radius: 9999px;
  margin-bottom: 12px;
  overflow: visible;
}

.delivery-progress-bar {
  height: 100%;
  background: var(--olive);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.delivery-milestones {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: -4px;
}

.delivery-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.milestone-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #EDEDED;
  background: var(--white);
  position: relative;
  z-index: 2;
  margin-bottom: 6px;
}

.milestone-dot.active {
  background: var(--olive);
  border-color: var(--olive);
}

.milestone-dot.active::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--white);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.milestone-label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  background: var(--white);
  border: 1px solid #EDEDED;
  padding: 4px 8px;
  border-radius: 9999px;
}

.milestone-label.active {
  color: var(--olive);
  font-weight: 600;
  border-color: var(--olive);
}

/* 5) Комментарий к заказу */
#orderCommentBlock {
  margin: 16px 0 !important;
  padding: 12px !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

#orderCommentBlock label {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--text) !important;
  font-weight: 600 !important;
}

#orderCommentBlock > div:first-of-type {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  position: relative;
}

#orderCommentInput {
  width: 100%;
  min-height: 110px !important;
  height: 110px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px !important;
  font-family: inherit;
  resize: vertical;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

#orderCommentInput:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(106,122,58,0.12);
}

#orderCommentBlock > div > div:last-child {
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  margin: 0 !important;
  padding: 4px 8px;
  background: var(--white);
  border-radius: 4px;
}

/* 6) Промокод (обновление) */
.promo-section {
  margin: 16px 0 !important;
  padding: 12px !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.promo-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px 0;
}

.promo-input-group {
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.promo-input {
  flex: 1;
  height: 44px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  background: var(--white) !important;
  min-height: 44px;
}

.promo-input:focus {
  outline: none;
  border-color: var(--olive) !important;
  box-shadow: 0 0 0 3px rgba(106,122,58,0.12);
}

.promo-input-group .btn,
.promo-input-group button {
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 9999px !important;
  background: var(--olive) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-size: 14px !important;
  min-height: 44px;
  min-width: 44px;
}

.promo-input-group .btn:hover,
.promo-input-group button:hover {
  background: var(--olive-hover) !important;
}

.promo-input-group .btn:active,
.promo-input-group button:active {
  transform: scale(0.96);
}

.promo-applied {
  background: var(--olive-pale);
  padding: 12px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.promo-applied span {
  font-size: 14px;
  color: var(--text);
}

.promo-applied strong {
  color: var(--olive);
  font-weight: 700;
}

/* Адаптив для узких экранов */
@media (max-width: 360px) {
  .promo-input-group {
    flex-direction: column;
    gap: 8px;
  }
  
  .promo-input,
  .promo-input-group .btn,
  .promo-input-group button {
    width: 100%;
  }
}

/* 7) Итоги и "Оформить заказ" - обычный блок в потоке */
.cart-summary {
  position: static;
  padding: 0;
  margin: 16px 0 0 0;
  background: transparent;
}

.checkout-bar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text);
}

.cart-summary__row:last-of-type {
  margin-bottom: 12px;
}

.cart-summary__subsidy {
  color: var(--olive);
  font-weight: 600;
}

.cart-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.cart-summary .btn-primary,
.cart-summary #checkoutBtn {
  width: 100% !important;
  height: 56px !important;
  border-radius: 9999px !important;
  background: var(--olive) !important;
  color: var(--white) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(106,122,58,0.3);
}

.cart-summary .btn-primary:hover,
.cart-summary #checkoutBtn:hover {
  background: var(--olive-hover) !important;
  box-shadow: 0 6px 16px rgba(106,122,58,0.4);
}

.cart-summary .btn-primary:active,
.cart-summary #checkoutBtn:active {
  transform: scale(0.98);
}

/* Адаптив для очень узких экранов - итого над кнопкой */
@media (max-width: 360px) {
  .checkout-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .cart-summary__total {
    justify-content: center;
    border-top: none;
    padding-top: 0;
    margin-bottom: 0;
  }
}

/* 8) Карточка товара в корзине (обновление) */
.cart-items {
  margin-bottom: 16px;
}

.cart-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.cart-item__image {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  margin-top: 4px;
}

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

.cart-item__info {
  flex: 1;
  min-width: 0;
}

.cart-item__info h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px 0;
  line-height: 1.4;
  /* Естественный перенос - только если не помещается */
}

.cart-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.cart-item__size-badge {
  display: inline-block;
  background: var(--olive-pale);
  color: var(--olive);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.cart-item__size {
  display: inline-block;
  font-size: 12px;
  color: var(--olive);
  background: var(--olive-pale);
  padding: 3px 10px;
  border-radius: 12px;
  margin: 4px 0 2px 0;
  font-weight: 500;
}

.cart-item__temperature {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  margin: 2px 0 2px 6px;
  font-weight: 500;
}

/* Холодный - синий */
.cart-item__temperature--cold {
  color: #2563eb;
  background: #dbeafe;
}

/* Тёплый/Горячий - нежно-красный */
.cart-item__temperature--warm {
  color: #dc2626;
  background: #fee2e2;
}

.cart-item__options {
  font-size: 12px;
  color: var(--olive);
  margin: 2px 0 8px 0;
  line-height: 1.4;
}

.cart-item__price {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.cart-item__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-item__controls button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--olive);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.cart-item__controls button:hover {
  background: var(--olive-pale);
  border-color: var(--olive);
}

.cart-item__controls button:active {
  transform: scale(0.92);
}

.cart-item__qty {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  min-width: 24px;
  text-align: center;
}

.cart-item__total {
  font-size: 16px;
  font-weight: 700;
  color: var(--olive);
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
  align-self: center; /* Выравниваем по центру */
}

/* Пустая корзина */
.empty-cart {
  text-align: center;
  padding: 48px 24px;
}

.empty-cart-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-cart h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
}

.empty-cart p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 24px 0;
}

/* Таббар остаётся закреплённым внизу */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Отступ снизу для контента корзины, чтобы не уходило под табар */
#cartContent {
  padding-bottom: calc(64px + 8px + env(safe-area-inset-bottom, 0px));
}

/* Контейнер на странице корзины - убираем лишние отступы сверху */
body:has(#cartContent) .container {
  padding-top: 16px;
}

/* ===================================================================
   MM-TOPBAR - Финальный фикс аватара и «i» (v2025-10-24e)
   Максимальная специфичность через !important + aspect-ratio для идеального круга
   =================================================================== */

/* Контейнер справа — как есть */
#mm-topbar{ display:flex; align-items:center; gap:12px; }

/* 1) Кнопки-капсулы: стабильные размеры, без скачков */
#infoIcon.mm-icon-btn,
#authIcon.mm-avatar-btn{
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--olive-14) !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;                 /* убираем любые scale */
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

/* 2) Иконка "i" — фиксированный размер и цвет */
#infoIcon .mm-i{
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  color: var(--olive) !important;             /* svg с currentColor */
}

/* 3) Аватар — ровный круг, без белого канта и растяжения */
#authIcon .mm-avatar{
  box-sizing: border-box !important;
  width: 36px !important;
  aspect-ratio: 1 / 1 !important;             /* защита от овала */
  height: auto !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.06) !important;  /* мягкая тень, без белого кольца */
  background: radial-gradient(120% 120% at 20% 0%, #FF7A7A 0%, #FF9966 60%, #FFA9A9 100%) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #fff !important;
}

/* если внутри фото */
#authIcon .mm-avatar img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* 4) Отключаем hover-эффекты на тач-устройствах */
@media (hover:none) and (pointer:coarse){
  #infoIcon.mm-icon-btn:hover,
  #authIcon.mm-avatar-btn:hover{
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
    background: #fff !important;
  }
  #infoIcon.mm-icon-btn:active,
  #authIcon.mm-avatar-btn:active{
    transform: scale(.98) !important;         /* только лёгкий press */
  }
}

/* аккуратный hover только на десктопе */
@media (hover:hover) and (pointer:fine){
  #infoIcon.mm-icon-btn:hover{ box-shadow:0 4px 14px rgba(0,0,0,.10) !important; }
  #authIcon.mm-avatar-btn:hover .mm-avatar{ box-shadow: 0 6px 16px rgba(0,0,0,.12) !important; }
}

/* 5) Снимаем сторонние псевдоэлементы/рамки, если были */
#infoIcon.mm-icon-btn::before,
#infoIcon.mm-icon-btn::after,
#authIcon.mm-avatar-btn::before,
#authIcon.mm-avatar-btn::after{ content:none !important; }

/* Фокус для доступности */
#infoIcon.mm-icon-btn:focus-visible,
#authIcon.mm-avatar-btn:focus-visible {
  outline: 2px solid var(--olive-12) !important;
  outline-offset: 2px;
}

/* Увеличить и выровнять элементы в топбаре */
#infoIcon.mm-icon-btn { width: 32px; height: 32px; }        /* компактная кнопка информации */
#authIcon.mm-avatar-btn { width: 48px; height: 48px; }      /* тач-таргет */

#infoIcon .mm-i { 
  width: 26px !important;                                    /* иконка "i" пропорциональна кнопке */
  height: 26px !important; 
  stroke-width: 1.6;                                         /* тонкие изящные линии */
}

#authIcon .mm-avatar {
  width: 42px; height: 42px;                                 /* круг аватара больше */
  aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;
}

/* === Topbar: логичные размеры без лишних отступов ==================== */

/* 1) Кнопка информации — компактная 28×28, иконка заполняет всю кнопку */
#infoIcon.mm-icon-btn{
  width:28px !important;
  height:28px !important;
  padding:0 !important;
  border:none !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  box-shadow:0 0 0 1px rgba(106,122,58,.18),                /* оливковый кант */
             0 2px 8px rgba(0,0,0,.06) !important;         /* мягкая тень */
}

#infoIcon .mm-i{
  width:28px !important;                                    /* заполняет всю кнопку */
  height:28px !important;
  color:#6A7A3A !important;                                 /* оливковая "i" */
  display:block !important;
}

/* 2) Кнопка аватара — 40×40, аватар 36×36 с отступом */
#authIcon.mm-avatar-btn{
  width:40px !important;
  height:40px !important;
  padding:0 !important;
  border:none !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;                               /* белый фон кнопки */
  box-shadow:0 0 0 1px rgba(106,122,58,.18),                /* оливковый кант */
             0 2px 8px rgba(0,0,0,.06) !important;         /* мягкая тень */
}

#authIcon .mm-avatar{
  width:36px !important;                                    /* внутри кнопки с отступом */
  height:36px !important;
  line-height:36px !important;
  border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  overflow:hidden !important; border:none !important; outline:none !important;
  box-shadow:0 0 0 2px rgba(106,122,58,.35) !important;    /* более заметная оливковая окантовка */
  background: radial-gradient(120% 120% at 20% 0%,
              #FF7A7A 0%, #FF9966 60%, #FFA9A9 100%) !important;
  font-weight:800 !important; font-size:13px !important; color:#fff !important;
}

/* если аватар с фото */
#authIcon .mm-avatar img{
  width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important;
}

/* ===================== Info sheet (Информация) ===================== */
.mm-info{
  --brand:#7FA34A; --brand-600:#68873D; --paper:#F8FAF7; --header-tint:#F5F9EF; --content-tint:#F2F7EB; --chip-fill:#EFF5E6; --border-olive:#DCE8CD; --divider:#E9EFD8; --text:#111111; --muted:#6B7280;
}
.mm-info.sheet{ background:var(--paper) !important; color-scheme: light; }
.mm-info, .mm-info *{ color-scheme: light; }
.mm-info .info-wrap{ overflow-y:auto; flex:1; padding:24px 0; background:var(--paper) !important; }
.mm-info .info-card{
  margin: 0 16px 16px; padding:16px; background:#FFFFFF !important; border:1px solid var(--border-olive); border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,0.05);
}
.mm-info .info-title{ font-size:18px; font-weight:600; margin:0 0 10px; color:#111; }
.mm-info .info-text{ font-size:16px; line-height:1.5; color:var(--text); margin:0 0 10px; }
.mm-info .info-bullets{ margin:10px 0 0; padding-left:18px; color:var(--text); }
.mm-info .info-bullets li{ margin:6px 0; list-style: disc; }
.mm-info .info-socials{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.mm-info .chip{ display:inline-flex; align-items:center; height:34px; padding:0 12px; border:1px solid var(--border-olive) !important; border-radius:999px; background:var(--chip-fill) !important; color:var(--brand-600) !important; font-weight:500; cursor:pointer; }
.mm-info .chip.link{ text-decoration:none; }
.mm-info .chip:hover{ background:var(--chip-fill) !important; }
.mm-info .info-chips{ position:sticky; top:0; background:var(--paper) !important; padding:8px 16px; display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); }

.mm-info .accordion{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.mm-info .acc-item{ background:#FFFFFF !important; border:1px solid var(--border-olive); border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.05); }
.mm-info .acc-header{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--header-tint) !important; border:none; cursor:pointer; text-align:left; min-height:48px; }
.mm-info .acc-header:focus{ outline:3px solid rgba(127,163,74,0.3); border-radius:14px; }
.mm-info .acc-title{ font-size:18px; font-weight:600; color:var(--text); display:flex; gap:8px; align-items:center; }
.mm-info .acc-icon{ color:rgba(127,163,74,.8); display:inline-flex; }
.mm-info .acc-chevron{ color:var(--brand-600); transition:transform .15s ease; font-size:18px; }
.mm-info .acc-header[aria-expanded="true"] .acc-chevron{ transform:rotate(90deg); }
.mm-info .acc-body{ background:var(--content-tint) !important; border-top:1px solid var(--divider); }
.mm-info .acc-body-inner{ padding:14px 16px; font-size:15px; line-height:1.6; color:#111; }
.mm-info .acc-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.mm-info .btn-outline{ display:inline-flex; align-items:center; height:36px; padding:0 12px; border:1px solid var(--border-olive) !important; color:#68873D !important; background:#EFF5E6 !important; border-radius:999px; text-decoration:none; }
.mm-info .btn-outline:hover{ background:#EFF5E6 !important; }
.mm-info .kv-list{ display:grid; grid-template-columns:1fr; gap:6px; }
.mm-info .info-updated{ margin:16px; background:#F6FAF1; color:var(--muted); font-size:12.5px; padding:10px 12px; border-radius:10px; }

/* hidden small overlay for diagnostics */
.mm-info .info-debug{
  position: fixed; left: 12px; bottom: 12px;
  background: #000; color: #fff;
  font: 12px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: 8px 10px; border-radius: 8px; opacity: .85; z-index: 9999;
  max-width: calc(100% - 24px);
  white-space: pre-wrap;
}

/* Rounded header bar only for Info sheet */
.mm-info .sheet__bar{
  border-radius: 14px;
  margin: 6px 8px 8px;
  background: #FFFFFF !important;
}

@media (min-width: 560px){
  .kv-list{ grid-template-columns: 1fr 1fr; }
}

/* Slight iOS Display-P3 correction */
@media (color-gamut: p3){
  .mm-info{ --header-tint:#EEF4E6; --content-tint:#EDF2E4; }
}

/* ========================================
   Баннер авторизации для гостей (Olive Tint)
   ======================================== */

:root {
  --brand: #7FA34A;
  --brand-600: #68873D;
  --tint: #FBFDF7;
  --border-olive: #DCE8CD;
  --text: #111111;
  --muted: #6B7280;
}

.auth-banner {
  position: relative;
  margin: 12px 0;
  padding: 13px 14px;
  min-height: 52px;
  background: var(--tint);
  border: 1px solid var(--border-olive);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
  
  /* Fade-in анимация при первом появлении */
  animation: authBannerFadeIn 180ms ease-out;
}

.auth-banner.hidden {
  display: none !important;
}

@keyframes authBannerFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Левая оливковая вертикальная лента-акцент (4px) */
.auth-banner__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand);
  border-radius: 14px 0 0 14px;
  transition: background 0.15s ease;
}

/* Контент баннера */
.auth-banner__content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 8px; /* отступ от левой ленты */
}

/* Иконка user+clock в чипе с подложкой */
.auth-banner__icon-chip {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(127, 163, 74, 0.08); /* ~10% оливки */
  border: 1px solid var(--border-olive);
  border-radius: 10px;
  color: var(--brand);
  transition: all 0.15s ease;
}

.auth-banner__icon-chip svg {
  width: 28px;
  height: 28px;
}

/* Текст */
.auth-banner__text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Чеврон */
.auth-banner__chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.auth-banner__chevron svg {
  width: 18px;
  height: 18px;
}

/* Спиннер (показывается при загрузке) */
.auth-banner__spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: authBannerSpin 0.8s linear infinite;
}

@keyframes authBannerSpin {
  to {
    transform: rotate(360deg);
  }
}

.auth-banner__spinner svg {
  width: 16px;
  height: 16px;
}

/* Hover состояние */
.auth-banner:hover {
  border-color: var(--brand-600);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: scale(0.99);
}

.auth-banner:hover .auth-banner__accent {
  background: var(--brand-600);
}

.auth-banner:hover .auth-banner__icon-chip {
  background: rgba(104, 135, 61, 0.12);
  border-color: var(--brand-600);
}

.auth-banner:hover .auth-banner__chevron {
  transform: translateX(2px);
}

/* Active состояние */
.auth-banner:active {
  transform: scale(0.98);
}

/* Focus состояние (доступность) */
.auth-banner:focus {
  outline: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 
              0 0 0 3px rgba(127, 163, 74, 0.25);
}

.auth-banner:focus-visible {
  outline: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 
              0 0 0 3px rgba(127, 163, 74, 0.35);
}

/* Адаптивность для узких экранов */
@media (max-width: 360px) {
  .auth-banner {
    padding: 12px;
    min-height: 48px;
  }
  
  .auth-banner__content {
    gap: 10px;
  }
  
  .auth-banner__text {
    font-size: 14px;
  }
  
  .auth-banner__icon-chip {
    width: 32px;
    height: 32px;
  }
  
  .auth-banner__icon-chip svg {
    width: 24px;
    height: 24px;
  }
}

/* Для очень узких экранов - перенос текста */
@media (max-width: 340px) {
  .auth-banner__text {
    font-size: 14px;
    line-height: 1.4;
  }
}
/* [SCOPE] Бейдж скидки на строке корзины */
.cart-item__discount-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: var(--success-bg, #d4edda);
  color: var(--success-text, #155724);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

/* [SCOPE] Кнопка для перехода к товарам (если ещё нет .btn-olive) */
.btn-olive {
  background: #4a5d3e !important;
  color: #ffffff !important;
  border: none;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.btn-olive:hover {
  background: #3d4f34 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: scale(1.02);
}

.btn-sm {
  font-size: 14px;
  padding: 6px 12px;
}

/* ===================== [promo-modal center fix] ===================== */
/* Центрированная модалка акций - НЕ ИСПОЛЬЗУЕТ bottom-sheet классы */

/* Оверлей поверх страницы */
.mm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain;
}

/* Корпус модалки: по центру */
.mm-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  max-width: min(640px, 92vw);
  max-height: calc(100dvh - 32px);
  width: 92vw;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  transition: opacity 0.15s ease, transform 0.15s ease;
  overflow: hidden;
  /* чтобы внутренний скролл был в контенте */
}

/* Внутренний скролл при высоком контенте */
.mm-modal__body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  /* без ограничения высоты - контент внутри сам определит */
  flex: 1;
  min-height: 0; /* для корректного flex скролла */
}

/* Состояние открыто */
.mm-modal.is-open,
.mm-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mm-modal.is-open {
  transform: translate(-50%, -50%) scale(1);
}

/* На случай TWA/iOS — отключение "подпрыгиваний" */
html.modal-open,
body.modal-open {
  overscroll-behavior: contain;
}

/* Если нужны safe-area отступы в TWA/iOS */
.mm-modal {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Кнопка закрытия модалки */
.mm-modal__close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mm-modal__close:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.1);
}

.mm-modal__close:active {
  transform: scale(0.95);
}

/* Изображение акции в модалке */
.mm-modal .promo-details__image {
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-color: var(--olive-pale);
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}

/* Тело модалки с контентом */
.mm-modal .promo-details__body {
  padding: 24px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.mm-modal .promo-details__body h2 {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.mm-modal .promo-details__subtitle {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.5;
}

.mm-modal .promo-details__description {
  margin: 0 0 24px 0;
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}

.mm-modal .promo-details__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mm-modal .promo-code-display {
  text-align: center;
  padding: 12px;
  background: var(--olive-pale);
  border-radius: 12px;
  font-size: 16px;
  color: var(--text);
}

.mm-modal .promo-code-display strong {
  color: var(--olive);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1px;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
  .mm-modal-overlay {
    padding: 16px;
    /* Небольшие отступы для безопасной зоны */
  }

  .mm-modal {
    max-width: 100%;
    width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 16px;
  }

  .mm-modal .promo-details__image {
    height: 200px;
  }

  .mm-modal .promo-details__body {
    padding: 20px;
  }

  .mm-modal .promo-details__body h2 {
    font-size: 22px;
  }
}

/* На iOS с учетом safe-area */
@supports (padding-top: env(safe-area-inset-top)) {
  .mm-modal {
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* Фикс для iOS: 100dvh вместо 100vh */
@supports (height: 100dvh) {
  .mm-modal-overlay {
    height: 100dvh;
  }
}
/* ===================== [END promo-modal center fix] ===================== */

/* ===================== [pickup-time-wheel] ===================== */
/* Блок выбора времени самовывоза - Wheel Picker */

.mm-pickup {
  margin: 16px 0;
  padding: 14px 16px 12px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border, #e0e0e0);
}

.mm-pickup.hidden {
  display: none;
}

.mm-section__title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text, #333);
}

/* Сегмент-контрол: Поскорее | К времени */
.mm-segment {
  display: flex;
  gap: 8px;
  margin: 0 0 10px 0;
  background: transparent;
}

.mm-segment .seg {
  flex: 1;
  height: 48px;
  padding: 0 18px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  min-width: 44px;
}

.mm-segment .seg:not(.is-active) {
  background: var(--white);
  color: var(--olive, #6A7A3A);
  border: 1px solid var(--olive, #6A7A3A);
}

.mm-segment .seg.is-active {
  background: var(--olive, #6A7A3A);
  color: var(--white);
  border: none;
  box-shadow: 0 6px 14px rgba(106, 122, 58, 0.25);
}

.mm-segment .seg:active:not(:disabled) {
  transform: scale(0.98);
}

.mm-segment .seg:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Wheel Picker */
.mm-wheel {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 10px 0 8px 0;
}

.mm-wheel.hidden {
  display: none;
}

/* Колонка (часы или минуты) */
.mm-wheel__col {
  width: 120px;
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none; /* Firefox */
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.mm-wheel__col::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Опция в колонке */
.mm-wheel__col .opt {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.4;
  transition: opacity 0.2s ease, background 0.2s ease;
  user-select: none;
  cursor: pointer;
}

/* Активная (центральная) опция */
.mm-wheel__col .opt.is-active {
  opacity: 1;
  background: var(--olive-pale, #E6ECD9);
  color: var(--olive, #6A7A3A);
  font-weight: 700;
}

/* Отключенная опция (прошедшее время) */
.mm-wheel__col .opt.is-disabled {
  opacity: 0.2;
  pointer-events: none;
  cursor: not-allowed;
}

/* Маска с градиентом сверху/снизу */
.mm-wheel__mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9) 0%,
    transparent 25%,
    transparent 75%,
    rgba(255, 255, 255, 0.9) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Подсветка центральной строки */
.mm-wheel__highlight {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  height: 40px;
  border: 2px solid var(--olive, #6A7A3A);
  border-radius: 8px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
}

/* Подпись выбранного времени */
.mm-summary {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--olive-pale, #E6ECD9);
  border-radius: 8px;
  color: var(--olive, #6A7A3A);
  font-weight: 600;
  text-align: center;
  font-size: 14px;
}

.mm-summary.hidden {
  display: none;
}

/* Подсказка внизу */
.mm-helptext {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted, #999);
  text-align: center;
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {
  .mm-wheel__col {
    width: 100px;
  }
  
  .mm-section__title {
    font-size: 16px;
  }
  
  .mm-segment .seg {
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }
}

/* Для больших экранов - немного шире */
@media (min-width: 768px) {
  .mm-wheel__col {
    width: 140px;
  }
}
/* ===================== [END pickup-time-wheel] ===================== */

/* ===================== PAYMENT MODAL ===================== */
/* Модальное окно оплаты для Mini App */
.payment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.payment-modal-content {
  background: white;
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.payment-modal-icon {
  font-size: 64px;
  margin-bottom: 16px;
  line-height: 1;
}

.payment-modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.payment-modal-text {
  font-size: 14px;
  color: #666;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.payment-modal-btn {
  width: 100%;
  padding: 14px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.payment-modal-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.payment-modal-btn:active {
  transform: scale(0.98);
}
/* ===================== [END PAYMENT MODAL] ===================== */