.sxpo-compare-page {
    background: #f5f7fa;
    color: #17233b;
    min-height: 70vh
}

.sxpo-compare-hero {
    position: relative;
    overflow: hidden;
    padding: 70px 0 62px;
    background: linear-gradient(135deg,#0c254b 0%,#143a70 68%,#1a477f 100%);
    color: #fff
}

    .sxpo-compare-hero:before {
        content: "";
        position: absolute;
        width: 620px;
        height: 620px;
        border-radius: 50%;
        right: -260px;
        top: -360px;
        background: rgba(255,122,0,.13)
    }

    .sxpo-compare-hero:after {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        left: -250px;
        bottom: -300px;
        background: rgba(255,255,255,.04)
    }

.sxpo-compare-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 60px;
    align-items: center
}

.sxpo-compare-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffd0a5;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

    .sxpo-compare-eyebrow span {
        width: 35px;
        height: 35px;
        border-radius: 10px;
        background: #ff7a00;
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 16px
    }

.sxpo-compare-hero h1 {
    margin: 17px 0 15px;
    font-size: clamp(2.6rem,5vw,4.7rem);
    line-height: 1.02;
    letter-spacing: -.05em;
    font-weight: 900
}

    .sxpo-compare-hero h1 span {
        display: block;
        color: #ffab5a
    }

.sxpo-compare-hero p {
    max-width: 760px;
    margin: 0;
    color: #c8d6e9;
    font-size: 1rem;
    line-height: 1.75
}

.sxpo-compare-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 25px
}

.sxpo-compare-hero-button, .sxpo-compare-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 11px 15px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 800
}

.sxpo-compare-hero-button {
    border: 1px solid #ff7a00;
    background: #ff7a00;
    color: #fff
}

    .sxpo-compare-hero-button:hover {
        background: #eb7000;
        color: #fff
    }

.sxpo-compare-hero-link {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
    color: #fff
}

    .sxpo-compare-hero-link:hover {
        background: rgba(255,255,255,.12);
        color: #fff
    }

.sxpo-compare-hero-card {
    background: rgba(255,255,255,.085);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    padding: 27px;
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 60px rgba(0,0,0,.14)
}

.sxpo-compare-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #ff7a00;
    display: grid;
    place-items: center;
    font-size: 21px;
    margin-bottom: 17px
}

.sxpo-compare-hero-card strong {
    display: block;
    font-size: 1.25rem
}

.sxpo-compare-hero-card span {
    display: block;
    color: #c8d6e9;
    font-size: .86rem;
    line-height: 1.6;
    margin-top: 7px
}

.sxpo-compare-hero-rule {
    height: 1px;
    background: rgba(255,255,255,.12);
    margin: 20px 0
}

.sxpo-compare-hero-card small {
    color: #ffcf9f;
    font-size: .74rem;
    font-weight: 700
}

.sxpo-compare-content {
    padding: 35px 0 95px
}

.sxpo-compare-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fff9ef;
    border: 1px solid #f8dfbf;
    border-left: 4px solid #ff9a2e;
    border-radius: 13px;
    padding: 14px 16px;
    margin-bottom: 17px
}

    .sxpo-compare-notice > i {
        color: #df790d;
        margin-top: 2px
    }

    .sxpo-compare-notice div {
        display: grid;
        gap: 2px
    }

    .sxpo-compare-notice strong {
        font-size: .82rem;
        color: #70451c
    }

    .sxpo-compare-notice span {
        font-size: .77rem;
        color: #866744;
        line-height: 1.5
    }

.sxpo-compare-control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 17px 19px;
    background: #fff;
    border: 1px solid #e1e7ef;
    border-radius: 15px;
    margin-bottom: 12px;
    box-shadow: 0 7px 22px rgba(16,42,86,.05)
}

.sxpo-compare-summary span {
    display: block;
    color: #ff7a00;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .64rem;
    font-weight: 900
}

.sxpo-compare-summary strong {
    display: block;
    margin-top: 3px;
    color: #102a56;
    font-size: 1.13rem
}

.sxpo-compare-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.sxpo-difference-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border: 1px solid #e0e6ee;
    border-radius: 9px;
    background: #fbfcfd;
    color: #53627a;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer
}

    .sxpo-difference-toggle input {
        accent-color: #ff7a00
    }

.sxpo-compare-secondary, .sxpo-compare-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #dce3eb;
    background: #fff;
    color: #102a56;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: .77rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer
}

    .sxpo-compare-secondary:hover {
        border-color: #ff9a2e;
        color: #e66d00
    }

    .sxpo-compare-secondary.danger:hover {
        border-color: #e7b8b8;
        color: #c0392b
    }

.sxpo-compare-insights {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 9px;
    margin-bottom: 14px
}

    .sxpo-compare-insights > div {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 12px 13px;
        border: 1px solid #e1e7ef;
        background: #fff;
        border-radius: 11px
    }

    .sxpo-compare-insights i {
        font-size: 16px;
        color: #ff7a00
    }

    .sxpo-compare-insights .difference i {
        color: #d77b15
    }

    .sxpo-compare-insights span {
        font-size: .72rem;
        color: #69778c
    }

    .sxpo-compare-insights b {
        color: #17233b;
        font-size: .9rem
    }

.sxpo-compare-table-shell {
    overflow: auto;
    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 17px;
    box-shadow: 0 12px 34px rgba(16,42,86,.07);
    scrollbar-width: thin
}

.sxpo-compare-table {
    width: 100%;
    min-width: 1110px;
    border-collapse: separate;
    border-spacing: 0
}

    .sxpo-compare-table th, .sxpo-compare-table td {
        border-right: 1px solid #e9edf3;
        border-bottom: 1px solid #e9edf3;
        padding: 14px 15px;
        vertical-align: middle;
        text-align: left
    }

    .sxpo-compare-table tr:last-child th, .sxpo-compare-table tr:last-child td {
        border-bottom: 0
    }

    .sxpo-compare-table th:last-child, .sxpo-compare-table td:last-child {
        border-right: 0
    }



    .sxpo-compare-table thead th {
        background: #fff
    }

.sxpo-compare-parameter {
    width: 235px;
    min-width: 235px;
    background: #fbfcfe !important;
    color: #53627a;
    font-size: .76rem;
    font-weight: 800;
    position: sticky;
    left: 0;
    z-index: 3
}

    .sxpo-compare-parameter > span {
        display: block
    }

    .sxpo-compare-parameter > small {
        display: block;
        margin-top: 3px;
        color: #9aa6b6;
        font-size: .65rem;
        font-weight: 500;
        line-height: 1.35
    }

.sxpo-compare-table thead .sxpo-compare-parameter {
    z-index: 6;
    border-top-left-radius: 17px
}

.sxpo-compare-product {
    width: 255px;
    min-width: 255px
}

.sxpo-compare-product-head {
    display: grid;
    grid-template-columns: 55px minmax(0,1fr) 28px;
    gap: 11px;
    align-items: start
}

.sxpo-compare-product-image {
    width: 55px;
    height: 55px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #f7f9fb;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #9ca7b5;
    text-decoration: none
}

    .sxpo-compare-product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.sxpo-compare-product-copy {
    min-width: 0
}

    .sxpo-compare-product-copy > a {
        display: block;
        color: #102a56;
        font-size: .84rem;
        line-height: 1.25;
        font-weight: 850;
        text-decoration: none
    }

        .sxpo-compare-product-copy > a:hover {
            color: #e66d00
        }

    .sxpo-compare-product-copy small, .sxpo-compare-product-copy em {
        display: block;
        color: #78869a;
        font-size: .67rem;
        line-height: 1.35;
        margin-top: 3px;
        font-style: normal
    }

.sxpo-compare-featured {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    color: #b76405;
    background: #fff3e4;
    border-radius: 99px;
    padding: 3px 6px;
    font-size: .57rem;
    font-weight: 800;
    margin-bottom: 4px
}

.sxpo-compare-remove {
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 8px;
    background: #f5f7fa;
    color: #7b8798;
    display: grid;
    place-items: center
}

    .sxpo-compare-remove:hover {
        background: #fff0df;
        color: #d86b08
    }

.sxpo-compare-product-actions {
    display: flex;
    gap: 6px;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid #edf0f4
}

    .sxpo-compare-product-actions a, .sxpo-compare-product-actions button {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 0;
        background: transparent;
        color: #65738a;
        text-decoration: none;
        padding: 0;
        font-size: .63rem;
        font-weight: 750
    }

        .sxpo-compare-product-actions a:hover, .sxpo-compare-product-actions button:hover {
            color: #e66d00
        }

.sxpo-compare-empty-slot {
    width: 255px;
    min-width: 255px;
    background: #fbfcfe !important
}

    .sxpo-compare-empty-slot button {
        width: 100%;
        min-height: 103px;
        border: 1px dashed #ccd5e0;
        border-radius: 11px;
        background: #fff;
        color: #6d7b90;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer
    }

        .sxpo-compare-empty-slot button i {
            font-size: 20px;
            color: #ff7a00
        }

        .sxpo-compare-empty-slot button span {
            font-size: .74rem;
            font-weight: 800;
            color: #31415a
        }

        .sxpo-compare-empty-slot button small {
            font-size: .62rem;
            color: #9aa5b5
        }

.sxpo-compare-group-row th {
    background: #102a56 !important;
    color: #fff !important;
    border-right: 0;
    padding: 10px 15px;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase
}

    .sxpo-compare-group-row th i {
        margin-right: 7px;
        color: #ff9a2e
    }



.sxpo-compare-data-row td {
    font-size: .78rem;
    color: #3f4e65;
    line-height: 1.55;
    background: #fff
}

.sxpo-compare-data-row.has-difference td {
    background: #fff9f1
}

.sxpo-compare-data-row.has-difference .sxpo-compare-parameter {
    background: #fff5e8 !important;
    color: #7b4d20
}

.sxpo-compare-data-row.same-value td {
    color: #59677b
}

.sxpo-compare-data-row td.is-empty {
    background: #fafbfd
}

.sxpo-missing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #a1aab7;
    font-size: .7rem;
    font-style: italic
}

.sxpo-compare-unused-cell {
    background: #fbfcfe !important
}

.sxpo-compare-data-row.is-hidden-by-filter, .sxpo-compare-group-row.is-hidden-by-filter {
    display: none
}

.sxpo-compare-legend {
    display: flex;
    gap: 17px;
    flex-wrap: wrap;
    margin: 12px 2px 0;
    color: #77859a;
    font-size: .68rem
}

    .sxpo-compare-legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px
    }

    .sxpo-compare-legend i {
        width: 11px;
        height: 11px;
        border-radius: 3px;
        border: 1px solid #dfe5ec;
        display: inline-block
    }

.legend-difference {
    background: #fff1dc !important;
    border-color: #f2d0a2 !important
}

.legend-empty {
    background: #fafbfd !important
}

.legend-same {
    background: #fff !important
}

.sxpo-compare-footnote {
    display: flex;
    gap: 9px;
    margin: 14px 2px 0;
    color: #7b8798;
    font-size: .68rem;
    line-height: 1.55
}

    .sxpo-compare-footnote i {
        color: #159a6c
    }

.sxpo-compare-start-card {
    display: grid;
    grid-template-columns: 74px minmax(0,1fr);
    gap: 22px;
    align-items: center;
    padding: 35px;
    background: #fff;
    border: 1px solid #e1e7ef;
    border-radius: 19px;
    box-shadow: 0 10px 28px rgba(16,42,86,.06)
}

.sxpo-compare-start-icon {
    width: 74px;
    height: 74px;
    border-radius: 19px;
    background: #fff1e1;
    color: #ff7a00;
    display: grid;
    place-items: center;
    font-size: 29px
}

.sxpo-compare-start-kicker {
    color: #e66d00;
    font-size: .65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em
}

.sxpo-compare-start-card h2 {
    margin: 5px 0 7px;
    color: #102a56;
    font-size: 1.55rem;
    letter-spacing: -.02em
}

.sxpo-compare-start-card p {
    max-width: 700px;
    margin: 0 0 17px;
    color: #69778c;
    font-size: .83rem;
    line-height: 1.65
}

.sxpo-add-compare-modal {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(16,42,86,.2)
}

    .sxpo-add-compare-modal .modal-header {
        padding: 20px 22px 16px;
        border-bottom: 1px solid #edf0f4
    }

        .sxpo-add-compare-modal .modal-header > div span {
            display: block;
            color: #e66d00;
            text-transform: uppercase;
            letter-spacing: .1em;
            font-size: .62rem;
            font-weight: 900
        }

    .sxpo-add-compare-modal h2 {
        margin: 3px 0 0;
        color: #102a56;
        font-size: 1.3rem
    }

    .sxpo-add-compare-modal .modal-body {
        padding: 19px 22px 22px
    }

.sxpo-add-compare-search {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #dbe3ec;
    border-radius: 11px;
    background: #fff;
    padding: 4px 10px
}

    .sxpo-add-compare-search > i {
        color: #7c899b
    }

    .sxpo-add-compare-search input {
        flex: 1;
        border: 0;
        outline: 0;
        padding: 10px 4px;
        color: #17233b;
        font-size: .84rem
    }

    .sxpo-add-compare-search span {
        color: #8a96a6;
        font-size: .65rem;
        white-space: nowrap
    }

.sxpo-add-compare-hint {
    display: flex;
    gap: 7px;
    align-items: center;
    color: #7b8798;
    font-size: .68rem;
    margin: 10px 1px 14px
}

    .sxpo-add-compare-hint i {
        color: #ff7a00
    }

.sxpo-add-compare-results {
    display: grid;
    gap: 7px;
    max-height: 420px;
    overflow: auto
}

.sxpo-add-compare-result {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    background: #fbfcfd
}

.sxpo-add-compare-result-image {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f3f6;
    display: block
}

    .sxpo-add-compare-result-image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.sxpo-add-compare-result-copy {
    min-width: 0
}

    .sxpo-add-compare-result-copy a {
        display: block;
        color: #102a56;
        font-size: .76rem;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .sxpo-add-compare-result-copy span {
        display: block;
        color: #7a8798;
        font-size: .64rem;
        margin-top: 3px
    }

.sxpo-add-compare-result-button {
    border: 1px solid #dbe3eb;
    border-radius: 8px;
    background: #fff;
    color: #102a56;
    padding: 7px 10px;
    font-size: .68rem;
    font-weight: 800;
    min-width: 62px
}

    .sxpo-add-compare-result-button:hover {
        border-color: #ff9a2e;
        color: #e66d00
    }

    .sxpo-add-compare-result-button.is-added {
        border-color: #b7dfcf;
        background: #effaf5;
        color: #14815b
    }

    .sxpo-add-compare-result-button:disabled {
        opacity: .55;
        cursor: not-allowed
    }

.sxpo-add-compare-empty {
    text-align: center;
    padding: 35px 15px;
    border: 1px dashed #dce4ec;
    border-radius: 11px;
    color: #7c899a;
    display: grid;
    gap: 5px;
    justify-items: center
}

    .sxpo-add-compare-empty i {
        font-size: 23px;
        color: #ff7a00;
        margin-bottom: 4px
    }

    .sxpo-add-compare-empty strong {
        font-size: .8rem;
        color: #405069
    }

    .sxpo-add-compare-empty span {
        font-size: .67rem
    }

.sxpo-add-compare-modal .modal-footer {
    border-top: 1px solid #edf0f4;
    padding: 12px 22px
}

.sxpo-compare-modal-browse {
    margin-left: auto;
    color: #e66d00;
    text-decoration: none;
    font-size: .7rem;
    font-weight: 800
}

    .sxpo-compare-modal-browse:hover {
        color: #c55e00
    }

.sxpo-compare-tray {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%,calc(100% + 30px));
    width: min(980px,calc(100vw - 28px));
    z-index: 1060;
    opacity: 0;
    transition: transform .25s ease,opacity .25s ease;
    pointer-events: none
}

    .sxpo-compare-tray.is-visible {
        transform: translate(-50%,0);
        opacity: 1;
        pointer-events: auto
    }



.sxpo-compare-tray-copy {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 150px
}

    .sxpo-compare-tray-copy > i {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: #ff7a00;
        display: grid;
        place-items: center
    }

    .sxpo-compare-tray-copy div {
        display: grid
    }

    .sxpo-compare-tray-copy strong {
        font-size: .74rem
    }

    .sxpo-compare-tray-copy span {
        font-size: .6rem;
        color: #aebbd0;
        margin-top: 2px
    }

.sxpo-compare-tray-products {
    display: flex;
    gap: 5px;
    flex: 1;
    overflow: auto
}



.sxpo-compare-tray-pill b {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff7a00;
    display: grid;
    place-items: center;
    font-size: .56rem
}

.sxpo-compare-tray-pill em {
    font-style: normal;
    font-size: .6rem;
    color: #d5deea;
    text-transform: capitalize
}

.sxpo-compare-tray-actions {
    display: flex;
    gap: 6px;
    align-items: center
}

.sxpo-compare-tray-button, .sxpo-compare-tray-clear {
    border-radius: 8px;
    padding: 8px 10px;
    font-size: .65rem;
    font-weight: 800;
    text-decoration: none
}

.sxpo-compare-tray-button {
    background: #ff7a00;
    color: #fff
}

.sxpo-compare-tray-clear {
    border: 1px solid rgba(255,255,255,.15);
    background: transparent;
    color: #c8d4e5
}

.sxpo-compare-tray-button:hover {
    color: #fff;
    background: #e96f00
}

.sxpo-compare-tray-clear:hover {
    background: rgba(255,255,255,.08);
    color: #fff
}

@media(max-width:1000px) {
    .sxpo-compare-hero-grid {
        grid-template-columns: 1fr
    }

    .sxpo-compare-hero-card {
        max-width: 420px
    }

    .sxpo-compare-insights {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:720px) {
    .sxpo-compare-content {
        padding-top: 24px
    }

    .sxpo-compare-control-bar {
        align-items: flex-start;
        flex-direction: column
    }

    .sxpo-compare-controls {
        width: 100%
    }

        .sxpo-compare-controls > * {
            flex: 1
        }

    .sxpo-compare-start-card {
        grid-template-columns: 1fr;
        padding: 25px
    }

    .sxpo-compare-start-icon {
        width: 58px;
        height: 58px;
        font-size: 22px
    }

    .sxpo-compare-insights {
        grid-template-columns: 1fr 1fr
    }

    .sxpo-compare-tray-inner {
        flex-wrap: wrap
    }

    .sxpo-compare-tray-copy {
        min-width: 0
    }

    .sxpo-compare-tray-products {
        order: 3;
        flex-basis: 100%
    }

    .sxpo-compare-tray-actions {
        margin-left: auto
    }
}

@media(max-width:520px) {
    .sxpo-compare-hero {
        padding: 52px 0
    }

        .sxpo-compare-hero h1 {
            font-size: 2.55rem
        }

    .sxpo-compare-insights {
        grid-template-columns: 1fr
    }

    .sxpo-compare-hero-actions {
        flex-direction: column;
        align-items: stretch
    }

    .sxpo-compare-hero-button, .sxpo-compare-hero-link {
        justify-content: center
    }

    .sxpo-add-compare-result {
        grid-template-columns: 42px minmax(0,1fr) auto
    }

    .sxpo-add-compare-result-image {
        width: 42px;
        height: 42px
    }

    .sxpo-compare-tray {
        bottom: 9px
    }
}

/* ============================================================
   SXPO Product Compare — Final Workspace Enhancements
   ============================================================ */
.sxpo-compare-shortlist {
    margin: 0 0 14px;
    padding: 15px;
    border: 1px solid #e1e7ef;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(16,42,86,.04)
}

.sxpo-compare-shortlist-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px
}

    .sxpo-compare-shortlist-title span {
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #102a56
    }

    .sxpo-compare-shortlist-title small {
        font-size: .67rem;
        color: #8b96a7
    }

.sxpo-compare-shortlist-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px
}

.sxpo-shortlist-card, .sxpo-shortlist-empty {
    min-width: 0;
    position: relative;
    display: grid;
    grid-template-columns: 28px 48px minmax(0,1fr);
    gap: 9px;
    align-items: center;
    border: 1px solid #e5eaf0;
    border-radius: 11px;
    background: #fbfcfd;
    padding: 9px;
    text-decoration: none
}

    .sxpo-shortlist-card:hover {
        border-color: #f1c49c;
        background: #fffaf5
    }

.sxpo-shortlist-index {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #102a56;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .6rem;
    font-weight: 900
}

.sxpo-shortlist-image {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f3f6;
    display: grid;
    place-items: center;
    color: #a1abb9;
    text-decoration: none
}

    .sxpo-shortlist-image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.sxpo-shortlist-copy {
    min-width: 0;
    padding-right: 26px
}

    .sxpo-shortlist-copy > a {
        display: block;
        color: #102a56;
        font-size: .7rem;
        font-weight: 850;
        line-height: 1.25;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .sxpo-shortlist-copy span, .sxpo-shortlist-copy small {
        display: block;
        color: #7c899a;
        font-size: .59rem;
        line-height: 1.35;
        margin-top: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

.sxpo-shortlist-actions {
    position: absolute;
    right: 7px;
    bottom: 7px;
    display: flex;
    gap: 3px
}

    .sxpo-shortlist-actions button {
        border: 0;
        background: #fff;
        border: 1px solid #e1e6ed;
        border-radius: 6px;
        color: #718096;
        font-size: .57rem;
        font-weight: 800;
        padding: 4px 6px
    }

        .sxpo-shortlist-actions button:hover {
            color: #e66d00;
            border-color: #f0bd8c
        }

.sxpo-shortlist-empty {
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    cursor: pointer
}

    .sxpo-shortlist-empty i {
        font-size: 17px;
        color: #ff7a00
    }

    .sxpo-shortlist-empty span {
        font-size: .68rem;
        font-weight: 850;
        color: #31415a
    }

    .sxpo-shortlist-empty small {
        font-size: .58rem;
        color: #9aa5b5
    }

.sxpo-compare-jumpbar {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: auto;
    padding: 9px 2px 12px;
    scrollbar-width: thin
}

    .sxpo-compare-jumpbar > span {
        font-size: .61rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 900;
        color: #8a96a6;
        white-space: nowrap
    }

    .sxpo-compare-jumpbar a {
        border: 1px solid #e1e7ef;
        border-radius: 99px;
        background: #fff;
        color: #53627a;
        padding: 6px 9px;
        font-size: .61rem;
        font-weight: 750;
        text-decoration: none;
        white-space: nowrap
    }

        .sxpo-compare-jumpbar a:hover {
            border-color: #f2c59d;
            color: #d96800;
            background: #fffaf5
        }

.sxpo-compare-group-row {
    scroll-margin-top: 74px
}

.sxpo-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    padding: 0;
    font: inherit;
    cursor: pointer
}

    .sxpo-group-toggle > i {
        width: 15px
    }

    .sxpo-group-toggle span {
        flex: 1
    }

    .sxpo-group-toggle small {
        font-size: .59rem;
        color: #aebed4;
        font-weight: 650;
        text-transform: none;
        letter-spacing: 0
    }

.sxpo-compare-data-row .sxpo-compare-parameter {
    font-weight: 750;
    position: sticky;
    left: 0;
    z-index: 2
}

    .sxpo-compare-data-row .sxpo-compare-parameter em {
        display: inline-block;
        margin-top: 5px;
        padding: 2px 5px;
        border-radius: 99px;
        background: #fff0df;
        color: #c96b0a;
        font-size: .52rem;
        font-style: normal;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .05em
    }

.sxpo-compare-table thead {
    position: sticky;
    top: 0;
    z-index: 4;
    box-shadow: 0 4px 10px rgba(16,42,86,.05);
}

.sxpo-compare-tray-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    border-radius: 99px;
    padding: 5px 8px;
    white-space: nowrap;
}

    .sxpo-compare-tray-pill img {
        width: 20px;
        height: 20px;
        object-fit: cover;
        border-radius: 5px;
        background: #fff
    }

.sxpo-compare-tray-button.disabled {
    opacity: .45;
    pointer-events: none
}

.sxpo-compare-slot-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: auto;
    margin-bottom: 12px
}

    .sxpo-compare-slot-picker > span {
        font-size: .63rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #8a96a6;
        white-space: nowrap
    }

    .sxpo-compare-slot-picker button {
        border: 1px solid #dfe5ed;
        background: #fff;
        color: #617087;
        border-radius: 7px;
        padding: 6px 9px;
        font-size: .62rem;
        font-weight: 800;
        white-space: nowrap
    }

        .sxpo-compare-slot-picker button.active {
            border-color: #ff9a2e;
            background: #fff5e9;
            color: #d86b08
        }

@media(max-width:1100px) {
    .sxpo-compare-shortlist-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:650px) {
    .sxpo-compare-shortlist-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px
    }

    .sxpo-compare-shortlist-grid {
        grid-template-columns: 1fr
    }

    .sxpo-shortlist-card {
        grid-template-columns: 25px 44px minmax(0,1fr)
    }

    .sxpo-shortlist-image {
        width: 44px;
        height: 44px
    }

    .sxpo-compare-slot-picker {
        padding-bottom: 2px
    }
}


/* Comparison tray close control */
.sxpo-compare-tray-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(10,31,62,.96);
    box-shadow: 0 18px 45px rgba(7,22,43,.28);
    backdrop-filter: blur(10px);
    color: #fff;
    position: relative;
    padding-right: 44px;
}

.sxpo-compare-tray-close {
    position: absolute;
    right: 9px;
    top: 9px;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: #c8d4e5;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2
}

    .sxpo-compare-tray-close:hover {
        background: rgba(255,255,255,.14);
        color: #fff
    }

@media(max-width:720px) {
    .sxpo-compare-tray-close {
        top: 8px;
        right: 8px
    }

    .sxpo-compare-tray-inner {
        padding-right: 42px
    }
}