/* ══════════════════════════════════════════════════════════════════════
   НУЖНЫДЕНЬГИ — LISTING TEMPLATES (карточка финансового продукта)
   large-grid · mercury · compact · carousel.

   Единая карточка «financial product card»:
     платиновая поверхность + серебряная граница
     → изумрудно-серебряная кромка сверху
     → логотип-плита + название + рейтинг-чип
     → условия (slogan)
     → внутренняя панель данных (ice/platinum, 2×2)
     → CTA-строка (изумруд + серебряная вторичная)

   В тёмных секциях (.calculator-section / .band-dark) карточки остаются
   светлыми и «выплывают» из фона.
   Токены — из design-system.css; !important только у Swiper (см. §8).
   ══════════════════════════════════════════════════════════════════════ */

/* ── ЛОГОТИПЫ ── */
.listing-mercury-logo img,
.listing-large-logo img,
.listing-compact-logo,
.listing-carousel-logo {
    height: 52px;
    width: 126px;
    object-fit: contain;
    flex-shrink: 0;
}
.listing-carousel-logo { margin: 0 auto 14px; }

.listing-mercury-logo img,
.listing-large-logo img {
    background: #FFFFFF;
    border: 1px solid var(--nd-silver-200);
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}

/* ── ПЛАШКИ ── */
.listing-mercury-badge,
.listing-large-badge,
.listing-carousel-badge {
    position: absolute;
    top: -10px;
    right: 14px;
    left: auto;
    z-index: 10;
    max-width: calc(100% - 28px);
    padding: 5px 13px;
    border-radius: var(--nd-r-full);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    background: linear-gradient(180deg, var(--nd-graphite-800) 0%, var(--nd-graphite-950) 100%);
    color: var(--nd-silver-100);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 10px 22px -14px rgba(0,0,0,.9);
}
.listing-mercury-badge.listing-badge-default,
.listing-large-badge.listing-badge-default,
.listing-carousel-badge.listing-badge-default { background: linear-gradient(180deg, var(--nd-graphite-800), var(--nd-graphite-950)); }

.listing-mercury-badge.listing-badge-zero-interest,
.listing-large-badge.listing-badge-zero-interest,
.listing-carousel-badge.listing-badge-zero-interest {
    background: linear-gradient(180deg, var(--nd-emerald-700) 0%, var(--nd-emerald-900) 100%);
    color: #FFFFFF;
    border-color: rgba(255,255,255,.28);
}
.listing-mercury-badge.listing-badge-fast,
.listing-large-badge.listing-badge-fast,
.listing-carousel-badge.listing-badge-fast {
    background: var(--nd-metal-plate);
    color: var(--nd-emerald-900);
    border-color: var(--nd-silver-300);
}
.listing-mercury-badge.listing-badge-high-approval,
.listing-large-badge.listing-badge-high-approval,
.listing-carousel-badge.listing-badge-high-approval {
    background: linear-gradient(180deg, var(--nd-emerald-700) 0%, var(--nd-emerald-900) 100%);
    color: #FFFFFF;
    border-color: rgba(255,255,255,.28);
}

/* ── ШЕЛЛ КАРТОЧКИ: общий контракт ── */
.listing-large-card,
.listing-mercury-card,
.listing-carousel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #FCFDFD 0%, #F6FAF8 100%);
    border: 1px solid var(--nd-silver-300);
    border-radius: var(--nd-r-lg);
    box-shadow: var(--nd-shadow-sm);
    overflow: visible;
    margin-top: 14px;
    transition: border-color var(--nd-t) var(--nd-ease),
                box-shadow var(--nd-t) var(--nd-ease),
                transform var(--nd-t) var(--nd-ease);
}
/* Изумрудно-серебряная кромка сверху */
.listing-large-card::before,
.listing-mercury-card::before,
.listing-carousel-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    border-radius: var(--nd-r-lg) var(--nd-r-lg) 0 0;
    background: linear-gradient(90deg, var(--nd-emerald-700) 0%, var(--nd-emerald-300) 48%, var(--nd-silver-400) 100%);
}
.listing-large-card:hover,
.listing-mercury-card:hover,
.listing-carousel-card:hover {
    transform: translateY(-3px);
    border-color: var(--nd-silver-500);
    box-shadow: var(--nd-shadow-md);
}

/* ══════════════════════════════════════════════════════════════════════
   1. LARGE GRID
   ══════════════════════════════════════════════════════════════════════ */
.listing-large-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 24px 0;
    padding: 0;
}

.listing-large-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    background: transparent;
    border-bottom: 1px solid var(--nd-silver-300);
}
.listing-large-logo { display: flex; align-items: center; flex-shrink: 0; }
.listing-large-rating {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: var(--nd-accent-soft);
    border: 1px solid var(--nd-accent-line);
    border-radius: var(--nd-r-full);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--nd-emerald-900);
    white-space: nowrap;
}
.listing-large-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.listing-large-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--nd-graphite-900);
    line-height: 1.3;
    letter-spacing: -.012em;
}

.listing-large-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
}

/* Условия продукта (slogan) — тихая строка под шапкой */
.listing-conditions {
    margin: 0;
    padding: 11px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--nd-text-secondary);
    border-bottom: 1px solid var(--nd-silver-300);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Внутренняя панель данных (hairline-grid) */
.listing-large-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    width: 100%;
    background: var(--nd-silver-300);
    border: 1px solid var(--nd-silver-300);
    border-radius: 12px;
    overflow: hidden;
}
.listing-large-param {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    text-align: left;
    background: linear-gradient(180deg, #FBFDFC 0%, #F2F7F5 100%);
}
.listing-large-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nd-text-muted);
    line-height: 1;
}
.listing-large-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--nd-graphite-900);
    line-height: 1.2;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
}

.listing-approval {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: var(--nd-r-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}
.listing-approval.high {
    background: var(--nd-accent-soft);
    border-color: var(--nd-accent-line);
    color: var(--nd-emerald-900);
}
.listing-approval.medium {
    background: var(--nd-warning-050);
    border-color: #EADFC6;
    color: var(--nd-warning);
}
.listing-approval.low {
    background: var(--nd-danger-050);
    border-color: #F0D6D2;
    color: var(--nd-danger);
}

.listing-large-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    padding: 14px 16px;
    background: transparent;
    border-top: 1px solid var(--nd-silver-300);
}

/* ══════════════════════════════════════════════════════════════════════
   2. MERCURY CARDS
   ══════════════════════════════════════════════════════════════════════ */
.listing-mercury-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 30px 0;
    padding: 0;
}

.listing-mercury-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    background: transparent;
    border-bottom: 1px solid var(--nd-silver-300);
}
.listing-mercury-logo { display: flex; align-items: center; flex-shrink: 0; }
.listing-mercury-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 4px 9px;
    background: var(--nd-accent-soft);
    border: 1px solid var(--nd-accent-line);
    border-radius: var(--nd-r-full);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--nd-emerald-900);
    white-space: nowrap;
}
.listing-mercury-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.listing-mercury-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--nd-graphite-900);
    line-height: 1.3;
    letter-spacing: -.012em;
}

/* Внутренняя панель данных */
.listing-mercury-body {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin: 14px 16px;
    padding: 0;
    background: var(--nd-silver-300);
    border: 1px solid var(--nd-silver-300);
    border-radius: 12px;
    overflow: hidden;
}
.listing-mercury-body:empty { display: none; }
.listing-mercury-param {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px;
    font-size: 13.5px;
    background: linear-gradient(180deg, #FBFDFC 0%, #F2F7F5 100%);
}
/* Нечётное последнее значение занимает всю ширину — не остаётся «пустой» ячейки */
.listing-mercury-body .listing-mercury-param:last-child:nth-child(odd) { grid-column: 1 / -1; }
.listing-mercury-param span {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nd-text-muted);
    line-height: 1;
}
.listing-mercury-param strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--nd-graphite-900);
    text-align: left;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
}

.listing-mercury-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    padding: 14px 16px;
    background: transparent;
    border-top: 1px solid var(--nd-silver-300);
}

/* ══════════════════════════════════════════════════════════════════════
   3. COMPACT LIST (сайдбар калькулятора)
   ══════════════════════════════════════════════════════════════════════ */
.listing-compact-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.listing-compact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: auto;
    padding: 12px;
    background: linear-gradient(180deg, #FCFDFD 0%, #F5F9F7 100%);
    border: 1px solid var(--nd-silver-300);
    border-radius: var(--nd-r-md);
    box-shadow: var(--nd-shadow-sm);
    transition: border-color var(--nd-t) var(--nd-ease), box-shadow var(--nd-t) var(--nd-ease),
                transform var(--nd-t) var(--nd-ease);
}
.listing-compact-item:hover {
    transform: translateY(-2px);
    border-color: var(--nd-silver-500);
    box-shadow: var(--nd-shadow-md);
}

.listing-compact-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.listing-compact-info { flex: 1; min-width: 0; }
.listing-compact-info h4 {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--nd-graphite-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.listing-compact-info p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--nd-text-muted);
    word-wrap: break-word;
}
.listing-compact-rating {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--nd-emerald-800);
}
.listing-compact-right { flex-shrink: 0; margin-left: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   4. CAROUSEL
   ══════════════════════════════════════════════════════════════════════ */
.listing-carousel-swiper { width: 100%; padding: 20px 0 40px; position: relative; }

.listing-carousel-card { padding: 25px 22px 22px; text-align: center; overflow: visible; }

.listing-carousel-name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--nd-graphite-900);
}
.listing-carousel-rating { margin-bottom: 14px; color: var(--nd-emerald-800); font-size: 14px; font-weight: 700; }
.listing-carousel-info { flex: 1; min-height: 58px; margin-bottom: 18px; }
.listing-carousel-info p { margin: 5px 0; font-size: 14px; color: var(--nd-text-muted); }
.listing-carousel-info strong { color: var(--nd-emerald-800); font-size: 16px; font-weight: 700; }

/* Навигация Swiper */
.swiper-button-prev,
.swiper-button-next {
    background: var(--nd-metal-plate);
    border: 1px solid var(--nd-silver-300);
    color: var(--nd-emerald-800);
    border-radius: 50%;
    box-shadow: var(--nd-shadow-md);
    transition: background var(--nd-t) var(--nd-ease), color var(--nd-t) var(--nd-ease), border-color var(--nd-t) var(--nd-ease);
}
.swiper-button-prev:hover,
.swiper-button-next:hover { background: var(--nd-emerald-800); border-color: var(--nd-emerald-800); color: #FFFFFF; }
.swiper-pagination-bullet { background: var(--nd-emerald-700); opacity: .3; }
.swiper-pagination-bullet-active { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════
   5. КНОПКИ ЛИСТИНГА
   ══════════════════════════════════════════════════════════════════════ */
.listing-btn-large-primary,
.listing-btn-large-secondary,
.listing-btn-primary,
.listing-btn-secondary,
.listing-btn-compact,
.listing-carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--nd-r-md);
    cursor: pointer;
    transition: background var(--nd-t) var(--nd-ease), border-color var(--nd-t) var(--nd-ease),
                color var(--nd-t) var(--nd-ease), transform var(--nd-t-fast) var(--nd-ease),
                box-shadow var(--nd-t) var(--nd-ease);
}

/* Primary — изумруд */
.listing-btn-large-primary,
.listing-btn-primary,
.listing-carousel-btn,
.listing-btn-compact {
    flex: 1;
    min-width: 110px;
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--nd-emerald-700) 0%, var(--nd-emerald-900) 100%);
    color: #FFFFFF;
    box-shadow: var(--nd-shadow-emerald);
}
.listing-btn-large-primary:hover,
.listing-btn-primary:hover,
.listing-carousel-btn:hover,
.listing-btn-compact:hover {
    background: linear-gradient(180deg, var(--nd-emerald-800) 0%, var(--nd-emerald-950) 100%);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -14px rgba(10,99,71,.8);
}

/* Secondary — платиновая плита с серебряной границей */
.listing-btn-large-secondary,
.listing-btn-secondary {
    flex: 1;
    min-width: 110px;
    padding: 11px 16px;
    background: var(--nd-metal-plate);
    border: 1px solid var(--nd-silver-300);
    color: var(--nd-graphite-900);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
.listing-btn-large-secondary:hover,
.listing-btn-secondary:hover {
    background: #FFFFFF;
    border-color: var(--nd-silver-500);
    color: var(--nd-emerald-900);
    transform: translateY(-2px);
}

.listing-btn-compact { display: inline-block; min-width: 0; padding: 10px 20px; font-size: 12.5px; border-radius: var(--nd-r-sm); }
.listing-carousel-btn { display: inline-block; padding: 12px 26px; }

/* ══════════════════════════════════════════════════════════════════════
   6. АДАПТАЦИЯ ВНУТРИ ТЁМНЫХ ПАНЕЛЕЙ
   ══════════════════════════════════════════════════════════════════════ */
.calculator-section .listing-compact-item,
.band-dark .listing-compact-item {
    background: linear-gradient(180deg, #FCFDFD 0%, #F5F9F7 100%);
    border-color: var(--nd-silver-300);
}
.calculator-section .listing-compact-info h4,
.band-dark .listing-compact-info h4 { color: var(--nd-graphite-900); }
.calculator-section .listing-compact-info p,
.band-dark .listing-compact-info p { color: var(--nd-text-muted); }

/* Сайдбар калькулятора: компактный листинг с крупным логотипом */
.calculator-sidebar-offers .listing-compact-item { padding: 11px; gap: 10px; }
.calculator-sidebar-offers .listing-compact-logo {
    width: 88px;
    height: 66px;
    min-width: 88px;
    object-fit: contain;
    background: #FFFFFF;
    border: 1px solid var(--nd-silver-200);
    border-radius: 9px;
    padding: 4px;
}
.calculator-sidebar-offers .listing-compact-info h4 { font-size: 14px; margin-bottom: 3px; }
.calculator-sidebar-offers .listing-compact-info p { font-size: 11px; line-height: 1.4; }
.calculator-sidebar-offers .listing-btn-compact { padding: 9px 16px; font-size: 11.5px; }

/* ══════════════════════════════════════════════════════════════════════
   7. ЛИСТИНГ-ГЕРОЙ РАЗДЕЛА (loans.php и т.п.)
   ══════════════════════════════════════════════════════════════════════ */
.listing-hero {
    position: relative;
    overflow: hidden;
    margin: 22px 0 30px;
    padding: 38px 34px;
    border-radius: var(--nd-r-panel);
    background:
        radial-gradient(700px 280px at 6% 0%, rgba(18,148,106,.34), transparent 64%),
        var(--nd-surf-deep-emerald);
    border: 1px solid var(--nd-silver-line-soft);
    box-shadow: var(--nd-shadow-dark);
    color: var(--nd-text-invert);
}
.listing-hero h1,
.listing-hero .section-title { color: var(--nd-text-invert); }
/* section в селекторе — не случайно: design-system.css грузится последним и
   правилом `.container p` (та же специфичность) перебивает цвет абзаца
   тёмного героя на #47544F. Специфичность (0,1,2) > (0,1,1). */
section.listing-hero p { color: rgba(233,240,237,.74); }

/* ══════════════════════════════════════════════════════════════════════
   8. СЕКЦИЯ КАРУСЕЛИ НА ГЛАВНОЙ
   ══════════════════════════════════════════════════════════════════════ */
.carousel-promo-section { overflow: hidden; }
.carousel-promo-section .listing-carousel-swiper { overflow: visible; padding: 10px 0 40px; }
.carousel-promo-section .swiper-wrapper { touch-action: pan-y; }
/* Карточка занимает ~82% — следующая подсматривает справа (свайп-хинт).
   !important — переопределение инлайнового width от Swiper. */
.carousel-promo-section .swiper-slide { width: 82% !important; }

/* ══════════════════════════════════════════════════════════════════════
   9. МОБИЛЬНАЯ АДАПТАЦИЯ
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .listing-large-grid,
    .listing-mercury-grid { grid-template-columns: 1fr; gap: 15px; }

    .listing-large-header,
    .listing-mercury-header { padding: 14px 14px 12px; }
    .listing-large-header h3,
    .listing-mercury-name { font-size: 15px; }

    .listing-large-badge,
    .listing-mercury-badge { font-size: 9px; padding: 4px 11px; right: 10px; max-width: calc(100% - 20px); }

    .listing-large-body { padding: 12px 14px; }
    .listing-large-params { gap: 1px; }
    .listing-large-param { padding: 10px; }
    .listing-large-value { font-size: 14px; }
    .listing-approval { font-size: 10px; padding: 4px 9px; }

    .listing-mercury-body { margin: 12px 14px; }
    .listing-mercury-param { padding: 10px; }
    .listing-mercury-param strong { font-size: 14px; }

    .listing-large-footer,
    .listing-mercury-footer { padding: 12px 14px; }

    .listing-mercury-logo img,
    .listing-large-logo img,
    .listing-compact-logo,
    .listing-carousel-logo { height: 46px; width: 110px; }

    .listing-compact-item { flex-direction: column; align-items: flex-start; padding: 12px; }
    .listing-compact-left { width: 100%; gap: 10px; }
    .listing-compact-info h4 { font-size: 14px; white-space: normal; }
    .listing-compact-info p { font-size: 11.5px; }
    .listing-compact-right { width: 100%; margin-left: 0; margin-top: 10px; }
    .listing-btn-compact { width: 100%; padding: 12px; }

    .listing-carousel-card { padding: 22px 18px 20px; }
    .listing-carousel-name { font-size: 15px; min-height: 36px; }
    .listing-carousel-info { min-height: 50px; }

    .listing-hero { padding: 28px 20px; }
}

@media (max-width: 480px) {
    .listing-compact-item { padding: 10px; }
    .listing-compact-info h4 { font-size: 13.5px; }
    .listing-compact-info p { font-size: 11px; }

    .listing-large-footer,
    .listing-mercury-footer { flex-direction: column; }
    .listing-btn-large-primary,
    .listing-btn-large-secondary,
    .listing-btn-primary,
    .listing-btn-secondary { width: 100%; }

    .listing-carousel-swiper { padding: 10px 0 30px; }
    .listing-carousel-badge { font-size: 8px; padding: 4px 10px; right: 8px; max-width: calc(100% - 16px); }
    .listing-mercury-badge,
    .listing-large-badge { font-size: 8.5px; padding: 4px 10px; right: 8px; max-width: calc(100% - 16px); }

    .listing-mercury-logo img,
    .listing-large-logo img,
    .listing-compact-logo,
    .listing-carousel-logo { height: 44px; width: 104px; }

    .carousel-promo-section .swiper-slide { width: 88% !important; }
}

/* Примечание: !important выше — единственные исключения файла:
   переопределение инлайновых width, которые задаёт JS-библиотека
   Swiper. Все остальные правила файла от !important свободны. */

/* ---- Надзаголовок (eyebrow) листингового героя (loans.php, credits.php) ---- */
.listing-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px 14px;
    border: 1px solid var(--nd-silver-line);
    border-radius: 999px;
    background: rgba(243,247,245,.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nd-accent-on-dark);
}
.listing-hero__eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nd-accent-on-dark);
    box-shadow: 0 0 0 4px rgba(87,206,163,.16);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .listing-hero__eyebrow { background: rgba(243,247,245,.13); }
}