/* ==========================================================================
   Страница магазина (/shop/{slug}) — макет shop/shop. Префикс sh-.
   Шаблон — templates/pages/shop.html, поведение — js/pages/shop.js.
   Карточка предложения — общий партиал offer_card (ui.css, .oc-*): здесь он
   разложен строкой-купоном (вариант offers B) — только внутри .sh-cp.
   Точки: ПК ≥ 1200, промежуточная 768–1199, телефон < 768.
   ========================================================================== */

.sh { padding-block: 28px 72px; }
.sh-wrap { display: flex; flex-direction: column; gap: 56px; }
.sh-sec { scroll-margin-top: 96px; }

/* Цифры «набегают» снизу до значения (макет: st-roll / rs-roll) */
.sh-roll { position: relative; display: inline-flex; align-items: flex-start; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-roll-d { display: inline-flex; align-items: flex-start; }
.sh-roll-w { display: inline-block; height: 1.15em; overflow: hidden; }
.sh-roll-c { display: flex; flex-direction: column; transform: translateY(calc(-100% + 1.15em)); animation: sh-roll .9s var(--ease-out) both; animation-delay: calc(.35s + var(--i, 0) * 60ms); }
.sh-roll-c > span { display: block; height: 1.15em; }
@keyframes sh-roll { from { transform: translateY(0); } }

/* ==========================================================================
   Шапка: крошки, имя, описание, шкала индекса (hero C)
   ========================================================================== */
.sh-top { display: flex; flex-direction: column; gap: 32px; }
.sh-hero { display: flex; flex-direction: column; gap: 14px; }
.sh-id { display: flex; flex-direction: column; gap: 14px; }
.sh-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--brand-text); }
.sh-name { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
/* логотип — белая плашка и в тёмной теме (логотипы сняты на белом) */
.sh-logo { width: 58px; height: 58px; border-radius: var(--r-16); background: #FFFFFF; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.sh-logo img { width: 44px; height: 44px; object-fit: contain; }
.sh-logo--mono { background: var(--surface-3); border-color: var(--surface-3); color: var(--text); font-weight: 700; font-size: 18px; letter-spacing: .02em; }
.sh-name-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sh-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); overflow-wrap: anywhere; }
.sh-domain { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1.4; color: var(--text-3); }
.sh-desc { padding-left: 78px; display: flex; flex-direction: column; align-items: flex-start; margin-top: -6px; }
.sh-desc-t { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 72ch; }
.sh-more { height: 44px; padding: 0 2px; border: 0; background: none; color: var(--brand-text); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.sh-more[hidden] { display: none; }

/* Шкала индекса в шапке */
.sh-scale {
  margin-top: 14px; display: flex; flex-direction: column; gap: 16px; padding: 22px 28px 20px;
  border-radius: var(--r-22); background: var(--surface-2); color: var(--text);
  transition: background-color var(--dur-hover) var(--ease-std);
}
.sh-scale:hover { color: var(--text); background: var(--surface-3); }
.sh-scale-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sh-scale-ic { display: flex; color: var(--text-2); }
.sh-scale--reliable .sh-scale-ic { color: var(--brand-text); }
.sh-scale-t { font-size: 17px; font-weight: 700; white-space: nowrap; }
.sh-scale-v { font-size: 16px; line-height: 1.4; color: var(--text-2); min-width: 0; }
.sh-scale-v b { font-weight: 700; color: var(--text); }
.sh-scale-go { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--brand-text); white-space: nowrap; }
.sh-scale-go .ic { transition: transform var(--dur-hover) var(--ease-std); }
.sh-scale:hover .sh-scale-go .ic { transform: translateY(3px); }
.sh-go-m { display: none; }

.sh-bar { position: relative; display: block; padding-top: 44px; }
.sh-scale--unknown .sh-bar { padding-top: 0; }
.sh-crumbs { margin-bottom: -12px; }
.sh-bands { display: grid; grid-template-columns: 40fr 20fr 20fr 20fr; gap: 4px; }
.sh-band { display: block; height: 14px; border-radius: 6px; transform-origin: 0 50%; animation: sh-wipe .5s var(--ease-out) both; animation-delay: calc(.2s + var(--k, 1) * 70ms); }
@keyframes sh-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sh-band--risky { background: var(--risk-line); }
.sh-band--caveats { background: var(--warn); }
.sh-band--ordinary { background: var(--line-strong); }
.sh-band--reliable { background: var(--brand); }
.sh-scale--unknown .sh-band, .sh-tcard--unknown .sh-band {
  background-color: var(--surface-3);
  background-image: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 8px);
}
.sh-pin { position: absolute; top: 0; bottom: 0; width: 0; display: flex; flex-direction: column; align-items: center; animation: sh-pin .9s var(--ease-out) .45s both; }
@keyframes sh-pin { from { left: 0; opacity: 0; } 20% { opacity: 1; } }
.sh-pin-n {
  position: relative; height: 30px; padding: 0 10px; border-radius: 9px; background: var(--text); color: var(--bg);
  display: flex; align-items: center; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.sh-pin-n::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--text); }
.sh-pin-k { margin-top: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 4px solid var(--text); transform: translateY(4px); box-shadow: var(--sh-arrow); }

.sh-legend { display: grid; grid-template-columns: 40fr 20fr 20fr 20fr; gap: 4px; }
.sh-leg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-leg b { font-size: 14px; font-weight: 600; }
.sh-leg span { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sh-leg--risky b { color: var(--risk); }
.sh-leg--caveats b { color: var(--warn-text-2); }
.sh-leg--ordinary b { color: var(--text-2); }
.sh-leg--reliable b { color: var(--brand-text); }
.sh-leg.is-on b { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sh-ticks, .sh-now { display: none; }

/* ==========================================================================
   Цифры магазина (stats B): действующие · с кодом и подтверждённые · архив
   ========================================================================== */
.sh-stats { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr) minmax(0, .8fr); gap: 16px; align-items: stretch; }
.sh-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 16px 18px 18px 20px; border-radius: var(--r-14); min-width: 0; }
.sh-stat dt { order: 2; font-size: 15px; line-height: 1.35; }
.sh-stat-n { order: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 44px; }
.sh-stat-ic { width: 36px; height: 36px; border-radius: var(--r-10); background: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-stat--live { background: var(--brand-bg); }
.sh-stat--live dt { color: var(--brand-on-bg); font-weight: 500; }
.sh-stat--live .sh-stat-n { color: var(--brand-text); }
.sh-stat--live .sh-stat-ic { color: var(--brand-text); }
.sh-stat--arch { background: var(--surface-2); }
.sh-stat--arch dt { color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.sh-stat--arch dt span { font-size: 13px; }
.sh-stat--live dt:has(span) { display: flex; flex-direction: column; gap: 2px; }
.sh-stat--live dt span { font-size: 13px; color: var(--text-2); }
.sh-stat--arch .sh-stat-n { font-size: 36px; color: var(--text-2); }
.sh-stat--arch .sh-stat-ic { color: var(--text-3); }
.sh-stat--mid { justify-content: center; gap: 18px; border: 1px solid var(--line); background: var(--surface); padding: 16px 20px; }
.sh-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
.sh-part dt { order: 0; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; line-height: 1.3; min-width: 0; }
.sh-part-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-part-ic--ok { background: var(--brand-bg); color: var(--brand-text); }
.sh-part-n { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.sh-part-n .sh-roll { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 24px; }
.sh-part-n > span:last-child { font-size: 15px; color: var(--text-3); }
.sh-part-bar { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.sh-track { display: block; height: 10px; border-radius: 10px; background: var(--line-soft); overflow: hidden; }
.sh-fill { display: block; height: 100%; border-radius: 10px; background: var(--text-3); transform-origin: 0 50%; animation: sh-wipe .6s var(--ease-out) .6s both; }
.sh-fill--ok { background: var(--trust-good); }
.sh-part-c { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.sh-stat--none dd { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--text-2); }

/* ==========================================================================
   Заголовки секций
   ========================================================================== */
.sh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.sh-head-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-h2row { display: flex; align-items: center; gap: 12px; }
.sh-count { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 30px; background: var(--surface-3); color: var(--text-2); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.sh-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--text-3); }
.sh-sort .ic { flex-shrink: 0; }
.sh-all { flex-shrink: 0; min-height: 44px; }

/* ==========================================================================
   Строка-купон из партиала offer_card (offers B).
   article.oc и .oc-head «растворяются» (display: contents) — их части
   встают в сетку строки: корешок со скидкой | дата, заголовок, метки | код.
   ========================================================================== */
.sh-coupons { display: flex; flex-direction: column; gap: 12px; }
.sh-cp {
  position: relative; min-height: 128px; padding: 18px 24px 18px 196px;
  display: grid; grid-template-columns: minmax(0, 1fr) 436px; column-gap: 24px; row-gap: 10px;
  grid-template-areas: "when act" "title act" "marks act"; align-content: center;
  border: 1px solid var(--line); border-radius: var(--r-18); background: var(--surface); overflow: hidden;
  transition: border-color var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std);
}
.sh-cp:hover { border-color: var(--line-strong); box-shadow: var(--sh-card-hover); }
.sh-cp--urgent { border: 2px solid var(--warn); padding: 17px 23px 17px 195px; }
.sh-cp--urgent:hover { border-color: var(--warn-strong); }
.sh-cp--bad { border: 1.5px dashed var(--field-border); }
/* корешок и перфорация */
.sh-cp-stub { position: absolute; left: 0; top: 0; bottom: 0; width: 172px; background: var(--surface-2); border-right: 2px dashed var(--line-field); }
.sh-cp--good .sh-cp-stub { background: var(--brand-bg); }
.sh-cp--urgent .sh-cp-stub { background: var(--warn-bg); }
.sh-cp--bad .sh-cp-stub { background-color: var(--surface); background-image: repeating-linear-gradient(135deg, var(--line-soft) 0 2px, transparent 2px 9px); }
.sh-cp-stub::before, .sh-cp-stub::after {
  content: ""; position: absolute; right: -11px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
}
.sh-cp-stub::before { top: -11px; }
.sh-cp-stub::after { bottom: -11px; }
.sh-cp--urgent .sh-cp-stub::before, .sh-cp--urgent .sh-cp-stub::after { border: 2px solid var(--warn); }
.sh-cp--urgent .sh-cp-stub::before { top: -12px; }
.sh-cp--urgent .sh-cp-stub::after { bottom: -12px; }
.sh-cp .oc { display: contents; }
.sh-cp .oc-head { display: contents; }
.sh-cp .oc-shop { grid-area: when; min-height: 0; pointer-events: none; align-self: end; }
.sh-cp .oc-logo, .sh-cp .oc-mono, .sh-cp .oc-shop-n { display: none; }
.sh-cp .oc-shop-t { gap: 0; }
.sh-cp .oc-size { position: absolute; left: 22px; top: calc(50% - 32px); font-size: 34px; line-height: 1.1; z-index: 1; }
.sh-cp .oc-size--word { font-size: 24px; top: calc(50% - 26px); }
.sh-cp .oc-size--word.is-muted { color: var(--text); }
.sh-cp--bad .oc-size { color: var(--text-3); }
.sh-cp-kind { position: absolute; left: 22px; top: calc(50% + 12px); z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--text-2); }
.sh-cp--good .sh-cp-kind { color: var(--brand-on-bg); }
.sh-cp--urgent .sh-cp-kind { color: var(--warn-text); }
.sh-cp--bad .sh-cp-kind { color: var(--text-3); }
.sh-cp .oc-title { grid-area: title; -webkit-line-clamp: 2; }
.sh-cp .oc-marks { grid-area: marks; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sh-cp .oc-votes { flex: 0 0 auto; }
.sh-cp .oc-track { flex: 0 0 110px; width: 110px; }
.sh-cp .oc-actions { grid-area: act; align-self: center; margin-top: 0; flex-direction: row; align-items: center; gap: 10px; }
.sh-cp .oc-code { flex: 1 1 auto; min-width: 0; }
.sh-cp .oc-go { width: auto; flex: 0 0 auto; height: 48px; padding: 0 18px; }
.sh-cp .oc-cta { width: 100%; }
.sh-cp.has-nolink .oc-actions { margin-bottom: 26px; }
.sh-cp-nolink { grid-area: act; align-self: center; margin-top: 64px; font-size: 13px; line-height: 1.4; color: var(--text-3); }

/* Подписка «Следующий код — письмом» и пустой купон */
.sh-sub, .sh-none {
  margin-top: 20px; position: relative; display: flex; align-items: stretch; min-height: 112px;
  border: 1.5px dashed var(--field-border); border-radius: var(--r-18); background: var(--surface); overflow: hidden;
}
.sh-sub-art, .sh-none-art { width: 172px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background-color: var(--warm-bg); background-image: var(--dots); background-size: var(--dots-size); }
.sh-none-art { width: 96px; }
.sh-sub-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--warm-big); display: flex; align-items: center; justify-content: center; }
.sh-bell { transform-origin: 12px 3px; animation: vg-bell .8s var(--ease-std) 1.2s both; }
.sh-sub-b { flex: 1 1 auto; min-width: 0; padding: 18px 24px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.sh-sub-h { font-size: 17px; font-weight: 700; line-height: 1.35; }
.sh-sub-c { font-size: 14px; line-height: 1.45; color: var(--text-3); }
.sh-sub-btn { white-space: normal; text-align: left; }
.sh-none { margin-top: 0; min-height: 150px; }
.sh-none-b { flex: 1 1 auto; min-width: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.sh-none-h { font-size: 19px; font-weight: 700; line-height: 1.35; }
.sh-none-p { font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 64ch; }
.sh-none-link { align-self: flex-start; min-height: 44px; }
.sh-none-act { width: 440px; flex-shrink: 0; padding: 20px 24px 20px 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.sh-none-act .btn { white-space: normal; }

/* ==========================================================================
   От магазина — реклама (placements A): тихо, без каскада
   ========================================================================== */
.sh-pl { display: flex; flex-direction: column; gap: 24px; }
.sh-pl-head { display: flex; flex-direction: column; gap: 10px; }
.sh-pl-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.sh-pl-h { font-family: var(--font); font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.sh-ad { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-8); border: 1px solid var(--field-border); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.sh-ad--lg { height: 28px; }
.sh-ad .ic { color: var(--text-3); }
.sh-pl-order { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-3); }
.sh-pl-p { font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 760px; }
.sh-pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; animation: vg-fade .45s var(--ease-std) both; }
.sh-pl-card { position: relative; border-radius: var(--r-18); background: var(--surface-2); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sh-pl-top { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sh-pl-when { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.3; color: var(--text-3); }
.sh-pl-txt { display: flex; flex-direction: column; gap: 8px; }
.sh-pl-t { font-family: var(--font); font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.sh-pl-d { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.sh-pl-terms { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.sh-pl-terms b { color: var(--text); }
.sh-pl-code { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px 0 14px; border-radius: var(--r-12); border: 1px solid var(--line); background: var(--surface); color: var(--text-3); }
.sh-pl-code-l { font-size: 14px; }
.sh-pl-code-v { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.sh-pl-code.is-long .sh-pl-code-l { display: none; }
.sh-pl-copy { height: 40px; padding: 0 12px; flex-shrink: 0; border: 0; border-radius: var(--r-10); background: transparent; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); transition: background-color var(--dur-hover) var(--ease-std); }
.sh-pl-copy:hover { background: var(--surface-3); }
.sh-pl-copy.is-copied { color: var(--brand-text); }
.sh-pl-go { align-self: flex-start; margin-top: 4px; border-color: var(--line-field); }
.sh-pl-ext { transition: transform var(--dur-hover) var(--ease-std); }
.sh-pl-go:hover .sh-pl-ext { transform: translate(2px, -2px); }
.sh-pl-label { padding-top: 16px; border-top: 1px solid var(--line-total); font-size: 13px; line-height: 1.45; color: var(--text-3); }
.sh-pl-px { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ==========================================================================
   Индекс доверия (trust A): карточка-итог слева, разбор (партиал) справа
   ========================================================================== */
.sh-trust { display: flex; flex-direction: column; gap: 28px; }
.sh-trust-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 48px; align-items: start; }
.sh-tcard { border: 1px solid var(--line); border-radius: var(--r-20); padding: 28px; display: flex; flex-direction: column; gap: 20px; background: var(--surface); animation: vg-rise var(--dur-enter) var(--ease-out) both; }
.sh-tcard-top { display: flex; align-items: center; gap: 18px; }
.sh-ring { position: relative; width: 96px; height: 96px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sh-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sh-ring circle { fill: none; stroke-width: 8; }
.sh-ring-bg { stroke: var(--surface-3); }
.sh-ring-v { stroke: var(--text-3); stroke-linecap: round; animation: sh-ring .9s var(--ease-out) .3s both; }
@keyframes sh-ring { from { stroke-dasharray: 0 100; } }
.sh-tcard--reliable .sh-ring-v { stroke: var(--trust-good); }
.sh-tcard--caveats .sh-ring-v { stroke: var(--warn); }
.sh-tcard--risky .sh-ring-v { stroke: var(--risk); }
.sh-ring-n { position: relative; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.sh-ring-n.is-3 { font-size: 26px; }
.sh-ring--q { border: 2px dashed var(--placeholder); border-radius: 50%; }
.sh-ring--q .sh-ring-n { font-size: 36px; }
.sh-tcard-t { display: flex; flex-direction: column; gap: 2px; }
.sh-tcard-t b { font-size: 20px; font-weight: 700; color: var(--text-2); }
.sh-tcard--reliable .sh-tcard-t b { color: var(--brand-text); }
.sh-tcard--caveats .sh-tcard-t b { color: var(--warn-text-2); }
.sh-tcard--risky .sh-tcard-t b { color: var(--risk); }
.sh-tcard-t span { font-size: 14px; color: var(--text-3); }
.sh-mini { display: flex; flex-direction: column; gap: 6px; }
.sh-mini-bar { position: relative; display: grid; grid-template-columns: 40fr 20fr 20fr 20fr; gap: 3px; padding-top: 10px; }
.sh-mini-bar .sh-band { height: 8px; border-radius: 4px; }
.sh-mini-pin { position: absolute; top: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--surface); border: 3px solid var(--text); box-shadow: var(--sh-arrow); animation: sh-pin .9s var(--ease-out) .45s both; }
.sh-mini-ticks { position: relative; height: 18px; font-size: 13px; line-height: 18px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sh-mini-ticks span, .sh-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.sh-mini-ticks span:first-child, .sh-ticks span:first-child { left: 0; transform: none; }
.sh-mini-ticks span:last-child, .sh-ticks span:last-child { right: 0; transform: none; }
.sh-mini-cats { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-3); }
.sh-mini-cats .is-on { font-weight: 700; color: var(--text); }
.sh-tcard-p { font-size: 16px; line-height: 1.5; color: var(--text-2); }
.sh-tcard-p b { color: var(--text); font-weight: 700; }
.sh-cov { display: flex; flex-direction: column; gap: 8px; }
.sh-cov-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sh-cov-l { font-size: 14px; font-weight: 600; }
.sh-cov-v { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sh-cov-bar { position: relative; display: block; height: 10px; border-radius: 10px; background-color: var(--surface-3); background-image: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 7px); }
.sh-cov-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: var(--text-3); transform-origin: 0 50%; animation: sh-wipe .6s var(--ease-out) .4s both; }
.sh-cov-mark { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); }
.sh-cov-cap { font-size: 13px; line-height: 1.4; color: var(--text-3); }
.sh-tcard-foot { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.sh-tcard-when { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--text-3); }
.sh-tcard-foot .btn--text, .sh-tnone .btn--text { align-self: flex-start; min-height: 44px; }
.sh-tb { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sh-tb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sh-tb-h { font-family: var(--font); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.sh-tb-cap { font-size: 13px; color: var(--text-3); }
/* не проверяли совсем */
.sh-tnone { display: flex; align-items: flex-start; gap: 18px; padding: 24px 28px; border-radius: var(--r-20); border: 1px dashed var(--line-strong); animation: vg-rise var(--dur-enter) var(--ease-out) both; }
.sh-tnone-ic { width: 48px; height: 48px; border-radius: var(--r-14); background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-tnone-b { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sh-tnone-p { font-size: 17px; line-height: 1.5; max-width: 820px; }
.sh-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-groups li { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: var(--r-10); background: var(--surface-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.sh-groups .ic { color: var(--text-2); }

/* ==========================================================================
   Отзывы: сводка по четырём вопросам (reviews-summary A)
   ========================================================================== */
.sh-rev, .sh-feed { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; }
.sh-rev-side { display: flex; flex-direction: column; gap: 18px; }
.sh-rev-lead { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.sh-rev-lead--sm { font-size: 15px; color: var(--text-3); }
.sh-rev-how { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-14); background: var(--surface-2); }
.sh-rev-how .ic { flex-shrink: 0; }
.sh-rev-how p { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.sh-rev-leg { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.sh-rev-leg-bar { position: relative; width: 36px; height: 8px; border-radius: 8px; background: var(--line); flex-shrink: 0; }
.sh-rev-leg-bar i, .sh-sum-bar i { position: absolute; left: 75%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text-3); }
.sh-sum { border: 1px solid var(--line); border-radius: var(--r-18); overflow: hidden; background: var(--surface); animation: vg-rise var(--dur-enter) var(--ease-out) both; }
.sh-sum-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 18px 28px 18px 24px; animation: vg-rise .5s var(--ease-out) both; animation-delay: calc(var(--k, 1) * 70ms); }
.sh-sum-row + .sh-sum-row { border-top: 1px solid var(--line-soft); }
.sh-sum-row.is-warn { background: var(--warn-bg); }
.sh-sum-row dt { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sh-sum-ic { width: 44px; height: 44px; border-radius: var(--r-12); background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-sum-row.is-warn .sh-sum-ic { background: var(--surface); }
.sh-sum-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-sum-q { font-size: 17px; font-weight: 600; line-height: 1.35; }
.sh-sum-w { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--warn-text); font-size: 14px; font-weight: 700; line-height: 1.3; }
.sh-sum-w .ic { color: var(--warn-text-2); }
.sh-nudge { transform-origin: 50% 90%; animation: sh-nudge .9s var(--ease-std) .9s 1 both; }
@keyframes sh-nudge { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
.sh-sum-wn { font-size: 14px; line-height: 1.4; color: var(--warn-text); }
.sh-sum-row dd { display: flex; align-items: center; gap: 28px; }
.sh-sum-bar { position: relative; display: block; width: 200px; height: 8px; border-radius: 8px; background: var(--line-soft); flex-shrink: 0; }
.sh-sum-row.is-warn .sh-sum-bar { background: var(--line); }
.sh-sum-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--brand); transform-origin: 0 50%; animation: sh-wipe .6s var(--ease-out) both; animation-delay: calc(.3s + var(--k, 1) * 70ms); }
.sh-sum-row.is-warn .sh-sum-fill { background: var(--warn); }
.sh-sum-n { width: 118px; display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.sh-sum-n > span:last-child { font-size: 15px; font-weight: 500; color: var(--text-3); }
.sh-sum-big { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 26px; }
.sh-sum-row.is-warn .sh-sum-big { color: var(--warn-text-2); }
.sh-sum-n--none { font-size: 14px; color: var(--text-3); }
.sh-sum-foot { display: flex; align-items: center; gap: 12px; padding: 8px 24px; min-height: 60px; border-top: 1px solid var(--line); background: var(--surface-quiet); }
.sh-sum-foot > .ic { color: var(--brand-text); flex-shrink: 0; }
.sh-sum-foot p { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.sh-sum-foot b { font-weight: 600; color: var(--text); }
.sh-sum-foot .btn--text { flex-shrink: 0; min-height: 44px; }
/* нет отзывов */
.sh-rev-none { display: flex; align-items: center; gap: 32px; padding: 24px 32px; border: 1.5px dashed var(--line-total); border-radius: var(--r-18); }
.sh-rev-cat { flex-shrink: 0; width: 140px; height: auto; animation: vg-rise .5s var(--ease-out) both; }
.sh-rev-none-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sh-rev-none-h { font-family: var(--font); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.sh-rev-none-b p { font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 560px; }
.sh-rev-none-act { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }

/* ==========================================================================
   Лента отзывов: две полки (reviews-list A)
   ========================================================================== */
.sh-feed-side { display: flex; flex-direction: column; gap: 22px; }
.sh-feed-hd { display: flex; flex-direction: column; gap: 6px; }
.sh-feed-h { font-family: var(--font); font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.sh-feed-hd p { font-size: 16px; line-height: 1.5; color: var(--text-2); }
.sh-feed-legend { background: var(--surface-2); border-radius: var(--r-18); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.sh-feed-legend > div { display: flex; gap: 12px; align-items: flex-start; }
.sh-feed-legend p { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--text-2); min-width: 0; }
.sh-feed-legend b { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--text); }
.sh-feed-d { display: block; }
.sh-feed-d::first-letter { text-transform: uppercase; }
.sh-feed-li { width: 32px; height: 32px; border-radius: var(--r-10); background: var(--surface); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-feed-li--ok { background: var(--brand-bg); color: var(--brand-text); }
.sh-feed-hidden { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-14); background: var(--surface-2); font-size: 14px; line-height: 1.5; color: var(--text-2); }
.sh-feed-hidden .ic { flex-shrink: 0; margin-top: 1px; color: var(--text-3); }
.sh-feed-prob { border-radius: var(--r-18); padding: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--warm-dark); }
.sh-feed-prob-h { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--text); }
.sh-feed-prob-h > span { width: 32px; height: 32px; border-radius: var(--r-10); background: var(--surface); color: var(--warm-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-feed-prob b { font-weight: 600; }
.sh-shelves { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sh-shelf { background: var(--surface-2); border-radius: var(--r-22); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sh-shelf--v { background: var(--brand-bg); }
.sh-shelf-head { display: flex; align-items: center; gap: 14px; }
.sh-shelf-ic { width: 44px; height: 44px; border-radius: var(--r-12); background: var(--surface); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-shelf--v .sh-shelf-ic { color: var(--brand-text); }
.sh-shelf-t { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sh-shelf-t h3 { font-family: var(--font); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.sh-shelf-t span { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.sh-shelf--v .sh-shelf-t span { color: var(--brand-on-bg); }
.sh-shelf-n { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 30px; line-height: 1; color: var(--text-2); flex-shrink: 0; }
.sh-shelf--v .sh-shelf-n { color: var(--brand-text); }
.sh-cards { display: flex; flex-direction: column; gap: 12px; }
.sh-card { background: var(--surface); border-radius: var(--r-16); padding: 20px 22px; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; border: 1px solid transparent; transition: border-color var(--dur-hover) var(--ease-std); }
.sh-card:hover { border-color: var(--line); }
.sh-card[hidden] { display: none; }
.sh-card.is-own { border-color: var(--line-field); }
.sh-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.sh-card-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 8px; }
.sh-card-hd { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; }
.sh-nick { display: inline-block; padding: 11px 0; margin: -11px 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
a.sh-nick:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.sh-me { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-8); background: var(--text); color: var(--bg); font-size: 13px; font-weight: 700; }
.sh-st { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-8); font-size: 13px; font-weight: 700; background: var(--warn-bg); color: var(--warn-text); }
.sh-st--rejected { background: var(--risk-bg); color: var(--risk); }
.sh-card-hd time { font-size: 14px; line-height: 1.4; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-probs { display: flex; flex-direction: column; gap: 6px; }
.sh-probs li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-12); background: var(--risk-bg); font-size: 15px; font-weight: 600; line-height: 1.35; animation: sh-slide .4s var(--ease-out) both; animation-delay: calc(.2s + var(--k, 1) * 70ms); }
.sh-probs .ic { color: var(--risk); flex-shrink: 0; }
@keyframes sh-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.sh-okrow { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.5; }
.sh-ok { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-bg); color: var(--brand-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: vg-spring .5s var(--ease-std) .3s both; }
.sh-cmt { padding-left: 12px; border-left: 2px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.sh-more-btn { align-self: flex-start; }
.sh-chev { transition: transform var(--dur-menu) var(--ease-std); }
[aria-expanded="true"] > .sh-chev { transform: rotate(180deg); }

/* ==========================================================================
   Форма отзыва (review-form A)
   ========================================================================== */
.sh-form { display: flex; flex-direction: column; gap: 16px; }
.sh-flash { display: flex; flex-direction: column; gap: 10px; }
.sh-msg { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-14); font-size: 16px; line-height: 1.45; animation: sh-drop .4s var(--ease-out) both; }
.sh-msg > .ic { flex-shrink: 0; }
.sh-msg + .sh-msg { animation-delay: 70ms; }
@keyframes sh-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.sh-msg--ok { background: var(--brand-bg); color: var(--brand-on-bg); }
.sh-msg--ok > .ic { color: var(--brand-text); }
.sh-msg--warn { background: var(--warn-bg); color: var(--warn-text); }
.sh-msg--warn > .ic { color: var(--warn-text-2); }
.sh-msg--risk { background: var(--risk-bg); color: var(--risk); }
.sh-shake { animation: sh-drop .4s var(--ease-out) both, sh-shake .4s var(--ease-std) .4s both; }
@keyframes sh-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.sh-draw path, .sh-draw polyline { stroke-dasharray: 100; animation: sh-draw .6s var(--ease-out) .35s both; }
@keyframes sh-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.sh-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.sh-form-grid.has-fate { grid-template-columns: minmax(0, 1fr) 360px; }
.sh-rf { display: flex; flex-direction: column; gap: 22px; border: 1px solid var(--line); border-radius: var(--r-20); padding: 28px 32px 32px; min-width: 0; background: var(--surface); }
.sh-rf-head { display: flex; align-items: flex-start; gap: 16px; }
.sh-rf-ic { width: 48px; height: 48px; border-radius: var(--r-14); background: var(--brand-bg); color: var(--brand-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-rf-ht { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.sh-rf-hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.sh-rf-h { font-family: var(--font); font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.sh-rf-meta { font-size: 13px; color: var(--text-3); }
.sh-rf-ht p { font-size: 16px; line-height: 1.5; color: var(--text-2); }
.sh-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sh-q { margin: 0; min-width: 0; border: 1px solid var(--line-soft); border-radius: var(--r-14); background: var(--surface-quiet); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.sh-q-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sh-q-t { font-size: 17px; font-weight: 600; line-height: 1.35; }
.sh-q-n { font-size: 13px; color: var(--text-3); white-space: nowrap; }
/* переключатель да/нет/не знаю: подложка переезжает к выбранному (240 мс).
   Хороший ответ — зелёный, плохой — красный: у «пришлось спорить» хороший — «нет». */
.sh-seg { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: var(--r-12); background: var(--surface-3); }
.sh-seg::before {
  content: ""; position: absolute; top: 4px; left: 4px; width: calc((100% - 8px) / 3); height: calc(100% - 8px);
  border-radius: 9px; border: 2px solid transparent; background: var(--surface); box-shadow: 0 2px 6px rgba(22,24,29,.08);
  opacity: 0; transition: transform .24s var(--ease-std), background-color .24s var(--ease-std), border-color .24s var(--ease-std), opacity .12s;
}
.sh-seg:has(input:checked)::before { opacity: 1; border-color: var(--text); }
.sh-seg:has(input[value="no"]:checked)::before { transform: translateX(100%); }
.sh-seg:has(input[value=""]:checked)::before { transform: translateX(200%); }
.sh-seg[data-good="yes"]:has(input[value="yes"]:checked)::before,
.sh-seg[data-good="no"]:has(input[value="no"]:checked)::before { background: var(--brand-bg); border-color: var(--brand-text); }
.sh-seg[data-good="yes"]:has(input[value="no"]:checked)::before,
.sh-seg[data-good="no"]:has(input[value="yes"]:checked)::before { background: var(--risk-bg); border-color: var(--risk); }
.sh-seg-o { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; font-size: 15px; font-weight: 500; color: var(--text-2); cursor: pointer; border-radius: 9px; }
.sh-seg-o input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sh-seg-o:has(input:checked) { font-weight: 700; color: var(--text); }
.sh-seg[data-good="yes"] .sh-seg-o:has(input[value="yes"]:checked), .sh-seg[data-good="no"] .sh-seg-o:has(input[value="no"]:checked) { color: var(--brand-on-bg); }
.sh-seg[data-good="yes"] .sh-seg-o:has(input[value="no"]:checked), .sh-seg[data-good="no"] .sh-seg-o:has(input[value="yes"]:checked) { color: var(--risk); }
.sh-seg-o:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.sh-seg-o:hover { color: var(--text); }
.sh-cm { display: flex; flex-direction: column; gap: 8px; }
.sh-cm-l { font-size: 14px; font-weight: 600; color: var(--text-2); }
.sh-cm-t { min-height: 96px; resize: vertical; }
.sh-cm-h { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.sh-cm-n { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-rf-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.sh-rf-ver { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.sh-rf-ver > .ic { flex-shrink: 0; margin-top: 1px; color: var(--text-3); }
.sh-rf-ver.is-ok { color: var(--brand-on-bg); }
.sh-rf-ver.is-ok > .ic { color: var(--brand-text); }
.sh-rf-btns { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sh-rf-del { color: var(--risk); }
.sh-rf-del:hover { color: var(--risk); background: var(--risk-bg); }
.sh-rf-save { padding-inline: 26px; }
/* судьба отзыва */
.sh-fate { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-20); border: 1px solid var(--line); background: var(--surface); }
.sh-fate-h { font-family: var(--font); font-size: 17px; font-weight: 700; line-height: 1.3; }
.sh-fate-p { font-size: 14px; line-height: 1.5; color: var(--text-3); }
.sh-fate-list { display: flex; flex-direction: column; gap: 8px; }
.sh-fate-i { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-14); background: var(--surface-2); }
.sh-fate-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-fate-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sh-fate-t b { font-size: 15px; font-weight: 700; }
.sh-fate-t span { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.sh-fate-i.is-now { align-items: center; background: var(--warn-bg); border: 2px solid var(--warn); padding: 10px 12px; }
.sh-fate-i.is-now .sh-fate-t b { font-size: 16px; }
.sh-fate-i.is-now .sh-fate-ic { color: var(--warn-text-2); }
.sh-fate-i--published.is-now { background: var(--brand-bg); border-color: var(--brand-text); }
.sh-fate-i--published.is-now .sh-fate-ic { color: var(--brand-text); }
.sh-fate-i--rejected.is-now { background: var(--risk-bg); border-color: var(--risk); }
.sh-fate-i--rejected.is-now .sh-fate-ic { color: var(--risk); }
.sh-fate-now { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 26px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 700; white-space: nowrap; }

/* гость: тёплая панель, карточка с вопросами и кот с выноской */
.sh-gf { position: relative; border-radius: var(--r-32); padding: 40px; display: grid; grid-template-columns: 660px minmax(0, 1fr); gap: 32px; min-height: 520px; }
.sh-gf-card { position: relative; z-index: 1; background: var(--surface); border-radius: var(--r-22); box-shadow: var(--sh-float); padding: 32px; display: flex; flex-direction: column; gap: 20px; animation: vg-rise var(--dur-enter) var(--ease-out) both; }
.sh-gf-pill { align-self: flex-start; height: 32px; padding: 0 12px; border-radius: 32px; background: var(--surface-2); color: var(--text-2); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sh-gf-h { font-family: var(--font); font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.sh-gf-p { font-size: 16px; line-height: 1.5; color: var(--text-2); }
.sh-gf-qs { display: flex; flex-direction: column; }
.sh-gf-qs li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.sh-gf-n { width: 30px; height: 30px; border-radius: 50%; background: var(--warm-bg); color: var(--warm-on-bg); font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-gf-q { flex: 1 1 auto; font-size: 16px; font-weight: 600; line-height: 1.35; }
.sh-gf-ans { display: flex; gap: 6px; flex-shrink: 0; }
.sh-gf-ans span { height: 28px; padding: 0 10px; border-radius: var(--r-8); border: 1px dashed var(--field-border); font-size: 13px; color: var(--text-3); display: flex; align-items: center; }
.sh-gf-act { display: flex; align-items: center; gap: 12px 20px; padding-top: 4px; flex-wrap: wrap; }
.sh-gf-cap { font-size: 14px; line-height: 1.45; color: var(--text-3); }
.sh-gf-ver { display: none; }
.sh-gf-art { position: relative; min-width: 0; }
.sh-gf-note { position: absolute; top: 0; left: 0; right: 24px; background: var(--surface); border-radius: var(--r-20); box-shadow: var(--sh-float); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; transform: rotate(1.5deg); animation: sh-card .6s var(--ease-out) .3s both; }
@keyframes sh-card { from { opacity: 0; transform: translateY(12px) rotate(0); } to { opacity: 1; transform: rotate(1.5deg); } }
.sh-gf-note b { font-size: 15px; font-weight: 700; }
.sh-gf-li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.sh-gf-li .ic { flex-shrink: 0; margin-top: 2px; color: var(--text-3); }
.sh-gf-li:first-of-type .ic { color: var(--brand-text); }
.sh-gf-li--ok { padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--brand-on-bg); }
.sh-gf-li--ok .ic { color: var(--brand-text); }
.sh-gf-note--m { display: none; }
.sh-gf-cat { position: absolute; right: 0; bottom: -40px; width: 300px; height: auto; }

/* ==========================================================================
   Архив (expired D): тихий реестр без ссылок
   ========================================================================== */
.sh-ex { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-18); overflow: hidden; }
.sh-ex-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--surface-2); }
.sh-ex-ic { width: 52px; height: 52px; border-radius: var(--r-14); background: var(--surface); border: 1px solid var(--line); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-ex-ht { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.sh-ex-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-8); background: var(--risk-bg); color: var(--risk); font-size: 14px; font-weight: 700; flex-shrink: 0; }
.sh-ex-tag-n { display: none; }
.sh-ex-h { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 22px; line-height: 1.2; }
.sh-ex-n { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.sh-ex-tog { display: none; }
.sh-ex-body[hidden] { display: none; }
.sh-ex-intro { padding: 0 20px 16px 88px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.sh-ex-intro p { font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 820px; }
.sh-ex-intro .sh-ex-cap { font-size: 13px; line-height: 1.4; color: var(--text-3); }
.sh-ex-cols, .sh-ex-row { display: grid; grid-template-columns: minmax(0, 1fr) 240px 190px; gap: 20px; padding: 10px 20px; }
.sh-ex-cols { font-size: 13px; font-weight: 600; color: var(--text-3); background: var(--surface); border-top: 1px solid var(--line); }
.sh-ex-row { align-items: center; padding-block: 12px; background: var(--surface); border-top: 1px solid var(--line-soft); animation: vg-rise .45s var(--ease-out) both; }
.sh-ex-row:nth-child(even) { background: var(--surface-quiet); }
.sh-ex-row:nth-child(2) { animation-delay: 60ms; } .sh-ex-row:nth-child(3) { animation-delay: 120ms; }
.sh-ex-row:nth-child(4) { animation-delay: 180ms; } .sh-ex-row:nth-child(n+5) { animation-delay: 240ms; }
.sh-ex-row[hidden] { display: none; }
.sh-ex-t { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--text-2); }
.sh-ex-mono { width: 32px; height: 32px; border-radius: var(--r-8); background: var(--surface-3); color: var(--text-3); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-ex-d { font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sh-ex-d--none { font-size: 14px; color: var(--text-3); }
.sh-ex-s { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.sh-ex-s--gone { color: var(--risk); }
.sh-ex-foot { padding: 14px 20px 18px; border-top: 1px solid var(--line-soft); background: var(--surface); }
.sh-ex-more-n { color: var(--text-3); font-weight: 500; }

/* Представитель магазина (company-note A) */
.sh-cn { border-top: 1px solid var(--line-soft); padding-top: 20px; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); max-width: 720px; margin-top: -16px; }
.sh-cn-ic { flex-shrink: 0; padding-top: 1px; color: var(--text-3); display: flex; }
.sh-cn-ic--ok { color: var(--brand-text); }
.sh-cn-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sh-cn-link .ic { transition: transform var(--dur-hover) var(--ease-std); }
.sh-cn-link:hover .ic { transform: translateX(3px); }

/* Появление блоков при прокрутке (shop.js): пока блок не показался — анимации на паузе */
.sh-rv-on .sh-rv:not(.is-in), .sh-rv-on .sh-rv:not(.is-in) * { animation-play-state: paused; }

/* ==========================================================================
   Промежуточная ширина 768–1199: колонки сжимаются и переносятся
   ========================================================================== */
@media (max-width: 1199px) {
  .sh-wrap { gap: 48px; }
  .sh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-stat--mid { grid-column: 1 / -1; order: 3; }
  .sh-cp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "when" "title" "marks" "act" "nolink"; padding-left: 176px; }
  .sh-cp--urgent { padding-left: 175px; }
  .sh-cp-stub { width: 152px; }
  .sh-cp .oc-size { left: 18px; font-size: 30px; }
  .sh-cp-kind { left: 18px; }
  .sh-cp .oc-actions { align-self: stretch; margin-top: 4px; }
  .sh-cp.has-nolink .oc-actions { margin-bottom: 0; }
  .sh-cp-nolink { grid-area: nolink; margin-top: -4px; }
  .sh-none { flex-wrap: wrap; }
  .sh-none-act { width: 100%; padding: 0 24px 20px 120px; }
  .sh-pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-trust-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sh-tcard { max-width: 640px; }
  .sh-rev, .sh-feed { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sh-form-grid.has-fate { grid-template-columns: minmax(0, 1fr); }
  .sh-gf { grid-template-columns: minmax(0, 1fr) 260px; padding: 32px; }
  .sh-gf-cat { width: 240px; }
  .sh-ex-cols, .sh-ex-row { grid-template-columns: minmax(0, 1fr) 190px 150px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sh-gf { grid-template-columns: minmax(0, 1fr); }
  .sh-gf-art { display: none; }
  .sh-gf-ver { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
  .sh-gf-ver .ic { flex-shrink: 0; color: var(--text-3); }
  .sh-qs { grid-template-columns: minmax(0, 1fr); }
  .sh-sum-bar { width: 140px; }
}

/* ==========================================================================
   Телефон < 768: одна колонка, поля 16, секции 32
   ========================================================================== */
@media (max-width: 767px) {
  .sh { padding-block: 4px 40px; }
  .sh-wrap { gap: 32px; }
  .sh-top { gap: 16px; }
  .sh-crumbs { margin-inline: -6px; }
  .sh-hero { gap: 16px; }
  .sh-id { gap: 12px; }
  .sh-name { align-items: center; gap: 12px; }
  .sh-logo { width: 48px; height: 48px; border-radius: var(--r-14); }
  .sh-logo img { max-width: 36px; max-height: 36px; }
  .sh-logo--mono { font-size: 15px; }
  .sh-name-t { gap: 2px; }
  .sh-h1 { font-size: 28px; line-height: 1.15; }
  .sh-domain { font-size: 14px; }
  /* порядок: имя → шкала → описание */
  .sh-scale { order: 2; margin-top: 0; gap: 6px; padding: 14px 16px 12px; border-radius: var(--r-20); }
  .sh-desc { order: 3; padding-left: 0; margin-top: 0; }
  .sh-desc-t { font-size: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .sh-desc-t.is-open { display: block; -webkit-line-clamp: none; }
  .sh-scale-head { gap: 8px; min-height: 24px; }
  .sh-scale-ic .ic { width: 20px; height: 20px; }
  .sh-scale-t { flex: 1 1 auto; font-size: 16px; }
  .sh-scale-v { display: none; }
  .sh-scale-go { font-size: 14px; gap: 4px; }
  .sh-go-pc { display: none; }
  .sh-go-m { display: inline; }
  .sh-bar { padding-top: 36px; }
  .sh-band { height: 12px; }
  /* на телефоне своя категория — насыщенная, остальные — бледные */
  .sh-scale .sh-band--risky { background: var(--risk-track); }
  .sh-scale .sh-band--caveats { background: var(--warn-line); }
  .sh-scale .sh-band--ordinary { background: var(--line-field); }
  .sh-scale .sh-band--reliable { background: var(--brand-track); }
  .sh-scale .sh-band--risky.is-on { background: var(--risk); }
  .sh-scale .sh-band--caveats.is-on { background: var(--warn); }
  .sh-scale .sh-band--ordinary.is-on { background: var(--text-3); }
  .sh-scale .sh-band--reliable.is-on { background: var(--brand); }
  .sh-scale.sh-scale--unknown .sh-band { background-color: var(--surface-3); background-image: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 8px); }
  .sh-pin-n { height: 26px; padding: 0 9px; border-radius: var(--r-8); font-size: 14px; }
  .sh-pin-k { width: 20px; height: 20px; }
  .sh-legend { display: none; }
  .sh-ticks { display: block; position: relative; height: 18px; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .sh-now { display: block; position: relative; height: 18px; }
  .sh-now-t { position: absolute; top: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; font-size: 13px; line-height: 18px; font-weight: 700; white-space: nowrap; }
  .sh-now-t i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
  .sh-scale--reliable .sh-now-t i { background: var(--brand); }
  .sh-scale--caveats .sh-now-t i { background: var(--warn); }
  .sh-scale--risky .sh-now-t i { background: var(--risk); }
  .sh-now-t--q { left: 0; transform: none; }
  .sh-now-t--q i { border: 1.5px dashed var(--text-3); background: none; }

  .sh-stats { gap: 10px; }
  .sh-stat { padding: 14px; }
  .sh-stat dt { font-size: 14px; }
  .sh-stat-n { font-size: 28px; align-items: center; gap: 8px; }
  .sh-stat--arch .sh-stat-n { font-size: 28px; }
  .sh-stat-ic { width: 34px; height: 34px; }
  .sh-stat--mid { padding: 14px; gap: 14px; }
  .sh-part { gap: 8px 12px; }
  .sh-part dt { font-size: 15px; }
  .sh-part-ic { width: 28px; height: 28px; }
  .sh-part-ic .ic { width: 16px; height: 16px; }
  .sh-part-n .sh-roll { font-size: 20px; }
  .sh-part-n > span:last-child { font-size: 14px; }
  .sh-track { height: 8px; }

  .sh-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
  .sh-h2row { width: 100%; justify-content: space-between; align-items: flex-start; }
  .sh-sort { align-items: flex-start; }
  .sh-sort .ic { margin-top: 2px; }

  /* купон: корешок сверху (скидка слева, вид и срок справа), ниже — заголовок, метки, код */
  .sh-cp, .sh-cp--urgent {
    min-height: 0; padding: 86px 16px 16px; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "marks" "act" "nolink"; row-gap: 12px; border-radius: var(--r-16);
  }
  .sh-cp--urgent { padding: 85px 15px 15px; }
  .sh-cp-stub { right: 0; width: auto; bottom: auto; height: 72px; border-right: 0; border-bottom: 2px dashed var(--line-field); }
  .sh-cp-stub::before, .sh-cp-stub::after { top: auto; bottom: -11px; right: auto; }
  .sh-cp-stub::before { left: -11px; }
  .sh-cp-stub::after { right: -11px; }
  .sh-cp--urgent .sh-cp-stub::before, .sh-cp--urgent .sh-cp-stub::after { top: auto; bottom: -12px; }
  .sh-cp .oc-size { left: 16px; top: 16px; font-size: 32px; }
  .sh-cp .oc-size--word { top: 20px; font-size: 22px; }
  .sh-cp-kind { left: auto; right: 16px; top: 12px; }
  .sh-cp .oc-shop { position: absolute; right: 16px; top: 38px; }
  .sh-cp .oc-when { font-size: 14px; }
  .sh-cp .oc-title { font-size: 17px; }
  .sh-cp .oc-marks { flex-direction: column; align-items: stretch; gap: 8px; }
  .sh-cp .oc-votes { width: 100%; }
  .sh-cp .oc-track { flex: 1 1 auto; width: auto; }
  .sh-cp .oc-go { width: 48px; padding: 0; font-size: 0; gap: 0; }
  .sh-cp .oc-go .ic { width: 18px; height: 18px; }

  .sh-sub { flex-direction: column; min-height: 0; margin-top: 16px; }
  .sh-sub-art { width: auto; height: 64px; justify-content: flex-start; padding: 0 16px; gap: 12px; }
  .sh-sub-art::after { content: "Следующий код — письмом"; font-size: 16px; font-weight: 700; color: var(--warm-dark); }
  .sh-sub-ic { width: 40px; height: 40px; }
  .sh-sub-b { padding: 16px; gap: 12px; }
  .sh-sub-h { display: none; }
  .sh-sub-c { order: -1; font-size: 15px; color: var(--text-2); }
  .sh-sub-btn { width: 100%; justify-content: center; text-align: center; }
  .sh-none { flex-direction: column; min-height: 0; }
  .sh-none-art { width: auto; height: 72px; }
  .sh-none-b { padding: 16px 16px 8px; }
  .sh-none-h { font-size: 17px; }
  .sh-none-p { font-size: 15px; }
  .sh-none-act { width: auto; padding: 0 16px 16px; }

  .sh-pl { gap: 16px; }
  .sh-pl-h { font-size: 18px; }
  .sh-pl-order { margin-left: 0; order: 3; width: 100%; font-size: 13px; }
  .sh-pl-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sh-pl-card { padding: 16px; gap: 14px; border-radius: var(--r-16); }
  .sh-pl-t { font-size: 17px; }
  .sh-pl-copy { width: 44px; height: 44px; padding: 0; }
  .sh-pl-copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sh-pl-go { align-self: stretch; }

  .sh-trust { gap: 20px; }
  .sh-tcard { padding: 0; border: 0; gap: 16px; }
  .sh-tcard-top { gap: 16px; }
  .sh-ring { width: 88px; height: 88px; }
  .sh-ring-n { font-size: 28px; }
  .sh-ring-n.is-3 { font-size: 23px; }
  .sh-mini { padding: 14px 16px 12px; border-radius: var(--r-16); background: var(--surface-2); }
  .sh-tcard-foot { padding-top: 0; border-top: 0; gap: 8px; }
  .sh-tnone { padding: 16px; gap: 12px; flex-direction: column; }
  .sh-tnone-p { font-size: 16px; }

  .sh-rev, .sh-feed { gap: 16px; }
  .sh-rev-side { gap: 12px; }
  .sh-rev-lead { font-size: 16px; }
  .sh-rev-how { padding: 14px 16px; flex-wrap: wrap; }
  .sh-rev-how > .ic { display: none; }
  .sh-rev-how p { font-size: 14px; }
  .sh-rev-leg { font-size: 13px; }
  .sh-sum-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; align-items: start; }
  .sh-sum-row dt { gap: 12px; align-items: flex-start; }
  .sh-sum-ic { width: auto; height: auto; background: none; padding-top: 2px; }
  .sh-sum-row.is-warn .sh-sum-ic { background: none; }
  .sh-sum-q { font-size: 16px; }
  .sh-sum-row dd { flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
  .sh-sum-bar { width: 96px; }
  .sh-sum-n { width: auto; }
  .sh-sum-big { font-size: 24px; }
  .sh-sum-foot { flex-wrap: wrap; align-items: flex-start; padding: 12px 16px 4px; gap: 8px 10px; }
  .sh-sum-foot p { flex-basis: calc(100% - 30px); font-size: 14px; }
  .sh-sum-foot .btn--text { flex-basis: 100%; justify-content: flex-start; }
  .sh-rev-none { flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px; }
  .sh-rev-cat { width: 120px; }
  .sh-rev-none-act .btn--md { width: 100%; justify-content: center; }

  .sh-feed-side { gap: 12px; }
  .sh-feed-h { font-size: 19px; }
  .sh-feed-hd p { font-size: 15px; }
  .sh-feed-legend { background: none; padding: 0; gap: 8px; }
  .sh-feed-legend > div:last-child { display: none; }
  .sh-feed-legend > div { gap: 8px; }
  .sh-feed-li { width: auto; height: auto; background: none; margin-top: 2px; }
  .sh-feed-li--ok { background: none; }
  .sh-feed-legend p { display: block; }
  .sh-feed-d { display: inline; }
  .sh-feed-legend b { font-size: 14px; }
  .sh-feed-legend b::after { content: " — "; font-weight: 400; }
  .sh-feed-hidden { background: none; padding: 0; font-size: 13px; color: var(--text-3); }
  .sh-feed-prob { display: none; }
  .sh-shelf { padding: 14px; border-radius: var(--r-18); gap: 12px; }
  .sh-shelf-t h3 { font-size: 17px; }
  .sh-shelf-n { font-size: 26px; }
  .sh-card { padding: 16px; column-gap: 12px; }
  .sh-card-hd time { flex-basis: 100%; font-size: 13px; }
  .sh-card-b { padding-top: 4px; }
  .sh-more-btn { align-self: stretch; justify-content: center; }

  .sh-form-grid.has-fate { gap: 16px; }
  .sh-rf { padding: 18px 16px 16px; gap: 18px; border-radius: var(--r-18); }
  .sh-rf-head { flex-direction: column; gap: 12px; }
  .sh-rf-ic { width: 44px; height: 44px; }
  .sh-rf-hrow { flex-direction: column; gap: 2px; }
  .sh-rf-h { font-size: 19px; }
  .sh-rf-ht p { font-size: 15px; }
  .sh-qs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sh-q { border: 0; background: none; padding: 0; gap: 8px; }
  .sh-q-t { font-size: 16px; }
  .sh-q-n { display: none; }
  .sh-seg-o { height: 44px; }
  .sh-rf-foot { flex-direction: column; align-items: stretch; padding-top: 16px; }
  .sh-rf-ver { font-size: 14px; }
  .sh-rf-btns { flex-direction: column-reverse; align-items: stretch; }
  .sh-rf-btns .btn { width: 100%; justify-content: center; }
  .sh-fate { padding: 16px; }

  .sh-gf { grid-template-columns: minmax(0, 1fr); padding: 0; min-height: 0; gap: 0; border-radius: var(--r-20); overflow: hidden; border: 1px solid var(--warn-line); }
  .sh-gf-art { order: -1; height: 190px; overflow: hidden; }
  .sh-gf-note { display: none; }
  .sh-gf-note--m { display: flex; top: 20px; left: auto; right: 16px; width: 176px; padding: 12px 14px; gap: 4px; border-radius: var(--r-16); }
  .sh-gf-note--m b { font-size: 14px; }
  .sh-gf-note--m span { font-size: 13px; line-height: 1.4; color: var(--text-2); }
  .sh-gf-cat { left: 8px; right: auto; bottom: -60px; width: 200px; }
  .sh-gf-card { border-radius: 0; box-shadow: none; padding: 16px; gap: 16px; }
  .sh-gf-h { font-size: 19px; }
  .sh-gf-p { font-size: 15px; }
  .sh-gf-pc { display: none; }
  .sh-gf-ans { display: none; }
  .sh-gf-q { font-size: 15px; }
  .sh-gf-act { flex-direction: column; align-items: stretch; }
  .sh-gf-act .btn { justify-content: center; }
  .sh-gf-cap { display: none; }
  .sh-gf-ver { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
  .sh-gf-ver .ic { flex-shrink: 0; color: var(--text-3); }

  .sh-ex { border-radius: var(--r-18); }
  .sh-ex-head { padding: 14px 16px; gap: 12px; align-items: center; }
  .sh-ex-ic { width: 44px; height: 44px; border: 0; color: var(--risk); }
  .sh-ex-ht { flex-direction: column; align-items: flex-start; gap: 0; }
  .sh-ex-tag { height: auto; padding: 0; background: none; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
  .sh-ex-tag-n { display: inline; }
  .sh-ex-h { font-size: 19px; }
  .sh-ex-n { display: none; }
  .sh-ex-tog { display: flex; width: 44px; height: 44px; border-radius: var(--r-12); border: 1px solid var(--line); background: var(--surface); color: var(--text); align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--dur-menu) var(--ease-std); }
  .sh-ex-tog[aria-expanded="false"] .ic { transform: rotate(180deg); }
  .sh-ex-intro { padding: 0 16px 14px; }
  .sh-ex-intro p { font-size: 15px; }
  .sh-ex-cols { display: none; }
  .sh-ex-t { grid-area: t; font-size: 15px; }
  .sh-ex-mono { display: none; }
  .sh-ex-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "t t" "s d"; gap: 2px 8px; padding: 12px 16px; }
  .sh-ex-d { grid-area: d; font-size: 13px; font-weight: 600; color: var(--risk); }
  .sh-ex-d--none { font-weight: 400; color: var(--text-3); }
  .sh-ex-s { grid-area: s; font-size: 13px; color: var(--risk); }
  .sh-ex-s:not(.sh-ex-s--gone) { color: var(--risk); }
  .sh-ex-foot { padding: 12px 16px 16px; }
  .sh-ex-more { width: 100%; justify-content: center; }

  .sh-cn { margin-top: 0; font-size: 14px; }
}

/* «О магазине» — SEO-текст из таблицы под списками, текстом сразу (SEO-ТЗ, п. 4) */
.sh-about { max-width: 72ch; }
.sh-about .h2 { margin: 0 0 var(--s-4); }
.sh-about p { margin: 0 0 var(--s-3); line-height: 1.6; }
.sh-about p:last-child { margin-bottom: 0; }

/* Разделы магазина кнопками (этап 6) */
.sh-cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
/* Разделы Маркета на его странице: кнопки-переходы и пометка рекламы под ними */
/* Яндекс Маркет: разделы группами и популярные товары каталога (реф-ссылки с пометкой «Реклама») */
.sh-mkt-note { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-2) 0 0; font-size: 14px;
  line-height: 1.5; color: var(--text-2); }
.sh-mkt-note svg { flex: none; margin-top: 3px; color: var(--text-3); }
.sh-mkt-g { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.sh-mkt-gh { margin: 0; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: normal; color: var(--text-2); }
.sh-mkt-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sh-mkt-btn { gap: 6px; }
.sh-mkt-tag { font-size: 10px; font-weight: 500; line-height: 1; padding: 2px 4px; border-radius: 4px;
  color: var(--text-3); border: 1px solid var(--line-soft); }
.sh-mp-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sh-mp-i { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line-soft);
  border-radius: var(--r-12); min-width: 0; }
.sh-mp-main { display: flex; flex-direction: column; gap: var(--s-2); color: inherit; text-decoration: none; flex: 1; min-width: 0; }
.sh-mp-main:hover .sh-mp-t { text-decoration: underline; }
.sh-mp-img { display: flex; align-items: center; justify-content: center; height: 96px; color: var(--text-3); }
.sh-mp-img img { width: 96px; height: 96px; object-fit: contain; }
.sh-mp-t { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; }
.sh-mp-p { margin-top: auto; font-size: 14px; }
.sh-mp-p span { color: var(--text-3); font-size: 13px; }
.sh-mp-go { width: 100%; justify-content: center; }
@media (max-width: 480px) {
  .sh-mp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .sh-mp-i { padding: var(--s-2); }
  .sh-mp-go { padding-left: 6px; padding-right: 6px; font-size: 13px; }
}

/* FAQ магазина */
.sh-faq-item { border-bottom: 1px solid var(--line-soft); }
.sh-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) 0; cursor: pointer; list-style: none; }
.sh-faq-item > summary::-webkit-details-marker { display: none; }
.sh-faq-item[open] > summary svg { transform: rotate(180deg); }
.sh-faq-q { margin: 0; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: normal; }
.sh-faq-item > p { margin: 0 0 var(--s-4); max-width: 72ch; line-height: 1.6; color: var(--text-2); }

/* Похожие магазины и товары магазина */
.sh-sim-list, .sh-pr-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.sh-sim-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* Кнопки по типам предложений и блок «в цифрах» (правки 21.10, п. 1); выбранная — aria-pressed из base.css */
.sh-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.sh-kind { cursor: pointer; font-family: inherit; }
.sh-st-grid { margin: 16px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.sh-st-grid > div { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 16px; min-width: 0; }
.sh-st-grid dt { font-size: 14px; color: var(--text-2); }
.sh-st-grid dd { margin: 4px 0 0; font-size: 24px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sh-pr-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.sh-sim, .sh-pr { display: flex; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line-soft);
  border-radius: var(--r-12); color: inherit; text-decoration: none; height: 100%; }
.sh-sim { align-items: center; }
.sh-sim:hover, .sh-pr:hover { border-color: var(--line); background: var(--surface); }
.sh-sim-t { display: flex; flex-direction: column; min-width: 0; }
.sh-sim-t span { color: var(--text-3); font-size: 14px; }
.sh-pr { flex-direction: column; }
.sh-pr img { width: 96px; height: 96px; object-fit: contain; align-self: center; }
.sh-pr-t { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sh-pr-p { margin-top: auto; }
.sh-pr-w { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-3); }