/* Page-specific CSS. Shared Header/Mobile Menu/Footer are in Common.css. */

/* One token system for the whole page.
   --ps-* (used by the shared header/footer/sidebar widgets further down) are aliases
   of the main tokens, so light/dark switching works for every component.
   Dark mode is triggered by html[data-theme="dark"] (what the site toggle sets);
   html[data-ps-theme="dark"] is still honoured for older pages. */
:root {
    --bg: #eceff4;
    --surface: #ffffff;
    --surface-2: #f1f4f9;
    --ink: #0e1626;
    --muted: #5a677a;
    --line: #dde3ec;
    --accent: #1646f0;
    --accent-2: #1238c4;
    --accent-soft: #e7edff;
    --good: #0f9f6e;
    --good-bg: #e6f7f0;
    --warn: #d97706;
    --danger: #dc2626;
    --amazon-bg: #fff8eb;
    --amazon-ink: #8a5a00;
    --flip-bg: #eef4ff;
    --flip-ink: #1e4db7;
    --shadow: 0 1px 2px rgba(14, 22, 38, 0.05), 0 6px 20px rgba(14, 22, 38, 0.06);
    --shadow-lg: 0 16px 40px rgba(14, 22, 38, 0.12);
    --radius: 14px;
    --radius-sm: 10px;
    --ease: 0.2s ease;
    --header-h: 62px;
    --page-max: 1380px;
    --gutter: 14px;
    --font: "Instrument Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Bricolage Grotesque", "Instrument Sans", "Segoe UI", system-ui, sans-serif;
    /* aliases for the shared chrome / sidebar widgets */
    --ps-bg: var(--bg);
    --ps-surface: var(--surface);
    --ps-surface-2: var(--surface-2);
    --ps-ink: var(--ink);
    --ps-muted: var(--muted);
    --ps-line: var(--line);
    --ps-blue: var(--accent);
    --ps-blue-2: var(--accent-2);
    --ps-blue-tint: var(--accent-soft);
    --ps-green: var(--good);
    --ps-green-bg: var(--good-bg);
    --ps-orange: #e97725;
    --ps-amber: #ffc069;
    --ps-shadow: var(--shadow);
    --ps-shadow-lg: var(--shadow-lg);
    --ps-radius: var(--radius);
    --ps-r-sm: 9px;
    --ps-r-md: 12px;
    --ps-r-lg: 16px;
    --ps-ease: all .22s ease;
}

html[data-theme="dark"],
html[data-ps-theme="dark"] {
    --bg: #080d15;
    --surface: #0f1825;
    --surface-2: #152131;
    --ink: #e8eef7;
    --muted: #9aa9bc;
    --line: #233247;
    --accent: #86adff;
    --accent-2: #a9c4ff;
    --accent-soft: #152238;
    --good: #34d399;
    --good-bg: #0d2a1f;
    --warn: #fbbf24;
    --danger: #f87171;
    --amazon-bg: #2a2114;
    --amazon-ink: #e8c07a;
    --flip-bg: #152238;
    --flip-ink: #93b8ff;
    --shadow: none;
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html,
body,
form {
    margin: 0 !important;
    padding: 0 !important;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    transition: background var(--ease), color var(--ease);
}

    body.drawer-open {
        overflow: hidden;
    }

    body.tray-open {
        padding-bottom: 100px !important;
    }

a {
    color: inherit;
    text-decoration: none;
}

button, input, select {
    font: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.wrap,
.ps-wrap {
    width: min(var(--page-max), calc(100% - var(--gutter) * 2));
    margin: 0 auto;
}

/* ---- Page layout ---- */
.crumb {
    padding: 14px 0 4px;
    color: var(--muted);
    font-size: 12px;
}

    .crumb a {
        color: var(--accent);
        font-weight: 600;
    }

.toc {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    .toc::-webkit-scrollbar {
        display: none;
    }

.toc-label {
    flex: none;
    font-size: 11px;
    font-weight: 750;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-right: 4px;
    white-space: nowrap;
}

.toc a {
    flex: none;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    color: var(--muted);
    background: var(--surface);
}

    .toc a:hover {
        color: var(--accent);
        border-color: var(--accent);
    }

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 20px;
    padding-bottom: 24px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.section {
    margin-top: 16px;
    padding: 18px;
    scroll-margin-top: calc(var(--header-h) + 10px);
}

    .section h2 {
        margin: 0 0 4px;
        font-size: 19px;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .section p.lead {
        color: var(--muted);
        margin: 0 0 12px;
        font-size: 12.5px;
    }

/* ---- Hero ---- */
.hero {
    padding: 20px;
    scroll-margin-top: calc(var(--header-h) + 10px);
}

.hero-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
}

.visual {
    min-height: 360px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    position: relative;
}

    .visual img {
        width: 240px;
        height: 330px;
        object-fit: contain;
    }

.score-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    background: linear-gradient(135deg, #0f9f6e, #0d9488);
    color: #fff;
    padding: 7px 10px;
    border-radius: 9px;
    font-weight: 800;
    font-size: 11px;
    box-shadow: 0 3px 10px rgba(15, 159, 110, 0.3);
}

.copy h1 {
    font-size: 28px;
    line-height: 1.18;
    margin: 4px 0 2px;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.muted {
    color: var(--muted);
}

.byline {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 10px;
}

.tag {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 750;
}

.rating {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.stars {
    color: #f59e0b;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 14px;
}

.price {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.price-note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.variant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.vchip {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 650;
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--ease), background var(--ease), color var(--ease);
}

    .vchip:hover {
        border-color: var(--accent);
    }

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

.offers-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0;
}

.offer {
    padding: 12px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    text-align: center;
    font-weight: 750;
    cursor: pointer;
    display: block;
    font-size: 13px;
}

    .offer.amazon {
        background: var(--amazon-bg);
        color: var(--amazon-ink);
        border-color: color-mix(in srgb, var(--amazon-ink) 25%, var(--line));
    }

    .offer.flip {
        background: var(--flip-bg);
        color: var(--flip-ink);
        border-color: color-mix(in srgb, var(--flip-ink) 25%, var(--line));
    }

.compare-btn {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 14px;
}

    .meta div {
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: var(--surface-2);
    }

        .meta div:nth-child(1) {
            border-left: 3px solid var(--accent);
        }

        .meta div:nth-child(2) {
            border-left: 3px solid var(--good);
        }

        .meta div:nth-child(3) {
            border-left: 3px solid var(--warn);
        }

        .meta div:nth-child(4) {
            border-left: 3px solid #8b5cf6;
        }

    .meta small {
        display: block;
        color: var(--muted);
        font-size: 10px;
    }

    .meta b {
        font-size: 11px;
    }

/* ---- Highlights ---- */
.high {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.hi {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    border-top: 3px solid var(--accent);
}

    .hi b {
        display: block;
        font-size: 12px;
        overflow-wrap: break-word;
    }

    .hi span {
        display: block;
        color: var(--muted);
        font-size: 12px;
        overflow-wrap: break-word;
    }


/* =========================================================
   Key Highlights - fixed responsive + dark/light theme
   ========================================================= */
.high {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

    .high .hi {
        min-width: 0;
        min-height: 82px;
        padding: 12px 13px;
        border: 1px solid var(--line);
        border-top: 3px solid var(--accent);
        border-radius: 11px;
        background: var(--surface-2);
        color: var(--ink);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        overflow: hidden;
        transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
    }

        .high .hi:nth-child(2) {
            border-top-color: var(--good);
        }

        .high .hi:nth-child(3) {
            border-top-color: var(--warn);
        }

        .high .hi:nth-child(4) {
            border-top-color: #8b5cf6;
        }

        .high .hi:nth-child(5) {
            border-top-color: #ec4899;
        }

        .high .hi:nth-child(6) {
            border-top-color: #06b6d4;
        }

        .high .hi:nth-child(7) {
            border-top-color: #f97316;
        }

        .high .hi:nth-child(8) {
            border-top-color: #6366f1;
        }

        .high .hi:hover {
            border-color: var(--accent);
            background: var(--surface);
            box-shadow: var(--shadow);
        }

        .high .hi b {
            display: block;
            margin: 0;
            color: var(--ink);
            font-size: 12px;
            line-height: 1.25;
            font-weight: 800;
            overflow-wrap: anywhere;
        }

        .high .hi span {
            display: block;
            margin: 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
            font-weight: 600;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

html[data-theme="dark"] .high .hi {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
}

    html[data-theme="dark"] .high .hi:hover {
        background: var(--surface);
        border-color: var(--accent);
    }

    html[data-theme="dark"] .high .hi b {
        color: var(--ink);
    }

    html[data-theme="dark"] .high .hi span {
        color: var(--muted);
    }

@media (max-width: 1100px) {
    .high {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .high {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .high {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

        .high .hi {
            min-height: 76px;
            padding: 10px;
        }

            .high .hi b, .high .hi span {
                font-size: 11px;
            }
}


/* =========================================================
   Variants & Marketplace - dedicated responsive component
   ========================================================= */
#offers .marketplace-list {
    display: grid;
    gap: 10px;
    width: 100%;
}

#offers .offer-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--ink);
    transition: background var(--ease),border-color var(--ease),box-shadow var(--ease),transform var(--ease);
}

    #offers .offer-row:hover {
        background: var(--surface);
        border-color: var(--accent);
        box-shadow: var(--shadow);
        transform: translateY(-1px);
    }

#offers .offer-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#offers .offer-title {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
    overflow-wrap: anywhere;
}

#offers .offer-color {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#offers .offer-price {
    white-space: nowrap;
    color: var(--ink);
    font-size: 14px;
    font-weight: 850;
}

#offers .marketplace-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

    #offers .marketplace-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 78px;
        min-height: 34px;
        padding: 7px 10px;
        border-radius: 8px;
        font-size: 11px;
        line-height: 1;
        font-weight: 800;
        text-decoration: none;
        transition: filter var(--ease),transform var(--ease),border-color var(--ease);
    }

        #offers .marketplace-actions a:hover {
            filter: brightness(.97);
            transform: translateY(-1px);
        }

    #offers .marketplace-actions .amazon {
        background: var(--amazon-bg);
        color: var(--amazon-ink);
        border: 1px solid color-mix(in srgb,var(--amazon-ink) 28%,var(--line));
    }

    #offers .marketplace-actions .flip {
        background: var(--flip-bg);
        color: var(--flip-ink);
        border: 1px solid color-mix(in srgb,var(--flip-ink) 28%,var(--line));
    }

#offers .marketplace-empty {
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
}

html[data-theme="dark"] #offers .offer-row {
    background: var(--surface-2);
    color: var(--ink);
}

    html[data-theme="dark"] #offers .offer-row:hover {
        background: var(--surface);
        border-color: var(--accent);
    }

html[data-theme="dark"] #offers .offer-title,
html[data-theme="dark"] #offers .offer-price {
    color: var(--ink);
}

html[data-theme="dark"] #offers .offer-color {
    color: var(--muted);
}

html[data-theme="dark"] #offers .marketplace-actions .amazon {
    background: var(--amazon-bg);
    color: var(--amazon-ink);
}

html[data-theme="dark"] #offers .marketplace-actions .flip {
    background: var(--flip-bg);
    color: var(--flip-ink);
}

@media (max-width:760px) {
    #offers .offer-row {
        grid-template-columns: minmax(0,1fr) auto;
        gap: 9px;
    }

    #offers .offer-price {
        grid-column: 2;
        grid-row: 1;
    }

    #offers .marketplace-actions {
        grid-column: 1/-1;
        justify-content: flex-start;
        padding-top: 2px;
    }
}

@media (max-width:480px) {
    #offers .offer-row {
        padding: 10px;
    }

    #offers .marketplace-actions a {
        min-width: 72px;
        min-height: 32px;
        padding: 7px 9px;
    }

    #offers .offer-title {
        font-size: 12px;
    }

    #offers .offer-price {
        font-size: 13px;
    }
}

/* ---- Spec tabs ---- */
.spec-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.spec-tab {
    flex: none;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 750;
    font-size: 12px;
    cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}

    .spec-tab:hover {
        border-color: var(--accent);
        color: var(--ink);
    }

    .spec-tab.active {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #fff;
        border-color: transparent;
        box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 28%, transparent);
    }

.spec-panel {
    display: none;
}

    .spec-panel.active {
        display: block;
    }

.spec {
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
}

.row {
    display: grid;
    grid-template-columns: 140px 1fr;
    border-bottom: 1px solid var(--line);
}

    .row:last-child {
        border: 0;
    }

    .row div {
        padding: 10px 12px;
    }

        .row div:first-child {
            background: var(--accent-soft);
            color: var(--accent);
            font-size: 12px;
            font-weight: 750;
        }

        .row div:last-child {
            font-size: 13px;
            font-weight: 600;
            background: var(--surface);
        }

    .row:nth-child(even) div:last-child {
        background: var(--surface-2);
    }

html[data-theme="dark"] .row div:first-child {
    background: #1a2740;
    color: var(--accent-2);
}

html[data-theme="dark"] .row:nth-child(even) div:first-child {
    background: #152033;
}

html[data-theme="dark"] .row:nth-child(even) div:last-child {
    background: #151c22;
}

/* =========================================================
   Deal / Current Deal
   Uses the existing dark/light theme variables.
   Existing .deal-box markup remains supported.
   ========================================================= */

.deal-box,
.deal-card,
.current-deal {
    margin-bottom: 16px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}

/* Header */
.deal-card-header,
.current-deal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
    border-bottom: 1px solid var(--line);
}

.deal-card-title,
.current-deal-title {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Existing deal label + new structured deal label */
.deal-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 27px;
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .01em;
}

/* Body */
.deal-card-body,
.current-deal-body {
    padding: 16px;
}

.deal-section {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

    .deal-section:first-child {
        padding-top: 0;
    }

    .deal-section:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

.deal-section-title {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
}

.deal-section-text {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

/* Base price */
.deal-price {
    color: var(--ink);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
}

/* Benefit rows */
.deal-benefit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.deal-benefit-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
}

.deal-benefit-content {
    min-width: 0;
    flex: 1;
}

.deal-benefit-title {
    margin: 0 0 3px;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

.deal-benefit-text {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* Overall benefit */
.deal-overall {
    margin-top: 4px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--good) 28%, var(--line));
    border-radius: 11px;
    background: var(--good-bg);
}

    .deal-overall .deal-section-title {
        color: var(--good);
    }

    .deal-overall .deal-section-text {
        color: var(--muted);
    }

/* Terms */
.deal-terms {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.deal-terms-title {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.deal-terms-text {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

/* CTA */
.deal-action {
    margin-top: 14px;
}

    .deal-action a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0 16px;
        border: 0;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #fff;
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        text-decoration: none;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
        transition: transform var(--ease), filter var(--ease);
    }

        .deal-action a:hover {
            filter: brightness(.97);
            transform: translateY(-1px);
        }

/* Existing simple BuildDealHtml() fallback */
.deal-box {
    padding: 13px;
}

    .deal-box .deal-label {
        margin-bottom: 2px;
    }

    .deal-box p {
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 12.5px;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

/* Explicit dark-theme treatment */
html[data-theme="dark"] .deal-box,
html[data-theme="dark"] .deal-card,
html[data-theme="dark"] .current-deal {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

html[data-theme="dark"] .deal-card-header,
html[data-theme="dark"] .current-deal-header {
    background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
    border-color: var(--line);
}

html[data-theme="dark"] .deal-section {
    border-color: var(--line);
}

html[data-theme="dark"] .deal-overall {
    background: var(--good-bg);
    border-color: color-mix(in srgb, var(--good) 35%, var(--line));
}

/* Deal responsive */
@media (max-width: 760px) {
    .deal-card-header,
    .current-deal-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 13px 14px;
    }

    .deal-card-body,
    .current-deal-body {
        padding: 14px;
    }

    .deal-section {
        padding: 12px 0;
    }
}

@media (max-width: 560px) {
    .deal-box,
    .deal-card,
    .current-deal {
        border-radius: 12px;
    }

    .deal-card-title,
    .current-deal-title {
        font-size: 16px;
    }

    .deal-section-title {
        font-size: 12.5px;
    }

    .deal-section-text {
        font-size: 12px;
    }

    .deal-action a {
        width: 100%;
    }
}

/* ---- Pros / cons ---- */
.pc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .pc > div {
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 10px;
    }

    .pc h3 {
        margin: 0 0 8px;
        font-size: 14px;
    }

    .pc ul {
        margin: 0;
        padding-left: 18px;
        color: var(--muted);
        font-size: 12px;
    }

/* ---- Verdict ---- */
.verdict-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

    .verdict-grid > div {
        padding: 13px;
        border-radius: 10px;
        border: 1px solid var(--line);
    }

    .verdict-grid .buy {
        background: var(--good-bg);
    }

    .verdict-grid h4 {
        margin: 0 0 6px;
    }

    .verdict-grid ul {
        margin: 0;
        padding-left: 18px;
        font-size: 12.5px;
        color: var(--muted);
    }

/* ---- Price history ---- */
.pricehist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.ph-bar {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    text-align: center;
}

    .ph-bar b {
        display: block;
        font-size: 17px;
    }

    .ph-bar span {
        color: var(--muted);
        font-size: 11px;
    }

/* ---- Recommendation cards (list) ---- */
.rec-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 18px;
    margin-top: 18px;
    overflow: hidden;
}

.rec-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .rec-head h2 {
        margin: 0;
        font-size: 22px;
        line-height: 1.15;
        font-weight: 800;
    }

    .rec-head p {
        margin: 5px 0 0;
        color: var(--muted);
        font-size: 13px;
    }

.rec-view {
    color: var(--accent);
    font-weight: 750;
    font-size: 13px;
    white-space: nowrap;
    padding-top: 3px;
}

    .rec-view:hover {
        text-decoration: underline;
    }

.rec-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
}

.rec-list-card {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 32px;
    gap: 16px;
    align-items: center;
    width: 100%;
    min-height: 140px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    min-width: 0;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .rec-list-card:hover {
        transform: translateY(-1px);
        border-color: var(--accent);
        background: var(--accent-soft);
        box-shadow: var(--shadow);
    }

    .rec-list-card img {
        width: 140px;
        height: 118px;
        object-fit: contain;
        border-radius: 10px;
        background: var(--surface-2);
    }

.rec-list-info {
    min-width: 0;
}

    .rec-list-info h3 {
        margin: 0 0 7px;
        font-size: 17px;
        line-height: 1.25;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

.rec-list-price {
    display: block;
    font-size: 16px;
    font-weight: 800;
}

    .rec-list-price span {
        color: var(--muted);
        font-weight: 600;
        font-size: 13px;
        margin-left: 4px;
    }

.rec-list-meta {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.rec-arrow {
    display: grid;
    place-items: center;
    font-size: 28px;
    color: var(--ink);
}

.rec-list-card:hover .rec-arrow {
    color: var(--accent);
}

.rec-empty {
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: var(--muted);
}

/* ---- Compare block ---- */
.compare-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.compare-phone {
    position: relative;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 11px;
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 11px;
    background: var(--surface-2);
}

    .compare-phone img {
        width: 100px;
        height: 145px;
        object-fit: contain;
        border-radius: 10px;
        background: var(--surface);
    }

.compare-info {
    min-width: 0;
    padding: 2px 24px 2px 0;
}

    .compare-info h3 {
        margin: 0 0 6px;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 800;
        overflow-wrap: anywhere;
    }

.compare-score {
    display: inline-flex;
    padding: 3px 7px;
    margin-bottom: 6px;
    border-radius: 7px;
    background: var(--good-bg);
    color: var(--good);
    font-size: 10px;
    font-weight: 800;
}

.compare-price {
    margin-bottom: 7px;
    font-size: 15px;
    font-weight: 800;
}

    .compare-price span {
        display: block;
        margin: 2px 0 0;
        color: var(--muted);
        font-size: 10px;
        font-weight: 600;
    }

.compare-specs {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.35;
}

.compare-spec {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 5px;
    overflow-wrap: anywhere;
}

    .compare-spec b {
        color: var(--ink);
        font-weight: 750;
    }

.compare-remove {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 3;
}

    .compare-remove:hover {
        background: var(--danger);
        color: #fff;
    }

.compare-vs {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    align-self: center;
    justify-self: center;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-weight: 900;
    font-size: 12px;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

.compare-matrix {
    margin-top: 12px;
    width: 100%;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    -webkit-overflow-scrolling: touch;
}

.matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 560px;
    font-size: 13px;
}

    .matrix-table th,
    .matrix-table td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
        text-align: left;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    .matrix-table thead th {
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 5;
        font-weight: 800;
    }

    .matrix-table th:first-child,
    .matrix-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 4;
        background: var(--surface-2);
        font-weight: 750;
        width: 110px;
        min-width: 110px;
        max-width: 120px;
    }

    .matrix-table thead th:first-child {
        z-index: 7;
    }

    .matrix-table .group td {
        background: var(--accent-soft);
        font-weight: 800;
        color: var(--accent);
    }

    .matrix-table .diff {
        background: color-mix(in srgb, var(--accent) 8%, var(--surface));
        font-weight: 700;
    }

/* Mobile-first compare rows (no horizontal squeeze) */
.compare-mobile {
    display: none;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}

.compare-mobile-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}

    .compare-mobile-head span {
        padding: 10px 12px;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

        .compare-mobile-head span:first-child {
            border-right: 1px solid var(--line);
        }

.compare-mobile-group {
    padding: 8px 12px 4px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--line);
}

.compare-mobile-row {
    border-bottom: 1px solid var(--line);
}

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

.compare-mobile-label {
    padding: 8px 12px 2px;
    font-size: 11px;
    font-weight: 750;
    color: var(--muted);
}

.compare-mobile-vals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0 0 10px;
}

    .compare-mobile-vals span {
        padding: 4px 12px 0;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

        .compare-mobile-vals span:first-child {
            border-right: 1px solid var(--line);
        }

    .compare-mobile-vals .diff {
        color: var(--accent);
        font-weight: 750;
    }

.compare-actions {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 900px) {
    .compare-matrix {
        display: none;
    }

    .compare-mobile {
        display: block;
    }

    .compare-actions {
        grid-template-columns: 1fr 1.3fr;
    }
}

.btn {
    min-height: 44px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

    .btn.danger {
        color: var(--danger);
        border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
    }

    .btn.primary {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        border-color: transparent;
        color: #fff;
    }

    .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ---- Right sidebar ---- */
.side-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    position: sticky;
    top: calc(var(--header-h) + 12px);
    align-self: start;
}

    .side-col .section {
        margin: 0;
    }

    .side-col a {
        display: block;
        padding: 8px;
        background: var(--surface-2);
        border-radius: 8px;
        margin: 5px 0;
        font-size: 12px;
    }

    .side-col .mini-offer {
        display: block;
        padding: 9px;
        border-radius: 8px;
        text-align: center;
        font-weight: 750;
        margin: 5px 0;
    }

.side-widget {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 13px;
    overflow: hidden;
}

.side-widget-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 10px;
}

    .side-widget-head h2 {
        margin: 0;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .side-widget-head p {
        margin: 3px 0 0;
        color: var(--muted);
        font-size: 10.5px;
    }

    .side-widget-head > a {
        flex: 0 0 auto;
        color: var(--accent);
        font-size: 11px;
        font-weight: 750;
        white-space: nowrap;
        padding-top: 2px;
    }

.side-phone-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.side-phone {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 14px;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

    .side-phone:hover {
        transform: translateY(-1px);
        border-color: var(--accent);
        background: var(--accent-soft);
    }

.side-thumb {
    width: 64px;
    height: 74px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background: var(--surface-2);
}

    .side-thumb img {
        width: 54px;
        height: 68px;
        object-fit: contain;
    }

.side-info {
    min-width: 0;
}

.side-title {
    display: block;
    margin: 0 0 3px;
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.side-price {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
}

    .side-price i,
    .side-spec i {
        font-style: normal;
        color: var(--muted);
        margin: 0 2px;
    }

    .side-price em {
        color: var(--muted);
        font-size: 10px;
        font-style: normal;
        font-weight: 600;
    }

.side-spec {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.side-arrow {
    display: grid;
    place-items: center;
    font-size: 22px;
    color: var(--ink);
}

/* ---- Compare tray ---- */
.tray {
    position: fixed;
    left: 50%;
    bottom: 8px;
    transform: translate(-50%, calc(100% + 20px));
    width: min(880px, calc(100% - 12px));
    z-index: 999;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    transition: transform 0.2s ease;
}

    .tray.open {
        transform: translate(-50%, 0);
    }

.tray-head {
    height: 42px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

    .tray-head button {
        border: 1px solid var(--line);
        border-radius: 50%;
        width: 28px;
        height: 28px;
        background: var(--surface-2);
        color: var(--ink);
        cursor: pointer;
    }

.slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 64px;
}

.slot {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 6px;
    align-items: center;
    padding: 5px 8px;
    border-right: 1px solid var(--line);
    position: relative;
}

    .slot:last-child {
        border: 0;
    }

    .slot img {
        width: 32px;
        height: 46px;
        object-fit: contain;
    }

    .slot h4 {
        font-size: 10px;
        margin: 0 16px 0 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .slot .x {
        position: absolute;
        right: 4px;
        top: 4px;
        z-index: 2;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface);
        color: var(--ink);
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
    }

        .slot .x:hover {
            border-color: var(--danger);
            color: var(--danger);
        }

.tray-actions {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    border-top: 1px solid var(--line);
}

    .tray-actions button {
        padding: 8px 12px;
        border: 0;
        border-radius: 8px;
        font-weight: 750;
        cursor: pointer;
        background: var(--surface-2);
        color: var(--ink);
    }

    .tray-actions .now {
        margin-left: auto;
        background: var(--accent);
        color: #fff;
    }

        .tray-actions .now:disabled {
            opacity: 0.4;
            cursor: default;
        }

.empty-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.add-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 40px;
    padding: 0 11px;
    border: 1px dashed var(--accent);
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

/* ---- Picker ---- */
.picker-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 14, 0.55);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

    .picker-backdrop.open {
        display: flex;
    }

.picker {
    width: min(600px, 100%);
    max-height: min(700px, calc(100vh - 28px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
}

    .picker-head h3 {
        margin: 0;
        font-size: 16px;
    }

.picker-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
}

.picker-search {
    padding: 11px 13px;
    border-bottom: 1px solid var(--line);
}

    .picker-search input {
        width: 100%;
        height: 40px;
        border: 1px solid var(--line);
        border-radius: 9px;
        padding: 0 11px;
        background: var(--surface-2);
        color: var(--ink);
        outline: none;
    }

.picker-list {
    padding: 9px;
    overflow: auto;
    display: grid;
    gap: 6px;
}

.picker-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    color: var(--ink);
}

    .picker-item:hover {
        border-color: var(--accent);
        background: var(--surface-2);
    }

    .picker-item img {
        width: 40px;
        height: 52px;
        object-fit: contain;
        background: var(--surface-2);
        border-radius: 6px;
    }

    .picker-item b {
        display: block;
        font-size: 12px;
    }

    .picker-item span {
        display: block;
        color: var(--muted);
        font-size: 11px;
        margin-top: 2px;
    }

    .picker-item strong {
        padding: 7px 9px;
        border-radius: 7px;
        background: var(--accent);
        color: #fff;
        font-size: 11px;
        white-space: nowrap;
    }

.picker-empty {
    padding: 22px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

/* ---- Reopen compare pill ---- */
.reopen-compare {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translate(-50%, calc(100% + 30px));
    width: min(340px, calc(100% - 24px));
    z-index: 997;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: var(--shadow-lg);
    transition: transform 0.22s ease;
    padding: 9px 11px;
}

    .reopen-compare.show {
        transform: translate(-50%, 0);
    }

.reopen-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reopen-text {
    font-size: 12px;
    color: var(--ink);
    line-height: 1.3;
}

    .reopen-text strong {
        font-size: 13px;
    }

    .reopen-text span {
        color: var(--muted);
    }

.reopen-inner button {
    border: 0;
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--accent);
    color: #fff;
    font-weight: 750;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
    .layout {
        grid-template-columns: minmax(0, 1fr) 260px;
    }
}

@media (max-width: 900px) {
    .rec-list-card {
        grid-template-columns: 108px minmax(0, 1fr) 24px;
        gap: 12px;
        min-height: 118px;
        padding: 9px;
    }

        .rec-list-card img {
            width: 108px;
            height: 100px;
        }

    .rec-list-info h3 {
        font-size: 15px;
    }

    .rec-list-price {
        font-size: 14px;
    }

    .rec-list-meta {
        font-size: 11px;
    }

    .compare-block {
        grid-template-columns: 1fr;
    }

    .compare-vs {
        width: 40px;
        height: 40px;
        order: 2;
        justify-self: center;
    }

    .compare-phone:first-child {
        order: 1;
    }

    .compare-phone:last-child {
        order: 3;
    }

    .compare-actions {
        grid-template-columns: 1fr 1.5fr;
    }
}

@media (max-width: 760px) {
    .layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .side-col {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .side-widget {
        grid-column: 1 / -1;
    }

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

    .visual {
        min-height: 280px;
    }

        .visual img {
            height: 250px;
        }

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

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

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

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

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

@media (max-width: 560px) {
    .wrap,
    .ps-wrap {
        width: calc(100% - 18px);
    }

    .hero, .section {
        padding: 13px;
    }

    .copy h1 {
        font-size: 22px;
    }

    .offers-row,
    .high,
    .pricehist,
    .side-col {
        grid-template-columns: 1fr;
    }

    .row {
        grid-template-columns: 110px 1fr;
    }

    .rec-head h2 {
        font-size: 19px;
    }

    .rec-list-card {
        grid-template-columns: 78px minmax(0, 1fr) 18px;
        gap: 9px;
        min-height: 96px;
        padding: 7px;
    }

        .rec-list-card img {
            width: 78px;
            height: 84px;
        }

    .rec-list-info h3 {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .rec-list-price {
        font-size: 13px;
    }

    .rec-list-meta {
        font-size: 10px;
        margin-top: 4px;
    }

    .compare-phone {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 9px;
        padding: 9px;
    }

        .compare-phone img {
            width: 84px;
            height: 115px;
        }

    .compare-info h3 {
        font-size: 14px;
    }

    .compare-actions {
        grid-template-columns: 1fr 1.3fr;
    }

    .tray {
        bottom: calc(6px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Explicit theme surfaces: keeps WebForms rendering consistent */
html[data-theme="dark"] body {
    background: var(--bg);
    color: var(--ink);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .rec-card,
html[data-theme="dark"] .side-widget,
html[data-theme="dark"] .tray,
html[data-theme="dark"] .picker {
    background: var(--surface);
    color: var(--ink);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select {
    color: var(--ink);
    background: var(--surface);
}

.stars {
    display: inline-flex;
    gap: 1px;
    font-size: 15px;
    line-height: 1;
}

    .stars .star-full,
    .stars .star-half {
        color: #f5a623;
    }

    .stars .star-empty {
        color: var(--line);
        opacity: .55;
    }

.wrap {
    font-family: var(--font);
}

    .wrap h1,
    .wrap h2,
    .wrap h3,
    .wrap h4 {
        font-family: var(--font-display);
    }

    .wrap h1 {
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .wrap h2 {
        font-weight: 800;
        letter-spacing: -0.01em;
        font-size: 22px;
    }

    .wrap h3, .wrap h4 {
        font-weight: 700;
        letter-spacing: -0.005em;
    }

    .wrap .card.section {
        border-radius: 16px;
        transition: box-shadow .2s ease;
    }

    .wrap .lead {
        line-height: 1.6;
    }

#price {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* CTA buttons: subtle lift on hover/focus instead of a flat, static state */
.wrap .offer,
.wrap .mini-offer,
.wrap .compare-btn {
    transition: transform .15s ease,box-shadow .15s ease;
}

    .wrap .offer:hover,
    .wrap .mini-offer:hover,
    .wrap .compare-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,.08);
    }

    .wrap .offer:active,
    .wrap .mini-offer:active,
    .wrap .compare-btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

/* Recommendation / sidebar cards: gentle elevation on hover so the
   list feels tappable/clickable rather than static text rows. */
.wrap .rec-list-card,
.wrap .side-phone {
    transition: transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}

    .wrap .rec-list-card:hover,
    .wrap .side-phone:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,.08);
        border-color: var(--accent);
    }

/* =========================================================
   Verdict: Buy if / Skip if
   Buy if was styled green already via the shared stylesheet;
   Skip if had no matching class at all, so it rendered as a
   plain box with no visual signal that it's the "downside"
   half of the verdict. Both get an explicit look here, with
   check/cross markers instead of plain bullets.
   ========================================================= */
.verdict-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
}

@media (min-width:640px) {
    .verdict-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.verdict-grid > div {
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid var(--line);
}

.verdict-grid h4 {
    margin: 0 0 10px;
    font-size: 15px;
}

.verdict-grid ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.verdict-grid li {
    font-size: 14px;
    line-height: 1.45;
    padding-left: 24px;
    position: relative;
}

.verdict-grid .buy {
    background: color-mix(in srgb,#22c55e 10%,transparent);
    border-color: color-mix(in srgb,#22c55e 30%,var(--line));
}

    .verdict-grid .buy h4 {
        color: #15803d;
    }

    .verdict-grid .buy li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0;
        color: #16a34a;
        font-weight: 800;
    }

.verdict-grid .skip {
    background: color-mix(in srgb,#ef4444 8%,transparent);
    border-color: color-mix(in srgb,#ef4444 25%,var(--line));
}

    .verdict-grid .skip h4 {
        color: #b91c1c;
    }

    .verdict-grid .skip li::before {
        content: "✕";
        position: absolute;
        left: 0;
        top: 0;
        color: #dc2626;
        font-weight: 800;
    }

html[data-theme="dark"] .verdict-grid .buy {
    background: color-mix(in srgb,#22c55e 16%,transparent);
}

    html[data-theme="dark"] .verdict-grid .buy h4 {
        color: #4ade80;
    }

html[data-theme="dark"] .verdict-grid .skip {
    background: color-mix(in srgb,#ef4444 14%,transparent);
}

    html[data-theme="dark"] .verdict-grid .skip h4 {
        color: #f87171;
    }

/* =========================================================
   Current Deal
   Uses PhoneScope's existing light/dark theme variables.
   Do not hard-code white surfaces here.
   ========================================================= */

.deal-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    color: var(--ink);
    padding: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: background var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.deal-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--line);
}

.deal-kicker {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
}

.deal-card-head h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    color: var(--ink);
}

.deal-badge {
    white-space: nowrap;
    border: 1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
}

.deal-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

    .deal-section:last-of-type {
        border-bottom: 0;
    }

.deal-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

    .deal-section-title h4 {
        margin: 0;
        font-size: 15px;
        line-height: 1.35;
        color: var(--ink);
    }

.deal-icon {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    flex: 0 0 27px;
}

.deal-section p {
    margin: 5px 0 0;
    line-height: 1.65;
    font-size: 14px;
    color: var(--muted);
}

.deal-section:first-of-type p {
    font-size: 16px;
    font-weight: 750;
    color: var(--ink);
}

.deal-terms {
    font-size: 12px !important;
    opacity: .82;
    line-height: 1.55 !important;
    color: var(--muted) !important;
}

.deal-fallback {
    padding: 16px 0;
    line-height: 1.7;
    font-size: 14px;
    color: var(--muted);
}

.deal-cta {
    padding-top: 15px;
}

    .deal-cta a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        font-weight: 750;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 14px;
        background: var(--surface-2);
        color: var(--accent);
        transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
    }

        .deal-cta a:hover {
            text-decoration: none;
            transform: translateY(-1px);
            background: var(--accent-soft);
            border-color: var(--accent);
        }

/* Overall-benefit panel, if generated by BuildDealHtml */
.deal-overall {
    background: var(--good-bg);
    border: 1px solid color-mix(in srgb,var(--good) 30%,var(--line));
    color: var(--ink);
    border-radius: 11px;
    padding: 13px;
}

    .deal-overall .deal-section-title h4 {
        color: var(--good);
    }

    .deal-overall p {
        color: var(--muted);
    }

/* Explicit dark-mode protection.
   This is intentionally redundant so the Deal card cannot
   inherit a white background from an older Deal rule. */
html[data-theme="dark"] .deal-card,
html[data-theme="dark"] .deal-card-head,
html[data-theme="dark"] .deal-section {
    background-color: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

html[data-theme="dark"] .deal-card {
    background-image: none;
    box-shadow: var(--shadow);
}

html[data-theme="dark"] .deal-card-head h3,
html[data-theme="dark"] .deal-section-title h4 {
    color: var(--ink);
}

html[data-theme="dark"] .deal-kicker,
html[data-theme="dark"] .deal-section p,
html[data-theme="dark"] .deal-fallback,
html[data-theme="dark"] .deal-terms {
    color: var(--muted) !important;
}

html[data-theme="dark"] .deal-section:first-of-type p {
    color: var(--ink);
}

html[data-theme="dark"] .deal-badge {
    background: var(--accent-soft);
    color: var(--accent-2);
    border-color: var(--line);
}

html[data-theme="dark"] .deal-icon {
    background: var(--surface-2);
    color: var(--accent-2);
    border-color: var(--line);
}

html[data-theme="dark"] .deal-cta a {
    background: var(--surface-2);
    color: var(--accent-2);
    border-color: var(--line);
}

    html[data-theme="dark"] .deal-cta a:hover {
        background: var(--accent-soft);
        border-color: var(--accent);
    }

html[data-theme="dark"] .deal-overall {
    background: var(--good-bg);
    border-color: color-mix(in srgb,var(--good) 40%,var(--line));
}

    html[data-theme="dark"] .deal-overall .deal-section-title h4 {
        color: var(--good);
    }

    html[data-theme="dark"] .deal-overall p {
        color: var(--muted);
    }

@media(max-width:640px) {
    .deal-card {
        padding: 14px;
        border-radius: 15px;
    }

    .deal-card-head {
        gap: 8px;
    }

        .deal-card-head h3 {
            font-size: 17px;
        }

    .deal-badge {
        font-size: 10px;
        padding: 5px 8px;
    }

    .deal-section {
        padding: 13px 0;
    }

        .deal-section p {
            font-size: 13.5px;
        }
}

/* =========================================================
   CURRENT DEAL - ACTUAL RENDERED UI / DARK-LIGHT FINAL FIX
   BuildDealHtml() renders .deal-card and child deal classes.
   Keep this block at the END so it wins over older CSS.
   ========================================================= */
.deal-box {
    padding: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
}

.deal-card {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow) !important;
    opacity: 1 !important;
}

    .deal-card * {
        opacity: 1;
    }

.deal-card-head {
    background: transparent !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
}

.deal-kicker {
    color: var(--muted) !important;
    opacity: 1 !important;
}

.deal-card-head h3 {
    color: var(--ink) !important;
    opacity: 1 !important;
}

.deal-section {
    background: transparent !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
}

.deal-section-title {
    color: var(--ink) !important;
}

    .deal-section-title h4 {
        color: var(--ink) !important;
        opacity: 1 !important;
    }

.deal-section p {
    color: var(--muted) !important;
    opacity: 1 !important;
}

.deal-extra {
    color: var(--muted) !important;
}

.deal-icon {
    background: var(--surface-2) !important;
    color: var(--accent) !important;
    border-color: var(--line) !important;
}

.deal-overall {
    background: var(--good-bg) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

    .deal-overall .deal-section-title h4 {
        color: var(--good) !important;
    }

    .deal-overall p {
        color: var(--muted) !important;
    }

.deal-terms {
    border-top: 1px dashed var(--line) !important;
}

.deal-terms-title {
    color: var(--muted) !important;
}

.deal-terms-text {
    color: var(--muted) !important;
}

.deal-cta a {
    background: var(--surface-2) !important;
    color: var(--accent) !important;
    border: 1px solid var(--line) !important;
}

    .deal-cta a:hover {
        background: var(--accent-soft) !important;
        color: var(--accent-2) !important;
        border-color: var(--accent) !important;
    }

.deal-fallback {
    color: var(--muted) !important;
}

html[data-theme="dark"] #dealSection,
html[data-theme="dark"] #dealBox,
html[data-theme="dark"] #dealBox .deal-card,
html[data-theme="dark"] #dealBox .deal-section,
html[data-theme="dark"] #dealBox .deal-card-head {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

html[data-theme="dark"] #dealBox {
    box-shadow: none !important;
}

    html[data-theme="dark"] #dealBox .deal-kicker {
        color: var(--muted) !important;
    }

    html[data-theme="dark"] #dealBox .deal-card-head h3,
    html[data-theme="dark"] #dealBox .deal-section-title,
    html[data-theme="dark"] #dealBox .deal-section-title h4 {
        color: var(--ink) !important;
    }

    html[data-theme="dark"] #dealBox .deal-section p,
    html[data-theme="dark"] #dealBox .deal-extra,
    html[data-theme="dark"] #dealBox .deal-terms-text,
    html[data-theme="dark"] #dealBox .deal-fallback {
        color: var(--muted) !important;
    }

    html[data-theme="dark"] #dealBox .deal-icon {
        background: var(--surface-2) !important;
        color: var(--accent-2) !important;
        border-color: var(--line) !important;
    }

    html[data-theme="dark"] #dealBox .deal-overall {
        background: var(--good-bg) !important;
        color: var(--ink) !important;
        border-color: var(--line) !important;
    }

        html[data-theme="dark"] #dealBox .deal-overall .deal-section-title h4 {
            color: var(--good) !important;
        }

        html[data-theme="dark"] #dealBox .deal-overall p {
            color: var(--muted) !important;
        }

    html[data-theme="dark"] #dealBox .deal-cta a {
        background: var(--surface-2) !important;
        color: var(--accent-2) !important;
        border-color: var(--line) !important;
    }

        html[data-theme="dark"] #dealBox .deal-cta a:hover {
            background: var(--accent-soft) !important;
            border-color: var(--accent) !important;
        }

/* HEADER (shared across PhoneScope pages) */
.ps-head {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--ps-surface);
    border-bottom: 1px solid var(--ps-line)
}

.ps-head-inner {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 20px
}

.ps-logo {
    font-size: 21px;
    font-weight: 850;
    display: flex;
    align-items: center;
    gap: 8px
}

    .ps-logo b {
        color: var(--ps-blue)
    }

.ps-logo-mark {
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: var(--ps-blue);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    flex-shrink: 0
}

.ps-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1
}

.ps-nav-item {
    position: relative
}

    .ps-nav-item > a, .ps-nav-item > button.ps-nav-link {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        font-weight: 700;
        padding: 9px 11px;
        border-radius: 9px;
        border: 0;
        background: none;
        color: var(--ps-ink);
        cursor: pointer;
        font-family: inherit
    }

        .ps-nav-item > a:hover, .ps-nav-item > button.ps-nav-link:hover {
            background: var(--ps-surface-2)
        }

.ps-nav > a {
    font-size: 13px;
    font-weight: 700;
    padding: 9px 11px;
    border-radius: 9px
}

    .ps-nav > a:hover {
        background: var(--ps-surface-2)
    }

.ps-caret {
    font-size: 10px;
    color: var(--ps-muted);
    transition: transform .15s;
    display: inline-block
}

.ps-nav-item.open .ps-caret, .ps-nav-item:hover .ps-caret {
    transform: rotate(180deg)
}

.ps-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: 13px;
    box-shadow: var(--ps-shadow-lg);
    padding: 8px;
    display: none;
    z-index: 120
}

.ps-nav-item:hover .ps-dropdown, .ps-nav-item:focus-within .ps-dropdown, .ps-nav-item.open .ps-dropdown {
    display: block
}

.ps-dropdown a, .ps-dropdown button {
    display: flex;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ps-ink);
    padding: 10px 11px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer
}

    .ps-dropdown a:hover, .ps-dropdown button:hover {
        background: var(--ps-surface-2);
        color: var(--ps-blue)
    }

@media(max-width:960px) {
    .ps-nav-item {
        display: none
    }
}

.ps-head-actions {
    display: flex;
    gap: 7px
}

.ps-icon-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--ps-line);
    border-radius: 50%;
    background: var(--ps-surface-2);
    color: var(--ps-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

    .ps-icon-btn svg {
        width: 16px;
        height: 16px
    }

.ps-menu {
    display: none
}

@media(max-width:1080px) {
    .ps-menu {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--ps-line);
        background: var(--ps-surface-2);
        color: var(--ps-ink);
        width: 38px;
        height: 38px;
        border-radius: 9px
    }

        .ps-menu svg {
            width: 18px;
            height: 18px
        }

    .ps-nav {
        display: none !important
    }

    .ps-head {
        position: relative
    }
}

.ps-mobile-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    z-index: 150;
    background: var(--ps-surface);
    border-bottom: 1px solid var(--ps-line);
    box-shadow: var(--ps-shadow);
    padding: 8px 14px
}

    .ps-mobile-menu.open {
        display: grid;
        grid-template-columns: 1fr
    }

    .ps-mobile-menu details {
        grid-column: 1/-1;
        border-bottom: 1px solid var(--ps-line)
    }

        .ps-mobile-menu details:last-of-type {
            border-bottom: 0
        }

    .ps-mobile-menu summary {
        padding: 12px 4px;
        font-weight: 750;
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

        .ps-mobile-menu summary::-webkit-details-marker {
            display: none
        }

        .ps-mobile-menu summary:after {
            content: "⌄";
            color: var(--ps-muted);
            transition: transform .15s ease
        }

    .ps-mobile-menu details[open] summary:after {
        transform: rotate(180deg)
    }

    .ps-mobile-menu .ps-sub-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0 0 10px 8px
    }

        .ps-mobile-menu .ps-sub-list a, .ps-mobile-menu .ps-sub-list button {
            border: 0;
            background: none;
            font: inherit;
            color: var(--ps-muted);
            text-align: left;
            padding: 9px;
            border-radius: 8px;
            font-weight: 650;
            font-size: 13px;
            cursor: pointer
        }

            .ps-mobile-menu .ps-sub-list a:hover, .ps-mobile-menu .ps-sub-list button:hover {
                background: var(--ps-surface-2);
                color: var(--ps-ink)
            }

    .ps-mobile-menu > a {
        grid-column: 1/-1;
        border-bottom: 1px solid var(--ps-line);
        border-radius: 0;
        padding: 12px 4px
    }

        .ps-mobile-menu > a:last-child {
            border-bottom: 0
        }

.ps-ticker {
    background: var(--ps-ink);
    color: var(--ps-bg);
    font-size: 12px
}

.ps-ticker-inner {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 9px;
    overflow: hidden
}

.ps-live {
    background: var(--ps-blue);
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 850;
    flex: none
}

.ps-ticker-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* HERO — text and stat-grid only, deliberately no hero image */
.ps-hero {
    padding: 52px 0 8px;
    text-align: center
}

.ps-hero-kicker {
    display: inline-block;
    background: var(--ps-blue-tint);
    color: var(--ps-blue-2);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 14px
}

.ps-hero h1 {
    font-size: clamp(28px,4.6vw,46px);
    line-height: 1.1;
    margin: 0 0 12px;
    letter-spacing: -1px
}

.ps-hero p {
    max-width: 660px;
    margin: 0 auto 24px;
    color: var(--ps-muted);
    font-size: 15px
}

.ps-hero-search {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: 14px;
    padding: 8px;
    box-shadow: var(--ps-shadow)
}

    .ps-hero-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: none;
        color: var(--ps-ink);
        padding: 0 12px;
        height: 44px;
        outline: none;
        font-size: 14px
    }

    .ps-hero-search button {
        height: 44px;
        padding: 0 22px;
        border: 0;
        border-radius: 9px;
        background: var(--ps-blue);
        color: #fff;
        font-weight: 800;
        font-size: 13px;
        cursor: pointer
    }

.ps-hero-grid {
    max-width: 900px;
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px
}

.ps-hero-stat {
    border: 1px solid var(--ps-line);
    background: var(--ps-surface);
    border-radius: 13px;
    padding: 14px 10px
}

    .ps-hero-stat b {
        display: block;
        font-size: 22px;
        font-weight: 900
    }

    .ps-hero-stat span {
        display: block;
        color: var(--ps-muted);
        font-size: 11px;
        margin-top: 2px
    }

@media(max-width:680px) {
    .ps-hero-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

/* SECTIONS */
.ps-section {
    width: min(1440px,calc(100% - 40px));
    margin: 0 auto 34px
}

.ps-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 15px;
    margin-bottom: 6px
}

    .ps-section-head h2 {
        font-size: 22px;
        margin: 0
    }

    .ps-section-head a.ps-more {
        font-size: 12px;
        font-weight: 800;
        color: var(--ps-blue);
        white-space: nowrap
    }

.ps-section-lead {
    color: var(--ps-muted);
    font-size: 13px;
    max-width: 760px;
    margin: 6px 0 16px
}

/* CATEGORY GRID (5x2) */
.ps-cat-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 10px
}

.ps-cat-card {
    border: 1px solid var(--ps-line);
    background: var(--ps-surface);
    border-radius: 14px;
    padding: 16px 12px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--ps-ink);
    box-shadow: var(--ps-shadow);
    display: flex;
    flex-direction: column;
    gap: 9px
}

    .ps-cat-card:hover {
        border-color: var(--ps-blue)
    }

    .ps-cat-card.active {
        border-color: var(--ps-blue);
        background: var(--ps-blue-tint)
    }

.ps-cat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ps-blue-tint);
    color: var(--ps-blue-2);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

    .ps-cat-icon svg {
        width: 18px;
        height: 18px
    }

.ps-cat-card b {
    font-size: 13px;
    display: block
}

.ps-cat-card span {
    font-size: 11px;
    color: var(--ps-muted);
    display: block;
    margin-top: 1px
}

@media(max-width:1080px) {
    .ps-cat-grid {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width:640px) {
    .ps-cat-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

/* BRAND GRID */
.ps-brand-grid {
    display: grid;
    grid-template-columns: repeat(8,minmax(0,1fr));
    gap: 10px
}

.ps-brand-card {
    border: 1px solid var(--ps-line);
    background: var(--ps-surface);
    border-radius: 14px;
    padding: 16px 10px;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: var(--ps-ink);
    box-shadow: var(--ps-shadow)
}

    .ps-brand-card:hover {
        border-color: var(--ps-blue)
    }

.ps-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
    color: #fff;
    font-weight: 900;
    font-size: 15px
}

.ps-brand-card b {
    display: block;
    font-size: 13px
}

.ps-brand-card span {
    display: block;
    color: var(--ps-muted);
    font-size: 11px;
    margin-top: 2px
}

@media(max-width:1080px) {
    .ps-brand-grid {
        grid-template-columns: repeat(4,1fr)
    }
}

@media(max-width:560px) {
    .ps-brand-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

/* SHARED MOBILE DRAWER — aligned with Mobile Details V5 */
body.menu-lock {
    overflow: hidden
}

.ps-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(5,10,14,.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease
}

    .ps-drawer-backdrop.open {
        opacity: 1;
        pointer-events: auto
    }

.ps-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(340px,88vw);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    background: var(--ps-surface);
    border-right: 1px solid var(--ps-line);
    box-shadow: 10px 0 45px rgba(0,0,0,.22);
    transform: translateX(-105%);
    transition: transform .25s cubic-bezier(.22,1,.36,1);
    padding-top: env(safe-area-inset-top,0)
}

    .ps-drawer.open {
        transform: translateX(0)
    }

.ps-drawer-head {
    min-height: 62px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ps-line)
}

.ps-drawer-close {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ps-line);
    border-radius: 10px;
    background: var(--ps-surface-2);
    color: var(--ps-ink);
    cursor: pointer
}

    .ps-drawer-close svg {
        width: 16px;
        height: 16px
    }

.ps-drawer-body {
    padding: 10px 12px 24px;
    overflow: auto;
    flex: 1
}

.ps-drawer-link {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 11px 12px;
    border-radius: 11px;
    background: transparent;
    color: var(--ps-ink);
    font-size: 14px;
    font-weight: 750;
    border: 0;
    text-align: left;
    cursor: pointer
}

    .ps-drawer-link:hover {
        background: var(--ps-surface-2)
    }

.ps-drawer-group {
    margin-top: 4px
}

    .ps-drawer-group summary {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 46px;
        padding: 11px 12px;
        border-radius: 11px;
        font-size: 14px;
        font-weight: 750;
        cursor: pointer
    }

        .ps-drawer-group summary::-webkit-details-marker {
            display: none
        }

        .ps-drawer-group summary::after {
            content: "";
            width: 7px;
            height: 7px;
            flex: 0 0 7px;
            border-right: 2px solid var(--ps-muted);
            border-bottom: 2px solid var(--ps-muted);
            transform: rotate(45deg);
            transition: transform .18s ease
        }

    .ps-drawer-group[open] summary::after {
        transform: rotate(-135deg)
    }

.ps-drawer-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 6px 8px 12px
}

    .ps-drawer-sub a, .ps-drawer-sub button {
        width: 100%;
        padding: 10px 12px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--ps-muted);
        text-align: left;
        font-size: 13px;
        font-weight: 650;
        cursor: pointer
    }

        .ps-drawer-sub a:hover, .ps-drawer-sub button:hover {
            background: var(--ps-surface-2);
            color: var(--ps-ink)
        }

.ps-drawer-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--ps-line);
    color: var(--ps-muted);
    font-size: 11px
}

@media(max-width:1080px) {
    .ps-mobile-menu {
        display: none !important
    }
}

@media(min-width:1081px) {
    .ps-drawer, .ps-drawer-backdrop {
        display: none !important
    }
}


/* HOMEPAGE FEATURE AREA: attached-style phone rows + top-right price panel */
.ps-feature-layout {
    width: min(1440px,calc(100% - 40px));
    margin: 0 auto 34px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 24px;
    align-items: start
}

.ps-feature-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px
}

.ps-feature-side {
    position: sticky;
    top: 80px
}

.ps-feature-widget {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-r-lg);
    box-shadow: var(--ps-shadow);
    padding: 18px
}

    .ps-feature-widget h2, .ps-feature-widget h3 {
        margin: 0;
        font-size: 22px;
        line-height: 1.2;
        letter-spacing: -.02em
    }

.ps-feature-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

    .ps-feature-head a {
        font-size: 14px;
        font-weight: 800;
        color: var(--ps-blue);
        white-space: nowrap
    }

.ps-phone-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.ps-phone-row {
    display: grid;
    grid-template-columns: 150px minmax(0,1fr) 30px;
    align-items: center;
    gap: 20px;
    min-height: 142px;
    padding: 12px 18px;
    border: 1px solid var(--ps-line);
    border-radius: 16px;
    background: var(--ps-surface);
    transition: var(--ps-ease);
    overflow: hidden
}

    .ps-phone-row:hover {
        border-color: var(--ps-blue);
        box-shadow: var(--ps-shadow);
        transform: translateY(-1px)
    }

.ps-phone-thumb {
    width: 132px;
    height: 116px;
    border-radius: 12px;
    background: linear-gradient(145deg,var(--ps-surface-2),var(--ps-surface));
    display: grid;
    place-items: center;
    overflow: hidden
}

    .ps-phone-thumb img {
        width: 92px;
        height: 108px;
        object-fit: contain;
        display: block
    }

.ps-phone-info {
    min-width: 0
}

.ps-phone-title {
    margin: 0 0 7px;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ps-phone-price-line {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 7px
}

.ps-phone-price {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -.02em
}

.ps-phone-score {
    font-size: 15px;
    color: var(--ps-muted);
    font-weight: 600
}

.ps-phone-dot {
    color: var(--ps-muted)
}

.ps-phone-specs {
    font-size: 14px;
    color: var(--ps-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ps-phone-chevron {
    color: var(--ps-ink);
    display: grid;
    place-items: center
}

    .ps-phone-chevron svg {
        width: 25px;
        height: 25px;
        display: block
    }

.ps-phone-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--ps-blue-tint);
    color: var(--ps-blue);
    font-size: 10px;
    font-weight: 850;
    margin-left: 7px;
    vertical-align: middle
}

.ps-price-panel {
    background: linear-gradient(180deg,var(--ps-surface),var(--ps-surface-2));
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-r-lg);
    box-shadow: var(--ps-shadow);
    padding: 20px
}

    .ps-price-panel h2 {
        font-size: 21px;
        margin: 0 0 5px
    }

    .ps-price-panel p {
        margin: 0 0 15px;
        color: var(--ps-muted);
        font-size: 12.5px;
        line-height: 1.55
    }

.ps-price-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px
}

    .ps-price-list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 14px;
        border: 1px solid var(--ps-line);
        border-radius: 12px;
        background: var(--ps-surface);
        color: var(--ps-ink);
        font-size: 13px;
        font-weight: 800;
        transition: var(--ps-ease)
    }

        .ps-price-list a:hover {
            border-color: var(--ps-blue);
            color: var(--ps-blue);
            transform: translateX(2px)
        }

        .ps-price-list a span {
            color: var(--ps-blue);
            font-size: 16px
        }

.ps-feature-main .ps-feature-widget + .ps-feature-widget {
    padding-top: 18px
}

@media(max-width:1050px) {
    .ps-feature-layout {
        grid-template-columns: minmax(0,1fr) 280px
    }

    .ps-phone-row {
        grid-template-columns: 125px minmax(0,1fr) 26px;
        gap: 15px
    }

    .ps-phone-thumb {
        width: 112px;
        height: 108px
    }

    .ps-phone-title {
        font-size: 18px
    }

    .ps-phone-specs {
        font-size: 13px
    }
}

@media(max-width:860px) {
    .ps-feature-layout {
        grid-template-columns: 1fr
    }

    .ps-feature-side {
        position: static
    }

    .ps-price-list {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:620px) {
    .ps-feature-layout {
        width: min(100% - 24px,1440px);
        gap: 16px
    }

    .ps-feature-widget {
        padding: 13px
    }

        .ps-feature-widget h2 {
            font-size: 20px
        }

    .ps-phone-row {
        grid-template-columns: 78px minmax(0,1fr) 22px;
        gap: 11px;
        min-height: 106px;
        padding: 9px 10px;
        border-radius: 13px
    }

    .ps-phone-thumb {
        width: 78px;
        height: 88px;
        border-radius: 9px
    }

        .ps-phone-thumb img {
            width: 63px;
            height: 82px
        }

    .ps-phone-title {
        font-size: 15px;
        margin-bottom: 5px
    }

    .ps-phone-price {
        font-size: 15px
    }

    .ps-phone-score {
        font-size: 12px
    }

    .ps-phone-specs {
        font-size: 11px
    }

    .ps-phone-chevron svg {
        width: 19px;
        height: 19px
    }

    .ps-price-list {
        grid-template-columns: 1fr
    }

    .ps-feature-head {
        margin-bottom: 10px
    }

        .ps-feature-head a {
            font-size: 12px
        }
}

/* MINI PHONE CARD (popular / new mobiles grids) */
.ps-mini-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px
}

.ps-mini-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 14px;
    display: flex;
    flex-direction: column;
    transition: var(--ps-ease);
    position: relative
}

    .ps-mini-card:hover {
        border-color: var(--ps-blue);
        box-shadow: var(--ps-shadow-lg)
    }

.ps-mini-visual {
    height: 160px;
    border-radius: 11px;
    background: linear-gradient(145deg,var(--ps-surface-2),var(--ps-surface));
    display: grid;
    place-items: center;
    position: relative;
    margin-bottom: 11px
}

    .ps-mini-visual img {
        width: 112px;
        height: 142px;
        object-fit: contain
    }

.ps-mini-score {
    position: absolute;
    left: 8px;
    top: 8px;
    background: var(--ps-green);
    color: #fff;
    border-radius: 8px;
    padding: 4px 7px;
    font-size: 10px;
    font-weight: 850
}

.ps-mini-rank {
    position: absolute;
    left: 8px;
    top: 8px;
    background: var(--ps-ink);
    color: var(--ps-bg);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 850
}

.ps-mini-badge {
    position: absolute;
    right: 8px;
    top: 8px;
    background: var(--ps-orange);
    color: #fff;
    border-radius: 8px;
    padding: 4px 7px;
    font-size: 10px;
    font-weight: 850
}

.ps-mini-brand {
    font-size: 10px;
    font-weight: 800;
    color: var(--ps-blue);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px
}

.ps-mini-title {
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.3
}

.ps-mini-spec {
    font-size: 11px;
    color: var(--ps-muted);
    margin-bottom: 10px
}

.ps-mini-bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.ps-mini-price {
    font-size: 16px;
    font-weight: 900
}

.ps-mini-cta {
    font-size: 11px;
    font-weight: 800;
    color: var(--ps-blue)
}

@media(max-width:1280px) {
    .ps-mini-grid {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width:680px) {
    .ps-mini-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:460px) {
    .ps-mini-grid {
        grid-template-columns: 1fr
    }
}

.ps-tab-row {
    display: flex;
    gap: 7px;
    margin-bottom: 16px;
    flex-wrap: wrap
}

.ps-tab {
    border: 1px solid var(--ps-line);
    background: var(--ps-surface);
    color: var(--ps-muted);
    border-radius: 20px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

    .ps-tab.active {
        background: var(--ps-blue);
        border-color: var(--ps-blue);
        color: #fff
    }

/* UPCOMING MOBILES */
.ps-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px
}

.ps-upcoming-card {
    background: var(--ps-surface);
    border: 1px dashed var(--ps-line);
    border-radius: var(--ps-radius);
    padding: 16px;
    display: flex;
    gap: 14px;
    align-items: center
}

.ps-upcoming-visual {
    width: 64px;
    height: 82px;
    border-radius: 10px;
    background: var(--ps-surface-2);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

    .ps-upcoming-visual img {
        width: 48px;
        height: 64px;
        object-fit: contain;
        opacity: .85
    }

.ps-upcoming-info h4 {
    margin: 0 0 4px;
    font-size: 14px
}

.ps-upcoming-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    color: var(--ps-orange);
    background: #fff3e9;
    border-radius: 20px;
    padding: 3px 8px;
    margin-bottom: 5px
}

html[data-ps-theme="dark"] .ps-upcoming-tag {
    background: #2a1f14
}

.ps-upcoming-info p {
    margin: 0;
    font-size: 11.5px;
    color: var(--ps-muted)
}

@media(max-width:900px) {
    .ps-upcoming-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:560px) {
    .ps-upcoming-grid {
        grid-template-columns: 1fr
    }
}

/* REVIEWS */
.ps-review-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px
}

.ps-review-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 18px
}

.ps-review-stars {
    color: var(--ps-amber);
    font-size: 13px;
    margin-bottom: 8px;
    letter-spacing: 1px
}

.ps-review-card p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ps-ink);
    line-height: 1.6
}

.ps-review-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: var(--ps-muted);
    border-top: 1px solid var(--ps-line);
    padding-top: 10px
}

    .ps-review-foot b {
        color: var(--ps-ink)
    }

@media(max-width:900px) {
    .ps-review-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:560px) {
    .ps-review-grid {
        grid-template-columns: 1fr
    }
}

/* LATEST NEWS — 16:9 image grid, vertical card list */
.ps-news-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px
}

.ps-news-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.ps-news-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(145deg,var(--ps-surface-2),var(--ps-surface));
    overflow: hidden
}

    .ps-news-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

.ps-news-body {
    padding: 14px 16px 16px
}

.ps-news-kicker {
    font-size: 10px;
    font-weight: 800;
    color: var(--ps-blue);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px
}

.ps-news-body h3 {
    font-size: 15px;
    margin: 0 0 7px;
    line-height: 1.35
}

.ps-news-body p {
    font-size: 12.5px;
    color: var(--ps-muted);
    margin: 0 0 10px;
    line-height: 1.6
}

.ps-news-meta {
    font-size: 11px;
    color: var(--ps-muted);
    border-top: 1px solid var(--ps-line);
    padding-top: 9px
}

@media(max-width:1080px) {
    .ps-news-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:640px) {
    .ps-news-grid {
        grid-template-columns: 1fr
    }
}

/* CTA BANNER */
.ps-cta {
    background: linear-gradient(120deg,var(--ps-blue),var(--ps-blue-2));
    border-radius: var(--ps-r-lg);
    padding: 34px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

    .ps-cta h2 {
        margin: 0 0 6px;
        font-size: 22px
    }

    .ps-cta p {
        margin: 0;
        opacity: .9;
        font-size: 13px;
        max-width: 480px
    }

    .ps-cta a {
        background: #fff;
        color: var(--ps-blue-2);
        padding: 12px 20px;
        border-radius: 10px;
        font-weight: 850;
        font-size: 13px;
        white-space: nowrap
    }

/* ARTICLE / GUIDE GRID */
.ps-article-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

.ps-article {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 18px
}

.ps-article-kicker {
    font-size: 10px;
    font-weight: 800;
    color: var(--ps-blue);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px
}

.ps-article h3 {
    font-size: 15px;
    margin: 0 0 6px
}

.ps-article p {
    font-size: 12px;
    color: var(--ps-muted);
    margin: 0
}

@media(max-width:820px) {
    .ps-article-grid {
        grid-template-columns: 1fr
    }
}

/* SEO COPY BLOCK */
.ps-seo-copy {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius);
    padding: 22px 24px
}

    .ps-seo-copy h2 {
        font-size: 18px;
        margin: 0 0 10px
    }

    .ps-seo-copy p {
        font-size: 13px;
        color: var(--ps-muted);
        line-height: 1.75;
        margin: 0 0 12px
    }

        .ps-seo-copy p:last-child {
            margin-bottom: 0
        }

/* FAQ */
.ps-faq details {
    border: 1px solid var(--ps-line);
    border-radius: 13px;
    background: var(--ps-surface);
    padding: 3px 15px;
    margin-bottom: 9px
}

.ps-faq summary {
    padding: 13px 0;
    cursor: pointer;
    font-weight: 750;
    font-size: 14px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

    .ps-faq summary::-webkit-details-marker {
        display: none
    }

    .ps-faq summary:after {
        content: "+";
        font-size: 18px;
        color: var(--ps-blue);
        flex: none
    }

.ps-faq details[open] summary:after {
    content: "−"
}

.ps-faq p {
    margin: 0 0 13px;
    color: var(--ps-muted);
    font-size: 13px;
    line-height: 1.6
}

/* NEWSLETTER */
.ps-newsletter {
    background: var(--ps-surface-2);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-r-lg);
    padding: 30px;
    text-align: center
}

    .ps-newsletter h2 {
        margin: 0 0 6px;
        font-size: 20px
    }

    .ps-newsletter p {
        margin: 0 0 16px;
        color: var(--ps-muted);
        font-size: 13px
    }

.ps-newsletter-row {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    gap: 8px
}

    .ps-newsletter-row input {
        flex: 1;
        min-width: 0;
        height: 44px;
        border: 1px solid var(--ps-line);
        border-radius: 9px;
        background: var(--ps-surface);
        color: var(--ps-ink);
        padding: 0 12px;
        outline: none
    }

    .ps-newsletter-row button {
        height: 44px;
        padding: 0 20px;
        border: 0;
        border-radius: 9px;
        background: var(--ps-blue);
        color: #fff;
        font-weight: 800;
        font-size: 13px;
        cursor: pointer
    }

/* FOOTER */
.ps-footer {
    margin-top: 10px;
    text-align: left;
    padding: 34px 22px 18px;
    border-top: 1px solid var(--ps-line);
    background: var(--ps-surface);
    color: var(--ps-muted);
    font-size: 12px
}

.ps-footer-grid {
    width: min(1440px,calc(100% - 40px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 24px
}

.ps-footer-col h4 {
    color: var(--ps-ink);
    font-size: 13px;
    margin: 0 0 12px
}

.ps-footer-col p {
    margin: 0;
    max-width: 280px
}

.ps-footer-col a {
    display: block;
    color: var(--ps-muted);
    font-size: 12px;
    padding: 5px 0
}

    .ps-footer-col a:hover {
        color: var(--ps-blue)
    }

.ps-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap
}

    .ps-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid var(--ps-line);
        border-radius: 9px;
        background: var(--ps-bg);
        color: var(--ps-muted);
        text-decoration: none
    }

        .ps-social a:hover {
            color: var(--ps-blue);
            border-color: var(--ps-blue);
            background: var(--ps-surface)
        }

    .ps-social svg {
        display: block;
        width: 18px !important;
        height: 18px !important;
        max-width: 18px;
        max-height: 18px;
        flex: 0 0 18px
    }

.ps-footer-bottom {
    width: min(1440px,calc(100% - 40px));
    margin: 22px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--ps-line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px
}

@media(max-width:900px) {
    .ps-footer-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:560px) {
    .ps-footer-grid {
        grid-template-columns: 1fr
    }
}

/* =========================================================
   PhoneScope Home V7 - desktop editorial two-column layout
   Left: hero + discovery content
   Right: price + trending + popular, starting beside the hero
   ========================================================= */
.ps-home-layout {
    width: min(1440px,calc(100% - 40px));
    margin: 0 auto 34px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 430px;
    gap: 20px;
    align-items: start
}

.ps-home-left {
    min-width: 0
}

.ps-home-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 78px
}

.ps-hero {
    padding: 38px 18px 18px;
    text-align: center
}

.ps-hero-kicker {
    margin-bottom: 12px
}

.ps-hero h1 {
    font-size: clamp(31px,3.4vw,46px);
    line-height: 1.08;
    margin-bottom: 14px
}

    .ps-hero h1 span {
        color: var(--ps-blue)
    }

.ps-hero p {
    max-width: 820px;
    margin-bottom: 22px;
    font-size: 14px
}

.ps-hero-search {
    max-width: 900px
}

.ps-hero-grid {
    max-width: none;
    margin-top: 16px;
    gap: 9px
}

.ps-hero-stat {
    padding: 12px 8px
}

    .ps-hero-stat b {
        font-size: 20px
    }

.ps-home-section {
    width: 100%;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-r-lg);
    box-shadow: var(--ps-shadow)
}

    .ps-home-section .ps-section-head {
        margin-bottom: 2px
    }

        .ps-home-section .ps-section-head h2 {
            font-size: 21px
        }

    .ps-home-section .ps-section-lead {
        margin-bottom: 13px;
        max-width: 850px
    }

.ps-side-widget {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-r-lg);
    box-shadow: var(--ps-shadow);
    padding: 14px
}

.ps-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px
}

    .ps-side-head h2 {
        font-size: 20px;
        line-height: 1.2;
        margin: 0;
        letter-spacing: -.02em
    }

    .ps-side-head a {
        font-size: 12px;
        font-weight: 850;
        color: var(--ps-blue);
        white-space: nowrap
    }

    .ps-side-head > div h2 {
        margin: 0 0 2px
    }

    .ps-side-head > div p {
        margin: 0;
        color: var(--ps-muted);
        font-size: 11px
    }

.ps-price-panel {
    padding: 16px
}

.ps-price-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px
}

    .ps-price-list a {
        min-height: 48px;
        padding: 11px 12px;
        font-size: 12px
    }

.ps-side-widget .ps-phone-list {
    gap: 8px
}

.ps-side-widget .ps-phone-row {
    grid-template-columns: 76px minmax(0,1fr) 18px;
    gap: 11px;
    min-height: 91px;
    padding: 8px 9px;
    border-radius: 12px
}

.ps-side-widget .ps-phone-thumb {
    width: 68px;
    height: 74px;
    border-radius: 9px
}

    .ps-side-widget .ps-phone-thumb img {
        width: 56px;
        height: 70px
    }

.ps-side-widget .ps-phone-title {
    font-size: 14px;
    margin-bottom: 4px
}

.ps-side-widget .ps-phone-badge {
    display: none
}

.ps-side-widget .ps-phone-price-line {
    gap: 6px;
    margin-bottom: 3px
}

.ps-side-widget .ps-phone-price {
    font-size: 14px
}

.ps-side-widget .ps-phone-score {
    font-size: 11px
}

.ps-side-widget .ps-phone-specs {
    font-size: 10.5px
}

.ps-side-widget .ps-phone-chevron svg {
    width: 18px;
    height: 18px
}

.ps-inline-note {
    display: inline-block;
    margin: 0 0 0 8px;
    color: var(--ps-muted);
    font-size: 11px;
    font-weight: 500
}

.ps-compact-section {
    padding-bottom: 14px
}

    .ps-compact-section .ps-mini-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 9px
    }

    .ps-compact-section .ps-mini-card {
        padding: 10px;
        border-radius: 12px
    }

    .ps-compact-section .ps-mini-visual {
        height: 112px;
        margin-bottom: 8px
    }

        .ps-compact-section .ps-mini-visual img {
            width: 78px;
            height: 100px
        }

    .ps-compact-section .ps-mini-brand {
        font-size: 9px
    }

    .ps-compact-section .ps-mini-title {
        font-size: 12px;
        margin-bottom: 4px
    }

    .ps-compact-section .ps-mini-spec {
        font-size: 9.5px;
        margin-bottom: 7px
    }

    .ps-compact-section .ps-mini-price {
        font-size: 13px
    }

    .ps-compact-section .ps-mini-cta {
        font-size: 10px
    }

    .ps-compact-section .ps-upcoming-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 9px
    }

    .ps-compact-section .ps-upcoming-card {
        padding: 9px;
        border-radius: 12px;
        min-height: 108px
    }

    .ps-compact-section .ps-upcoming-visual {
        height: 74px
    }

        .ps-compact-section .ps-upcoming-visual img {
            max-height: 68px
        }

    .ps-compact-section .ps-upcoming-info h4 {
        font-size: 11px
    }

    .ps-compact-section .ps-upcoming-info p {
        font-size: 9px
    }

    .ps-compact-section .ps-upcoming-tag {
        font-size: 9px
    }

@media(max-width:1250px) {
    .ps-home-layout {
        grid-template-columns: minmax(0,1fr) 360px;
        gap: 16px
    }

    .ps-compact-section .ps-mini-grid, .ps-compact-section .ps-upcoming-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:920px) {
    .ps-home-layout {
        grid-template-columns: 1fr;
        width: min(100% - 24px,1440px)
    }

    .ps-home-right {
        position: static;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .ps-home-right .ps-price-panel {
            grid-column: 1/-1
        }

        .ps-home-right .ps-side-widget:not(.ps-price-panel) {
            min-width: 0
        }

    .ps-hero {
        padding-top: 28px
    }
}

@media(max-width:620px) {
    .ps-home-layout {
        width: calc(100% - 20px);
        gap: 12px
    }

    .ps-home-right {
        display: flex;
        flex-direction: column;
        gap: 12px
    }

    .ps-home-section {
        padding: 12px;
        margin-bottom: 12px
    }

    .ps-hero {
        padding: 22px 5px 12px
    }

        .ps-hero h1 {
            font-size: 30px
        }

            .ps-hero h1 br {
                display: none
            }

        .ps-hero p {
            font-size: 12px
        }

    .ps-home-section .ps-section-head h2, .ps-side-head h2 {
        font-size: 18px
    }

    .ps-inline-note {
        display: block;
        margin: 2px 0 0;
        font-size: 10px
    }

    .ps-compact-section .ps-mini-grid, .ps-compact-section .ps-upcoming-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:420px) {
    .ps-price-list {
        grid-template-columns: 1fr
    }

    .ps-side-widget .ps-phone-row {
        grid-template-columns: 66px minmax(0,1fr) 18px
    }

    .ps-side-widget .ps-phone-thumb {
        width: 60px;
        height: 68px
    }

        .ps-side-widget .ps-phone-thumb img {
            width: 50px;
            height: 64px
        }

    .ps-side-widget .ps-phone-title {
        font-size: 13px
    }

    .ps-side-widget .ps-phone-specs {
        font-size: 9.5px
    }
}

/* =========================================================
   PhoneScope Pro: editorial content styles merged from mobiledetails.css
   ========================================================= */
/* PhoneScope Editorial Content: clean, readable, theme-safe */
.ps-content {
    position: relative;
    overflow: hidden;
}

    .ps-content::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: -95px;
        top: -95px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(37,99,235,.08),rgba(37,99,235,0) 70%);
        pointer-events: none;
    }

.ps-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #2563eb;
}

    .ps-kicker .dot {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
        border-radius: 50%;
        background: #2563eb;
        box-shadow: 0 0 0 5px rgba(37,99,235,.10);
    }

.ps-content h2 {
    position: relative;
    z-index: 2;
    margin-bottom: 7px;
}

.ps-subtitle {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.ps-longform {
    position: relative;
    z-index: 2;
    margin-top: 22px;
}

.ps-point-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    gap: 0;
}

    .ps-point-list li {
        position: relative;
        margin: 0;
        color: var(--text,#263041);
        font-size: 15.5px;
        line-height: 1.78;
    }

        .ps-point-list li::before {
            content: "";
            position: absolute;
            border-radius: 50%;
        }

/* Overview: editorial bullets, not artificial cards */
.ps-overview {
    border-top: 3px solid #2563eb;
}

    .ps-overview .ps-longform {
        padding-left: 25px;
        border-left: 2px solid #dbeafe;
    }

    .ps-overview .ps-point-list li {
        padding: 0 0 17px 22px;
        margin: 0 0 17px;
        border-bottom: 1px solid var(--border,#e7edf4);
        background: transparent;
    }

        .ps-overview .ps-point-list li:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: 0;
        }

        .ps-overview .ps-point-list li::before {
            left: 0;
            top: 10px;
            width: 8px;
            height: 8px;
            background: #2563eb;
            box-shadow: 0 0 0 5px rgba(37,99,235,.10);
        }

    .ps-overview .ps-content-meta {
        margin-top: 20px;
    }

/* Expert Review: editorial analyst notes */
.ps-expert {
    background: var(--card,#fff);
}

    .ps-expert .ps-review-frame {
        position: relative;
        margin-top: 22px;
        padding: 24px 30px 25px;
        border: 1px solid var(--border,#e2e8f0);
        border-radius: 18px;
        background: var(--card-soft,#f8fafc);
        box-shadow: 0 8px 24px rgba(15,23,42,.045);
    }

        .ps-expert .ps-review-frame::before {
            content: "“";
            position: absolute;
            left: 12px;
            top: -8px;
            font: 800 58px/1 Georgia,serif;
            color: #2563eb;
            opacity: .16;
        }

.ps-review-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 15px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ps-expert .ps-longform {
    margin-top: 0;
}

.ps-expert .ps-point-list li {
    padding: 0 0 17px 27px;
    margin: 0 0 17px;
    border-bottom: 1px solid var(--border,#e5e7eb);
    font-size: 15.5px;
    line-height: 1.82;
}

    .ps-expert .ps-point-list li:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .ps-expert .ps-point-list li::before {
        left: 4px;
        top: 11px;
        width: 7px;
        height: 7px;
        background: #2563eb;
        box-shadow: 0 0 0 4px rgba(37,99,235,.10);
    }

/* Before You Buy: practical checklist */
.ps-buying {
    background: var(--card,#fff);
    color: var(--text,#263041);
    border-color: var(--border,#e2e8f0);
}

    .ps-buying h2 {
        color: var(--text,#172033);
    }

    .ps-buying .ps-subtitle {
        color: var(--muted,#667085);
    }

.ps-guide-wrap {
    position: relative;
    margin-top: 22px;
    padding: 4px 0 4px 34px;
}

    .ps-guide-wrap::before {
        content: "";
        position: absolute;
        left: 9px;
        top: 12px;
        bottom: 12px;
        width: 2px;
        background: linear-gradient(#60a5fa,#22d3ee,#34d399);
        border-radius: 3px;
    }

.ps-buying .ps-longform {
    margin-top: 0;
}

.ps-buying .ps-point-list {
    gap: 12px;
}

    .ps-buying .ps-point-list li {
        padding: 16px 19px 16px 20px;
        border: 1px solid var(--border,#dbe3ed);
        border-radius: 14px;
        background: var(--card-soft,#f8fafc);
        box-shadow: 0 4px 14px rgba(15,23,42,.035);
        line-height: 1.72;
    }

        .ps-buying .ps-point-list li::before {
            content: "✓";
            left: -35px;
            top: 13px;
            width: 23px;
            height: 23px;
            display: grid;
            place-items: center;
            background: var(--card,#fff);
            border: 2px solid #60a5fa;
            color: #2563eb;
            font-size: 12px;
            font-weight: 900;
        }

.ps-content-meta {
    margin: 20px 0 0;
    font-size: 12px;
    color: var(--muted,#7a8495);
}

    .ps-content-meta strong {
        color: var(--text,#263041);
    }

/* Dark theme */
html[data-theme="dark"] .ps-content {
    color: #e5edf8;
}

html[data-theme="dark"] .ps-overview {
    border-top-color: #60a5fa;
}

    html[data-theme="dark"] .ps-overview .ps-longform {
        border-left-color: rgba(96,165,250,.35);
    }

    html[data-theme="dark"] .ps-overview .ps-point-list li {
        color: #dbe7f5;
        border-bottom-color: #334155;
    }

html[data-theme="dark"] .ps-expert {
    background: var(--card,#111827);
}

    html[data-theme="dark"] .ps-expert .ps-review-frame {
        background: #182235;
        border-color: #334155;
        box-shadow: 0 10px 28px rgba(0,0,0,.22);
    }

    html[data-theme="dark"] .ps-expert .ps-point-list li {
        color: #dce6f3;
        border-bottom-color: #334155;
    }

html[data-theme="dark"] .ps-review-label {
    background: rgba(59,130,246,.16);
    color: #93c5fd;
}

html[data-theme="dark"] .ps-buying {
    background: var(--card,#111827);
    color: #e5edf8;
    border-color: #334155;
}

    html[data-theme="dark"] .ps-buying h2 {
        color: #f8fafc;
    }

    html[data-theme="dark"] .ps-buying .ps-subtitle {
        color: #aebdce;
    }

    html[data-theme="dark"] .ps-buying .ps-point-list li {
        color: #e5edf8;
        background: #182235;
        border-color: #334155;
        box-shadow: 0 6px 18px rgba(0,0,0,.20);
    }

        html[data-theme="dark"] .ps-buying .ps-point-list li::before {
            background: #182235;
            border-color: #60a5fa;
            color: #93c5fd;
        }

html[data-theme="dark"] .ps-content-meta {
    color: #94a3b8;
}

    html[data-theme="dark"] .ps-content-meta strong {
        color: #dbe7f5;
    }

@media(max-width:720px) {
    .ps-longform .ps-point-list li {
        font-size: 14.5px;
        line-height: 1.72;
    }

    .ps-overview .ps-longform {
        padding-left: 16px;
    }

    .ps-overview .ps-point-list li {
        padding-left: 19px;
    }

    .ps-expert .ps-review-frame {
        padding: 20px 18px 21px;
        border-radius: 15px;
    }

    .ps-expert .ps-point-list li {
        font-size: 14.5px;
        padding-left: 25px;
    }

    .ps-guide-wrap {
        padding-left: 27px;
    }

    .ps-buying .ps-point-list li {
        padding: 14px 15px 14px 17px;
        font-size: 14px;
    }

        .ps-buying .ps-point-list li::before {
            left: -29px;
        }
}

/* =========================================================
   PhoneScope Pro: overflow and responsive safety rules formerly inline
   ========================================================= */
/* PhoneScope MobileDetails: production overflow hardening */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.wrap, .layout, .layout > div, .side-col,
.card, .section, .hero, .hero-grid, .visual, .copy,
.ps-content, .ps-longform, .rec-card, .side-widget {
    min-width: 0;
    max-width: 100%;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

.ps-longform, .lead, .meta, .price-note,
.spec-panel, .deal-box, .rec-grid, .side-phone-list {
    overflow-wrap: anywhere;
    word-break: normal;
}

.toc {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

#specPanels, #offersTable, .compare-matrix {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    #specPanels table, #offersTable table, .matrix-table {
        min-width: 560px;
    }

.variant-chips, .offers-row {
    max-width: 100%;
    min-width: 0;
}

.variant-chips {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

@media (max-width: 767px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .visual {
        overflow: hidden;
    }

    .copy {
        width: 100%;
    }

    .offers-row {
        flex-wrap: wrap;
    }

        .offers-row .offer {
            max-width: 100%;
        }

    .compare-block,
    .compare-mobile,
    .compare-phone {
        min-width: 0;
        max-width: 100%;
    }
}


/* =========================================================
   PhoneScope Pro hotfix: prevent page-level horizontal scrolling
   Keep intentional horizontal scrolling confined to tabs/tables.
   ========================================================= */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

main.wrap,
.wrap,
.layout,
.layout > *,
.layout .card,
.layout .rec-card,
.layout .section,
.layout .hero,
.hero-grid,
.hero-grid > *,
.copy,
.side-col,
.side-widget,
.rec-grid,
.rec-list-card,
.rec-list-info,
.compare-block,
.compare-phone,
.compare-info,
.verdict-grid,
.pc,
.pricehist,
.meta,
.high,
.offers-row,
#specPanels,
#offersTable,
#similar,
#related,
#compare {
    min-width: 0;
    max-width: 100%;
}

.layout {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 290px;
}

    .layout > * {
        overflow-wrap: anywhere;
    }

img, svg, video, canvas, iframe {
    max-width: 100%;
}

.copy h1,
.rec-list-info h3,
.offer-title,
.offer-color,
.deal-section-text,
.ps-content,
.ps-content * {
    overflow-wrap: anywhere;
    word-break: normal;
}

#specPanels,
#offersTable,
.compare-matrix,
.spec-tabs,
.toc {
    min-width: 0;
    max-width: 100%;
}

#specPanels,
#offersTable,
.compare-matrix {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

    #specPanels table,
    #offersTable table,
    .matrix-table {
        max-width: none;
    }

@media (max-width: 1000px) {
    .layout {
        grid-template-columns: minmax(0, 1fr) 260px;
    }
}

@media (max-width: 760px) {
    .layout {
        grid-template-columns: minmax(0, 1fr);
    }

        .layout > *,
        .side-col,
        .hero-grid,
        .hero-grid > *,
        .compare-phone {
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }

    .compare-phone {
        grid-template-columns: minmax(0, 100px) minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .wrap,
    .ps-wrap {
        width: calc(100% - 18px);
        max-width: calc(100% - 18px);
    }

    .section,
    .hero,
    .rec-card {
        min-width: 0;
        max-width: 100%;
    }

    .row {
        grid-template-columns: minmax(90px, 34%) minmax(0, 1fr);
    }

    .compare-block {
        grid-template-columns: minmax(0, 1fr);
    }

    .compare-phone {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 8px;
    }

        .compare-phone img {
            width: 78px;
            max-width: 100%;
        }
}


/* =====================================================================
   PhoneScope - Mobile Details "Pro" layer
   Load AFTER mobiledetails.css. Uses the same tokens, so light/dark
   (html[data-theme="dark"]) keeps working. One font family, no @import.
   ===================================================================== */

/* ---------- 1. Tokens: font + colour ---------- */
:root {
    --font: "Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-display: var(--font);
    --bg: #f4f6fb;
    --surface: #fff;
    --surface-2: #f1f4fa;
    --ink: #0b1220;
    --muted: #566277;
    --line: #e2e8f2;
    --accent: #2b50f5;
    --accent-2: #1f3fd0;
    --accent-soft: #eaf0ff;
    --good: #0e9f6e;
    --good-bg: #e5f7ef;
    --danger: #dc2626;
    --grad: linear-gradient(135deg,#2b50f5 0%,#6a4cff 100%);
    --shadow: 0 1px 2px rgba(11,18,32,.05),0 8px 24px rgba(11,18,32,.06);
    --shadow-lg: 0 18px 44px rgba(11,18,32,.14);
    --radius: 16px;
    --radius-sm: 11px;
}

html[data-theme="dark"], html[data-ps-theme="dark"] {
    --bg: #0b1220;
    --surface: #111a2b;
    --surface-2: #17223a;
    --ink: #e9eef9;
    --muted: #97a6bf;
    --line: #22304a;
    --accent: #7ea2ff;
    --accent-2: #a6bfff;
    --accent-soft: #16233f;
    --good: #34d399;
    --good-bg: #0d2a1f;
    --grad: linear-gradient(135deg,#5b82ff 0%,#8f78ff 100%);
    --shadow: none;
    --shadow-lg: 0 18px 44px rgba(0,0,0,.55);
}

html {
    overflow-x: clip;
    scroll-padding-top: calc(var(--header-h,62px) + 64px)
}

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.62;
    background: var(--bg);
    color: var(--ink);
    text-rendering: optimizeLegibility
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    text-wrap: balance
}

main.wrap :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px
}

.visually-hidden, .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

/* ---------- 2. Breadcrumb ---------- */
main.wrap .crumb {
    padding: 16px 0 8px;
    font-size: 12.5px;
    color: var(--muted)
}

    main.wrap .crumb a {
        color: var(--accent);
        font-weight: 600
    }

        main.wrap .crumb a:hover {
            text-decoration: underline
        }

/* ---------- 3. Sticky jump section ---------- */
main.wrap .toc {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin: 4px 0 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    main.wrap .toc::-webkit-scrollbar {
        display: none
    }

main.wrap .toc-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 6px 0 4px;
    white-space: nowrap
}

main.wrap .toc a {
    flex: none;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--muted);
    background: transparent;
    white-space: nowrap;
    transition: background .18s,color .18s,border-color .18s,transform .18s;
}

    main.wrap .toc a:hover {
        color: var(--accent);
        background: var(--accent-soft)
    }

    main.wrap .toc a.active {
        color: #fff;
        background: var(--grad);
        border-color: transparent;
        box-shadow: 0 4px 14px rgba(43,80,245,.32)
    }

@media (min-width:992px) {
    main.wrap .toc {
        position: sticky;
        top: calc(var(--header-h,62px) + 8px);
        z-index: 40;
        backdrop-filter: saturate(1.4) blur(10px);
        -webkit-backdrop-filter: saturate(1.4) blur(10px);
        background: color-mix(in srgb,var(--surface) 90%,transparent);
    }
}

/* ---------- 4. Layout + cards ---------- */
main.wrap .layout {
    gap: 22px
}

main.wrap .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow)
}

main.wrap .section {
    padding: 22px 22px 24px;
    margin-top: 18px
}

    main.wrap .section h2,
    main.wrap .rec-head h2 {
        position: relative;
        margin: 0 0 6px;
        padding-left: 14px;
        font-size: clamp(18px,2.1vw,22px);
        font-weight: 800;
        line-height: 1.25;
    }

        main.wrap .section h2::before,
        main.wrap .rec-head h2::before {
            content: "";
            position: absolute;
            left: 0;
            top: .18em;
            bottom: .18em;
            width: 4px;
            border-radius: 4px;
            background: var(--grad)
        }

    main.wrap .section p.lead,
    main.wrap .rec-head p {
        color: var(--muted);
        font-size: 14px;
        margin: 0 0 14px;
        padding-left: 14px
    }

    main.wrap .section h3 {
        font-size: 16px;
        font-weight: 750
    }

/* ---------- 5. Hero ---------- */
main.wrap .hero {
    padding: 0;
    overflow: hidden;
    position: relative;
    background: radial-gradient(900px 300px at 100% -10%,rgba(106,76,255,.10),transparent 60%), radial-gradient(700px 260px at -5% 110%,rgba(43,80,245,.09),transparent 60%), var(--surface);
}

main.wrap .hero-grid {
    display: grid;
    grid-template-columns: minmax(220px,300px) minmax(0,1fr);
    gap: 28px;
    padding: 26px
}

main.wrap .hero .visual {
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 20px;
    padding: 22px 16px;
    background: radial-gradient(circle at 50% 40%,var(--accent-soft),transparent 70%),var(--surface-2);
    border: 1px solid var(--line);
}

    main.wrap .hero .visual img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 340px;
        object-fit: contain;
        filter: drop-shadow(0 18px 24px rgba(11,18,32,.22))
    }

main.wrap .score-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    background: var(--grad);
    box-shadow: 0 6px 16px rgba(43,80,245,.35)
}

main.wrap .hero .tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase
}

main.wrap .hero h1 {
    margin: 10px 0 6px;
    font-size: clamp(25px,3.4vw,36px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.03em
}

main.wrap .byline {
    color: var(--muted);
    font-size: 13px
}

main.wrap .hero-lead {
    margin: 12px 0 14px
}

    main.wrap .hero-lead p, main.wrap .ps-seo-lead {
        margin: 0;
        font-size: 14.5px;
        line-height: 1.7;
        color: var(--muted)
    }

        main.wrap .hero-lead strong, main.wrap .ps-seo-lead strong {
            color: var(--ink);
            font-weight: 750
        }

        main.wrap .hero-lead a, main.wrap .ps-seo-lead a {
            color: var(--accent);
            font-weight: 650;
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 3px
        }

            main.wrap .hero-lead a:hover {
                text-decoration-thickness: 2px
            }

main.wrap .rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 6px 0 4px;
    font-size: 13px
}

main.wrap .stars {
    color: #f5a524;
    letter-spacing: 1px
}

main.wrap .hero .price {
    font-size: clamp(28px,4vw,38px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
    margin: 10px 0 2px;
    color: var(--ink)
}

main.wrap .price-note {
    color: var(--muted);
    font-size: 13px
}

main.wrap .variant-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 12px 0
}

main.wrap .vchip {
    flex: none;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    transition: all .18s
}

    main.wrap .vchip:hover {
        border-color: var(--accent);
        color: var(--accent)
    }

    main.wrap .vchip.active {
        background: var(--accent-soft);
        border-color: var(--accent);
        color: var(--accent)
    }

main.wrap .offers-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 10px
}

main.wrap .offer, main.wrap .mini-offer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    border: 1px solid transparent;
    transition: transform .15s,box-shadow .15s
}

    main.wrap .offer:hover, main.wrap .mini-offer:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(11,18,32,.16)
    }

    main.wrap .offer.amazon, main.wrap .mini-offer.amazon {
        background: #ffb400;
        color: #231a00
    }

    main.wrap .offer.flip, main.wrap .mini-offer.flip {
        background: #2874f0;
        color: #fff
    }

main.wrap .compare-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1.5px dashed var(--accent);
    background: transparent;
    color: var(--accent);
    font-weight: 750;
    cursor: pointer;
    transition: all .18s
}

    main.wrap .compare-btn:hover {
        background: var(--accent-soft)
    }

main.wrap .meta {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
    gap: 10px;
    margin-top: 16px
}

    main.wrap .meta > div {
        padding: 11px 13px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface-2)
    }

    main.wrap .meta small {
        display: block;
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase
    }

    main.wrap .meta b {
        display: block;
        margin-top: 2px;
        font-size: 13.5px;
        font-weight: 750;
        line-height: 1.35
    }

/* ---------- 6. Editorial content ---------- */
main.wrap .ps-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px
}

    main.wrap .ps-kicker .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--grad)
    }

main.wrap .ps-longform {
    font-size: 15.5px;
    line-height: 1.78;
    color: var(--ink);
    max-width: 78ch
}

    main.wrap .ps-longform p {
        margin: 0 0 1.05em
    }

    main.wrap .ps-longform h3 {
        margin: 1.4em 0 .5em;
        font-size: 17px
    }

    main.wrap .ps-longform a {
        color: var(--accent);
        text-decoration: underline;
        text-underline-offset: 3px
    }

main.wrap .ps-review-frame {
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--surface-2)
}

main.wrap .ps-review-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px
}

/* ---------- 7. Key highlights ---------- */
main.wrap .high {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
    gap: 12px
}

    main.wrap .high .hi {
        padding: 14px 16px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface-2);
        transition: transform .18s,border-color .18s
    }

        main.wrap .high .hi:hover {
            transform: translateY(-2px);
            border-color: var(--accent)
        }

        main.wrap .high .hi b {
            display: block;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: var(--accent)
        }

        main.wrap .high .hi span {
            display: block;
            margin-top: 4px;
            font-size: 14px;
            font-weight: 650;
            line-height: 1.4
        }

/* ---------- 8. Full specifications ---------- */
main.wrap .spec-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 14px;
    scrollbar-width: none
}

    main.wrap .spec-tabs::-webkit-scrollbar {
        display: none
    }

main.wrap .spec-tab {
    flex: none;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s
}

    main.wrap .spec-tab:hover {
        color: var(--accent);
        border-color: var(--accent)
    }

    main.wrap .spec-tab.active {
        background: var(--grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 4px 14px rgba(43,80,245,.3)
    }

main.wrap #specPanels {
    overflow: visible;
    max-width: 100%
}

    main.wrap #specPanels.is-all {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 16px;
        align-items: start
    }

        main.wrap #specPanels.is-all .spec-panel {
            display: block !important
        }

    main.wrap #specPanels:not(.is-all) {
        display: block
    }

main.wrap .spec-panel {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden
}

main.wrap .spec-group-title {
    margin: 0;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line)
}

main.wrap #specPanels table.spec-table {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed
}

main.wrap .spec-table th, main.wrap .spec-table td {
    padding: 10px 16px;
    text-align: left;
    vertical-align: top;
    font-size: 13.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--line)
}

main.wrap .spec-table tr:last-child th, main.wrap .spec-table tr:last-child td {
    border-bottom: 0
}

main.wrap .spec-table th {
    width: 38%;
    font-weight: 600;
    color: var(--muted)
}

main.wrap .spec-table td {
    font-weight: 700;
    color: var(--ink)
}

main.wrap .spec-table tr:nth-child(even) {
    background: color-mix(in srgb,var(--surface-2) 55%,transparent)
}

@media (max-width:860px) {
    main.wrap #specPanels.is-all {
        grid-template-columns: minmax(0,1fr)
    }
}

/* ---------- 9. Offers, pros/cons, verdict, price history ---------- */
main.wrap .pc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

    main.wrap .pc > div {
        padding: 16px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: var(--surface-2)
    }

        main.wrap .pc > div:first-child {
            border-top: 3px solid var(--good)
        }

        main.wrap .pc > div:last-child {
            border-top: 3px solid var(--danger)
        }

main.wrap .verdict-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 12px
}

    main.wrap .verdict-grid .buy, main.wrap .verdict-grid .skip {
        padding: 16px;
        border-radius: 14px;
        border: 1px solid var(--line)
    }

    main.wrap .verdict-grid .buy {
        background: var(--good-bg)
    }

    main.wrap .verdict-grid .skip {
        background: color-mix(in srgb,var(--danger) 8%,var(--surface))
    }

@media (max-width:640px) {
    main.wrap .pc, main.wrap .verdict-grid {
        grid-template-columns: 1fr
    }
}

/* ---------- 10. Related / similar image cards ---------- */
main.wrap .rec-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    margin-top: 18px
}

main.wrap .rec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px
}

    main.wrap .rec-head p {
        padding-left: 14px;
        margin: 0
    }

main.wrap .rec-view {
    flex: none;
    font-size: 13px;
    font-weight: 750;
    color: var(--accent);
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--accent-soft)
}

    main.wrap .rec-view:hover {
        text-decoration: underline
    }

main.wrap .rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
    gap: 14px
}

.ps-pcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    overflow: hidden;
    transition: transform .2s,box-shadow .2s,border-color .2s;
    color: var(--ink)
}

    .ps-pcard:hover {
        transform: translateY(-3px);
        border-color: var(--accent);
        box-shadow: var(--shadow-lg)
    }

.ps-pcard-media {
    display: grid;
    place-items: center;
    padding: 16px 12px 6px;
    background: radial-gradient(circle at 50% 45%,var(--accent-soft),transparent 72%),var(--surface-2)
}

    .ps-pcard-media img {
        width: auto;
        max-width: 100%;
        height: 170px;
        object-fit: contain;
        filter: drop-shadow(0 10px 14px rgba(11,18,32,.2));
        transition: transform .25s
    }

.ps-pcard:hover .ps-pcard-media img {
    transform: scale(1.05)
}

.ps-pcard-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px 14px;
    flex: 1
}

.ps-pcard-brand {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent)
}

.ps-pcard-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -.01em
}

.ps-pcard-price {
    font-size: 15px;
    font-weight: 800
}

    .ps-pcard-price small {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--muted)
    }

.ps-pcard-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px
}

    .ps-pcard-chips i {
        font-style: normal;
        padding: 3px 8px;
        border-radius: 999px;
        background: var(--surface-2);
        border: 1px solid var(--line);
        font-size: 11px;
        font-weight: 650;
        color: var(--muted)
    }

.ps-pcard-cta {
    margin-top: auto;
    padding-top: 8px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--accent)
}

    .ps-pcard-cta b {
        display: inline-block;
        transition: transform .2s
    }

.ps-pcard:hover .ps-pcard-cta b {
    transform: translateX(4px)
}

/* ---------- 11. Sidebar ---------- */
main.wrap .side-col .card, main.wrap .side-widget {
    border-radius: var(--radius)
}

main.wrap .side-widget {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 16px;
    margin-top: 16px
}

main.wrap .side-widget-head h2 {
    font-size: 16px;
    margin: 0
}

main.wrap .side-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    transition: background .15s
}

    main.wrap .side-phone:hover {
        background: var(--accent-soft)
    }

main.wrap .side-thumb img {
    width: 48px;
    height: 64px;
    object-fit: contain
}

main.wrap .side-title {
    font-size: 13.5px;
    font-weight: 750;
    line-height: 1.3
}

/* ---------- 12. Performance: skip rendering below-the-fold work ---------- */
main.wrap #highlights, main.wrap #offers, main.wrap #proscons, main.wrap #review,
main.wrap #pricehist, main.wrap #similar, main.wrap #related, main.wrap #compare {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
}

/* ---------- 13. Mobile ---------- */
@media (max-width:760px) {
    main.wrap .section, main.wrap .rec-card {
        padding: 16px 15px 18px;
        margin-top: 14px
    }

    main.wrap .hero-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 16px;
        padding: 16px
    }

    main.wrap .hero .visual {
        padding: 16px 10px
    }

        main.wrap .hero .visual img {
            max-height: 240px
        }

    main.wrap .offers-row .offer {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        padding: 0 12px
    }

    main.wrap .compare-btn {
        width: 100%
    }

    main.wrap .rec-head {
        flex-direction: column;
        align-items: flex-start
    }

    main.wrap .rec-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px
    }

    .ps-pcard-media img {
        height: 140px
    }

    .ps-pcard-body {
        padding: 10px 11px 12px
    }

    main.wrap .ps-longform {
        font-size: 15px;
        line-height: 1.72
    }

    main.wrap .toc {
        border-radius: 12px;
        margin-bottom: 10px
    }

    main.wrap .spec-table th, main.wrap .spec-table td {
        padding: 9px 12px;
        font-size: 13px
    }

    main.wrap .spec-table th {
        width: 42%
    }
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important
    }
}

/* =========================================================
   Phone comparison cards (Popular + Explore more)
   Uses this stylesheet's existing --bg/--surface/--surface-2/
   --ink/--muted/--line/--accent tokens. No separate theme system.
   ========================================================= */

/* Section wrappers: support common existing ASPX IDs/classes */
#popularPhoneComparisons,
#exploreMoreComparisons,
#popular-comparisons,
#explore-more-comparisons,
.popular-phone-comparisons,
.explore-more-comparisons,
.popular-comparisons,
.explore-comparisons,
.compare-recommendations,
.phone-comparison-list {
    min-width: 0;
    color: var(--ink);
}

    /* Card shell */
    #popularPhoneComparisons .comparison-card,
    #exploreMoreComparisons .comparison-card,
    #popular-comparisons .comparison-card,
    #explore-more-comparisons .comparison-card,
    .popular-phone-comparisons .comparison-card,
    .explore-more-comparisons .comparison-card,
    .popular-comparisons .comparison-card,
    .explore-comparisons .comparison-card,
    .compare-recommendations .comparison-card,
    .phone-comparison-list .comparison-card,
    #popularPhoneComparisons .compare-card,
    #exploreMoreComparisons .compare-card,
    #popular-comparisons .compare-card,
    #explore-more-comparisons .compare-card,
    .popular-phone-comparisons .compare-card,
    .explore-more-comparisons .compare-card,
    .popular-comparisons .compare-card,
    .explore-comparisons .compare-card,
    .compare-recommendations .compare-card,
    .phone-comparison-list .compare-card,
    .compare-recommendation-card,
    .phone-compare-card,
    .explore-compare-card {
        display: grid;
        grid-template-columns: minmax(190px, 42%) minmax(0, 1fr);
        align-items: stretch;
        width: 100%;
        min-width: 0;
        margin: 0 0 14px;
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 17px;
        background: var(--surface);
        color: var(--ink);
        box-shadow: var(--shadow);
        text-decoration: none;
        transition: border-color var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease);
    }

        #popularPhoneComparisons .comparison-card:hover,
        #exploreMoreComparisons .comparison-card:hover,
        #popular-comparisons .comparison-card:hover,
        #explore-more-comparisons .comparison-card:hover,
        .popular-phone-comparisons .comparison-card:hover,
        .explore-more-comparisons .comparison-card:hover,
        .popular-comparisons .comparison-card:hover,
        .explore-comparisons .comparison-card:hover,
        .compare-recommendations .comparison-card:hover,
        .phone-comparison-list .comparison-card:hover,
        .compare-recommendation-card:hover,
        .phone-compare-card:hover,
        .explore-compare-card:hover {
            border-color: var(--accent);
            box-shadow: var(--shadow-lg);
            transform: translateY(-1px);
        }

        /* Left image panel; supports .compare-phones or .phone-pair wrappers */
        .comparison-card .compare-phones,
        .compare-card .compare-phones,
        .compare-recommendation-card .compare-phones,
        .phone-compare-card .compare-phones,
        .explore-compare-card .compare-phones,
        .comparison-card .phone-pair,
        .compare-card .phone-pair,
        .compare-recommendation-card .phone-pair,
        .phone-compare-card .phone-pair,
        .explore-compare-card .phone-pair {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
            align-items: center;
            gap: 6px;
            min-width: 0;
            padding: 14px 10px 12px;
            background: var(--surface-2);
            border-right: 1px solid var(--line);
        }

        .comparison-card .phone-item,
        .compare-card .phone-item,
        .compare-recommendation-card .phone-item,
        .phone-compare-card .phone-item,
        .explore-compare-card .phone-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-width: 0;
            width: 100%;
            text-align: center;
        }

            .comparison-card .phone-item img,
            .compare-card .phone-item img,
            .compare-recommendation-card .phone-item img,
            .phone-compare-card .phone-item img,
            .explore-compare-card .phone-item img,
            .comparison-card .phone-image,
            .compare-card .phone-image,
            .compare-recommendation-card .phone-image,
            .phone-compare-card .phone-image,
            .explore-compare-card .phone-image {
                display: block;
                width: 100%;
                max-width: 78px;
                height: 98px;
                margin: 0 auto;
                object-fit: contain;
                object-position: center;
                border-radius: 8px;
                background: transparent;
            }

            .comparison-card .phone-name,
            .compare-card .phone-name,
            .compare-recommendation-card .phone-name,
            .phone-compare-card .phone-name,
            .explore-compare-card .phone-name,
            .comparison-card .phone-item a,
            .compare-card .phone-item a {
                display: -webkit-box;
                max-width: 100%;
                margin: 0;
                overflow: hidden;
                color: var(--ink);
                font-size: 11.5px;
                line-height: 1.3;
                font-weight: 750;
                text-align: center;
                text-overflow: ellipsis;
                overflow-wrap: anywhere;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

        .comparison-card .vs,
        .compare-card .vs,
        .compare-recommendation-card .vs,
        .phone-compare-card .vs,
        .explore-compare-card .vs {
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            border: 1px solid var(--line);
            border-radius: 50%;
            background: var(--surface);
            color: var(--muted);
            font-size: 10px;
            font-weight: 850;
        }

        /* Right content panel */
        .comparison-card .comparison-info,
        .compare-card .comparison-info,
        .compare-recommendation-card .comparison-info,
        .phone-compare-card .comparison-info,
        .explore-compare-card .comparison-info,
        .comparison-card .compare-content,
        .compare-card .compare-content,
        .compare-recommendation-card .compare-content,
        .phone-compare-card .compare-content,
        .explore-compare-card .compare-content,
        .comparison-card .card-content,
        .compare-card .card-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 14px;
            min-width: 0;
            padding: 18px 20px;
            background: var(--surface);
            color: var(--ink);
        }

        .comparison-card h3,
        .compare-card h3,
        .compare-recommendation-card h3,
        .phone-compare-card h3,
        .explore-compare-card h3,
        .comparison-card .comparison-title,
        .compare-card .comparison-title {
            display: -webkit-box;
            width: 100%;
            max-width: 100%;
            margin: 0;
            overflow: hidden;
            color: var(--ink);
            font-size: 17px;
            font-weight: 800;
            line-height: 1.4;
            text-overflow: ellipsis;
            overflow-wrap: anywhere;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .comparison-card .view-comparison,
        .compare-card .view-comparison,
        .compare-recommendation-card .view-comparison,
        .phone-compare-card .view-comparison,
        .explore-compare-card .view-comparison,
        .comparison-card .comparison-link,
        .compare-card .comparison-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.35;
            font-weight: 800;
            text-decoration: none;
        }

            .comparison-card .view-comparison:hover,
            .compare-card .view-comparison:hover,
            .comparison-card .comparison-link:hover,
            .compare-card .comparison-link:hover {
                color: var(--accent);
            }

    /* Existing markup may use anchors as the card shell; preserve link color */
    #popularPhoneComparisons a,
    #exploreMoreComparisons a,
    #popular-comparisons a,
    #explore-more-comparisons a,
    .popular-phone-comparisons a,
    .explore-more-comparisons a,
    .popular-comparisons a,
    .explore-comparisons a,
    .compare-recommendations a,
    .phone-comparison-list a {
        text-decoration: none;
    }

/* Mobile: preserve the screenshot's side-by-side card layout without overflow */
@media (max-width: 600px) {
    #popularPhoneComparisons .comparison-card,
    #exploreMoreComparisons .comparison-card,
    #popular-comparisons .comparison-card,
    #explore-more-comparisons .comparison-card,
    .popular-phone-comparisons .comparison-card,
    .explore-more-comparisons .comparison-card,
    .popular-comparisons .comparison-card,
    .explore-comparisons .comparison-card,
    .compare-recommendations .comparison-card,
    .phone-comparison-list .comparison-card,
    #popularPhoneComparisons .compare-card,
    #exploreMoreComparisons .compare-card,
    #popular-comparisons .compare-card,
    #explore-more-comparisons .compare-card,
    .popular-phone-comparisons .compare-card,
    .explore-more-comparisons .compare-card,
    .popular-comparisons .compare-card,
    .explore-comparisons .compare-card,
    .compare-recommendations .compare-card,
    .phone-comparison-list .compare-card,
    .compare-recommendation-card,
    .phone-compare-card,
    .explore-compare-card {
        grid-template-columns: minmax(0, 44%) minmax(0, 56%);
        border-radius: 15px;
        margin-bottom: 12px;
    }

        .comparison-card .compare-phones,
        .compare-card .compare-phones,
        .compare-recommendation-card .compare-phones,
        .phone-compare-card .compare-phones,
        .explore-compare-card .compare-phones,
        .comparison-card .phone-pair,
        .compare-card .phone-pair,
        .compare-recommendation-card .phone-pair,
        .phone-compare-card .phone-pair,
        .explore-compare-card .phone-pair {
            grid-template-columns: minmax(0, 1fr) 25px minmax(0, 1fr);
            gap: 4px;
            padding: 12px 6px 10px;
        }

        .comparison-card .phone-item img,
        .compare-card .phone-item img,
        .compare-recommendation-card .phone-item img,
        .phone-compare-card .phone-item img,
        .explore-compare-card .phone-item img,
        .comparison-card .phone-image,
        .compare-card .phone-image,
        .compare-recommendation-card .phone-image,
        .phone-compare-card .phone-image,
        .explore-compare-card .phone-image {
            max-width: 66px;
            height: 82px;
        }

        .comparison-card .phone-name,
        .compare-card .phone-name,
        .compare-recommendation-card .phone-name,
        .phone-compare-card .phone-name,
        .explore-compare-card .phone-name,
        .comparison-card .phone-item a,
        .compare-card .phone-item a {
            font-size: 10.5px;
            line-height: 1.25;
        }

        .comparison-card .vs,
        .compare-card .vs,
        .compare-recommendation-card .vs,
        .phone-compare-card .vs,
        .explore-compare-card .vs {
            width: 25px;
            height: 25px;
            font-size: 9.5px;
        }

        .comparison-card .comparison-info,
        .compare-card .comparison-info,
        .compare-recommendation-card .comparison-info,
        .phone-compare-card .comparison-info,
        .explore-compare-card .comparison-info,
        .comparison-card .compare-content,
        .compare-card .compare-content,
        .compare-recommendation-card .compare-content,
        .phone-compare-card .compare-content,
        .explore-compare-card .compare-content,
        .comparison-card .card-content,
        .compare-card .card-content {
            gap: 12px;
            padding: 14px 12px;
        }

        .comparison-card h3,
        .compare-card h3,
        .compare-recommendation-card h3,
        .phone-compare-card h3,
        .explore-compare-card h3,
        .comparison-card .comparison-title,
        .compare-card .comparison-title {
            font-size: 14px;
            line-height: 1.35;
            -webkit-line-clamp: 3;
        }

        .comparison-card .view-comparison,
        .compare-card .view-comparison,
        .compare-recommendation-card .view-comparison,
        .phone-compare-card .view-comparison,
        .explore-compare-card .view-comparison,
        .comparison-card .comparison-link,
        .compare-card .comparison-link {
            font-size: 12px;
        }
}

@media (max-width: 380px) {
    #popularPhoneComparisons .comparison-card,
    #exploreMoreComparisons .comparison-card,
    #popular-comparisons .comparison-card,
    #explore-more-comparisons .comparison-card,
    .popular-phone-comparisons .comparison-card,
    .explore-more-comparisons .comparison-card,
    .popular-comparisons .comparison-card,
    .explore-comparisons .comparison-card,
    .compare-recommendations .comparison-card,
    .phone-comparison-list .comparison-card,
    #popularPhoneComparisons .compare-card,
    #exploreMoreComparisons .compare-card,
    #popular-comparisons .compare-card,
    #explore-more-comparisons .compare-card,
    .popular-phone-comparisons .compare-card,
    .explore-more-comparisons .compare-card,
    .popular-comparisons .compare-card,
    .explore-comparisons .compare-card,
    .compare-recommendations .compare-card,
    .phone-comparison-list .compare-card,
    .compare-recommendation-card,
    .phone-compare-card,
    .explore-compare-card {
        grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    }

        .comparison-card .comparison-info,
        .compare-card .comparison-info,
        .compare-recommendation-card .comparison-info,
        .phone-compare-card .comparison-info,
        .explore-compare-card .comparison-info,
        .comparison-card .compare-content,
        .compare-card .compare-content,
        .comparison-card .card-content,
        .compare-card .card-content {
            padding: 11px 9px;
        }

        .comparison-card h3,
        .compare-card h3,
        .compare-recommendation-card h3,
        .phone-compare-card h3,
        .explore-compare-card h3,
        .comparison-card .comparison-title,
        .compare-card .comparison-title {
            font-size: 13px;
        }
}

/* =========================================================
   Compare recommendation cards: correct light/dark theme colors
   Keep the card light when the site is in light mode.
   ========================================================= */
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) #popularPhoneComparisons .comparison-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) #exploreMoreComparisons .comparison-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) #popular-comparisons .comparison-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) #explore-more-comparisons .comparison-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .popular-phone-comparisons .comparison-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .explore-more-comparisons .comparison-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .popular-comparisons .comparison-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .explore-comparisons .comparison-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-recommendations .comparison-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .phone-comparison-list .comparison-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) #popularPhoneComparisons .compare-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) #exploreMoreComparisons .compare-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) #popular-comparisons .compare-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) #explore-more-comparisons .compare-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .popular-phone-comparisons .compare-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .explore-more-comparisons .compare-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .popular-comparisons .compare-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .explore-comparisons .compare-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-recommendations .compare-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .phone-comparison-list .compare-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-recommendation-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .phone-compare-card,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .explore-compare-card {
    background: var(--surface, #ffffff) !important;
    color: var(--ink, #0e1626) !important;
    border-color: var(--line, #dde3ec) !important;
}

    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .comparison-card .compare-phones,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-card .compare-phones,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .comparison-card .phone-pair,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-card .phone-pair,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-recommendation-card .compare-phones,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .phone-compare-card .compare-phones,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .explore-compare-card .compare-phones,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-recommendation-card .phone-pair,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .phone-compare-card .phone-pair,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .explore-compare-card .phone-pair {
        background: var(--surface-2, #f1f4f9) !important;
        border-color: var(--line, #dde3ec) !important;
    }

    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .comparison-card .comparison-info,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-card .comparison-info,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .comparison-card .compare-content,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-card .compare-content,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .comparison-card .card-content,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-card .card-content,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-recommendation-card .comparison-info,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .phone-compare-card .comparison-info,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .explore-compare-card .comparison-info,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-recommendation-card .compare-content,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .phone-compare-card .compare-content,
    html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .explore-compare-card .compare-content {
        background: var(--surface, #ffffff) !important;
        color: var(--ink, #0e1626) !important;
    }

html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .comparison-card h3,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-card h3,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .comparison-card .comparison-title,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-card .comparison-title,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .comparison-card .phone-name,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-card .phone-name,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .comparison-card .phone-item a,
html:not([data-theme="dark"]):not([data-ps-theme="dark"]) .compare-card .phone-item a {
    color: var(--ink, #0e1626) !important;
}

html[data-theme="dark"] #popularPhoneComparisons .comparison-card,
html[data-theme="dark"] #exploreMoreComparisons .comparison-card,
html[data-theme="dark"] #popular-comparisons .comparison-card,
html[data-theme="dark"] #explore-more-comparisons .comparison-card,
html[data-theme="dark"] .popular-phone-comparisons .comparison-card,
html[data-theme="dark"] .explore-more-comparisons .comparison-card,
html[data-theme="dark"] .popular-comparisons .comparison-card,
html[data-theme="dark"] .explore-comparisons .comparison-card,
html[data-theme="dark"] .compare-recommendations .comparison-card,
html[data-theme="dark"] .phone-comparison-list .comparison-card,
html[data-theme="dark"] #popularPhoneComparisons .compare-card,
html[data-theme="dark"] #exploreMoreComparisons .compare-card,
html[data-theme="dark"] #popular-comparisons .compare-card,
html[data-theme="dark"] #explore-more-comparisons .compare-card,
html[data-theme="dark"] .popular-phone-comparisons .compare-card,
html[data-theme="dark"] .explore-more-comparisons .compare-card,
html[data-theme="dark"] .popular-comparisons .compare-card,
html[data-theme="dark"] .explore-comparisons .compare-card,
html[data-theme="dark"] .compare-recommendations .compare-card,
html[data-theme="dark"] .phone-comparison-list .compare-card,
html[data-theme="dark"] .compare-recommendation-card,
html[data-theme="dark"] .phone-compare-card,
html[data-theme="dark"] .explore-compare-card,
html[data-ps-theme="dark"] #popularPhoneComparisons .comparison-card,
html[data-ps-theme="dark"] #exploreMoreComparisons .comparison-card,
html[data-ps-theme="dark"] #popular-comparisons .comparison-card,
html[data-ps-theme="dark"] #explore-more-comparisons .comparison-card,
html[data-ps-theme="dark"] .popular-phone-comparisons .comparison-card,
html[data-ps-theme="dark"] .explore-more-comparisons .comparison-card,
html[data-ps-theme="dark"] .popular-comparisons .comparison-card,
html[data-ps-theme="dark"] .explore-comparisons .comparison-card,
html[data-ps-theme="dark"] .compare-recommendations .comparison-card,
html[data-ps-theme="dark"] .phone-comparison-list .comparison-card,
html[data-ps-theme="dark"] #popularPhoneComparisons .compare-card,
html[data-ps-theme="dark"] #exploreMoreComparisons .compare-card,
html[data-ps-theme="dark"] #popular-comparisons .compare-card,
html[data-ps-theme="dark"] #explore-more-comparisons .compare-card,
html[data-ps-theme="dark"] .popular-phone-comparisons .compare-card,
html[data-ps-theme="dark"] .explore-more-comparisons .compare-card,
html[data-ps-theme="dark"] .popular-comparisons .compare-card,
html[data-ps-theme="dark"] .explore-comparisons .compare-card,
html[data-ps-theme="dark"] .compare-recommendations .compare-card,
html[data-ps-theme="dark"] .phone-comparison-list .compare-card,
html[data-ps-theme="dark"] .compare-recommendation-card,
html[data-ps-theme="dark"] .phone-compare-card,
html[data-ps-theme="dark"] .explore-compare-card {
    background: var(--surface, #0f1825) !important;
    color: var(--ink, #e8eef7) !important;
    border-color: var(--line, #233247) !important;
}