.pp-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 72px;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
}
.pp-overlay[hidden] { display: none; }
.pp-overlay.is-open { opacity: 1; }
.pp-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 0%, rgba(224, 31, 31, .12), transparent 55%), rgba(4, 4, 7, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pp-card {
    position: relative;
    width: 100%;
    max-width: 1040px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    border-radius: 22px;
    border: 1px solid var(--border-1, #e8e8e8);
    background: var(--surface, #fff);
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .55);
    transform: translateY(20px) scale(.98);
    opacity: 0;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}
.pp-overlay.is-open .pp-card { transform: none; opacity: 1; }
[data-theme="dark"] .pp-card {
    border-color: rgba(224, 31, 31, .22);
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(224, 31, 31, .1), transparent 60%),
        linear-gradient(180deg, #161418, #121013);
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .02) inset;
}

.pp-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-1, #e5e5e5);
    background: var(--surface-2, #f4f4f5);
    color: var(--text-2, #555);
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.pp-close svg { width: 18px; height: 18px; }
.pp-close:hover { background: rgba(224, 31, 31, .12); color: #e01f1f; transform: rotate(90deg); }
[data-theme="dark"] .pp-close { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #cfcfd6; }
[data-theme="dark"] .pp-close:hover { background: rgba(224, 31, 31, .22); color: #ff6b6b; }

.pp-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(224, 31, 31, .4);
    background: rgba(18, 16, 19, .8);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .2s, transform .2s cubic-bezier(.16, 1, .3, 1), opacity .2s;
}
.pp-nav svg { width: 22px; height: 22px; }
.pp-nav:hover { background: #e01f1f; transform: translateY(-50%) scale(1.08); }
.pp-nav:disabled { opacity: .35; cursor: default; pointer-events: none; }
.pp-nav[hidden] { display: none; }
.pp-prev { left: 14px; }
.pp-next { right: 14px; }

.pp-top {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 30px;
    padding: 30px 34px 26px;
}

.pp-media {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    border-radius: 18px;
    overflow: hidden;
    padding: 26px;
}
.pp-media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(38px) brightness(.55) saturate(1.3);
    transform: scale(1.25);
    opacity: .9;
}
.pp-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 8, 12, .25), rgba(8, 8, 12, .55));
}
.pp-glow {
    position: absolute;
    width: 86%;
    height: 86%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 130, 45, .5), rgba(224, 31, 31, .32) 42%, transparent 70%);
    filter: blur(26px);
    animation: pp-glow-pulse 5s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes pp-glow-pulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: .9; transform: scale(1.1); }
}
.pp-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 262px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 5px;
    background: conic-gradient(from 140deg, #ffcf5c, #f5a623, #e01f1f, #ff6b3d, #f5a623, #ffcf5c);
    box-shadow:
        0 0 0 1px rgba(255, 207, 92, .5),
        0 0 32px -2px rgba(245, 166, 35, .5),
        0 22px 55px -14px rgba(0, 0, 0, .78);
    animation:
        pp-frame-breathe 4.5s cubic-bezier(.4, 0, .6, 1) infinite,
        pp-frame-float 5.2s ease-in-out infinite;
}
@keyframes pp-frame-breathe {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 207, 92, .5), 0 0 30px -2px rgba(245, 166, 35, .42), 0 22px 55px -14px rgba(0, 0, 0, .78); }
    50%      { box-shadow: 0 0 0 1px rgba(255, 207, 92, .72), 0 0 48px 2px rgba(245, 166, 35, .72), 0 22px 55px -14px rgba(0, 0, 0, .78); }
}
@keyframes pp-frame-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
.pp-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #0a0a0f;
    filter: saturate(1.14) contrast(1.05);
}
.pp-shine {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
}
.pp-shine::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -60%;
    width: 55%;
    height: 160%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg);
    animation: pp-shine-sweep 5s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes pp-shine-sweep {
    0%, 62% { left: -60%; opacity: 0; }
    70%     { opacity: 1; }
    88%, 100% { left: 150%; opacity: 0; }
}
.pp-spark {
    position: absolute;
    z-index: 2;
    color: #ffdf8a;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 0 7px rgba(255, 194, 82, .9));
    animation: pp-spark-twinkle 3.6s cubic-bezier(.45, 0, .35, 1) infinite;
    will-change: transform, opacity;
}
.pp-spark svg { width: 100%; height: 100%; display: block; }
.pp-spark::after {
    content: "";
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .98), rgba(255, 236, 178, .45) 45%, transparent 72%);
    animation: pp-spark-core 3.6s cubic-bezier(.45, 0, .35, 1) infinite;
    animation-delay: inherit;
}
@keyframes pp-spark-twinkle {
    0%, 100% { transform: scale(.3) rotate(-14deg); opacity: 0; }
    14%      { opacity: 1; }
    50%      { transform: scale(1) rotate(10deg); opacity: 1; }
    82%      { opacity: .22; }
}
@keyframes pp-spark-core {
    0%, 100% { opacity: 0; transform: scale(.4); }
    50%      { opacity: 1; transform: scale(1); }
}
.pp-spark-1 { top: 9%;  left: 12%;  width: 24px; animation-delay: 0s; }
.pp-spark-2 { top: 15%; right: 10%; width: 15px; animation-delay: .6s; }
.pp-spark-3 { bottom: 22%; left: 8%; width: 13px; animation-delay: 1.2s; }
.pp-spark-4 { bottom: 13%; right: 14%; width: 20px; animation-delay: 1.8s; }
.pp-spark-5 { top: 42%; left: 4%; width: 10px; animation-delay: 2.4s; }
.pp-spark-6 { top: 6%; right: 33%; width: 12px; animation-delay: 3s; }
.pp-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px 5px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #3a2500;
    font-size: 11px;
    font-weight: 900;
}
.pp-badge svg { width: 13px; height: 13px; }
.pp-badge[hidden] { display: none; }
.pp-fav {
    position: absolute;
    top: 62px;
    right: 14px;
    left: auto;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(18, 18, 24, .38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .35s cubic-bezier(.16, 1, .3, 1), border-color .35s cubic-bezier(.16, 1, .3, 1), color .35s cubic-bezier(.16, 1, .3, 1);
}
.pp-fav svg {
    width: 21px;
    height: 21px;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), fill .3s ease, stroke .3s ease;
}
.pp-fav:hover {
    transform: translateY(-2px) scale(1.06);
    background: rgba(18, 18, 24, .55);
    border-color: rgba(255, 255, 255, .4);
}
.pp-fav:active { transform: scale(.94); }
.pp-fav:focus-visible { outline: 2px solid #ff6b6b; outline-offset: 2px; }
.pp-fav.is-on {
    background: rgba(224, 31, 31, .16);
    border-color: rgba(224, 31, 31, .55);
    color: #ff4d4d;
}
.pp-fav.is-on svg {
    fill: #e01f1f;
    stroke: #e01f1f;
    animation: pp-fav-pop .42s cubic-bezier(.16, 1, .3, 1);
}
@keyframes pp-fav-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.32); }
    100% { transform: scale(1); }
}
.pp-fav[hidden] { display: none; }
.pp-pills {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.pp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(10, 10, 14, .5);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pp-pill svg { width: 14px; height: 14px; color: #ff5b5b; }

.pp-info { min-width: 0; display: flex; flex-direction: column; }
.pp-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-3, #888);
}
.pp-name {
    margin: 4px 0 10px;
    font-size: 40px;
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--text-1, #0a0a0a);
}
.pp-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.pp-price {
    font-size: 30px;
    font-weight: 900;
    color: var(--text-1, #0a0a0a);
    font-variant-numeric: tabular-nums;
}
.pp-robux {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-3, #888);
}
.pp-robux[hidden] { display: none; }
.pp-robux img { display: block; }
.pp-robux strong { color: var(--text-2, #444); font-weight: 800; }
.pp-desc {
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-2, #555);
}
.pp-desc[hidden] { display: none; }
.pp-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 18px 0 20px;
}
.pp-benefit {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--surface-2, #f7f7f8);
    border: 1px solid var(--border-1, #ececee);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-2, #555);
}
.pp-benefit-ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: rgba(224, 31, 31, .1);
    color: #e01f1f;
}
.pp-benefit-ico svg { width: 16px; height: 16px; }
[data-theme="dark"] .pp-benefit { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .07); color: #c7c7cf; }
[data-theme="dark"] .pp-benefit-ico { background: rgba(224, 31, 31, .18); color: #ff6b6b; }

.pp-add {
    position: relative;
    overflow: hidden;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #f5232c, #d3121b);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 34px -12px rgba(224, 31, 31, .6);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s, filter .2s;
}
.pp-add svg { width: 20px; height: 20px; }
.pp-add:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 20px 42px -12px rgba(224, 31, 31, .7); }
.pp-add:active { transform: translateY(0); }
.pp-add[hidden] { display: none; }
.pp-add::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .6s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}
.pp-add:hover::after { left: 130%; }

.pp-feedbacks {
    padding: 4px 34px 30px;
    border-top: 1px solid var(--border-1, #ececee);
}
[data-theme="dark"] .pp-feedbacks { border-top-color: rgba(255, 255, 255, .06); }
.pp-feedbacks:empty { display: none; }
.pp-feedbacks .pf-panel { margin-top: 22px; }
.pp-feedbacks .pf-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-height: none;
    overflow: visible;
}
.pp-feedbacks .pf-card { height: 100%; }

@media (max-width: 900px) {
    .pp-overlay { padding: 20px 56px; }
    .pp-top { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px 20px; }
    .pp-media { min-height: 240px; }
    .pp-name { font-size: 32px; }
    .pp-feedbacks { padding: 4px 22px 26px; }
    .pp-feedbacks .pf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .pp-overlay { padding: 0; align-items: flex-end; }
    .pp-card {
        max-width: none;
        max-height: 94dvh;
        border-radius: 22px 22px 0 0;
    }
    .pp-nav { display: none; }
    .pp-benefits { grid-template-columns: 1fr; }
    .pp-name { font-size: 27px; }
    .pp-price { font-size: 26px; }
    .pp-feedbacks .pf-list { grid-template-columns: 1fr; }
}

.pp-card[data-mode="product"] .pp-combo-only { display: none !important; }
.pp-card[data-mode="combo"] .pp-product-only { display: none !important; }

.pp-price-old {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-3, #999);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
.pp-save {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(22, 163, 74, .12);
    color: #15803d;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .2px;
}
[data-theme="dark"] .pp-save { background: rgba(74, 222, 128, .16); color: #4ade80; }

.pp-mosaic {
    position: absolute;
    inset: 5px;
    z-index: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #0a0a0f;
}
.pp-mosaic .pp-mosaic-cell {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #14141b;
}
.pp-mosaic-grid {
    display: grid;
    gap: 3px;
    width: 100%;
    height: 100%;
    background: #0a0a0f;
}
.pp-mosaic-2 { grid-template-columns: 1fr 1fr; }
.pp-mosaic-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pp-mosaic-3 .pp-mosaic-cell:first-child { grid-column: 1 / -1; }
.pp-mosaic-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.pp-ph {
    position: absolute;
    inset: 5px;
    z-index: 0;
    display: none;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #1c1c24, #0b0b10);
    color: rgba(255, 255, 255, .28);
}
.pp-ph svg { width: 42%; height: 42%; }
.pp-frame[data-empty="1"] .pp-ph { display: grid; }
.pp-frame[data-empty="1"] .pp-img,
.pp-frame[data-empty="1"] .pp-mosaic { display: none !important; }

.pp-combo-items {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 16px 0 4px;
}
.pp-combo-items-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--text-3, #888);
}
.pp-combo-items-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.pp-combo-thumb {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: #14141b;
    border: 1px solid var(--border-1, #e8e8e8);
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .pp-combo-thumb { border-color: rgba(255, 255, 255, .1); }
button.pp-combo-thumb.is-link {
    cursor: pointer;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s, box-shadow .3s;
}
button.pp-combo-thumb.is-link:hover {
    transform: translateY(-3px) scale(1.06);
    border-color: rgba(224, 31, 31, .55);
    box-shadow: 0 10px 22px -8px rgba(224, 31, 31, .45);
}
button.pp-combo-thumb.is-link:focus-visible {
    outline: 2px solid #e01f1f;
    outline-offset: 2px;
}

.pp-back-combo {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px 9px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-1, #e5e5e5);
    background: var(--surface-2, #f4f4f5);
    color: var(--text-2, #555);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.pp-back-combo svg { width: 15px; height: 15px; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.pp-back-combo:hover {
    background: rgba(224, 31, 31, .1);
    border-color: rgba(224, 31, 31, .35);
    color: #e01f1f;
    transform: translateX(-2px);
}
.pp-back-combo:hover svg { transform: translateX(-3px); }
.pp-back-combo[hidden] { display: none; }
[data-theme="dark"] .pp-back-combo {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    color: #cfcfd6;
}
[data-theme="dark"] .pp-back-combo:hover {
    background: rgba(224, 31, 31, .22);
    border-color: rgba(255, 107, 107, .4);
    color: #ff6b6b;
}

.pp-compare {
    margin: 6px 34px 30px;
    border-radius: 16px;
    border: 1px solid var(--border-1, #e8e8e8);
    background: var(--surface-2, #f7f7f8);
    padding: 18px 20px;
}
[data-theme="dark"] .pp-compare {
    border-color: rgba(46, 204, 113, .22);
    background: linear-gradient(180deg, rgba(46, 204, 113, .07), rgba(255, 255, 255, .02));
}
.pp-compare-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1, #111);
}
[data-theme="dark"] .pp-compare-head { color: #fff; }
.pp-compare-head svg { width: 16px; height: 16px; color: #e01f1f; }
.pp-compare-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.pp-compare-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-2, #555);
}
[data-theme="dark"] .pp-compare-row { color: #b9b9c2; }
.pp-compare-strike { text-decoration: line-through; opacity: .65; }
.pp-compare-row.is-highlight { font-weight: 800; color: var(--text-1, #111); }
[data-theme="dark"] .pp-compare-row.is-highlight { color: #fff; }
.pp-compare-savings {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-1, #e2e2e2);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1f9d55;
}
[data-theme="dark"] .pp-compare-savings { border-top-color: rgba(255, 255, 255, .1); color: #2ecc71; }
.pp-compare-savings strong { font-weight: 900; }
.pp-compare-pct {
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    background: #2ecc71;
    border-radius: 999px;
    padding: 3px 9px;
}
.pp-compare-note { margin-top: 8px; font-size: 11.5px; color: var(--text-3, #999); }
@media (max-width: 760px) { .pp-compare { margin: 4px 22px 26px; } }

@media (prefers-reduced-motion: reduce) {
    .pp-glow, .pp-frame, .pp-shine::before, .pp-spark, .pp-spark::after { animation: none; }
    .pp-spark { opacity: .8; transform: scale(.92); }
    .pp-spark::after { opacity: .85; }
    .pp-overlay, .pp-card, .pp-close, .pp-nav, .pp-add, .pp-add::after { transition: none; }
}