:root{
    --ppc-bg:#f6f7f9;
    --ppc-card:#fff;
    --ppc-text:#17191d;
    --ppc-muted:#667085;
    --ppc-line:#e4e7ec;
    --ppc-primary:#cf1f2d;
    --ppc-primary-dark:#a91420;
    --ppc-shadow:0 12px 34px rgba(16,24,40,.07);
}

.pp-compare-main{background:var(--ppc-bg);color:var(--ppc-text);min-height:70vh;}
.pp-compare-shell{width:min(1180px,calc(100% - 40px));margin:0 auto;}
.pp-compare-hero{padding:58px 0 42px;background:linear-gradient(180deg,#fff 0%,#f6f7f9 100%);text-align:center;}
.pp-compare-eyebrow,.pp-compare-section-heading>span{display:inline-flex;color:var(--ppc-primary);font-size:13px;font-weight:800;letter-spacing:.02em;margin-bottom:7px;}
.pp-compare-hero h1{margin:0 0 12px;font-size:clamp(38px,5vw,58px);line-height:1.04;letter-spacing:-.035em;}
.pp-compare-hero p{max-width:720px;margin:0 auto;color:var(--ppc-muted);font-size:17px;line-height:1.65;}
.pp-compare-section{padding:0 0 64px;}

.pp-compare-picker{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;gap:16px;margin:-6px 0 26px;background:#fff;border:1px solid var(--ppc-line);border-radius:18px;padding:20px;box-shadow:var(--ppc-shadow);}
.pp-compare-picker__side{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0;}
.pp-compare-picker__side>span{grid-column:1/-1;font-size:12px;font-weight:900;color:var(--ppc-primary);text-transform:uppercase;letter-spacing:.06em;}
.pp-compare-picker label{display:grid;gap:6px;color:var(--ppc-muted);font-size:12px;font-weight:800;min-width:0;}
.pp-compare-picker select{width:100%;min-width:0;min-height:46px;padding:8px 36px 8px 12px;border:1px solid var(--ppc-line);border-radius:10px;background:#fff;color:var(--ppc-text);font:inherit;}
.pp-compare-vs{display:grid;place-items:center;width:48px;height:48px;margin:auto;border-radius:999px;background:#15171b;color:#fff;font-size:12px;font-weight:900;letter-spacing:.05em;}

.pp-compare-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:42px;}
.pp-compare-car{background:#fff;border:1px solid var(--ppc-line);border-radius:18px;overflow:hidden;box-shadow:var(--ppc-shadow);}
.pp-compare-car__media{height:280px;display:grid;place-items:center;padding:24px;background:#f2f4f7;}
.pp-compare-car__media img{width:100%;height:100%;object-fit:contain;display:block;}
.pp-compare-car__media-placeholder{color:var(--ppc-muted);font-size:13px;font-weight:700;}
.pp-compare-car__body{padding:20px;}
.pp-compare-car__model{display:block;color:var(--ppc-muted);font-size:12px;font-weight:800;margin-bottom:3px;}
.pp-compare-car h2{margin:0 0 5px;font-size:24px;line-height:1.2;}
.pp-compare-car__difference{min-height:20px;margin:0 0 16px;color:#475467;font-size:13px;line-height:1.45;}
.pp-compare-pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px;}
.pp-compare-price{padding:11px;border:1px solid var(--ppc-line);border-radius:10px;min-width:0;}
.pp-compare-price span{display:block;color:var(--ppc-muted);font-size:10px;margin-bottom:3px;}
.pp-compare-price strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-compare-price.is-promo{background:#fff8f8;border-color:#f0c9cd;}
.pp-compare-price.is-promo strong{color:var(--ppc-primary);}
.pp-compare-facts{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px;}
.pp-compare-facts span{display:inline-flex;padding:6px 9px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:11px;font-weight:700;}
.pp-compare-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px;border-radius:9px;background:#15171b;color:#fff!important;text-decoration:none!important;font-size:13px;font-weight:800;}
.pp-compare-link:hover{background:#000;color:#fff!important;}

.pp-compare-section-heading{margin-bottom:20px;max-width:760px;}
.pp-compare-section-heading h2{margin:0 0 7px;font-size:clamp(28px,3vw,36px);line-height:1.12;letter-spacing:-.02em;}
.pp-compare-section-heading p{margin:0;color:var(--ppc-muted);font-size:14px;line-height:1.6;}
.pp-compare-spec-group{margin-bottom:14px;border:1px solid var(--ppc-line);border-radius:14px;overflow:hidden;background:#fff;}
.pp-compare-spec-group h3{margin:0;padding:14px 16px;background:#f7f8fa;border-bottom:1px solid var(--ppc-line);font-size:16px;}
.pp-compare-spec-row{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid #edf0f3;}
.pp-compare-spec-row:last-child{border-bottom:0;}
.pp-compare-spec-row>div{padding:12px 16px;min-width:0;}
.pp-compare-spec-row>div+div{border-left:1px solid #edf0f3;}
.pp-compare-spec-label{color:var(--ppc-muted);font-size:12px;}
.pp-compare-spec-value{font-size:13px;font-weight:700;line-height:1.45;word-break:break-word;}
.pp-compare-spec-value.is-empty{color:#98a2b3;font-weight:500;}

/* v1.8.1 — Highlight specification differences */
.pp-compare-spec-row.is-different{
    background:#f3fbf6;
    box-shadow:inset 3px 0 0 #2f9e5b;
}
.pp-compare-spec-row.is-different .pp-compare-spec-label{
    color:#287a49;
    font-weight:800;
}

.pp-compare-spec-row.is-different .pp-compare-spec-value{
    background:rgba(255,255,255,.38);
}
.pp-compare-empty{margin-top:20px;padding:30px;background:#fff;border:1px solid var(--ppc-line);border-radius:18px;text-align:center;}
.pp-compare-empty h2{margin:0 0 7px;}
.pp-compare-empty p{margin:0;color:var(--ppc-muted);}

@media(max-width:800px){
    .pp-compare-picker{grid-template-columns:1fr;gap:14px;}
    .pp-compare-vs{width:42px;height:42px;}
    .pp-compare-overview{grid-template-columns:1fr 1fr;gap:10px;}
    .pp-compare-car__media{height:220px;padding:14px;}
    .pp-compare-car__body{padding:15px;}
    .pp-compare-car h2{font-size:19px;}
    .pp-compare-pricing{grid-template-columns:1fr;}
}

@media(max-width:600px){
    .pp-compare-shell{width:min(100% - 28px,1180px);}
    .pp-compare-hero{padding:38px 0 30px;}
    .pp-compare-hero h1{font-size:38px;}
    .pp-compare-hero p{font-size:15px;}
    .pp-compare-section{padding-bottom:46px;}
    .pp-compare-picker{padding:14px;margin-bottom:18px;}
    .pp-compare-picker__side{grid-template-columns:1fr;gap:9px;}
    .pp-compare-picker__side>span{grid-column:auto;}
    .pp-compare-overview{gap:8px;margin-bottom:34px;}
    .pp-compare-car__media{height:150px;padding:9px;}
    .pp-compare-car__body{padding:12px;}
    .pp-compare-car h2{font-size:16px;}
    .pp-compare-car__difference{font-size:11px;min-height:0;margin-bottom:10px;}
    .pp-compare-price{padding:8px;}
    .pp-compare-price strong{font-size:12px;}
    .pp-compare-facts span{font-size:10px;}
    .pp-compare-link{width:100%;min-height:38px;font-size:11px;padding:0 9px;}
    .pp-compare-spec-group h3{padding:12px 13px;font-size:14px;}
    .pp-compare-spec-row{grid-template-columns:1fr 1fr;}
    .pp-compare-spec-label{grid-column:1/-1;background:#fbfcfd;font-weight:800;color:#475467;}
    .pp-compare-spec-row>div{padding:9px 11px;}
    .pp-compare-spec-row>div+div{border-left:0;}
    .pp-compare-spec-value+.pp-compare-spec-value{border-left:1px solid #edf0f3;}
    .pp-compare-spec-value{font-size:11px;}
}

/* v1.8.0.2 — real WordPress Page wrapper normalization */
.promosiproton-comparison-page .site-content > .ast-container{
    max-width:none;
    padding-left:0;
    padding-right:0;
}
.promosiproton-comparison-page #primary,
.promosiproton-comparison-page .site-main,
.promosiproton-comparison-page article.page,
.promosiproton-comparison-page .entry-content{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}
.promosiproton-comparison-page article.page > .entry-header{
    display:none;
}
.promosiproton-comparison-page .entry-content > .pp-compare-main{
    margin:0;
}

/* v1.8.1.1 — hard visual difference state + explicit badge */
.pp-compare-spec-row[data-difference="1"]{
    background:#eef9f1 !important;
    box-shadow:inset 4px 0 0 #248a4b !important;
}
.pp-compare-spec-row[data-difference="1"] > .pp-compare-spec-label{
    color:#1f6f3d !important;
    font-weight:800 !important;
}
.pp-compare-difference-badge{
    display:inline-flex;
    align-items:center;
    margin-left:8px;
    padding:2px 7px;
    border-radius:999px;
    background:#d8f0df;
    color:#1f6f3d;
    font-size:9px;
    font-weight:900;
    line-height:1.4;
    letter-spacing:.03em;
    text-transform:uppercase;
    vertical-align:middle;
}
.pp-compare-spec-row[data-difference="1"] > .pp-compare-spec-value{
    background:rgba(255,255,255,.52) !important;
}


/* v1.8.1.2 — server-delivered difference fallback */
.pp-compare-spec-row.pp-diff-force,
.pp-compare-spec-row[data-pp-diff="1"]{
    background:#eef9f1 !important;
    box-shadow:inset 4px 0 0 #248a4b !important;
}
.pp-compare-spec-row.pp-diff-force > .pp-compare-spec-label,
.pp-compare-spec-row[data-pp-diff="1"] > .pp-compare-spec-label{
    color:#1f6f3d !important;
    font-weight:800 !important;
}
.pp-compare-spec-row.pp-diff-force > .pp-compare-spec-value,
.pp-compare-spec-row[data-pp-diff="1"] > .pp-compare-spec-value{
    background:rgba(255,255,255,.52) !important;
}


/* v1.8.2 — Sticky comparison identity header */
.pp-compare-sticky{
    position:sticky;
    top:0;
    z-index:40;
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
    align-items:center;
    gap:10px;
    margin:0 0 22px;
    padding:10px 14px;
    border:1px solid rgba(228,231,236,.96);
    border-radius:14px;
    background:rgba(255,255,255,.94);
    box-shadow:0 10px 28px rgba(16,24,40,.10);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}
.pp-compare-sticky[hidden]{display:none!important;}
.pp-compare-sticky__side{min-width:0;display:flex;align-items:center;gap:10px;}
.pp-compare-sticky__side.is-b{justify-content:flex-end;text-align:right;}
.pp-compare-sticky__thumb{flex:0 0 54px;width:54px;height:38px;display:grid;place-items:center;border-radius:8px;background:#f2f4f7;overflow:hidden;}
.pp-compare-sticky__thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.pp-compare-sticky__copy{min-width:0;display:grid;gap:1px;}
.pp-compare-sticky__copy span{font-size:10px;line-height:1.2;color:var(--ppc-muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.pp-compare-sticky__copy strong{font-size:13px;line-height:1.25;color:var(--ppc-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-compare-sticky__copy small{font-size:11px;line-height:1.25;color:#475467;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-compare-sticky__vs{display:grid;place-items:center;width:34px;height:34px;margin:auto;border-radius:999px;background:#15171b;color:#fff;font-size:9px;font-weight:900;letter-spacing:.04em;}
body.admin-bar .pp-compare-sticky{top:32px;}

@media(max-width:782px){
    body.admin-bar .pp-compare-sticky{top:46px;}
}

@media(max-width:600px){
    .pp-compare-sticky{
        grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);
        gap:6px;
        margin-left:-2px;
        margin-right:-2px;
        padding:8px 9px;
        border-radius:12px;
    }
    .pp-compare-sticky__side{gap:6px;}
    .pp-compare-sticky__side.is-b{justify-content:flex-end;}
    .pp-compare-sticky__thumb{display:none;}
    .pp-compare-sticky__copy span{font-size:8px;}
    .pp-compare-sticky__copy strong{font-size:11px;}
    .pp-compare-sticky__copy small{font-size:9px;}
    .pp-compare-sticky__vs{width:26px;height:26px;font-size:8px;}
}


/* v1.8.3 — objective price & promotion insights */
.pp-compare-insights{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    min-height:24px;
    margin:0 0 9px;
}
.pp-compare-insight{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 9px;
    border-radius:999px;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.01em;
}
.pp-compare-insight.is-price{
    background:#eef9f1;
    border:1px solid #cfead8;
    color:#1f6f3d;
}
.pp-compare-insight.is-rebate{
    background:#fff4f4;
    border:1px solid #f0c9cd;
    color:var(--ppc-primary-dark);
}
@media(max-width:600px){
    .pp-compare-insights{min-height:0;margin-bottom:7px;gap:4px;}
    .pp-compare-insight{min-height:21px;padding:3px 7px;font-size:8px;}
}

/*
|--------------------------------------------------------------------------
| v1.8.4 — Mobile Comparison UX
|--------------------------------------------------------------------------
| Keep desktop unchanged. On phones, make the two vehicle cards swipeable,
| keep selectors compact, and preserve readable side-by-side spec values.
*/

@media(max-width:600px){
    .pp-compare-shell{
        width:min(100% - 22px,1180px);
    }

    .pp-compare-hero{
        padding:30px 0 24px;
    }

    .pp-compare-hero h1{
        font-size:34px;
        line-height:1.05;
    }

    .pp-compare-hero p{
        max-width:330px;
        font-size:14px;
        line-height:1.55;
    }

    /* Compact A/B picker cards. */
    .pp-compare-picker{
        gap:10px;
        padding:11px;
        border-radius:14px;
        margin-bottom:16px;
    }

    .pp-compare-picker__side{
        gap:8px;
        padding:10px;
        border:1px solid #edf0f3;
        border-radius:11px;
        background:#fbfcfd;
    }

    .pp-compare-picker__side>span{
        margin-bottom:1px;
        font-size:10px;
    }

    .pp-compare-picker label{
        gap:4px;
        font-size:10px;
    }

    .pp-compare-picker select{
        min-height:42px;
        padding-top:7px;
        padding-bottom:7px;
        font-size:12px;
    }

    .pp-compare-vs{
        width:32px;
        height:32px;
        font-size:9px;
    }

    /* Native swipe cards with a visible peek of the next car. */
    .pp-compare-overview{
        display:flex;
        gap:10px;
        overflow-x:auto;
        overflow-y:hidden;
        margin-left:-1px;
        margin-right:-11px;
        margin-bottom:30px;
        padding:0 11px 5px 1px;
        scroll-snap-type:x mandatory;
        scroll-padding-left:1px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .pp-compare-overview::-webkit-scrollbar{
        display:none;
    }

    .pp-compare-car{
        flex:0 0 86%;
        width:86%;
        scroll-snap-align:start;
        border-radius:15px;
    }

    .pp-compare-car__media{
        height:190px;
        padding:12px;
    }

    .pp-compare-car__body{
        padding:14px;
    }

    .pp-compare-car__model{
        font-size:10px;
    }

    .pp-compare-car h2{
        font-size:20px;
    }

    .pp-compare-pricing{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:6px;
    }

    .pp-compare-price{
        padding:8px 7px;
    }

    .pp-compare-price span{
        font-size:8px;
        line-height:1.3;
    }

    .pp-compare-price strong{
        font-size:11px;
    }

    .pp-compare-link{
        width:auto;
        min-height:38px;
        padding:0 13px;
        font-size:11px;
    }

    /* Sticky identity: compact, readable and always two-column. */
    .pp-compare-sticky{
        margin-bottom:15px;
        padding:7px 8px;
        grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);
        box-shadow:0 7px 20px rgba(16,24,40,.09);
    }

    .pp-compare-sticky__copy span{
        font-size:7px;
    }

    .pp-compare-sticky__copy strong{
        font-size:10px;
    }

    .pp-compare-sticky__copy small{
        font-size:8px;
    }

    /* Spec rows: label full width, A/B values remain side by side. */
    .pp-compare-spec-group{
        border-radius:12px;
        margin-bottom:11px;
    }

    .pp-compare-spec-group h3{
        padding:11px 12px;
        font-size:14px;
    }

    .pp-compare-spec-row{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }

    .pp-compare-spec-label{
        grid-column:1/-1;
        padding:8px 10px 6px!important;
        font-size:10px;
    }

    .pp-compare-difference-badge{
        margin-left:5px;
        padding:2px 5px;
        font-size:7px;
    }

    .pp-compare-spec-value{
        position:relative;
        padding:19px 10px 9px!important;
        font-size:11px;
        line-height:1.4;
        min-height:46px;
    }

    .pp-compare-spec-value::before{
        position:absolute;
        top:5px;
        left:10px;
        color:#98a2b3;
        font-size:7px;
        line-height:1;
        font-weight:900;
        letter-spacing:.05em;
        text-transform:uppercase;
    }

    .pp-compare-spec-value:nth-child(2)::before{
        content:"Kereta A";
    }

    .pp-compare-spec-value:nth-child(3)::before{
        content:"Kereta B";
    }

    .pp-compare-spec-value+.pp-compare-spec-value{
        border-left:1px solid #edf0f3;
    }

    .pp-compare-section-heading{
        margin-bottom:15px;
    }

    .pp-compare-section-heading h2{
        font-size:27px;
    }

    .pp-compare-section-heading p{
        font-size:12px;
    }
}

@media(max-width:390px){
    .pp-compare-car{
        flex-basis:89%;
        width:89%;
    }

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

    .pp-compare-price span{
        font-size:9px;
    }

    .pp-compare-price strong{
        font-size:12px;
    }
}

/*
|--------------------------------------------------------------------------
| v1.8.5 — Mobile Readability Polish
|--------------------------------------------------------------------------
| Improve legibility on phones without changing the established comparison
| layout. Values remain side-by-side; typography and breathing room increase.
*/

@media(max-width:600px){
    .pp-compare-section-heading p{
        font-size:14px;
        line-height:1.6;
    }

    .pp-compare-spec-group h3{
        padding:13px 14px;
        font-size:17px;
        line-height:1.3;
    }

    .pp-compare-spec-label{
        padding:10px 12px 8px!important;
        font-size:13px;
        line-height:1.35;
    }

    .pp-compare-difference-badge{
        margin-left:6px;
        padding:3px 7px;
        font-size:9px;
        line-height:1.25;
    }

    .pp-compare-spec-value{
        padding:23px 12px 12px!important;
        min-height:58px;
        font-size:15px;
        line-height:1.45;
        font-weight:700;
    }

    .pp-compare-spec-value::before{
        top:7px;
        left:12px;
        font-size:9px;
        line-height:1;
        letter-spacing:.055em;
    }

    .pp-compare-sticky{
        padding:9px 10px;
    }

    .pp-compare-sticky__copy span{
        font-size:8px;
    }

    .pp-compare-sticky__copy strong{
        font-size:12px;
        line-height:1.2;
    }

    .pp-compare-sticky__copy small{
        font-size:9px;
        line-height:1.2;
    }

    .pp-compare-picker__side>span,
    .pp-compare-picker label{
        font-size:11px;
    }

    .pp-compare-picker select{
        font-size:13px;
    }

    .pp-compare-car__model{
        font-size:11px;
    }

    .pp-compare-car h2{
        font-size:21px;
    }

    .pp-compare-price span{
        font-size:9px;
    }

    .pp-compare-price strong{
        font-size:12px;
    }

    .pp-compare-facts span{
        font-size:11px;
    }
}

/*
|--------------------------------------------------------------------------
| v1.8.6 — Sticky Model Identity Typography Polish
|--------------------------------------------------------------------------
*/

@media (max-width:600px){
    .pp-compare-sticky{
        padding:10px 11px;
    }

    .pp-compare-sticky__copy span{
        font-size:9px;
        line-height:1.15;
    }

    .pp-compare-sticky__copy strong{
        font-size:17px;
        line-height:1.15;
        font-weight:800;
    }

    .pp-compare-sticky__copy small{
        margin-top:2px;
        font-size:14px;
        line-height:1.2;
        font-weight:600;
    }
}