/* ============================================================
   Homepage Redesign — uvelir.info
   Bootstrap 5.3 compatible, no jQuery dependencies
   ============================================================ */

/* CSS Custom Properties moved to base.css (shared across all pages) */

/* --- Section Titles --- */
.uv-section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--uv-border);
    position: relative;
}

.uv-section-title::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: var(--uv-primary);
}

.uv-section-title h2 {
    font-size: var(--uv-fs-h4);
    font-weight: var(--uv-fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--uv-dark);
    margin: 0;
    white-space: nowrap;
}

.uv-section-links {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.uv-section-links a {
    font-size: var(--uv-fs-small);
    font-weight: var(--uv-fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--uv-text-muted);
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--uv-border);
    border-radius: var(--uv-radius-xs);
    transition: all var(--uv-duration-slow) var(--uv-ease);
}

.uv-section-links a:hover {
    color: var(--uv-primary-dark);
    border-color: var(--uv-primary);
    background: rgba(var(--uv-primary-rgb), 0.04);
}

/* --- Hero Section --- */

/* Featured (large) card */
.uv-hero-featured {
    position: relative;
    border-radius: var(--uv-radius-sm);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.uv-hero-featured a {
    display: block;
    text-decoration: none;
    color: var(--uv-text-inverse);
}

.uv-hero-featured img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    transition: transform var(--uv-duration-slower) var(--uv-ease);
}

.uv-hero-featured:hover img {
    transform: scale(1.03);
}

.uv-hero-featured .uv-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(10, 10, 20, 0.85) 0%,
        rgba(10, 10, 20, 0.4) 40%,
        transparent 70%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
}

.uv-hero-featured .uv-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: var(--uv-fs-small);
    opacity: 0.85;
}

.uv-hero-featured .uv-hero-meta time {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.2rem 0.5rem;
    border-radius: var(--uv-radius-xs);
    backdrop-filter: blur(4px);
}

.uv-hero-featured .uv-hero-title {
    font-size: var(--uv-fs-h2);
    font-weight: var(--uv-fw-bold);
    line-height: var(--uv-lh-compact);
    color: var(--uv-text-inverse);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Small hero cards (2x2 grid) */
.uv-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.uv-hero-card {
    position: relative;
    border-radius: var(--uv-radius-sm);
    overflow: hidden;
}

.uv-hero-card a {
    display: block;
    text-decoration: none;
    color: var(--uv-text-inverse);
}

.uv-hero-card img {
    width: 100%;
    height: 175px;
    object-fit: cover;
    display: block;
    transition: transform var(--uv-duration-slower) var(--uv-ease);
}

.uv-hero-card:hover img {
    transform: scale(1.05);
}

.uv-hero-card .uv-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(10, 10, 20, 0.82) 0%,
        rgba(10, 10, 20, 0.25) 50%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.85rem;
}

.uv-hero-card .uv-card-meta {
    font-size: var(--uv-fs-small);
    opacity: 0.8;
    margin-bottom: 0.3rem;
}

.uv-hero-card .uv-card-meta time {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.15rem 0.4rem;
    border-radius: var(--uv-radius-xs);
}

.uv-hero-card .uv-card-title {
    font-size: var(--uv-fs-body);
    font-weight: var(--uv-fw-semibold);
    line-height: var(--uv-lh-compact);
    color: var(--uv-text-inverse);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- News Feed --- */
.uv-feed-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--uv-border);
    transition: background var(--uv-duration-slow) var(--uv-ease);
}

.uv-feed-item:first-child {
    padding-top: 0;
}

.uv-feed-item:last-child {
    border-bottom: none;
}

.uv-feed-item:hover {
    background: var(--uv-bg-warm);
    margin-inline: -0.5rem;
    padding-inline: 0.5rem;
    border-radius: var(--uv-radius-sm);
}

.uv-feed-thumb {
    flex-shrink: 0;
    width: 180px;
    height: 110px;
    border-radius: var(--uv-radius-sm);
    overflow: hidden;
}

.uv-feed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--uv-duration-slow) var(--uv-ease);
}

.uv-feed-item:hover .uv-feed-thumb img {
    transform: scale(1.05);
}

.uv-feed-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.uv-feed-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--uv-fs-small);
    color: var(--uv-text-muted);
    margin-bottom: 0.35rem;
}

.uv-feed-meta .uv-category {
    color: var(--uv-primary-dark);
    font-weight: var(--uv-fw-semibold);
}

.uv-feed-meta .uv-views {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.uv-feed-title {
    font-size: 1.05rem;
    font-weight: var(--uv-fw-semibold);
    line-height: var(--uv-lh-compact);
    margin-top: 0;
    margin-bottom: 0.35rem;
}

.uv-feed-title a {
    color: var(--uv-text);
    text-decoration: none;
    transition: color var(--uv-duration-slow) var(--uv-ease);
}

.uv-feed-title a:hover {
    color: var(--uv-primary-dark);
}

.uv-feed-excerpt {
    font-size: var(--uv-fs-body);
    line-height: var(--uv-lh-compact);
    color: var(--uv-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: auto;
}

/* --- Section Badges (feed items) --- */
.uv-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--uv-fs-micro);
    font-weight: var(--uv-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: var(--uv-radius-xs);
    background: none;
    color: var(--uv-text-muted);
    border: 1px solid var(--uv-border);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--uv-duration-slow) var(--uv-ease), border-color var(--uv-duration-slow) var(--uv-ease);
}

.uv-section-badge:hover {
    color: var(--uv-primary-dark);
    border-color: var(--uv-primary);
}

.uv-section-badge i {
    font-size: var(--uv-fs-micro);
}

/* Hero badge tweaks (on dark overlay — keep filled) */
.uv-section-badge-hero {
    font-size: var(--uv-fs-micro);
    padding: 0.1rem 0.45rem;
    background: rgba(var(--uv-primary-rgb), 0.85);
    color: var(--uv-text-inverse);
    border-color: transparent;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.uv-section-badge-hero:hover {
    color: var(--uv-text-inverse);
    opacity: 0.9;
}

/* --- Trending / Popular sidebar blocks --- */
.uv-popular {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
}

.uv-popular-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--uv-border);
    text-decoration: none;
    color: inherit;
    transition: background var(--uv-duration-fast);
}

.uv-popular-item:first-child { padding-top: 0; }
.uv-popular-item:last-child { border-bottom: none; }
.uv-popular-item:hover { background: rgba(var(--uv-primary-rgb), .03); }

.uv-popular-info {
    flex: 1;
    min-width: 0;
}

.uv-popular-name {
    font-size: var(--uv-fs-small);
    font-weight: var(--uv-fw-semibold);
    line-height: var(--uv-lh-compact);
    color: var(--uv-dark);
    transition: color var(--uv-duration-base);
}

.uv-popular-item:hover .uv-popular-name {
    color: var(--uv-primary-dark);
}

.uv-popular-meta {
    font-size: var(--uv-fs-small);
    color: var(--uv-text-muted);
    margin-top: .15rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.uv-popular-meta i {
    font-size: var(--uv-fs-small);
    color: var(--uv-primary);
}

.uv-popular-views {
    flex-shrink: 0;
    font-size: var(--uv-fs-small);
    font-weight: var(--uv-fw-semibold);
    color: var(--uv-text-muted);
    display: flex;
    align-items: center;
    gap: .2rem;
    white-space: nowrap;
}

.uv-popular-views i {
    color: #e67e22;
    font-size: var(--uv-fs-small);
}

.uv-popular-stats {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
}

.uv-trend-badge {
    font-size: var(--uv-fs-micro);
    font-weight: var(--uv-fw-semibold);
    line-height: var(--uv-lh-none);
    display: inline-flex;
    align-items: center;
    gap: .1rem;
}

.uv-trend-badge i { font-size: .6rem; }

.uv-trend-up { color: #16a34a; }
.uv-trend-new {
    color: #2563eb;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Events Sidebar — moved to base.css (shared across pages) */

/* --- Company Teasers: styles are inline in the inclusion_tag template --- */

/* --- Scroll Animations (progressive enhancement) --- */
/* Content is always visible by default.
   JS adds .uv-anim-ready to <body>, then elements animate in. */
.uv-animate {
    opacity: 1;
    transform: none;
}

body.uv-anim-ready .uv-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--uv-duration-slower) ease, transform var(--uv-duration-slower) ease;
}

body.uv-anim-ready .uv-animate.uv-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
body.uv-anim-ready .uv-stagger > .uv-animate:nth-child(1) { transition-delay: 0.05s; }
body.uv-anim-ready .uv-stagger > .uv-animate:nth-child(2) { transition-delay: 0.1s; }
body.uv-anim-ready .uv-stagger > .uv-animate:nth-child(3) { transition-delay: 0.15s; }
body.uv-anim-ready .uv-stagger > .uv-animate:nth-child(4) { transition-delay: 0.2s; }
body.uv-anim-ready .uv-stagger > .uv-animate:nth-child(5) { transition-delay: 0.25s; }
body.uv-anim-ready .uv-stagger > .uv-animate:nth-child(6) { transition-delay: 0.3s; }

/* --- ЭКСПО-ЮВЕЛИР Banner: moved to fragments.css --- */

/* --- Homepage Search --- */
.uv-homepage-search {
    position: relative;
    padding-top: .5rem;
}

.uv-homepage-search-form .uv-input-group {
    box-shadow: var(--uv-shadow-sm);
    border-radius: var(--uv-radius-sm);
    overflow: hidden;
}

.uv-homepage-search-form .uv-input-group-text {
    border-color: var(--uv-border);
    padding-left: 1rem;
}

.uv-search-dropdown {
    position: absolute;
    left: 0;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    z-index: var(--uv-z-popover);
}

.uv-search-dropdown-icon {
    opacity: .5;
    flex-shrink: 0;
}

.uv-search-dropdown-title {
    font-size: var(--uv-fs-small);
}

.uv-search-dropdown-meta {
    font-size: var(--uv-fs-small);
}

.uv-homepage-search-input {
    font-size: var(--uv-fs-body);
    border-color: var(--uv-border);
    padding: .6rem .75rem;
}

.uv-homepage-search-input:focus {
    box-shadow: none;
    border-color: var(--uv-primary);
}

.uv-homepage-search-btn {
    padding: .6rem 1.5rem;
    font-weight: var(--uv-fw-semibold);
    letter-spacing: .02em;
}

/* --- Value Proposition (sidebar card) --- */
.uv-value-prop {
    padding: 1rem 1.15rem;
    border: 1px solid var(--uv-border);
    border-radius: var(--uv-radius-sm);
    background: var(--uv-bg-warm);
}

.uv-value-prop-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--uv-radius-circle);
    background: var(--uv-primary);
    color: var(--uv-text-inverse);
    font-size: var(--uv-fs-body);
}

.uv-value-prop-text { flex: 1; min-width: 0; }

.uv-value-prop-headline {
    font-size: var(--uv-fs-small);
    font-weight: var(--uv-fw-bold);
    color: var(--uv-dark);
    line-height: var(--uv-lh-compact);
    letter-spacing: .03em;
}

.uv-value-prop-sub {
    font-size: var(--uv-fs-small);
    color: var(--uv-text-muted);
    line-height: var(--uv-lh-base);
}

.uv-value-prop-cta .btn {
    width: 100%;
}

/* --- Inline Subscribe --- */
.uv-subscribe-inline {
    position: relative;
    margin: .75rem 0;
    padding: 1rem 1.15rem 1rem 1.35rem;
    background: var(--uv-bg-warm);
    border: 1px solid var(--uv-border);
    border-radius: var(--uv-radius-sm);
    overflow: hidden;
}

.uv-subscribe-inline::before {
    content: '';
    position: absolute;
    top: .5rem;
    bottom: .5rem;
    left: 0;
    width: 3px;
    border-radius: 0 var(--uv-radius-xs) var(--uv-radius-xs) 0;
    background: var(--uv-primary);
}

.uv-subscribe-inline-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.uv-subscribe-inline-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--uv-radius-circle);
    background: var(--uv-surface);
    border: 1px solid var(--uv-border);
    color: var(--uv-primary);
    font-size: .95rem;
    box-shadow: var(--uv-shadow-sm);
}

.uv-subscribe-inline-text { flex: 1; min-width: 0; }

.uv-subscribe-inline-headline {
    font-size: var(--uv-fs-small);
    font-weight: var(--uv-fw-semibold);
    color: var(--uv-dark);
    letter-spacing: 0.01em;
}

.uv-subscribe-inline-sub {
    font-size: var(--uv-fs-xs);
    color: var(--uv-text-muted);
    margin-top: .1rem;
}

.uv-subscribe-inline-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem 1rem;
    font-size: var(--uv-fs-small);
    font-weight: var(--uv-fw-semibold);
    color: var(--uv-primary);
    border: 1px solid var(--uv-primary);
    border-radius: var(--uv-radius-sm);
    text-decoration: none;
    transition: all var(--uv-duration-slow) var(--uv-ease);
    background: var(--uv-surface);
}

.uv-subscribe-inline-cta:hover {
    background: var(--uv-primary);
    color: var(--uv-text-inverse);
    box-shadow: var(--uv-shadow-primary);
}

.uv-subscribe-inline-cta i {
    font-size: var(--uv-fs-micro);
    transition: transform var(--uv-duration-base) ease;
}

.uv-subscribe-inline-cta:hover i {
    transform: translateX(3px);
}


/* --- Responsive --- */
@media (max-width: 575.98px) {
    .uv-subscribe-inline-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }

    .uv-subscribe-inline-cta {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .uv-hero-featured img {
        height: 240px;
    }

    .uv-hero-featured .uv-hero-title {
        font-size: 1.15rem;
    }

    .uv-hero-grid {
        grid-template-columns: 1fr;
    }

    .uv-hero-card img {
        height: 200px;
    }

    .uv-feed-item {
        flex-direction: column;
        gap: 0.6rem;
    }

    .uv-feed-thumb {
        width: 100%;
        height: 180px;
    }

}

@media (min-width: 768px) and (max-width: 991.98px) {
    .uv-hero-featured img {
        height: 300px;
    }

    .uv-hero-card img {
        height: 150px;
    }

    .uv-hero-card .uv-card-title {
        font-size: var(--uv-fs-small);
        -webkit-line-clamp: 2;
    }
}

/* ============================================================
   Секция «Спецучёт» — показатели реестра ФПП и ювелирной розницы.
   Разметка: templates/fragments/homepage_assay.html
   ============================================================ */

.uv-spec {
    /* Шрифт числовых значений на контейнере секции, а не на :root:
       модульный файл грузится после base.css и его :root накрыл бы
       весь документ */
    --uv-spec-num: 'Exo 2', 'Exo 2 Fallback', system-ui, sans-serif;
    margin-bottom: var(--uv-space-4);
}

/* --- Плитки показателей --- */
.uv-spec-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--uv-space-2);
}

.uv-spec-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .22rem;
    padding: .85rem 1rem .8rem 1.15rem;
    background: var(--uv-surface);
    border: 1px solid var(--uv-border-light);
    border-radius: var(--uv-radius-lg);
    box-shadow: var(--uv-shadow-sm);
    overflow: hidden;
}

/* Кант слева делит плитки на две пары: синие — реестр, золотые — розница */
.uv-spec-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--uv-primary);
}

.uv-spec-kpi-gold::before {
    background: var(--uv-warning);
}

.uv-spec-kpi-top {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: .35rem;
    border-radius: var(--uv-radius-md);
    background: rgba(var(--uv-primary-rgb), .08);
    color: var(--uv-primary-dark);
    font-size: var(--uv-fs-h5);
}

.uv-spec-kpi-gold .uv-spec-kpi-top {
    background: rgba(var(--uv-warning-rgb), .12);
    color: var(--uv-warning-dark);
}

.uv-spec-kpi-value {
    font-family: var(--uv-spec-num);
    font-variant-numeric: tabular-nums;
    font-size: 1.85rem;
    font-weight: var(--uv-fw-bold);
    line-height: var(--uv-lh-none);
    color: var(--uv-text-dark);
    /* Место под подчёркивание ссылки: при line-height 1 оно выходит за
       строку и ложится на подпись под числом */
    padding-bottom: 6px;
}

/* Число — ссылка. Подчёркивание тонким брендовым вместо синего текста:
   кликабельность читается, но четыре цветных числа подряд не забивают блок */
.uv-spec-kpi-value a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(var(--uv-primary-rgb), .35);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: color var(--uv-duration-base) var(--uv-ease),
                text-decoration-color var(--uv-duration-base) var(--uv-ease);
}

.uv-spec-kpi-value a:hover {
    color: var(--uv-primary-dark);
    text-decoration-color: var(--uv-primary);
}

.uv-spec-kpi-label {
    font-size: var(--uv-fs-xs);
    font-weight: var(--uv-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--uv-text-muted);
}

.uv-spec-kpi-hint {
    font-size: var(--uv-fs-xs);
    color: var(--uv-text-hint);
    line-height: var(--uv-lh-compact);
}

/* --- Бейдж дельты --- */
.uv-spec-delta {
    /* auto прижимает бейдж к низу плитки: подписи у соседей разной высоты,
       и без этого ряд дельт идёт лесенкой */
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: auto;
    padding: .12rem .45rem;
    border-radius: var(--uv-radius-pill);
    font-size: var(--uv-fs-micro);
    font-weight: var(--uv-fw-semibold);
}

.uv-spec-delta-up {
    background: rgba(var(--uv-success-rgb), .1);
    color: var(--uv-success-dark);
}

.uv-spec-delta-down {
    background: rgba(var(--uv-danger-rgb), .1);
    color: var(--uv-danger-dark);
}

.uv-spec-delta-flat {
    background: var(--uv-bg-warm);
    color: var(--uv-text-muted);
}

/* --- Плитка ротации: два встречных числа --- */
.uv-spec-churn {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding-bottom: 6px;
    font-family: var(--uv-spec-num);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: var(--uv-fw-bold);
    line-height: var(--uv-lh-none);
}

.uv-spec-churn-in { color: var(--uv-success-dark); }
.uv-spec-churn-out { color: var(--uv-danger-dark); }

.uv-spec-churn-sep {
    color: var(--uv-text-light);
    font-weight: var(--uv-fw-normal);
}

/* Числа ротации уже цветные — подчёркивание берёт их собственный цвет */
.uv-spec-churn a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    opacity: .92;
}

.uv-spec-churn a:hover { opacity: 1; }

/* --- Строка ссылок вглубь раздела --- */
.uv-spec-links {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: var(--uv-space-2);
}

.uv-spec-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .58rem;
    border: 1px solid var(--uv-border);
    border-radius: var(--uv-radius-pill);
    background: var(--uv-surface);
    font-size: var(--uv-fs-small);
    color: var(--uv-text-body);
    text-decoration: none;
    transition: border-color var(--uv-duration-base) var(--uv-ease),
                color var(--uv-duration-base) var(--uv-ease);
}

.uv-spec-chip:hover {
    border-color: var(--uv-primary);
    color: var(--uv-primary-dark);
}

.uv-spec-chip i { color: var(--uv-primary); }

.uv-spec-note {
    margin-top: .6rem;
    font-size: var(--uv-fs-xs);
    color: var(--uv-text-hint);
}

@media (max-width: 991.98px) {
    .uv-spec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ниже 768px ссылки идут строкой текста с вертикальной чертой между ними.
   Кнопками они занимают на телефоне две-три строки, а горизонтальный скролл
   прячет половину списка: о том, что строку можно тянуть, ничто не говорит. */
@media (max-width: 767.98px) {
    .uv-spec-links {
        display: block;
        margin-top: .6rem;
        font-size: var(--uv-fs-small);
        line-height: var(--uv-lh-content);
    }

    .uv-spec-chip {
        /* nowrap держит ссылку вместе с её разделителем: иначе перенос
           проходит между ними и строка начинается с висящей черты */
        display: inline;
        white-space: nowrap;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        color: var(--uv-primary-dark);
        text-decoration: underline;
    }

    .uv-spec-chip i { display: none; }

    /* inline-block делает разделитель отдельным атомарным боксом:
       подчёркивание ссылки внутрь него не протекает */
    .uv-spec-chip:not(:last-child)::after {
        content: "|";
        display: inline-block;
        margin: 0 .45rem;
        color: var(--uv-text-light);
        text-decoration: none;
    }
}

@media (max-width: 575.98px) {
    .uv-spec-kpi-value { font-size: 1.6rem; }
}