:root{
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111827);
  --hint: var(--tg-theme-hint-color, #8b95a5);
  /* --muted использовался в 26 местах, но объявлен не был: текст молча
     становился обычным чёрным, а фон — прозрачным. Так пропали точки
     «печатает…»: пузырь был, а точки в нём — без цвета. */
  --muted: var(--hint);
  --card: var(--tg-theme-secondary-bg-color, #f4f5f7);
  --accent: #2563eb;                 /* переопределяется настройками магазина */
  --accent-text: #ffffff;
  --line: rgba(128,140,160,.20);
  --radius: 16px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.05);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Витрина — приложение, а не страница: масштабирование пальцами тут только мешает */
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  height:100vh; height:100dvh; height:var(--app-height, 100dvh);
  max-height:100dvh;
  display:flex;flex-direction:column;overflow:hidden;
}
button{font:inherit;color:inherit}

/* ---------- шапка ---------- */
.announce{
  flex:none;background:var(--accent);color:var(--accent-text);
  font-size:13px;font-weight:600;text-align:center;padding:8px 14px;
}
/* Светлый вид: не перебивает фирменный логотип в шапке */
.announce.light{
  background:var(--card);color:var(--text);font-weight:500;
  border-bottom:1px solid var(--line);
}
.announce[hidden]{display:none}
header{
  flex:none;background:var(--bg);display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);
}
.brand{font-weight:700;font-size:18px;letter-spacing:-.2px;display:flex;align-items:center}
.brand .logo{height:26px;max-width:150px;object-fit:contain;display:block}
.brand-ico{width:30px;height:30px;object-fit:contain;display:block;flex-shrink:0}
/* Кнопки в шапке — одна семья.

   Раньше у каждой были свои размеры: значки 38×38 со скруглением 12,
   язык 36×32 со скруглением 9, кэшбэк — таблетка другой высоты. Рядом
   это читалось как случайный набор, поэтому высота, скругление и отступы
   теперь общие, а различает их только содержимое. */
.head-actions{display:flex;align-items:center;gap:6px}
.icon-btn{
  position:relative;border:0;background:none;font-size:20px;cursor:pointer;
  width:var(--hbtn-w, 38px);height:var(--hbtn, 36px);border-radius:var(--hbtn-r, 11px);
  display:flex;align-items:center;justify-content:center;padding:0;flex:none;
}
.icon-btn:active{background:var(--card)}
.icon-btn svg{width:22px;height:22px;display:block}
.icon-btn.lang{
  font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--hint);
  border:1px solid var(--line);
}
.dot{
  position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;
  background:var(--accent);color:var(--accent-text);border-radius:9px;
  font-size:11px;line-height:18px;font-weight:700;
}
/* Строка поиска прилипает к верху списка. Прячется сдвигом, а не схлопыванием:
   так содержимое не перестраивается и лента не дёргается при прокрутке. */
/* Строка поиска просто уезжает вместе с лентой — никаких вычислений
   во время прокрутки, поэтому движение ровное. */
.searchbar{
  display:flex;gap:9px;align-items:center;
  padding:2px 0 12px;background:var(--bg);
}
/* Плашку не прячем: она маленькая, а её схлопывание заставляло браузер
   пересчитывать всю страницу на каждом кадре прокрутки. */
.searchbar[hidden]{display:none}
/* Кнопка фильтров справа от строки — как в макете */
.search-filters{
  flex:none;width:46px;height:46px;border:0;border-radius:14px;cursor:pointer;
  background:var(--accent);color:var(--accent-text);display:flex;align-items:center;justify-content:center;
  transition:transform .14s ease, opacity .18s ease;
}
.search-filters svg{width:20px;height:20px}
.search-filters:active{transform:scale(.94)}
.search-filters.on{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent)}
.search-clear{
  flex:none;width:30px;height:30px;border:0;border-radius:50%;background:var(--line);
  color:var(--text);font-size:14px;cursor:pointer;line-height:1;
  display:grid;place-items:center;
}
.search-clear:active{transform:scale(.92)}
.search-clear[hidden]{display:none}
.searchbar input{
  flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--text);font:inherit;
}
.searchbar input:focus{outline:2px solid var(--accent);outline-offset:-1px}

/* ---------- чипсы разделов и фильтров ---------- */
.chips{
  flex:none;display:flex;gap:8px;overflow-x:auto;padding:10px 16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{display:none}
.chips:empty{display:none}
#filters{padding-top:0;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* ---------- панель сортировки ---------- */
.toolbar{
  flex:none;display:flex;gap:10px;align-items:center;padding:2px 16px 12px;
  border-bottom:1px solid var(--line);
}
.toolbar[hidden]{display:none}
.seg{
  flex:1;display:flex;background:var(--card);border-radius:12px;padding:3px;gap:2px;
}
.seg button{
  flex:1;padding:8px 6px;border:0;border-radius:9px;background:transparent;
  color:var(--hint);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.seg button.on{
  background:var(--bg);color:var(--text);font-weight:600;
  box-shadow:0 1px 3px rgba(16,24,40,.12);
}
.brand-pick{
  flex:none;padding:9px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--text);font-size:13px;cursor:pointer;
  max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brand-pick.on{border-color:var(--accent);color:var(--accent);font-weight:600}

/* ---------- раздел «Ещё» ---------- */
.info-card{
  background:var(--card);border-radius:14px;padding:15px;margin-bottom:12px;
}
.info-card h4{margin:0 0 10px;font-size:15px}
.info-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.info-row:last-child{border-bottom:0}
.info-row .k{color:var(--hint);flex:none;width:38%}
.info-row .v{flex:1;word-break:break-word}
.info-text{font-size:14px;line-height:1.55;white-space:pre-wrap;color:var(--text)}
.links{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.links a{
  padding:10px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);
  font-size:14px;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:7px;
}
.chips button{
  flex:none;padding:8px 14px;border-radius:999px;border:1px solid transparent;
  background:var(--card);color:var(--text);font-size:14px;cursor:pointer;white-space:nowrap;
}
.chips button.on{background:var(--accent);color:var(--accent-text);font-weight:600}
.chips button .n{opacity:.6;font-size:12px;margin-left:4px}

/* ---------- список товаров ---------- */
main{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom));
  scroll-behavior:auto;
}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;content-visibility:auto;
  contain-intrinsic-size:340px}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.card .imgwrap{position:relative;background:#fff}
.card .ph{width:100%;aspect-ratio:1;object-fit:contain;display:block;padding:8px;background:#fff}
.card .noph{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:30px;background:var(--card)}
.badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px}
.badge{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:3px 7px;border-radius:6px;background:var(--accent);color:var(--accent-text);
}
.badge.sale{background:#dc2626}
.badge.hit{background:#d97706}
/* Кнопки-иконки поверх фотографии: сердечко и «поделиться» */
.fav,.share{
  position:absolute;right:7px;width:34px;height:34px;border:0;border-radius:11px;
  background:rgba(255,255,255,.94);cursor:pointer;display:flex;align-items:center;
  justify-content:center;box-shadow:0 1px 5px rgba(16,24,40,.14);color:#8b95a5;padding:0;
  transition:transform .15s ease, background .18s ease, color .18s ease;
}
.fav{top:7px}
.share{top:48px;color:var(--accent)}
.fav svg,.share svg{width:19px;height:19px;display:block}
.fav.on{background:var(--accent);color:#fff}
.fav:active,.share:active{transform:scale(.88)}
.card .body{padding:10px 11px 11px;display:flex;flex-direction:column;gap:3px;flex:1}
.card .br{font-size:11px;color:var(--hint);text-transform:uppercase;letter-spacing:.3px}
.card .nm{font-size:13.5px;line-height:1.32;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .pr{font-weight:700;font-size:15px;margin-top:auto;padding-top:6px;white-space:nowrap}
.old{display:block;color:var(--hint);text-decoration:line-through;font-weight:400}
.card .old{font-size:12px;margin-top:1px}
/* Кнопка «В корзину»: иконка + подпись */
.add{
  margin:0 11px 11px;padding:10px;border:0;border-radius:12px;
  background:var(--accent);color:var(--accent-text);font-weight:600;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .14s ease, opacity .18s ease;
}
.add svg{width:18px;height:18px;flex:none}
.add:active{transform:scale(.97)}
.add:disabled{background:var(--card);color:var(--hint)}

/* Счётчик появляется на месте кнопки, когда товар уже в корзине */
.stepper{
  margin:0 11px 11px;display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border-radius:12px;overflow:hidden;height:40px;
}
.stepper button{
  width:44px;height:100%;border:0;background:transparent;color:var(--accent);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
}
.stepper button svg{width:17px;height:17px}
/* Цифра держит ширину: без этого 9 → 10 сдвигало кнопки прямо под пальцем */
.stepper span{
  min-width:44px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;
}
/* Быстрые нажатия не должны выделять текст и вызывать лупу на телефоне */
.stepper,.qty{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stepper button,.qty button{touch-action:manipulation}
.stepper button:active{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.stepper button:active{background:rgba(128,140,160,.16)}
.stepper span{
  flex:1;text-align:center;font-weight:700;font-size:15px;
  border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:40px;
}

.empty{text-align:center;color:var(--hint);padding:56px 20px}
.empty .ico{font-size:44px;margin-bottom:12px}

/* ---------- корзина ---------- */
.line{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.line img,.line .nofoto{width:58px;height:58px;border-radius:12px;object-fit:contain;flex:none;background:#fff;border:1px solid var(--line)}
.line .info{flex:1;min-width:0}
.line .nm{font-size:13.5px;font-weight:500;line-height:1.3}
.line .pr{color:var(--hint);font-size:12.5px;margin-top:2px}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:32px;height:32px;border-radius:10px;border:0;background:var(--card);
  color:var(--accent);font-size:18px;cursor:pointer;transition:transform .14s ease}
.qty button:active{transform:scale(.9)}
.qty span{min-width:32px;text-align:center;font-weight:600;font-size:14px;
  font-variant-numeric:tabular-nums}

.progress{background:var(--card);border-radius:12px;padding:11px 13px;margin-bottom:14px;font-size:13px}
.progress .bar{height:6px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}
.progress .bar i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s}

.totals{margin-top:16px;padding:14px;background:var(--card);border-radius:14px}
.totals div{display:flex;justify-content:space-between;padding:3px 0;font-size:14px}
.totals .big{font-size:17px;font-weight:700;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}

.btn{
  width:100%;padding:14px;border:0;border-radius:13px;background:var(--accent);
  color:var(--accent-text);font-weight:600;font-size:16px;cursor:pointer;margin-top:12px;
}
.btn.ghost{background:var(--card);color:var(--text);font-weight:500}
.btn:disabled{opacity:.6}

label{display:block;font-size:13px;color:var(--hint);margin:14px 0 6px}
input,textarea,select{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--text);font:inherit;
}
textarea{min-height:70px;resize:vertical}
.pay label{display:flex;gap:10px;align-items:center;color:var(--text);font-size:15px;
  padding:13px;border:1px solid var(--line);border-radius:12px;margin:8px 0}
.pay input{width:auto}
.pay label:has(input:checked){border-color:var(--accent);background:var(--card)}

.order{background:var(--card);border-radius:14px;padding:14px;margin-bottom:12px}
.order .top{display:flex;justify-content:space-between;font-weight:600}
.order .st{font-size:13px;color:var(--hint);margin-top:3px}
.order ul{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--hint)}

/* ---------- карточка товара ---------- */
.sheet{position:fixed;left:0;right:0;top:0;bottom:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:flex-end}
.sheet[hidden]{display:none}
.toast[hidden]{display:none}
.sheet-inner{
  width:100%;max-height:92dvh;overflow-y:auto;background:var(--bg);
  border-radius:20px 20px 0 0;padding:0 16px calc(24px + env(safe-area-inset-bottom));
}
.sheet-head{
  position:sticky;top:0;z-index:3;display:flex;gap:12px;
  justify-content:space-between;align-items:flex-start;
  /* Раньше фон обрывался по краям текста, и под шапкой проглядывала
     фотография. Растягиваем на всю ширину листа вместе с его полями. */
  margin:0 -16px;padding:14px 16px 12px;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.sheet-head b{font-size:16px;line-height:1.3}
/* Крестик был просто символом — попасть по нему пальцем было тяжело.
   Теперь это круглая кнопка 34×34 с подложкой. */
.sheet-head button{
  flex:none;width:34px;height:34px;margin:-4px -4px 0 0;padding:0;border:0;
  border-radius:50%;background:var(--card);color:var(--hint);
  font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.sheet-head button:active{background:var(--line);transform:scale(.94)}
.gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery img{width:82%;flex:none;aspect-ratio:1;object-fit:contain;border-radius:14px;
  scroll-snap-align:center;background:#fff;border:1px solid var(--line)}
.dots{display:flex;gap:5px;justify-content:center;margin-top:8px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--accent)}
.desc{color:var(--hint);font-size:14px;white-space:pre-wrap;margin:12px 0;line-height:1.5}
.price-big{font-size:25px;font-weight:700;margin-top:12px}
.price-big .old{font-size:15px;margin-top:4px}
.specs{margin:12px 0;font-size:13.5px}
.specs div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}
.specs span:first-child{color:var(--hint)}

.toast{
  position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:80;
  background:rgba(20,22,28,.94);color:#fff;padding:11px 18px;border-radius:20px;font-size:14px;
  max-width:80%;text-align:center;
}
.tabbar{
  flex:none;display:flex;background:var(--bg);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  flex:1;padding:9px 4px 10px;border:0;background:none;color:var(--hint);
  font-size:11px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
}
.tabbar button span{font-size:11px}
.tabbar button.active{color:var(--accent);font-weight:600}
.skeleton{background:var(--card);border-radius:var(--radius);height:230px;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}


/* ---------- анимации ---------- */
.fly{
  position:fixed;z-index:90;pointer-events:none;border-radius:12px;
  object-fit:contain;background:#fff;
  transition:transform .58s cubic-bezier(.36,.66,.3,1), opacity .58s ease;
  will-change:transform,opacity;
}
.pop{animation:pop .24s cubic-bezier(.23,1,.32,1)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.add.adding{animation:added .22s cubic-bezier(.23,1,.32,1)}
@keyframes added{
  0%{transform:scale(1)}
  35%{transform:scale(.94)}
  100%{transform:scale(1)}
}
.card{transition:transform .15s ease}
.card:active{transform:scale(.985)}
.chips button{transition:background .15s ease, color .15s ease}
.fav{transition:transform .15s ease}
.fav:active{transform:scale(.85)}
@media (prefers-reduced-motion: reduce){
  .fly,.pop,.add.adding,.card{animation:none!important;transition:none!important}
}


/* ---------- раздел «Ещё» ---------- */
.info-head{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.info-logo{width:52px;height:52px;border-radius:14px;background:var(--card);
  display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.info-head b{font-size:17px}
.muted-s{color:var(--hint);font-size:13px;margin-top:2px}
.info-links{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.info-link{
  display:block;padding:13px 14px;background:var(--card);border-radius:13px;
  color:var(--text);text-decoration:none;font-size:14.5px;font-weight:500;
}
.info-link:active{opacity:.7}
.info-card{background:var(--card);border-radius:14px;padding:14px;margin-bottom:12px}
.info-card h4{margin:0 0 7px;font-size:14px}
.info-card p{margin:0;color:var(--hint);font-size:13.5px;white-space:pre-wrap;line-height:1.5}


/* ---------- похожие товары ---------- */
.gallery.similar{gap:10px;padding-bottom:4px}
.sim{width:132px;flex:none;cursor:pointer}
.sim img,.sim .noph{
  width:132px;height:132px;object-fit:contain;border-radius:12px;
  background:#fff;border:1px solid var(--line);padding:6px;
}
.sim-nm{
  font-size:12px;line-height:1.3;margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sim-pr{font-size:13px;font-weight:700;margin-top:3px}
.tabbar button{padding:8px 2px 9px}

/* ---------- плитки категорий ---------- */
.tiles{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px}
.tile{
  display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;
  border:0;border-radius:999px;cursor:pointer;text-align:left;color:#fff;
  background:linear-gradient(135deg, var(--tile) 0%, color-mix(in srgb, var(--tile) 72%, #000) 100%);
  box-shadow:0 4px 14px color-mix(in srgb, var(--tile) 35%, transparent);
  transition:transform .15s ease, box-shadow .18s ease;
}
.tile:active{transform:scale(.98);box-shadow:0 2px 8px color-mix(in srgb, var(--tile) 30%, transparent)}
.tile-ico{
  flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:24px;background:rgba(255,255,255,.22);
}
/* Иллюстрация из макета — без круглой подложки, вписана в кнопку */
.tile-ico.art{width:66px;height:56px;background:none;border-radius:0;margin:-6px 0 -6px -6px}
.tile-ico.art img{width:100%;height:100%;object-fit:contain;display:block}
.tile-text{flex:1;min-width:0}
.tile-title{
  display:flex;align-items:center;gap:7px;font-weight:700;font-size:16px;
  line-height:1.25;letter-spacing:-.2px;
}
.tile-n{
  font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;
  background:rgba(255,255,255,.25);
}
.tile-sub{font-size:12.5px;opacity:.86;margin-top:2px;line-height:1.3}
.tile-go{
  flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.24);
}
.tile-go svg{width:17px;height:17px}

/* Запасной вариант для браузеров без color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .tile{background:var(--tile);box-shadow:0 4px 14px rgba(16,24,40,.22)}
}

/* ---------- иконки из макета ---------- */
.tabbar button i{display:block;width:23px;height:23px}
.tabbar button i svg{width:100%;height:100%;display:block}

.search-field{
  flex:1;display:flex;align-items:center;gap:10px;padding:0 14px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;height:46px;
}
.search-field:focus-within{border-color:var(--accent)}
.search-ico{width:19px;height:19px;color:var(--hint);flex:none}
.search-ico svg{width:100%;height:100%;display:block}
.searchbar input{border:0;background:none;padding:0;height:100%;flex:1}
.searchbar input:focus{outline:none}

/* Чипсы и сортировка — иконка слева от подписи */
.chips button,.seg button,.brand-pick{display:inline-flex;align-items:center;gap:7px}
.chips button svg,.seg button svg,.brand-pick svg{width:16px;height:16px;flex:none}
.brand-pick svg:last-child{width:14px;height:14px;opacity:.6;margin-left:2px}
.seg button{justify-content:center}
.seg button svg{width:15px;height:15px}
.chips button .n{
  font-size:11px;font-weight:700;padding:1px 6px;border-radius:20px;
  background:rgba(128,140,160,.22);opacity:1;margin-left:1px;
}
.chips button.on .n{background:rgba(255,255,255,.28)}

/* Плашки доверия в карточке товара */
.trust{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.trust span{
  display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;
  background:var(--card);font-size:12.5px;font-weight:500;
}
.trust svg{width:15px;height:15px;flex:none}
.trust .orig{color:#16a34a}
.trust .fast{color:var(--accent)}
.trust .warranty{color:var(--hint)}


/* ---------- адреса ---------- */
.addr{
  display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);
  border-radius:13px;margin-bottom:8px;cursor:pointer;transition:border-color .16s ease,background .16s ease;
}
.addr.on{border-color:var(--accent);background:var(--card)}
.addr-main{flex:1;min-width:0}
.addr-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
.addr-def{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 7px;border-radius:20px;background:var(--accent);color:var(--accent-text);
}
.addr-sub{font-size:12.5px;color:var(--hint);margin-top:2px}
.addr-del{
  flex:none;width:30px;height:30px;border:0;border-radius:9px;background:transparent;
  color:var(--hint);font-size:15px;cursor:pointer;
}
.addr-del:active{background:var(--card)}
.addr-results{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.addr-hit{
  text-align:left;padding:11px 13px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg);color:var(--text);font-size:13.5px;cursor:pointer;line-height:1.35;
}
.addr-hit:active{background:var(--card)}


/* ---------- разделитель «или» ---------- */
.or-line{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--hint);font-size:12.5px}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- добавление в корзину ---------- */
@keyframes cardAdded{
  0%{box-shadow:var(--shadow)}
  30%{box-shadow:0 0 0 2px var(--accent), 0 6px 20px color-mix(in srgb, var(--accent) 28%, transparent)}
  100%{box-shadow:var(--shadow)}
}
.card.added{animation:cardAdded .45s cubic-bezier(.23,1,.32,1)}
.card.added .imgwrap::after{
  content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:700;color:var(--accent-text,#fff);background:color-mix(in srgb, var(--accent) 82%, transparent);
  border-radius:inherit;animation:tick .45s cubic-bezier(.23,1,.32,1) forwards;pointer-events:none;
}
@keyframes tick{
  0%{opacity:0;transform:scale(.94)}
  35%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.04)}
}
/* Появление счётчика анимируем один раз — при смене числа он не пересоздаётся,
   так что «подпрыгивать» на каждом нажатии больше нечему */
.stepper{animation:stepIn .26s cubic-bezier(.3,1.3,.5,1)}
@keyframes stepIn{0%{transform:scale(.92);opacity:.4}100%{transform:scale(1);opacity:1}}


/* ---------- строка выбранных фильтров ---------- */
.active-filters{
  flex:none;display:flex;gap:7px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none;
}
.active-filters::-webkit-scrollbar{display:none}
.active-filters[hidden]{display:none}
.af{
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:0;
  border-radius:999px;background:var(--accent);color:var(--accent-text);
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.af i{font-style:normal;opacity:.7;font-size:12px}
.af.reset{background:var(--card);color:var(--hint);font-weight:500}

/* ---------- панель настроек показа ---------- */
.fgroup{margin:16px 0}
.flabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--hint);margin-bottom:9px}
.fopts{display:flex;flex-wrap:wrap;gap:8px}
.fopt{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);color:var(--text);font-size:14px;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.fopt svg{width:16px;height:16px;flex:none}
.fopt b{font-size:11px;font-weight:700;padding:1px 6px;border-radius:20px;
  background:rgba(128,140,160,.2)}
.fopt.on{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}
.fopt.on b{background:rgba(255,255,255,.28)}


/* ---------- ступени доставки в корзине ---------- */
.progress.ok{background:color-mix(in srgb, #16a34a 12%, var(--card));color:#16a34a;font-weight:600}
.tiers{display:flex;justify-content:space-between;margin-top:9px;gap:4px}
.tiers span{
  flex:1;text-align:center;font-size:11px;font-weight:700;color:var(--hint);
  padding-top:7px;border-top:2px solid var(--line);transition:color .2s ease,border-color .2s ease;
}
.tiers span.done{color:var(--accent);border-color:var(--accent)}
.tiers span i{display:block;font-style:normal;font-weight:500;font-size:10px;opacity:.75;margin-top:1px}


/* ---------- подгрузка списка и пустые экраны ---------- */
.more{height:1px}
.empty .ico.big{
  width:64px;height:64px;margin:0 auto 14px;color:var(--line);
}
.empty .ico.big svg{width:100%;height:100%;stroke-width:1.4}


/* ---------- готовые названия адреса ---------- */
.name-picks{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.name-picks button{
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);
  color:var(--text);font-size:13.5px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.name-picks button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}


/* ---------- кнопка «в избранное» в карточке товара ---------- */
.btn.ghost#sheetFav{display:flex;align-items:center;justify-content:center;gap:9px}
.btn.ghost#sheetFav svg{width:19px;height:19px}
.btn.ghost.fav-on{color:var(--accent)}


/* ---------- счётчик найденного в панели фильтров ---------- */
.found{
  text-align:center;font-size:13.5px;color:var(--hint);
  padding:12px 0 4px;font-weight:500;
}


/* ---------- выбор карты ---------- */
.maps{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.maps a{
  padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  font-size:12.5px;text-decoration:none;color:var(--text);background:var(--bg);
}
.maps a:active{background:var(--card)}

/* ---------- консультант ---------- */
/* Лист поверх всего: раньше кнопка консультанта была на том же уровне
   и всплывала над открытой карточкой синим кружком */
body.sheet-open .agent-fab,
body.sheet-open .bonus-chip{opacity:0;pointer-events:none}
.agent-fab,.bonus-chip{transition:opacity .18s ease}
.agent-fab{
  position:fixed; right:14px; z-index:40;
  bottom:calc(var(--tabbar-h, 62px) + env(safe-area-inset-bottom) + 14px);
  width:54px; height:54px; border:0; border-radius:50%; padding:0;
  background:linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #7b5cff));
  color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent), 0 2px 6px rgba(0,0,0,.18);
  animation:agentIn .26s cubic-bezier(.23,1,.32,1) both;
  transition:transform .16s cubic-bezier(.23,1,.32,1);
}
.agent-fab svg{width:30px;height:30px;fill:currentColor}
.agent-fab:active{transform:scale(.95)}
.agent-fab__pulse{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation:agentPulse 2.6s ease-out infinite;
}
@keyframes agentPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent)}
  70%{box-shadow:0 0 0 15px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@keyframes agentIn{from{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:none}}
.agent-fab[hidden]{display:none}

.agent-wrap{
  position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end;
  background:rgba(0,0,0,.42); backdrop-filter:blur(2px);
  animation:fadeIn .18s ease both;
}
.agent-wrap[hidden]{display:none}
/* Карточка товара, открытая из разговора, должна лежать выше консультанта —
   иначе её не видно и приходится закрывать чат. */
.sheet.over-agent{z-index:80}
.agent-box{
  width:100%; height:100%; display:flex; flex-direction:column;
  background:var(--bg); overflow:hidden;
  padding-bottom:env(safe-area-inset-bottom);
  animation:sheetUp .26s cubic-bezier(.2,.9,.3,1) both;
}
.agent-head{
  display:flex; align-items:center; gap:11px; padding:13px 14px;
  border-bottom:1px solid var(--line); background:var(--card);
}
.agent-ava{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #7b5cff));
  color:#fff;
}
.agent-ava svg{width:22px;height:22px;fill:currentColor}
.agent-who{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.agent-who b{font-size:15px}
.agent-who small{font-size:12px;color:var(--muted)}
.agent-x{border:0;background:none;color:var(--muted);font-size:17px;padding:6px 4px;cursor:pointer}

.agent-log{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px; display:flex; flex-direction:column; gap:10px; min-height:180px;
}
.agent-msg{
  max-width:82%; padding:10px 13px; border-radius:16px; font-size:14.5px;
  line-height:1.45; white-space:pre-wrap; word-break:break-word;
  animation:agentMsg .26s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes agentMsg{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
.agent-msg.them{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px}
.agent-msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.agent-msg.err{align-self:center;background:transparent;color:var(--muted);font-size:13px;text-align:center}

/* «Печатает…» — таким же пузырём, как её сообщения: так это читается как
   «сейчас придёт ответ», а не как три точки, повисшие в воздухе. */
.agent-typing{
  align-self:flex-start;display:flex;align-items:center;gap:5px;
  padding:13px 15px;border-radius:16px;border-bottom-left-radius:6px;
  background:var(--card);border:1px solid var(--line);
  animation:agentMsg .22s ease both;
}
.agent-typing i{
  width:7px;height:7px;border-radius:50%;background:var(--muted);
  animation:agentDot 1.25s infinite ease-in-out;
}
.agent-typing i:nth-child(2){animation-delay:.18s}
.agent-typing i:nth-child(3){animation-delay:.36s}
@keyframes agentDot{
  0%,65%,100%{transform:translateY(0) scale(1);opacity:.3}
  32%{transform:translateY(-5px) scale(1.12);opacity:.95}
}

/* карточки товаров, которые агент назвал */
/* Карточки товаров в разговоре: строками, а не лентой вбок — на телефоне
   горизонтальную ленту половина людей просто не замечает, и товар выглядел
   тонкой полоской. */
.agent-picks{align-self:stretch;display:flex;flex-direction:column;gap:7px;max-width:100%;padding:2px 0 4px}
.agent-pick{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  animation:pickIn .26s cubic-bezier(.23,1,.32,1) both;
  border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:9px 11px;cursor:pointer;
}
.pick-ph{
  flex:none;width:54px;height:54px;border-radius:10px;background:#fff;
  display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)
}
.pick-ph img{width:100%;height:100%;object-fit:contain}
.pick-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pick-txt b{font-size:13px;font-weight:600;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pick-price{font-size:13.5px;color:var(--accent);font-weight:700}
.pick-go{flex:none;color:var(--muted);font-size:20px;line-height:1}
.agent-pick:active{transform:scale(.99);background:var(--bg)}
/* Карточка выезжает слева с лёгким «доводом», как будто её подложили рукой */
@keyframes pickIn{
  0%{opacity:0;transform:translateX(-8px)}
  100%{opacity:1;transform:none}
}
/* Пока фото грузится — мягкий блик вместо пустого квадрата; фото проявляется */
.pick-ph{position:relative}
.pick-ph::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(0,0,0,.06) 50%,transparent 70%);
  background-size:220% 100%;animation:pickShine 1.1s ease-in-out infinite;
}
.pick-ph img{position:relative;opacity:0;transform:scale(.97);
  transition:opacity .2s ease,transform .2s cubic-bezier(.23,1,.32,1)}
.pick-ph img.on{opacity:1;transform:none}
.pick-ph:has(img.on)::before{display:none}
@keyframes pickShine{from{background-position:120% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){
  .agent-pick,.agent-msg,.agent-typing,.pick-ph::before{animation:none}
  .pick-ph img{transition:none;opacity:1;transform:none}
}

.agent-tips{display:flex;gap:7px;overflow-x:auto;padding:0 14px 10px}
.agent-tips:empty{display:none}
.agent-tip{
  flex:none;border:1px solid var(--line);background:var(--card);color:var(--text);
  border-radius:999px;padding:8px 13px;font-size:12.5px;cursor:pointer;white-space:nowrap;
}
.agent-tip:active{background:var(--bg)}

.agent-bar{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--line);background:var(--card)}
.agent-input{
  flex:1;border:1px solid var(--line);background:var(--bg);color:var(--text);
  border-radius:999px;padding:11px 15px;font-size:15px;outline:none;min-width:0;
}
.agent-input:focus{border-color:var(--accent)}
.agent-send{
  width:44px;height:44px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--accent);color:#fff;display:grid;place-items:center;
}
.agent-send svg{width:19px;height:19px}
.agent-send:disabled{opacity:.45}

/* ---------- кнопки связи ---------- */
.contact-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}
.contact-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 12px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg);color:var(--text);font-size:14px;font-weight:500;
  cursor:pointer;width:100%;
}
.contact-btn:active{background:var(--card);transform:scale(.98)}
.contact-ico{display:grid;place-items:center;color:var(--accent);flex:none}
.contact-ico svg{width:20px;height:20px}
.contact-ico.sm svg{width:17px;height:17px;margin-right:7px}
.btn.ghost .contact-ico{display:inline-grid;vertical-align:-3px}

/* рисованная иконка вместо смайлика на пустых экранах */
.empty .ico.art{display:grid;place-items:center;color:var(--muted);opacity:.55;margin-bottom:6px}
.empty .ico.art svg{width:56px;height:56px;stroke-width:1.4}

/* ---------- значки пользы ---------- */
.bens{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.ben{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px 6px 8px;border-radius:999px;font-size:12.5px;font-weight:500;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  color:color-mix(in srgb, var(--accent) 88%, var(--text));
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.ben i{display:grid;place-items:center;flex:none}
.ben i svg{width:15px;height:15px;stroke-width:1.9}
/* у формы выпуска вид спокойнее — это не польза, а свойство упаковки */
.ben--vegan,.ben--gummy,.ben--chewable,.ben--liquid,.ben--powder,
.ben--sugarfree,.ben--glutenfree{
  background:var(--card);color:var(--muted);border-color:var(--line);
}
/* в плитке каталога — только иконки, без подписей */
.card .bens{gap:4px;margin:5px 0 0}
.card .ben{padding:3px;border-radius:7px;font-size:0;gap:0}
.card .ben i svg{width:13px;height:13px}

.about{margin-top:14px}
.about-t{margin:0 0 6px;font-size:15px;font-weight:600}
.about .desc{white-space:pre-line}
.about .note{
  margin-top:10px;padding:9px 11px;border-radius:10px;
  background:var(--card);color:var(--muted);font-size:11.5px;line-height:1.4;
}

/* ---------- переключатель ---------- */
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}
.switch input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:46px;height:27px;border-radius:999px;background:var(--line);
  position:relative;transition:background .18s;cursor:pointer;
}
.switch input::after{
  content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;
  border-radius:50%;background:#fff;transition:transform .18s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(19px)}
.muted-s{color:var(--muted);font-size:12.5px}

/* ---------- подробная карточка товара ---------- */
.facts{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.facts li{
  position:relative;padding-left:19px;font-size:13.5px;line-height:1.45;color:var(--text);
}
.facts li::before{
  content:"";position:absolute;left:5px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--accent);
}
.more-btn{margin-top:14px}
.about-more{margin-top:14px;display:flex;flex-direction:column;gap:16px;
  animation:fadeIn .2s ease both}
.about-more[hidden]{display:none}
.abl h5{
  margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted);
}
.abl p{margin:0;font-size:14px;line-height:1.5;white-space:pre-line}

.nutri{width:100%;border-collapse:collapse;font-size:13.5px}
.nutri th{
  text-align:left;font-weight:500;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted);padding:0 0 7px;
  border-bottom:1px solid var(--line);
}
.nutri th:nth-child(2),.nutri td:nth-child(2){text-align:right;white-space:nowrap}
.nutri th:last-child,.nutri td:last-child{text-align:right;white-space:nowrap;width:74px}
.nutri td{padding:9px 0;border-bottom:1px solid var(--line)}
.nutri tr:last-child td{border-bottom:0}
.nutri-note{margin-top:9px;font-size:11.5px;line-height:1.45;color:var(--muted)}

/* счётчик прямо в карточке товара */
.sheet-step{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--accent);color:#fff;border-radius:14px;padding:4px;margin-top:10px;
}
.sheet-step button{
  width:46px;height:44px;border:0;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;
}
.sheet-step button:active{background:rgba(255,255,255,.28)}
.sheet-step button svg{width:19px;height:19px}
.sheet-step span{flex:1;text-align:center;font-weight:600;font-size:15px}

/* Кнопка консультанта не мешает: прячется, когда открыт любой лист
   (карточка товара, категории, фильтры) и пока человек печатает в поиске. */
body.sheet-open .agent-fab,
body.typing .agent-fab{display:none}

/* ================= плавность ================= */
/* Одна кривая на всё приложение — движение читается как единое целое */
:root{
  --ease: cubic-bezier(.22,.9,.32,1);
  --fast: .16s;
  --slow: .26s;
}

/* нижние листы: затемнение проявляется, панель выезжает снизу */
.sheet{
  opacity:0;
  transition:opacity var(--slow) var(--ease);
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
}
.sheet.open{opacity:1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet.closing{opacity:0}
.sheet-inner{
  transform:translateY(14px) scale(.99);
  opacity:.4;
  transition:transform var(--slow) var(--ease), opacity var(--slow) var(--ease);
}
.sheet.open .sheet-inner{transform:none;opacity:1}
.sheet.closing .sheet-inner{transform:translateY(24px);opacity:0}

/* окно консультанта — так же */
.agent-wrap{opacity:0;transition:opacity var(--slow) var(--ease)}
.agent-wrap.open{opacity:1}
.agent-wrap.closing{opacity:0}
.agent-box{
  transform:translateY(20px);
  transition:transform var(--slow) var(--ease);
  animation:none;
}
.agent-wrap.open .agent-box{transform:none}
.agent-wrap.closing .agent-box{transform:translateY(28px)}

/* смена экрана */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#screen.fade{animation:fadeUp .22s var(--ease) both}

/* нажатия: всё, на что можно нажать, слегка проседает */
.tile,.contact-btn,.agent-tip,.chips button,.btn,.add,.sim,.agent-pick,
.tabbar button,.more-btn,.line .qty button,.sheet-step button{
  transition:transform var(--fast) var(--ease), background var(--fast) var(--ease),
             border-color var(--fast) var(--ease), opacity var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.tile:active,.contact-btn:active,.agent-tip:active,.btn:active,.add:active,
.sim:active,.agent-pick:active,.more-btn:active{transform:scale(.97)}
.tabbar button:active{transform:scale(.92)}
.fav:active,.share:active{transform:scale(.85)}

/* нижнее меню: активная вкладка подсвечивается мягко */
.tabbar button i,.tabbar button span{
  transition:color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.tabbar button.active i{transform:translateY(-1px)}

/* поле поиска в фокусе слегка подсвечивается */
.search-field{transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease)}
body.typing .search-field{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Крестик в поиске убран: клавиатура закрывается касанием по списку,
   а лишняя кнопка рядом с полем только мешала попадать в фильтры. */
.search-clear{display:none!important}

/* раскрытие подробностей о товаре */
.about-more{animation:fadeUp .24s var(--ease) both}

/* значки и карточки появляются мягко */
.card{animation:fadeUp .26s var(--ease) both}

/* кому анимации мешают — выключаем всё */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ссылка-кнопка выглядит и ведёт себя как кнопка */
a.contact-btn{text-decoration:none}

/* ---------- тема: карточка всегда отличается от фона ----------
   На части телефонов Telegram отдаёт одинаковый цвет для фона и панелей —
   тогда раздел «Ещё» выглядит плоским, карточек не видно. Подмешиваем
   немного контраста и добавляем тонкую рамку: работает на любой теме. */
.info-card{
  background:color-mix(in srgb, var(--card) 92%, var(--text) 5%);
  border:1px solid color-mix(in srgb, var(--text) 9%, transparent);
}
/* если браузер не умеет смешивать цвета — хотя бы рамка */
@supports not (color: color-mix(in srgb, red, blue)){
  .info-card{background:var(--card);border:1px solid var(--line)}
}

/* ---------- подбор по цели ---------- */
.pick-banner{
  display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;
  padding:14px;border-radius:16px;cursor:pointer;text-align:left;
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--accent) 13%, var(--bg)),
    color-mix(in srgb, var(--accent) 5%, var(--bg)));
  color:var(--text);
}
.pick-banner__ico{
  width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--accent);color:#fff;
}
.pick-banner__ico svg{width:21px;height:21px}
.pick-banner__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pick-banner__text b{font-size:15px}
.pick-banner__text span{font-size:12.5px;color:var(--muted)}
.pick-banner__go{color:var(--accent);display:grid;place-items:center}
.pick-banner__go svg{width:18px;height:18px}

.pick-steps{display:flex;gap:6px;margin:2px 0 16px}
.pick-steps i{flex:1;height:3px;border-radius:3px;background:var(--line);
  transition:background var(--slow) var(--ease)}
.pick-steps i.on{background:var(--accent)}
.pick-q{font-size:18px;font-weight:600;margin-bottom:4px}
.pick-hint{font-size:13px;color:var(--muted);margin-bottom:14px}

.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin-bottom:18px}
.pick-grid.two{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.pick-item{
  display:flex;align-items:center;gap:9px;padding:13px 12px;border-radius:14px;
  border:1px solid var(--line);background:var(--card);color:var(--text);
  font-size:13.5px;text-align:left;cursor:pointer;line-height:1.25;
}
.pick-item i{display:grid;place-items:center;flex:none;color:var(--accent)}
.pick-item i svg{width:19px;height:19px}
.pick-item.wide{justify-content:center;font-size:14.5px;font-weight:500}
.pick-item.on{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, var(--card));
}
.pick-item.on i{color:var(--accent)}

.pick-row{display:flex;gap:9px}
.pick-row .btn{flex:1}

.pick-list{display:flex;flex-direction:column;gap:10px}
.pick-card{
  display:flex;gap:12px;padding:11px;border-radius:15px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);
  animation:fadeUp .26s var(--ease) both;
}
.pick-card:active{transform:scale(.99)}
.pick-card img,.pick-card .noph{
  width:74px;height:74px;flex:none;border-radius:11px;object-fit:contain;background:#fff;
}
.pick-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pick-name{font-size:13.5px;font-weight:500;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pick-sub{font-size:12.5px;color:var(--accent);font-weight:600}
.pick-why{font-size:11.5px;color:var(--muted)}
.pick-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.pick-foot b{font-size:15px}
.btn.sm{padding:7px 14px;font-size:13px;width:auto;border-radius:10px}

.pick-count{font-size:12px;color:var(--muted);margin-bottom:6px;letter-spacing:.02em}
.pick-warn{
  margin:10px 0 0;padding:11px 13px;border-radius:12px;font-size:12.5px;line-height:1.45;
  background:color-mix(in srgb, #d97706 12%, var(--card));
  border:1px solid color-mix(in srgb, #d97706 32%, transparent);
  color:var(--text);
}

/* видно, где можно отметить несколько вариантов */
.pick-multi{
  float:right;font-size:11px;text-transform:lowercase;
  color:var(--accent);font-weight:500;
}
.pick-mark{
  width:19px;height:19px;flex:none;border:2px solid var(--line);
  display:grid;place-items:center;transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.pick-mark.box{border-radius:6px}
.pick-mark.dot{border-radius:50%}
.pick-mark::after{
  content:"";width:9px;height:9px;border-radius:inherit;
  background:transparent;transition:background var(--fast) var(--ease);
}
.pick-item.on .pick-mark{border-color:var(--accent);background:var(--accent)}
.pick-item.on .pick-mark.box::after{
  width:11px;height:6px;border-radius:0;background:transparent;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-2px);
}
.pick-item.on .pick-mark.dot::after{background:#fff}
.pick-text{flex:1;min-width:0}
.pick-grid{grid-template-columns:1fr}
.pick-grid.multi{grid-template-columns:1fr}
@media (min-width: 520px){
  .pick-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- результат теста: сначала вывод, потом товары ---------- */
.nut{
  margin-top:16px;padding:14px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);
  animation:fadeUp .26s var(--ease) both;
}
.nut-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.nut-n{
  width:22px;height:22px;flex:none;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;
}
.nut-head b{font-size:16px;flex:1;min-width:0}
.nut-level{
  font-size:11px;padding:3px 9px;border-radius:999px;font-weight:600;white-space:nowrap;
}
.nut-level.high{background:color-mix(in srgb,#dc2626 15%,transparent);color:#dc2626}
.nut-level.mid{background:color-mix(in srgb,#d97706 16%,transparent);color:#b45309}
.nut-level.low{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.nut-why{font-size:13.5px;line-height:1.5;color:var(--text);margin:9px 0 0}
.nut-because{
  margin-top:9px;padding:9px 11px;border-radius:10px;font-size:12.5px;line-height:1.45;
  background:var(--bg);color:var(--muted);
}
.nut-because span{color:var(--text);font-weight:600}
.nut .pick-list{margin-top:11px}
.nut .pick-card{background:var(--bg)}
.pick-note{
  margin-top:18px;padding:13px;border-radius:12px;font-size:12px;line-height:1.5;
  background:var(--card);color:var(--muted);border:1px solid var(--line);
}
.pick-note b{color:var(--text)}

/* ---------- разбор ответов ---------- */
.think{padding:26px 6px 30px;text-align:center}
.think-orb{
  width:76px;height:76px;margin:0 auto 20px;position:relative;
  display:grid;place-items:center;
}
.think-orb i{
  position:absolute;border-radius:50%;border:2px solid var(--accent);
  opacity:.85;animation:orb 1.9s cubic-bezier(.3,.7,.4,1) infinite;
}
.think-orb i:nth-child(1){width:26px;height:26px;animation-delay:0s}
.think-orb i:nth-child(2){width:26px;height:26px;animation-delay:.45s}
.think-orb i:nth-child(3){width:26px;height:26px;animation-delay:.9s}
@keyframes orb{
  0%{width:24px;height:24px;opacity:.9}
  100%{width:76px;height:76px;opacity:0}
}
.think-orb::after{
  content:"";width:15px;height:15px;border-radius:50%;background:var(--accent);
  animation:pulse 1.4s ease-in-out infinite;
}
.think-title{font-size:17px;font-weight:600;margin-bottom:18px}
.think-list{display:flex;flex-direction:column;gap:11px;text-align:left;
  max-width:330px;margin:0 auto 22px}
.think-step{
  display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);
  opacity:.45;transition:opacity .3s var(--ease), color .3s var(--ease);
}
.think-step.now{opacity:1;color:var(--text)}
.think-step.done{opacity:.75;color:var(--muted)}
.think-mark{
  width:17px;height:17px;flex:none;border-radius:50%;
  border:2px solid var(--line);transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.think-step.now .think-mark{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.think-step.done .think-mark{
  border-color:var(--accent);background:var(--accent);position:relative;
}
.think-step.done .think-mark::after{
  content:"";position:absolute;left:4px;top:2px;width:5px;height:9px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg);
}
.think-bar{
  height:4px;border-radius:4px;background:var(--line);overflow:hidden;
  max-width:330px;margin:0 auto;
}
.think-bar i{
  display:block;height:100%;width:0;border-radius:4px;background:var(--accent);
  transition:width .8s var(--ease);
}

/* счётчик в карточке подборки */
.pick-step{
  display:flex;align-items:center;gap:4px;background:var(--accent);
  border-radius:10px;padding:3px;
}
.pick-step button{
  width:32px;height:30px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;
}
.pick-step button:active{background:rgba(255,255,255,.32)}
.pick-step button svg{width:15px;height:15px}
.pick-step span{min-width:24px;text-align:center;color:#fff;font-weight:600;font-size:14px}

/* переходы между экранами внутри листа */
.sheet-inner{
  transition:transform var(--slow) var(--ease), opacity var(--slow) var(--ease);
}
.sheet-inner.out-left{transform:translateX(-26px);opacity:0}
.sheet-inner.out-right{transform:translateX(26px);opacity:0}
.sheet-inner.in-left{animation:slideFromLeft .24s var(--ease) both}
.sheet-inner.in-right{animation:slideFromRight .24s var(--ease) both}
@keyframes slideFromRight{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideFromLeft{from{transform:translateX(-26px);opacity:0}to{transform:none;opacity:1}}

/* итоговое объяснение */
.summary{
  margin-top:18px;padding:15px;border-radius:16px;
  background:color-mix(in srgb, var(--accent) 7%, var(--card));
  border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.summary h4{margin:0 0 9px;font-size:15px}
.summary p{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--text)}
.summary p:last-child{margin-bottom:0;color:var(--muted)}

/* что с чем принимать */
.clash{
  margin-top:16px;padding:14px;border-radius:16px;
  background:color-mix(in srgb,#d97706 9%,var(--card));
  border:1px solid color-mix(in srgb,#d97706 28%,transparent);
}
.clash h4{margin:0 0 8px;font-size:15px}
.clash p{margin:0 0 8px;font-size:12.8px;line-height:1.5}
.clash p:last-child{margin-bottom:0}
.clash p.good{color:#15803d}

/* ---------- экран оплаты переводом ---------- */
.pay{padding:6px 0 20px}
.pay-top{text-align:center;padding:18px 0 22px}
.pay-label{font-size:13px;color:var(--muted)}
.pay-sum{font-size:32px;font-weight:700;margin:4px 0 2px;letter-spacing:-.5px}
.pay-order{font-size:12.5px;color:var(--muted)}

.pay-card{
  padding:18px;border-radius:18px;text-align:center;margin-bottom:12px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 14%, var(--card)),
    color-mix(in srgb, var(--accent) 5%, var(--card)));
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.pay-card__label{font-size:12px;color:var(--muted);margin-bottom:6px}
.pay-card__num{
  font-size:25px;font-weight:700;letter-spacing:1.5px;margin-bottom:14px;
  font-variant-numeric:tabular-nums;word-break:break-all;
}

.pay-row{
  display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:8px;
  border-radius:13px;background:var(--card);border:1px solid var(--line);font-size:14px;
}
.pay-row span{color:var(--muted);flex:none}
.pay-row b{flex:1;min-width:0;text-align:right;word-break:break-word}
.pay-copy{
  flex:none;border:0;background:none;color:var(--accent);font-size:12.5px;
  cursor:pointer;padding:4px 2px;font-weight:500;
}
.pay-copy:active{opacity:.6}

.pay-how{
  margin:14px 0;padding:14px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);
}
.pay-how b{font-size:14px}
.pay-how ol{margin:9px 0 0;padding-left:20px}
.pay-how li{font-size:13px;line-height:1.55;margin-bottom:6px;color:var(--text)}
.pay-how li:last-child{margin-bottom:0}
.pay-note{
  margin-bottom:14px;padding:12px 14px;border-radius:12px;font-size:12.5px;
  line-height:1.5;background:var(--card);color:var(--muted);border:1px solid var(--line);
}

/* на экране оплаты ничего не отвлекает и не перекрывает реквизиты */
body.paying .searchbar,
body.paying .agent-fab{display:none}

/* ---------- заглушка «нет фото» и пустые экраны рисуются иконкой ---------- */
.noph{display:flex;align-items:center;justify-content:center;color:var(--hint)}
.noph svg{width:34%;max-width:44px;height:auto;opacity:.45;stroke-width:1.3}
.sim .noph svg,.pick-card .noph svg{width:42%}
.empty .ico svg{
  width:52px;height:52px;stroke-width:1.3;opacity:.5;display:block;margin:0 auto;
}

/* ---------- товар закончился: виден, но видно, что его нет ---------- */
.card.out .imgwrap{position:relative}
.card.out .ph,.card.out .noph{filter:grayscale(1);opacity:.42}
.card.out .nm,.card.out .br{color:var(--hint)}
.card.out .pr{color:var(--hint);text-decoration:line-through;text-decoration-thickness:1px}
.card.out .bens{opacity:.45;filter:grayscale(1)}
.card.out .fav,.card.out .share{opacity:.5}
.outmark{
  position:absolute;left:0;right:0;bottom:0;
  padding:5px 8px;text-align:center;
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#fff;background:rgba(17,24,39,.72);backdrop-filter:blur(2px);
}
.card.out .add:disabled{
  background:var(--card);color:var(--hint);border:1px solid var(--line);
}
/* в карточке товара — та же логика */
.sheet .out-note{
  display:flex;align-items:center;gap:9px;margin:12px 0;padding:11px 13px;
  border-radius:13px;font-size:13.5px;color:var(--hint);
  background:var(--card);border:1px solid var(--line);
}
.sheet .out-note svg{width:18px;height:18px;flex:none;stroke-width:1.7}
.sheet.out .gallery img,.sheet.out .noph{filter:grayscale(1);opacity:.5}
.price-big.out{color:var(--hint);text-decoration:line-through;text-decoration-thickness:1px}

/* ---------- карта выбора точки ---------- */
.pmap-wrap{margin:10px 0}
.pmap{
  height:290px;border-radius:16px;overflow:hidden;position:relative;
  border:1px solid var(--line);background:var(--card);
  box-shadow:0 2px 14px -8px rgba(0,0,0,.35);
}
.pmap-wrap.dragging .pmap{box-shadow:0 4px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent)}

/* Адрес отмеченного места — словами, под картой */
.pmap-addr{
  display:flex;align-items:flex-start;gap:8px;margin-top:8px;padding:10px 12px;
  border-radius:12px;font-size:13.5px;line-height:1.4;
  background:var(--card);border:1px solid var(--line);color:var(--text);
}
.pmap-addr svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--accent)}
.pmap-addr.wait{color:var(--hint)}
.pmap-addr.wait svg{opacity:.5}
.pmap-addr.none{color:var(--hint)}

/* «Вы сейчас не там» — предупреждение с выбором, а не молчание */
.pmap-far{
  margin-top:8px;padding:12px 13px;border-radius:12px;
  background:color-mix(in srgb, #f59e0b 12%, var(--card));
  border:1px solid color-mix(in srgb, #f59e0b 45%, transparent);
}
.pf-head{font-weight:700;font-size:14px;margin-bottom:3px}
.pf-text{font-size:13px;line-height:1.45;color:var(--hint)}
.pf-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pf-btns button{
  flex:1 1 140px;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:600;
  cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--text);
}
.pf-btns .pf-move{background:var(--accent);color:var(--accent-text);border-color:transparent}
.pf-btns button:active{transform:scale(.97)}
.pmap .leaflet-control-attribution{
  font-size:9px;opacity:.5;background:rgba(255,255,255,.7);
  padding:0 5px;border-radius:6px 0 0 0;
}

/* Метка доставки: капля с тенью на земле — так видно, куда именно она
   показывает, а не просто «где-то здесь» */
.pmap-pin span{
  display:block;width:24px;height:24px;margin:0 auto;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--accent);
  box-shadow:0 4px 12px rgba(0,0,0,.4);border:3px solid #fff;
}
.pmap-pin i{
  position:absolute;left:50%;bottom:-3px;width:14px;height:5px;margin-left:-7px;
  border-radius:50%;background:rgba(0,0,0,.28);filter:blur(1px);
}
.pmap .leaflet-marker-draggable{cursor:grab}
.pmap .leaflet-marker-draggable:active{cursor:grabbing}

/* «Вы здесь» — синяя точка с мягким пульсом, как в привычных картах */
.pmap-me i{
  position:absolute;inset:0;border-radius:50%;background:#2667F5;
  border:3px solid #fff;box-shadow:0 2px 8px rgba(38,103,245,.55);
}
.pmap-me b{
  position:absolute;inset:0;border-radius:50%;border:2px solid #2667F5;
  animation:mePulse 2.2s ease-out infinite;
}
@keyframes mePulse{
  0%   {transform:scale(1);opacity:.55}
  70%  {transform:scale(2.6);opacity:0}
  100% {transform:scale(2.6);opacity:0}
}
@media (prefers-reduced-motion: reduce){ .pmap-me b{animation:none;opacity:0} }

/* Круглая кнопка «моё место» внизу справа — там, где её ищут по привычке */
.pmap-locate{margin:0 12px 14px 0!important}
.pmap-locate button{
  width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;position:relative;
  background:#fff;color:var(--accent);
  box-shadow:0 4px 14px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06);
}
.pmap-locate button:active{transform:scale(.94)}
.pmap-locate svg{width:24px;height:24px}
.pmap-locate em{
  position:absolute;inset:5px;border-radius:50%;display:none;
  border:2.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color:var(--accent);animation:spin .7s linear infinite;
}
.pmap-locate.busy svg{opacity:0}
.pmap-locate.busy em{display:block}
.pmap-locate.bad button{color:#dc2626;box-shadow:0 4px 14px rgba(220,38,38,.35),0 0 0 1px rgba(220,38,38,.35)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Кнопки масштаба: скругляем и убираем рамку девяностых */
.pmap .leaflet-bar{border:0;box-shadow:0 3px 10px rgba(0,0,0,.2);border-radius:11px;overflow:hidden}
.pmap .leaflet-bar a{
  width:34px;height:34px;line-height:34px;color:#333;border-bottom-color:rgba(0,0,0,.08);
}
.pmap .leaflet-top.leaflet-right{margin:4px 4px 0 0}
.map-hint{font-size:12.5px;color:var(--hint);margin:-2px 0 8px;line-height:1.4}
.btn.map-open{width:100%;margin-top:8px}

/* ---------- монетки кэшбэка ---------- */
.coin-box{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.coin{
  position:absolute;width:var(--size,32px);height:var(--size,32px);
  animation:coinFly 1.25s cubic-bezier(.22,.7,.3,1) forwards;
  will-change:transform,opacity;
}
.coin svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 9px rgba(38,103,245,.35))}
/* Монета фирменного синего, знак внутри белый */
.coin-svg .c-face{fill:#2667F5}
.coin-svg .c-mark{fill:#FFFFFF}
/* На синем значке монета читается только в обратных цветах */
.coin-svg.flat .c-face{fill:#FFFFFF}
.coin-svg.flat .c-mark{fill:#2667F5}
@keyframes coinFly{
  0%   {transform:translate(0,0) scale(.3) rotate(0deg);opacity:0}
  14%  {transform:translate(0,var(--lift,-110px)) scale(1.15) rotate(60deg);opacity:1}
  70%  {opacity:1}
  100% {transform:translate(var(--dx),var(--dy)) scale(.34) rotate(var(--spin,360deg));opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .coin{animation-duration:.4s}
}

/* значок баланса в шапке — тоже фирменный синий */
.bonus-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:var(--hbtn, 36px);padding:0 11px;border-radius:var(--hbtn-r, 11px);
  background:linear-gradient(180deg,#3B82F6,#2667F5);color:#fff;
  font-size:13px;font-weight:700;white-space:nowrap;border:0;cursor:pointer;flex:none;
  box-shadow:0 5px 14px -7px rgba(38,103,245,1);
}
.chip-coin{display:block;width:20px;height:20px;flex:none}
.chip-coin svg{width:100%;height:100%;display:block}
.bonus-chip.pop{animation:chipPop .26s cubic-bezier(.23,1,.32,1)}
@keyframes chipPop{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}

/* сумма начисления, которая всплывает по центру */
.bonus-gain{
  position:fixed;left:50%;top:34%;transform:translate(-50%,-50%);z-index:9998;
  font-size:clamp(24px,7.5vw,38px);font-weight:800;letter-spacing:-1px;color:#2667F5;
  white-space:nowrap;
  text-shadow:0 6px 22px rgba(38,103,245,.35);pointer-events:none;
  animation:gainUp 1.9s ease forwards;
}
@keyframes gainUp{
  0%   {opacity:0;transform:translate(-50%,-30%) scale(.6)}
  18%  {opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  30%  {transform:translate(-50%,-50%) scale(1)}
  78%  {opacity:1}
  100% {opacity:0;transform:translate(-50%,-72%) scale(.94)}
}

/* ---------- экран кэшбэка ---------- */
.bonus-big{text-align:center;padding:14px 0 6px}
.big-coin{display:block;width:76px;height:76px;margin:2px auto 10px}
/* мягкая тень вместо синего свечения: на тёмной теме свечение расплывалось пятном вокруг логотипа */
.big-coin svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 8px 18px rgba(16,24,40,.16)) drop-shadow(0 2px 4px rgba(16,24,40,.10))}
html.dark .big-coin svg{filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}
.bonus-big span{display:block;font-size:38px;font-weight:800;letter-spacing:-1px;color:var(--accent)}
.bonus-big span small{font-size:17px;font-weight:700;letter-spacing:0;margin-left:7px}
.bonus-big em{display:block;font-style:normal;font-size:13px;color:var(--hint);margin-top:2px}
/* курс: без него баллы читаются как непонятная внутренняя валюта */
.bonus-big .rate{
  display:inline-block;font-style:normal;font-size:12px;font-weight:600;margin-top:8px;
  padding:4px 10px;border-radius:999px;color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}

/* «вернётся столько-то» — в карточке товара, в итогах и после заказа */
.earn{
  display:flex;align-items:center;gap:8px;margin:8px 0 2px;padding:9px 12px;
  border-radius:12px;font-size:13.5px;line-height:1.35;color:var(--text);
  background:color-mix(in srgb, var(--accent) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.earn i{display:block;width:22px;height:22px;flex:none}
.earn i svg{width:100%;height:100%;display:block}
.earn b{color:var(--accent);white-space:nowrap}
.earn em{display:block;font-style:normal;font-size:11.5px;color:var(--hint);margin-top:2px}

/* кэшбэк в списке товаров: под ценой, мелко, но заметно */
.card-earn{
  display:flex;align-items:center;gap:4px;margin-top:4px;
  font-size:11px;font-weight:700;line-height:1;color:var(--accent);
  white-space:nowrap;overflow:hidden;
}
.card-earn svg{width:13px;height:13px;flex:none;display:block}
.card-earn span{overflow:hidden;text-overflow:ellipsis}
.card.out .card-earn{display:none}
.earn.done{justify-content:center;text-align:left;margin:12px auto 0;max-width:320px}
.totals .earn-row{
  margin-top:8px;padding-top:9px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--hint);align-items:center;
}
.totals .earn-row span:last-child{display:flex;align-items:center;gap:6px}
.totals .earn-row svg{width:18px;height:18px;display:block}
.totals .earn-row b{color:var(--accent);font-weight:700}
.pay-back{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:10px;font-size:13px;opacity:.92;
}
.pay-back i{display:block;width:20px;height:20px}
.pay-back i svg{width:100%;height:100%;display:block}
.bonus-how{
  text-align:center;font-size:13.5px;color:var(--hint);line-height:1.55;
  padding:12px 14px;margin-top:12px;border-radius:13px;background:var(--card);
  border:1px solid var(--line);
}
/* «Движения» — кнопка, а не заголовок: список за ней раскрывается
   и листается внутри себя, а не растягивает весь экран кэшбэка */
.brows-toggle{
  display:flex;align-items:center;gap:10px;width:100%;margin:18px 0 0;
  padding:13px 14px;border-radius:13px;cursor:pointer;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  font-size:15px;font-weight:600;text-align:left;
}
.brows-toggle span{flex:1;min-width:0}
.brows-toggle em{
  font-style:normal;font-size:12.5px;font-weight:700;color:var(--hint);
  background:color-mix(in srgb, var(--hint) 14%, transparent);
  padding:2px 8px;border-radius:999px;
}
.brows-toggle i{display:block;width:18px;height:18px;color:var(--hint);transition:transform .2s ease}
.brows-toggle i svg{width:100%;height:100%;display:block}
.brows-toggle.open i{transform:rotate(180deg)}
.brows-toggle:active{transform:scale(.99)}

.brows{
  display:flex;flex-direction:column;gap:2px;margin-top:6px;
  max-height:46vh;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:2px 14px;border-radius:13px;
  background:var(--card);border:1px solid var(--line);
}
/* display:flex перебивает атрибут hidden — гасим явно */
.brows[hidden]{display:none}
.brow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;
}
.brow:last-child{border-bottom:0}
.brow span{display:block;font-size:12px;color:var(--hint);margin-top:2px}
.brow i{font-style:normal;font-weight:700;white-space:nowrap}
.brow i.up{color:#16a34a}
.brow i.down{color:var(--hint)}

/* строка «списать кэшбэк» при оформлении */
.bonus-pay{
  display:flex;align-items:center;gap:12px;margin:14px 0 4px;padding:13px 14px;
  border-radius:14px;cursor:pointer;
  background:color-mix(in srgb, var(--accent) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.bonus-pay input{width:20px;height:20px;flex:none;accent-color:var(--accent);margin:0}
.bonus-pay span{flex:1;min-width:0}
.bonus-pay b{display:block;font-size:14.5px}
.bonus-pay em{display:block;font-style:normal;font-size:12.5px;color:var(--hint);margin-top:2px}
.row-coin{display:block;width:30px;height:30px;flex:none}
.row-coin svg{width:100%;height:100%;display:block}
.totals #bonusLine span:last-child{color:var(--accent);font-weight:600}

/* сканирование чека */
.scan-ok{
  display:flex;align-items:center;gap:12px;margin:14px 0;padding:14px;
  border-radius:14px;font-size:14px;
  background:color-mix(in srgb, var(--accent) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.scan-ok svg{width:34px;height:34px;flex:none}
.btn.scan{margin-top:14px}

/* личный код покупателя для кассы */
.my-code{
  margin:16px 0 4px;padding:16px;border-radius:16px;text-align:center;
  background:var(--card);border:1px solid var(--line);
}
.mc-title{font-size:13px;color:var(--hint);margin-bottom:10px}
.mc-qr{width:150px;height:150px;display:block;margin:0 auto;border-radius:10px;background:#fff;padding:6px}
.mc-num{font-size:30px;font-weight:800;letter-spacing:4px;color:var(--accent);margin-top:10px}
.mc-hint{font-size:12.5px;color:var(--hint);line-height:1.45;margin-top:8px}

/* кнопка «моё место» на карте */

/* заглушка списка заказов, пока он грузится */
.ord-skel{
  height:96px;border-radius:var(--radius);background:var(--card);
  margin-bottom:10px;animation:pulse 1.4s infinite;
}

/* ===================== чат консультанта: новые элементы ===================== */

/* «Менеджер» в шапке — живой человек рядом, даже если звать не придётся */
.agent-human{
  margin-left:auto;margin-right:6px;border:1px solid var(--line);background:var(--card);
  color:var(--text);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;
}
.agent-human:disabled{opacity:.5}

/* Приветствие карточкой с четырьмя задачами */
.agent-welcome{
  align-self:stretch;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:13px 13px 11px;animation:agentMsg .3s cubic-bezier(.2,.9,.3,1) both;
}
.agent-welcome p{margin:0 0 11px;font-size:14.5px;line-height:1.45}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.welcome-grid button{
  display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--line);
  background:var(--bg);color:var(--text);border-radius:12px;padding:10px;font-size:13px;
  line-height:1.25;cursor:pointer;
}
.welcome-grid i{flex:none;width:22px;height:22px;color:var(--accent);display:grid;place-items:center}
.welcome-grid i svg{width:20px;height:20px}
.welcome-grid button:active{transform:scale(.97)}
.agent-welcome.used .welcome-grid{opacity:.45;pointer-events:none}

/* Кнопки-ответы под её вопросом */
.agent-quick{align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;max-width:92%}
.agent-quick button{
  border:1.5px solid var(--accent);color:var(--accent);background:transparent;border-radius:999px;
  padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;
  animation:pickIn .45s cubic-bezier(.2,.9,.3,1) both;
}
.agent-quick button:active{background:var(--accent);color:#fff}

/* Оценка ответа — тихо, чтобы не мешать разговору */
.agent-rate{align-self:flex-start;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:0 4px}
.agent-rate button{border:0;background:transparent;font-size:15px;cursor:pointer;padding:2px 4px;opacity:.75}
.agent-rate button:active{transform:scale(.85);opacity:1}

/* «В корзину» прямо на карточке */
.pick-add{
  flex:none;border:0;background:var(--accent);color:#fff;border-radius:10px;
  padding:8px 11px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.chat-cart{flex:none;display:flex}
.pick-step{display:flex;align-items:center;border-radius:10px;background:var(--accent);color:#fff;overflow:hidden}
.pick-step button{border:0;background:transparent;color:#fff;width:32px;height:34px;font-size:18px;font-weight:600;cursor:pointer}
.pick-step button:active{background:rgba(0,0,0,.15)}
.pick-step b{min-width:18px;text-align:center;font-size:14px}
.pick-add:active{transform:scale(.95)}

/* Подсказка на странице товара */
.p-hint{
  position:absolute;left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:5;
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;cursor:pointer;
  background:var(--accent);color:#fff;box-shadow:0 8px 24px rgba(38,103,245,.35);
  animation:pickIn .5s cubic-bezier(.2,.9,.3,1) both;
}
.p-hint i{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.p-hint i svg{width:16px;height:16px}
.p-hint span{flex:1;font-size:13.5px;font-weight:600}
.p-hint button{border:0;background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer;opacity:.8}

@media (prefers-reduced-motion: reduce){
  .agent-welcome,.agent-quick button,.p-hint{animation:none}
}

/* ================= Общий дизайн Dukon =================
   Витрина выглядит как сайт и мастер Dukon: шрифт Onest, тёплый светлый фон,
   белые карточки с тонкой рамкой, цвет магазина — только на главных действиях.
   В тёмной теме Telegram (html.dark) остаются цвета самого Telegram. */
html:not(.dark){
  --bg:#F6F5F1; --text:#151617; --hint:#6B6E74; --muted:#6B6E74;
  --card:#FFFFFF; --line:#E6E3DC;
  --shadow:none;
}
body{font-family:'Onest',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;letter-spacing:-.005em}
html:not(.dark) header{background:rgba(246,245,241,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{gap:9px;font-weight:600;font-size:17px;letter-spacing:-.02em;min-width:0}
.brand-ava{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-text);
  display:grid;place-items:center;font-size:14px;font-weight:600;flex:none}
.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}

/* кнопка с баллами — в цвете магазина, без синего */
.bonus-chip{background:var(--accent);color:var(--accent-text);box-shadow:none}

/* карточки товаров: белые, тонкая рамка, без тяжёлых теней */
html:not(.dark) .card{background:#fff;border:1px solid var(--line);box-shadow:none;border-radius:16px}
html:not(.dark) .card .imgwrap, html:not(.dark) .card .ph{background:#fff}
html:not(.dark) .card .noph{background:#F1EEE8}
.card .nm{font-weight:500;letter-spacing:-.01em}
.card .pr{font-weight:600;letter-spacing:-.01em}

/* поиск и поля */
html:not(.dark) .searchbar input, html:not(.dark) .search-field{background:#fff}
html:not(.dark) .search-field{border:1px solid var(--line);border-radius:12px}

/* нижнее меню */
html:not(.dark) .tabbar{background:rgba(255,255,255,.94);border-top:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* второстепенные кнопки — почти чёрные, как в Dukon; цвет магазина остаётся у «В корзину» и «Оформить» */
html:not(.dark) .btn.ghost{background:#fff;border:1px solid var(--line);color:var(--text)}

/* монеты кэшбэка — в цвете магазина */
.coin svg{filter:drop-shadow(0 4px 9px color-mix(in srgb, var(--accent) 40%, transparent))}
.coin-svg .c-face{fill:var(--accent)}
.coin-svg .c-mark{fill:#FFFFFF}
.coin-svg .c-rim{stroke:rgba(255,255,255,.55)}
.coin-svg.flat .c-face{fill:#FFFFFF}
.coin-svg.flat .c-mark{fill:var(--accent)}
.coin-svg.flat .c-rim{stroke:color-mix(in srgb, var(--accent) 45%, transparent)}
/* логотип на всю монету: тонкий светлый край вместо ободка; на цветном значке — белая окантовка, чтобы не слиться */
.coin-svg .c-edge{stroke:rgba(255,255,255,.4)}
.coin-svg.flat.c-full .c-edge{stroke:#fff;stroke-width:2.4}

/* фильтры — спокойная кнопка, цвет магазина только у главных действий */
html:not(.dark) .search-filters{background:#fff;color:var(--text);border:1px solid var(--line)}

/* ---------- категории в стиле Dukon: картинка подбирается сама ---------- */
.tiles{gap:8px}
.tile{
  border-radius:18px;padding:10px 12px 10px 10px;gap:12px;color:var(--text);
  background:var(--card);border:1px solid var(--line);box-shadow:none;
}
.tile:active{transform:scale(.985);box-shadow:none;background:color-mix(in srgb, var(--accent) 5%, var(--card))}
.tile-thumb{
  flex:none;width:56px;height:56px;border-radius:14px;overflow:hidden;position:relative;
  background:color-mix(in srgb, var(--accent) 9%, var(--card));display:grid;place-items:center;
}
.tile-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tile-thumb.ico{color:var(--accent)}
.tile-thumb.ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile-thumb.letter{font-size:22px;font-weight:600;letter-spacing:-.02em}
/* два-три фото товаров — маленькой мозаикой */
.tile-thumb.pics.n2, .tile-thumb.pics.n3{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.tile-thumb.pics.n3 img:first-child{grid-row:span 2}
.tile-thumb.pics img{background:#fff}
.tile-title{font-weight:600;font-size:15.5px;letter-spacing:-.01em;gap:8px}
.tile-n{background:var(--bg);color:var(--hint);font-weight:600;font-size:11.5px;padding:2px 8px}
.tile-sub{color:var(--hint);opacity:1;font-size:12.5px}
.tile-go{background:none;color:var(--hint);width:24px;height:24px}
.tile-go svg{width:16px;height:16px}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .tile{background:var(--card);box-shadow:none}
  .tile-thumb{background:var(--bg)}
}
/* товар без фото — значок категории в цвете магазина */
.noph.auto{background:color-mix(in srgb, var(--accent) 7%, var(--card));color:var(--accent)}
.noph.auto svg{width:38%;height:38%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.noph.auto b{font-size:34px;font-weight:600;opacity:.7}
.bonus-chip[hidden]{display:none}
.order-consent { margin: 8px 2px 4px; font-size: 12px; line-height: 1.4; color: var(--hint, #8a8f98); text-align: center; }
.order-consent a { color: inherit; text-decoration: underline; }

/* ---------- варианты товара: цвет и размер ---------- */
.cdots { display: flex; align-items: center; gap: 4px; margin: 4px 0 2px; }
.cdots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.cdots i.no { opacity: .35; }
.cdots span { font-size: 11px; color: var(--hint); }
#varBox { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 6px; }
#varBox.shake { animation: vshake .35s; }
@keyframes vshake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.vlab { font-size: 14px; color: var(--hint); margin-bottom: 8px; }
.vlab b { color: var(--text); font-weight: 600; }
.swatches, .sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { width: 40px; height: 40px; border-radius: 50%; padding: 3px; border: 2px solid transparent; background: none; cursor: pointer; position: relative; }
.sw i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); }
.sw.on { border-color: var(--text); }
.sw.no i { opacity: .35; }
.sw.no::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--hint); transform: rotate(-45deg); }
.sz { min-width: 48px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card);
      color: var(--text); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.sz.on { border-color: var(--text); background: var(--text); color: var(--bg); }
.sz.no { opacity: .4; text-decoration: line-through; cursor: default; }
.vleft { font-size: 13px; color: #C0612B; font-weight: 600; }
.line .var { font-size: 12.5px; color: var(--hint); margin-top: 1px; }

/* ---------- баннеры на главной ---------- */
.banners { margin: 0 0 14px; }
.bn-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bn-track::-webkit-scrollbar { display: none; }
.bn-slide { flex: 0 0 100%; aspect-ratio: 12 / 5; scroll-snap-align: start; border: 0; padding: 0; margin: 0; cursor: pointer;
  background-size: cover; background-position: center; display: flex; align-items: flex-end; text-align: left; font: inherit; }
.bn-txt { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; color: #fff; width: 100%; }
.bn-slide.has-img .bn-txt { background: linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0)); }
.bn-txt b { font-size: 18px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; max-width: 85%; }
.bn-txt span { font-size: 13px; opacity: .92; max-width: 85%; }
.bn-txt em { align-self: flex-start; font-style: normal; font-size: 12.5px; font-weight: 700; background: #fff; color: #151617;
  padding: 5px 12px; border-radius: 99px; margin-top: 6px; }
/* Слайд Dukon: свой тёмный фон, пометка «Реклама» в углу */
.bn-slide.bn-ad { position: relative; background-color: #1B1F2A; }
.bn-slide.bn-ad:not(.has-img) { background: radial-gradient(120% 140% at 100% 0%, #3B4A7A 0%, #1B1F2A 60%) !important; }
/* Справа на картинке — телефоны с витриной и админкой (tools/ad_image.py), текст держим слева */
.bn-slide.bn-ad.has-img { background-position: right center; }
.bn-slide.bn-ad.has-img .bn-txt { background: none; }
.bn-slide.bn-ad .bn-txt b { max-width: 68%; }
.bn-slide.bn-ad .bn-txt span { max-width: 64%; font-size: 12.5px; line-height: 1.35; }
.bn-adtag { position: absolute; top: 8px; right: 10px; font-size: 10.5px; color: rgba(255,255,255,.6); letter-spacing: .02em; }
.bn-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.bn-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: width .25s, background .25s; }
.bn-dots i.on { width: 18px; background: var(--text); }

/* ---------- промокод при оформлении ---------- */
.promo-row { display: flex; gap: 8px; margin: 10px 0 4px; }
.promo-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.promo-row .btn { width: auto; padding: 0 16px; }
.promo-msg { font-size: 13px; min-height: 16px; margin-bottom: 6px; }
.promo-msg.ok { color: #2F6B45; } .promo-msg.bad { color: #C0392B; }

/* ---------- веб-версия: полоска «удобнее в Telegram» ---------- */
.web-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; background: #229ED9; color: #fff; }
.web-bar span { flex: 1; }
.web-bar a { color: #fff; font-weight: 700; text-decoration: none; background: rgba(255,255,255,.2); padding: 5px 12px; border-radius: 99px; white-space: nowrap; }
.web-bar button { background: none; border: 0; color: #fff; opacity: .8; font-size: 14px; cursor: pointer; padding: 4px; }

/* «Приведи друга» */
.ref-card{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--card,#fff)),var(--card,#fff))}
.ref-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--muted,#777)}
.ref-stats:empty{display:none}
.ref-card .btn{width:100%}

/* Набор товаров */
.bundle-box{margin:14px 0;padding:12px;border:1px solid var(--line,#eee);border-radius:14px;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.bundle-box h4{margin:0 0 8px;font-size:14px}
.bundle-it{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer}
.bundle-it img,.bundle-it i{width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--soft,#f2f2f2);flex:none}
.bundle-it span{flex:1;font-size:14px}
.bundle-it b{font-size:13px;color:var(--muted,#777)}
.bundle-save{margin-top:8px;font-weight:600;color:var(--accent)}
.bundle-save s{font-weight:400;color:var(--muted,#777);margin-left:6px}

/* Видео товара */
.gallery .gvid{width:82%;flex:none;aspect-ratio:1;object-fit:cover;border-radius:14px;background:#000;scroll-snap-align:center}
.imgwrap{position:relative}
.vid-mark{position:absolute;left:8px;bottom:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  display:grid;place-items:center;font-size:11px;padding-left:2px;cursor:pointer;backdrop-filter:blur(4px)}

/* Выбор языка */
.lang-list{display:flex;flex-direction:column;gap:8px}
.lang-list button{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid var(--line,#eee);
  border-radius:14px;background:var(--card,#fff);font:inherit;font-size:16px;color:var(--text);cursor:pointer}
.lang-list button b{font-size:12px;color:var(--muted,#888)}
.lang-list button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* «Оформить заказ» внутри чата консультанта */
.agent-checkout { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 12px 0; padding: 12px 16px;
  border: 0; border-radius: 14px; background: var(--accent, #B23A48); color: #fff; font: inherit; font-size: 15px; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); animation: agentCheckIn .25s ease; }
.agent-checkout[hidden] { display: none; }
.agent-checkout span { opacity: .9; font-variant-numeric: tabular-nums; }
@keyframes agentCheckIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Оптовая цена для оптовика */
.ws { font-size: 12px; color: #1E6B45; background: #E8F4EC; border-radius: 8px; padding: 3px 8px; margin: 4px 0 2px; display: inline-block; }
.ws b { font-weight: 700; }
.ws.big { font-size: 14px; padding: 6px 10px; margin: 6px 0 4px; }
/* Уровень покупателя */
.lvl-now { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--chip, #f3f1ee); margin-bottom: 8px; }
.lvl-now b { font-size: 16px; }
.lvl-now span { font-size: 13px; font-weight: 600; }
.lvl-now.lvl-silver { background: linear-gradient(135deg, #EEF1F4, #D9DEE4); }
.lvl-now.lvl-gold { background: linear-gradient(135deg, #FFF3C4, #F2D272); }
/* Ответ живого сотрудника в чате консультанта */
.agent-msg.staff { background: var(--accent, #B23A48) !important; color: #fff !important; }
.agent-msg .agent-staff { display: block; font-size: 11px; opacity: .8; margin-bottom: 3px; font-weight: 600; }
.agent-msg.sys { align-self: center; background: transparent !important; color: var(--muted, #888) !important; font-size: 12.5px; text-align: center; box-shadow: none !important; }

/* одно фото у товара — во всю ширину, без пустого места под второе */
.gallery.one img,.gallery.one .gvid{width:100%}
.gallery img{cursor:zoom-in}
/* фото на весь экран */
.pview{position:fixed;inset:0;z-index:10000;background:#000;animation:pvIn .18s ease}
.pview.out{opacity:0;transition:opacity .18s}
@keyframes pvIn{from{opacity:0}to{opacity:1}}
.pv-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pv-track::-webkit-scrollbar{display:none}
.pv-slide{flex:0 0 100%;height:100%;overflow:hidden;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.pv-slide img{max-width:100%;max-height:100%;object-fit:contain;display:block;background:#fff}
.pv-slide.z{overflow:auto;display:block;cursor:zoom-out}
.pv-slide.z img{max-width:none;max-height:none;width:240%}
.pv-x{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(255,255,255,.92);color:#111;font-size:18px;cursor:pointer}
.pv-count{position:absolute;top:calc(20px + env(safe-area-inset-top));left:16px;color:#fff;font-size:14px;font-weight:600}
.pv-hint{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:7px 12px;border-radius:99px;
  background:rgba(255,255,255,.16);color:#fff;font-size:13px;white-space:nowrap;pointer-events:none}
/* не получилось определить место: коротко и сразу карта */
#locStatus svg{width:18px;height:18px;flex:none}
.geo-fail{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-top:4px;border-radius:12px;background:#FFF6E6;color:#6B4700;font-size:13.5px;line-height:1.4}
.geo-fail b{display:block;font-weight:600}
.geo-fail span{display:block;margin-top:2px}
.geo-fail svg{margin-top:1px;color:#C98A1B}
#checkoutMap{margin-top:10px}
/* чат: кнопка «Позвать менеджера» и подсказка */
.agent-human{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.agent-human svg{flex:none}
.agent-note{align-self:center;max-width:88%;margin:4px auto 2px;padding:7px 12px;border-radius:12px;background:var(--soft,#F1EFEA);
  color:var(--muted,#6b6e74);font-size:12.5px;line-height:1.4;text-align:center}

/* ---------- отзывы покупателей на карточке товара ---------- */
.rev{margin:16px 0 4px}
.rev-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.rev-h b{font-size:15px}
.rev-avg,.rev-st{color:#E0A100;font-size:13px;white-space:nowrap}
.rev-avg i,.rev-st i{font-style:normal;color:var(--line)}
.rev-i{padding:10px 0;border-top:1px solid var(--line)}
.rev-top{display:flex;align-items:center;gap:8px;font-size:13.5px}
.rev-top small{margin-left:auto;color:var(--hint);font-size:12px}
.rev-i p{margin:4px 0 0;font-size:14px;line-height:1.4}

/* строки «Промокод» и «Оплатить баллами» в итоге скрыты, пока не применены: раньше висели пустыми */
.totals div[hidden]{display:none}

/* ================= Ноутбук и компьютер =================
   Витрина сделана под телефон; на широком экране она растягивалась: баннер во весь экран,
   три гигантские карточки в ряд и нижнее меню на всю ширину. Здесь — нормальный сайт:
   содержимое по центру шириной до 1200, 5–6 карточек в ряд, компактное меню-«док» снизу,
   карточка товара и разговор с консультантом — окном, а не шторкой на весь экран. */
@media (min-width: 900px) {
  :root { --desk-pad: max(24px, calc((100vw - 1200px) / 2)); }
  header, .active-filters { padding-left: var(--desk-pad); padding-right: var(--desk-pad); }
  .announce { padding-left: var(--desk-pad); padding-right: var(--desk-pad); }
  main { padding: 18px var(--desk-pad) 28px; }
  .brand { font-size: 20px; }
  .searchbar { max-width: 760px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; }
  .card { transition: transform .15s ease, box-shadow .15s ease; }
  @media (hover: hover) and (pointer: fine) { .card:hover { box-shadow: 0 10px 24px -14px rgba(16, 24, 40, .35); } }
  .card .nm { font-size: 14px; }
  .card .pr { font-size: 16px; }
  /* Баннер — картинка с текстом внутри: обрезать нельзя. На широком экране ставим два рядом,
     каждый целиком и вдвое меньше — как в больших магазинах, а не плакат на весь экран */
  .bn-track { gap: 14px; border-radius: 0; }
  .bn-slide { flex: 0 0 calc(50% - 7px); aspect-ratio: 12 / 5; border-radius: 16px; overflow: hidden; }
  .bn-track:has(> .bn-slide:only-child) { justify-content: center; }
  .banners:not(:has(.bn-slide:nth-child(3))) .bn-dots { display: none; }
  .bn-txt { padding: 18px 22px; }
  .bn-txt b { font-size: 20px; max-width: 70%; }
  .bn-txt span { font-size: 13.5px; max-width: 70%; }
  /* нижнее меню — компактный «док» по центру */
  .tabbar { align-self: center; width: auto; gap: 2px; margin: 0 0 14px; padding: 5px; border: 1px solid var(--line);
            border-radius: 16px; background: var(--bg); box-shadow: 0 10px 30px -12px rgba(16, 24, 40, .28); }
  .tabbar button { flex: none; flex-direction: row; gap: 8px; padding: 8px 16px; border-radius: 12px; }
  .tabbar button span { font-size: 14px; }
  .tabbar button i { width: 19px; height: 19px; }
  .tabbar button:hover { background: var(--card); }
  .tabbar button.active { background: var(--card); }
  /* окна вместо шторок снизу */
  .sheet { align-items: center; justify-content: center; padding: 24px; }
  .sheet-inner { max-width: 760px; max-height: 88vh; border-radius: 22px; padding-bottom: 24px; }
  .gallery { margin: 0; padding: 0; }
  .gallery img { width: min(420px, 62%); }
  .gallery.one img { width: min(460px, 100%); margin: 0 auto; }
  .agent-wrap { align-items: flex-end; justify-content: flex-end; padding: 24px; background: rgba(0, 0, 0, .25); }
  .agent-box { width: 420px; height: min(680px, calc(100vh - 48px)); border-radius: 22px;
               box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); }
  .toast { max-width: 520px; }
  /* корзина, оформление, заказы, «Ещё» — не растягиваем формы на 1200: колонка 720 по центру */
  body[data-screen="cart"] #screen, body[data-screen="orders"] #screen, body[data-screen="info"] #screen {
    max-width: 720px; margin: 0 auto; }
}
@media (min-width: 1400px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

/* ---------- вид бизнеса: на вес, значки, стоп-лист, время доставки, получатель ---------- */
.per{font-size:.72em;font-weight:500;color:var(--hint);margin-left:3px}
.badge.biz{background:#0f766e}
.badge.biz-spicy{background:#c2410c}
.biz-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.biz-tags .badge{font-size:11px;padding:4px 9px}
.outmark.soon{background:rgba(15,118,110,.82)}
.when-days,.when-slots{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px}
.when-days .chip,.when-slots .chip{
  border:1.5px solid var(--line);background:var(--bg);color:var(--text);
  border-radius:11px;padding:9px 14px;font:inherit;font-size:14px;cursor:pointer;
}
.when-days .chip{font-weight:600}
.when-days .chip.on,.when-slots .chip.on{border-color:var(--accent);background:var(--accent);color:var(--accent-text)}
label.chk{display:flex;gap:10px;align-items:center;color:var(--text);font-size:14.5px;margin:14px 0 8px;cursor:pointer}
label.chk input{width:auto;margin:0}
#rcBox{display:flex;flex-direction:column;gap:8px}
#rcBox[hidden]{display:none}
#rcBox label.chk{margin:4px 0}
.order .repeat{display:inline-flex;align-items:center;gap:6px;margin-top:10px}
.order .repeat svg{width:16px;height:16px}
/* «Нет сегодня» — не распродано: цену не зачёркиваем, фото не гасим до серого */
.card.out.soon .pr{color:var(--text);text-decoration:none}
.card.out.soon .ph{filter:none;opacity:.75}

/* корзина: товар добавился — значок коротко подпрыгивает */
@keyframes cartPop{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}
#cartCount.pop{animation:cartPop .26s cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){#cartCount.pop{animation:none}}
/* Добавки к блюду: галочки с ценой */
.addons{margin:12px 0 4px;display:flex;flex-direction:column;gap:6px}
.addons>label:first-child{font-weight:600;font-size:14px;margin-bottom:2px}
.ad-row{display:flex;align-items:center;gap:10px;margin:0!important;padding:10px 12px;border:1px solid var(--line,#e6e2db);border-radius:12px;cursor:pointer;font-size:14px}
.ad-row input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--accent,#151617)}
.ad-row span{flex:1}
.ad-row b{font-weight:600;color:var(--hint,#6b6b6b);white-space:nowrap}
.ad-row:has(input:checked){border-color:var(--accent,#151617)}
.ad-row:has(input:checked) b{color:inherit}
.ad-in{text-align:center;margin-top:6px}
/* Фото покупателей в отзывах */
.rev-ph{display:flex;gap:6px;margin-top:8px}
.rev-ph img{width:72px;height:72px;object-fit:cover;border-radius:10px;cursor:zoom-in;background:#f2efe9}

/* Телефон, подтверждённый в Telegram (14.10) */
.ph-ok input[readonly] { opacity: .85; }
.ph-ok span { display: block; margin: 4px 0 2px; font-size: 12.5px; color: #1f9d55; }
.ph-ask { width: 100%; justify-content: center; }
.ph-sms { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ph-sms input { flex: 1; min-width: 0; margin: 0; }
.ph-sms .btn { flex: none; white-space: nowrap; }
.ph-sms[hidden] { display: none; }

/* ---------- нижнее меню (17.10): «капсула» как в iOS ----------
   Тонкие иконки; у открытой вкладки — залитая иконка цвета магазина на мягкой подложке.
   Подписи не уходят под полоску iPhone: отступ снизу — от iPhone, от Telegram или из «Оформления». */
:root{--sab:max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px), var(--demo-sab, 0px))}
.tabbar{--tab-cut:#fff}
html.dark .tabbar{--tab-cut:#1c1c1e}
.tabbar button i svg+svg{display:none}
.tabbar button.active i svg:first-child:not(:only-child){display:none}
.tabbar button.active i svg+svg{display:block}
.tabbar button.active i{transform:none}
@media (max-width:899px){
  .tabbar,html:not(.dark) .tabbar{margin:2px 10px calc(6px + var(--sab));padding:4px;gap:2px;border-radius:28px;
    background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.07);
    box-shadow:0 10px 28px -12px rgba(16,24,40,.3),0 1px 3px rgba(16,24,40,.06);
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  html.dark .tabbar{background:rgba(36,36,38,.94);border-color:rgba(255,255,255,.08)}
  .tabbar button{flex:1;min-width:0;padding:6px 2px 5px;gap:2px;border-radius:22px;color:#8a8a8e}
  .tabbar button i{width:25px;height:25px}
  .tabbar button span{font-size:10.5px;font-weight:500;letter-spacing:-.005em;line-height:1.25;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabbar button.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .tabbar button.active span{font-weight:600}
  .agent-fab{bottom:calc(var(--tabbar-h, 72px) + var(--sab) + 12px)}
  main{padding-bottom:16px}
  /* 18.10: капсула висит поверх каталога, как в iOS: ниже (полоска iPhone прямо под ней), каталог прокручивается под ней.
     Раньше она стояла отдельной строкой с отступом 6 + 34 пт снизу — поднималась и съедала место. */
  :root{--tab-gap:max(calc(var(--sab) - 14px), 8px);--tabbar-h:60px}
  .tabbar,html:not(.dark) .tabbar{position:fixed;left:10px;right:10px;bottom:var(--tab-gap);margin:0;z-index:40}
  .tabbar button{padding:5px 2px 4px}
  .tabbar button i{width:24px;height:24px}
  .tabbar button span{font-size:10px}
  main{padding-bottom:calc(var(--tabbar-h) + var(--tab-gap) + 18px)}
  .agent-fab{bottom:calc(var(--tabbar-h) + var(--tab-gap) + 14px)}
}
@media (min-width:900px){
  .tabbar{border-radius:999px;padding:5px}
  .tabbar button{border-radius:999px;color:#6e6e73}
  .tabbar button.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
}