/* ======================================================
   TECHRANK SMARTPHONES UI v3.0
   Страница смартфона + сравнение + каталог
====================================================== */

:root {
    --trp-accent: #3857ff;
    --trp-accent-dark: #223fd7;
    --trp-accent-soft: #eef1ff;
    --trp-text: #14192a;
    --trp-muted: #6b7285;
    --trp-line: #e1e6ef;
    --trp-soft: #f4f7fb;
    --trp-card: #ffffff;
    --trp-good: #139a5b;
    --trp-good-soft: #ecf9f2;
    --trp-bad: #d04b4b;
    --trp-bad-soft: #fff1f1;
    --trp-warning: #f59e0b;
    --trp-radius: 20px;
    --trp-shadow: 0 18px 45px rgba(24, 34, 68, 0.08);
    --trp-shadow-hover: 0 22px 52px rgba(24, 34, 68, 0.14);
}

.trp-page,
.trp-page * {
    box-sizing: border-box;
}

.trp-page {
    min-height: 70vh;
    padding: 30px 0 72px;
    color: var(--trp-text);
    background:
        radial-gradient(circle at 5% 0%, rgba(56, 87, 255, .07), transparent 25%),
        radial-gradient(circle at 95% 6%, rgba(14, 165, 233, .07), transparent 24%),
        #f7f9fc;
}

.trp-container {
    width: min(1220px, calc(100% - 32px));
    margin: 0 auto;
}

.trp-main-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 286px;
    align-items: start;
    gap: 24px;
}

.trp-content-area {
    min-width: 0;
}

.trp-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--trp-muted);
    font-size: 13px;
}

.trp-breadcrumbs a {
    color: var(--trp-accent);
    text-decoration: none;
}

/* ===== Общие элементы ===== */

.trp-btn {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 20px;
    color: var(--trp-text);
    background: #fff;
    border: 1px solid var(--trp-line);
    border-radius: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: .2s ease;
}

.trp-btn:hover {
    border-color: #b7c2d6;
    transform: translateY(-1px);
}

.trp-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--trp-accent), #596fff);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(56, 87, 255, .22);
}

.trp-btn-primary:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--trp-accent-dark), var(--trp-accent));
    box-shadow: 0 16px 30px rgba(56, 87, 255, .3);
}

.trp-kicker,
.trp-brand {
    color: var(--trp-accent);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.trp-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px;
}

.trp-heading h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.trp-heading p {
    margin: 4px 0 0;
    color: var(--trp-muted);
    font-size: 13px;
}

.trp-heading--icon {
    justify-content: flex-start;
}

.trp-section-symbol {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--trp-accent);
    background: var(--trp-accent-soft);
    border: 1px solid #d9dfff;
    border-radius: 13px;
    font-size: 20px;
    font-weight: 900;
}

.trp-block {
    padding: 24px;
    margin-top: 22px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--trp-line);
    border-radius: var(--trp-radius);
    box-shadow: 0 10px 30px rgba(24, 34, 68, .045);
}

.trp-anchor {
    position: relative;
    top: -95px;
}

/* ===== Hero страницы смартфона ===== */

.trp-phone-head {
    display: grid;
    grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
    gap: 38px;
    padding: 32px;
    margin-bottom: 20px;
    overflow: hidden;
    background:
        linear-gradient(140deg, rgba(255,255,255,.98), rgba(239,243,255,.98));
    border: 1px solid #dce3f1;
    border-radius: 28px;
    box-shadow: var(--trp-shadow);
}

.trp-phone-head--premium {
    position: relative;
}

.trp-phone-head--premium::after {
    position: absolute;
    right: -150px;
    bottom: -180px;
    width: 430px;
    height: 430px;
    content: "";
    background: radial-gradient(circle, rgba(56,87,255,.13), transparent 67%);
    pointer-events: none;
}

.trp-phone-visual {
    position: relative;
    display: flex;
    min-height: 460px;
    align-items: center;
    justify-content: center;
}

.trp-phone-glow {
    position: absolute;
    width: 76%;
    height: 76%;
    background:
        radial-gradient(circle, rgba(84, 105, 255, .23), transparent 66%);
    filter: blur(6px);
}

.trp-phone-image {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 430px;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 22px;
}

.trp-phone-image img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    filter: drop-shadow(0 22px 24px rgba(18, 28, 54, .17));
    transition: transform .3s ease;
}

.trp-phone-head:hover .trp-phone-image img {
    transform: translateY(-4px);
}

.trp-score-orbit {
    position: absolute;
    z-index: 3;
    right: 4px;
    bottom: 15px;
    display: grid;
    width: 92px;
    height: 92px;
    place-content: center;
    color: #fff;
    background:
        linear-gradient(145deg, #223fd7, #6b7cff);
    border: 5px solid rgba(255,255,255,.9);
    border-radius: 50%;
    box-shadow: 0 14px 30px rgba(56,87,255,.28);
    text-align: center;
}

.trp-score-orbit strong {
    font-size: 30px;
    line-height: 1;
}

.trp-score-orbit small {
    margin-top: 4px;
    font-size: 10px;
    opacity: .85;
}

.trp-phone-info {
    position: relative;
    z-index: 2;
    align-self: center;
}

.trp-phone-head h1 {
    margin: 6px 0 12px;
    font-size: clamp(34px, 4.6vw, 58px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.trp-lead {
    max-width: 700px;
    margin: 0;
    color: var(--trp-muted);
    font-size: 16px;
    line-height: 1.7;
}

.trp-verdict-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}

.trp-verdict-line strong {
    font-size: 14px;
}

.trp-verdict-badge {
    padding: 6px 10px;
    color: var(--trp-accent-dark);
    background: var(--trp-accent-soft);
    border: 1px solid #d8defe;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.trp-variant {
    max-width: 320px;
    margin: 22px 0 18px;
}

.trp-variant label,
.trp-filter label,
.trp-picker label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 850;
}

.trp-variant select,
.trp-filter input,
.trp-filter select,
.trp-picker input,
.trp-picker select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    color: var(--trp-text);
    background: #fff;
    border: 1px solid #cdd6e5;
    border-radius: 13px;
    outline: none;
}

.trp-variant select:focus,
.trp-filter input:focus,
.trp-filter select:focus,
.trp-picker input:focus,
.trp-picker select:focus {
    border-color: #8090ff;
    box-shadow: 0 0 0 4px rgba(56,87,255,.1);
}

.trp-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.trp-summary-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 13px;
    background: rgba(255,255,255,.75);
    border: 1px solid #dde4f0;
    border-radius: 14px;
}

.trp-summary-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--trp-accent);
    background: var(--trp-accent-soft);
    border-radius: 11px;
    font-weight: 900;
}

.trp-summary-card > span:last-child {
    min-width: 0;
}

.trp-summary small {
    display: block;
    margin-bottom: 3px;
    color: var(--trp-muted);
    font-size: 11px;
}

.trp-summary strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.35;
}

.trp-phone-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ===== Навигация страницы ===== */

.trp-page-nav {
    position: sticky;
    top: 72px;
    z-index: 20;
    display: flex;
    gap: 7px;
    margin-bottom: 20px;
    padding: 9px;
    overflow-x: auto;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--trp-line);
    border-radius: 15px;
    box-shadow: 0 10px 28px rgba(24,34,68,.07);
    backdrop-filter: blur(16px);
    scrollbar-width: none;
}

.trp-page-nav::-webkit-scrollbar {
    display: none;
}

.trp-page-nav a {
    flex: 0 0 auto;
    padding: 8px 11px;
    color: #42516a;
    background: #f5f7fb;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.trp-page-nav a:hover {
    color: #fff;
    background: var(--trp-accent);
}

/* ===== Рейтинги ===== */

.trp-ratings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.trp-rating-card {
    padding: 15px;
    background: linear-gradient(145deg, #fbfcff, #f4f6ff);
    border: 1px solid #e0e5f2;
    border-radius: 15px;
}

.trp-rating-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.trp-rating-top span {
    font-size: 13px;
    font-weight: 800;
}

.trp-rating-top strong {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    background: var(--trp-accent);
    border-radius: 11px;
    font-size: 15px;
}

.trp-progress {
    height: 9px;
    overflow: hidden;
    background: #e4e8f2;
    border-radius: 999px;
}

.trp-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #3857ff, #7e8cff);
    border-radius: inherit;
    box-shadow: 0 0 14px rgba(56,87,255,.25);
}

/* ===== Сильные стороны ===== */

.trp-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 22px;
}

.trp-pros,
.trp-cons {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--trp-line);
    border-radius: var(--trp-radius);
    box-shadow: 0 10px 28px rgba(24,34,68,.045);
}

.trp-pros {
    background: linear-gradient(145deg, #fff, var(--trp-good-soft));
}

.trp-cons {
    background: linear-gradient(145deg, #fff, var(--trp-bad-soft));
}

.trp-pros h2,
.trp-cons h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    font-size: 21px;
}

.trp-pros h2 {
    color: var(--trp-good);
}

.trp-cons h2 {
    color: var(--trp-bad);
}

.trp-pros h2 span,
.trp-cons h2 span {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
}

.trp-pros h2 span {
    background: var(--trp-good);
}

.trp-cons h2 span {
    background: var(--trp-bad);
}

.trp-pros ul,
.trp-cons ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trp-pros li,
.trp-cons li {
    position: relative;
    padding: 9px 0 9px 28px;
    border-bottom: 1px solid rgba(100,110,130,.12);
    line-height: 1.5;
}

.trp-pros li:last-child,
.trp-cons li:last-child {
    border-bottom: 0;
}

.trp-pros li::before,
.trp-cons li::before {
    position: absolute;
    top: 9px;
    left: 0;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

.trp-pros li::before {
    content: "+";
    background: var(--trp-good);
}

.trp-cons li::before {
    content: "−";
    background: var(--trp-bad);
}

/* ===== Характеристики ===== */

.trp-specs {
    overflow: hidden;
    border-top: 1px solid var(--trp-line);
}

.trp-spec-row {
    display: grid;
    grid-template-columns: minmax(180px, 42%) 1fr;
    gap: 20px;
    padding: 13px 6px;
    border-bottom: 1px solid var(--trp-line);
    transition: background .15s ease;
}

.trp-spec-row:hover {
    background: #f8faff;
}

.trp-spec-row > div:first-child {
    color: var(--trp-muted);
}

.trp-spec-row > div:last-child {
    font-weight: 700;
}

/* ===== Камеры и бенчмарки ===== */

.trp-camera-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.trp-camera {
    padding: 20px;
    background: linear-gradient(145deg, #f8faff, #fff);
    border: 1px solid #e0e6f1;
    border-radius: 17px;
}

.trp-camera h3 {
    margin: 0 0 10px;
}

.trp-camera-mp {
    margin-bottom: 15px;
    color: var(--trp-accent);
    font-size: 28px;
    font-weight: 950;
}

.trp-benchmarks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.trp-benchmarks > div {
    display: grid;
    gap: 5px;
    padding: 17px;
    background: linear-gradient(145deg, #f8faff, #fff);
    border: 1px solid #e0e6f1;
    border-radius: 15px;
}

.trp-benchmarks small {
    color: var(--trp-muted);
}

.trp-benchmarks span {
    font-size: 13px;
}

.trp-benchmarks strong {
    color: var(--trp-accent-dark);
    font-size: 19px;
}

/* ===== Каталог ===== */

.trp-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #fff 0%, #eef1ff 100%);
    border: 1px solid var(--trp-line);
    border-radius: 24px;
    box-shadow: var(--trp-shadow);
}

.trp-hero h1 {
    margin: 4px 0 10px;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.05;
}

.trp-hero p {
    margin: 0;
    color: var(--trp-muted);
    font-size: 16px;
    line-height: 1.65;
}

.trp-filter,
.trp-compare-form {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr) auto;
    gap: 14px;
    align-items: end;
    padding: 20px;
    margin-bottom: 26px;
    background: #fff;
    border: 1px solid var(--trp-line);
    border-radius: var(--trp-radius);
    box-shadow: 0 10px 28px rgba(24,34,68,.045);
}

.trp-compare-form {
    grid-template-columns: 1fr 1fr auto;
}

.trp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.trp-card {
    overflow: hidden;
    background: var(--trp-card);
    border: 1px solid var(--trp-line);
    border-radius: var(--trp-radius);
    box-shadow: 0 10px 30px rgba(24,34,68,.05);
    transition: .2s ease;
}

.trp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--trp-shadow-hover);
}

.trp-card-image {
    display: flex;
    height: 220px;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: linear-gradient(180deg, #f9faff 0%, #f0f2f8 100%);
}

.trp-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.trp-card-body {
    padding: 18px;
}

.trp-card h3 {
    min-height: 48px;
    margin: 6px 0 12px;
    font-size: 18px;
    line-height: 1.35;
}

.trp-card h3 a {
    color: var(--trp-text);
    text-decoration: none;
}

.trp-facts {
    display: grid;
    min-height: 72px;
    gap: 7px;
    color: var(--trp-muted);
    font-size: 13px;
}

.trp-facts span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.trp-score {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--trp-accent), #6f80ff);
    border-radius: 50%;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(56,87,255,.22);
}

.trp-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
}

.trp-pagination a {
    display: grid;
    min-width: 42px;
    height: 42px;
    place-items: center;
    padding: 0 10px;
    color: var(--trp-text);
    background: #fff;
    border: 1px solid var(--trp-line);
    border-radius: 11px;
    text-decoration: none;
}

.trp-pagination a.active {
    color: #fff;
    background: var(--trp-accent);
    border-color: var(--trp-accent);
}

.trp-empty {
    padding: 34px;
    color: var(--trp-muted);
    background: #fff;
    border: 1px dashed #cfd5e3;
    border-radius: var(--trp-radius);
    text-align: center;
}

/* ===== Поиск ===== */

.trp-search-wrap {
    position: relative;
}

.trp-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 50;
    max-height: 380px;
    padding: 6px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--trp-line);
    border-radius: 13px;
    box-shadow: var(--trp-shadow);
}

.trp-search-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
}

.trp-search-item:hover {
    background: var(--trp-soft);
}

.trp-search-item img {
    width: 42px;
    height: 52px;
    object-fit: contain;
}

.trp-search-item span {
    display: grid;
    min-width: 0;
}

.trp-search-item small {
    overflow: hidden;
    color: var(--trp-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trp-search-empty {
    padding: 14px;
    color: var(--trp-muted);
    text-align: center;
}

/* ===== Сравнение ===== */

.trp-differences {
    display: flex;
    justify-content: flex-end;
    margin: 16px 0;
}

.trp-switch {
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--trp-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
}

.trp-switch input {
    accent-color: var(--trp-accent);
}

.trp-compare-head {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.trp-compare-head article {
    position: relative;
    padding: 24px;
    background:
        linear-gradient(145deg, #fff, #f2f5ff);
    border: 1px solid var(--trp-line);
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(24,34,68,.06);
    text-align: center;
}

.trp-compare-head img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    filter: drop-shadow(0 14px 18px rgba(20,30,55,.14));
}

.trp-compare-side {
    display: inline-flex;
    margin-bottom: 6px;
    padding: 5px 9px;
    color: var(--trp-muted);
    background: #f2f4f8;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.trp-compare-phone-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.trp-compare-phone-link:hover h2 {
    color: var(--trp-accent);
}

.trp-compare-head h2 {
    margin: 12px 0;
    font-size: 20px;
    line-height: 1.25;
}

.trp-compare-score {
    display: inline-grid;
    min-width: 84px;
    padding: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--trp-accent-dark), #6678ff);
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(56,87,255,.22);
}

.trp-compare-score strong {
    font-size: 25px;
    line-height: 1;
}

.trp-compare-score small {
    margin-top: 4px;
    font-size: 9px;
    opacity: .85;
}

.trp-vs-badge {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #fff;
    background: #182238;
    border: 5px solid #f7f9fc;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(20,30,50,.18);
    font-size: 12px;
    font-weight: 950;
    transform: translate(-50%, -50%);
}

.trp-compare-verdict {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    margin-bottom: 18px;
    background:
        linear-gradient(135deg, #17233c, #294f72);
    color: #fff;
    border-radius: 20px;
    box-shadow: 0 16px 34px rgba(20,40,70,.15);
}

.trp-verdict-icon {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    place-items: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 17px;
    font-size: 26px;
}

.trp-compare-verdict small {
    color: #cbd8e7;
    font-weight: 750;
}

.trp-compare-verdict h2 {
    margin: 3px 0 4px;
    font-size: 22px;
}

.trp-compare-verdict p {
    margin: 0;
    color: #d8e3ef;
    font-size: 13px;
    line-height: 1.55;
}

.trp-compare-table {
    overflow: hidden;
    border: 1px solid var(--trp-line);
    border-radius: 15px;
}

.trp-compare-row {
    display: grid;
    grid-template-columns: minmax(180px, 36%) 1fr 1fr;
    border-bottom: 1px solid var(--trp-line);
}

.trp-compare-row:last-child {
    border-bottom: 0;
}

.trp-compare-row > div {
    padding: 13px;
}

.trp-compare-row > div:first-child {
    color: var(--trp-muted);
}

.trp-compare-row > div + div {
    border-left: 1px solid #edf0f5;
    font-weight: 700;
}

.trp-compare-row.is-different {
    background: linear-gradient(90deg, rgba(56,87,255,.04), rgba(255,255,255,0));
}

.trp-compare-row.is-different > div:first-child::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    content: "";
    background: var(--trp-accent);
    border-radius: 50%;
    vertical-align: middle;
}

.trp-compare-header {
    position: sticky;
    top: 72px;
    z-index: 2;
    color: #fff;
    background: #17233c;
    font-weight: 850;
}

.trp-compare-header > div:first-child {
    color: #dce5f1;
}

/* ===== Карточки перелинковки ===== */

.trp-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.trp-mini-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--trp-text);
    background: linear-gradient(145deg, #f8faff, #fff);
    border: 1px solid var(--trp-line);
    border-radius: 14px;
    text-decoration: none;
    transition: .18s ease;
}

.trp-mini-card:hover {
    border-color: #9ec5df;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(24,34,68,.07);
}

.trp-mini-card img {
    width: 58px;
    height: 72px;
    flex: 0 0 auto;
    object-fit: contain;
}

.trp-mini-card span {
    display: grid;
    min-width: 0;
}

.trp-mini-card strong {
    font-size: 14px;
    line-height: 1.35;
}

.trp-mini-card small {
    margin-top: 4px;
    overflow: hidden;
    color: var(--trp-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trp-comparison-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.trp-comparison-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: var(--trp-text);
    background: linear-gradient(145deg, #f8fafc, #fff);
    border: 1px solid var(--trp-line);
    border-radius: 14px;
    text-decoration: none;
}

.trp-comparison-card span {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.trp-comparison-card span:last-child {
    text-align: right;
}

.trp-comparison-card b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #fff;
    background: var(--trp-accent);
    border-radius: 50%;
    font-size: 11px;
}

/* ===== Sidebar ===== */

.trp-sidebar,
.trp-main-wrap #sidebar {
    position: static !important;
    top: auto !important;
    width: 286px;
    align-self: start;
}

.trp-sidebar .widget {
    margin-bottom: 16px;
    padding: 18px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--trp-line);
    border-radius: 17px;
    box-shadow: 0 10px 26px rgba(15,40,65,.06);
}

.trp-sidebar .widget h3 {
    margin: 0 0 12px;
    padding-bottom: 10px;
    color: #153a59;
    border-bottom: 1px solid #e5edf5;
    font-size: 16px;
    font-weight: 900;
}

.trp-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trp-sidebar li {
    padding: 5px 0;
}

.trp-sidebar a {
    display: block;
    padding: 6px 8px;
    color: #334e68;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.trp-sidebar a:hover {
    color: #0f5b89;
    background: #eef7fd;
}

/* ===== Адаптив ===== */

@media (max-width: 1024px) {
    .trp-main-wrap {
        grid-template-columns: 1fr;
    }

    .trp-sidebar,
    .trp-main-wrap #sidebar {
        width: 100%;
    }
}

@media (max-width: 980px) {
    .trp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .trp-benchmarks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .trp-page {
        padding-top: 16px;
    }

    .trp-container {
        width: min(100% - 20px, 1220px);
    }

    .trp-phone-head,
    .trp-hero,
    .trp-filter,
    .trp-compare-form {
        grid-template-columns: 1fr;
    }

    .trp-phone-head {
        gap: 18px;
        padding: 20px;
        border-radius: 22px;
    }

    .trp-phone-visual {
        min-height: 350px;
    }

    .trp-phone-image {
        min-height: 340px;
    }

    .trp-phone-image img {
        max-height: 320px;
    }

    .trp-phone-head h1 {
        font-size: 35px;
    }

    .trp-page-nav {
        top: 66px;
    }

    .trp-summary,
    .trp-ratings,
    .trp-pros-cons,
    .trp-camera-grid,
    .trp-benchmarks {
        grid-template-columns: 1fr;
    }

    .trp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .trp-card-image {
        height: 180px;
    }

    .trp-compare-row {
        grid-template-columns: 35% 32.5% 32.5%;
        font-size: 12px;
    }

    .trp-compare-row > div {
        padding: 10px 7px;
        overflow-wrap: anywhere;
    }

    .trp-compare-head img {
        height: 190px;
    }

    .trp-vs-badge {
        width: 46px;
        height: 46px;
    }

    .trp-compare-verdict {
        align-items: flex-start;
    }
}

@media (max-width: 700px) {
    .trp-mini-grid,
    .trp-comparison-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .trp-block {
        padding: 17px;
        border-radius: 17px;
    }

    .trp-phone-actions .trp-btn {
        width: 100%;
    }

    .trp-score-orbit {
        right: -4px;
        bottom: 6px;
        width: 80px;
        height: 80px;
    }

    .trp-score-orbit strong {
        font-size: 26px;
    }

    .trp-compare-head {
        gap: 8px;
    }

    .trp-compare-head article {
        padding: 12px 9px;
    }

    .trp-compare-head h2 {
        font-size: 15px;
    }

    .trp-compare-head img {
        height: 145px;
    }

    .trp-compare-score {
        min-width: 68px;
    }

    .trp-vs-badge {
        top: 42%;
        width: 40px;
        height: 40px;
        border-width: 4px;
        font-size: 10px;
    }

    .trp-compare-verdict {
        gap: 12px;
        padding: 17px;
    }

    .trp-verdict-icon {
        width: 46px;
        height: 46px;
        font-size: 21px;
    }

    .trp-compare-verdict h2 {
        font-size: 18px;
    }

    .trp-spec-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .trp-grid {
        grid-template-columns: 1fr;
    }

    .trp-card-image {
        height: 230px;
    }
}


/* ======================================================
   TECHRANK SMARTPHONES UI v4 — VISUAL DETAILS
====================================================== */

.trp-visual-overview {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 18px;
    margin: 0 0 22px;
}

.trp-overview-score,
.trp-overview-best {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px;
    background:
        linear-gradient(145deg, #ffffff, #f1f4ff);
    border: 1px solid var(--trp-line);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(24,34,68,.055);
}

.trp-score-ring {
    --trp-score: 0;
    position: relative;
    display: grid;
    width: 112px;
    height: 112px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--trp-accent) calc(var(--trp-score) * 1%),
            #e4e8f2 0
        );
}

.trp-score-ring::before {
    position: absolute;
    inset: 10px;
    content: "";
    background: #fff;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px #edf0f5;
}

.trp-score-ring span {
    position: relative;
    z-index: 1;
    display: grid;
    text-align: center;
}

.trp-score-ring strong {
    font-size: 32px;
    line-height: 1;
}

.trp-score-ring small {
    margin-top: 5px;
    color: var(--trp-muted);
    font-size: 10px;
    font-weight: 800;
}

.trp-overview-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--trp-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.trp-overview-score h2 {
    margin: 0 0 6px;
    font-size: 24px;
}

.trp-overview-score p {
    margin: 0;
    color: var(--trp-muted);
    font-size: 13px;
    line-height: 1.55;
}

.trp-overview-best {
    align-items: flex-start;
    flex-direction: column;
}

.trp-best-tags {
    display: grid;
    width: 100%;
    gap: 9px;
}

.trp-best-tags > span {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 10px;
    background: rgba(255,255,255,.82);
    border: 1px solid #e2e7f1;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.trp-best-tags b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--trp-accent);
    background: var(--trp-accent-soft);
    border-radius: 10px;
}

.trp-best-tags strong {
    color: var(--trp-accent-dark);
    font-size: 15px;
}

.trp-rating-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 13px;
}

.trp-rating-card__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: var(--trp-accent);
    background: #fff;
    border: 1px solid #dfe5f1;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(24,34,68,.05);
    font-size: 21px;
    font-weight: 900;
}

.trp-rating-card__body {
    min-width: 0;
}

.trp-rating-caption {
    display: block;
    margin-top: 8px;
    color: var(--trp-muted);
    font-size: 11px;
}

.trp-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin-top: 22px;
}

.trp-stat-strip article {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 15px;
    background:
        linear-gradient(145deg, #fff, #f5f7ff);
    border: 1px solid var(--trp-line);
    border-radius: 16px;
}

.trp-stat-strip article > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    color: #fff;
    background:
        linear-gradient(145deg, var(--trp-accent), #7484ff);
    border-radius: 12px;
    font-size: 18px;
    font-weight: 900;
}

.trp-stat-strip small {
    display: block;
    margin-bottom: 3px;
    color: var(--trp-muted);
    font-size: 10px;
}

.trp-stat-strip strong {
    display: block;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
}

/* ===== Quick navigation in comparison ===== */

.trp-compare-quick-nav {
    position: sticky;
    top: 70px;
    z-index: 25;
    display: flex;
    gap: 7px;
    margin: 0 0 18px;
    padding: 9px;
    overflow-x: auto;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--trp-line);
    border-radius: 15px;
    box-shadow: 0 10px 28px rgba(24,34,68,.08);
    backdrop-filter: blur(15px);
    scrollbar-width: none;
}

.trp-compare-quick-nav::-webkit-scrollbar {
    display: none;
}

.trp-compare-quick-nav a {
    flex: 0 0 auto;
    padding: 8px 11px;
    color: #42516a;
    background: #f4f6fa;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.trp-compare-quick-nav a:hover {
    color: #fff;
    background: var(--trp-accent);
}

/* ===== Visual rating comparison ===== */

.trp-compare-dashboard {
    padding: 24px;
    margin: 0 0 20px;
    background:
        linear-gradient(145deg, #fff, #f2f5ff);
    border: 1px solid var(--trp-line);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(24,34,68,.055);
}

.trp-score-duels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.trp-score-duel {
    padding: 16px;
    background: #fff;
    border: 1px solid #e1e6ef;
    border-radius: 15px;
}

.trp-score-duel__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.trp-score-duel__title span {
    font-weight: 900;
}

.trp-score-duel__title b {
    color: var(--trp-accent);
    font-size: 10px;
    text-align: right;
}

.trp-duel-line {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 8px;
}

.trp-duel-line > strong {
    font-size: 16px;
    text-align: center;
}

.trp-duel-bars {
    display: grid;
    gap: 6px;
}

.trp-duel-bar {
    display: block;
    width: var(--trp-width);
    height: 9px;
    border-radius: 999px;
}

.trp-duel-bar--left {
    justify-self: end;
    background:
        linear-gradient(90deg, #7d8dff, var(--trp-accent));
}

.trp-duel-bar--right {
    background:
        linear-gradient(90deg, #17a673, #63d5a8);
}

.trp-duel-names {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
    color: var(--trp-muted);
    font-size: 10px;
}

.trp-duel-names span {
    width: 48%;
}

.trp-duel-names span:last-child {
    text-align: right;
}

.trp-compare-section {
    scroll-margin-top: 145px;
}

#compare-top,
#compare-verdict,
#compare-ratings {
    scroll-margin-top: 145px;
}

@media (max-width: 900px) {
    .trp-visual-overview {
        grid-template-columns: 1fr;
    }

    .trp-stat-strip {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .trp-score-duels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .trp-overview-score {
        align-items: flex-start;
        flex-direction: column;
    }

    .trp-score-ring {
        width: 96px;
        height: 96px;
    }

    .trp-stat-strip {
        grid-template-columns: 1fr;
    }

    .trp-compare-quick-nav {
        top: 64px;
    }

    .trp-score-duel__title {
        flex-direction: column;
    }

    .trp-score-duel__title b {
        text-align: left;
    }
}


/* ======================================================
   TECHRANK v4.1 — КОМПАКТНАЯ НАВИГАЦИЯ
====================================================== */

/*
 * Навигация на странице смартфона и сравнения
 * располагается только в обычном потоке страницы.
 */
.trp-page-nav,
.trp-compare-quick-nav {
    position: static !important;
    top: auto !important;
    z-index: auto;
    width: 100%;
    margin: 0 0 18px;
    padding: 7px;
    overflow: visible;
    background: #ffffff;
    border: 1px solid var(--trp-line);
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(24, 34, 68, .055);
    backdrop-filter: none;
}

/*
 * На странице смартфона ссылки могут переноситься
 * на следующую строку, но остаются компактными.
 */
.trp-page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/*
 * В сравнении оставляем всего четыре основных перехода.
 */
.trp-compare-quick-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.trp-page-nav a,
.trp-compare-quick-nav a {
    display: inline-flex;
    min-width: 0;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    overflow: hidden;
    color: #42516a;
    background: #f4f6fa;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trp-page-nav a:hover,
.trp-compare-quick-nav a:hover {
    color: var(--trp-accent);
    background: var(--trp-accent-soft);
    border-color: #d8dfff;
}

/*
 * Заголовки таблиц тоже больше не прилипают.
 */
.trp-compare-header {
    position: static !important;
    top: auto !important;
}

/*
 * При переходе по якорям оставляем небольшой отступ.
 */
.trp-compare-section,
#compare-top,
#compare-verdict,
#compare-ratings,
#compare-characteristics {
    scroll-margin-top: 20px;
}

@media (max-width: 700px) {
    .trp-compare-quick-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trp-page-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trp-page-nav a,
    .trp-compare-quick-nav a {
        width: 100%;
        min-height: 36px;
        white-space: normal;
    }
}

@media (max-width: 380px) {
    .trp-page-nav,
    .trp-compare-quick-nav {
        grid-template-columns: 1fr;
    }
}


/* ======================================================
   TECHRANK v4.2 — MOBILE OVERFLOW FIX
   Исправление выезда кнопок, заголовков и таблиц
====================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.trp-page,
.trp-container,
.trp-main-wrap,
.trp-content-area,
.trp-hero,
.trp-block,
.trp-phone-head,
.trp-compare-form,
.trp-filter {
    min-width: 0;
    max-width: 100%;
}

.trp-page img {
    max-width: 100%;
}

/* Все длинные заголовки и значения могут переноситься */
.trp-page h1,
.trp-page h2,
.trp-page h3,
.trp-heading,
.trp-heading > div,
.trp-heading h2,
.trp-compare-row > div,
.trp-summary strong {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Блоки не выпускают содержимое за свои границы */
.trp-hero,
.trp-block,
.trp-phone-head,
.trp-filter,
.trp-compare-form,
.trp-compare-dashboard,
.trp-visual-overview,
.trp-pros,
.trp-cons {
    overflow: hidden;
}

/* Кнопки и элементы формы никогда не шире родителя */
.trp-btn,
.trp-filter input,
.trp-filter select,
.trp-picker input,
.trp-picker select,
.trp-variant select {
    max-width: 100%;
}

/* Таблица сравнения прокручивается внутри блока при необходимости */
.trp-compare-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {

    /*
     * Hero каталога раньше оставался flex-контейнером,
     * поэтому кнопка выезжала вправо.
     */
    .trp-hero {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 18px;
        padding: 22px 20px;
    }

    .trp-hero > * {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .trp-hero .trp-btn,
    .trp-hero a.trp-btn {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .trp-hero h1 {
        font-size: clamp(34px, 11vw, 48px);
        line-height: 1.03;
    }

    .trp-hero p {
        font-size: 17px;
        line-height: 1.55;
    }

    /* Фильтр каталога */
    .trp-filter,
    .trp-compare-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
        padding: 20px;
    }

    .trp-filter > *,
    .trp-compare-form > *,
    .trp-picker,
    .trp-search-wrap {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .trp-filter .trp-btn,
    .trp-compare-form .trp-btn {
        width: 100%;
    }

    /*
     * Заголовки разделов сравнения:
     * иконка слева, текст занимает оставшееся место.
     */
    .trp-heading--icon {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        width: 100%;
    }

    .trp-heading--icon > div {
        width: 100%;
        min-width: 0;
    }

    .trp-heading h2,
    .trp-heading--icon h2 {
        max-width: 100%;
        margin: 0;
        font-size: clamp(22px, 7.2vw, 30px) !important;
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    .trp-heading p,
    .trp-heading--icon p {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.45;
    }

    .trp-section-symbol {
        width: 44px;
        height: 44px;
    }

    /*
     * На узком экране таблица остаётся читаемой,
     * но не растягивает всю страницу.
     */
    .trp-compare-row {
        min-width: 600px;
        grid-template-columns: 190px 205px 205px;
        font-size: 13px;
    }

    .trp-compare-row > div {
        padding: 12px 11px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .trp-compare-header {
        font-size: 12px;
    }

    .trp-compare-section {
        padding: 18px 14px;
    }

    .trp-compare-section .trp-heading {
        padding: 0 4px;
    }
}

@media (max-width: 520px) {

    .trp-container {
        width: calc(100% - 18px);
    }

    .trp-hero {
        padding: 20px 16px;
        border-radius: 20px;
    }

    .trp-hero h1 {
        font-size: clamp(32px, 10.5vw, 42px);
    }

    .trp-filter,
    .trp-compare-form {
        padding: 17px 15px;
        border-radius: 17px;
    }

    .trp-heading--icon {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
    }

    .trp-section-symbol {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .trp-heading h2,
    .trp-heading--icon h2 {
        font-size: clamp(21px, 7vw, 27px) !important;
    }

    .trp-block {
        padding: 16px 12px;
    }

    .trp-compare-section {
        padding: 16px 10px;
    }

    .trp-compare-row {
        min-width: 570px;
        grid-template-columns: 180px 195px 195px;
    }
}


/* ======================================================
   TECHRANK v4.3 — COMPACT MOBILE DESIGN
====================================================== */

@media (max-width: 760px) {

    .trp-page {
        padding: 12px 0 48px !important;
    }

    .trp-container {
        width: calc(100% - 16px) !important;
    }

    /*
     * Каталог смартфонов:
     * кнопка располагается внутри Hero, без выезда вправо.
     */
    .trp-hero {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 20px 18px !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    .trp-hero > div,
    .trp-hero > a,
    .trp-hero .trp-btn {
        position: static !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }

    .trp-hero h1 {
        margin: 5px 0 10px !important;
        font-size: 38px !important;
        line-height: 1.05 !important;
    }

    .trp-hero p {
        max-width: none !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .trp-hero .trp-btn {
        min-height: 44px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        white-space: normal !important;
    }

    .trp-filter {
        gap: 15px !important;
        padding: 18px 16px !important;
        margin-bottom: 22px !important;
    }

    /*
     * Карточка смартфона становится заметно компактнее.
     */
    .trp-phone-head {
        gap: 16px !important;
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .trp-phone-visual {
        min-height: 280px !important;
    }

    .trp-phone-image {
        min-height: 270px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .trp-phone-image img {
        max-height: 255px !important;
    }

    .trp-score-orbit {
        right: 2px !important;
        bottom: 2px !important;
        width: 68px !important;
        height: 68px !important;
        border-width: 4px !important;
    }

    .trp-score-orbit strong {
        font-size: 23px !important;
    }

    .trp-score-orbit small {
        font-size: 9px !important;
    }

    .trp-phone-head h1 {
        margin: 5px 0 10px !important;
        font-size: 34px !important;
        line-height: 1.03 !important;
    }

    .trp-lead {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .trp-verdict-line {
        gap: 7px !important;
        margin-bottom: 12px !important;
    }

    .trp-variant {
        max-width: 100% !important;
        margin: 16px 0 !important;
    }

    .trp-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 16px 0 !important;
    }

    .trp-summary-card {
        gap: 8px !important;
        padding: 10px !important;
    }

    .trp-summary-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .trp-summary strong {
        font-size: 12px !important;
    }

    .trp-phone-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /*
     * Навигация занимает мало места и не приклеивается.
     */
    .trp-page-nav,
    .trp-compare-quick-nav {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 6px !important;
        margin-bottom: 14px !important;
    }

    .trp-page-nav a,
    .trp-compare-quick-nav a {
        min-height: 32px !important;
        padding: 6px 7px !important;
        font-size: 10px !important;
        white-space: normal !important;
    }

    /*
     * Общая оценка без огромных пустых областей.
     */
    .trp-visual-overview {
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .trp-overview-score,
    .trp-overview-best {
        gap: 14px !important;
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .trp-score-ring {
        width: 86px !important;
        height: 86px !important;
    }

    .trp-score-ring strong {
        font-size: 25px !important;
    }

    .trp-overview-score h2 {
        font-size: 20px !important;
    }

    .trp-best-tags > span {
        grid-template-columns: 30px 1fr auto !important;
        padding: 8px !important;
        font-size: 12px !important;
    }

    .trp-best-tags b {
        width: 30px !important;
        height: 30px !important;
    }

    /*
     * Разделы характеристик.
     */
    .trp-block {
        padding: 16px 14px !important;
        margin-top: 16px !important;
        border-radius: 16px !important;
    }

    .trp-heading {
        margin-bottom: 14px !important;
    }

    .trp-heading--icon {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .trp-section-symbol {
        width: 38px !important;
        height: 38px !important;
        font-size: 17px !important;
    }

    .trp-heading h2,
    .trp-heading--icon h2 {
        font-size: 24px !important;
        line-height: 1.08 !important;
    }

    .trp-heading p {
        margin-top: 3px !important;
        font-size: 12px !important;
    }

    .trp-spec-row {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        padding: 11px 4px !important;
    }

    .trp-spec-row > div:first-child {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    .trp-spec-row > div:last-child {
        font-size: 16px !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
    }

    /*
     * Камеры: число Мп больше не раздувает карточку.
     */
    .trp-camera-grid {
        gap: 12px !important;
    }

    .trp-camera {
        padding: 16px 14px !important;
        border-radius: 15px !important;
    }

    .trp-camera h3 {
        font-size: 21px !important;
    }

    .trp-camera-mp {
        margin-bottom: 12px !important;
        font-size: 28px !important;
        line-height: 1.1 !important;
        overflow-wrap: anywhere !important;
    }

    /*
     * Рейтинги и полосы.
     */
    .trp-rating-card {
        grid-template-columns: 40px 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .trp-rating-card__icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    .trp-rating-top strong {
        width: 34px !important;
        height: 34px !important;
    }

    /*
     * Панель ключевых параметров.
     */
    .trp-stat-strip {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }

    .trp-stat-strip article {
        padding: 11px !important;
    }

    /*
     * Сравнение: таблица прокручивается только внутри карточки.
     */
    .trp-compare-section {
        padding: 14px 10px !important;
    }

    .trp-compare-table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        border-radius: 12px !important;
    }

    .trp-compare-row {
        min-width: 540px !important;
        grid-template-columns: 170px 185px 185px !important;
        font-size: 12px !important;
    }

    .trp-compare-row > div {
        padding: 10px 8px !important;
        line-height: 1.4 !important;
    }

    .trp-compare-head article {
        padding: 10px 8px !important;
    }

    .trp-compare-head img {
        height: 135px !important;
    }

    .trp-compare-head h2 {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    .trp-compare-score {
        min-width: 62px !important;
        padding: 8px !important;
    }

    .trp-compare-score strong {
        font-size: 21px !important;
    }
}

@media (max-width: 390px) {
    .trp-phone-head h1 {
        font-size: 30px !important;
    }

    .trp-summary {
        grid-template-columns: 1fr !important;
    }

    .trp-page-nav,
    .trp-compare-quick-nav {
        grid-template-columns: 1fr 1fr !important;
    }

    .trp-heading h2,
    .trp-heading--icon h2 {
        font-size: 22px !important;
    }
}


/* ======================================================
   TECHRANK v4.4 — REAL CATALOG MOBILE FIX
====================================================== */

.trp-catalog-hero {
    min-width: 0;
}

.trp-catalog-compare-btn {
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .trp-catalog-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 18px !important;
        overflow: hidden !important;
    }

    .trp-catalog-hero > div {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .trp-catalog-hero .trp-catalog-compare-btn {
        position: static !important;
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        transform: none !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
    }

    .trp-catalog-hero h1 {
        font-size: clamp(34px, 10vw, 42px) !important;
    }

    .trp-catalog-hero p {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
}


/* ======================================================
   TECHRANK COMPARE 2.0
====================================================== */

.trp-compare-verdict-v2 {
    display: grid;
    gap: 18px;
    padding: 24px;
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(91,116,255,.28), transparent 32%),
        linear-gradient(135deg, #17233c, #244b6e);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(20,40,70,.18);
}

.trp-verdict-v2__main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.trp-verdict-v2__icon {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    place-items: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 17px;
    font-size: 27px;
}

.trp-verdict-v2__content {
    min-width: 0;
}

.trp-verdict-v2__kicker {
    color: #cbd8e7;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.trp-verdict-v2__content h2 {
    margin: 5px 0;
    font-size: clamp(22px, 3vw, 31px);
    line-height: 1.14;
}

.trp-verdict-v2__content p {
    margin: 0;
    color: #d8e3ef;
    line-height: 1.55;
}

.trp-verdict-v2__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.trp-verdict-v2__summary span {
    padding: 7px 10px;
    color: #e9f1fa;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
}

.trp-verdict-v2__scores {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.trp-verdict-v2__scores article {
    display: grid;
    min-width: 0;
    padding: 16px;
    color: #dce6f2;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    text-align: center;
}

.trp-verdict-v2__scores article.is-winner {
    color: #fff;
    background: linear-gradient(145deg, rgba(56,87,255,.58), rgba(91,116,255,.30));
    border-color: rgba(139,155,255,.50);
    box-shadow: 0 12px 30px rgba(24,43,95,.28);
}

.trp-verdict-v2__scores small {
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.trp-verdict-v2__scores strong {
    margin: 7px 0 2px;
    color: #fff;
    font-size: 35px;
    line-height: 1;
}

.trp-verdict-v2__scores span {
    font-size: 10px;
    opacity: .8;
}

.trp-verdict-v2__vs {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #17233c;
    background: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 950;
}

.trp-verdict-v2__strengths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.trp-verdict-v2__strengths article {
    padding: 16px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
}

.trp-verdict-v2__strengths h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
}

.trp-verdict-v2__strengths ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trp-verdict-v2__strengths li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 8px 9px;
    color: #e3edf7;
    background: rgba(255,255,255,.06);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.trp-verdict-v2__strengths li::before {
    content: "✓";
    color: #66d5a4;
    font-weight: 950;
}

.trp-verdict-v2__strengths li span {
    min-width: 0;
    margin-right: auto;
}

.trp-verdict-v2__strengths li b {
    flex: 0 0 auto;
    padding: 3px 7px;
    color: #bfead7;
    background: rgba(44,184,124,.16);
    border-radius: 999px;
    font-size: 10px;
}

.trp-verdict-v2__strengths p {
    margin: 0;
    color: #cfdae6;
    font-size: 12px;
}

.trp-final-recommendation {
    padding: 24px;
    margin-top: 22px;
    background: linear-gradient(145deg, #fff, #f1f5ff);
    border: 1px solid var(--trp-line);
    border-radius: var(--trp-radius);
    box-shadow: 0 12px 30px rgba(24,34,68,.055);
}

.trp-final-recommendation__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.trp-final-recommendation__grid article {
    padding: 18px;
    background: #fff;
    border: 1px solid #e1e6ef;
    border-radius: 16px;
}

.trp-final-recommendation__grid h3 {
    margin: 0 0 13px;
    font-size: 16px;
    line-height: 1.4;
}

.trp-final-recommendation__grid ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trp-final-recommendation__grid li {
    position: relative;
    padding-left: 25px;
    line-height: 1.45;
}

.trp-final-recommendation__grid li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    content: "✓";
    color: #fff;
    background: var(--trp-good);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 950;
}

.trp-final-recommendation__grid p {
    margin: 0;
    color: var(--trp-muted);
}

.trp-final-recommendation__note {
    margin: 15px 0 0;
    padding: 12px 14px;
    color: var(--trp-muted);
    background: rgba(56,87,255,.055);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .trp-compare-verdict-v2 {
        padding: 17px;
        border-radius: 18px;
    }

    .trp-verdict-v2__main {
        gap: 12px;
    }

    .trp-verdict-v2__icon {
        width: 47px;
        height: 47px;
        border-radius: 14px;
        font-size: 22px;
    }

    .trp-verdict-v2__content h2 {
        font-size: 21px;
    }

    .trp-verdict-v2__scores {
        gap: 7px;
    }

    .trp-verdict-v2__scores article {
        padding: 12px 8px;
    }

    .trp-verdict-v2__scores strong {
        font-size: 28px;
    }

    .trp-verdict-v2__vs {
        width: 34px;
        height: 34px;
        font-size: 9px;
    }

    .trp-verdict-v2__strengths,
    .trp-final-recommendation__grid {
        grid-template-columns: 1fr;
    }

    .trp-final-recommendation {
        padding: 17px;
        border-radius: 17px;
    }
}


/* ======================================================
   TECHRANK COMPARE 2.1
   МОБИЛЬНОЕ СРАВНЕНИЕ БЕЗ ГОРИЗОНТАЛЬНОЙ ПРОКРУТКИ
====================================================== */

@media (max-width: 700px) {

    /*
     * На телефоне каждая характеристика становится
     * самостоятельной карточкой:
     *
     * Название характеристики
     * [ значение 1 ] [ значение 2 ]
     */
    .trp-compare-table {
        display: grid !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .trp-compare-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid var(--trp-line) !important;
        border-radius: 13px !important;
        box-shadow: 0 5px 16px rgba(24, 34, 68, .035);
    }

    .trp-compare-row > div {
        min-width: 0 !important;
        padding: 11px 10px !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        border: 0 !important;
    }

    /*
     * Название характеристики занимает всю ширину.
     */
    .trp-compare-row > div:first-child {
        grid-column: 1 / -1 !important;
        padding: 9px 10px !important;
        color: #526077 !important;
        background: #f4f6fa !important;
        border-bottom: 1px solid var(--trp-line) !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        line-height: 1.35 !important;
    }

    /*
     * Значения смартфонов видны одновременно,
     * по половине экрана каждое.
     */
    .trp-compare-row > div:nth-child(2),
    .trp-compare-row > div:nth-child(3) {
        font-size: 13px !important;
        font-weight: 750 !important;
        line-height: 1.4 !important;
    }

    .trp-compare-row > div:nth-child(2) {
        border-right: 1px solid var(--trp-line) !important;
    }

    /*
     * Различающиеся характеристики мягко подсвечиваются.
     */
    .trp-compare-row.is-different {
        background: #ffffff !important;
        border-color: #d6ddff !important;
    }

    .trp-compare-row.is-different > div:first-child {
        color: var(--trp-accent-dark) !important;
        background: var(--trp-accent-soft) !important;
    }

    .trp-compare-row.is-different > div:first-child::before {
        display: inline-block !important;
        width: 6px !important;
        height: 6px !important;
        margin-right: 7px !important;
        content: "" !important;
        background: var(--trp-accent) !important;
        border-radius: 50% !important;
        vertical-align: middle !important;
    }

    /*
     * Заголовок таблицы тоже помещается целиком.
     */
    .trp-compare-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        position: static !important;
        color: #ffffff !important;
        background: #17233c !important;
        border-color: #17233c !important;
    }

    .trp-compare-header > div:first-child {
        display: none !important;
    }

    .trp-compare-header > div:nth-child(2),
    .trp-compare-header > div:nth-child(3) {
        display: flex !important;
        min-height: 52px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 9px 7px !important;
        color: #ffffff !important;
        background: #17233c !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .trp-compare-header > div:nth-child(2) {
        border-right: 1px solid rgba(255, 255, 255, .14) !important;
    }

    /*
     * Внутренняя карточка раздела не создаёт
     * горизонтальный скролл.
     */
    .trp-compare-section {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

@media (max-width: 390px) {
    .trp-compare-row > div:nth-child(2),
    .trp-compare-row > div:nth-child(3) {
        padding: 10px 8px !important;
        font-size: 12px !important;
    }

    .trp-compare-header > div:nth-child(2),
    .trp-compare-header > div:nth-child(3) {
        font-size: 10px !important;
    }
}