/* ============================================================================
 * shorts/feed.css v0.25.4 — TikTok/Reels-grade vertical feed.
 *
 * Layout:
 *   • Mobile: full-bleed Investigation animation
 *   • Desktop: phone-shaped centered card (responsive 480/540/580px) with
 *     multi-layer shadow + 3D mouse-tracking parallax + idle oscillation
 *   • Right-side action stack (vertical icons + numbers) — TikTok pattern
 *   • Bottom-left caption (mp pill + product name + verdict line)
 *   • Minimal top-nav (× close + ⏸ pause + 🔇 mute, top-left)
 *   • Auto-hide ultra-thin progress bar (becomes 0.2 opacity 1.5s after settle,
 *     1.0 opacity on viewport :hover or .is-paused)
 *
 * Cinematic effects живут в shorts/cinematic.css.
 * ========================================================================== */

:root {
    --pb-shorts-bg: #0b0d12;
    --pb-shorts-fg: #ffffff;
    --pb-shorts-fg-soft: rgba(255,255,255,0.78);
    --pb-shorts-fg-dim: rgba(255,255,255,0.55);
    --pb-shorts-mint: #4ce2c1;
    --pb-shorts-pink: #ff5d8f;
    --pb-shorts-gold: #ffc94a;
    --pb-shorts-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --pb-shorts-action-size: 48px;
    --pb-shorts-action-gap: 18px;
}

.pb-shorts-body {
    background: var(--pb-shorts-bg);
    color: var(--pb-shorts-fg);
    overflow: hidden;
    overscroll-behavior: none;
}

/* ─── Top-nav (minimal, top-left) ────────────────────────────────────────── */
.pb-shorts-topnav {
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0; right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    pointer-events: none;
    /* Лёгкий gradient для читаемости иконок поверх content */
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 100%);
    transition: opacity 0.35s var(--pb-shorts-ease);
}
/* v0.25.11: унификация всех top-nav кнопок (×, ⏸, 🔲, 🔇) — одинаковый размер,
   одинаковый padding, одинаковый SVG. Раньше grid-button был 32x32 на mobile vs
   36x36 у остальных + SVG 17x17 vs 18x18 — отсюда "кривизна сверху". */
.pb-shorts-topnav-back,
.pb-shorts-topnav-mute,
.pb-shorts-topnav-pause,
.pb-shorts-topnav-grid {
    pointer-events: auto;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    transition: background 0.18s var(--pb-shorts-ease), transform 0.18s var(--pb-shorts-ease);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    outline: none; /* убираем gold focus-ring который застревал после tap */
}
.pb-shorts-topnav-back svg,
.pb-shorts-topnav-mute svg,
.pb-shorts-topnav-pause svg,
.pb-shorts-topnav-grid svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.pb-shorts-topnav-back:hover,
.pb-shorts-topnav-mute:hover,
.pb-shorts-topnav-pause:hover,
.pb-shorts-topnav-grid:hover { background: rgba(0,0,0,0.55); transform: scale(1.05); }
.pb-shorts-topnav-back:focus-visible,
.pb-shorts-topnav-mute:focus-visible,
.pb-shorts-topnav-pause:focus-visible,
.pb-shorts-topnav-grid:focus-visible { box-shadow: 0 0 0 2px rgba(76, 226, 193, 0.6); }

/* Mute toggle visual states */
.pb-shorts-topnav-mute.is-muted .pb-shorts-icon-unmuted { display: none; }
.pb-shorts-topnav-mute:not(.is-muted) .pb-shorts-icon-muted { display: none; }

/* Pause toggle visual states (pause: showing pause icon, paused: showing play icon) */
.pb-shorts-topnav-pause .pb-shorts-icon-play { display: none; }
.pb-shorts-topnav-pause.is-paused .pb-shorts-icon-pause { display: none; }
.pb-shorts-topnav-pause.is-paused .pb-shorts-icon-play { display: inline-block; }

/* ─── Progress bar (top, ultra-thin, 5 segments, auto-hide) ───────────────── */
.pb-shorts-topnav-progress {
    pointer-events: none;
    flex: 1 1 auto;
    display: flex;
    gap: 3px;
    align-items: center;
    height: 100%;
    padding: 0 6px;
    margin-left: 4px;
    transition: opacity 0.35s var(--pb-shorts-ease);
}
.pb-shorts-topnav-progress .pb-bar {
    flex: 1 1 0;
    height: 1.5px;
    border-radius: 2px;
    background: rgba(255,255,255,0.18);
    overflow: hidden;
    position: relative;
}
.pb-shorts-topnav-progress .pb-bar > i {
    display: block;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,0.92);
    transform-origin: left center;
    transform: scaleX(0);
}
.pb-shorts-topnav-progress .pb-bar.is-past > i { transform: scaleX(1); }
.pb-shorts-topnav-progress .pb-bar.is-current > i {
    transform: scaleX(1);
    transition: transform 1500ms linear;
}
.pb-shorts-topnav-progress .pb-bar.is-future > i { transform: scaleX(0); }

/* Auto-hide: после settle (через JS class is-auto-hidden) → opacity 0.2.
   На hover viewport ИЛИ когда current short paused → opacity 1.0. */
.pb-shorts-topnav.is-auto-hidden .pb-shorts-topnav-progress { opacity: 0.18; }
.pb-shorts-viewport:hover ~ * .pb-shorts-topnav-progress,
.pb-shorts-viewport:hover .pb-shorts-topnav .pb-shorts-topnav-progress,
.pb-shorts-topnav:hover .pb-shorts-topnav-progress { opacity: 1; }
/* Когда виден pause-indicator на текущем shorts (is-user-paused) — top-nav opaque */
.pb-short.is-user-paused ~ .pb-shorts-topnav .pb-shorts-topnav-progress,
.pb-shorts-track:has(.pb-short.is-user-paused) ~ .pb-shorts-topnav-progress { opacity: 1; }

/* Body класс is-shorts-paused JS toggleит когда current paused — глобальный сигнал */
.pb-shorts-body.is-shorts-paused .pb-shorts-topnav { opacity: 1 !important; }
.pb-shorts-body.is-shorts-paused .pb-shorts-topnav-progress { opacity: 1 !important; }

/* ─── Viewport / track / single short ────────────────────────────────────── */
.pb-shorts-viewport {
    position: relative;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    touch-action: pan-y;
    /* 3D base for parallax tilt */
    perspective: 1400px;
    perspective-origin: 50% 50%;
}
.pb-shorts-track {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    /* CSS variables driven by JS pointermove; default identity */
    --rx: 0deg;
    --ry: 0deg;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
    will-change: transform;
}
.pb-short {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background: var(--pb-shorts-bg);
}

/* Investigation stage full-bleed — никаких padding'ов под top/bottom UI.
   UI поверх stage с z-index. */
.pb-short-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ─── Right-side action stack (TikTok-style) ─────────────────────────────── */
.pb-short-actions-stack {
    position: absolute;
    right: 12px;
    bottom: calc(28px + env(safe-area-inset-bottom));
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pb-shorts-action-gap);
    /* v0.25.39: touch-action manipulation на actions-stack — браузер не задерживает
       click для double-tap detection + Embla не считает таппы за drag.
       Юзер: «иногда тупо лайки не ставятся». */
    touch-action: manipulation;
}

.pb-short-act-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: 0;
    color: #fff;
    /* v0.25.37: padding для расширения hit-area. Юзер: «иногда тупо лайки не
       ставятся». Раньше padding 0 → hit-area = visible button (48px). +10px
       padding → effective tap-target 68px. Touch-action manipulation чтобы
       browser не задерживал click event для double-tap detection. */
    padding: 6px 4px;
    min-width: 56px;
    min-height: 56px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.pb-short-act-icon {
    width: var(--pb-shorts-action-size);
    height: var(--pb-shorts-action-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    transition:
        transform 0.18s var(--pb-shorts-ease),
        background 0.18s var(--pb-shorts-ease);
}

.pb-short-act-icon svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}

.pb-short-act-btn:hover .pb-short-act-icon { transform: scale(1.08); background: rgba(0,0,0,0.5); }
.pb-short-act-btn:active .pb-short-act-icon { transform: scale(0.92); }

.pb-short-act-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.65);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Liked state */
.pb-short-act-btn.is-liked .pb-short-act-icon svg {
    stroke: var(--pb-shorts-pink);
    fill: var(--pb-shorts-pink);
}

/* Saved state */
.pb-short-act-btn.is-saved .pb-short-act-icon svg {
    stroke: var(--pb-shorts-gold);
    fill: var(--pb-shorts-gold);
}

/* Marketplace logo «avatar» в самом низу stack'а */
.pb-short-act-mp {
    width: var(--pb-shorts-action-size);
    height: var(--pb-shorts-action-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #fff;
    color: #0b0d12;
    font-family: monospace, "SF Mono", Consolas;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.02em;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.18s var(--pb-shorts-ease);
}
.pb-short-act-mp:hover { transform: scale(1.08); }

/* Per-marketplace tint */
.pb-short[data-marketplace="wildberries"] .pb-short-act-mp { background: linear-gradient(135deg,#cb11ab,#7a1e9a); color: #fff; }
.pb-short[data-marketplace="ozon"] .pb-short-act-mp        { background: #005bff; color: #fff; }
.pb-short[data-marketplace="yandex_market"] .pb-short-act-mp,
.pb-short[data-marketplace="ym"] .pb-short-act-mp           { background: #ffcc00; color: #0b0d12; }
.pb-short[data-marketplace="megamarket"] .pb-short-act-mp,
.pb-short[data-marketplace="mm"] .pb-short-act-mp,
.pb-short[data-marketplace="sbermegamarket"] .pb-short-act-mp { background: #21a038; color: #fff; }

/* ─── Bottom-left caption ────────────────────────────────────────────────── */
.pb-short-caption {
    position: absolute;
    left: 14px;
    right: calc(var(--pb-shorts-action-size) + 36px); /* leave room for actions */
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 15;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.65);
    pointer-events: none;
    /* Soft gradient под caption для читаемости поверх любого фона */
    padding-top: 60px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.32) 60%, rgba(0,0,0,0.55) 100%);
    margin: 0 -14px -20px -14px;
    padding-left: 14px;
    padding-right: calc(var(--pb-shorts-action-size) + 36px);
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.pb-short-caption > * { pointer-events: auto; }

.pb-short-caption-mp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: monospace, "SF Mono", Consolas;
    font-size: 12px;
    font-weight: 700;
    color: var(--pb-shorts-fg-soft);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.pb-short-caption-mp::before {
    content: "@";
    color: var(--pb-shorts-mint);
    font-weight: 800;
}

.pb-short-caption-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.32;
    margin-bottom: 6px;
    /* 2-line clamp */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* v0.25.11: legacy одинарная verdict-pill — оставлена как fallback если старый
   feed.js всё ещё рендерит её (SW-cache). Скрыта когда есть новая big-badge. */
.pb-short-caption-verdict {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.32);
}
.pb-short-caption-verdict-wrapper + .pb-short-caption-verdict { display: none; }
.pb-short[data-verdict="avoid"] .pb-short-caption-verdict {
    color: var(--pb-shorts-pink);
    background: rgba(255, 93, 143, 0.18);
    border-color: rgba(255, 93, 143, 0.42);
}
.pb-short[data-verdict="caution"] .pb-short-caption-verdict {
    color: var(--pb-shorts-gold);
    background: rgba(255, 201, 74, 0.18);
    border-color: rgba(255, 201, 74, 0.42);
}
.pb-short[data-verdict="trusted"] .pb-short-caption-verdict {
    color: var(--pb-shorts-mint);
    background: rgba(76, 226, 193, 0.18);
    border-color: rgba(76, 226, 193, 0.42);
}

/* ─── Like burst animation (центр экрана при double-tap) ─────────────────── */
.pb-short-like-burst {
    position: absolute;
    z-index: 25;
    pointer-events: none;
    width: 120px;
    height: 120px;
    color: var(--pb-shorts-pink);
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
}
.pb-short-like-burst.is-firing {
    animation: pb-shorts-like-burst 0.7s var(--pb-shorts-ease) forwards;
}
.pb-short-like-burst svg {
    width: 100%; height: 100%;
    fill: currentColor;
    stroke: currentColor;
    filter: drop-shadow(0 4px 24px rgba(255,93,143,0.65));
}
@keyframes pb-shorts-like-burst {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-12deg); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(8deg); }
    50%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1.0) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4) rotate(0deg); }
}

/* ─── Pause floating overlay indicator (CSS-only, shown when .is-user-paused) */
.pb-short-pause-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 22;
    width: 92px;
    height: 92px;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    transition: opacity 0.22s var(--pb-shorts-ease), transform 0.22s var(--pb-shorts-ease);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.pb-short-pause-indicator svg {
    width: 36px;
    height: 36px;
    fill: rgba(255,255,255,0.95);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.pb-short.is-user-paused .pb-short-pause-indicator {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ─── Hint-overlay (first-visit) ─────────────────────────────────────────── */
.pb-shorts-hint {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11,13,18,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    animation: pb-shorts-hint-fadein 0.40s var(--pb-shorts-ease) both;
}
.pb-shorts-hint[hidden] { display: none; }
.pb-shorts-hint-inner {
    display: flex; flex-direction: column; align-items: center;
    gap: 18px; padding: 32px 28px; text-align: center;
}
.pb-shorts-hint-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(76,226,193,0.10);
    border: 1.5px solid rgba(76,226,193,0.40);
    display: flex; align-items: center; justify-content: center;
    color: var(--pb-shorts-mint);
    animation: pb-shorts-hint-bounce 1.6s ease-in-out infinite;
}
.pb-shorts-hint-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; }
.pb-shorts-hint-text {
    font-size: 16px; font-weight: 600; color: var(--pb-shorts-fg);
    line-height: 1.4; max-width: 280px;
}
.pb-shorts-hint-text b { color: var(--pb-shorts-mint); }
@keyframes pb-shorts-hint-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pb-shorts-hint-bounce {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pb-shorts-hint-icon,
    .pb-short-like-burst.is-firing { animation: none; }
    .pb-shorts-topnav-progress .pb-bar.is-current > i { transition: none; transform: scaleX(1); }
    .pb-shorts-topnav-back, .pb-shorts-topnav-mute, .pb-shorts-topnav-pause,
    .pb-short-act-btn .pb-short-act-icon, .pb-short-act-mp { transition: none; }
    .pb-shorts-topnav-back:hover, .pb-shorts-topnav-mute:hover, .pb-shorts-topnav-pause:hover,
    .pb-short-act-btn:hover .pb-short-act-icon, .pb-short-act-mp:hover { transform: none; }
    /* Disable parallax + idle oscillation */
    .pb-shorts-track { transform: none !important; transition: none !important; }
    .pb-shorts-viewport { animation: none !important; }
    .pb-shorts-topnav, .pb-shorts-topnav-progress { transition: none; opacity: 1 !important; }
}

/* ─── Mobile small-screen tuning ─────────────────────────────────────────── */
@media (max-width: 480px) {
    :root {
        --pb-shorts-action-size: 44px;
        --pb-shorts-action-gap: 16px;
    }
    .pb-short-act-icon svg { width: 22px; height: 22px; }
    .pb-short-act-label { font-size: 11px; }
    .pb-short-caption {
        left: 12px; right: calc(var(--pb-shorts-action-size) + 28px);
        bottom: calc(16px + env(safe-area-inset-bottom));
        margin: 0 -12px -16px -12px;
        padding-left: 12px;
        padding-right: calc(var(--pb-shorts-action-size) + 28px);
    }
    .pb-short-caption-name { font-size: 14px; }
    .pb-short-caption-verdict { font-size: 12px; padding: 3px 10px; }
    .pb-short-actions-stack {
        right: 8px;
        bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* ────────────────────────────────────────────────────────────────────────
   v0.25.4: Override embedded-mode стилей внутри .pb-short-stage.
   Investigation в embedded mode по умолчанию использует phone-frame compact
   look (font-size меньше, padding 18×14). На /shorts feed нам нужен
   full-bleed scaling как modal mode. Сбрасываем embedded-overrides.
   Verdict text TIGHTER чтобы поместиться в phone-card на desktop.
   ──────────────────────────────────────────────────────────────────────── */
.pb-short-stage .pb-inv-stage.pb-inv-embedded {
    /* Reset compact paddings до full-viewport scaling */
    padding: 60px 24px 200px;
}
@media (min-width: 768px) {
    .pb-short-stage .pb-inv-stage.pb-inv-embedded {
        padding: 70px 28px 220px;
    }
}

/* Reset font-size/sizing overrides (которые делают compact phone-frame look).
   Inv-embedded scenes в shorts должны рендериться как modal-size, но
   слегка tighter чтобы verdict text не обрезался за phone-card edges. */
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s2-num,
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s3-num,
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s4-sign,
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s4-num {
    font-size: clamp(64px, 12vw, 140px);
}
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s2-pct,
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s4-pct {
    font-size: clamp(26px, 4.5vw, 50px);
}
/* Verdict «МОЖНО БРАТЬ» — TIGHTER чтобы поместился в phone-card 480px wide.
   Было clamp(40px, 9vw, 120px) — обрезалось.
   Теперь clamp(36px, 7vw, 96px) + word-break safety. */
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s5-big {
    font-size: clamp(36px, 7vw, 96px);
    line-height: 1.05;
    max-width: 92%;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    padding: 0 8px;
}
/* Scene 1 image — TIGHTER чтобы не обрезался в phone-card. */
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s1-img {
    width: clamp(140px, 42%, 280px);
    aspect-ratio: 1;
}
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s1-name {
    font-size: clamp(14px, 1.9vw, 21px);
    max-width: 88%;
    text-align: center;
}
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s2-bar {
    width: clamp(200px, 46vw, 440px);
    height: 5px;
}
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s2-meta,
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s3-meta,
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s4-meta {
    font-size: clamp(12px, 1.5vw, 16px);
    max-width: 90%;
    text-align: center;
}
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s3-avatar {
    width: clamp(72px, 12vw, 110px);
    height: clamp(72px, 12vw, 110px);
    font-size: clamp(26px, 4.5vw, 40px);
}

/* Scene host overflow safety — investigation scenes inside phone-card нельзя
   разрешать вылезать за borders. */
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-scene {
    max-width: 100%;
    overflow: hidden;
}

/* Скрываем встроенный scene-indicator (5 dots) embedded mode — у нас свой
   progress-bar в top-nav. */
.pb-short-stage .pb-inv-scene-dots { display: none !important; }

/* Скрываем replay button (он для hero phone-frame, в shorts свайп навигация) */
.pb-short-stage .pb-inv-replay { display: none !important; }

/* ────────────────────────────────────────────────────────────────────────
   v0.25.4: Phone-style centered layout на desktop (>=768px).
   Юзер: «шортсы должны быть под телефоны а не на весь экран».
   Multi-tier responsive sizing:
     - 768-1279px:  480px wide   (was 420)
     - 1280-1599px: 540px wide
     - 1600px+:     580px wide

   Multi-layer phone shadow (mint+pink glow + ring + inset highlight) +
   3D mouse-tracking parallax + idle oscillation.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .pb-shorts-body {
        background:
            radial-gradient(circle at 30% 40%, rgba(76,226,193,0.06), transparent 50%),
            radial-gradient(circle at 70% 60%, rgba(255,93,143,0.04), transparent 50%),
            radial-gradient(ellipse at center, #0a0c14 0%, #060810 70%);
    }

    .pb-shorts-viewport {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(480px, 92vw);
        height: min(960px, 92dvh);
        aspect-ratio: 9 / 19;
        max-height: calc(100dvh - 32px);
        border-radius: 32px;
        overflow: hidden;
        /* Multi-layer shadow: outer mint + outer pink + 1px ring + inset highlight + inner reflection */
        box-shadow:
            0 50px 120px -20px rgba(76, 226, 193, 0.18),
            0 80px 200px -40px rgba(255, 93, 143, 0.12),
            0 24px 60px -12px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            inset 0 -1px 0 rgba(0, 0, 0, 0.4);
        background: #0b0d12;
        /* Idle slow oscillation when not hovered/paused — driven by 3D rotateY */
        animation: pb-shorts-idle-osc 9s ease-in-out infinite alternate;
        will-change: transform;
    }

    /* Pause idle oscillation while hovered (parallax takes over) or while paused */
    .pb-shorts-viewport:hover,
    .pb-shorts-body.is-shorts-paused .pb-shorts-viewport {
        animation-play-state: paused;
    }

    .pb-short {
        border-radius: inherit;
    }

    /* v0.25.12: Top nav — единая row внутри phone-frame, БЕЗ отдельной фиксированной
       × кнопки. Раньше .pb-shorts-topnav-back имел position:fixed top:24 left:24 →
       × жил на page-edge, остальные внутри phone-card → визуальная асимметрия
       («кривизна сверху по крестику»). Now: все 4 кнопки в flex-row top-nav. */
    .pb-shorts-topnav {
        position: absolute;
        top: 0;
        border-radius: 32px 32px 0 0;
        padding: 12px 14px;
    }
    /* v0.25.12: × вернулся в общий topnav row, но получает auto margin-right
       чтобы остальные (pause/grid/mute) ушли вправо — TikTok-style. */
    .pb-shorts-topnav-back {
        margin-right: auto;
    }

    /* Action stack компактнее на desktop */
    .pb-short-actions-stack {
        right: 10px;
        bottom: 22px;
    }

    /* Caption уже за счёт уменьшенного viewport */
    .pb-short-caption {
        left: 12px;
        right: calc(48px + 24px);
        bottom: 16px;
        margin: 0 -12px -16px -12px;
        padding-left: 12px;
        padding-right: calc(48px + 24px);
        padding-bottom: 16px;
    }

    /* Hint overlay тоже в phone-frame */
    .pb-shorts-hint {
        border-radius: inherit;
    }
}

/* На больших экранах (>=1280) — slightly larger phone */
@media (min-width: 1280px) {
    .pb-shorts-viewport {
        width: min(540px, 30vw);
        height: min(1000px, 92dvh);
    }
}

/* На ultra-wide (>=1600) — biggest */
@media (min-width: 1600px) {
    .pb-shorts-viewport {
        width: min(580px, 32vw);
        height: min(1040px, 92dvh);
    }
}

/* Idle slow oscillation — 0.5deg rotateY back-and-forth.
   GPU-cheap, suspended on hover/pause/reduced-motion. */
@keyframes pb-shorts-idle-osc {
    0%   { transform: translate(-50%, -50%) rotateY(-0.6deg) rotateX(0.3deg); }
    50%  { transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg); }
    100% { transform: translate(-50%, -50%) rotateY(0.6deg) rotateX(-0.3deg); }
}

/* When parallax JS active (.is-parallax on viewport), idle animation off
   (track itself rotates via --rx/--ry, viewport stays anchored). */
.pb-shorts-viewport.is-parallax {
    animation: none;
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Touch devices (no fine pointer): never show parallax/idle, native gestures only */
@media (pointer: coarse) {
    .pb-shorts-viewport { animation: none; }
    .pb-shorts-track { transform: none; transition: none; }
}

/* prefers-reduced-motion / low-end safety: kill 3D animations */
.pb-shorts-viewport.is-low-end {
    animation: none;
}
.pb-shorts-viewport.is-low-end .pb-shorts-track {
    transform: none !important;
    transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .pb-shorts-viewport { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   v0.25.7 fixes — по фидбеку юзера:
   1. «Полоска сверху некрасивая» → hide top progress-bar entirely
   2. «Зачем писать как называется товар внутри если уже снизу написали»
      → hide Scene 1 internal name+meta дубликат (caption внизу остаётся)
   3. Top-nav на desktop растягивался full-width (на скрине progress-bar
      виден от края до края) → ограничиваем шириной phone-card
   4. «БУДЬ ОСТОРОЖИ» обрезается → ужимаем clamp verdict text
   ════════════════════════════════════════════════════════════════ */

/* 1. Полностью скрываем progress-bar (юзер не любит) */
.pb-shorts-topnav-progress {
    display: none !important;
}

/* 2. Hide дубль product name + meta в Scene 1 (caption внизу уже всё это пишет).
   Только в shorts mode — чтобы /p/{id} модалка осталась как была. */
.pb-shorts-viewport .pb-inv-s1-name,
.pb-shorts-viewport .pb-inv-s1-meta {
    display: none !important;
}

/* 3. На desktop top-nav теперь width = phone-card width (а не full-screen) */
@media (min-width: 768px) {
    .pb-shorts-topnav {
        position: fixed;
        top: env(safe-area-inset-top, 12px);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(480px, 92vw);
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 12px;
    }
    /* v0.25.12: × больше НЕ position:fixed — живёт в общем top-nav flex row.
       margin-right:auto толкает остальные кнопки вправо. */
    .pb-shorts-topnav-back {
        margin-right: auto;
    }
}
@media (min-width: 1280px) {
    .pb-shorts-topnav { width: min(540px, 92vw); }
}
@media (min-width: 1600px) {
    .pb-shorts-topnav { width: min(580px, 92vw); }
}

/* v0.25.35/v0.25.36: verdict text ужимаем чтобы влезало в phone-card + contrast.
   Юзер v0.25.35: «чёт ушёл за рамки». Юзер v0.25.36: «ЛУЧШЕ НЕ БРАТЬ» сливается
   с pink backdrop (image color через blur) → unreadable.
   Now: меньший font + dark text-shadow для contrast против любого backdrop. */
.pb-short-stage .pb-inv-stage.pb-inv-embedded .pb-inv-s5-big {
    font-size: clamp(26px, 5vw, 52px) !important;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    max-width: 92%;
    line-height: 1.05;
    letter-spacing: -0.025em;
    padding: 0 8px;
    box-sizing: border-box;
    /* v0.25.36: STRONG dark text-shadow для contrast против любого backdrop image
       (pink/orange/blue blurred image может сливаться с pink/gold verdict text). */
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.85),
        0 0 18px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(0, 0, 0, 0.35) !important;
}

/* SplitText word-wrap fix — позволяем переносить chars внутри слова если
   слово длиннее container. Раньше `white-space: nowrap` принудительно держал
   слово в одну строку → overflow за edge. */
.pb-shorts-viewport .pb-inv-s5-big-word,
.pb-shorts-viewport .pb-inv-s5-big > div {
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

/* v0.25.11 — grid-кнопка унифицирована с остальными top-nav через общее
   правило выше (.pb-shorts-topnav-back/mute/pause/grid). Здесь оставляем только
   mint-цвет на hover для отличия от × close (которая просто темнее). */
.pb-shorts-topnav-grid:hover {
    background: rgba(76, 226, 193, 0.32);
    box-shadow: inset 0 0 0 1px rgba(76, 226, 193, 0.5);
    transform: scale(1.05);
}

/* ─── v0.25.23: Pre-show product preview image ──────────────────────────────
   Юзер: «при прокручивании на следующий ролик условный сразу картинка была
   товара». Раньше при свайпе stage пустой пока Investigation не смонтируется
   (~200-500ms). Now: preview-img рендерится SSR (initial 2 articles) +
   dynamically (buildArticleEl). Investigation overlays поверх; preview fade-out
   через .is-investigation-mounted class.
   v0.25.25: Instagram-style blurred backdrop — на квадратных product images
   фон заполняется размытой версией той же картинки вместо чёрных полей. */
/* v0.25.27: REMOVED `position: relative` — был bug, перезатирал оригинальный
   `position: absolute; inset: 0` (выше) → stage сжимался до контента → backdrop
   занимал только верхнюю часть, низ оставался чёрным. Юзер: «чутка криво
   сделал шортсы». Now: `overflow:hidden` only, position остаётся absolute. */
.pb-short-stage {
    overflow: hidden;
}
.pb-short-stage::before {
    /* Backdrop layer — same image, heavy blur, darkened. Создаёт атмосферное
       заполнение для любых aspect-ratios (square, vertical).
       v0.25.27: brighter (0.45→0.65) + larger inset для overflow safety. */
    content: "";
    position: absolute;
    inset: -15%;
    background-image: var(--pb-short-bg, none);
    background-size: cover;
    background-position: center;
    filter: blur(38px) brightness(0.65) saturate(1.6);
    z-index: 0;
    transform: scale(1.20);
    pointer-events: none;
}
.pb-short[style*="--pb-short-bg"]:not([style*="--pb-short-bg: none"]) .pb-short-stage::before {
    /* Show backdrop only когда CSS variable установлен с image */
    opacity: 1;
}
.pb-short:not([style*="--pb-short-bg"]) .pb-short-stage::before,
.pb-short[style*="--pb-short-bg: none"] .pb-short-stage::before {
    /* Fallback если нет image — gradient вместо blur backdrop */
    background-image: none;
    background: linear-gradient(135deg, #14171f 0%, #0b0d12 100%);
    filter: none;
    inset: 0;
    transform: none;
}

.pb-short-preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* v0.25.30: object-fit cover (был contain). Юзер: «без маленькой иконки
       было все ибо так красивее». Теперь image fill всю card, без black/blur
       полей. Может крепко обрезать square images, но full-bleed важнее. */
    object-fit: cover;
    object-position: center;
    z-index: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.pb-short.is-investigation-mounted .pb-short-preview-img {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .pb-short-preview-img { transition: none; }
}
/* Low-end: drop expensive blur */
body.pb-low-end .pb-short-stage::before {
    filter: brightness(0.45);
}

/* ─── v0.25.23: «В магазин» action button (gold accent для distinction) ─── */
.pb-short-act-btn[data-act="shop"] .pb-short-act-icon {
    color: var(--pb-shorts-gold, #ffc94a);
}
.pb-short-act-btn[data-act="shop"]:hover .pb-short-act-icon {
    background: rgba(255, 201, 74, 0.18);
    box-shadow: 0 0 0 2px rgba(255, 201, 74, 0.40);
}

/* ─── v0.25.11: BIG verdict badge + caption redesign ─────────────────────── */
/* Юзер: «проценты сделать явно виднее, а то иначе не видно их». Раньше pill
   13px font-weight 700, на тёмном фоне терялся. Now: круглый badge 56-72px с
   28-44px цифрой, glow shadow, rich color от verdict-color. Verdict-text рядом
   меньшим шрифтом (UPPERCASE) для контраста. */
.pb-short-caption-verdict-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.pb-short-caption-verdict-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(60px, 9vw, 76px);
    height: clamp(60px, 9vw, 76px);
    border-radius: 50%;
    flex-shrink: 0;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 2px solid rgba(255,255,255,0.20);
    background: rgba(0,0,0,0.42);
    box-shadow:
        0 4px 20px rgba(0,0,0,0.45),
        inset 0 0 0 1px rgba(255,255,255,0.08);
    font-variant-numeric: tabular-nums;
}
.pb-short-caption-pct {
    font-size: clamp(28px, 5.6vw, 46px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.pb-short-caption-pct-unit {
    font-size: 0.52em;
    font-weight: 800;
    opacity: 0.78;
    margin-left: 1px;
}
.pb-short-caption-verdict-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(13px, 1.6vw, 15px);
    font-weight: 800;
    line-height: 1.18;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.65);
}
.pb-short-caption-verdict-icon {
    display: inline-block;
    margin-right: 4px;
    font-size: 1.05em;
}

/* Per-verdict colors — большой badge получает яркий цветной border + glow */
.pb-short[data-verdict="avoid"] .pb-short-caption-verdict-badge {
    border-color: rgba(255, 93, 143, 0.62);
    background: linear-gradient(180deg, rgba(255,93,143,0.22) 0%, rgba(255,93,143,0.08) 100%), rgba(0,0,0,0.42);
    box-shadow:
        0 0 28px rgba(255, 93, 143, 0.42),
        0 4px 20px rgba(0,0,0,0.45),
        inset 0 0 0 1px rgba(255,93,143,0.18);
}
.pb-short[data-verdict="avoid"] .pb-short-caption-pct { color: #ff7ea6; }
.pb-short[data-verdict="avoid"] .pb-short-caption-verdict-text { color: #ffcfd9; }

.pb-short[data-verdict="caution"] .pb-short-caption-verdict-badge {
    border-color: rgba(255, 201, 74, 0.62);
    background: linear-gradient(180deg, rgba(255,201,74,0.22) 0%, rgba(255,201,74,0.08) 100%), rgba(0,0,0,0.42);
    box-shadow:
        0 0 28px rgba(255, 201, 74, 0.38),
        0 4px 20px rgba(0,0,0,0.45),
        inset 0 0 0 1px rgba(255,201,74,0.18);
}
.pb-short[data-verdict="caution"] .pb-short-caption-pct { color: #ffd97e; }
.pb-short[data-verdict="caution"] .pb-short-caption-verdict-text { color: #ffe9c2; }

.pb-short[data-verdict="trusted"] .pb-short-caption-verdict-badge {
    border-color: rgba(76, 226, 193, 0.62);
    background: linear-gradient(180deg, rgba(76,226,193,0.22) 0%, rgba(76,226,193,0.08) 100%), rgba(0,0,0,0.42);
    box-shadow:
        0 0 28px rgba(76, 226, 193, 0.42),
        0 4px 20px rgba(0,0,0,0.45),
        inset 0 0 0 1px rgba(76,226,193,0.18);
}
.pb-short[data-verdict="trusted"] .pb-short-caption-pct { color: #7af0d6; }
.pb-short[data-verdict="trusted"] .pb-short-caption-verdict-text { color: #c8f5e7; }

/* v0.25.18: verdict-wrapper полностью скрыт на /shorts feed (юзер ещё раз:
   «не убрал проценты в шортсах, что на скрине внизу»). Verdict information
   доступен через action-rail/маркетплейс-иконку и через "Разбор" deep-link.
   На карточке внизу остаются: marketplace + product name. */
.pb-short-caption-verdict-wrapper {
    display: none;
}

/* Low-end: убираем box-shadow glow */
body.pb-low-end .pb-short-caption-verdict-badge { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }

/* ─── v0.25.11: body scroll lock — двойная защита.
   Юзер: «лента вместе скролится». html/body уже overflow:hidden, но на desktop
   из-за position:fixed phone-card снаружи могут быть scrolling parents. Now:
   position:fixed на body (физически зажимает viewport), overscroll-behavior:none
   везде (запрет bounce/pull-to-refresh). */
html.pb-shorts-html-active,
body.pb-shorts-body {
    overflow: hidden !important;
    height: 100dvh;
    height: 100vh;
    overscroll-behavior: none;
}
body.pb-shorts-body {
    position: fixed;
    inset: 0;
    width: 100%;
}

/* ─── v0.25.11: action-rail outline-fix.
   Юзер: dislike-кнопка с золотым/розовым border после tap. Причина: dislike-handler
   тогглит .is-liked (copy-paste bug — должен был быть .is-disliked); + :focus-visible
   ring оставался видимым. Now: outline:none на all act-btn, focus-ring опционально
   через box-shadow только для keyboard-nav. */
.pb-short-act-btn {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.pb-short-act-btn:focus { outline: none; }
.pb-short-act-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(76, 226, 193, 0.55);
}

/* Disliked state — отдельный класс (не is-liked!), мягкий тёмно-серый ring */
.pb-short-act-btn.is-disliked .pb-short-act-icon {
    color: rgba(255,255,255,0.92);
    background: rgba(255, 93, 143, 0.18);
    box-shadow: 0 0 0 2px rgba(255, 93, 143, 0.40);
}