/*
 * POTTERBOT_STORE_PLAYER_READY_V4
 */

.store-page{

    background:
        radial-gradient(
            circle at 11% 4%,
            rgba(181,91,255,.11),
            transparent 34rem
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(126,87,175,.075),
            transparent 32rem
        ),
        #0b0717;
}


/* ============================================================
   HERO
   ============================================================ */

.store-page .store-hero{

    position:relative;

    min-height:620px;

    padding:
        76px 0 80px;

    display:flex;
    align-items:center;

    overflow:hidden;

    border-bottom:
        1px solid var(--line-soft);
}


.store-page .store-hero::before{

    content:"";

    position:absolute;

    left:-260px;
    top:45px;

    width:500px;
    height:500px;

    transform:
        rotate(45deg);

    border:
        1px solid rgba(181,91,255,.08);

    box-shadow:
        0 0 0 70px rgba(181,91,255,.016),
        0 0 0 140px rgba(181,91,255,.009);
}


.store-page .store-hero-grid{

    position:relative;
    z-index:2;

    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,.92fr)
        minmax(460px,1.08fr);

    align-items:center;

    gap:76px;
}


.store-hero-copy{

    max-width:650px;
}


.store-page .store-hero .pb-title{

    margin-top:16px;

    max-width:720px;

    font-size:
        clamp(
            55px,
            6.2vw,
            88px
        );

    line-height:.9;
}


.store-page .store-hero .pb-lead{

    max-width:580px;

    margin-top:24px;

    font-size:17px;

    line-height:1.7;
}


.store-category-links{

    display:flex;
    flex-wrap:wrap;

    gap:11px;

    margin-top:30px;
}


.store-category-link{

    min-width:180px;

    padding:
        15px 17px;

    display:flex;
    flex-direction:column;

    gap:4px;

    border:
        1px solid #39464c;

    background:
        #1a0e2b;

    text-decoration:none;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}


.store-category-link:hover{

    transform:
        translateY(-3px);

    border-color:
        var(--emerald);

    background:
        #27153c;
}


.store-category-link strong{

    color:white;

    font-size:11px;

    letter-spacing:.09em;
}


.store-category-link span{

    color:
        var(--muted);

    font-size:10px;
}


/* ============================================================
   HERO ARTWORK
   ============================================================ */

.store-hero-showcase{

    position:relative;

    min-height:445px;

    overflow:hidden;

    border:
        1px solid #3b494f;

    background:#170e29;

    clip-path:
        polygon(
            0 0,
            calc(100% - 18px) 0,
            100% 18px,
            100% 100%,
            18px 100%,
            0 calc(100% - 18px)
        );

    box-shadow:
        0 35px 80px rgba(0,0,0,.38);
}


.store-hero-showcase::after{

    content:"";

    position:absolute;

    inset:14px;

    z-index:8;

    pointer-events:none;

    border:
        1px solid rgba(255,255,255,.04);
}


.store-hero-image{

    position:absolute;

    inset:0;

    z-index:7;

    width:100%;
    height:100%;

    object-fit:cover;

    display:none;
}


.store-hero-image.asset-ready{

    display:block;
}


.store-hero-fallback{

    position:absolute;

    inset:0;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #291240 0%,
            #261139 48%,
            #251136 48%,
            #1b0c2a 100%
        );
}


.store-hero-fallback::before{

    content:"";

    position:absolute;

    left:-10%;
    right:-10%;
    bottom:-175px;

    height:350px;

    transform:
        rotate(-3deg);

    background:
        linear-gradient(
            135deg,
            #48216a 0 25%,
            #36184e 25% 50%,
            #542778 50% 75%,
            #3a185c 75%
        );
}


.store-castle{

    position:absolute;

    left:50%;
    bottom:78px;

    width:220px;
    height:175px;

    transform:
        translateX(-50%);

    border:
        4px solid #222a2d;

    background:
        repeating-linear-gradient(
            90deg,
            #374245 0 36px,
            #2c3639 36px 72px
        );

    box-shadow:
        0 28px 50px rgba(0,0,0,.35);
}


.store-castle::before{

    content:"";

    position:absolute;

    left:-24px;
    top:-42px;

    width:260px;
    height:46px;

    background:#3b474a;

    clip-path:
        polygon(
            0 100%,
            0 30%,
            12% 30%,
            12% 0,
            25% 0,
            25% 30%,
            38% 30%,
            38% 0,
            51% 0,
            51% 30%,
            64% 30%,
            64% 0,
            77% 0,
            77% 30%,
            90% 30%,
            90% 0,
            100% 0,
            100% 100%
        );
}


.store-castle::after{

    content:"";

    position:absolute;

    left:82px;
    bottom:0;

    width:50px;
    height:77px;

    border:
        4px solid #222a2d;

    background:#101719;
}


.hero-rune{

    position:absolute;

    left:50%;
    top:30%;

    width:70px;
    height:70px;

    transform:
        translate(-50%,-50%)
        rotate(45deg);

    border:
        4px solid var(--emerald);

    background:
        rgba(181,91,255,.11);

    box-shadow:
        0 0 38px rgba(181,91,255,.48);
}


.hero-rune::before{

    content:"";

    position:absolute;

    inset:17px;

    background:
        var(--emerald);

    box-shadow:
        0 0 19px rgba(181,91,255,.85);
}


.hero-pixel{

    position:absolute;

    width:11px;
    height:11px;

    background:
        rgba(181,91,255,.82);

    box-shadow:
        0 0 14px rgba(181,91,255,.55);
}


.hero-pixel.one{

    left:20%;
    top:27%;
}


.hero-pixel.two{

    right:19%;
    top:37%;

    width:8px;
    height:8px;
}


.hero-pixel.three{

    left:29%;
    bottom:24%;

    width:7px;
    height:7px;
}


/* ============================================================
   SECTIONS
   ============================================================ */

.store-page .store-main{

    padding:
        78px 0 165px;
}


.store-page .store-section{

    margin-top:105px;
}


.store-page .store-section:first-child{

    margin-top:0;
}


.store-page .store-section-head{

    margin-bottom:31px;

    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:30px;
}


.store-page .store-section-head h2{

    margin:
        9px 0 0;

    font-size:
        clamp(
            34px,
            4vw,
            51px
        );

    line-height:.98;

    letter-spacing:-.045em;
}


.store-page .store-section-head p{

    max-width:620px;

    margin:
        13px 0 0;

    color:
        var(--muted);

    font-size:14px;

    line-height:1.65;
}


.store-section-mark{

    position:relative;

    width:63px;
    height:63px;

    flex:none;

    transform:
        rotate(45deg);

    border:
        1px solid #38464c;

    background:
        #170e29;
}


.store-section-mark::before{

    content:"";

    position:absolute;

    inset:20px;

    background:
        var(--emerald);
}


/* ============================================================
   RUNEN
   ============================================================ */

.store-page .featured{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:17px;

    margin-bottom:17px;
}


.store-page .rune-grid{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:17px;
}


.store-page .rune-card{

    position:relative;

    min-height:430px;

    padding:0;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:
        1px solid #303c42;

    background:
        linear-gradient(
            155deg,
            #151f23,
            #0e1417
        );

    clip-path:
        polygon(
            0 0,
            calc(100% - 14px) 0,
            100% 14px,
            100% 100%,
            14px 100%,
            0 calc(100% - 14px)
        );

    transition:
        transform .17s ease,
        border-color .17s ease,
        box-shadow .17s ease;
}


.store-page .rune-card:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(181,91,255,.7);

    box-shadow:
        0 26px 55px rgba(0,0,0,.31);
}


.store-page .rune-card.big{

    min-height:485px;
}


.store-page .rune-card.best{

    border-color:
        rgba(231,185,79,.65);
}


.product-art{

    position:relative;

    min-height:235px;

    display:grid;
    place-items:center;

    overflow:hidden;

    border-bottom:
        1px solid var(--line-soft);

    background:
        radial-gradient(
            circle at 50% 47%,
            rgba(181,91,255,.15),
            transparent 9rem
        ),
        #11191c;
}


.rune-card.big .product-art{

    min-height:286px;
}


.product-image{

    position:absolute;

    inset:18px;

    z-index:5;

    width:
        calc(100% - 36px);

    height:
        calc(100% - 36px);

    object-fit:contain;

    display:none;

    filter:
        drop-shadow(
            0 22px 26px rgba(0,0,0,.38)
        );
}


.product-image.asset-ready{

    display:block;
}


.product-art.has-image
.product-fallback{

    opacity:0;
}


.product-fallback{

    position:relative;

    width:140px;
    height:145px;

    transition:
        opacity .15s ease;
}


.rune-crystal-main{

    position:absolute;

    left:31px;
    top:2px;

    width:78px;
    height:112px;

    border:
        3px solid var(--emerald);

    background:
        linear-gradient(
            135deg,
            rgba(181,91,255,.27),
            rgba(181,91,255,.025)
        );

    clip-path:
        polygon(
            50% 0,
            100% 24%,
            82% 100%,
            18% 100%,
            0 24%
        );

    box-shadow:
        0 0 37px rgba(181,91,255,.25);
}


.rune-crystal-small{

    position:absolute;

    width:29px;
    height:56px;

    border:
        2px solid #8b39c9;

    background:
        rgba(181,91,255,.08);
}


.rune-crystal-small.one{

    left:4px;
    bottom:5px;

    transform:
        rotate(-16deg);
}


.rune-crystal-small.two{

    right:2px;
    bottom:13px;

    transform:
        rotate(17deg);
}


.product-copy{

    padding:
        24px;

    display:flex;
    flex:1;
    flex-direction:column;
}


.product-eyebrow{

    color:
        var(--emerald);

    font-size:9px;
    font-weight:950;

    letter-spacing:.14em;
}


.store-page .rune-name{

    margin-top:8px;

    font-size:
        clamp(
            26px,
            2.35vw,
            36px
        );

    font-weight:950;

    letter-spacing:-.04em;
}


.product-flavour{

    min-height:20px;

    margin-top:7px;

    color:
        var(--muted);

    font-size:11px;
}


.store-page .price{

    margin-top:5px;

    color:white;

    font-size:19px;

    font-weight:900;
}


.store-page .buy{

    width:100%;

    min-height:49px;

    margin-top:20px;

    border:
        1px solid #3c4a50;

    border-radius:2px;

    color:white;

    background:#182126;

    cursor:pointer;

    font-size:10px;
    font-weight:950;

    letter-spacing:.07em;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}


.store-page .buy:hover{

    transform:
        translateY(-2px);

    color:#120820;

    border-color:
        var(--emerald);

    background:
        var(--emerald);
}


.store-page .bonus,
.store-page .best-badge{

    top:15px;

    z-index:12;

    padding:
        8px 11px;

    box-shadow:
        0 6px 20px rgba(0,0,0,.24);
}


.store-page .bonus{

    right:15px;
}


.store-page .best-badge{

    left:15px;
}


/* ============================================================
   RÄNGE
   ============================================================ */

.store-page .rank-strip{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:17px;
}


.store-page .rank{

    --rank:#8f969a;

    position:relative;

    min-height:375px;

    padding:0;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:
        1px solid #303b40;

    background:#170d28;

    clip-path:
        polygon(
            0 0,
            calc(100% - 12px) 0,
            100% 12px,
            100% 100%,
            0 100%
        );

    transition:
        transform .17s ease,
        border-color .17s ease,
        box-shadow .17s ease;
}


.store-page .rank:hover{

    transform:
        translateY(-5px);

    border-color:
        var(--rank);

    box-shadow:
        0 25px 52px rgba(0,0,0,.3);
}


.store-page .rank::before,
.store-page .rank::after{

    display:none;
}


.rank-art{

    position:relative;

    min-height:195px;

    display:grid;
    place-items:center;

    overflow:hidden;

    border-bottom:
        1px solid var(--line-soft);

    background:
        radial-gradient(
            circle at 50% 50%,
            color-mix(
                in srgb,
                var(--rank) 18%,
                transparent
            ),
            transparent 9rem
        ),
        #0d1316;
}


.rank-fallback{

    width:98px;
    height:98px;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:5px;

    transform:
        rotate(45deg);
}


.rank-fallback i{

    border:
        1px solid
        color-mix(
            in srgb,
            var(--rank) 70%,
            white
        );

    background:
        color-mix(
            in srgb,
            var(--rank) 74%,
            #160d28
        );
}


.rank-fallback i:nth-child(1),
.rank-fallback i:nth-child(3),
.rank-fallback i:nth-child(7),
.rank-fallback i:nth-child(9){

    opacity:.27;
}


.rank-copy{

    padding:
        22px;

    display:flex;
    flex:1;
    flex-direction:column;
}


.store-page .rank-duration{

    color:
        var(--muted);

    font-size:9px;

    letter-spacing:.13em;
}


.store-page .rank-name{

    margin-top:8px;

    font-size:29px;

    letter-spacing:-.035em;
}


.store-page .rank-price{

    margin-top:6px;

    color:white;

    font-size:19px;
}


.store-page .rank button{

    width:100%;

    min-height:48px;

    margin-top:auto;

    border:
        1px solid #3b474d;

    border-radius:2px;

    color:white;

    background:#182126;

    cursor:pointer;

    font-size:10px;
    font-weight:950;

    letter-spacing:.06em;
}


.store-page .rank button:hover{

    color:#0b0717;

    border-color:
        var(--rank);

    background:
        var(--rank);
}


/* ============================================================
   CART
   ============================================================ */

.store-page .pb-cart-bar{

    min-width:350px;

    border:
        1px solid #3b484e;

    background:#170e29;

    box-shadow:
        0 22px 60px rgba(0,0,0,.55);
}


.store-page .pb-cart-panel{

    background:
        linear-gradient(
            180deg,
            #160d28,
            #080c0e
        );
}


.store-page .pb-cart-title{

    font-size:28px;

    letter-spacing:-.035em;
}


.store-page .pb-cart-line{

    padding:
        16px 15px 16px 20px;

    background:#12191c;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1050px){

    .store-page .store-hero-grid{

        grid-template-columns:
            1fr 420px;

        gap:40px;
    }


    .store-page .rank-strip{

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media(max-width:820px){

    .store-page .store-hero{

        min-height:auto;

        padding:
            52px 0 60px;
    }


    .store-page .store-hero-grid{

        grid-template-columns:
            1fr;

        gap:40px;
    }


    .store-hero-showcase{

        min-height:350px;
    }


    .store-page .featured,
    .store-page .rune-grid,
    .store-page .rank-strip{

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media(max-width:600px){

    .store-page .store-hero .pb-title{

        font-size:
            clamp(
                45px,
                14vw,
                66px
            );
    }


    .store-category-links{

        display:grid;

        grid-template-columns:
            1fr 1fr;
    }


    .store-category-link{

        min-width:0;
    }


    .store-page .featured,
    .store-page .rune-grid,
    .store-page .rank-strip{

        grid-template-columns:
            1fr;
    }


    .store-hero-showcase{

        min-height:300px;
    }


    .store-page .store-section-head{

        align-items:flex-start;

        flex-direction:column;
    }

}


/* MineVoid Store v0.5 – stylesheet-only changes */
.store-page { background: radial-gradient(circle at 15% 8%,rgba(178,81,255,.12),transparent 35rem),radial-gradient(circle at 88% 17%,rgba(101,43,180,.13),transparent 32rem),#0b0717; }
.store-page .store-hero::before { border-color:rgba(180,81,255,.15); box-shadow:0 0 0 70px rgba(142,51,250,.03),0 0 0 140px rgba(142,51,250,.018); }
.store-hero-fallback { background:linear-gradient(180deg,#251039 0%,#361958 48%,#1e1330 48%,#10081d 100%); }