/* ==========================================================================
   ВЫГОДИН — общие блоки. Шаблоны — templates/partials/*:
   oc- карточка предложения · sv- «Сохранить» · verdict/vd- вердикт ·
   tb- индекс доверия · pa- оповещение о цене · crumbs · pager · empty-state ·
   note · tabs · sk- скелетон · pgn- пагинация · shop-mono/shop-logo · trust-idx.
   ========================================================================== */

/* --- Сетка карточек: 3 в ряд ПК, 2 промежуточная, 1 телефон ------------- */
.oc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-20); align-items: stretch; }
.oc-grid > li { display: flex; min-width: 0; }
.oc-grid > li > .oc { flex: 1 1 auto; }
@media (max-width: 1199px) { .oc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); } }
@media (max-width: 767px) { .oc-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); } }

/* ==========================================================================
   Карточка предложения (base/offer-card A)
   .oc--urgent  срочная (≤3 дней): рамка 2px осторожно, точка у даты пульсирует раз
   .oc--bad     не работает по голосам / это не скидка: размер скидки серый
   ========================================================================== */
.oc {
  min-width: 0; padding: 20px;
  display: flex; flex-direction: column; gap: var(--sp-14);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-18);
  transition: border-color var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std);
}
.oc:hover { border-color: var(--line-strong); box-shadow: var(--sh-card-hover); }
.oc--urgent { border: 2px solid var(--warn); padding: 19px; }
.oc--urgent:hover { border-color: var(--warn-strong); }
.oc-head { display: flex; align-items: center; gap: var(--sp-10); }
.oc-shop { display: flex; align-items: center; gap: var(--sp-10); flex: 1 1 auto; min-width: 0; min-height: 44px; color: var(--text); border-radius: var(--r-12); }
.oc-shop:hover { color: var(--text); }
.oc-shop:hover .oc-shop-n { color: var(--brand-text); }
/* логотип — белая плашка (фото логотипов сняты на белом и в тёмной теме) */
.oc-logo { height: 34px; max-width: 96px; padding: 0 6px; flex-shrink: 0; border-radius: var(--r-8); background: #FFFFFF; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.oc-logo img { max-width: 84px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
.oc-mono, .shop-mono {
  width: var(--sz, 44px); height: var(--sz, 44px); border-radius: var(--r-12); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text); font-weight: 700; font-size: 14px; letter-spacing: .02em;
}
.shop-logo { width: var(--sz, 44px); height: var(--sz, 44px); border-radius: var(--r-12); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid var(--line); }
.shop-logo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.oc-shop-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oc-shop-n { font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--dur-hover) var(--ease-std); }
.oc-when { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: 14px; line-height: 1.3; color: var(--text-3); }
.oc-when--urgent { font-weight: 600; color: var(--warn-text-2); }
.oc-hg { position: relative; display: inline-flex; }
.oc-pulse { position: absolute; top: -3px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); border: 1.5px solid var(--surface); animation: oc-pulse 1s var(--ease-std) .7s 1 both; }
@keyframes oc-pulse { 0% { box-shadow: 0 0 0 0 rgba(240,160,32,.7); } 70% { box-shadow: 0 0 0 9px rgba(240,160,32,0); } 100% { box-shadow: 0 0 0 0 rgba(240,160,32,0); } }
.oc-size { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.03em; color: var(--brand-text); white-space: nowrap; flex-shrink: 0; }
.oc-size.is-muted { color: var(--text-3); }
.oc-size--word { font-size: 18px; letter-spacing: -0.02em; }
.oc-size--word.is-muted { color: var(--text-2); }
.oc-title { font-family: var(--font); font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.oc-title a { color: var(--text); }
.oc-title a:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.oc-marks { display: flex; flex-direction: column; gap: var(--sp-8); }
/* полоска голосов: заполняется слева после появления карточки */
.oc-votes { display: flex; align-items: center; gap: var(--sp-10); }
.oc-track { flex: 1 1 auto; height: 6px; border-radius: 6px; background: var(--brand-track); overflow: hidden; display: flex; }
.oc-fill { height: 6px; border-radius: 6px; background: var(--brand); transform-origin: 0 50%; animation: oc-bar var(--dur-enter) var(--ease-out) .45s both; }
@keyframes oc-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.oc-votes-t { font-size: 13px; font-weight: 600; color: var(--brand-on-bg); white-space: nowrap; }
.oc-votes--bad .oc-track { background: var(--risk-track); }
.oc-votes--bad .oc-fill { background: var(--risk); }
.oc-votes--bad .oc-votes-t { color: var(--risk); }
/* строка условий: порог корзины, суммирование, исключения (витрина главной) */
.oc-terms { margin: 0; display: flex; align-items: flex-start; gap: var(--sp-8); font-size: 14px; line-height: 1.4; color: var(--text-2); }
.oc-terms > .ic { flex-shrink: 0; margin-top: 1px; color: var(--text-3); }
.oc-actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-8); }
.oc-go { width: 100%; }
.oc-cta { width: 100%; }

/* --- Кнопка кода: маска слева, зелёная «шторка» с загнутым уголком -------
   Состояния (app.js): .is-open — код раскрыт и скопирован; .is-error — буфер недоступен */
.oc-code {
  position: relative; width: 100%; height: 48px; padding: 0 14px; overflow: hidden;
  display: flex; align-items: center; gap: var(--sp-8); text-align: left;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-12); background: var(--surface-quiet); color: var(--text);
  transition: border-color var(--dur-menu) var(--ease-std), background-color var(--dur-menu) var(--ease-std);
}
.oc-code > .ic { color: var(--text-2); }
.oc-mask { font-size: 15px; font-weight: 600; letter-spacing: .1em; color: var(--text-2); white-space: nowrap; }
.oc-dots { font-size: 19px; line-height: 1; letter-spacing: .06em; }
.oc-shut {
  position: absolute; top: 0; right: 0; bottom: 0; left: 112px;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-8); padding-left: 8px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  background: var(--brand); color: #FFFFFF; font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: transform var(--dur-hover) var(--ease-std), background-color var(--dur-hover) var(--ease-std);
}
.oc-fold { position: absolute; left: 0; top: 0; width: 14px; height: 14px; clip-path: polygon(100% 0, 0 100%, 100% 100%); background: var(--brand-hover); transition: background-color var(--dur-hover) var(--ease-std); }
.oc-code:hover .oc-shut { transform: translateX(10px); background: var(--brand-hover); }
.oc-code:hover .oc-fold { background: var(--brand-fold); }
.oc-code--muted .oc-shut { background: var(--surface-3); color: var(--text); }
.oc-code--muted .oc-fold { background: var(--field-border); }
.oc-code--muted:hover .oc-shut { background: var(--line); }
.oc-code--muted:hover .oc-fold { background: #B8BDC7; }
/* раскрыт: шторка уезжает вправо, маска посимвольно «дешифруется», галочка рисуется */
.oc-code.is-open, .oc-code.is-error { justify-content: space-between; padding: 0 12px 0 14px; border-style: solid; }
.oc-code.is-open { border-color: var(--brand-text); background: var(--brand-bg); }
.oc-code.is-error { border-color: var(--warn); background: var(--warn-bg); }
.oc-code.is-open .oc-shut, .oc-code.is-error .oc-shut { animation: oc-slide .2s var(--ease-std) .08s both; }
@keyframes oc-slide { from { transform: translateX(0); } to { transform: translateX(110%); } }
.oc-code-v { display: inline-flex; font-size: 16px; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--text); user-select: all; }
.oc-code.is-error .oc-code-v { background: var(--surface); box-shadow: 0 0 0 4px var(--surface); border-radius: 3px; }
.oc-ch { display: inline-grid; }
.oc-ch > * { grid-area: 1 / 1; }
.oc-ch-m { animation: oc-mk .06s linear both; animation-delay: var(--d, 0s); opacity: 0; }
.oc-ch-g { animation: oc-gl .12s var(--ease-out) both; animation-delay: var(--d, 0s); }
@keyframes oc-mk { from { opacity: 1; } to { opacity: 0; } }
@keyframes oc-gl { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.oc-code-st { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--brand-on-bg); animation: vg-fade .2s var(--ease-std) .5s both; }
.oc-code.is-error .oc-code-st { color: var(--warn-text); }
.oc-code-st svg path { stroke-dasharray: 24; animation: tt-draw .3s var(--ease-out) .55s both; }

/* узкая карточка (телефон 360–390 в колонке магазина; размер — по содержимому кнопки): шторка шире, текст мельче,
   ещё уже — без значка копирования; «Показать код» не упирается в край */
.oc-actions .oc-code { container-type: inline-size; }
@container (max-width: 239px) {
  .oc-actions .oc-shut { left: 96px; gap: 6px; padding-left: 6px; font-size: 14px; }
}
@container (max-width: 199px) {
  .oc-actions .oc-shut .ic { display: none; }
}

@media (max-width: 767px) {
  .oc { padding: 16px; gap: var(--sp-12); border-radius: var(--r-16); }
  .oc--urgent { padding: 15px; }
  .oc-title { font-size: 17px; }
  .oc-code { height: 48px; }
  .oc-shut { left: 112px; }
}

/* ==========================================================================
   «Сохранить» (base/save-button A): вторичная кнопка с закладкой;
   сохранено — зелёная рамка и залитая закладка; при отправке — «Сохраняем»
   ========================================================================== */
.sv { display: flex; flex-direction: column; gap: var(--sp-10); }
.sv-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); }
.sv-form { margin: 0; display: flex; }
.sv-btn { gap: var(--sp-8); }
.sv-ic { position: relative; width: 18px; height: 18px; display: block; flex-shrink: 0; }
.sv-ic > svg, .sv-fill { position: absolute; left: 0; top: 0; }
.sv-fill { width: 18px; height: 18px; display: block; clip-path: inset(100% 0 0 0); transition: clip-path .2s var(--ease-std); }
.sv-spin { opacity: 0; }
.sv-label { display: grid; justify-items: start; }
.sv-label > * { grid-area: 1 / 1; }
.sv-l-busy { visibility: hidden; }
.sv-btn.is-saved { border-color: var(--brand-text); background: var(--brand-bg); color: var(--brand-on-bg); }
.sv-btn.is-saved:hover { background: var(--brand-bg-hover); color: var(--brand-on-bg); border-color: var(--brand-text); }
.sv-btn.is-saved .sv-fill { clip-path: inset(0 0 0 0); }
.sv-btn.is-saved .sv-ic { animation: sv-pop .2s var(--ease-spring) both; }
@keyframes sv-pop { from { transform: scale(.8); } to { transform: scale(1); } }
/* отправка: спиннер вместо закладки, «Сохраняем» — ширина не меняется */
.sv-btn.is-busy { pointer-events: none; }
.sv-btn.is-busy .sv-ic > svg:first-child, .sv-btn.is-busy .sv-fill { opacity: 0; }
.sv-btn.is-busy .sv-spin { opacity: 1; animation: vg-spin .9s linear infinite; }
.sv-btn.is-busy .sv-l-now { visibility: hidden; }
.sv-btn.is-busy .sv-l-busy { visibility: visible; }
.sv-all { height: 46px; }
.sv-cap { display: flex; align-items: center; gap: var(--sp-8); font-size: 14px; line-height: 1.45; color: var(--text-3); }
.sv-cap svg { align-self: flex-start; margin-top: 2px; }
.sv-cap-a { font-weight: 600; color: var(--brand-text); white-space: nowrap; }
.sv-cap-a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Вердикт (base/verdict A): тон = цвет + иконка + слово; кот с эмоцией
   ========================================================================== */
.verdict::before { content: none; } /* у старого .verdict из components.css была цветная черта */
.verdict { position: static; overflow: visible; border: 0; border-radius: var(--r-20); padding: 24px 28px; display: flex; flex-direction: column; gap: var(--sp-18); background: var(--surface-2); animation: vg-rise var(--dur-enter) var(--ease-out) both; }
.vd-top { display: flex; align-items: flex-start; gap: var(--sp-20); }
.verdict__icon { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--text-3); color: #FFFFFF; animation: vd-stamp .25s var(--ease-out) .12s both; }
@keyframes vd-stamp { 0% { opacity: 0; transform: scale(1.3) rotate(-12deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.vd-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.verdict__label { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--text-2); }
.verdict__title { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
.verdict__reason { font-size: 18px; line-height: 1.5; color: var(--text); }
.verdict__cat { flex-shrink: 0; }
.verdict--good { background: var(--brand-bg); }
.verdict--good .verdict__icon { background: var(--brand); }
.verdict--good .verdict__label { color: var(--brand-on-bg); }
.verdict--good .verdict__title { color: var(--brand-text); }
.verdict--normal { background: var(--surface-2); }
.verdict--normal .verdict__icon { background: #5B6270; }
.verdict--wait { background: var(--warn-bg); }
.verdict--wait .verdict__icon { background: var(--warn); }
.verdict--wait .verdict__label { color: var(--warn-text); }
.verdict--wait .verdict__title { color: var(--warn-text-2); }
.verdict--fake { background: var(--risk-bg); }
.verdict--fake .verdict__icon { background: #B42318; }
.verdict--fake .verdict__label, .verdict--fake .verdict__title { color: var(--risk); }
.verdict--no_data { background: var(--surface); border: 2px dashed var(--placeholder); padding: 22px 26px; }
.verdict--no_data .verdict__icon { background: var(--surface); border: 2px dashed var(--placeholder); color: var(--text-2); }
.verdict__evidence { border-radius: var(--r-14); background: var(--surface); }
.verdict--no_data .verdict__evidence { border: 1px solid #7A808C; }
.vd-sum { height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); border-radius: var(--r-14); font-size: 15px; font-weight: 600; color: var(--text); }
.vd-sum-l { display: flex; align-items: center; gap: var(--sp-8); }
.vd-sum-l svg { color: var(--brand-text); }
.verdict--wait .vd-sum-l svg { color: var(--warn-text-2); }
.verdict--fake .vd-sum-l svg { color: var(--risk); }
.vd-sum:hover .vd-sumt { text-decoration: underline; text-underline-offset: 3px; }
.vd-chev { transition: transform var(--dur-menu) var(--ease-std); }
.verdict__evidence[open] .vd-chev { transform: rotate(180deg); }
.vd-rows { padding: 0 16px 12px; display: flex; flex-direction: column; }
.verdict__evidence[open] .vd-row { animation: vd-row .24s var(--ease-out) both; }
.verdict__evidence[open] .vd-row:nth-child(2) { animation-delay: 60ms; }
.verdict__evidence[open] .vd-row:nth-child(3) { animation-delay: 120ms; }
.verdict__evidence[open] .vd-row:nth-child(4) { animation-delay: 180ms; }
.verdict__evidence[open] .vd-row:nth-child(n+5) { animation-delay: 240ms; }
@keyframes vd-row { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vd-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); padding: 12px 0; border-top: 1px solid var(--line-soft); }
.vd-row dt { display: flex; align-items: center; gap: var(--sp-8); font-size: 15px; color: var(--text-2); }
.vd-row dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.verdict__total { padding: 14px 0 4px; border-top-color: var(--line-field); }
.verdict__total dt { flex-direction: column; align-items: flex-start; gap: 2px; }
.verdict__total dt b { font-size: 15px; font-weight: 700; color: var(--text); }
.verdict__total dt span { font-size: 13px; color: var(--text-3); }
.verdict__total dd { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 30px; letter-spacing: -0.02em; color: var(--brand-text); }
@media (max-width: 767px) {
  .verdict { padding: 18px 16px; gap: var(--sp-14); border-radius: var(--r-18); }
  .verdict--no_data { padding: 16px 14px; }
  .vd-top { gap: var(--sp-12); }
  .verdict__icon { width: 44px; height: 44px; }
  .verdict__icon svg { width: 22px; height: 22px; }
  .verdict__title { font-size: 22px; }
  .verdict__reason { font-size: 16px; }
  .verdict__cat { width: 52px; height: 52px; }
  .vd-rows { padding: 0 14px 10px; }
}

/* ==========================================================================
   Индекс доверия: разбор (base/trust-breakdown D)
   ========================================================================== */
.tb { display: flex; flex-direction: column; gap: var(--sp-40); }
.tb-tiles { display: flex; flex-direction: column; gap: var(--sp-12); max-width: 560px; }
.tb-tiles-h { font-size: 14px; font-weight: 700; color: var(--text-2); }
.tb-sum-row { display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr) 12px 88px; gap: 6px; align-items: stretch; }
.tb-tile { display: flex; flex-direction: column; gap: var(--sp-6); padding: 14px 12px; border-radius: var(--r-14); background: var(--surface-2); min-width: 0; }
.tb-tile--total { padding: 14px; background: var(--surface); border: 1.5px solid var(--line); }
.tb-tile-v { display: flex; align-items: center; gap: var(--sp-8); }
.tb-sw { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.tb-sw--ok { background: var(--trust-good); }
.tb-sw--bad { background: #B42318; }
.tb-sw--unk, .tb-seg--unk { background-color: var(--surface-3); background-image: repeating-linear-gradient(135deg, #9AA0AA 0 2px, transparent 2px 6px); }
.tb-sw--unk { border: 1px solid #C9CDD4; }
.tb-num { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 29px; letter-spacing: -0.02em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tb-num--ok { color: var(--brand-text); }
.tb-num--bad { color: var(--risk); }
.tb-num--total { color: var(--text); }
.tb-tile-l { font-size: 14px; line-height: 1.3; color: var(--text-3); }
.tb-op { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--text-3); }
.tb-scale { display: flex; flex-direction: column; gap: var(--sp-14); }
.tb-scale-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-16); }
.tb-h { font-family: var(--font); font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.tb-groups { display: grid; grid-template-columns: var(--cols, repeat(5, minmax(0, 1fr))); gap: var(--sp-10); align-items: start; }
.tb-group { display: flex; flex-direction: column; gap: var(--sp-14); min-width: 0; }
.tb-bar { display: flex; gap: 4px; height: 40px; border-radius: var(--r-12); overflow: hidden; animation: tb-wipe var(--dur-enter) var(--ease-out) both; animation-delay: calc(.2s + var(--g, 0) * 60ms); }
@keyframes tb-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tb-seg { display: block; flex-basis: 0; flex-shrink: 1; height: 40px; }
.tb-seg--ok { background: var(--trust-good); }
.tb-seg--bad { background: #B42318; }
.tb-gmeta { display: flex; flex-direction: column; gap: var(--sp-8); padding: 0 2px; }
.tb-gtop { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8); }
.tb-gscore { font-size: 16px; font-weight: 700; white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.tb-gscore--weak { color: var(--warn-text-2); }
.tb-gscore--bad { color: var(--risk); }
.tb-gname { font-size: 15px; font-weight: 600; line-height: 1.3; }
.tb-tag { align-self: flex-start; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-8); font-size: 13px; font-weight: 600; white-space: nowrap; }
.tb-tag--ok { background: var(--brand-bg); color: var(--brand-on-bg); }
.tb-tag--weak { background: var(--warn-bg); color: var(--warn-text); }
.tb-tag--bad { background: var(--risk-bg); color: var(--risk); }
.tb-tag--unk, .tb-tag--none { background: var(--surface); border: 1.5px dashed var(--line-strong); color: var(--text-2); }
.tb-lists { display: flex; flex-direction: column; gap: var(--sp-16); }
.tb-list { border: 1px solid var(--line); border-radius: var(--r-18); background: var(--surface); }
.tb-list--failed { border-color: var(--risk-border); }
.tb-list--unknown { border-style: dashed; border-color: var(--field-border); }
.tb-sum { display: flex; align-items: center; gap: var(--sp-14); padding: 18px 16px 18px 20px; min-height: 64px; border-radius: var(--r-18); transition: background-color var(--dur-hover) var(--ease-std); }
.tb-sum:hover { background: var(--surface-quiet); }
.tb-sum-ic { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tb-list--failed .tb-sum-ic, .tb-list--failed .tb-dot { background: var(--risk-bg); color: var(--risk); }
.tb-list--unknown .tb-sum-ic, .tb-list--unknown .tb-dot { background: var(--surface); border: 1.5px dashed var(--placeholder); color: var(--text-2); }
.tb-list--passed .tb-sum-ic, .tb-list--passed .tb-dot { background: var(--brand-bg); color: var(--brand-text); }
.tb-sum-t { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.tb-sum-t b { font-size: 18px; font-weight: 700; line-height: 1.3; }
.tb-sum-t span { font-size: 14px; color: var(--text-3); line-height: 1.35; }
.tb-chev { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--dur-menu) var(--ease-std); }
.tb-list[open] .tb-chev { transform: rotate(180deg); }
.tb-body {
  padding: 16px 20px 20px; border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 1), auto);
  grid-auto-flow: column; column-gap: 48px; row-gap: 14px;
}
.tb-list[open] > .tb-body { animation: tb-open .22s var(--ease-std); }
@keyframes tb-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tb-fact { display: flex; gap: var(--sp-12); align-items: flex-start; font-size: 15px; line-height: 1.45; min-width: 0; }
.tb-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tb-fact-t { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.tb-fact-n { color: var(--text); }
.tb-body--unknown .tb-fact-n { color: var(--text-2); }
.tb-fact-g { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: 13px; color: var(--text-3); line-height: 1.3; }
.tb-pts { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-body--failed .tb-pts { color: var(--risk); }
.tb-body--unknown .tb-pts { font-weight: 600; color: var(--text-3); }
.tb-body--passed .tb-pts { color: var(--brand-text); }
.tb-draw path { stroke-dasharray: 24; animation: tt-draw .4s var(--ease-out) .5s both; }
@media (max-width: 1199px) {
  .tb-groups { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 767px) {
  .tb { gap: var(--sp-28); }
  .tb-sum-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-op { display: none; }
  .tb-groups { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .tb-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .tb-bar { height: 24px; border-radius: var(--r-8); }
  .tb-seg { height: 24px; }
  .tb-scale-head { flex-direction: column; gap: 4px; }
  .tb-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; padding: 14px 16px 16px; }
  .tb-sum { padding: 14px 12px 14px 16px; }
  .tb-sum-t b { font-size: 17px; }
}

/* ==========================================================================
   Оповещение о цене (base/price-alert A): серая панель → зелёная, когда подписан
   ========================================================================== */
.pa { background: var(--surface-2); border-radius: var(--r-18); padding: 20px 22px; display: flex; flex-direction: column; gap: var(--sp-16); animation: vg-rise var(--dur-enter) var(--ease-out) .1s both; }
.pa--on { background: var(--brand-bg); }
.pa-head, .pa-row { display: flex; align-items: center; gap: var(--sp-14); margin: 0; }
.pa-ic { width: 44px; height: 44px; border-radius: var(--r-12); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pa--on .pa-ic { color: var(--brand-text); }
.pa-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pa-h { font-family: var(--font); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.pa-t p { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.pa-t b, .pa-min b { color: var(--text); font-weight: 700; }
.pa-form { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-12); row-gap: var(--sp-8); align-items: center; }
.pa-label { grid-column: 1 / -1; }
.pa-field {
  display: flex; align-items: center; gap: var(--sp-8); height: 48px; padding: 0 14px;
  border: 1px solid var(--input-border); border-radius: var(--r-12); background: var(--surface);
  transition: border-color var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std);
}
.pa-field:hover { border-color: var(--placeholder); }
.pa-field:focus-within { border: 2px solid var(--brand-text); padding: 0 13px; box-shadow: 0 0 0 4px var(--brand-bg); }
.pa-field.is-error { border: 2px solid var(--risk); padding: 0 13px; animation: pa-shake .2s var(--ease-std) .5s 1 both; }
.pa-field.is-error:focus-within { box-shadow: 0 0 0 4px var(--risk-bg); }
@keyframes pa-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.pa-field input { flex: 1 1 auto; width: 0; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font-size: 16px; color: var(--text); }
.pa-field input::placeholder { color: var(--placeholder); }
.pa-field input:focus-visible { outline: none; }
.pa-rub { font-size: 16px; font-weight: 600; color: var(--text-3); }
.pa-btn { flex-shrink: 0; }
.pa-btn:hover .pa-hb, .pa-guest:hover .pa-hb { animation: vg-bell .8s var(--ease-std) 1 both; }
.pa-hb { transform-origin: 12px 3px; }
.pa-min { grid-column: 1; margin: 0; padding-top: 2px; display: flex; align-items: center; gap: var(--sp-8); font-size: 14px; line-height: 1.4; color: var(--text-2); }
.pa-drop { animation: pa-drop .5s var(--ease-out) .42s both; }
@keyframes pa-drop { 0% { opacity: 0; transform: translateY(-6px); } 55% { opacity: 1; transform: translateY(1.5px); } 100% { opacity: 1; transform: none; } }
.pa-hint { display: flex; align-items: flex-start; gap: var(--sp-8); font-size: 13px; line-height: 1.45; color: var(--text-3); }
.pa-hint svg { margin-top: 1px; }
.pa-err { display: flex; align-items: flex-start; gap: var(--sp-10); padding: 12px 14px; border-radius: var(--r-12); background: var(--risk-bg); font-size: 15px; line-height: 1.45; color: var(--text); animation: pa-slide .4s var(--ease-out) .1s both; }
.pa-err svg { color: var(--risk); margin-top: 1px; }
.pa-err b { color: var(--risk); }
.pa-flash { display: flex; align-items: center; gap: var(--sp-12); padding: 10px 14px; border-radius: var(--r-12); background: var(--surface); font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--brand-on-bg); animation: pa-slide .4s var(--ease-out) .1s both; }
@keyframes pa-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.pa-ok { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pa-ok svg path { stroke-dasharray: 24; animation: tt-draw .4s var(--ease-out) .3s both; }
.pa-ic.is-ringing svg { transform-origin: 12px 3px; animation: vg-bell .7s var(--ease-std) .3s both; }
.pa-on-t { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); flex: 1 1 auto; min-width: 0; }
.pa-mode { display: inline-flex; align-items: center; gap: var(--sp-6); height: 30px; padding: 0 12px 0 10px; border-radius: 30px; background: var(--surface); color: var(--brand-on-bg); font-size: 14px; font-weight: 600; white-space: nowrap; }
.pa-on-t p { font-size: 16px; line-height: 1.45; color: var(--brand-on-bg); }
.pa-on-t b { font-weight: 700; }
.pa-link { height: 44px; padding: 0 14px; border-radius: var(--r-10); background: var(--surface); color: var(--brand-text); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: var(--sp-6); flex-shrink: 0; white-space: nowrap; }
.pa-link svg { transition: transform var(--dur-hover) var(--ease-std); }
.pa-link:hover svg { transform: translateX(3px); }
@media (max-width: 767px) {
  .pa { padding: 16px; gap: var(--sp-14); }
  .pa-form { grid-template-columns: minmax(0, 1fr); }
  .pa-form .pa-btn { width: 100%; }
  .pa-row { flex-wrap: wrap; }
  .pa-row .pa-btn { width: 100%; }
  .pa--on .pa-head { flex-wrap: wrap; }
  .pa-link { width: 100%; justify-content: center; }
  .pa-guest { width: 100%; }
}

/* ==========================================================================
   Крошки: «Главная › Промокоды»; на телефоне разделитель «/» и тап-цель 44
   ========================================================================== */
.crumbs { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); color: var(--text-3); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.crumbs li { display: flex; align-items: center; gap: var(--sp-6); min-width: 0; }
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--brand-text); }
.crumbs li + li::before { /* разделитель: шеврон на ПК, «/» на телефоне */
  content: ""; width: 14px; height: 14px; flex-shrink: 0; background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.crumbs [aria-current] { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  .crumbs { font-size: 13px; color: var(--text-3); }
  .crumbs a { min-height: 44px; display: inline-flex; align-items: center; }
  .crumbs [aria-current] { color: var(--text-3); }
  .crumbs li + li::before { content: "/"; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; color: var(--text-3); }
}

/* ==========================================================================
   Пагинация: «Назад · Страница N из M · Вперёд» (+ номера по желанию)
   ========================================================================== */
.pgn { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-24); padding-top: var(--sp-16); }
.pgn > :first-child { justify-self: end; }
.pgn > :last-child { justify-self: start; }
.pgn-nav { font-weight: 600; font-size: 15px; padding: 0 18px; }
.pgn-nav svg { transition: transform var(--dur-hover) var(--ease-std); }
a.pgn-nav[rel="next"]:hover svg { transform: translateX(3px); }
a.pgn-nav[rel="prev"]:hover svg { transform: translateX(-3px); }
.pgn-nav[aria-disabled="true"] { border-color: var(--line-soft); background: var(--surface-quiet); color: var(--placeholder); pointer-events: none; }
.pgn-mid { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; }
.pgn-page { font-size: 15px; line-height: 1.4; color: var(--text-2); white-space: nowrap; }
.pgn-page b { color: var(--text); }
.pgn-range { font-size: 13px; line-height: 1.4; color: var(--text-3); white-space: nowrap; }
.pgn-nums { display: flex; align-items: center; gap: var(--sp-4); }
.pgn-nums a, .pgn-nums span { min-width: 44px; height: 44px; padding: 0 8px; border-radius: var(--r-10); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--text); }
.pgn-nums a:hover { background: var(--surface-2); }
.pgn-nums [aria-current] { background: var(--text); color: var(--bg); }
.pgn-gap { color: var(--text-3); padding: 0 4px; }
/* Телефон: «Назад» и «Вперёд» делят ширину поровну, между ними «Страница / 1 из 42» в два яруса,
   диапазон «Предложения 1–24 из …» — отдельной строкой под рядом (как в макете promo/category mobile). */
@media (max-width: 767px) {
  .pgn { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "prev mid next" "range range range"; gap: var(--sp-12) 10px; padding-top: var(--sp-8); }
  .pgn > :first-child { grid-area: prev; justify-self: stretch; }
  .pgn > :last-child { grid-area: next; justify-self: stretch; }
  .pgn-mid { display: contents; }
  .pgn-mid > .pgn-page, .pgn-mid > .pgn-nums { grid-area: mid; }
  .pgn-nav { height: 52px; padding: 0 12px; font-size: 16px; }
  .pgn-page { display: flex; flex-direction: column; align-items: center; padding: 0 4px; line-height: 1.25; }
  .pgn-page-l { font-size: 13px; color: var(--text-3); }
  .pgn-page-n { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
  .pgn-range { grid-area: range; text-align: center; white-space: normal; }
}

/* ==========================================================================
   Пустое состояние: тёплая панель с котом «разводит лапами» + текст и кнопки
   ========================================================================== */
.empty-state { display: flex; gap: var(--sp-40); align-items: center; padding: 24px; border-radius: var(--r-22); border: 1px solid var(--line); background: var(--surface); }
.empty-art { width: 320px; height: 272px; flex-shrink: 0; border-radius: var(--r-22); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.empty-cat { animation: empty-in .5s var(--ease-out) both; transform-origin: 50% 100%; }
@keyframes empty-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
.empty-body { display: flex; flex-direction: column; gap: var(--sp-14); min-width: 0; max-width: 700px; }
.empty-h { font-family: var(--font); font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.empty-p { font-size: 17px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.empty-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-16) var(--sp-20); padding-top: 6px; }
.empty-act { display: flex; flex-direction: column; gap: var(--sp-8); align-items: flex-start; min-width: 0; }
.empty-cap { font-size: 13px; line-height: 1.4; color: var(--text-3); }
@media (max-width: 767px) {
  .empty-state { flex-direction: column; align-items: stretch; gap: var(--sp-16); padding: 16px; border-radius: var(--r-18); }
  .empty-art { width: 100%; height: 200px; }
  .empty-art .cat { width: 170px; height: auto; }
  .empty-h { font-size: 19px; }
  .empty-p { font-size: 16px; }
  .empty-actions, .empty-act, .empty-act .btn { width: 100%; }
}

/* ==========================================================================
   Плашка / флеш-сообщение внутри страницы
   ========================================================================== */
.note { border: 0; display: flex; align-items: flex-start; gap: var(--sp-10); padding: 12px 14px; border-radius: var(--r-12); font-size: 15px; line-height: 1.45; background: var(--surface-2); color: var(--text); animation: pa-slide .4s var(--ease-out) both; }
.note > svg { margin-top: 1px; color: var(--text-3); }
.note-t { flex: 1 1 auto; min-width: 0; }
.note--ok { background: var(--brand-bg); color: var(--brand-on-bg); }
.note--ok > svg { color: var(--brand-text); }
.note--warn { background: var(--warn-bg); color: var(--warn-text); }
.note--warn > svg { color: var(--warn-text-2); }
.note--risk { background: var(--risk-bg); }
.note--risk > svg, .note--risk b { color: var(--risk); }

/* ==========================================================================
   Вкладки: ссылками (?tab=…, aria-current) или кнопками role=tab (app.js initTabs)
   <nav class="tabs"><a class="tab" aria-current="page">Где купить<span class="tab-n">9</span></a>…</nav>
   ========================================================================== */
.tabs { position: static; margin-bottom: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: flex; align-items: center; gap: var(--sp-28); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  height: 52px; display: flex; align-items: center; gap: var(--sp-6); flex-shrink: 0;
  padding: 0; border: 0; border-radius: 0; background: transparent; white-space: nowrap;
  font-size: 15px; font-weight: 500; color: var(--text-2);
  transition: color var(--dur-hover) var(--ease-std), box-shadow var(--dur-menu) var(--ease-std);
}
.tab:hover { color: var(--text); }
.tab[aria-current], .tab[aria-selected="true"] { font-weight: 700; color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
.tab-n { font-size: 13px; font-weight: 600; color: var(--text-3); }
[role="tabpanel"]:not([hidden]) { animation: tab-in .24s var(--ease-out) both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) { .tabs { gap: var(--sp-20); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .tab { height: 48px; } }

/* ==========================================================================
   Загрузка: скелетон с бликом 1,4 с (петля — только пока ждём)
   ========================================================================== */
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--line-soft) 0%, var(--line-total) 50%, var(--line-soft) 100%); background-size: 200% 100%; animation: sk-shim 1.4s linear infinite; }
@keyframes sk-shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-line { height: 14px; }
.sk-line--sm { height: 12px; }
.sk-44 { width: 44px; height: 44px; border-radius: var(--r-12); flex-shrink: 0; }
.sk-btn { height: 48px; border-radius: var(--r-12); margin-top: auto; }
.sk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-20); }
.sk-card { min-height: 220px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-18); display: flex; flex-direction: column; gap: var(--sp-12); }
.sk-row { display: flex; align-items: center; gap: var(--sp-10); }
.sk-col { flex: 1; display: flex; flex-direction: column; gap: var(--sp-8); }
@media (max-width: 1199px) { .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sk-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sk { background: var(--line-soft); } }

/* ==========================================================================
   Индекс доверия: число в рамке + слово; цвет повторяет слово
   ========================================================================== */
.trust-idx { display: inline-flex; align-items: center; gap: var(--sp-12); }
.trust-idx-n {
  width: 48px; height: 48px; border-radius: var(--r-12); border: 2px solid var(--line-strong); background: var(--surface-3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--text-2);
}
.trust-idx-t { display: flex; flex-direction: column; gap: 2px; }
.trust-idx-t b { font-size: 15px; font-weight: 700; color: var(--text-2); }
.trust-idx-t span { font-size: 13px; color: var(--text-3); }
.trust-idx--reliable .trust-idx-n { background: var(--brand-bg); border-color: var(--trust-good); color: var(--brand-text); }
.trust-idx--reliable b { color: var(--brand-text); }
.trust-idx--ordinary .trust-idx-n { background: var(--surface-3); border-color: var(--line-strong); color: var(--text-2); }
.trust-idx--caveats .trust-idx-n { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-text-2); }
.trust-idx--caveats b { color: var(--warn-text-2); }
.trust-idx--risky .trust-idx-n { background: var(--risk-bg); border-color: var(--risk-line); color: var(--risk); }
.trust-idx--risky b { color: var(--risk); }
.trust-idx--unknown .trust-idx-n { background: var(--surface); border: 2px dashed var(--placeholder); color: var(--text); }
.trust-idx--sm { gap: var(--sp-8); }
.trust-idx--sm .trust-idx-n { width: auto; min-width: 32px; height: 26px; padding: 0 6px; border-width: 1.5px; border-radius: var(--r-8); font-family: var(--font); font-size: 13px; font-weight: 700; }
.trust-idx--sm b { font-size: 14px; font-weight: 600; }