: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;
}