.pr-card {
    --bs-card-border-color: #e5e9f0;
    --bs-card-border-radius: 18px;
    --bs-card-spacer-x: 26px;
    --bs-card-spacer-y: 30px;
    width: 260px;
    transition: transform .18s, box-shadow .18s
}

.pr-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 44px -18px rgba(15, 23, 42, .18)
}

.pr-card.pr-hot {
    --bs-card-bg: #0f172a;
    --bs-card-border-color: #0f172a;
    --bs-card-color: #e2e8f0;
    transform: scale(1.04)
}

.pr-card.pr-hot:hover {
    transform: scale(1.04) translateY(-5px)
}

.pr-flag {
    --bs-badge-font-size: .68rem;
    --bs-badge-font-weight: 800;
    --bs-badge-padding-x: 13px;
    --bs-badge-padding-y: 5px;
    --bs-badge-color: #082f36;
    background: #22d3ee;
    letter-spacing: .07em;
    text-transform: uppercase
}

.pr-name {
    font-size: .95rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: .02em;
    color: #334155;
    margin: 0
}

.pr-hot .pr-name {
    color: #94a3b8
}

.pr-price {
    margin: 12px 0 4px;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #0f172a
}

.pr-hot .pr-price {
    color: #fff
}

.pr-price span {
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: 0;
    color: #64748b
}

.pr-per {
    font-size: .8rem;
    color: #64748b;
    margin: 0 0 20px
}

.pr-hot .pr-price span,
.pr-hot .pr-per {
    color: #94a3b8
}

.pr-list {
    margin: 0 0 24px
}

.pr-list li {
    font-size: .86rem;
    padding: 7px 0 7px 26px;
    position: relative;
    color: #475569
}

.pr-hot .pr-list li {
    color: #cbd5e1
}

.pr-list li::before {
    content: "✓";
    content: "✓" /"";
    position: absolute;
    left: 0;
    top: 7px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: .7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center
}

.pr-hot .pr-list li::before {
    background: #164e63;
    color: #22d3ee
}

.pr-list li.pr-no {
    color: #64748b;
    text-decoration: line-through
}

.pr-hot .pr-list li.pr-no {
    color: #b6bfcc
}

.pr-list li.pr-no::before {
    content: "–";
    content: "–" /"";
    background: #f1f5f9;
    color: #64748b
}

.pr-go {
    --bs-btn-padding-y: 12px;
    --bs-btn-font-size: .9rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 11px;
    --bs-btn-color: #0f172a;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #8391a5;
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-bg: #f1f5f9;
    --bs-btn-hover-border-color: #8391a5;
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-bg: #f1f5f9;
    --bs-btn-active-border-color: #8391a5;
    --bs-btn-focus-box-shadow: none;
    transition: background .15s, filter .15s
}

.pr-hot .pr-go {
    --bs-btn-color: #082f36;
    --bs-btn-bg: #22d3ee;
    --bs-btn-border-color: #22d3ee;
    --bs-btn-hover-color: #082f36;
    --bs-btn-hover-bg: #22d3ee;
    --bs-btn-hover-border-color: #22d3ee;
    --bs-btn-active-color: #082f36;
    --bs-btn-active-bg: #22d3ee;
    --bs-btn-active-border-color: #22d3ee
}

.pr-hot .pr-go:hover {
    filter: brightness(1.1)
}

.pr-go:focus-visible {
    outline: 3px solid #0f172a;
    outline-offset: 2px
}

.pr-hot .pr-go:focus-visible {
    outline-color: #22d3ee
}

@media (prefers-reduced-motion:reduce) {

    .pr-card,
    .pr-go {
        transition: none
    }

    .pr-card:hover {
        transform: none
    }

    .pr-card.pr-hot:hover {
        transform: scale(1.04)
    }
}