/* ==========================================================================
   PRISMA REFRACTION — design system
   Deep-space dark + prismatic aurora ambience, gold reserved for CTAs.
   Display: Unbounded · Body: Space Grotesk · Component prefix: .pr-*
   ========================================================================== */

:root {
    /* Brand */
    --color-main: #f4c75d;
    --color-main-light: #ffdf94;
    --color-main-dark: #8a6b1d;
    --color-accent: #302409;
    --color-violet: #8b5cf6;
    --color-cyan: #22d3ee;
    --color-magenta: #e879f9;
    --color-discord: #5865f2;
    --color-discord-light: #8791f6;
    --color-text-primary: #f6f6fa;
    --color-text-secondary: #b6b7c5;
    --color-text-muted: #797a8c;
    --color-red: #ef4444;
    --color-red-dark: #b91c1c;
    --color-green: #22c55e;
    --color-green-dark: #15803d;
    --color-blue: #38bdf8;
    --color-blue-dark: #2563eb;

    /* Prism gradient (ambience / decorative): celeste → gold */
    --grad-prism: linear-gradient(
        100deg,
        #0ea5e9,
        var(--color-cyan) 42%,
        var(--color-main)
    );

    /* Typography */
    --font-display: "Unbounded", "Space Grotesk", system-ui, sans-serif;
    --font-body: "Space Grotesk", system-ui, sans-serif;

    /* Surfaces (clean dark gray-blue, not pitch black) */
    --bg-0: #0d0e13;
    --bg-1: #14151c;
    --bg-2: #1a1b23;
    --bg-3: #23242e;
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.14);
    --border-gold: rgba(244, 199, 93, 0.35);

    /* Rank tier palette (6 tiers) */
    --tier-1: #9ca3af;
    --tier-2: #22c55e;
    --tier-3: #38bdf8;
    --tier-4: #a78bfa;
    --tier-5: #f472b6;
    --tier-6: #f4c75d;

    /* Shape & motion */
    --radius: 18px;
    --radius-sm: 11px;
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --speed: 260ms;

    --shadow-1: 0 2px 10px rgb(0 0 0 / 0.5);
    --shadow-2: 0 14px 38px -10px rgb(0 0 0 / 0.75);
    --glow-gold:
        0 0 0 1px var(--border-gold), 0 8px 28px -6px rgb(244 199 93 / 0.3);

    --logo-height: 120px;
    --header-image: url(https://i.ibb.co/tTjj4KkB/image-6.webp);
    --header-image-height: 470px;

    /* Compat aliases used by shared.css plumbing */
    --color-bg: var(--bg-0);
    --color-brighter-bg: var(--bg-1);
    --color-primary: var(--color-main);
    --color-primary-text: var(--color-accent);
    --color-secondary: var(--bg-3);
    --color-secondary-text: var(--color-text-primary);
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
    scrollbar-color: var(--bg-3) var(--bg-0);
}

body {
    font-family: var(--font-body);
    font-optical-sizing: auto;
    background: var(--bg-0);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--color-main);
    color: var(--color-accent);
}

img {
    max-width: 100%;
}

.pr-page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: clip;
}

/* Prismatic aurora ambience */
.pr-page::before,
.pr-page::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
}
.pr-page::before {
    top: -240px;
    left: -180px;
    background: radial-gradient(
        circle,
        rgb(34 211 238 / 0.07),
        transparent 62%
    );
    animation: prFloat 17s ease-in-out infinite alternate;
}
.pr-page::after {
    top: 260px;
    right: -220px;
    background: radial-gradient(
        circle,
        rgb(244 199 93 / 0.05),
        transparent 62%
    );
    animation: prFloat 21s ease-in-out infinite alternate-reverse;
}
@keyframes prFloat {
    to {
        transform: translate(70px, 50px) scale(1.14);
    }
}

.pr-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}
@media (min-width: 1500px) {
    .pr-container {
        max-width: 1380px;
    }
}
/* Category pages: the shell stretches toward the viewport edges — sidebar
   further left, packages further right — so dense grids and the rank
   comparison get real room to breathe. */
@media (min-width: 1280px) {
    .page-category .pr-container {
        max-width: min(1720px, calc(100vw - 64px));
    }
    .page-category .pr-shell {
        gap: 28px;
    }
    /* with the extra room, package cards grow instead of only multiplying */
    .page-category .pr-grid {
        grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
        gap: 18px;
    }
}
/* Laptop widths: slim the sidebar so the content column keeps room for
   dense grids and the rank comparison. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .page-category .pr-shell {
        grid-template-columns: 264px minmax(0, 1fr);
        gap: 18px;
    }
}

.pr-main {
    flex: 1;
    position: relative;
    z-index: 2;
}

/* Ambient splash: the header image tints the page (fixed, blurred) with a faint
   blueprint grid on top. Both layers dissolve into the page color toward the
   bottom (mask fade) so the background blends seamlessly and reaches the end
   instead of cutting off on a flat edge. */
.pr-splash {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 42%,
        transparent 92%
    );
    mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 92%);
}
/* Blurred header image (only this layer is blurred). */
.pr-splash::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgb(13 14 19 / 0.6) 0%,
            rgb(13 14 19 / 0.82) 55%,
            rgb(13 14 19 / 0.92) 100%
        ),
        var(--header-image) center 24% / cover no-repeat;
    filter: blur(9px) saturate(1.03);
}
/* Crisp blueprint grid — the "cuadraditos" — sits above the blurred image. */
.pr-splash::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px);
    background-size: 46px 46px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
    transition:
        transform var(--speed) var(--ease-spring),
        background var(--speed) ease,
        border-color var(--speed) ease,
        box-shadow var(--speed) ease,
        color var(--speed) ease,
        filter var(--speed) ease;
}
.pr-btn:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background: var(--bg-3);
}
.pr-btn:active {
    transform: translateY(0) scale(0.98);
}
.pr-btn:disabled,
.pr-btn[disabled] {
    opacity: 0.45;
    pointer-events: none;
}

.pr-btn--gold {
    background: linear-gradient(
        120deg,
        var(--color-main),
        var(--color-main-light)
    );
    border-color: transparent;
    color: var(--color-accent);
}
.pr-btn--gold:hover {
    background: linear-gradient(
        120deg,
        var(--color-main),
        var(--color-main-light)
    );
    box-shadow: var(--glow-gold);
    border-color: transparent;
    filter: brightness(1.06);
}

.pr-btn--green {
    background: linear-gradient(
        120deg,
        var(--color-green-dark),
        var(--color-green)
    );
    border-color: transparent;
    color: #fff;
}
.pr-btn--green:hover {
    background: linear-gradient(
        120deg,
        var(--color-green-dark),
        var(--color-green)
    );
    border-color: transparent;
    box-shadow: 0 8px 24px -8px rgb(34 197 94 / 0.5);
    filter: brightness(1.08);
}

.pr-btn--blue {
    background: linear-gradient(
        120deg,
        var(--color-blue-dark),
        var(--color-blue)
    );
    border-color: transparent;
    color: #fff;
}
.pr-btn--blue:hover {
    background: linear-gradient(
        120deg,
        var(--color-blue-dark),
        var(--color-blue)
    );
    border-color: transparent;
    box-shadow: 0 8px 24px -8px rgb(56 189 248 / 0.5);
    filter: brightness(1.08);
}

.pr-btn--red {
    background: linear-gradient(
        120deg,
        var(--color-red-dark),
        var(--color-red)
    );
    border-color: transparent;
    color: #fff;
}
.pr-btn--red:hover {
    background: linear-gradient(
        120deg,
        var(--color-red-dark),
        var(--color-red)
    );
    border-color: transparent;
    filter: brightness(1.08);
}

.pr-btn--discord {
    background: linear-gradient(
        120deg,
        var(--color-discord),
        var(--color-discord-light)
    );
    border-color: transparent;
    color: #fff;
}
.pr-btn--discord:hover {
    background: linear-gradient(
        120deg,
        var(--color-discord),
        var(--color-discord-light)
    );
    border-color: transparent;
    box-shadow: 0 8px 24px -8px rgb(88 101 242 / 0.55);
    filter: brightness(1.08);
}

.pr-btn--ghost {
    background: transparent;
    border-color: transparent;
}
.pr-btn--ghost:hover {
    background: rgb(255 255 255 / 0.06);
    border-color: transparent;
}

.pr-btn--sm {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
}
.pr-btn--lg {
    height: 52px;
    padding: 0 26px;
    font-size: 15px;
}
.pr-btn--icon {
    width: 44px;
    padding: 0;
    flex: none;
}
.pr-btn--block {
    width: 100%;
}

/* ==========================================================================
   Cards & surfaces
   ========================================================================== */

.pr-card {
    position: relative;
    background:
        radial-gradient(
            120% 80% at 50% 0%,
            rgb(255 255 255 / 0.035),
            transparent 58%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.05),
        var(--shadow-1);
}

.pr-card--pad {
    padding: 26px;
}
@media (min-width: 1024px) {
    .pr-card--pad {
        padding: 34px;
    }
}

.pr-card--hover {
    transition:
        transform var(--speed) var(--ease-spring),
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
.pr-card--hover:hover {
    transform: translateY(-4px);
    border-color: var(--border-gold);
    box-shadow: var(--shadow-2);
}

.pr-kicker {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.pr-title {
    font-family: var(--font-display);
    font-size: clamp(16px, 2.2vw, 24px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-main);
}

.pr-section-h {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 34px 0 18px;
}
.pr-section-h::before,
.pr-section-h::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--border-strong));
}
.pr-section-h::after {
    background: linear-gradient(90deg, var(--border-strong), transparent);
}
.pr-section-h > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 0.02);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-primary);
}
.pr-section-h i {
    color: var(--color-main);
}

/* Chips & badges */
.pr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--color-text-secondary);
}
.pr-chip--gold {
    background: rgb(244 199 93 / 0.12);
    border-color: var(--border-gold);
    color: var(--color-main);
}
.pr-chip--blue {
    background: rgb(56 189 248 / 0.12);
    border-color: rgb(56 189 248 / 0.35);
    color: var(--color-blue);
}
.pr-chip--green {
    background: rgb(34 197 94 / 0.12);
    border-color: rgb(34 197 94 / 0.35);
    color: var(--color-green);
}

.pr-discount {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(
        120deg,
        var(--color-red-dark),
        var(--color-red)
    );
    color: #fff;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 18px -2px rgb(239 68 68 / 0.65);
    animation: prDiscountPulse 2.4s ease-in-out infinite;
}
@keyframes prDiscountPulse {
    0%,
    100% {
        box-shadow: 0 4px 14px -4px rgb(239 68 68 / 0.5);
    }
    50% {
        box-shadow: 0 4px 24px 0 rgb(239 68 68 / 0.85);
    }
}

/* ==========================================================================
   Navbar & header
   ========================================================================== */

.pr-navbar {
    position: sticky;
    top: 0;
    z-index: 60;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgb(9 9 11 / 0.78);
    border-bottom: 1px solid var(--border);
}
.pr-navbar__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 64px;
}
.pr-navbar__logo {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pr-navbar__logo span {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: linear-gradient(100deg, #ffffff 30%, var(--color-main-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}
.pr-navbar__logo img {
    height: 40px;
    width: auto;
    transition: transform var(--speed) var(--ease-spring);
}
.pr-navbar__logo:hover img {
    transform: scale(1.08) rotate(-3deg);
}

/* Quick links: home + top categories */
.pr-navbar__links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 14px;
    min-width: 0;
    overflow: hidden;
}
.pr-navbar__links a {
    position: relative;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--color-text-secondary);
    transition:
        color var(--speed) ease,
        background var(--speed) ease;
}
.pr-navbar__links a:hover {
    color: var(--color-text-primary);
    background: rgb(255 255 255 / 0.05);
}
.pr-navbar__links a.is-active {
    color: var(--color-main);
}
.pr-navbar__links a.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-prism);
}

.pr-navbar__spacer {
    flex: 1;
}

.pr-navbar__user {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px 0 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-1);
    font-size: 13px;
    font-weight: 700;
    transition:
        border-color var(--speed) ease,
        background var(--speed) ease;
}
.pr-navbar__user:hover {
    border-color: var(--border-gold);
    background: var(--bg-2);
}
.pr-navbar__user img {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
}
.pr-navbar__user .name {
    color: var(--color-main);
}

/* Hero */
.pr-hero {
    position: relative;
    z-index: 2;
    padding: 30px 0 4px;
    text-align: center;
}
.pr-hero__logolink {
    display: block;
    width: fit-content;
    margin: 0 auto;
}
.pr-hero__logo {
    height: 84px;
    width: auto;
    margin: 0 auto;
    filter: drop-shadow(0 12px 30px rgb(0 0 0 / 0.6));
    transition: transform 600ms var(--ease-spring);
    animation: prLogoGlow 3.6s ease-in-out infinite;
}
.pr-hero__logo:hover {
    transform: scale(1.06) rotate(-2deg);
}
@keyframes prLogoGlow {
    0%, 100% {
        filter:
            drop-shadow(0 12px 30px rgb(0 0 0 / 0.6))
            drop-shadow(0 0 18px rgb(34 211 238 / 0.35))
            drop-shadow(0 0 40px rgb(34 211 238 / 0.15));
    }
    50% {
        filter:
            drop-shadow(0 14px 34px rgb(0 0 0 / 0.65))
            drop-shadow(0 0 32px rgb(34 211 238 / 0.6))
            drop-shadow(0 0 70px rgb(125 211 252 / 0.4));
    }
}
.pr-hero__kicker {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.pr-hero__kicker::before,
.pr-hero__kicker::after {
    content: "";
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-main));
}
.pr-hero__kicker::after {
    background: linear-gradient(90deg, var(--color-main), transparent);
}
.pr-hero__name {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.1;
    background: linear-gradient(
        110deg,
        #ffffff 10%,
        #a5f3fc 38%,
        #22d3ee 62%,
        #7dd3fc 80%,
        var(--color-main) 108%
    );
    background-size: 200% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition:
        background-position 700ms var(--ease-out),
        filter 400ms ease;
}
.pr-hero__name:hover {
    background-position: 85% 50%;
    filter: drop-shadow(0 0 16px rgb(34 211 238 / 0.35));
}
/* Server IP display — centered under the store name */
.pr-ipbox {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    border-radius: 14px;
    border: 1px solid rgb(34 211 238 / 0.35);
    background: rgb(13 14 19 / 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-align: left;
    cursor: pointer;
    transition:
        transform var(--speed) var(--ease-spring),
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
.pr-ipbox:hover {
    transform: translateY(-1px);
    border-color: rgb(34 211 238 / 0.65);
    box-shadow: 0 0 26px -8px rgb(34 211 238 / 0.45);
}
.pr-ipbox .ic {
    display: grid;
    place-items: center;
    padding: 0 13px;
    background: rgb(34 211 238 / 0.1);
    border-right: 1px solid rgb(34 211 238 / 0.2);
    color: var(--color-cyan);
    font-size: 13px;
}
.pr-ipbox .lab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 15px;
}
.pr-ipbox .lab .k {
    font-family: var(--font-display);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.pr-ipbox .lab .v {
    font-family: monospace;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-cyan);
}
.pr-ipbox .cp {
    display: grid;
    place-items: center;
    padding: 0 13px;
    border-left: 1px solid var(--border);
    color: var(--color-text-muted);
    font-size: 12px;
    transition:
        color var(--speed) ease,
        background var(--speed) ease;
}
.pr-ipbox:hover .cp {
    color: var(--color-main);
    background: rgb(255 255 255 / 0.04);
}

/* Tiny players / discord counters under the IP */
.pr-hero__mini {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.pr-hero__mini b {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.pr-hero__mini > span,
.pr-hero__mini > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.pr-hero__mini a {
    transition: color var(--speed) ease;
}
.pr-hero__mini a:hover {
    color: var(--color-text-secondary);
}
.pr-hero__mini .dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-green);
    animation: prPulse 2.2s ease-in-out infinite;
}
.pr-hero__mini i.fa-discord {
    color: var(--color-discord-light);
}

/* Live stat pills row */
.pr-hero__stats {
    display: none;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.pr-stat {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgb(13 13 22 / 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.pr-stat b {
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.pr-stat .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-green);
    animation: prPulse 2.2s ease-in-out infinite;
}
.pr-stat--discord i {
    color: var(--color-discord-light);
}

/* Homepage: hero goes big */
.page-index .pr-hero {
    padding: 64px 0 34px;
}
.page-index .pr-hero__logo {
    height: calc(var(--logo-height) * 1.5);
}
.page-index .pr-hero__kicker {
    display: flex;
}
.page-index .pr-hero__name {
    font-size: clamp(28px, 4.6vw, 52px);
}
.page-index .pr-hero__stats {
    display: flex;
}
.page-index .pr-hero__mini {
    display: flex;
}

/* Server IP pill (inside the stats row) */
.pr-ip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-gold);
    background: rgb(244 199 93 / 0.08);
    color: var(--color-main);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        transform var(--speed) var(--ease-spring),
        box-shadow var(--speed) ease,
        background var(--speed) ease;
}
.pr-ip:hover {
    transform: translateY(-2px);
    background: rgb(244 199 93 / 0.14);
    box-shadow: var(--glow-gold);
}
.pr-ip .players {
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 13px;
    border-left: 1px solid var(--border-strong);
    padding-left: 10px;
}
.pr-ip .players b {
    color: var(--color-green);
}

/* ==========================================================================
   Layout: sidebar + content
   ========================================================================== */

.pr-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 26px 0 70px;
    align-items: start;
}
@media (max-width: 1023px) {
    /* products first on mobile, widgets after */
    .pr-shell .pr-sidebar {
        order: 2;
    }
}
@media (min-width: 1024px) {
    .pr-shell {
        grid-template-columns: 320px minmax(0, 1fr);
    }
}

.pr-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) and (max-width: 1023px) {
    .pr-sidebar {
        grid-template-columns: 1fr 1fr;
    }
}
/* Mobile: drop the category nav / inline menu tree — the store-menu dialog
   button becomes the single, prominent entry point. */
.pr-menu__launch--mobile {
    display: none;
}
@media (max-width: 1023px) {
    .pr-sidebar .pr-sidenav,
    .pr-sidebar .pr-menu {
        display: none;
    }
    .pr-menu__launch--mobile {
        display: flex;
    }
    .pr-sidebar .pr-menu__launch {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 19px 20px;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-main);
        border: 1px solid var(--border-gold);
        background:
            linear-gradient(
                180deg,
                rgb(244 199 93 / 0.1),
                rgb(244 199 93 / 0.03)
            ),
            var(--bg-1);
    }
}

.pr-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Store menu (sidebar nav) */
.pr-menu {
    overflow: hidden;
}
.pr-menu__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 14px;
    color: var(--color-main);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgb(244 199 93 / 0.06), transparent);
}
.pr-menu__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--border);
    transition:
        background var(--speed) ease,
        color var(--speed) ease,
        padding-left var(--speed) var(--ease-spring);
}
.pr-menu__item:first-child {
    border-top: none;
}
.pr-menu__item:hover,
.pr-menu__item.is-active {
    background: rgb(255 255 255 / 0.045);
    color: var(--color-text-primary);
    padding-left: 24px;
}
.pr-menu__item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 3px;
    background: var(--color-main);
}
.pr-menu__item img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.5));
}
.pr-menu__item .chev {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
    transition: transform var(--speed) var(--ease-spring);
}

.pr-menu details > summary {
    list-style: none;
    cursor: pointer;
}
.pr-menu details > summary::-webkit-details-marker {
    display: none;
}
.pr-menu details[open] > summary .chev {
    transform: rotate(180deg);
}
.pr-menu__sub {
    background: rgb(0 0 0 / 0.25);
}
.pr-menu__sub .pr-menu__item {
    padding-left: 40px;
    font-size: 13px;
}
.pr-menu__sub .pr-menu__item:hover {
    padding-left: 46px;
}

/* ==========================================================================
   Sidebar category navigation (category pages, below the modules)
   ========================================================================== */

.pr-sidenav {
    padding: 0;
    overflow: hidden;
}
.pr-sidenav__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(120deg, rgb(244 199 93 / 0.07), transparent 60%);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-main);
}
.pr-sidenav__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
}
.pr-sidenav__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text-secondary);
    transition:
        color var(--speed) ease,
        background var(--speed) ease,
        border-color var(--speed) ease;
}
.pr-sidenav__item .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg-2);
}
.pr-sidenav__item .ico img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
}
.pr-sidenav__item .t {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pr-sidenav__item .chev {
    font-size: 10px;
    color: var(--color-text-muted);
    transition: transform var(--speed) ease;
}
.pr-sidenav__item {
    cursor: pointer;
}
.pr-sidenav__item:hover {
    color: var(--color-text-primary);
    background: var(--bg-2);
    border-color: var(--border);
}
.pr-sidenav__item:hover .chev {
    transform: translateX(3px);
}
.pr-sidenav__item.is-active {
    color: var(--color-main);
    background: rgb(244 199 93 / 0.08);
    border-color: var(--border-gold);
}

/* Collapsible parent group (categories that have subcategories).
   When open, parent + children fuse into one visual block so the
   subcategories clearly belong to their category. */
.pr-sidenav__group {
    border-radius: var(--radius-sm);
    transition: background var(--speed) ease;
}
.pr-sidenav__group[open] {
    background: rgb(255 255 255 / 0.025);
    box-shadow: inset 0 0 0 1px var(--border);
}
.pr-sidenav__group > summary {
    list-style: none;
    cursor: pointer;
}
.pr-sidenav__group > summary::-webkit-details-marker {
    display: none;
}
/* The chevron rotates (down → up) instead of the leaf link's slide */
.pr-sidenav__group > summary .chev {
    transition: transform var(--speed) var(--ease-spring);
}
.pr-sidenav__group > summary:hover .chev {
    transform: none;
}
.pr-sidenav__group[open] > summary .chev {
    transform: rotate(180deg);
}

/* Subcategories: chunky rows hanging off a connector spine that drops
   from the parent icon — modest indent, no per-row border stubs. */
.pr-sidenav__subs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 8px 8px 34px;
}
.pr-sidenav__subs::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 0;
    bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(
        180deg,
        rgb(244 199 93 / 0.4),
        var(--border-strong)
    );
}
.pr-sidenav__sub {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text-secondary);
    transition:
        color var(--speed) ease,
        background var(--speed) ease;
}
/* bullet marker inherits the row state colour */
.pr-sidenav__sub::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
    transition: opacity var(--speed) ease;
}
.pr-sidenav__sub:hover {
    color: var(--color-text-primary);
    background: var(--bg-2);
}
.pr-sidenav__sub:hover::before {
    opacity: 0.8;
}
.pr-sidenav__sub.is-active {
    color: var(--color-main);
    background: rgb(244 199 93 / 0.08);
}
.pr-sidenav__sub.is-active::before {
    opacity: 1;
    box-shadow: 0 0 8px rgb(244 199 93 / 0.7);
}

/* ==========================================================================
   Category hub (bento) — subcategory picker on parent categories.
   First real subcategory is the big feature; the rest tile out. Cards sit on
   the page's dark surface; each gets a per-card accent (--hue): top light
   bar, glow behind the image and a tinted CTA pill.
   ========================================================================== */

.pr-hub {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.pr-hub__card {
    --hue: var(--color-cyan);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 208px;
    padding: 22px 16px 16px;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--border);
    background:
        radial-gradient(
            130% 66% at 50% -8%,
            color-mix(in srgb, var(--hue) 15%, transparent),
            transparent 62%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.04),
        var(--shadow-1);
    transition:
        transform 300ms var(--ease-spring),
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
/* accent light bar along the top edge */
.pr-hub__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 4%,
        color-mix(in srgb, var(--hue) 85%, transparent),
        transparent 96%
    );
}
.pr-hub__card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--hue) 45%, transparent);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.05),
        0 24px 48px -20px color-mix(in srgb, var(--hue) 38%, rgb(0 0 0 / 0.85));
}
.pr-hub__card--feat {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 430px;
    padding: 36px 28px 22px;
    background:
        radial-gradient(
            110% 62% at 50% -6%,
            color-mix(in srgb, var(--hue) 21%, transparent),
            transparent 64%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.05),
        0 0 0 1px color-mix(in srgb, var(--hue) 14%, transparent),
        var(--shadow-1);
}

/* product-style figure: big icon floating over an accent halo */
.pr-hub__fig {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    flex: none;
    margin-bottom: 6px;
}
.pr-hub__fig::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        color-mix(in srgb, var(--hue) 40%, transparent),
        transparent 74%
    );
    filter: blur(11px);
}
.pr-hub__fig img {
    position: relative;
    width: 78%;
    height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.55));
    transition: transform 380ms var(--ease-spring);
}
.pr-hub__card:hover .pr-hub__fig img {
    transform: scale(1.09) translateY(-3px);
}
/* the feature figure absorbs the card's free height, so the icon floats
   centered in a real showcase area instead of leaving a dead gap */
.pr-hub__card--feat .pr-hub__fig {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 190px;
    margin-bottom: 12px;
}
.pr-hub__card--feat .pr-hub__fig::before {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 210px;
    height: 210px;
    transform: translate(-50%, -50%);
}
.pr-hub__card--feat .pr-hub__fig img {
    width: auto;
    height: 74%;
    max-height: 230px;
}

.pr-hub__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgb(239 68 68 / 0.94);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.pr-hub__badge i {
    font-size: 10px;
}
.pr-hub__content {
    position: relative;
    width: 100%;
}
.pr-hub__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15.5px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
    text-shadow: 0 2px 10px rgb(0 0 0 / 0.5);
}
.pr-hub__card--feat .pr-hub__name {
    font-size: 25px;
}
.pr-hub__desc {
    margin: 6px auto 0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-secondary);
    max-width: 94%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pr-hub__card--feat .pr-hub__desc {
    font-size: 13.5px;
    -webkit-line-clamp: 3;
}
.pr-hub__desc p {
    display: inline;
    margin: 0;
    font-size: inherit;
    color: inherit;
}
.pr-hub__desc br {
    display: none;
}
.pr-hub__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    width: 100%;
    margin-top: auto;
    padding-top: 15px;
}
.pr-hub__count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 0.03);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary);
}
.pr-hub__count i {
    font-size: 10.5px;
    color: color-mix(in srgb, var(--hue) 80%, #fff);
}
.pr-hub__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--hue) 40%, transparent);
    background: color-mix(in srgb, var(--hue) 10%, transparent);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--hue) 80%, #fff);
    transition:
        gap var(--speed) var(--ease-spring),
        background var(--speed) ease;
}
.pr-hub__card:hover .pr-hub__cta {
    gap: 11px;
    background: color-mix(in srgb, var(--hue) 20%, transparent);
}
@media (max-width: 900px) {
    .pr-hub {
        grid-template-columns: repeat(2, 1fr);
    }
    .pr-hub__card--feat {
        grid-column: span 2;
        grid-row: auto;
        min-height: 260px;
    }
    .pr-hub__card--feat .pr-hub__fig {
        width: 120px;
        height: 120px;
    }
    .pr-hub__card--feat .pr-hub__fig img {
        max-width: 100px;
        max-height: 100px;
    }
}
@media (max-width: 520px) {
    .pr-hub {
        grid-template-columns: 1fr;
    }
    .pr-hub__card--feat {
        grid-column: auto;
    }
}

/* ==========================================================================
   Category shelf (vitrina) — landing categories + hub subcategories.
   Each category gets its own row: image, name, description, own CTA.
   ========================================================================== */

.pr-shelf {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pr-shelf__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px 18px 28px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background:
        radial-gradient(
            80% 130% at 0% 50%,
            color-mix(in srgb, var(--hue, var(--color-cyan)) 9%, transparent),
            transparent 58%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.04),
        var(--shadow-1);
    overflow: hidden;
    transition:
        transform 280ms var(--ease-spring),
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
/* left hue accent bar + faint sheen for depth */
.pr-shelf__row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
        180deg,
        transparent,
        var(--hue, var(--color-cyan)),
        transparent
    );
    opacity: 0.45;
    transition: opacity var(--speed) ease;
}
.pr-shelf__row:nth-child(2n) {
    --hue: var(--color-main);
}
.pr-shelf__row:hover {
    transform: translateY(-3px);
    border-color: color-mix(
        in srgb,
        var(--hue, var(--color-cyan)) 45%,
        var(--border-strong)
    );
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.06),
        0 22px 46px -18px
            color-mix(in srgb, var(--hue, var(--color-cyan)) 40%, rgb(0 0 0 / 0.8));
}
.pr-shelf__row:hover::before {
    opacity: 1;
}
.pr-shelf__img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    flex: none;
}
.pr-shelf__img::before {
    content: "";
    position: absolute;
    inset: -10px;
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgb(244 199 93 / 0.08),
        transparent 70%
    );
}
.pr-shelf__img img {
    position: relative;
    max-height: 68px;
    max-width: 74px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.5));
    transition: transform 380ms var(--ease-spring);
}
.pr-shelf__row:hover .pr-shelf__img img {
    transform: scale(1.08);
}
.pr-shelf__body {
    min-width: 0;
    flex: 1;
}
.pr-shelf__body .name {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.pr-shelf__body .desc {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 560px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* descriptions come as raw HTML — flatten inner blocks so the clamp works */
.pr-shelf__body .desc p {
    display: inline;
    margin: 0;
    font-size: inherit;
    color: inherit;
}
.pr-shelf__body .desc br {
    display: none;
}
.pr-shelf__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}
.pr-shelf__meta .cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 0.03);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    transition:
        gap var(--speed) var(--ease-spring),
        border-color var(--speed) ease,
        color var(--speed) ease;
}
.pr-shelf__row:hover .cta {
    gap: 12px;
    border-color: var(--border-gold);
    color: var(--color-main);
}
@media (max-width: 720px) {
    .pr-shelf__row {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 24px 20px;
    }
    .pr-shelf__body .desc {
        max-width: none;
    }
}

/* ==========================================================================
   Modality hub (wizard step)
   ========================================================================== */

.pr-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
/* Inside the category shell the content column sits right of the sidebar;
   shrink the centering area by the sidebar+gap width so the steps line up
   with the page (logo) center instead of the column center. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .pr-shell .pr-content .pr-steps {
        margin-right: 282px;
    }
}
@media (min-width: 1280px) {
    .pr-shell .pr-content .pr-steps {
        margin-right: 348px;
    }
}
.pr-steps__step {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
}
.pr-steps__step .n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--bg-2);
    font-size: 12px;
    font-weight: 800;
}
.pr-steps__step.is-active {
    color: var(--color-text-primary);
}
.pr-steps__step.is-active .n {
    background: var(--color-main);
    border-color: var(--color-main);
    color: var(--color-accent);
}
.pr-steps__step.is-done {
    color: var(--color-text-secondary);
}
.pr-steps__step.is-done .n {
    background: rgb(34 197 94 / 0.15);
    border-color: rgb(34 197 94 / 0.45);
    color: var(--color-green);
    font-size: 10px;
}
.pr-steps__sep {
    width: 34px;
    height: 1px;
    background: var(--border-strong);
}

/* Modality hub now renders with the shared .pr-shelf vitrina (see above). */

/* ==========================================================================
   Product grid & cards
   ========================================================================== */

.pr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    gap: 16px;
    align-items: start;
}

.pr-product {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 18px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background:
        radial-gradient(
            120% 66% at 50% 0%,
            rgb(255 255 255 / 0.032),
            transparent 58%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.05),
        var(--shadow-1);
    transition:
        transform 320ms var(--ease-spring),
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
.pr-product:hover {
    transform: translateY(-5px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-2);
}

.pr-product__img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 116px;
    margin-bottom: 4px;
}
/* soft halo behind the product image */
.pr-product__img::before {
    content: "";
    position: absolute;
    inset: 6px -20px -14px;
    background: radial-gradient(
        50% 55% at 50% 55%,
        color-mix(in srgb, var(--tier, var(--color-cyan)) 15%, transparent),
        transparent 70%
    );
    pointer-events: none;
}
.pr-product__img img {
    position: relative;
    max-height: 105px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.55));
    transition: transform 420ms var(--ease-spring);
}
.pr-product:hover .pr-product__img img {
    transform: scale(1.1) translateY(-4px);
}

.pr-product__name {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--color-text-primary);
    transition: color var(--speed) ease;
}
a.pr-product__name:hover {
    color: var(--color-main);
}

.pr-product__price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-main);
    letter-spacing: 0.02em;
}
.pr-product__price del {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-red);
}
.pr-product__price .free {
    color: var(--color-blue);
}

/* CTA hierarchy: big buy button on top, utility icons beneath */
.pr-product__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
}
.pr-product__actions .grow {
    flex: 1;
}
.pr-product:not(.pr-product--row) .pr-product__actions .grow {
    flex: 1 1 100%;
    order: -1;
    height: 48px;
    font-size: 14px;
}
.pr-product:not(.pr-product--row) .pr-product__actions .pr-btn--icon {
    flex: 1;
    width: auto;
    height: 38px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.pr-product:not(.pr-product--row) .pr-product__actions .pr-btn--icon:hover {
    color: var(--color-text-primary);
}

.pr-product .countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px auto 0;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgb(239 68 68 / 0.4);
    background: rgb(239 68 68 / 0.12);
    color: #fda4a4;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pr-product .countdown::before {
    content: "\f252";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--color-red);
}

/* list rows (displayType == list) */
.pr-product--row {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
}
.pr-product--row .pr-product__img {
    height: 72px;
    flex: none;
    width: 72px;
    margin: 0;
}
.pr-product--row .pr-product__img img {
    max-height: 68px;
}
.pr-product--row .pr-product__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pr-product--row .pr-product__name {
    text-align: left;
}
.pr-product--row .pr-product__price {
    font-size: 16px;
}
.pr-product--row .pr-product__actions {
    width: auto;
    margin-left: auto;
    padding-top: 0;
}

/* Perks list inside product cards — NO scroll; every perk is its own pill.
   Granted perks pop green, denied ones fade back. Cards size to their content
   (grid uses align-items:start) so uneven counts never leave empty gaps. */
.pr-product .package__extra {
    width: 100%;
    margin-top: 14px;
}
.pr-product .package__extra table,
.pr-perks table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}
.pr-perks tr,
.pr-product .package__extra tr {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 9px;
    align-items: center;
    padding: 7px 10px;
    margin-bottom: 6px;
    border-radius: var(--radius-sm);
    text-align: left;
    line-height: 1.4;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: rgb(255 255 255 / 0.02);
    border: 1px solid var(--border);
    transition:
        border-color var(--speed) ease,
        background var(--speed) ease;
}
.pr-perks tr:last-child,
.pr-product .package__extra tr:last-child {
    margin-bottom: 0;
}
/* granted → green, brighter */
.pr-product .package__extra tr:has([data-yn="yes"]) {
    color: var(--color-text-primary);
    background: rgb(34 197 94 / 0.1);
    border-color: rgb(34 197 94 / 0.3);
}
/* denied → faded back */
.pr-product .package__extra tr:has([data-yn="no"]) {
    color: var(--color-text-muted);
    opacity: 0.72;
}
/* Grouped cards (upgrades / temporal / global): compact perk rows so long
   feature lists don't dwarf the card — mirrors the rank showcase density. */
.pr-groups .pr-product .package__extra {
    margin-top: 10px;
}
.pr-groups .pr-product .package__extra table {
    font-size: 10.5px;
}
.pr-groups .pr-product .package__extra tr {
    grid-template-columns: 13px 1fr;
    gap: 7px;
    padding: 3px 8px;
    margin-bottom: 4px;
    line-height: 1.3;
    border-radius: 8px;
}

/* Grouped rank sections — hide section when its grid is empty */
.pr-group:not(:has(.pr-product)) {
    display: none;
}
.pr-group .pr-section-h {
    margin-top: 10px;
}

/* When a category only has "permanent" items (no upgrades/temporal), it is a
   regular category: hide the group header entirely. */
.pr-groups:not(:has(.pr-group--upgrades .pr-product)):not(
        :has(.pr-group--temporal .pr-product)
    )
    .pr-group--permanent
    .pr-section-h {
    display: none;
}

/* Rank category detected (has upgrades or temporal items):
   permanent ranks get the 6-tier accent treatment by position. */
.pr-groups:has(.pr-group--upgrades .pr-product)
    .pr-group--permanent
    .pr-product,
.pr-groups:has(.pr-group--temporal .pr-product)
    .pr-group--permanent
    .pr-product {
    border-top: 3px solid var(--tier, var(--color-main));
    background:
        radial-gradient(
            120% 74% at 50% 0%,
            color-mix(in srgb, var(--tier, var(--color-main)) 17%, transparent),
            transparent 58%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.pr-groups:has(.pr-group--upgrades .pr-product)
    .pr-group--permanent
    .pr-product:hover,
.pr-groups:has(.pr-group--temporal .pr-product)
    .pr-group--permanent
    .pr-product:hover {
    border-top-color: var(--tier, var(--color-main));
    border-color: color-mix(
        in srgb,
        var(--tier, var(--color-main)) 40%,
        transparent
    );
    box-shadow: 0 20px 44px -14px
        color-mix(
            in srgb,
            var(--tier, var(--color-main)) 45%,
            rgb(0 0 0 / 0.75)
        );
}
.pr-groups:has(.pr-group--upgrades .pr-product)
    .pr-group--permanent
    .pr-product
    .pr-product__name,
.pr-groups:has(.pr-group--temporal .pr-product)
    .pr-group--permanent
    .pr-product
    .pr-product__name {
    color: var(--tier, var(--color-main));
}
.pr-groups:has(.pr-group--upgrades .pr-product)
    .pr-group--permanent
    .pr-product
    .add,
.pr-groups:has(.pr-group--temporal .pr-product)
    .pr-group--permanent
    .pr-product
    .add {
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--tier, var(--color-main)) 75%, #000 18%),
        var(--tier, var(--color-main))
    );
    border-color: transparent;
    color: #0c0c0e;
}
.pr-groups:has(.pr-group--upgrades .pr-product)
    .pr-group--permanent
    .pr-product
    .add:hover,
.pr-groups:has(.pr-group--temporal .pr-product)
    .pr-group--permanent
    .pr-product
    .add:hover {
    box-shadow: 0 10px 28px -8px
        color-mix(in srgb, var(--tier, var(--color-main)) 70%, transparent);
}

.pr-group--permanent .pr-product:nth-child(6n + 1) {
    --tier: var(--tier-1);
}
.pr-group--permanent .pr-product:nth-child(6n + 2) {
    --tier: var(--tier-2);
}
.pr-group--permanent .pr-product:nth-child(6n + 3) {
    --tier: var(--tier-3);
}
.pr-group--permanent .pr-product:nth-child(6n + 4) {
    --tier: var(--tier-4);
}
.pr-group--permanent .pr-product:nth-child(6n + 5) {
    --tier: var(--tier-5);
}
.pr-group--permanent .pr-product:nth-child(6n + 6) {
    --tier: var(--tier-6);
}

/* ==========================================================================
   Rank showcase (hybrid, built by main.js from the card grid)
   One compact tinted card per rank; picking one lights up an "aura"
   spotlight below the grid with every perk as a check pill + one big CTA.
   ========================================================================== */

.pr-rk {
    margin-top: 4px;
    animation: prRkIn 0.55s var(--ease-out) both;
}
@keyframes prRkIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.pr-rk__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: var(--color-text-secondary);
}
.pr-rk__hint i {
    color: var(--color-main);
}

/* --- rank cards --------------------------------------------------------- */
/* Flex keeps short rows CENTERED over the spotlight; --rk-max (set by JS)
   lets cards grow a bit bigger when there are fewer than six. */
.pr-rk__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    /* room for the flags overflowing above the first row */
    padding-top: 10px;
}
.pr-rk__card {
    flex: 1 1 168px;
    min-width: 168px;
    max-width: var(--rk-max, 208px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 20px 12px 12px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--tier) 26%, transparent);
    border-top: 3px solid var(--tier);
    background:
        radial-gradient(
            130% 60% at 50% 0%,
            color-mix(in srgb, var(--tier) 14%, transparent),
            transparent 60%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    cursor: pointer;
    transition:
        transform var(--speed) var(--ease-spring),
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
.pr-rk__card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tier) 48%, transparent);
}
.pr-rk__card.is-sel {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tier) 72%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--tier) 45%, transparent),
        0 0 30px -6px color-mix(in srgb, var(--tier) 55%, transparent);
}
/* pointer connecting the selected card to the spotlight */
.pr-rk__card.is-sel::after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--tier);
}
.pr-rk__flags {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 6px;
    white-space: nowrap;
}
.pr-rk__flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pr-rk__flag--best {
    background: linear-gradient(120deg, #b98a2c, #f4c75d);
    color: #171308;
    box-shadow: 0 6px 18px -6px rgb(244 199 93 / 0.55);
}
.pr-rk__flag--pop {
    background: var(--bg-3);
    border: 1px solid var(--color-main);
    color: var(--color-main);
}
.pr-rk__card > .pr-discount {
    top: 8px;
    right: 8px;
    padding: 4px 9px;
    font-size: 10.5px;
}
.pr-rk__fig {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex: none;
}
.pr-rk__fig::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        color-mix(in srgb, var(--tier) 50%, transparent),
        transparent 74%
    );
    filter: blur(9px);
}
.pr-rk__fig img {
    position: relative;
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.5));
    transition: transform var(--speed) var(--ease-spring);
}
.pr-rk__card:hover .pr-rk__fig img {
    transform: translateY(-3px) scale(1.06);
}
.pr-rk__name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tier);
}
.pr-rk__name:hover {
    text-decoration: underline;
}
.pr-rk__price {
    font-size: 17px;
    font-weight: 900;
}
.pr-rk__sig {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 10px;
    padding: 0;
}
.pr-rk__sig li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 0.03);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    color: var(--color-text-secondary);
}
.pr-rk__sig li i {
    flex: none;
    font-size: 10px;
    color: var(--color-green);
}
.pr-rk__sig li span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pr-rk__sig li b {
    color: var(--color-main-light);
    font-size: 10.5px;
    white-space: nowrap;
}
/* the card's own action buttons: one clean tier-tinted CTA */
.pr-rk__card .pr-product__actions {
    width: 100%;
    margin-top: auto;
    padding-top: 2px;
}
.pr-rk__card .pr-product__actions > .pr-btn--icon:first-child,
.pr-rk__card .pr-product__actions .gift {
    display: none;
}
.pr-rk__card .pr-product__actions .pr-btn {
    font-size: 10.5px;
    padding-inline: 8px;
}
.pr-rk__card .pr-product__actions .add,
.pr-rk__card .pr-product__actions .subscribe {
    height: auto;
    min-height: 36px;
    padding-block: 6px;
    white-space: normal;
    line-height: 1.2;
}
.pr-rk__card .add {
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--tier) 75%, #000 18%),
        var(--tier)
    );
    border-color: transparent;
    color: #0c0c0e;
}
.pr-rk__card .add:hover {
    box-shadow: 0 10px 28px -8px
        color-mix(in srgb, var(--tier) 70%, transparent);
}
/* real button: "+N · see all perks" expander under the last signature perk */
.pr-rk__see {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px dashed rgb(255 255 255 / 0.16);
    background: rgb(255 255 255 / 0.03);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition:
        color var(--speed) ease,
        border-color var(--speed) ease,
        background var(--speed) ease;
}
.pr-rk__see i {
    font-size: 9px;
}
.pr-rk__see:hover {
    color: var(--tier);
    border-color: color-mix(in srgb, var(--tier) 55%, transparent);
    background: color-mix(in srgb, var(--tier) 10%, transparent);
}
.pr-rk__card:hover .pr-rk__see,
.pr-rk__card.is-sel .pr-rk__see {
    color: var(--tier);
}

/* --- spotlight (aura) --------------------------------------------------- */
.pr-rk__spotwrap {
    margin-top: 24px;
    scroll-margin-top: 84px;
}
@property --pr-rk-ang {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.pr-rk__spot {
    position: relative;
    isolation: isolate;
    border-radius: 18px;
    padding: 22px 22px 18px;
    border: 1px solid color-mix(in srgb, var(--tier) 30%, transparent);
    background:
        radial-gradient(
            90% 60% at 50% 0%,
            color-mix(in srgb, var(--tier) 15%, transparent),
            transparent 62%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    box-shadow: 0 30px 80px -38px color-mix(in srgb, var(--tier) 50%, transparent);
    animation: prRkSpotIn 0.4s var(--ease-out) both;
}
@keyframes prRkSpotIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* rotating aura ring hugging the panel border */
.pr-rk__spot::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    padding: 2px;
    background: conic-gradient(
        from var(--pr-rk-ang),
        transparent 8%,
        color-mix(in srgb, var(--tier) 90%, #fff) 16%,
        transparent 26%,
        transparent 56%,
        color-mix(in srgb, var(--tier) 70%, #fff) 66%,
        transparent 78%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: prRkAura 5s linear infinite;
    pointer-events: none;
}
@keyframes prRkAura {
    to {
        --pr-rk-ang: 360deg;
    }
}
.pr-rk__snav {
    position: absolute;
    top: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgb(26 27 35 / 0.72);
    color: var(--color-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition:
        color var(--speed) ease,
        border-color var(--speed) ease;
}
.pr-rk__snav:hover {
    color: var(--tier);
    border-color: color-mix(in srgb, var(--tier) 60%, transparent);
}
.pr-rk__snav.is-prev {
    left: 12px;
}
.pr-rk__snav.is-next {
    right: 12px;
}
.pr-rk__shead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-inline: 40px;
}
.pr-rk__sfig {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    flex: none;
}
.pr-rk__sfig::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        color-mix(in srgb, var(--tier) 55%, transparent),
        transparent 74%
    );
    filter: blur(10px);
    animation: prRkHalo 2.6s ease-in-out infinite;
}
@keyframes prRkHalo {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.85;
    }
}
.pr-rk__sfig img {
    position: relative;
    max-width: 72px;
    max-height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgb(0 0 0 / 0.55));
    animation: prRkFloat 4.5s ease-in-out infinite;
}
@keyframes prRkFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}
.pr-rk__sinfo {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    text-align: left;
}
.pr-rk__sname {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tier);
    text-shadow: 0 0 26px color-mix(in srgb, var(--tier) 60%, transparent);
}
.pr-rk__sname:hover {
    text-decoration: underline;
}
.pr-rk__sprice {
    font-size: 22px;
    font-weight: 900;
}
.pr-rk__smeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}
.pr-rk__smeta .pr-rk__flags {
    position: static;
    transform: none;
}
.pr-rk__smeta .pr-discount {
    position: static;
    padding: 4px 10px;
    font-size: 10.5px;
    animation: none;
}
.pr-rk__scount {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgb(255 255 255 / 0.04);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text-secondary);
}
.pr-rk__scount i {
    color: var(--tier);
}
.pr-rk__buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-left: auto;
    padding: 14px 26px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--tier) 75%, #000 18%),
        var(--tier)
    );
    color: #0c0c0e;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    animation: prRkBuy 2.4s ease-in-out infinite;
    transition: transform var(--speed) var(--ease-spring);
}
.pr-rk__buy:hover {
    transform: translateY(-2px);
}
.pr-rk__buy:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    animation: none;
}
@keyframes prRkBuy {
    0%,
    100% {
        box-shadow:
            0 0 0 0 color-mix(in srgb, var(--tier) 40%, transparent),
            0 12px 28px -12px color-mix(in srgb, var(--tier) 70%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 6px transparent,
            0 12px 36px -8px color-mix(in srgb, var(--tier) 80%, transparent);
    }
}

/* every perk as a check pill, flowing into up to 3 compact columns */
.pr-rk__perks {
    margin-top: 16px;
    columns: 3 250px;
    column-gap: 10px;
}
.pr-rk__perk {
    break-inside: avoid;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 6px;
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid rgb(34 197 94 / 0.22);
    background: rgb(34 197 94 / 0.08);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-primary);
}
.pr-rk__perk i {
    flex: none;
    font-size: 12px;
    color: var(--color-green);
}
.pr-rk__perk span {
    flex: 1;
    min-width: 0;
}
.pr-rk__perk b {
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
    color: color-mix(in srgb, var(--tier) 65%, #fff);
}
.pr-rk__perk.is-no {
    border-color: var(--border);
    background: rgb(255 255 255 / 0.02);
    color: var(--color-text-muted);
    opacity: 0.6;
}
.pr-rk__perk.is-no i {
    color: rgb(239 68 68 / 0.5);
}

/* full-bleed strip closing the spotlight — "there's more", opens the popup */
.pr-rk__sall {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 18px -22px -18px;
    padding: 15px 18px 17px;
    border-top: 1px solid color-mix(in srgb, var(--tier) 40%, transparent);
    border-radius: 0 0 17px 17px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--tier) 10%, transparent),
        color-mix(in srgb, var(--tier) 26%, transparent)
    );
    color: var(--color-text-primary);
    text-align: center;
    cursor: pointer;
    transition:
        background var(--speed) ease,
        color var(--speed) ease;
}
/* sheen sweeping across so the strip reads as "keep going" */
.pr-rk__sall::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgb(255 255 255 / 0.14) 50%,
        transparent 62%
    );
    transform: translateX(-100%);
    animation: prRkSallSheen 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes prRkSallSheen {
    0%, 55% {
        transform: translateX(-100%);
    }
    90%, 100% {
        transform: translateX(100%);
    }
}
.pr-rk__sall-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--tier) 70%, #fff);
}
.pr-rk__sall-kicker i {
    font-size: 10px;
    animation: prRkSallWink 2.4s ease-in-out infinite;
}
@keyframes prRkSallWink {
    0%, 70%, 100% {
        opacity: 1;
        transform: none;
    }
    82% {
        opacity: 0.55;
        transform: scale(1.25) rotate(-8deg);
    }
}
.pr-rk__sall-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    text-shadow: 0 2px 14px color-mix(in srgb, var(--tier) 60%, transparent);
}
.pr-rk__sall-label i {
    font-size: 14px;
    color: color-mix(in srgb, var(--tier) 55%, #fff);
    animation: prRkSallNudge 1.9s ease-in-out infinite;
    transition: transform var(--speed) ease;
}
@keyframes prRkSallNudge {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}
.pr-rk__sall:hover {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--tier) 20%, transparent),
        color-mix(in srgb, var(--tier) 42%, transparent)
    );
}
.pr-rk__sall:hover .pr-rk__sall-label i {
    animation: none;
    transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
    .pr-rk__spot::before,
    .pr-rk__sfig::before,
    .pr-rk__sfig img,
    .pr-rk__buy,
    .pr-rk__sall::after,
    .pr-rk__sall-kicker i,
    .pr-rk__sall-label i {
        animation: none;
    }
}
@media (max-width: 640px) {
    .pr-rk__card {
        min-width: 0;
        flex-basis: calc(50% - 6px);
        max-width: none;
    }
    .pr-rk__spot {
        padding: 18px 14px 14px;
    }
    .pr-rk__shead {
        padding-inline: 0;
        padding-top: 34px;
    }
    .pr-rk__buy {
        width: 100%;
        margin-left: 0;
    }
    .pr-rk__sall {
        margin: 14px -14px -14px;
        padding: 13px 14px 15px;
    }
    .pr-rk__sall-label {
        font-size: 14px;
    }
}

/* cards consumed by the comparison stay as the no-JS fallback */
.pr-product.is-compared {
    display: none !important;
}
.pr-grid--compared {
    display: none;
}

/* ==========================================================================
   Deals page (category matching config offers-category)
   ========================================================================== */

.pr-deals__hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 44px 28px 40px;
    border-radius: var(--radius);
    border: 1px solid rgb(244 199 93 / 0.35);
    background:
        radial-gradient(
            110% 130% at 50% 0%,
            rgb(244 199 93 / 0.16),
            transparent 55%
        ),
        radial-gradient(
            90% 120% at 85% 100%,
            rgb(239 68 68 / 0.1),
            transparent 60%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    overflow: hidden;
    isolation: isolate;
}
.pr-deals__hero::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto;
    height: 120%;
    z-index: -1;
    background: conic-gradient(
        from 180deg at 50% 0%,
        transparent 40%,
        rgb(244 199 93 / 0.08) 50%,
        transparent 60%
    );
    pointer-events: none;
}
.pr-deals__flame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgb(244 199 93 / 0.4);
    background: radial-gradient(
        closest-side,
        rgb(244 199 93 / 0.25),
        rgb(244 199 93 / 0.06)
    );
    font-size: 26px;
    color: var(--color-main);
    animation: prFlame 2.2s ease-in-out infinite;
}
@keyframes prFlame {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgb(244 199 93 / 0.25);
    }
    50% {
        transform: scale(1.07);
        box-shadow: 0 0 34px 2px rgb(244 199 93 / 0.2);
    }
}
.pr-deals__title {
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: linear-gradient(100deg, #ffffff 20%, var(--color-main) 60%, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pr-deals__sub {
    max-width: 520px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.pr-deals__promo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-gold);
    background: rgb(244 199 93 / 0.1);
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-main);
}

/* deals grids stay compact & uniform: no perk tables on the cards here
   (details are one click away in the product popup) */
.pr-deals__own .package__extra,
.pr-deals__all .package__extra,
.pr-deals__popular .package__extra {
    display: none;
}

/* highlighted deals link in the navbar */
.pr-navbar__links .pr-navbar__offers {
    color: var(--color-main);
}
.pr-navbar__links .pr-navbar__offers i {
    margin-right: 4px;
}
.pr-navbar__links .pr-navbar__offers:hover {
    background: rgb(244 199 93 / 0.1);
}

/* Category header banner (image + title + description + back) */
.pr-cat-head {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 24px 28px;
    background:
        radial-gradient(
            90% 140% at 0% 50%,
            rgb(34 211 238 / 0.09),
            transparent 55%
        ),
        var(--bg-1);
}
.pr-cat-head__img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    flex: none;
}
.pr-cat-head__img::before {
    content: "";
    position: absolute;
    inset: -12px;
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgb(34 211 238 / 0.22),
        transparent 70%
    );
}
.pr-cat-head__img img {
    position: relative;
    max-height: 72px;
    max-width: 76px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.6));
}
.pr-cat-head__body {
    flex: 1;
    min-width: 220px;
}
.pr-cat-head__desc {
    margin-top: 8px;
    max-width: 640px;
}
.pr-cat-head__desc p {
    margin-bottom: 0;
}
.pr-cat-head > .pr-btn {
    margin-left: auto;
}
@media (max-width: 640px) {
    .pr-cat-head {
        flex-direction: column;
        text-align: center;
    }
    .pr-cat-head > .pr-btn {
        margin: 0 auto;
    }
}

/* List display type */
.pr-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (max-width: 760px) {
    .pr-list .pr-product--row {
        flex-wrap: wrap;
        justify-content: center;
    }
    .pr-list .pr-product--row .pr-product__actions {
        width: 100%;
        margin-left: 0;
    }
}

.pr-product__actions {
    position: relative;
}

/* ==========================================================================
   Login
   ========================================================================== */

.pr-login {
    position: relative;
    margin: 20px 0 70px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg-1);
}
.pr-login__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
    filter: blur(2px);
    pointer-events: none;
}
.pr-login__card {
    position: relative;
    z-index: 1;
    max-width: 460px;
    margin: 0 auto;
    padding: 70px 24px 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.popup .pr-login__card {
    padding: 56px 24px;
}
.pr-login__title {
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.15;
    font-size: clamp(24px, 4vw, 34px);
}
.pr-login__title .s1 {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.55em;
    letter-spacing: 0.14em;
}
.pr-login__title .s2 {
    display: block;
    color: var(--color-main);
}
.pr-login__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.pr-login__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pr-login__input-row {
    position: relative;
    display: flex;
    align-items: center;
}
.pr-login__avatar {
    position: absolute;
    left: 9px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
}
.pr-login__form input.pr-input {
    margin: 0;
    background: var(--bg-2);
    font-size: 15px;
}
.pr-login__input-row input.pr-input {
    padding: 0 16px 0 50px;
    height: 50px;
}
.pr-login__input-row:not(:has(.pr-login__avatar)) input.pr-input {
    padding-left: 16px;
}
.pr-login__prefix {
    position: absolute;
    left: 46px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgb(34 197 94 / 0.18);
    border: 1px solid rgb(34 197 94 / 0.45);
    color: var(--color-green);
    font-weight: 800;
    font-size: 14px;
}
.pr-login__input-row:has(.pr-login__prefix:not([hidden])) input.pr-input {
    padding-left: 78px;
}
.pr-login__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.pr-login__note i {
    color: var(--color-main);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.pr-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-2);
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 600;
    transition:
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
.pr-input::placeholder {
    color: var(--color-text-muted);
    font-weight: 500;
}
.pr-input:focus {
    border-color: var(--color-main);
    box-shadow: 0 0 0 3px rgb(244 199 93 / 0.15);
}

select.pr-input {
    cursor: pointer;
}

/* Bedrock toggle (login) — a full-width card row instead of a floating pill */
.pr-bedrock {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    overflow: hidden;
}
.pr-bedrock__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-secondary);
}
.pr-bedrock__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pr-bedrock__label i {
    color: var(--color-green);
}
.pr-bedrock input {
    display: none;
}
.pr-bedrock__track {
    position: relative;
    width: 46px;
    height: 26px;
    flex: none;
    border-radius: 999px;
    background: var(--bg-3);
    border: 1px solid var(--border-strong);
    transition:
        background var(--speed) ease,
        border-color var(--speed) ease;
}
.pr-bedrock__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--color-text-secondary);
    transition:
        transform var(--speed) var(--ease-spring),
        background var(--speed) ease;
}
.pr-bedrock input:checked + .pr-bedrock__track {
    background: rgb(34 197 94 / 0.25);
    border-color: var(--color-green);
}
.pr-bedrock input:checked + .pr-bedrock__track::after {
    transform: translateX(20px);
    background: var(--color-green);
}
/* Note swaps text (autoclean ⇄ bedrock) inside a reserved-height footer so
   flipping the toggle never resizes or re-centers the login modal. */
.pr-bedrock__note {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 14px;
    border-top: 1px solid var(--border);
    background: rgb(0 0 0 / 0.14);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.pr-bedrock__note-default,
.pr-bedrock__note-on {
    align-items: center;
    gap: 7px;
}
.pr-bedrock__note-default {
    display: inline-flex;
}
.pr-bedrock__note-on {
    display: none;
}
.pr-bedrock__note i {
    color: var(--color-main);
}
.pr-bedrock.is-on .pr-bedrock__note-default {
    display: none;
}
.pr-bedrock.is-on .pr-bedrock__note-on {
    display: inline-flex;
}
.pr-bedrock.is-on .pr-bedrock__note-on i {
    color: var(--color-green);
}

/* ==========================================================================
   Dialogs (native <dialog>)
   ========================================================================== */

dialog.pr-dialog {
    margin: auto;
    padding: 0;
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--bg-1);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-2);
    overflow: hidden auto;
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition:
        opacity 200ms ease,
        transform 260ms var(--ease-spring),
        overlay 260ms allow-discrete,
        display 260ms allow-discrete;
}
dialog.pr-dialog[open] {
    opacity: 1;
    transform: none;
}
@starting-style {
    dialog.pr-dialog[open] {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
    }
}
dialog.pr-dialog::backdrop {
    background: rgb(0 0 0 / 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
dialog.pr-dialog--sm {
    width: min(560px, calc(100vw - 32px));
}

.pr-dialog__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 26px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-main);
}
.pr-dialog__body {
    padding: 26px;
}
.pr-dialog__close {
    margin-left: auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 16px;
    cursor: pointer;
    transition:
        background var(--speed) ease,
        color var(--speed) ease;
}
.pr-dialog__close:hover {
    background: rgb(255 255 255 / 0.08);
    color: var(--color-text-primary);
}

/* Store menu dialog — big category cards with full subcategory rows.
   Cards flow in CSS columns (masonry): a category without subcategories
   never leaves a void under itself. */
dialog.pr-dialog--menu {
    width: min(940px, calc(100vw - 32px));
}

.pr-mmenu {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* the JS filter toggles [hidden]; flex/grid displays would override it */
.pr-mmenu [hidden] {
    display: none !important;
}

/* --- top row: home shortcut + live search ------------------------------ */
.pr-mmenu__top {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pr-mmenu__home {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 240px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    transition:
        color var(--speed) ease,
        border-color var(--speed) ease;
}
.pr-mmenu__home .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    border: 1px solid var(--border-gold);
    background: rgb(244 199 93 / 0.1);
    color: var(--color-main);
}
.pr-mmenu__home .t {
    flex: 1;
}
.pr-mmenu__home:hover {
    color: var(--color-text-primary);
    border-color: var(--border-gold);
}
.pr-mmenu__search {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1 1 280px;
    padding: 0 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 0.03);
    cursor: text;
    transition: border-color var(--speed) ease;
}
.pr-mmenu__search:focus-within {
    border-color: var(--border-gold);
}
.pr-mmenu__search i {
    font-size: 13px;
    color: var(--color-text-muted);
}
.pr-mmenu__search input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 0;
    outline: none;
    background: none;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
}
.pr-mmenu__search input::placeholder {
    color: var(--color-text-muted);
}

/* --- category cards (masonry columns) ---------------------------------- */
.pr-mmenu__cols {
    columns: 2;
    column-gap: 12px;
}
@media (max-width: 720px) {
    .pr-mmenu__cols {
        columns: 1;
    }
}
.pr-mmenu__cat {
    --hue: var(--color-cyan);
    display: flex;
    flex-direction: column;
    break-inside: avoid;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background:
        radial-gradient(
            120% 70% at 50% 0%,
            color-mix(in srgb, var(--hue) 9%, transparent),
            transparent 60%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    animation: prMenuIn 0.4s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms);
    transition:
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
@keyframes prMenuIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.pr-mmenu__cols > .pr-mmenu__cat:nth-of-type(2n) {
    --hue: var(--color-main);
}
/* deals category pops gold regardless of its position */
.pr-mmenu__cols > .pr-mmenu__cat.pr-mmenu__cat--hot {
    --hue: var(--color-main);
    border-color: var(--border-gold);
}
.pr-mmenu__cat:hover {
    border-color: color-mix(in srgb, var(--hue) 45%, transparent);
    box-shadow: 0 16px 36px -18px
        color-mix(in srgb, var(--hue) 45%, rgb(0 0 0 / 0.8));
}

.pr-mmenu__cat-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
}
.pr-mmenu__cat-head .fig {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex: none;
}
.pr-mmenu__cat-head .fig::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        color-mix(in srgb, var(--hue) 42%, transparent),
        transparent 75%
    );
    filter: blur(8px);
}
.pr-mmenu__cat-head .fig img {
    position: relative;
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.5));
}
.pr-mmenu__cat-head .body {
    flex: 1;
    min-width: 0;
}
.pr-mmenu__cat-head .name {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
}
.pr-mmenu__cat-head .name .hot {
    margin-right: 2px;
    font-size: 12px;
    color: var(--color-main);
}
.pr-mmenu__cat-head .meta {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.pr-mmenu__cat-head .arrow,
.pr-mmenu__home .arrow {
    font-size: 12px;
    color: var(--color-text-muted);
    transition:
        transform var(--speed) ease,
        color var(--speed) ease;
}
.pr-mmenu__cat:hover .arrow,
.pr-mmenu__home:hover .arrow {
    transform: translateX(3px);
    color: var(--hue, var(--color-main));
}

/* --- subcategories: full rows, easy to scan and hit -------------------- */
.pr-mmenu__subs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 12px;
    padding: 10px 0 12px;
    border-top: 1px dashed var(--border-strong);
}
.pr-mmenu__sub {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 0.025);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
    transition:
        color var(--speed) ease,
        border-color var(--speed) ease,
        background var(--speed) ease;
}
.pr-mmenu__sub img {
    width: 26px;
    height: 26px;
    flex: none;
    object-fit: contain;
}
.pr-mmenu__sub .t {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pr-mmenu__sub > i {
    font-size: 10px;
    color: var(--color-text-muted);
    transition:
        transform var(--speed) ease,
        color var(--speed) ease;
}
.pr-mmenu__sub:hover {
    color: var(--color-text-primary);
    border-color: color-mix(in srgb, var(--hue) 50%, transparent);
    background: color-mix(in srgb, var(--hue) 10%, transparent);
}
.pr-mmenu__sub:hover > i {
    transform: translateX(2px);
    color: var(--hue, var(--color-main));
}

/* --- empty state for the live search ----------------------------------- */
.pr-mmenu__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 26px 16px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-strong);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
}
.pr-mmenu__empty i {
    font-size: 16px;
    color: var(--color-text-muted);
}

.pr-mmenu__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-strong);
}
.pr-mmenu__pages .label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
}
.pr-mmenu__page {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-secondary);
    transition:
        color var(--speed) ease,
        border-color var(--speed) ease;
}
.pr-mmenu__page:hover {
    color: var(--color-text-primary);
    border-color: var(--border-gold);
}

/* Currency grid */
.pr-currency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}
.pr-currency-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-2);
    font-weight: 800;
    font-size: 13px;
    color: var(--color-text-secondary);
    transition: all var(--speed) ease;
}
.pr-currency-grid a:hover {
    border-color: var(--border-gold);
    color: var(--color-text-primary);
}
.pr-currency-grid a.is-active {
    background: rgb(244 199 93 / 0.14);
    border-color: var(--color-main);
    color: var(--color-main);
}

/* ==========================================================================
   Tooltip (data-tip)
   ========================================================================== */

[data-tip] {
    position: relative;
}
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    translate: -50% 4px;
    z-index: 40;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    background: var(--bg-3);
    color: var(--color-text-primary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition:
        opacity var(--speed) ease,
        translate var(--speed) var(--ease-spring);
}
[data-tip]:hover::after {
    opacity: 1;
    translate: -50% 0;
}

/* ==========================================================================
   Featured carousel (vanilla)
   ========================================================================== */

.pr-carousel {
    position: relative;
    border-radius: 22px;
    border: 1px solid rgb(244 199 93 / 0.3);
    overflow: hidden;
    min-height: 290px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.05),
        0 0 60px -22px rgb(244 199 93 / 0.3);
    transition:
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
/* hover: the whole deal leans in — sheen sweep, product pops, badge pulses */
.pr-carousel:hover {
    border-color: rgb(244 199 93 / 0.5);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.05),
        0 0 70px -18px rgb(244 199 93 / 0.45);
}
.pr-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 34%;
    z-index: 4;
    background: linear-gradient(
        100deg,
        transparent,
        rgb(255 255 255 / 0.05) 42%,
        rgb(244 199 93 / 0.09) 58%,
        transparent
    );
    transform: skewX(-16deg);
    pointer-events: none;
    transition: left 900ms var(--ease-out);
}
.pr-carousel:hover::after {
    left: 135%;
}
.pr-carousel:hover .pr-carousel__slide.is-active .pr-carousel__content > img {
    transform: scale(1.08) rotate(-2.5deg);
}
.pr-carousel:hover .pr-carousel__slide.is-active > .pr-discount {
    animation: prDealPulse 1.1s ease-in-out infinite;
}
@keyframes prDealPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgb(239 68 68 / 0.4);
    }
    50% {
        transform: scale(1.12);
        box-shadow: 0 0 0 7px rgb(239 68 68 / 0);
    }
}
.pr-carousel:hover .pr-carousel__info .price {
    color: var(--color-main-light);
    text-shadow: 0 0 22px rgb(244 199 93 / 0.45);
}
/* "featured" ribbon (text from data-kicker on the container) */
.pr-carousel[data-kicker]:not([data-kicker=""])::before {
    content: attr(data-kicker);
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 6;
    padding: 8px 15px;
    border-radius: 999px;
    background: linear-gradient(
        120deg,
        var(--color-main),
        var(--color-main-light)
    );
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 6px 22px -4px rgb(244 199 93 / 0.55);
}
.pr-carousel__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 30px 68px;
    opacity: 0;
    transform: scale(1.02);
    pointer-events: none;
    transition:
        opacity 480ms ease,
        transform 700ms var(--ease-spring);
}
.pr-carousel__slide.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.pr-carousel__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.pr-carousel__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(9px) brightness(0.3) saturate(0.95);
    transform: scale(1.08);
}
.pr-carousel__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            46% 85% at 17% 52%,
            color-mix(
                in srgb,
                var(--slide-color, var(--color-main)) 14%,
                transparent
            ),
            transparent 70%
        ),
        linear-gradient(
            100deg,
            rgb(13 14 19 / 0.9) 30%,
            rgb(13 14 19 / 0.55)
        );
}
.pr-carousel__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 26px;
    width: 100%;
}
.pr-carousel__content > img {
    height: 172px;
    width: auto;
    flex: none;
    margin-inline: 22px;
    filter: drop-shadow(0 20px 32px rgb(0 0 0 / 0.65));
    transition: transform 700ms var(--ease-spring);
}
.pr-carousel__slide.is-active .pr-carousel__content > img {
    transform: scale(1.02);
}
.pr-carousel__info {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}
.pr-carousel__info h3 {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.6vw, 30px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--color-text-primary);
}
.pr-carousel__info .price {
    font-family: var(--font-display);
    font-size: 29px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--color-main);
}
.pr-carousel__info .price del {
    margin-left: 12px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-muted);
    font-weight: 600;
}
.pr-carousel__info .row {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.pr-carousel__nav {
    position: absolute;
    top: 16px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgb(13 14 19 / 0.55);
    color: var(--color-text-secondary);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition:
        background var(--speed) ease,
        color var(--speed) ease,
        transform var(--speed) var(--ease-spring);
}
.pr-carousel__nav:hover {
    background: var(--bg-3);
    color: var(--color-text-primary);
    transform: scale(1.08);
}
.pr-carousel__nav--prev {
    right: 60px;
}
.pr-carousel__nav--next {
    right: 16px;
}
/* discount badge injected on the slide */
.pr-carousel__slide > .pr-discount {
    position: absolute;
    top: 20px;
    right: 106px;
    z-index: 5;
}
@media (max-width: 760px) {
    .pr-carousel__slide {
        padding: 56px 24px 40px;
    }
    .pr-carousel__content {
        flex-direction: column;
        text-align: center;
    }
    .pr-carousel__content > img {
        height: 116px;
        margin-inline: 0;
    }
    .pr-carousel__info {
        align-items: center;
    }
    .pr-carousel__slide > .pr-discount {
        right: auto;
        left: 16px;
        top: 52px;
    }
}
.pr-carousel__dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    translate: -50%;
    z-index: 5;
    display: flex;
    gap: 8px;
}
.pr-carousel__dots button {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.3);
    cursor: pointer;
    transition: all var(--speed) ease;
}
.pr-carousel__dots button.is-active {
    width: 22px;
    background: var(--color-main);
}

/* ==========================================================================
   Info cards (landing)
   ========================================================================== */

.pr-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .pr-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.pr-info-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.pr-info-card p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}
.pr-info-card .pr-btn {
    margin-top: 14px;
}

.pr-prose p {
    margin-bottom: 10px;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.pr-prose b,
.pr-prose strong {
    color: var(--color-text-primary);
}
.pr-prose a {
    color: var(--color-main);
    text-decoration: underline;
}
.pr-prose ul,
.pr-prose ol {
    padding-left: 20px;
    margin-bottom: 10px;
    color: var(--color-text-secondary);
}
.pr-prose li {
    display: list-item;
    font-size: 14px;
    margin-bottom: 4px;
}
.pr-prose img {
    border-radius: var(--radius-sm);
}
.pr-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}
.pr-prose table td,
.pr-prose table th {
    padding: 8px 12px;
    border: 1px solid var(--border);
    color: var(--color-text-secondary);
}
.pr-prose table th {
    color: var(--color-text-primary);
    font-weight: 700;
    background: var(--bg-2);
}

/* yes/no icon colors (auto-replaced by main.js) */
[data-yn="yes"] .fa-circle-check {
    color: var(--color-green);
}
[data-yn="no"] .fa-circle-xmark {
    color: var(--color-red);
}
[data-yn] i {
    font-size: 15px;
    line-height: 1;
}

/* ==========================================================================
   Support + legal cards (help / refund / privacy)
   ========================================================================== */
.pr-legal {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}
.pr-legal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 720px) {
    .pr-legal__grid {
        grid-template-columns: 1fr;
    }
}
.pr-legal__card {
    display: flex;
    flex-direction: column;
    transition:
        transform var(--speed) var(--ease-spring),
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
.pr-legal__card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-2);
}
.pr-legal__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.pr-legal__ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 15px;
    border: 1px solid transparent;
}
.pr-legal__ic--gold {
    color: var(--color-main);
    background: rgb(244 199 93 / 0.12);
    border-color: rgb(244 199 93 / 0.28);
}
.pr-legal__ic--red {
    color: var(--color-red);
    background: rgb(239 68 68 / 0.12);
    border-color: rgb(239 68 68 / 0.28);
}
.pr-legal__ic--green {
    color: var(--color-green);
    background: rgb(34 197 94 / 0.12);
    border-color: rgb(34 197 94 / 0.28);
}
.pr-legal__title {
    font-family: var(--font-display);
    font-size: clamp(15px, 1.8vw, 19px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
    margin: 0;
}
.pr-legal__text {
    flex: 1;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.pr-footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--border);
    background: var(--bg-1);
}
.pr-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-prism);
    opacity: 0.55;
}
.pr-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 0;
    text-align: center;
}
@media (min-width: 768px) {
    .pr-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}
.pr-footer__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pr-footer__brand img {
    width: 42px;
    height: 42px;
}
.pr-footer__brand .l1 {
    font-size: 13px;
    font-weight: 700;
}
.pr-footer__brand .l2 {
    font-size: 12px;
    color: var(--color-text-muted);
}
/* ==========================================================================
   Reveal animations (IntersectionObserver adds .is-in)
   ========================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 600ms ease,
        transform 700ms var(--ease-spring);
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
[data-reveal="left"] {
    transform: translateX(-22px);
}
[data-reveal="right"] {
    transform: translateX(22px);
}
[data-reveal="zoom"] {
    transform: scale(0.94);
}
[data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    * {
        animation-duration: 0.01ms !important;
    }
}

/* no-js / pre-init safety: main.js adds .js to <html>; without it nothing hides */
html:not(.js) [data-reveal] {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   Misc & overrides of shared.css plumbing to match theme
   ========================================================================== */

.popup,
dialog.pr-dialog::backdrop {
    --fade-duration: 0.3s;
}

.popup .popup-content {
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--bg-1);
}

.popup-close {
    border-radius: 0 var(--radius) 0 var(--radius-sm);
    /* the close button is appended before the fetched popup children, so
       full-bleed blocks (product hero) paint over it — lift it above */
    z-index: 30;
}

.login-popup-content {
    width: 100%;
    max-width: 860px;
    overflow: hidden;
    padding: 0 !important;
}

.store-product-popup-content {
    padding: 0 !important;
    width: min(1180px, 96vw);
    max-width: none;
}

.store-product-full {
    background: var(--bg-1) !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border-strong) !important;
    /* clip, not hidden: `hidden` turns this box into a scrollport and would
       break the sticky buy-bar footer, which must follow the popup's scroll */
    overflow: clip;
}

.gift-form-popup .popup-content,
.product-options-popup .popup-content {
    background: var(--bg-1) !important;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    padding: 30px;
}

.quantity-field {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-2);
    overflow: hidden;
    height: 44px;
}
.quantity-field .adjust {
    width: 40px;
    height: 100%;
    transition: background var(--speed) ease;
}
.quantity-field .adjust:hover {
    background: var(--bg-3);
}
.quantity-field input[type="number"] {
    font-weight: 700;
}

/* shared.css gives .toaster left:0 + width/height 100% (full-viewport column
   anchored at the bottom) — reset ALL of those or toasts render glued to the
   top edge of the screen, half cut off. */
.toaster {
    position: fixed;
    inset: auto 20px 20px auto;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    max-width: min(420px, calc(100vw - 40px));
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 14px;
    height: auto;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--color-main);
    background: var(--bg-2);
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-2);
    pointer-events: auto;
    animation: toastIn 320ms var(--ease-spring);
    transition:
        opacity 240ms ease,
        transform 240ms ease;
}
.toast[hidden] {
    display: flex;
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
}
.toast-error {
    border-left-color: var(--color-red);
}
.toast-success {
    border-left-color: var(--color-green);
}
.toast-warning {
    border-left-color: #f59e0b;
}
/* icon-only close: shared.css paints the X image and hides the button text
   (font-size 0) — keep it that way instead of re-adding "CLOSE" on top */
.toast .toast-close {
    margin-left: auto;
    flex: none;
    width: 30px;
    height: 30px;
    font-size: 0;
    color: transparent;
    cursor: pointer;
}
.toast .toast-close:hover {
    color: var(--color-text-primary);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Sidebar widgets
   ========================================================================== */

.pr-widget {
    overflow: visible;
}
.pr-widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px 0;
}
.pr-widget__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-main);
}
.pr-widget--donator .pr-widget__title {
    color: var(--color-text-primary);
}
.pr-widget__body {
    padding: 14px 20px 20px;
}
.pr-widget__dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex: none;
}
.pr-widget__dot.is-on {
    background: var(--color-green);
    box-shadow: 0 0 10px rgb(34 197 94 / 0.7);
    animation: prPulse 2.2s ease-in-out infinite;
}
.pr-widget__dot.is-off {
    background: var(--color-red);
    box-shadow: 0 0 10px rgb(239 68 68 / 0.7);
}
@keyframes prPulse {
    0%,
    100% {
        box-shadow: 0 0 4px rgb(34 197 94 / 0.5);
    }
    50% {
        box-shadow: 0 0 14px rgb(34 197 94 / 0.95);
    }
}
.pr-widget__ip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 0.03);
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pr-widget__ip::before {
    content: "\f233";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: var(--color-main);
}
.pr-widget__meta {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.pr-widget__meta b {
    color: var(--color-text-primary);
}

.pr-widget--donator {
    background:
        radial-gradient(
            130% 110% at 50% 0%,
            rgb(244 199 93 / 0.14),
            transparent 60%
        ),
        var(--bg-1);
    border-color: var(--border-gold);
}
.pr-widget__donator-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pr-widget__donator-row img {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-gold);
}
.pr-widget__donator-row h6 {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-main);
}
.pr-widget__donator-row p {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.pr-widget__avatars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 8px;
}
.pr-widget__payment {
    position: relative;
}
.pr-widget__payment img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 7px;
    border: 1px solid var(--border);
    transition:
        transform var(--speed) var(--ease-spring),
        border-color var(--speed) ease;
}
.pr-widget__payment:hover img {
    transform: scale(1.15);
    border-color: var(--border-gold);
}
.pr-widget__pop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    translate: -50%;
    z-index: 30;
    min-width: 130px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-3);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition:
        opacity var(--speed) ease,
        translate var(--speed) var(--ease-spring);
}
.pr-widget__payment:hover .pr-widget__pop {
    opacity: 1;
    translate: -50% -4px;
}
.pr-widget__pop .n {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-main);
}
.pr-widget__pop .p {
    font-size: 12px;
    font-weight: 700;
}
.pr-widget__pop time {
    font-size: 11px;
    color: var(--color-text-muted);
}

.pr-widget__img {
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}

.pr-progress {
    height: 12px;
    border-radius: 999px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    overflow: hidden;
}
.pr-progress__bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--color-main-dark),
        var(--color-main)
    );
    transition: width 600ms var(--ease-spring);
}
.pr-progress__bar.is-striped {
    background-image: linear-gradient(
        45deg,
        rgb(0 0 0 / 0.18) 25%,
        transparent 25%,
        transparent 50%,
        rgb(0 0 0 / 0.18) 50%,
        rgb(0 0 0 / 0.18) 75%,
        transparent 75%,
        transparent
    );
    background-size: 28px 28px;
}
.pr-progress__bar.is-animated {
    animation: prStripes 1.4s linear infinite;
}
@keyframes prStripes {
    from {
        background-position: 28px 0;
    }
    to {
        background-position: 0 0;
    }
}

.pr-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
}
.pr-alert--error {
    background: rgb(239 68 68 / 0.12);
    border: 1px solid rgb(239 68 68 / 0.4);
    color: #fca5a5;
}
.pr-alert--ok {
    background: rgb(34 197 94 / 0.1);
    border: 1px solid rgb(34 197 94 / 0.35);
    color: #86efac;
}

/* ==========================================================================
   Cart page (/checkout/basket) — dedicated marketing basket
   ========================================================================== */

.pr-cart-guest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin: 40px auto 80px;
    padding: 56px 30px;
    text-align: center;
}
.pr-cart-guest > i {
    font-size: 40px;
    color: var(--color-main);
    margin-bottom: 4px;
}
.pr-cart-guest p {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.pr-cart-guest .pr-btn {
    margin-top: 10px;
}

/* --- page header -------------------------------------------------------- */
.pr-cart-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 28px 0 20px;
}
.pr-cart-head__title .pr-title i {
    font-size: 0.72em;
    color: var(--color-main);
    margin-right: 8px;
}
.pr-cart-head__title p {
    margin-top: 8px;
    max-width: 520px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.pr-cart-head__steps {
    margin: 0 0 4px;
}

/* --- layout: items + sticky summary ------------------------------------- */
.pr-cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 22px;
    align-items: start;
    margin-bottom: 40px;
}
.pr-cart__main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
/* no overflow:hidden here — it would clip the [data-tip] tooltips of the
   header action buttons; the header rounds its own top corners instead */
.pr-cart__panel {
    padding: 0;
}
.pr-cart__phead {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(120deg, rgb(244 199 93 / 0.08), transparent 60%);
}
.pr-cart__who {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 0;
}
.pr-cart__who img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
}
.pr-cart__who .avatar-fallback {
    font-size: 26px;
    color: var(--color-main);
}
.pr-cart__who .s {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-text-muted);
}
.pr-cart__who .n {
    display: block;
    font-size: 16px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pr-cart__count {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 0.04);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.pr-cart__count b {
    color: var(--color-main);
}
.pr-cart__phead-acts {
    display: flex;
    gap: 8px;
}

/* --- items --------------------------------------------------------------- */
.pr-cart__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
}
.pr-cart-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    transition: border-color var(--speed) ease;
}
.pr-cart-item:hover {
    border-color: var(--border-strong);
}
.pr-cart-item__img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: none;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background:
        radial-gradient(
            80% 80% at 50% 28%,
            rgb(244 199 93 / 0.12),
            transparent 72%
        ),
        var(--bg-2);
}
.pr-cart-item__img img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
}
.pr-cart-item__img i {
    font-size: 20px;
    color: var(--color-text-muted);
}
.pr-cart-item__info {
    flex: 1;
    min-width: 0;
}
.pr-cart-item__info .title {
    font-size: 15px;
    font-weight: 800;
}
.pr-cart-item__info .options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.pr-cart-item__info .options li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pr-cart-item__end {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pr-cart-item__end .price {
    min-width: 72px;
    text-align: right;
    font-size: 16px;
    font-weight: 900;
    color: var(--color-main);
}

/* --- empty state ---------------------------------------------------------- */
.pr-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 46px 20px;
    text-align: center;
}
.pr-cart__empty > i {
    font-size: 36px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}
.pr-cart__empty h3 {
    font-size: 19px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pr-cart__empty p {
    max-width: 380px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.pr-cart__empty .pr-btn {
    margin-top: 12px;
}

/* trust strip fits the narrower column */
.pr-cart__trust {
    margin: 0;
}

/* --- order summary (sticky) ----------------------------------------------- */
.pr-cart__side {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* the .basket .basket-checkout selectors in shared.css (stock plumbing) hit
   this card too — match/beat their specificity to neutralize them */
.pr-cart .basket-checkout.pr-cart-sum {
    margin-top: 0;
    padding: 20px 22px;
    background:
        radial-gradient(
            120% 80% at 50% 0%,
            rgb(244 199 93 / 0.08),
            transparent 60%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.pr-cart .pr-cart-sum h3.pr-cart-sum__title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pr-cart-sum__title i {
    color: var(--color-main);
}
.pr-cart-sum__rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border-strong);
}
.pr-cart-sum__rows .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text-secondary);
}
.pr-cart-sum__rows .row--save {
    color: var(--color-green);
}
.pr-cart-sum__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 0 16px;
}
.pr-cart-sum__total .label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.pr-cart .basket-checkout.pr-cart-sum .total {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 900;
    color: var(--color-main);
}
.pr-cart .basket-checkout.pr-cart-sum .checkout {
    width: 100%;
}
.pr-cart-sum .checkout.disabled {
    pointer-events: none;
    opacity: 0.45;
}
.pr-cart-sum__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-text-muted);
}
.pr-cart-sum__secure i {
    color: var(--color-green);
}
.pr-cart-sum__pay {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    font-size: 23px;
    color: var(--color-text-muted);
    opacity: 0.85;
}
.pr-cart__continue {
    justify-content: center;
}

/* --- cross-sell ------------------------------------------------------------ */
.pr-cart-suggest {
    margin-bottom: 70px;
}
.pr-cart-suggest__sub {
    margin: -2px 0 18px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
/* nothing to suggest (yet) → hide the whole section */
.pr-cart-suggest:not(:has(.pr-also__card)) {
    display: none;
}

/* --- "you might also like" mini-cards (built by initCartSuggest) -------- */
.pr-also {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 900px) {
    .pr-also {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.pr-also__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 14px 14px;
    border-radius: var(--radius);
    border: 1px solid rgb(255 255 255 / 0.08);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
    transition:
        transform var(--speed) ease,
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
.pr-also__card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-main) 40%, transparent);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.05),
        0 16px 34px -14px rgb(0 0 0 / 0.7);
}
.pr-also__card .pr-discount {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}
.pr-also__flag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-main) 45%, transparent);
    background: color-mix(in srgb, var(--color-main) 14%, var(--bg-1));
    color: var(--color-main);
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pr-also__link {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: inherit;
}
.pr-also__fig {
    position: relative;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.pr-also__fig::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-main) 14%, transparent),
        transparent 70%
    );
    filter: blur(4px);
}
.pr-also__fig img {
    position: relative;
    max-width: 84px;
    max-height: 84px;
    object-fit: contain;
    transition: transform var(--speed) ease;
}
.pr-also__card:hover .pr-also__fig img {
    transform: scale(1.07);
}
.pr-also__name {
    max-width: 100%;
    font-size: 13.5px;
    font-weight: 800;
    text-align: center;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-also__price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-main);
}
.pr-also__price del {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
}
.pr-also__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 10px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--color-main) 35%, transparent);
    background: color-mix(in srgb, var(--color-main) 10%, transparent);
    color: var(--color-main);
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        background var(--speed) ease,
        color var(--speed) ease,
        border-color var(--speed) ease,
        opacity var(--speed) ease;
}
.pr-also__add:hover {
    background: var(--color-main);
    border-color: var(--color-main);
    color: #16130a;
}
.pr-also__add.updating {
    opacity: 0.45;
    pointer-events: none;
}
.pr-also__card.is-in .pr-also__add {
    border-color: color-mix(in srgb, var(--color-green) 45%, transparent);
    background: color-mix(in srgb, var(--color-green) 12%, transparent);
    color: var(--color-green);
    cursor: default;
}

/* ==========================================================================
   Related packages (cross-sell on the package page) + homepage flash deal
   ========================================================================== */

.pr-related {
    margin-top: 30px;
}
.pr-related__sub {
    margin: -2px 0 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.pr-related .pr-grid {
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
}
.pr-related .package__extra {
    display: none;
}
/* nothing related to show → hide the whole section */
.pr-related:not(:has(.pr-product)) {
    display: none;
}

/* ---- Flash-deal countdown banner (homepage) ---- */
.pr-flash {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: 16px 22px;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--border-gold);
    background:
        radial-gradient(120% 160% at 0% 0%, rgb(239 68 68 / 0.18), transparent 55%),
        linear-gradient(100deg, rgb(244 199 93 / 0.12), rgb(26 27 35 / 0.9) 60%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.06),
        0 18px 40px -20px rgb(244 199 93 / 0.4);
    transition:
        transform var(--speed) var(--ease-spring),
        box-shadow var(--speed) ease,
        border-color var(--speed) ease;
}
.pr-flash:hover {
    transform: translateY(-2px);
    border-color: var(--color-main);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.08),
        0 24px 50px -20px rgb(244 199 93 / 0.55);
}
.pr-flash__glow {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(100deg, transparent 40%, rgb(244 199 93 / 0.12));
    animation: pr-flash-sheen 4s var(--ease-out) infinite;
}
@keyframes pr-flash-sheen {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.pr-flash__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 13px;
    font-size: 20px;
    color: #1a1400;
    background: linear-gradient(160deg, var(--color-main-light), var(--color-main));
    box-shadow: 0 6px 18px -4px rgb(244 199 93 / 0.7);
    animation: pr-flash-pulse 1.8s ease-in-out infinite;
}
@keyframes pr-flash-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.09); }
}
.pr-flash__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pr-flash__kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-red, #ef4444);
}
.pr-flash__title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.25;
}
.pr-flash__timer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: none;
}
.pr-flash__timer .u {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 46px;
    padding: 7px 6px;
    border-radius: 10px;
    border: 1px solid var(--border-gold);
    background: rgb(13 14 19 / 0.55);
}
.pr-flash__timer .u b {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-main-light);
    font-variant-numeric: tabular-nums;
}
.pr-flash__timer .u i {
    margin-top: 3px;
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.pr-flash__timer .sep {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-main);
    opacity: 0.6;
    animation: pr-flash-blink 1s steps(1) infinite;
}
@keyframes pr-flash-blink {
    50% { opacity: 0.15; }
}
.pr-flash__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1a1400;
    background: linear-gradient(160deg, var(--color-main-light), var(--color-main));
    transition: gap var(--speed) var(--ease-spring);
}
.pr-flash:hover .pr-flash__cta {
    gap: 12px;
}
@media (max-width: 720px) {
    .pr-flash {
        flex-wrap: wrap;
        gap: 12px;
    }
    .pr-flash__timer {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
    .pr-flash__cta {
        order: 4;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 1023px) {
    .pr-cart {
        grid-template-columns: 1fr;
    }
    .pr-cart__side {
        position: static;
    }
}
@media (max-width: 560px) {
    .pr-cart-item {
        flex-wrap: wrap;
    }
    .pr-cart-item__end {
        width: 100%;
        justify-content: space-between;
    }
}

/* ==========================================================================
   Package full view / options
   ========================================================================== */

/* Product detail — immersive hero. Page + product popup share the markup; in
   the popup the .pr-package wrapper is dropped, so blocks are styled by their
   own classes and the popup/page context only adjusts the grand sizing. */
.pr-package {
    overflow: hidden;
}

/* ---- Hero: product logo centered in the middle ---- */
.pr-package__hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 46px 30px 36px;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--border);
}
/* blurred product art as an ambient backdrop */
.pr-package__hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgb(13 14 19 / 0.62), var(--bg-1) 94%),
        var(--pkg-img, none) center 28% / cover no-repeat;
    filter: blur(48px) saturate(1.2);
    opacity: 0.55;
    transform: scale(1.25);
    pointer-events: none;
}
.pr-package__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        80% 90% at 50% 0%,
        rgb(244 199 93 / 0.08),
        transparent 60%
    );
    pointer-events: none;
}
.pr-package__save {
    position: absolute;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: linear-gradient(
        120deg,
        var(--color-red-dark),
        var(--color-red)
    );
    color: #fff;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 8px 22px -8px rgb(239 68 68 / 0.7);
}
.pr-package__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.pr-package__art::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    max-width: 60vw;
    border-radius: 50%;
    background: radial-gradient(
        50% 50% at 50% 50%,
        color-mix(in srgb, var(--color-main) 32%, transparent),
        transparent 68%
    );
    z-index: -1;
}
.pr-package__art::after {
    content: "";
    position: absolute;
    bottom: -14px;
    width: 150px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgb(0 0 0 / 0.55),
        transparent 72%
    );
    filter: blur(4px);
    z-index: -1;
}
.pr-package__img {
    height: 160px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 28px rgb(0 0 0 / 0.6));
}
.pr-package__title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.06;
    background: linear-gradient(
        110deg,
        #ffffff 28%,
        #f0e6ca 62%,
        var(--color-main) 96%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pr-package__countdown {
    margin: 0 auto;
}
.pr-package__pricerow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.pr-package__price {
    font-size: 32px;
}
.pr-package__you-decide {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-secondary);
}
/* CTA row: full-width buy on top, utility icons under it */
.pr-package__hero .pr-product__actions {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 430px;
    margin: 14px auto 0;
    padding-top: 0;
}
.pr-package__hero .pr-product__actions .grow {
    flex: 1 1 100%;
    order: -1;
    height: 52px;
    font-size: 15px;
}
.pr-package__hero .pr-product__actions a.pr-btn--icon {
    display: none;
}
.pr-package__hero .pr-product__actions .pr-btn--icon {
    flex: 1;
    width: auto;
    height: 42px;
}

/* ---- Content: benefits + description ---- */
.pr-package__content {
    padding: 30px;
}
.pr-package__descr {
    max-width: 820px;
    margin: 0 auto;
}
.pr-package__descr h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-main);
    margin-bottom: 16px;
}

/* Benefits table → premium spec sheet (page + popup) */
.package_info_description table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    font-size: 14px;
}
.package_info_description table tr {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
}
.package_info_description table td {
    padding: 13px 16px;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--color-text-secondary);
}
.package_info_description table tr:first-child td {
    border-top: none;
}
.package_info_description table td:first-child {
    justify-self: center;
    padding: 13px 0;
}
.package_info_description table tr:has([data-yn="no"]) {
    background: rgb(0 0 0 / 0.18);
    color: var(--color-text-muted);
}
.package_info_description table tr:has([data-yn="yes"]) td:nth-child(2) {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* ---- Footer buy-bar: shown at the end of the detail ---- */
.pr-package__footer {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 30px;
    border-top: 1px solid var(--border);
    background:
        radial-gradient(
            90% 150% at 100% 50%,
            rgb(244 199 93 / 0.06),
            transparent 60%
        ),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.pr-package__footer-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}
.pr-package__footer-img {
    width: 52px;
    height: 52px;
    flex: none;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.5));
}
.pr-package__footer-text {
    min-width: 0;
}
.pr-package__footer-name {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-package__footer-price {
    font-size: 22px;
    margin-top: 2px;
}
.pr-package__footer-save {
    align-self: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgb(239 68 68 / 0.16);
    border: 1px solid rgb(239 68 68 / 0.4);
    color: #fda4a4;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
}
.pr-package__footer .pr-product__actions {
    width: auto;
    flex: 0 1 auto;
    margin: 0;
    padding-top: 0;
}
.pr-package__footer .pr-product__actions a.pr-btn--icon {
    display: none;
}
.pr-package__footer .pr-product__actions .grow {
    min-width: 190px;
    height: 46px;
}
@media (max-width: 560px) {
    .pr-package__footer {
        justify-content: center;
        text-align: center;
    }
    .pr-package__footer-info {
        justify-content: center;
        flex: 1 1 100%;
    }
    .pr-package__footer .pr-product__actions {
        width: 100%;
    }
    .pr-package__footer .pr-product__actions .grow {
        flex: 1 1 100%;
    }
}

/* Breathing room around the product popup so it never glues to the screen
   edges, and tall content scrolls fully from the top. */
.store-product-popup .popup-scroll-cont {
    align-items: flex-start;
    padding-top: 32px;
    padding-bottom: 32px;
}

/* ---- Popup context: the buy-bar rides the bottom of the screen ---- */
.store-product-popup-content .pr-package__footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    backdrop-filter: blur(12px);
    box-shadow: 0 -20px 44px -24px rgb(0 0 0 / 0.95);
}

/* ---- Popup context: make it grand ---- */
.store-product-popup-content .pr-package__hero {
    padding: 60px 30px 46px;
    min-height: 46vh;
    justify-content: center;
}
.store-product-popup-content .pr-package__img {
    height: 190px;
}
.store-product-popup-content .pr-package__content {
    padding: 40px 30px 48px;
}

/* ---- Page context: compact bounded card ---- */
.pr-shell .pr-package__hero {
    padding: 40px 26px 30px;
}
.pr-shell .pr-package__img {
    height: 140px;
}

@media (max-width: 640px) {
    .pr-package__hero,
    .store-product-popup-content .pr-package__hero {
        padding: 34px 20px 28px;
        min-height: 0;
    }
    .pr-package__img,
    .store-product-popup-content .pr-package__img {
        height: 128px;
    }
    .pr-package__content,
    .store-product-popup-content .pr-package__content {
        padding: 22px 18px;
    }
}

.pr-options {
    margin: 20px 0 70px;
}
.pr-options__card {
    max-width: 640px;
    margin: 0 auto;
    padding: 30px;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--bg-1);
}
.popup .pr-options__card {
    border: none;
    max-width: none;
    padding: 10px 4px;
}
.pr-options .product-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 18px;
}
.pr-options__form .field > p {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}
.pr-options__form .actions {
    position: sticky;
    bottom: 10px;
}

/* ==========================================================================
   Landing: featured row + side CTAs
   ========================================================================== */

.pr-featured-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 26px 0 8px;
}
@media (min-width: 1024px) {
    .pr-featured-row {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    }
    .pr-featured-row.no-featured {
        grid-template-columns: 1fr;
    }
    .pr-featured-row.no-featured .pr-featured-side {
        flex-direction: row;
    }
}

.pr-featured-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pr-featured-side > * {
    flex: 1;
}

.pr-side-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 26px 20px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}
.pr-side-cta .icon {
    font-size: 30px;
    margin-bottom: 8px;
    transition: transform 500ms var(--ease-spring);
}
.pr-side-cta:hover .icon {
    transform: scale(1.15) rotate(-6deg);
}
.pr-side-cta .t {
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pr-side-cta .s {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.pr-side-cta--gold .icon,
.pr-side-cta--gold .t {
    color: var(--color-main);
}
.pr-side-cta--discord {
    background:
        radial-gradient(
            120% 100% at 50% 0%,
            rgb(88 101 242 / 0.16),
            transparent 60%
        ),
        var(--bg-1);
}
.pr-side-cta--discord .icon,
.pr-side-cta--discord .t {
    color: var(--color-discord-light);
}
.pr-side-cta--discord:hover {
    border-color: rgb(88 101 242 / 0.5);
}

/* Sidebar CTA (narrower column on home) */
.pr-sidebar .pr-side-cta {
    padding: 20px 16px;
}
.pr-sidebar .pr-side-cta .icon {
    font-size: 26px;
    margin-bottom: 4px;
}
.pr-sidebar .pr-side-cta .t {
    font-size: 15px;
}

/* ==========================================================================
   Home: offers hero (integrated in content column)
   ========================================================================== */

.pr-offers {
    display: flex;
    flex-direction: column;
}
.pr-offers .pr-carousel {
    min-height: 320px;
    box-shadow: var(--shadow-2);
}
@media (min-width: 1024px) {
    .pr-offers .pr-carousel {
        min-height: 340px;
    }
}

/* Fallback when the store has no featured packages configured */
.pr-offers__empty {
    display: none;
    align-items: center;
    gap: 22px;
    padding: 30px 34px;
    border-radius: var(--radius);
    border: 1px solid var(--border-gold);
    background:
        radial-gradient(
            120% 140% at 100% 0%,
            rgb(244 199 93 / 0.12),
            transparent 55%
        ),
        var(--bg-1);
}
.pr-offers.no-featured .pr-offers__empty {
    display: flex;
}
.pr-offers__empty > i {
    font-size: 44px;
    color: var(--color-main);
    filter: drop-shadow(0 6px 14px rgb(244 199 93 / 0.3));
    flex: none;
}
.pr-offers__empty .pr-title {
    margin-top: 2px;
}
@media (max-width: 560px) {
    .pr-offers__empty {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   Home (Spotlight rework): section heads, categories, end band
   ========================================================================== */

/* Centered section head: title sits ON the line, prism rails both sides */
.pr-sechead {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 44px 0 24px;
}
.pr-sechead::before,
.pr-sechead::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: 999px;
    filter: drop-shadow(0 0 6px rgb(244 199 93 / 0.35));
}
.pr-sechead::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgb(34 211 238 / 0.55) 60%,
        var(--color-main)
    );
}
.pr-sechead::after {
    background: linear-gradient(
        90deg,
        var(--color-main),
        rgb(34 211 238 / 0.55) 40%,
        transparent
    );
}
.pr-sechead h2 {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.pr-sechead h2::before,
.pr-sechead h2::after {
    content: "✦";
    font-size: 12px;
    color: var(--color-main);
    opacity: 0.75;
    text-shadow: 0 0 10px rgb(244 199 93 / 0.6);
}
.pr-sechead h2 i {
    color: var(--color-main);
    font-size: 15px;
}

/* ---- Categories: flex (not grid) so short rows stay CENTERED ---- */

.pr-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.pr-cats__item {
    --hue: var(--color-cyan);
    position: relative;
    overflow: hidden;
    flex: 0 1 calc(25% - 12px);
    min-width: 205px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 16px 22px;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid color-mix(in srgb, var(--hue) 22%, transparent);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.05),
        0 0 26px -12px color-mix(in srgb, var(--hue) 40%, transparent);
    transition:
        transform var(--speed) var(--ease-spring),
        border-color var(--speed) ease,
        box-shadow var(--speed) ease;
}
.pr-cats__item::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    background: radial-gradient(
        72% 95% at 50% 118%,
        color-mix(in srgb, var(--hue) 14%, transparent),
        transparent 70%
    );
    opacity: 0.55;
    transition: opacity var(--speed) ease;
    pointer-events: none;
}
.pr-cats__item:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--hue) 55%, transparent);
    box-shadow:
        0 24px 44px -18px rgb(0 0 0 / 0.7),
        0 0 44px -10px color-mix(in srgb, var(--hue) 45%, transparent);
}
.pr-cats__item:hover::before {
    opacity: 1;
}
.pr-cats__fig {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 104px;
    margin-bottom: 14px;
}
.pr-cats__fig::before {
    content: "";
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--hue) 24%, transparent),
        transparent 70%
    );
}
.pr-cats__fig img {
    position: relative;
    height: 84px;
    width: auto;
    filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.55));
    transition: transform var(--speed) var(--ease-spring);
}
.pr-cats__item:hover .pr-cats__fig img {
    transform: scale(1.09) translateY(-3px);
}
.pr-cats__item h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}
.pr-cats__item .meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}
@media (max-width: 900px) {
    .pr-cats__item {
        flex-basis: calc(50% - 8px);
        min-width: 150px;
    }
}
@media (max-width: 430px) {
    .pr-cats__item {
        flex-basis: 100%;
    }
}

/* ---- End band: Discord CTA + top donator + server status ---- */

.pr-endband {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 16px;
    margin: 40px 0 26px;
}
.pr-endband > * {
    flex: 1 1 260px;
    min-width: 0;
}
.pr-endband > .pr-dcta {
    flex: 1.25 1 300px;
}
.pr-dcta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    border-radius: var(--radius);
    background:
        linear-gradient(
            120deg,
            rgb(88 101 242 / 0.18),
            rgb(88 101 242 / 0.05)
        ),
        var(--bg-1);
    border: 1px solid rgb(88 101 242 / 0.35);
    transition:
        transform var(--speed) var(--ease-spring),
        border-color var(--speed) ease;
}
/* giant watermark fills the empty right side */
.pr-dcta::after {
    content: "\f392";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    position: absolute;
    right: 34px;
    bottom: -34px;
    font-size: 118px;
    line-height: 1;
    color: var(--color-discord);
    opacity: 0.1;
    transform: rotate(-14deg);
    pointer-events: none;
    transition:
        transform 450ms var(--ease-spring),
        opacity 450ms ease;
}
.pr-dcta:hover {
    transform: translateY(-2px);
    border-color: rgb(88 101 242 / 0.6);
}
.pr-dcta:hover::after {
    transform: rotate(-6deg) scale(1.08);
    opacity: 0.16;
}
.pr-dcta .badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgb(88 101 242 / 0.2);
    border: 1px solid rgb(88 101 242 / 0.45);
    color: var(--color-discord-light);
    font-size: 22px;
}
.pr-dcta .t {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pr-dcta .t b {
    font-size: 15px;
}
.pr-dcta .t span {
    font-size: 12px;
    color: var(--color-text-muted);
}
.pr-dcta .go {
    position: relative;
    z-index: 1;
    margin-left: auto;
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgb(88 101 242 / 0.45);
    color: var(--color-discord-light);
    transition:
        background var(--speed) ease,
        color var(--speed) ease,
        transform var(--speed) var(--ease-spring);
}
.pr-dcta:hover .go {
    background: var(--color-discord);
    color: #fff;
    transform: translateX(3px);
}

/* Widgets relocated into the end band (moved by main.js) */
.pr-endband .pr-widget {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 16px 18px;
}
/* crown watermark mirrors the discord card */
.pr-endband .pr-widget--donator::after {
    content: "\f521";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 26px;
    bottom: -26px;
    font-size: 96px;
    line-height: 1;
    color: var(--color-main);
    opacity: 0.08;
    transform: rotate(-14deg);
    pointer-events: none;
}
.pr-endband .pr-widget > * {
    position: relative;
    z-index: 1;
}
.pr-endband .pr-widget__head {
    padding: 0;
    border: 0;
    background: none;
}
.pr-endband .pr-widget__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 0;
}
.pr-endband .pr-widget--donator {
    background:
        linear-gradient(
            180deg,
            rgb(244 199 93 / 0.09),
            rgb(244 199 93 / 0.02)
        ),
        var(--bg-1);
    border-color: rgb(244 199 93 / 0.3);
}
.pr-endband .widget-server-status {
    background:
        linear-gradient(
            180deg,
            rgb(34 211 238 / 0.07),
            rgb(34 211 238 / 0.02)
        ),
        var(--bg-1);
    border-color: rgb(34 211 238 / 0.3);
}
.pr-endband .widget-server-status .pr-widget__meta {
    margin-top: 0;
}

/* ---- Modules band under the scene ---- */

.pr-modules-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    /* equal heights, content vertically centered → symmetric row */
    align-items: stretch;
}
.pr-modules-band .pr-widget {
    display: flex;
    flex-direction: column;
}
.pr-modules-band .pr-widget__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 11px;
    padding-top: 12px;
    padding-bottom: 18px;
}
.pr-modules-band .pr-widget__meta {
    margin-top: 0;
}
.pr-modules-band .pr-widget__donator-row {
    justify-content: center;
}

/* ==========================================================================
   Promo bar (Schema: promo-text / promo-ends / promo-link)
   ========================================================================== */

.pr-promo {
    position: relative;
    z-index: 55;
    background: var(--grad-prism);
    color: #0b0714;
}
.pr-promo__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 20px;
}
.pr-promo__text {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pr-promo__timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgb(5 5 10 / 0.82);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.pr-promo__timer > span {
    color: rgb(255 255 255 / 0.6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10.5px;
}
.pr-promo__timer b {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-main-light);
}
.pr-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid rgb(5 5 10 / 0.55);
    transition: gap var(--speed) var(--ease-spring);
}
.pr-promo__cta:hover {
    gap: 11px;
}

/* ==========================================================================
   Trust strip (marketing reassurance)
   ========================================================================== */

.pr-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 860px) {
    .pr-trust {
        grid-template-columns: 1fr;
    }
}
.pr-trust__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-1);
}
.pr-trust__item > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--radius-sm);
    border: 1px solid
        color-mix(in srgb, var(--hue, var(--color-main)) 35%, transparent);
    background: color-mix(
        in srgb,
        var(--hue, var(--color-main)) 12%,
        transparent
    );
    color: var(--hue, var(--color-main));
    font-size: 18px;
}
.pr-trust__item:nth-child(1) {
    --hue: var(--color-main);
}
.pr-trust__item:nth-child(2) {
    --hue: var(--color-cyan);
}
.pr-trust__item:nth-child(3) {
    --hue: var(--color-discord-light);
}
.pr-trust__item strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pr-trust__item span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* ==========================================================================
   "Popular" badge on packages (Schema: popular-keyword)
   ========================================================================== */

.pr-badge-pop {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 999px;
    background: linear-gradient(
        120deg,
        var(--color-main),
        var(--color-main-light)
    );
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 24px -4px rgb(244 199 93 / 0.6);
}
.pr-product:has(.pr-badge-pop) {
    border-color: var(--border-gold);
    box-shadow:
        0 0 0 1px var(--border-gold),
        0 20px 48px -16px rgb(244 199 93 / 0.4);
}
.pr-product--row .pr-badge-pop {
    left: auto;
    right: 18px;
    transform: translateY(-50%);
}

/* Carousel: mobile adjustments */
@media (max-width: 700px) {
    .pr-carousel {
        min-height: 330px;
    }
    .pr-carousel__slide {
        padding: 26px 24px 44px;
    }
    .pr-carousel__content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .pr-carousel__content > img {
        height: 96px;
    }
    .pr-carousel__info {
        align-items: center;
    }
    .pr-carousel__nav {
        display: none;
    }
}

/* ==========================================================================
   Cart menu (navbar): count badge + "go to cart / view basket" dropdown
   ========================================================================== */

.pr-cartmenu {
    position: relative;
}
.pr-cartmenu__btn {
    position: relative;
}
.pr-cartmenu__count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2px solid var(--bg-0);
    background: #e2574c;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
}
.pr-cartmenu__drop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 80;
    min-width: 205px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgb(255 255 255 / 0.09);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.65);
}
.pr-cartmenu__drop > a,
.pr-cartmenu__drop > button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--speed) ease,
        color var(--speed) ease;
}
.pr-cartmenu__drop > a:hover,
.pr-cartmenu__drop > button:hover {
    background: rgb(255 255 255 / 0.06);
}
.pr-cartmenu__drop i {
    width: 16px;
    text-align: center;
    color: var(--color-main);
}

/* ==========================================================================
   Minicart popup — quick basket preview ("Tu cesta")
   ========================================================================== */

.pr-minicart-popup .popup-content.pr-minicart {
    width: min(460px, 94vw);
    padding: 22px;
}
.pr-minicart__body.is-loading {
    display: flex;
    justify-content: center;
    padding: 34px 0;
}
.pr-minicart__spin {
    font-size: 22px;
    color: var(--color-text-muted);
}
.pr-minicart__title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--color-text-primary);
}
.pr-minicart__title i {
    color: var(--color-main);
    font-size: 15px;
}
.pr-minicart__count {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.pr-minicart__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(46vh, 380px);
    overflow-y: auto;
    padding-right: 2px;
}
.pr-minicart__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 0.06);
    background: rgb(255 255 255 / 0.025);
    transition: opacity var(--speed) ease;
}
.pr-minicart__item.updating {
    opacity: 0.4;
    pointer-events: none;
}
.pr-minicart__img {
    flex: none;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgb(255 255 255 / 0.05);
    overflow: hidden;
    color: var(--color-text-muted);
}
.pr-minicart__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pr-minicart__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pr-minicart__name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-minicart__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
}
.pr-minicart__price .qty {
    color: var(--color-main);
}
.pr-minicart__remove {
    flex: none;
    border: 0;
    background: none;
    padding: 4px;
    color: var(--color-text-muted);
    font-size: 15px;
    cursor: pointer;
    transition: color var(--speed) ease;
}
.pr-minicart__remove:hover {
    color: #e2574c;
}
.pr-minicart__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / 0.08);
}
.pr-minicart__total {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-secondary);
}
.pr-minicart__total b {
    color: var(--color-text-primary);
    font-size: 16px;
}
.pr-minicart__pay {
    flex: none;
}
.pr-minicart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 0 6px;
    text-align: center;
}
.pr-minicart__empty > i {
    font-size: 30px;
    color: var(--color-text-muted);
}
.pr-minicart__empty p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-secondary);
}