/* ============================================================================
 * shorts/discover.css — TikTok/Reels-style grid of all расследования.
 *
 * Layout:
 *   • Sticky filter bar (search + marketplace pills + verdict tabs + sort)
 *   • Responsive grid: 2 cols mobile / 3 tablet / 4 desktop / 5 wide
 *   • 9:12 aspect cards with verdict-color glow on hover
 *   • Skeleton loaders + empty state
 *
 * Visual language: matches feed.css/teaser.css (mint/pink/gold + dark bg).
 * ========================================================================== */

:root {
    --pbd-bg: #0b0d12;
    --pbd-fg: #eef0f5;
    --pbd-fg-soft: rgba(255, 255, 255, 0.78);
    --pbd-fg-dim: rgba(255, 255, 255, 0.55);
    --pbd-mint: #4ce2c1;
    --pbd-pink: #ff5d8f;
    --pbd-gold: #ffc94a;
    --pbd-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --pbd-card-radius: 18px;
    --pbd-glass-bg: rgba(11, 13, 18, 0.72);
}

.pb-discover-body {
    margin: 0; padding: 0;
    background: var(--pbd-bg);
    color: var(--pbd-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 100dvh;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    /* v0.25.22: BULLETPROOF — гарантированно scrollable. Раньше юзер: «тупо не
       скроллится». Если что-то JS-добавило overflow:hidden или position:fixed,
       overflow-y:auto !important перебьёт. */
    overflow-y: auto !important;
    overflow-x: hidden;
    /* v0.25.23: KILL scroll-anchoring на ROOT scroll container. Раньше я ставил
       overflow-anchor: none ТОЛЬКО на .pb-discover-grid — но grid не scroll
       container, body — да. Юзер: «я скролю но он меня будто вверх быстро
       возвращает». Когда filter padding меняется (is-stuck toggle on scroll),
       content height shifts → browser scroll-anchoring jumps viewport обратно
       чтобы maintain user position → выглядит как «возвращает наверх». Now:
       ALL scroll-anchoring отключен на /shorts/discover. */
    overflow-anchor: none;
}
html {
    overflow-y: auto !important;
    overflow-anchor: none;
}

/* ─── Top bar ─────────────────────────────────────────────────────────────── */
.pb-discover-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top));
    /* v0.25.17: УБРАЛ backdrop-filter — sticky topbar пересчитывался blur каждый scroll */
    background: rgba(11, 13, 18, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pb-discover-back,
.pb-discover-feed-link,
.pb-discover-random-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--pbd-fg);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s var(--pbd-ease), border-color 0.18s var(--pbd-ease), transform 0.18s var(--pbd-ease);
    -webkit-appearance: none;
    appearance: none;
}
.pb-discover-back svg,
.pb-discover-feed-link svg,
.pb-discover-random-btn svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    fill: none;
}
.pb-discover-back:hover,
.pb-discover-feed-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(76, 226, 193, 0.36);
}

/* v0.25.14: Random button — gold accent + dice spin on hover */
.pb-discover-random-btn {
    background: rgba(255, 201, 74, 0.10);
    border-color: rgba(255, 201, 74, 0.42);
    color: var(--pbd-gold);
}
.pb-discover-random-btn:hover {
    background: rgba(255, 201, 74, 0.20);
    border-color: rgba(255, 201, 74, 0.62);
    transform: translateY(-1px);
}
.pb-discover-random-btn:hover svg {
    animation: pbd-dice-spin 0.6s ease-in-out;
}
.pb-discover-random-btn:active { transform: translateY(0); }

.pb-discover-topbar-spacer { flex: 1; }

@media (max-width: 540px) {
    .pb-discover-back span,
    .pb-discover-feed-link span,
    .pb-discover-random-btn span { display: none; }
    .pb-discover-back,
    .pb-discover-feed-link,
    .pb-discover-random-btn { padding: 8px 10px; }
}

/* ─── Hero head ──────────────────────────────────────────────────────────── */
.pb-discover-main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 0 64px;
}

.pb-discover-hero {
    padding: 22px 16px 12px;
}
.pb-discover-hero-inner {
    max-width: 720px;
}
.pb-discover-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 6px;
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--pbd-fg);
}
.pb-discover-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(76, 226, 193, 0.42);
    background: rgba(76, 226, 193, 0.08);
    color: var(--pbd-mint);
    font-family: monospace, "SF Mono", Consolas;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
}
.pb-discover-title-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pbd-mint);
    box-shadow: 0 0 6px rgba(76, 226, 193, 0.6);
    animation: pbd-pulse 1.6s ease-in-out infinite;
}
@keyframes pbd-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
.pb-discover-sub {
    margin: 0;
    color: var(--pbd-fg-dim);
    font-size: 15px;
    line-height: 1.5;
}

/* v0.25.57: Hero — gradient word + divider, matching main page #section-title pattern */
.pb-discover-title-grad {
    background: linear-gradient(120deg, var(--pbd-mint) 0%, #8af2dc 50%, var(--pbd-mint) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.pb-discover-hero-divider {
    margin-top: 14px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(76, 226, 193, 0.32) 18%,
        rgba(76, 226, 193, 0.55) 50%,
        rgba(76, 226, 193, 0.32) 82%,
        transparent 100%);
}

/* ─── Filters bar (sticky below topbar) ──────────────────────────────────── */
/* v0.25.10 redesign: row-based layout с подписями, segmented sort-pills вместо
   native <select>, marketplace pills с brand-color dots, meta-count + reset.
   v0.25.13: ЖЁСТКИЙ sticky + compact-on-scroll. Юзер: «сделай так чтобы оно
   не гуляло вместе со скроллом». Раньше sticky не всегда срабатывал из-за
   контекста containing block; +`.is-stuck` класс через JS компрессирует rows. */
.pb-discover-filters {
    position: -webkit-sticky;
    position: sticky;
    top: 52px;
    z-index: 45;
    /* v0.25.17: УБРАЛ backdrop-filter blur(16px) saturate(140%) — был CRITICAL
       perf killer (sticky element с blur пересчитывался на КАЖДЫЙ scroll-frame).
       Замена: solid bg с alpha. Визуально читается так же на тёмной странице. */
    background: rgba(11, 13, 18, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 16px 10px;
    transition: padding 0.22s var(--pbd-ease);
}

/* v0.25.14: ULTRA-compact stuck mode — все pill-rows в один horizontal scroll
   со visual divider между группами. Юзер: «всё ещё с нами он ходит» (бар занимал
   ~35% viewport). Now: ≤52px high, всё в одну строку, chevron toggle для возврата
   в полный режим. */
.pb-discover-filters.is-stuck {
    padding: 6px 12px;
    box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.65);
}
.pb-discover-filters.is-stuck .pb-discover-row-label { display: none; }
.pb-discover-filters.is-stuck .pb-discover-search-wrap { display: none; }
.pb-discover-filters.is-stuck .pb-discover-meta { display: none; }

/* В stuck-mode: все rows + reset в один horizontal scrollable flex */
.pb-discover-filters.is-stuck .pb-discover-filters-inner {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
.pb-discover-filters.is-stuck .pb-discover-filters-inner::-webkit-scrollbar { display: none; }
.pb-discover-filters.is-stuck .pb-discover-row {
    flex-direction: row;
    flex: 0 0 auto;
    gap: 4px;
    padding-right: 6px;
    align-items: center;
}
.pb-discover-filters.is-stuck .pb-discover-row + .pb-discover-row::before {
    content: "";
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.10);
    margin-right: 6px;
    align-self: center;
    flex: 0 0 1px;
}
.pb-discover-filters.is-stuck .pb-discover-pills,
.pb-discover-filters.is-stuck .pb-discover-verdicts,
.pb-discover-filters.is-stuck .pb-discover-sort-pills {
    overflow-x: visible;
    padding-bottom: 0;
}
.pb-discover-filters.is-stuck .pb-discover-pill,
.pb-discover-filters.is-stuck .pb-discover-sort-pill {
    padding: 6px 10px;
    font-size: 12px;
    height: 32px;
}
.pb-discover-filters.is-stuck .pb-discover-verdict {
    padding: 6px 10px;
    font-size: 12px;
    height: 32px;
}

/* Chevron toggle — sticky правый край, разворачивает обратно в полный режим */
.pb-discover-filters-toggle {
    display: none;
    position: sticky;
    right: 0;
    flex: 0 0 auto;
    width: 30px; height: 30px;
    align-items: center;
    justify-content: center;
    background: rgba(11, 13, 18, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    color: var(--pbd-fg-soft);
    cursor: pointer;
    margin-left: auto;
    transition: background 0.18s var(--pbd-ease), transform 0.18s var(--pbd-ease);
}
.pb-discover-filters-toggle:hover {
    background: rgba(76, 226, 193, 0.20);
    color: var(--pbd-fg);
}
.pb-discover-filters-toggle svg {
    width: 14px; height: 14px;
    stroke: currentColor;
    fill: none;
    transition: transform 0.22s var(--pbd-ease);
}
.pb-discover-filters.is-stuck .pb-discover-filters-toggle { display: inline-flex; }
.pb-discover-filters.is-expanded .pb-discover-filters-toggle svg { transform: rotate(180deg); }

/* is-expanded в stuck-mode: возвращаем полный layout */
.pb-discover-filters.is-stuck.is-expanded { padding: 12px 16px 10px; }
.pb-discover-filters.is-stuck.is-expanded .pb-discover-filters-inner {
    flex-direction: column;
    overflow: visible;
    gap: 12px;
    flex-wrap: wrap;
}
.pb-discover-filters.is-stuck.is-expanded .pb-discover-row {
    flex-direction: column;
    gap: 6px;
    padding-right: 0;
}
.pb-discover-filters.is-stuck.is-expanded .pb-discover-row::before { display: none; }
.pb-discover-filters.is-stuck.is-expanded .pb-discover-row-label,
.pb-discover-filters.is-stuck.is-expanded .pb-discover-search-wrap,
.pb-discover-filters.is-stuck.is-expanded .pb-discover-meta { display: flex; }
@media (min-width: 760px) {
    .pb-discover-filters.is-stuck.is-expanded .pb-discover-row {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}

/* ─── v0.25.14: Active filter chips row ─────────────────────────────────── */
.pb-discover-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px 4px;
    max-width: 1280px;
    margin: 0 auto;
}
.pb-discover-active-chips[hidden] { display: none !important; }
.pb-discover-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: rgba(76, 226, 193, 0.14);
    border: 1px solid rgba(76, 226, 193, 0.42);
    color: var(--pbd-fg);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--pbd-ease), border-color 0.15s var(--pbd-ease);
    -webkit-appearance: none;
    appearance: none;
}
.pb-discover-active-chip:hover {
    background: rgba(76, 226, 193, 0.22);
    border-color: rgba(76, 226, 193, 0.62);
}
.pb-discover-active-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.80);
    font-size: 12px;
    line-height: 1;
}
.pb-discover-active-chip.is-pink { background: rgba(255, 93, 143, 0.14); border-color: rgba(255, 93, 143, 0.45); }
.pb-discover-active-chip.is-gold { background: rgba(255, 201, 74, 0.14); border-color: rgba(255, 201, 74, 0.45); }
.pb-discover-active-chip.is-mint { background: rgba(76, 226, 193, 0.14); border-color: rgba(76, 226, 193, 0.45); }
.pb-discover-active-chip.is-clear-all {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}
.pb-discover-active-chip.is-clear-all:hover {
    background: rgba(255, 93, 143, 0.10);
    border-color: rgba(255, 93, 143, 0.42);
    color: var(--pbd-pink);
}

/* ─── v0.25.14: View + Like counts на cards ─────────────────────────────── */
.pb-discover-card-stats {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    /* v0.25.17: УБРАЛ backdrop-filter blur(6px) — multiplied by 50+ cards =
       50 GPU blur layers = freeze. Solid black-alpha visually идентичен. */
    background: rgba(0, 0, 0, 0.72);
    color: rgba(255, 255, 255, 0.92);
    font-family: monospace, "SF Mono", Consolas;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    z-index: 3;
    pointer-events: none;
}
.pb-discover-card-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pb-discover-card-stat svg {
    width: 11px; height: 11px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}
.pb-discover-card-stat.is-likes { color: #ff8aaa; }
.pb-discover-card-stat.is-likes svg { fill: currentColor; stroke: none; }
.pb-discover-card-stats[data-empty="1"] { display: none; }

/* v0.25.22: Stagger animation ПОЛНОСТЬЮ ОТКЛЮЧЕН. Юзер: «тупо не скроллится».
   Если rAF не отрабатывал по любой причине (browser tab hidden, throttle, JS
   error в чужом коде), cards оставались с opacity:0 → invisible → визуально
   нет содержимого для scroll. Стабильность важнее анимации. Cards появляются
   мгновенно при mount. */
.pb-discover-grid .pb-discover-card-enter,
.pb-discover-grid .pb-discover-card-entered {
    opacity: 1 !important;
    transform: none !important;
}

/* ─── v0.25.14: Floating action buttons (FABs) ──────────────────────────── */
.pb-discover-fab-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 60;
    pointer-events: none;
}
.pb-discover-fab {
    pointer-events: auto;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(11, 13, 18, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--pbd-fg);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: opacity 0.25s var(--pbd-ease),
                transform 0.25s var(--pbd-ease),
                background 0.18s var(--pbd-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pb-discover-fab svg {
    width: 22px; height: 22px;
    stroke: currentColor;
    fill: none;
}
.pb-discover-fab-top {
    color: var(--pbd-mint);
    border-color: rgba(76, 226, 193, 0.45);
    opacity: 0;
    transform: translateY(12px) scale(0.9);
    pointer-events: none;
}
.pb-discover-fab-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.pb-discover-fab-top:hover {
    background: rgba(76, 226, 193, 0.18);
    border-color: rgba(76, 226, 193, 0.65);
}
.pb-discover-fab-random {
    color: var(--pbd-gold);
    border-color: rgba(255, 201, 74, 0.45);
}
.pb-discover-fab-random:hover {
    background: rgba(255, 201, 74, 0.18);
    border-color: rgba(255, 201, 74, 0.65);
    animation: pbd-dice-spin 0.6s ease-in-out;
}
@keyframes pbd-dice-spin {
    0%   { transform: rotate(0); }
    50%  { transform: rotate(180deg) scale(1.08); }
    100% { transform: rotate(360deg); }
}
.pb-discover-fab:focus-visible {
    outline: 2px solid var(--pbd-mint);
    outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pb-discover-grid .pb-discover-card-enter,
    .pb-discover-grid .pb-discover-card-entered {
        opacity: 1; transform: none; transition: none;
    }
    .pb-discover-fab-random:hover { animation: none; }
    .pb-discover-fab,
    .pb-discover-fab-top,
    .pb-discover-fab-top.is-visible {
        transition: opacity 0.15s linear;
        transform: none;
    }
}
@supports not (backdrop-filter: blur(12px)) {
    .pb-discover-filters { background: rgba(11, 13, 18, 0.97); }
}

.pb-discover-filters-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1280px;
    margin: 0 auto;
}

/* v0.25.10 — row group with label */
.pb-discover-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pb-discover-row-label {
    font-family: monospace, "SF Mono", Consolas;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--pbd-fg-dim);
    padding-left: 2px;
}

/* Marketplace pills — brand-color dots */
.pb-discover-pill-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    margin-right: 2px;
    transition: background 0.18s var(--pbd-ease), box-shadow 0.18s var(--pbd-ease);
}
.pb-discover-pill.is-mp-wb .pb-discover-pill-dot { background: #cb11ab; }
.pb-discover-pill.is-mp-oz .pb-discover-pill-dot { background: #005bff; }
.pb-discover-pill.is-mp-ym .pb-discover-pill-dot { background: #fc3f1d; }
.pb-discover-pill.is-mp-mm .pb-discover-pill-dot { background: #f81b3d; }

.pb-discover-pill.is-active .pb-discover-pill-dot {
    box-shadow: 0 0 8px currentColor, 0 0 0 2px rgba(255, 255, 255, 0.06);
}

/* Search */
.pb-discover-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pb-discover-search-icon {
    position: absolute;
    left: 14px;
    width: 18px; height: 18px;
    stroke: var(--pbd-fg-dim);
    fill: none;
    pointer-events: none;
}
.pb-discover-search {
    width: 100%;
    padding: 12px 38px 12px 42px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--pbd-fg);
    font-size: 15px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.18s var(--pbd-ease), box-shadow 0.18s var(--pbd-ease), background 0.18s var(--pbd-ease);
}
.pb-discover-search::placeholder { color: var(--pbd-fg-dim); }
.pb-discover-search:focus {
    border-color: rgba(76, 226, 193, 0.55);
    background: rgba(76, 226, 193, 0.04);
    box-shadow: 0 0 0 3px rgba(76, 226, 193, 0.16);
}
.pb-discover-search-clear {
    position: absolute;
    right: 8px;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 999px;
    color: var(--pbd-fg-soft);
    cursor: pointer;
    transition: background 0.15s var(--pbd-ease);
}
.pb-discover-search-clear:hover { background: rgba(255, 255, 255, 0.12); }
.pb-discover-search-clear svg { width: 14px; height: 14px; }

/* Pill row helpers */
.pb-discover-pills,
.pb-discover-verdicts {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
}
.pb-discover-pills::-webkit-scrollbar,
.pb-discover-verdicts::-webkit-scrollbar { display: none; }

.pb-discover-pill,
.pb-discover-verdict {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    color: var(--pbd-fg-soft);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background 0.18s var(--pbd-ease), border-color 0.18s var(--pbd-ease), color 0.18s var(--pbd-ease);
    -webkit-appearance: none;
    appearance: none;
}
.pb-discover-pill:hover,
.pb-discover-verdict:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--pbd-fg);
}

.pb-discover-pill.is-active {
    background: rgba(76, 226, 193, 0.15);
    border-color: rgba(76, 226, 193, 0.55);
    color: var(--pbd-fg);
    box-shadow: 0 0 16px -6px rgba(76, 226, 193, 0.5);
}

/* Verdict-coloured tabs */
.pb-discover-verdict.is-pink.is-active {
    background: rgba(255, 93, 143, 0.15);
    border-color: rgba(255, 93, 143, 0.6);
    color: var(--pbd-fg);
    box-shadow: 0 0 16px -6px rgba(255, 93, 143, 0.5);
}
.pb-discover-verdict.is-gold.is-active {
    background: rgba(255, 201, 74, 0.15);
    border-color: rgba(255, 201, 74, 0.6);
    color: var(--pbd-fg);
    box-shadow: 0 0 16px -6px rgba(255, 201, 74, 0.45);
}
.pb-discover-verdict.is-mint.is-active {
    background: rgba(76, 226, 193, 0.15);
    border-color: rgba(76, 226, 193, 0.6);
    color: var(--pbd-fg);
    box-shadow: 0 0 16px -6px rgba(76, 226, 193, 0.5);
}
.pb-discover-verdict.is-neutral.is-active {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--pbd-fg);
}
.pb-discover-verdict.is-active:not(.is-pink):not(.is-gold):not(.is-mint):not(.is-neutral) {
    background: rgba(76, 226, 193, 0.15);
    border-color: rgba(76, 226, 193, 0.55);
    color: var(--pbd-fg);
}
.pb-discover-verdict-icon {
    font-size: 13px;
    line-height: 1;
}

/* v0.25.10 — Sort segmented pills (replaces native <select>) */
.pb-discover-sort-pills {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pb-discover-sort-pills::-webkit-scrollbar { display: none; }

.pb-discover-sort-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--pbd-fg-soft);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s var(--pbd-ease), color 0.18s var(--pbd-ease), box-shadow 0.18s var(--pbd-ease);
    -webkit-appearance: none;
    appearance: none;
}
.pb-discover-sort-pill svg {
    width: 14px; height: 14px;
    stroke: currentColor;
    fill: none;
    flex: 0 0 auto;
    opacity: 0.85;
}
.pb-discover-sort-pill:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--pbd-fg);
}
.pb-discover-sort-pill.is-active {
    background: linear-gradient(180deg, rgba(76, 226, 193, 0.22) 0%, rgba(76, 226, 193, 0.10) 100%);
    color: var(--pbd-fg);
    box-shadow:
        0 0 18px -6px rgba(76, 226, 193, 0.5),
        inset 0 0 0 1px rgba(76, 226, 193, 0.45);
}
.pb-discover-sort-pill.is-active svg { stroke: var(--pbd-mint); opacity: 1; }

/* v0.25.10 — meta count + reset */
.pb-discover-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    margin-top: 2px;
    padding-top: 10px;
}
.pb-discover-meta-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: monospace, "SF Mono", Consolas;
    font-size: 12px;
    color: var(--pbd-fg-dim);
}
.pb-discover-meta-num {
    font-size: 16px;
    font-weight: 800;
    color: var(--pbd-mint);
    letter-spacing: -0.01em;
}
.pb-discover-meta-label { letter-spacing: 0.02em; }

.pb-discover-meta-reset {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    color: var(--pbd-fg-soft);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--pbd-ease), border-color 0.15s var(--pbd-ease), color 0.15s var(--pbd-ease);
}
.pb-discover-meta-reset:hover {
    background: rgba(255, 93, 143, 0.10);
    border-color: rgba(255, 93, 143, 0.40);
    color: var(--pbd-pink);
}
.pb-discover-meta-reset[hidden] { display: none !important; }

/* Tablet+ — search inline with first row */
@media (min-width: 760px) {
    .pb-discover-filters-inner {
        gap: 10px;
    }
    .pb-discover-row {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    .pb-discover-row-label {
        flex: 0 0 92px;
        text-align: right;
        padding-left: 0;
        padding-right: 4px;
    }
    .pb-discover-pills,
    .pb-discover-verdicts,
    .pb-discover-sort-pills {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ─── Counters ───────────────────────────────────────────────────────────── */
.pb-discover-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px 0;
    max-width: 1280px;
    margin: 0 auto;
}
.pb-discover-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    font-size: 12px;
}
.pb-discover-counter-num {
    font-family: monospace, "SF Mono", Consolas;
    font-weight: 700;
    font-size: 14px;
}
.pb-discover-counter-label {
    color: var(--pbd-fg-dim);
    text-transform: lowercase;
}
.pb-discover-counter.is-pink    .pb-discover-counter-num { color: var(--pbd-pink); }
.pb-discover-counter.is-gold    .pb-discover-counter-num { color: var(--pbd-gold); }
.pb-discover-counter.is-mint    .pb-discover-counter-num { color: var(--pbd-mint); }
.pb-discover-counter.is-neutral .pb-discover-counter-num { color: var(--pbd-fg-soft); }

/* v0.25.57: tinted bg + border per-verdict — counters look like evidence chips */
.pb-discover-counter.is-pink { background: rgba(255, 93, 143, 0.08); border-color: rgba(255, 93, 143, 0.30); }
.pb-discover-counter.is-gold { background: rgba(255, 201, 74, 0.08); border-color: rgba(255, 201, 74, 0.30); }
.pb-discover-counter.is-mint { background: rgba(76, 226, 193, 0.08); border-color: rgba(76, 226, 193, 0.30); }

/* ─── Grid ───────────────────────────────────────────────────────────────── */
.pb-discover-grid-wrap {
    padding: 18px 16px 0;
    max-width: 1440px;
    margin: 0 auto;
}

.pb-discover-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    /* v0.25.21: disable browser scroll-anchoring — anti scroll-shift loop
       при infinite scroll. Browser auto-anchored viewport на content shift
       мог вернуть loadmore-wrap в IO rootMargin → infinite fetch loop. */
    overflow-anchor: none;
}
@media (min-width: 640px)  { .pb-discover-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 980px)  { .pb-discover-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1400px) { .pb-discover-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; } }

/* ─── Card ───────────────────────────────────────────────────────────────── */
.pb-discover-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--pbd-card-radius);
    overflow: hidden;
    position: relative;
    /* v0.25.19: УБРАЛ content-visibility:auto — известный source jank в Chrome
       (cards snap-into-render abruptly, layout shifts во время scroll). Юзер:
       «всё ещё зависает». Чище без него — content-cap=100 уже даёт O(viewport) cost. */
    transition:
        transform 0.22s var(--pbd-ease),
        border-color 0.22s var(--pbd-ease),
        box-shadow 0.22s var(--pbd-ease);
    /* v0.25.16: УБРАЛ will-change: transform с base — раньше создавал permanent
       GPU layer для каждой карточки. С 50+ cards = 50 layers = GPU choke = freeze.
       Now: will-change только при :hover (создаётся on-demand, destroyed on blur). */
}
.pb-discover-card:hover {
    will-change: transform;
    transform: translateY(-3px) scale(1.03);
    border-color: rgba(76, 226, 193, 0.36);
    box-shadow:
        0 18px 36px -14px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(76, 226, 193, 0.18) inset;
    z-index: 2;
}
/* v0.25.57: base border tinted by verdict — subtle, не агрессивно */
.pb-discover-card--bad  { border-color: rgba(255, 93, 143, 0.16); }
.pb-discover-card--warn { border-color: rgba(255, 201, 74, 0.16); }
.pb-discover-card--ok   { border-color: rgba(76, 226, 193, 0.16); }
.pb-discover-card:active { transform: translateY(-2px) scale(1.02); }
.pb-discover-card:focus-visible {
    outline: 2px solid var(--pbd-mint);
    outline-offset: 3px;
}

/* per-verdict glow on hover */
.pb-discover-card[data-verdict="avoid"]:hover {
    border-color: rgba(255, 93, 143, 0.42);
    box-shadow:
        0 18px 40px -10px rgba(255, 93, 143, 0.36),
        0 0 0 1px rgba(255, 93, 143, 0.22) inset;
}
.pb-discover-card[data-verdict="caution"]:hover {
    border-color: rgba(255, 201, 74, 0.42);
    box-shadow:
        0 18px 40px -10px rgba(255, 201, 74, 0.32),
        0 0 0 1px rgba(255, 201, 74, 0.22) inset;
}
.pb-discover-card[data-verdict="trusted"]:hover {
    border-color: rgba(76, 226, 193, 0.42);
    box-shadow:
        0 18px 40px -10px rgba(76, 226, 193, 0.32),
        0 0 0 1px rgba(76, 226, 193, 0.22) inset;
}

/* Image container */
.pb-discover-card-img {
    position: relative;
    aspect-ratio: 9 / 12;
    overflow: hidden;
    background: linear-gradient(135deg, #14171f 0%, #0b0d12 100%);
}
.pb-discover-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--pbd-ease), opacity 0.3s var(--pbd-ease);
}
.pb-discover-card:hover .pb-discover-card-img img {
    transform: scale(1.06);
}
.pb-discover-card-img.is-empty::before {
    content: "📦";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    opacity: 0.32;
}
.pb-discover-card-img.is-empty {
    background:
        radial-gradient(circle at 40% 30%, rgba(76, 226, 193, 0.06), transparent 50%),
        linear-gradient(135deg, #14171f 0%, #0b0d12 100%);
}

/* v0.25.57: Verdict badge — SOLID accent bg + dark text + circle-icon pill.
   Раньше pink/gold/mint все были «black bg + tinted text» → визуально одинаковые
   зелёные на скрине. Now: каждый verdict имеет SOLID цветной фон → мгновенно
   различимы pink / gold / mint / grey. Icon в круге, проценты в monospace. */
.pb-discover-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    font-family: monospace, "SF Mono", Consolas;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: rgba(11, 13, 18, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--pbd-fg);
    z-index: 3;
    line-height: 1;
}
.pb-discover-card-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.92);
    flex: 0 0 auto;
}
.pb-discover-card-badge-pct {
    color: var(--pbd-fg);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.pb-discover-card-badge.is-pink {
    border-color: rgba(255, 93, 143, 0.85);
    box-shadow: 0 0 14px -3px rgba(255, 93, 143, 0.55);
}
.pb-discover-card-badge.is-pink .pb-discover-card-badge-icon {
    background: var(--pbd-pink); color: #160910;
}
.pb-discover-card-badge.is-pink .pb-discover-card-badge-pct { color: #ffd0dd; }
.pb-discover-card-badge.is-gold {
    border-color: rgba(255, 201, 74, 0.85);
    box-shadow: 0 0 14px -3px rgba(255, 201, 74, 0.55);
}
.pb-discover-card-badge.is-gold .pb-discover-card-badge-icon {
    background: var(--pbd-gold); color: #18130a;
}
.pb-discover-card-badge.is-gold .pb-discover-card-badge-pct { color: #ffe9b6; }
.pb-discover-card-badge.is-mint {
    border-color: rgba(76, 226, 193, 0.85);
    box-shadow: 0 0 14px -3px rgba(76, 226, 193, 0.55);
}
.pb-discover-card-badge.is-mint .pb-discover-card-badge-icon {
    background: var(--pbd-mint); color: #0a1816;
}
.pb-discover-card-badge.is-mint .pb-discover-card-badge-pct { color: #b8f6e6; }
.pb-discover-card-badge.is-neutral {
    border-color: rgba(255, 255, 255, 0.32);
}
.pb-discover-card-badge.is-neutral .pb-discover-card-badge-icon {
    background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85);
}

/* v0.25.57: Per-card verdict modifier — accent line + radial halo gradient
   (mirrors #findings ev-card design language). Accent line: 3px gradient top
   bar. Halo: 6-8% opacity radial in top-right corner, matching verdict color. */
.pb-discover-card { isolation: isolate; }
.pb-discover-card-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.22s var(--pbd-ease);
}
.pb-discover-card--bad   .pb-discover-card-accent { background: linear-gradient(90deg, transparent 0%, var(--pbd-pink) 50%, transparent 100%); opacity: 0.85; }
.pb-discover-card--warn  .pb-discover-card-accent { background: linear-gradient(90deg, transparent 0%, var(--pbd-gold) 50%, transparent 100%); opacity: 0.85; }
.pb-discover-card--ok    .pb-discover-card-accent { background: linear-gradient(90deg, transparent 0%, var(--pbd-mint) 50%, transparent 100%); opacity: 0.85; }
.pb-discover-card--unknown .pb-discover-card-accent { opacity: 0; }

.pb-discover-card-img::after {
    /* radial halo overlay in top-right corner — colored per verdict */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(120% 80% at 100% 0%, var(--pbd-card-halo, transparent) 0%, transparent 55%);
    transition: opacity 0.22s var(--pbd-ease);
}
.pb-discover-card--bad   { --pbd-card-halo: rgba(255, 93, 143, 0.16); }
.pb-discover-card--warn  { --pbd-card-halo: rgba(255, 201, 74, 0.14); }
.pb-discover-card--ok    { --pbd-card-halo: rgba(76, 226, 193, 0.14); }
.pb-discover-card--unknown { --pbd-card-halo: rgba(255, 255, 255, 0.06); }

.pb-discover-card--bad:hover  { --pbd-card-halo: rgba(255, 93, 143, 0.28); }
.pb-discover-card--warn:hover { --pbd-card-halo: rgba(255, 201, 74, 0.24); }
.pb-discover-card--ok:hover   { --pbd-card-halo: rgba(76, 226, 193, 0.24); }

/* v0.25.70: SOLID dark background + brand-color text + brand-tinted border.
   Юзер: «очень плохо видно блашку OZON». Раньше brand-tinted полупрозрачный
   фон (16% alpha) сливался на светлых product images (белые кеды и т.п.).
   Now: тёмный solid фон (0.82 alpha) с brand-tinted текстом + 1.5px brand
   border + drop-shadow → видно на ЛЮБОМ фоне (светлом или тёмном). */
.pb-discover-card-mp {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 5px 11px;
    border-radius: 7px;
    font: 700 11px/1 'Inter', -apple-system, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 3;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(8, 10, 16, 0.82);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
/* Per-marketplace: brand color на text + border, фон всегда тёмный */
.pb-discover-card-mp--wildberries {
    color: #e88aff;
    border-color: rgba(232, 138, 255, 0.55);
}
.pb-discover-card-mp--ozon {
    color: #6eaaff;
    border-color: rgba(110, 170, 255, 0.60);
}
.pb-discover-card-mp--yandex_market {
    color: #ffcc00;
    border-color: rgba(255, 204, 0, 0.60);
}
.pb-discover-card-mp--megamarket {
    color: #ff7ab8;
    border-color: rgba(255, 122, 184, 0.60);
}
.pb-discover-card-mp--unknown {
    color: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Suspicion strip — colored bar at the very bottom of image area */
.pb-discover-card-strip {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    z-index: 2;
}
.pb-discover-card-strip-fill {
    height: 100%;
    /* v0.25.19: УБРАЛ width transition + width:0% default. Раньше каждая card
       при mount transition'ила width 0%→target 0.8s — c 50+ cards = 50
       parallel layout transitions = layout thrashing = freeze. Now: width
       устанавливается inline через style (SSR/JS) сразу, без animation. */
}
.pb-discover-card-strip-fill.is-pink    { background: var(--pbd-pink); }
.pb-discover-card-strip-fill.is-gold    { background: var(--pbd-gold); }
.pb-discover-card-strip-fill.is-mint    { background: var(--pbd-mint); }
.pb-discover-card-strip-fill.is-neutral { background: rgba(255, 255, 255, 0.3); }

/* Card body */
.pb-discover-card-body {
    padding: 10px 12px 12px;
}
.pb-discover-card-mp-label {
    font-family: monospace, "SF Mono", Consolas;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--pbd-fg-dim);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.pb-discover-card-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pbd-fg);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 33px;
}

@media (min-width: 980px) {
    .pb-discover-card-name { font-size: 14px; min-height: 36px; }
    .pb-discover-card-body { padding: 12px 14px 14px; }
}

/* Hidden by JS filter */
.pb-discover-card[hidden] { display: none !important; }

/* ─── Skeletons ──────────────────────────────────────────────────────────── */
.pb-discover-skeletons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}
/* v0.25.20: КРИТИЧЕСКИЙ ФИКС — `[hidden]` HTML attribute перекрывался author
   правилом display:grid. Skeletons всегда видны вне зависимости от JS hidden=true.
   Это и есть «не грузятся остальные шортсы» — юзер видел skeleton placeholders
   которые JS «скрывал» через .hidden = true, но CSS их всё равно показывал. */
.pb-discover-skeletons[hidden] { display: none !important; }
.pb-discover-loadmore-wrap[hidden] { display: none !important; }
.pb-discover-empty[hidden] { display: none !important; }
.pb-discover-active-chips[hidden] { display: none !important; }
.pb-discover-fab[hidden] { display: none !important; }
.pb-discover-search-clear[hidden] { display: none !important; }
.pb-discover-meta-reset[hidden] { display: none !important; }
.pb-discover-filters-toggle[hidden] { display: none !important; }
@media (min-width: 640px)  { .pb-discover-skeletons { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 980px)  { .pb-discover-skeletons { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1400px) { .pb-discover-skeletons { grid-template-columns: repeat(5, 1fr); gap: 18px; } }

.pb-discover-skeleton {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--pbd-card-radius);
    overflow: hidden;
    padding-bottom: 14px;
}
.pb-discover-skeleton-img {
    aspect-ratio: 9 / 12;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.07) 50%,
        rgba(255, 255, 255, 0.03) 100%);
    background-size: 200% 100%;
    animation: pbd-skeleton 1.5s linear infinite;
}
.pb-discover-skeleton-line {
    height: 12px;
    margin: 12px 14px 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: pbd-skeleton 1.5s linear infinite;
}
.pb-discover-skeleton-line.is-short { width: 60%; }

@keyframes pbd-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Empty state ────────────────────────────────────────────────────────── */
.pb-discover-empty {
    text-align: center;
    padding: 64px 16px;
    max-width: 420px;
    margin: 0 auto;
}
.pb-discover-empty-icon {
    font-size: 56px;
    opacity: 0.5;
    margin-bottom: 16px;
}
.pb-discover-empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--pbd-fg);
    margin-bottom: 6px;
}
.pb-discover-empty-sub {
    font-size: 14px;
    color: var(--pbd-fg-dim);
    margin-bottom: 18px;
    line-height: 1.5;
}
.pb-discover-empty-reset {
    padding: 10px 22px;
    border-radius: 12px;
    border: 1px solid rgba(76, 226, 193, 0.42);
    background: rgba(76, 226, 193, 0.10);
    color: var(--pbd-fg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s var(--pbd-ease), border-color 0.18s var(--pbd-ease);
}
.pb-discover-empty-reset:hover {
    background: rgba(76, 226, 193, 0.18);
    border-color: rgba(76, 226, 193, 0.6);
}

/* ─── Load more ──────────────────────────────────────────────────────────── */
.pb-discover-loadmore-wrap {
    display: flex;
    justify-content: center;
    padding: 28px 16px 12px;
}
.pb-discover-loadmore {
    padding: 12px 28px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--pbd-fg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s var(--pbd-ease), border-color 0.18s var(--pbd-ease);
}
.pb-discover-loadmore:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(76, 226, 193, 0.42);
}
.pb-discover-loadmore.is-loading {
    color: transparent;
    position: relative;
    pointer-events: none;
}
.pb-discover-loadmore.is-loading::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--pbd-mint);
    border-radius: 50%;
    animation: pbd-spin 0.7s linear infinite;
}
@keyframes pbd-spin { to { transform: rotate(360deg); } }

/* ─── Bottom CTA ─────────────────────────────────────────────────────────── */
.pb-discover-cta-wrap {
    display: flex;
    justify-content: center;
    padding: 36px 16px 16px;
}
.pb-discover-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 14px;
    background: linear-gradient(180deg,
        rgba(76, 226, 193, 0.18) 0%,
        rgba(76, 226, 193, 0.08) 100%);
    border: 1px solid rgba(76, 226, 193, 0.42);
    color: var(--pbd-fg);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 0 24px -4px rgba(76, 226, 193, 0.22),
        inset 0 0 12px -4px rgba(76, 226, 193, 0.08);
    transition: transform 0.18s var(--pbd-ease), background 0.18s var(--pbd-ease), border-color 0.18s var(--pbd-ease);
}
.pb-discover-cta svg {
    width: 18px; height: 18px;
    stroke: var(--pbd-mint);
    fill: none;
    transition: transform 0.18s var(--pbd-ease);
}
.pb-discover-cta:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg,
        rgba(76, 226, 193, 0.26) 0%,
        rgba(76, 226, 193, 0.14) 100%);
    border-color: rgba(76, 226, 193, 0.62);
}
.pb-discover-cta:hover svg { transform: translateX(4px); }
.pb-discover-cta:active { transform: translateY(0); }

/* ─── Reduced motion / Low-end ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pb-discover-title-dot { animation: none; }
    .pb-discover-card,
    .pb-discover-card:hover,
    .pb-discover-cta,
    .pb-discover-cta:hover,
    .pb-discover-cta:hover svg,
    .pb-discover-loadmore {
        transform: none !important;
        transition: none !important;
    }
    .pb-discover-card-img img {
        transition: none !important;
    }
    .pb-discover-card:hover .pb-discover-card-img img {
        transform: none !important;
    }
    .pb-discover-skeleton-img,
    .pb-discover-skeleton-line { animation: none; }
    .pb-discover-loadmore.is-loading::after { animation: none; }
}

body.pb-low-end .pb-discover-card,
body.pb-low-end .pb-discover-card:hover {
    transform: none !important;
    box-shadow: none !important;
}
body.pb-low-end .pb-discover-card-img img {
    transition: none !important;
}
body.pb-low-end .pb-discover-card:hover .pb-discover-card-img img {
    transform: none !important;
}
body.pb-low-end .pb-discover-filters {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(11, 13, 18, 0.96);
}
body.pb-low-end .pb-discover-card-badge,
body.pb-low-end .pb-discover-card-mp {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* iOS Safari 26 — large screen scale safety: scale on ≥ 980px keeps within bounds */
@media (min-width: 980px) and (hover: hover) {
    .pb-discover-card:hover { transform: translateY(-4px) scale(1.03); }
}
@media (max-width: 480px) {
    .pb-discover-card:hover { transform: none; }
}