:root{
  --tg-bg: #f5f5f5;
  --tg-card: #ffffff;
  --tg-text: #1f1f1f;
  --tg-muted: #666;
  --tg-brand1: #0088cc;
  --tg-brand2: #005f99;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 14px;
}

/* Reset & base */
*{ box-sizing: border-box; }
html, body{
  margin: 0;
  padding: 0;
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -ms-overflow-style: none;  /* IE и Edge */
  scrollbar-width: none;     /* Firefox */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; }

.muted{ color: var(--tg-muted); font-size: 13px; }

/* ── Topbar ───────────────────────────────────────── */
.topbar{
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topbar h1{ margin: 0 0 4px; font-size: 20px; }
.iconbtn{
  position: relative;
  border: 0;
  background: #eef4fa;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}
.badge{
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ff4d4f;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
}

/* ── Layout ───────────────────────────────────────── */
.container{ padding: 8px 12px 20px; }
.view.hidden{ display: none; }
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

/* ── Card ─────────────────────────────────────────── */
.card{
  background: var(--tg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
}
.card__imgwrap{ aspect-ratio: 1.2/1; overflow: hidden; }
.card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: 50% 30%; /* тонкая настройка по X Y */
}
.card__body{
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}
.card__title{
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  /* Итоговый min-height: одна строка */
  min-height: calc(1em * 1.3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__subtitle{
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--tg-muted);
  min-height: 32px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__row{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card__price{ font-weight: 700; font-size: 16px; white-space: nowrap; }
.card__row .btn{ white-space: nowrap; flex-shrink: 0; }

/* ── Buttons ──────────────────────────────────────── */
.btn{
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn--primary{
  background: linear-gradient(135deg, var(--tg-brand1), var(--tg-brand2));
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,136,204,.25);
}
.btn--primary:active{ transform: translateY(1px); }

.status{ margin-top: 8px; font-size: 13px; color: var(--tg-muted); }

/* ── Cart ─────────────────────────────────────────── */
/* Базовая сетка */
.cart-list{ display: grid; gap: 14px; margin-top: 12px; } /* укрупнение применено */
.cart-item{
  background: var(--tg-card);
  border-radius: 14px;                /* укрупнение */
  box-shadow: var(--shadow);
  padding: 14px;                      /* укрупнение */
  display: grid;
  grid-template-columns: 86px 1fr auto; /* укрупнение превью */
  gap: 14px;                          /* укрупнение */
  align-items: center;
}
.cart-item img{
  width: 86px; height: 86px;          /* укрупнение превью */
  border-radius: 12px;
  object-fit: cover;
}
.cart-title{
  font-size: 16.5px;                  /* укрупнение */
  line-height: 1.25;
  margin: 0 0 6px;
  font-weight: 700;
}
.cart-sub{
  font-size: 13.5px;                  /* укрупнение */
  line-height: 1.35;
  color: var(--tg-muted);
  margin: 0 0 10px;
}
.cart-price{
  font-weight: 800;                   /* укрупнение */
  font-size: 18px;
  white-space: nowrap;
  margin-bottom: 6px;
}
.qty{
  display: inline-flex;
  align-items: center;
  gap: 10px;                          /* укрупнение */
  background: #eef4fa;
  border-radius: 999px;
  padding: 8px 10px;                  /* укрупнение */
}
.qty b{
  font-size: 16px;                    /* укрупнение */
  font-weight: 600;
  color: var(--tg-text);
  min-width: 18px;                    /* укрупнение */
  text-align: center;
}
.qty button{
  border: 0;
  background: transparent;
  font-size: 20px;                    /* укрупнение */
  cursor: pointer;
}
.remove-btn{
  border: 0;
  background: transparent;
  color: #ff4d4f;
  cursor: pointer;
  font-weight: 700;
  font-size: 14.5px;                  /* укрупнение */
  margin-top: 4px;                    /* укрупнение */
}

.cart-footer{
  position: sticky;
  bottom: 0;
  background: var(--tg-bg);
  padding: 14px 0;                    /* укрупнение */
  margin-top: 14px;                   /* укрупнение */
  border-top: 1px dashed #d8d8d8;
}
.cart-total{ font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.cart-actions{ display: flex; gap: 12px; } /* укрупнение */
.cart-actions .btn{
  padding: 12px 14px;                 /* укрупнение */
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
}

/* ── Checkout form ─────────────────────────────────── */
.form{ display: grid; gap: 12px; margin-top: 8px; }
.field{ display: grid; gap: 6px; }
.field span{
  font-size: 17px;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
.field input{
  border: 1px solid #d8e3ef;
  background: #fff;
  color: var(--tg-text);
  border-radius: 10px;
  padding: 12px;
  outline: none;
}
#nameInput, #phoneInput, #promoInput{
  font-size: 18px;
  padding: 12px 14px;
}

.summary{
  margin-top: 4px;
  padding: 10px;
  background: var(--tg-card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.summary b{ font-size: 15px; }

/* Подсветка скидки */
#promoSummary{ background: #e9f8f1; color: #0a7a3d; font-weight: 600; }
#promoSummary b{ color: #0a7a3d; }

.checkout-actions{ display: flex; gap: 10px; margin-top: 10px; }

/* ── Modal ────────────────────────────────────────── */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.modal.show{ display: flex; }
.modal__dialog{
  width: 100%;
  max-width: 420px;
  max-height: 90vh;                 /* добавлено из обновления */
  background: var(--tg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  position: relative;
  display: flex;                    /* добавлено из обновления */
  flex-direction: column;           /* добавлено из обновления */
}
.modal__close{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: #f1f1f1;
  font-size: 18px;
}
.modal__img{
  width: 100%;
  height: auto;
  max-height: 45vh;
  border-radius: 10px;
  object-fit: contain;
}
.modal__title{ margin: 10px 0 4px; font-size: 18px; }
.modal__price{ font-size: 16px; font-weight: 700; margin-bottom: 6px; white-space: nowrap; }
/* Цвет приведён к общей теме; перенос и прокрутка из обновления */
.modal__desc{
  font-size: 14px;
  color: var(--tg-text);
  line-height: 1.45;
  white-space: pre-line;
  margin: 0;
  padding: 0 0 8px;
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: inherit;
}
.modal__actions{
  display: flex;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: inherit;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Блокировка прокрутки заднего фона при открытой модалке */
body.modal-open{ overflow: hidden; height: 100vh; }

/* ── Промокод ─────────────────────────────────────── */
.promo-row{ display:flex; gap:8px; }
.promo-row input{ flex:1; }
.promo-status{ margin-top:6px; font-size:13px; color: var(--tg-muted); }
.promo-status--ok{ color:#1d7f3f; }
.promo-status--err{ color:#c23b3b; }

/* ── Toast ────────────────────────────────────────── */
.toast{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
  z-index: 2000;
}
.toast.show{ opacity:1; }
@media (prefers-color-scheme: light){ .toast{ background: rgba(20,20,20,.9); } }

/* ── Центрированное уведомление успеха ────────────── */
.pay-success{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.pay-success.show{ opacity: 1; pointer-events: auto; }
.pay-success__box{
  background: #fff; color: #111; max-width: 340px; width: calc(100% - 48px);
  padding: 24px 28px; border-radius: 16px; text-align: center;
  box-shadow: 0 10px 34px rgba(0,0,0,.25);
  animation: psScaleIn .28s ease;
}
.pay-success__icon{ font-size: 52px; margin-bottom: 10px; }
.pay-success__title{ font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.pay-success__text{ font-size: 15px; color: #555; }
@keyframes psScaleIn { from { transform: scale(.92); opacity:.6; } to { transform: scale(1); opacity:1; } }

/* ── Category bar (one row, shrink to fit) ───────────────────────── */
.catbar{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 20px;
  flex-wrap: nowrap;           /* не переносим на новую строку */
}

.catchip{
  flex: 1 1 0;                 /* все кнопки делят ширину поровну и могут сжиматься */
  aspect-ratio: 1 / 1;         /* остаются квадратными */
  max-width: 80px;             /* на больших экранах не раздуваем */
  border-radius: 50%;
  border: none;
  background: #eef4fa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, filter .15s ease, background .15s ease;
}

.chip-icon{
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* Чуть плотнее на очень узких экранах */
@media (max-width: 360px){
  .catbar{ gap: 8px; }
}

/* ── Misc ─────────────────────────────────────────── */
.btn-back{
  border: 0;
  background: #eef4fa;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
}

/* ── Checkout fixed button ────────────────────────── */
.checkout-fixed{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 16px;
  background: var(--tg-bg);
  box-shadow: 0 -2px 10px rgba(0,0,0,.08);
  z-index: 1100;
}
.checkout-fixed .btn--primary{
  width: 100%;
  font-size: 18px;     /* итоговый вариант (крупнее) */
  font-weight: 800;
  padding: 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.checkout-fixed .btn--primary span{
  font-weight: 900;
  font-size: 20px;
}

/* ── Dark mode ─────────────────────────────────────── */
@media (prefers-color-scheme: dark){
  :root{
    --tg-bg: #0f0f10;
    --tg-card: #1b1c1f;
    --tg-text: #f1f1f1;
    --tg-muted: #a7a7a7;
    --shadow: 0 10px 26px rgba(0,0,0,.6);
  }

  .iconbtn{ background: #24262b; color: #e9e9e9; }
  .btn--primary{ box-shadow: 0 8px 18px rgba(0,136,204,.4); }
  .field input{
    background: #111216;
    border-color: rgba(255,255,255,0.10);
  }
  .qty{ background: #24262b; }
  .qty b{ color: #fff; }
  #promoSummary{ background: #193d2d; color: #6ff7b4; }
  #promoSummary b{ color: #6ff7b4; }

  /* Видимые края и чуть светлее фон карточек */
  .card,
  .cart-item,
  .summary,
  .modal__dialog{
    border: 1px solid rgba(255,255,255,0.06);
    background-clip: padding-box;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 10px 26px rgba(0,0,0,0.60);
  }
  .card{ background-color: #222428; }
  .modal__dialog{
    background-color: #1f2125;
    border-color: rgba(255,255,255,0.08);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.04) inset,
      0 18px 40px rgba(0,0,0,0.65);
  }
  .cart-footer{ border-top: 1px dashed rgba(255,255,255,0.12); }
}

/* ── Responsive tweaks ─────────────────────────────── */
@media (max-width: 420px){
  .cart-item{
    grid-template-columns: 86px 1fr auto;
    align-items: start;
  }
  .cart-price{ font-size: 17px; }
}
/* Всегда показываем один селект, без мобильных дублей */
.filterbar{
  display: block;
  margin: -4px 0 14px;
}

/* Селект тянется на всю ширину контейнера */
#subcatSelect{
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  appearance: none;
  border: 1px solid #d8e3ef;
  background: #fff;
  color: var(--tg-text);
  border-radius: 10px;
  padding: 12px 14px;        /* чуть больше «тап-цель» */
  font-size: 16px;           /* ≥16px, чтобы iOS не зумил */
  line-height: 1.2;
  min-height: 44px;          /* комфортная высота на мобильном */
  outline: none;
}

/* Тёмная тема */
@media (prefers-color-scheme: dark){
  #subcatSelect{
    background: #111216;
    border-color: rgba(255,255,255,0.10);
    color: var(--tg-text);
  }
}

/* Мобильные улучшения */
@media (max-width: 768px){
  .filterbar{ margin: 6px 0 12px; }

  /* (опционально) сделать селект липким под панелью категорий */
  /* .filterbar{ position: sticky; top: 0; z-index: 10; background: inherit; padding-top: 4px; } */
}
/* ── Custom dropdown ───────────────────────────── */
.dropdown{ position: relative; width: 100%; }
.dropdown__toggle{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #d8e3ef;
  background: #fff; color: var(--tg-text);
  border-radius: 10px; font-size: 16px; line-height: 1.2;
  cursor: pointer;
}
.dropdown__chev{ pointer-events: none; }
.dropdown__menu{
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--tg-card);
  border: 1px solid #d8e3ef;
  border-radius: 10px;
  box-shadow: var(--shadow);
  list-style: none; margin: 0; padding: 6px;
  max-height: 60vh; overflow: auto; display: none; z-index: 1200;
}
.dropdown.open .dropdown__menu{ display: block; }
.dropdown__menu li{
  padding: 10px 10px; border-radius: 8px; cursor: pointer; font-size: 15px;
}
.dropdown__menu li:hover{ background: #eef4fa; }
.dropdown__menu li.active{ background: #0874FF; font-weight: 700; color: #fff; }

@media (prefers-color-scheme: dark){
  .dropdown__toggle{
    background: #111216; border-color: rgba(255,255,255,0.10); color: var(--tg-text);
  }
  .dropdown__menu{
    background: #1b1c1f; border-color: rgba(255,255,255,0.10);
  }
  .dropdown__menu li:hover{ background: #24262b; }
  .dropdown__menu li.active{ background: #0d47a1; color: #fff; }
}

/* старый #subcatSelect больше не используется; можно удалить его стили */

/* ── Force light on Telegram light theme (перебивает media:dark) ── */
html.tg-force-light {
  --tg-bg: #f5f5f5;
  --tg-card: #ffffff;
  --tg-text: #1f1f1f;
  --tg-muted: #666;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Перебиваем тёмные правила, которые задавались не через переменные */
html.tg-force-light .card,
html.tg-force-light .cart-item,
html.tg-force-light .summary,
html.tg-force-light .modal__dialog {
  background-color: var(--tg-card) !important;
  border-color: #e6e9ef !important;
  box-shadow: var(--shadow) !important;
}

html.tg-force-light .modal__dialog {
  background: var(--tg-card) !important;
}

html.tg-force-light .cart-footer {
  border-top: 1px dashed #d8d8d8 !important;
}

html.tg-force-light .field input {
  background: #fff !important;
  border-color: #d8e3ef !important;
  color: var(--tg-text) !important;
}

html.tg-force-light .qty {
  background: #eef4fa !important;
}

html.tg-force-light #promoSummary {
  background: #e9f8f1 !important;
  color: #0a7a3d !important;
}
html.tg-force-light #promoSummary b {
  color: #0a7a3d !important;
}

html.tg-force-light .dropdown__toggle {
  background: #fff !important;
  border-color: #d8e3ef !important;
  color: var(--tg-text) !important;
}
html.tg-force-light .dropdown__menu {
  background: #fff !important;
  border-color: #d8e3ef !important;
}
html.tg-force-light .dropdown__menu li:hover {
  background: #eef4fa !important;
}
html.tg-force-light .dropdown__menu li.active {
  background: #0874FF !important;
  color: #fff !important;
}
html.tg-force-light .qty b {
  color: #1f1f1f !important; /* чёрный текст */
}
/* Тёмная тема для окна "Спасибо за заказ!" */
@media (prefers-color-scheme: dark){
  .pay-success__box{
    background: #1f2125;
    color: #f1f1f1;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 40px rgba(0,0,0,0.65);
  }
  .pay-success__text{ color: #c9c9c9; }
}

/* Если вы форсируете светлую через html.tg-force-light — вернём светлый стиль */
html.tg-force-light .pay-success__box{
  background: #fff;
  color: #111;
  border: 1px solid #e6e9ef;
  box-shadow: var(--shadow);
}
html.tg-force-light .pay-success__text{ color: #555; }

/* Цена и "Удалить" строго друг под другом с общим правым краем (desktop + mobile) */
.cart-item > div:last-child{
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* тянем на всю ширину колонки */
}

.cart-item .cart-price,
.cart-item .remove-btn{
  display: block;
  width: 100%;
  text-align: right;      /* общий правый край */
}

.cart-item .cart-price{ margin: 0 0 4px 0; }
.cart-item .remove-btn{ margin: 0; }
/* Единый размер превью корзины через переменную */
:root{ --cart-thumb: 96px; }              /* выбери 86px или 96px как нужно */
.cart-item{
  grid-template-columns: var(--cart-thumb) 1fr auto;
  align-items: center;                     /* центр по вертикали для всех колонок */
}
.cart-item img{
  width: var(--cart-thumb);
  height: var(--cart-thumb);
}

/* На очень узких экранах можно оставить тот же размер, чтобы не "съезжало" */
@media (max-width: 420px){
  :root{ --cart-thumb: 96px; }            /* хочешь — поставь 86px, если тесно */
  .cart-item{ align-items: center; }      /* не start, иначе число кажется ниже */
}

/* Средняя колонка может сжиматься и не толкает правую */
.cart-item > div:nth-child(2){ min-width: 0; }
/* Центрируем цену и "Удалить" в правой колонке на мобиле */
@media (max-width: 420px){
  /* средняя колонка может сжиматься и не толкает правую */
  .cart-item > div:nth-child(2){ min-width: 0; }

  /* правая колонка — вертикальная и по центру */
  .cart-item > div:last-child{
    display: flex;
    flex-direction: column;
    align-items: center !important;   /* ключ: центр по горизонтали */
    justify-content: center;
    text-align: center;
  }

  /* сами элементы — без растягивания на всю ширину и без right-выравнивания */
  .cart-item .cart-price,
  .cart-item .remove-btn{
    width: auto !important;
    text-align: center !important;
    align-self: center !important;
    margin: 0;
  }

  /* немного страховки: выделим колонку фикс. минимумом */
  .cart-item{
    grid-template-columns: var(--cart-thumb, 86px) 1fr minmax(88px, auto);
  }
}
/* === Compact transparent AppBar === */
.appbar {
  padding: 0 8px;
}
.appbar__title{
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appbar__btn{
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 40px; height: 36px; border-radius: 10px; font-size: 20px; line-height: 1;
}
.appbar__btn:active{ transform: translateY(1px); }

/* тёмная тема: более тёмное стекло и светлая линия */
@media (prefers-color-scheme: dark){
  .appbar{
    background: rgba(0,0,0,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
}

/* === Три точки: меню === */
.appmenu{
  position: absolute;
  top: calc(100% + 6px);
  right: 8px;
  background: var(--tg-card);
  border: 1px solid #d8e3ef;
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 220px;
  padding: 6px;
}
.appmenu[hidden]{ display: none; }
.appmenu__item{
  width: 100%;
  display: block;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  font-size: 15px;
}
.appmenu__item:hover{ background: #eef4fa; }

@media (prefers-color-scheme: dark){
  .appmenu{
    background: #1b1c1f;
    border-color: rgba(255,255,255,0.10);
  }
  .appmenu__item:hover{ background: #24262b; }
}
/* Только мобильные клиенты Telegram */
html.is-mobile #viewProducts { padding-top: 5px; }  /* Отступ Главная */
html.is-mobile #viewCheckout { padding-top: 65px; }  /* Отступ Оплата  */
html.is-mobile #viewCart     { padding-top: 65px; }  /* Отступ Корзина */
html.is-mobile #cartList     { padding-top: 12px; }  /* Отступ у карточек корзины */
html.is-mobile #viewPartner { padding-top: 60px; }  /* Отступ Партнёрская программа */
html.is-mobile .modal {
  top: 45px;                      /* смещаем вниз */
  height: calc(80% - 59px);      /* уменьшаем высоту */
}
html.is-mobile .modal__img {
  max-height: 30vh;
}
html.is-mobile .modal {
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--tabbar-h)); /* короче */
  bottom: var(--tabbar-h);             /* поднимаем над меню */
}
#viewPartner .pp-title    { text-align: center; margin: 0 0 12px; }
#viewPartner .pp-subtitle { text-align: center; margin: 20px auto 8px; max-width: 90%; }
/* ===== Нижнее меню (tabbar) ===== */
:root{ --tabbar-h: 60px; }
.tabbar{
  position: fixed; left:0; right:0; bottom:0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--tg-card);
  border-top: 1px solid #d8e3ef;
  box-shadow: 0 -6px 18px rgba(0,0,0,.08);
  z-index: 1050; /* ниже checkout-fixed (1100), выше контента и FAB */
}
.tabbar__btn{
  position: relative;
  -webkit-tap-highlight-color: transparent;
  border:0; background:transparent; cursor:pointer;
  padding: 8px 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color: var(--tg-text); font-weight:700;
}
.tabbar__icon{
  width: 22px;
  height: 22px;
  display: block;
}
.tabbar__label{ font-style:normal; font-size:12px; opacity:.85; }
.tabbar__btn.is-active .tabbar__label{ opacity:1; }
.tabbar__badge{ position:absolute; top:6px; right:calc(50% - 20px); }
.tabbar__btn.is-active { color: var(--tg-accent, #0088cc); }
/* Контент не заезжает под таббар */
.container{ padding-bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom)); }

/* FAB поднимаем над таббаром */
.fab-cart{ bottom: calc(var(--tabbar-h) + 16px); }

/* Тёмная тема грани */
@media (prefers-color-scheme: dark){
  .tabbar{ border-top-color: rgba(255,255,255,.12); box-shadow: 0 -6px 18px rgba(0,0,0,.35); }
}
/* делаем таббар кликабельным поверх других блоков */
.tabbar{
  z-index: 2000 !important;
}

/* кнопка корзины (FAB) остаётся поверх таббара */
.fab-cart{ z-index: 2100 !important; }
.tabbar{ pointer-events: auto; }
/* Кнопка "Перейти к оформлению" в корзине над таббаром */
.checkout-btn{
  position: relative;
  z-index: 2001; /* выше таббара (1500) */
}
.checkout-fixed{
  z-index: 2001 !important;
}
/* 1) Таббар ниже слоём, кнопки оформления выше */
.tabbar{ z-index: 1500 !important; }
.checkout-fixed{ z-index: 3000 !important; }

/* 2) В КОРЗИНЕ поднимем блок кнопки на высоту таббара,
      а на экране оплаты оставим у самого низа */
#viewCart .checkout-fixed{
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px) !important;
}
#viewCheckout .checkout-fixed{
  bottom: 0 !important;
}
.tabbar{
  background: rgba(255,255,255,0.75);     /* светлая тема */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Тёмная тема */
@media (prefers-color-scheme: dark){
  .tabbar{
    background: rgba(20,20,20,0.6);
    border-top-color: rgba(255,255,255,0.12);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.35);
  }
}
.tabbar__btn{
  padding-bottom: 25px; /* увеличиваем нижний отступ */
}
.tabbar__label{
  margin-bottom: 4px; /* сдвигаем текст выше */
}
/* ===== Partner Page ===== */
.pp-title{ margin: 8px 0 12px; font-size:20px; font-weight:800; text-align:left; }

/* Верхний градиентный фон + «плавающая» белая карточка */
.pp-hero{
  background: linear-gradient(180deg, rgba(20,30,45,.95), rgba(20,30,45,0));
  border-radius: 18px;
  padding: 18px 12px 8px;
  margin-bottom: 12px;
  position: relative;
}
html.tg-force-light .pp-hero{
  background: linear-gradient(180deg, rgba(240,244,248,.95), rgba(240,244,248,0));
}
.pp-hero__card{
  background: #fff; color:#111;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  padding: 16px;
  text-align:center;
}
@media (prefers-color-scheme: dark){
  .pp-hero__card{ background:#f9f9fb; color:#111; }
}
.pp-hero__num{ font-size:44px; line-height:1; font-weight:900; }
.pp-hero__sub{ margin-top:6px; opacity:.8; font-size:13px; }

/* Общая карточка */
.pp-card{
  background: var(--tg-card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: 12px;
}

/* Баланс как на макете */
.pp-balance{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom: 12px;
}
.pp-balance__label{ font-size:13px; color:var(--tg-muted); }
.pp-balance__rub{ font-weight:800; font-size:22px; }
.pp-balance__right{ text-align:right; min-width:72px; }
.pp-balance__mini{ font-size:13px; color:var(--tg-text); opacity:.9; }
.pp-balance__mini--usd{ color:#22b573; opacity:1; } /* зелёный $ как на фото */

/* Кнопки */
.btn--outline{
  background: transparent;
  border: 1.5px solid rgba(8,116,255,.4);
  color: var(--tg-text);
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
  width: 100%;
}
.btn--success{
  width:100%;
  border:0;
  background:#27ae60;
  color:#fff;
  padding: 14px 16px;
  border-radius:12px;
  font-weight:800;
  box-shadow: 0 8px 20px rgba(39,174,96,.35);
}
.pp-share{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.pp-share__icon{ width:18px; height:18px; }

/* Ряд с реф-кодом */
.pp-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pp-row__label{ font-weight:700; }
.pp-row__value{ font-weight:800; }
.pp-hint{ margin-top:6px; font-size:12px; color:var(--tg-muted); }

/* Тёмная тема: границы чуть светлее */
@media (prefers-color-scheme: dark){
  .btn--outline{ border-color: rgba(255,255,255,.18); }
}
/* одинаковая ширина для .pp-hero__card и .pp-card */
/* Делаем карточки уже и одинаковыми */
.pp-hero__card,
.pp-card{
  max-width: 90%;     /* например, 90% ширины контейнера */
  margin: 0 auto 14px;
  width: 100%;
  box-sizing: border-box;
}
.pp-share{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  max-width: 90%;      /* как у карточек */
  margin: 0 auto 14px; /* центрируем */
  width: 100%;         /* занимает всю доступную ширину до max */
  border-radius: 16px; /* чтобы форма совпадала с блоками */
}


.pp-share__text{
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* ровно по центру кнопки */
  font-size: 18px;
  font-weight: 700;
}

.pp-share__icon{
  width: 20px;
  height: 20px;
}
.pp-subtitle{
  font-size: 16px;
  font-weight: 700;
  margin: 50px 0 8px;   /* сверху отступ побольше */
  text-align: left;
}
.pp-hint.pp-hint--big{
  font-size: 13px;
  line-height: 1.5;
  color: var(--tg-text);
  margin-bottom: 12px;
}
.pp-hint.pp-hint--big strong{
  color: #27ae60;
  font-weight: 700;
}
.pp-subtitle{
  font-size: 16px;
  font-weight: 700;
  margin: 50px auto 8px;   /* авто-отступы по бокам */
  text-align: left;

  max-width: 90%;   /* такой же как у .pp-card / .pp-share */
  width: 100%;
  box-sizing: border-box;
}
.pp-balance-card{
  min-height: 160px;          /* чтобы блок был выше */
  padding: 20px;
  display: flex;              /* включаем флекс-контейнер */
  flex-direction: column;     /* выстраиваем по вертикали */
  justify-content: space-between; /* распределяем: баланс сверху, кнопка внизу */
}
.catbar button,
.catbar .cat-item {
  outline: none;         /* убираем системный outline */
  -webkit-tap-highlight-color: transparent; /* убираем серый квадратик в мобильных */
  border-radius: 12px;
}
.cart-empty{
  display: flex;
  align-items: center;     /* по вертикали */
  justify-content: center; /* по горизонтали */
  text-align: center;

  font-size: 18px;
  font-weight: 600;
  color: var(--tg-muted);

  min-height: 200px;       /* чтобы не прилипало */
}
#cartList {
  padding-top: 12px;  /* или 16px — отодвигает карточки вниз */
}
.cart-footer {
  border-top: none !important; /* убираем верхнюю границу */
}


/* Тень последней карточки не обрезаем */
#cartList{
  margin-bottom: 12px;     /* место для тени перед футером */
  padding-bottom: 0;
  overflow: visible;       /* на всякий случай, чтобы тень не резалась контейнером */
}

/* Футер без разделительной линии и фона сверху */
.cart-footer{
  border-top: none !important;
  background: transparent;           /* не перекрывать тень */
}
.cart-footer::before,
.cart-footer::after{
  content: none !important;          /* если линия рисовалась псевдоэлементом */
}

/* Чуть отступ у последней карточки — выглядит аккуратнее */
#cartList .cart-item:last-child{
  margin-bottom: 12px;
}
#viewPartner .pp-subtitle {
  text-align: left;          /* выравниваем влево */
  margin: 20px 0 8px 30px;   /* отступ слева такой же, как у .pp-card */
}
:root {
  --tabbar-h: 60px; /* высота нижнего меню, подгони под свой размер */
  --tabbar-gap: 50px;
}

.modal .btn-add-to-cart {
  margin-bottom: calc(var(--tabbar-h) + 20px); /* запас + маленький отступ */
}
.modal {
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--tabbar-h)); /* делаем короче */
  bottom: auto; /* чтобы не упиралась в самый низ */
}
/* Мобилка: уменьшаем окно подробного описания в модалке */
html.is-mobile .modal__desc{
  max-height: 30vh;                 /* было без лимита — теперь компактнее */
  overflow: auto;                    /* внутри можно прокручивать */
  -webkit-overflow-scrolling: touch; /* плавная прокрутка на iOS */
}

/* (опционально) чуть ограничим общий размер диалога,
   чтобы всё вместе не разрасталось на мобилке */
html.is-mobile .modal__dialog{
  max-height: calc(100vh - 59px - var(--tabbar-h, 56px));
}
html.is-mobile .modal {
  top: var(--tgbar-h);
  bottom: var(--tabbar-gap);
  height: calc(100% - var(--tgbar-h) - var(--tabbar-h) + var(--tabbar-gap));
}
.is-mobile .modal {
  background: none;   /* убираем затемнение вокруг */
}

.is-mobile .modal__dialog {
  margin: 0;          /* карточка без внешних отступов */
}
.pp-paidout {
  color: #28a745; /* приятный зелёный, как в Bootstrap */
  font-weight: 600; /* можно чуть жирнее для акцента */
}
/* --- Withdraw Modal --- */
.modal { position: fixed; inset: 0; display: none; }
.modal.is-open { display: block; }
.modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.modal__dialog {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(480px, 92vw); background:var(--tg-card, #fff); color:var(--tg-text, #111);
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:hidden;
}
.modal__header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(0,0,0,.08); }
.modal__title { font-weight:700; font-size:16px; }
.modal__close { background:none; border:0; font-size:20px; line-height:1; cursor:pointer; color:inherit; }
.modal__body { padding:16px 18px; }
.modal__input {
  width:100%; padding:12px 14px; font-size:16px; border:1px solid rgba(0,0,0,.15);
  border-radius:12px; outline:none;
}
.modal__input:focus { border-color:#28a745; }
.modal__hint { margin-top:8px; font-size:13px; opacity:.75; }
.modal__error { margin-top:10px; color:#d33; font-size:13px; }
.modal__footer { padding:16px 18px; border-top:1px solid rgba(0,0,0,.08); display:flex; justify-content:flex-end; gap:10px; }
.modal__btn {
  appearance:none; border:0; padding:10px 14px; border-radius:12px; cursor:pointer;
  background:#28a745; color:white; font-weight:600; font-size:15px;
}
html.is-mobile .modal__dialog { width:92vw; }
/* Кнопка отправки: неактивное состояние */
.modal__btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Большое центрированное уведомление */
#centerNotice {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#centerNotice.is-shown {
  opacity: 1;
  pointer-events: auto;
}
#centerNotice .cn-box {
  background: var(--tg-card, #fff);
  color: var(--tg-text, #111);
  padding: 20px 24px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
/* fallback для старых браузеров, где нет dvh */
@supports not (height: 100dvh){
  .modal__dialog{
    top: 50%;
    max-height: calc(100vh - 32px);
  }
}

/* чутка компактнее на телефонах */
@media (max-width: 600px){
  .modal__dialog{ width: 94vw; }
}

/* (опционально) блокируем прокрутку body, когда модалка открыта */
body.modal-open { overflow: hidden; overscroll-behavior: contain; }
/* Диалог модалки фиксируем к экрану и ограничиваем высоту */
.modal__dialog {
  position: fixed;
  left: 50%;
  top: 50dvh;                        /* динамический центр под клавиатуру */
  transform: translate(-50%, -50%);
  width: 94vw;
  max-width: 390px;
  max-height: calc(100dvh - 32px);   /* не выше видимой области */
  overflow: auto;
  background: var(--tg-card, #fff);
  color: var(--tg-text, #111);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* если dvh не поддерживается */
@supports not (height: 100dvh){
  .modal__dialog { top: 50%; max-height: calc(100vh - 32px); }
}

/* блокируем прокрутку фона, пока модалка открыта */
body.modal-open { overflow: hidden; overscroll-behavior: contain; }
/* Контейнер модалки — поверх всего */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2147483647; /* очень высоко, чтобы перекрыть WebView */
}
.modal.is-open{ display:block; }

/* Бэкдроп — фиксированный, на весь экран */
.modal__backdrop{
  position: fixed;     /* был absolute — на мобиле мог не перекрывать */
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 0;
}

/* Диалог поверх бэкдропа */
.modal__dialog{
  position: fixed;
  left: 50%;
  top: 50dvh;
  transform: translate(-50%, -50%);
  width: 94vw;
  max-width: 360px;              /* компактнее на десктопе */
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: var(--tg-card,#fff);
  color: var(--tg-text,#111);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 1;                    /* выше, чем бэкдроп */
}

/* === MOBILE LIGHT: тёмная окантовка карточек и модалки товара === */
@media (prefers-color-scheme: light){
  html.is-mobile .card{
    border: 1px solid rgba(0,0,0,.18);
    background-clip: padding-box; /* чтобы тень не «съедала» границу */
  }
  html.is-mobile #modal .modal__dialog{
    border: 1px solid rgba(0,0,0,.20);
    background-clip: padding-box;
  }
}

/* Если Telegram форсирует светлую тему (html.tg-force-light), пробьём её тоже */
html.is-mobile.tg-force-light .card{
  border-color: rgba(0,0,0,.18) !important;
}
html.is-mobile.tg-force-light #modal .modal__dialog{
  border-color: rgba(0,0,0,.20) !important;
}
html.tg-force-light .modal {
  background: rgba(0,0,0,.65) !important;
}
/* --- Модалка: поверх всего и на весь экран на мобильном --- */
.modal{
  z-index: 4000; /* выше таббара и checkout-fixed */
}

/* Светлая мобильная тема — чуть темнее фон */
html.tg-force-light .modal{
  background: rgba(0,0,0,.65) !important;
}

/* Мобильный режим: убираем прежние ограничения высоты/отступов */
html.is-mobile .modal{
  inset: 0 !important;          /* top/left/right/bottom = 0 */
  width: 100% !important;
  height: 100vh !important;     /* полный экран */
}

/* Диалог внутри модалки: нормальная центровка и высота */
html.is-mobile .modal__dialog{
  max-height: calc(100vh - 32px) !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Таббар и кнопка — ниже модалки (но порядок между собой сохраняем) */
.tabbar{ z-index: 3000 !important; }
.checkout-fixed{ z-index: 3500 !important; }
/* Оверлей модалки поверх всего */
.modal{ z-index: 4000; }

/* В светлой мобильной теме затемнение темнее */
html.tg-force-light .modal{ background: rgba(0,0,0,.65) !important; }

/* Таббар и кнопка ниже модалки */
.tabbar{ z-index: 1500 !important; }
.checkout-fixed{ z-index: 3000 !important; }
html.is-mobile .modal__dialog {
  margin: auto;               /* центрирует внутри flex */
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important; /* убираем translate(-50%) */
}
/* Центрируем окно "Вывод средств" только на мобильных и только когда оно открыто */
html.is-mobile #withdrawModal.is-open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
}

html.is-mobile #withdrawModal.is-open .modal__dialog {
  margin: auto;
  position: relative;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
html.tg-force-light .tabbar {
  background: #ffffff !important;
  border-top: 1px solid #d8e3ef !important;
  box-shadow: 0 -6px 18px rgba(0,0,0,.08) !important;
}
/* Мобильная версия + светлая тема: делаем фон карточек корзины темнее */
html.is-mobile.tg-force-light .cart-item {
  background: #e9ebef !important;  /* более тёмный серый */
}
/* Мобильная версия + ТЕМНАЯ */
/* Мобильный + тёмная тема: нормальная затемняющая подложка и более светлое окно */
@media (prefers-color-scheme: dark) {
  /* подложка модалки (и товара, и вывода средств) */
  html.is-mobile .modal {
    background: rgba(0,0,0,0.55) !important;   /* затемнение фона за окном */
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;                   /* покрываем весь экран */
  }

  /* если используется отдельный backdrop внутри модалки (есть у withdraw) */
  html.is-mobile #withdrawModal .modal__backdrop {
    background: rgba(0,0,0,0.55) !important;
  }

  /* само «белое» окно — делаем не чёрным, а более светлым графитовым */
  html.is-mobile .modal__dialog {
    background: #23262b !important;            /* светлее, чем #1b1c1f/#000 */
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 40px rgba(0,0,0,0.65);
  }
}
/* Убираем серые «линии» над и под кнопкой */
.checkout-fixed{
  box-shadow: none !important;     /* убирает верхнюю серую полосу */
  background: transparent !important; /* если нужен фон — верни var(--tg-bg) */
}

.checkout-fixed .btn--primary,
#checkoutBtn, #payBtn{
  box-shadow: none !important;     /* убирает тень под кнопкой */
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
/* iOS: на экране оплаты поднимаем кнопку над клавиатурой */
html.is-ios #viewCheckout .checkout-fixed{
  bottom: calc(env(safe-area-inset-bottom) + var(--kb-safe, 0px)) !important;
}

/* чтобы поля формы не прятались за всплывшей кнопкой */
html.is-ios #viewCheckout .form{
  padding-bottom: calc(90px + var(--kb-safe, 0px));
}
html.is-ios .container,
html.is-ios #viewProducts,
html.is-ios #viewCheckout,
html.is-ios #viewCart,
html.is-ios #viewPartner {
  padding-top: max(env(safe-area-inset-top), 20px);
} 
html.is-ios #viewPartner {
  padding-top: calc(env(safe-area-inset-top, 20px) + 60px);
}

/* ── Stories (инстаграм-стиль) ───────────────────── */
.stories{
  display: flex;
  gap: 10px;
  padding: 6px 2px 12px;
  margin: 2px 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stories::-webkit-scrollbar{ display: none; }

.story{
  flex: 0 0 auto;
  width: 86px;                /* компактный, помещаются 4–5 на экран */
  display: grid;
  gap: 6px;
  text-align: center;
  cursor: pointer;
}
.story__thumb{
  position: relative;
  width: 86px; height: 86px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #eef4fa;
  border: 2px solid rgba(0,136,204,.25); /* «ободок» */
}
.story__thumb img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.story__label{
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--tg-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* эффект нажатия */
.story:active .story__thumb{ transform: scale(.98); }

/* тёмная тема – чуть ярче ободок */
@media (prefers-color-scheme: dark){
  .story__thumb{ border-color: rgba(0,136,204,.45); background:#24262b; }
}
/* stories прямо под фильтром */
.filterbar{ margin: -4px 0 6px !important; }  /* уменьшили нижний отступ */
.stories{
  margin: 0 0 8px;   /* сверху 0 — вплотную к фильтру */
  padding: 0 2px;    /* без вертикальных внутренних отступов */
}
/* картинка во весь квадратик */
.story{
  gap: 6px;            /* можно 0, если подпись не нужна */
}

.story__thumb{
  width: 86px;         /* твой размер квадратика */
  height: 86px;
  padding: 0;
  border: 0;           /* убираем рамку, чтобы не было «ореола» */
  background: none;
  border-radius: 18px;
  overflow: hidden;    /* обрезаем лишнее по скруглению */
  position: relative;
}

.story__thumb img{
  display: block;      /* убирает нижний «зазор» у inline-картинок */
  width: 100%;
  height: 100%;
  object-fit: cover;   /* заполнение целиком с обрезкой по краям */
  border-radius: inherit;
}
/* для всех сторис или повесь класс .story--contain на нужные элементы */
.story__thumb{
  display: grid;
  place-items: center;
  padding: 0px;              /* пространство вокруг изображения */
  background: rgba(0,0,0,.04);
  border-radius: 18px;
}

.story__thumb img{
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;       /* вписываем без обрезки и растяжения */
  border-radius: 12px;       /* опционально – внутреннее скругление */
}
.story__thumb img{ transform: none; }
.story{ gap: 0 !important; }
.story__label{ display: none !important; }
:root{
  --story-size: 86px;
  --story-radius: 18px;
  /* мягкая тень вниз */
  --story-shadow: 0 10px 18px rgba(0,0,0,.18);
}

/* Лента сторис: скролл по X, тень может выходить вниз и по бокам */
.stories{
  overflow-x: auto;
  overflow-y: visible;                /* ← важно, чтобы тень не резалась */
  -webkit-overflow-scrolling: touch;
  padding: 4px 10px 10px;             /* справа/слева — чтобы крайние не резались,
                                         снизу — «воздух» под тенью */
  margin: 0 0 8px;
  scrollbar-width: none;
}
.stories::-webkit-scrollbar{ display:none; }

/* Квадратик сториса (full-bleed изображение внутри) */
.story__thumb{
  position: relative;
  width: var(--story-size);
  height: var(--story-size);
  border-radius: var(--story-radius);
  overflow: hidden;                   /* скругление для картинки */
  background: #0f1620;                /* фоновая подложка под PNG */
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

/* картинка на весь квадратик */
.story__thumb img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* темная тема — тень делаем мягче, чтобы не «грязнила» */
@media (prefers-color-scheme: dark){
  :root{ --story-shadow: 0 10px 18px rgba(0,0,0,.14); }
  .story__thumb{ background: #121418; }
}
.stories-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;

  background: no-repeat center/40% url("img/logo-light.png");
  /* no-repeat → не повторяем картинку
     center → по центру блока
     /60% → размер картинки 60% ширины блока */
}

@media (prefers-color-scheme: dark) {
  .stories-brand {
    background-image: url("img/logo-dark.png");
  }
}

/* если ширина экрана больше 768px — скрываем */
@media (min-width: 500px) {
  .stories-brand {
    display: none;
  }
}
.modal__close {
  position: absolute;
  top: 8px;
  right: 10px;

  width: 30px;          /* больше размер */
  height: 30px;
  border-radius: 30%;   /* круг */
  border: none;
  cursor: pointer;

  background: #0088cc;      /* фон красный */
  color: #fff;          /* крестик белый */
  font-size: 22px;      /* больше крестик */
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Меня цвет на кнопке Оплата */
.btn--primary.paid {
  background: linear-gradient(135deg, #003366, #001a33); /* тёмно-синий градиент */
  box-shadow: 0 8px 18px rgba(0, 51, 102, .4);
  color: #fff;
}
/* Отступ между полями в модалке вывода */
.modal__input + .modal__input { margin-top: 10px; }

/* Центрирование ленты историй на десктопе */
@media (min-width: 570px) {
  #storiesBar {
    display: flex;
    justify-content: center; /* центрируем по горизонтали */
    gap: 16px;               /* расстояние между карточками */
    flex-wrap: wrap;         /* если захочешь перенос на новую строку */
  }
}

/* Лента сторис */
.stories {
  display: flex;
  gap: 12px;
  padding: 12px 12px 16px; /* нижний паддинг, чтобы фон не обрезался */
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.stories::-webkit-scrollbar { display: none; }

/* Каждая история */
.story {
  flex: 0 0 auto;
  text-align: center;
  width: 84px;
}

/* Круглая обводка */
.story__thumb {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 6px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #ff7a00, #e52e71, #9b00ff); /* фон как в соцсетях */
}
.story__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Подпись */
.story__label {
  font-size: 12px;
  color: var(--tg-text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Убираем синий квадрат вокруг сторис при нажатии/листании */
.story,
.story__thumb,
.story__thumb img {
  outline: none;
}
.story:focus,
.story__thumb:focus,
.story__thumb img:focus {
  outline: none !important;
  box-shadow: none !important;
}

.modal__desc a {
  color: #2e89ff;
  text-decoration: none;
}
.modal__desc a:hover {
  text-decoration: underline;
}
#ppRefLink {
  border: 1px solid #d8e3ef;
  background: #fff;
  color: var(--tg-text);
  border-radius: 10px;
  padding: 12px;
  font-size: 16px;
  width: 100%;
  cursor: pointer;
}

#ppRefLink:active {
  background: #f1f1f1;
}
/* Тёмная тема */
@media (prefers-color-scheme: dark) {
  #ppRefLink {
    background: var(--tg-card, #2b2b2b);  /* фон как у карточек/кнопок */
    color: var(--tg-text, #fff);          /* текст как у кнопки */
    border: 1px solid rgba(255,255,255,0.15); /* как у outline кнопки */
  }

  #ppRefLink:active {
    background: rgba(255,255,255,0.1); /* такой же эффект при нажатии */
  }
}
.modal__actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

#modalSupport,
#modalAdd {
  flex: 1; /* одинаковая ширина */
  background: linear-gradient(135deg, var(--tg-brand1), var(--tg-brand2));
  color: #fff;
  font-weight: 700;
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,136,204,.25);
  border: none;
  cursor: pointer;
  text-align: center;
}

#modalSupport:active,
#modalAdd:active {
  transform: translateY(1px);
}

/* --- Checkout: убираем горизонтальный скролл и даем элементам сжиматься --- */
html, body, .container, #viewCheckout { max-width: 100%; overflow-x: hidden; }

#viewCheckout .form,
#viewCheckout .field,
#viewCheckout .promo-row { min-width: 0; }

#viewCheckout .field input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Промо-строка — гибкая, инпут сжимается, кнопка фиксированной ширины */
#viewCheckout .promo-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#viewCheckout .promo-row input {
  flex: 1 1 auto;
  min-width: 0;           /* важно для предотвращения «выпирания» вправо */
}

#viewCheckout .promo-row .btn {
  flex: 0 0 auto;
}

/* Любые статусы/сообщения — переносим длинные токены/URL, чтобы не растягивали страницу */
.status, #checkoutStatus, #promoStatus {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Убираем тень у блоков итогов в чекауте */
#viewCheckout .summary{
  box-shadow: none !important;
}
html.is-ios #viewCart { padding-top: 65px !important; }
.payment-hint {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tg-hint, #6b7280);
  background: var(--tg-card, #f6f6f6);
  padding: 10px 12px;
  border-radius: 12px;
}