:root{

--pink:#F3A9B8;
--baby:#F8C8D2;
--cream:#FFF8F5;
--soft:#FFF1EA;
--yellow:#F6D98B;
--brown:#5A3B43;
--dusty:#D97C95;
--mauve:#B98293;

}



*{

box-sizing:border-box;

}



body{

margin:0;

min-height:100vh;

font-family:'Fredoka',sans-serif;

color:var(--brown);

background:

radial-gradient(
circle,
var(--pink) 1.5px,
transparent 1.5px
);

background-size:45px 45px;

background-color:var(--cream);

}



#app{

min-height:100vh;

padding:25px 15px;

}



/* WINDOW */

.window{

max-width:700px;

margin:auto;

background:#FFF8F5;

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

border-radius:45px;

padding:25px;

box-shadow:

0 25px 60px rgba(90,59,67,.12);

}





.window-header{

height:55px;

background:var(--soft);

border-radius:40px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:35px;

position:relative;

}



.window-dot{

position:absolute;

left:20px;

display:flex;

gap:8px;

}



.window-dot span{

width:13px;

height:13px;

background:var(--pink);

border-radius:50%;

}



.brand{

background:var(--baby);

padding:10px 25px;

border-radius:50px;

font-weight:600;

}





/* HOME */

.home{

text-align:center;

}



.logo-title{

font-family:'Sacramento',cursive;

font-size:100px;

line-height:1;

margin:20px 0 5px;

color:var(--dusty);

}



.tagline{

font-size:18px;

margin-bottom:35px;

}





.menu{

display:flex;

flex-direction:column;

gap:16px;

}



.bubble{

border:none;

width:100%;

padding:21px 26px;

border-radius:50px;

font-family:'Fredoka';

font-size:20px;

font-weight:600;

color:var(--brown);

display:flex;

justify-content:space-between;

cursor:pointer;

transition:.3s;

}



.bubble:hover{

transform:translateY(-7px);

box-shadow:

0 15px 30px rgba(217,124,149,.25);

}



.bubble.pink{

background:var(--baby);

}



.bubble.yellow{

background:var(--yellow);

}





/* ORDER */

.order{

margin-top:45px;

}



.order h2{

font-family:'Sacramento',cursive;

font-size:60px;

color:var(--dusty);

text-align:center;

}



.order-btn{

display:block;

text-align:center;

padding:16px;

border-radius:50px;

margin:12px 0;

font-weight:600;

}



.whatsapp{

background:var(--pink);

color:white;

}



.discord{

background:var(--brown);

color:white;

}



.telegram{

background:var(--yellow);

color:var(--brown);

}





.footer{

text-align:center;

font-size:13px;

color:var(--mauve);

}





/* PRICE LIST */


.price-title{

font-family:'Sacramento',cursive;

font-size:85px;

text-align:center;

color:var(--dusty);

margin:15px 0 0;

}



.price-subtitle{

text-align:center;

margin-bottom:30px;

}





.product-grid{

    columns:2;

    column-gap:30px;

    width:100%;

}





.product-card{

 break-inside:avoid;

 margin-bottom:30px;

background:#FFF8F5;

border-radius:30px;

padding:20px;

border:2px solid var(--baby);

box-shadow:

0 12px 25px rgba(90,59,67,.07);

}



.product-card:nth-child(2n){

border-color:var(--yellow);

}



.product-card:nth-child(3n){

border-color:var(--pink);

}




.product-card h3{

margin:0 0 15px;

padding:11px;

border-radius:30px;

text-align:center;

font-size:22px;

background:var(--baby);

}



.product-card:nth-child(2n) h3{

background:var(--yellow);

}



.price-category{

background:var(--soft);

border-radius:20px;

padding:7px;

font-size:12px;

text-align:center;

font-weight:700;

margin:10px 0;

}



.price-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 5px;

border-bottom:1px dashed var(--baby);

font-size:15px;

}



.price-row:last-child{

border-bottom:none;

}



.price-row span{

font-weight:700;

color:var(--dusty);

}




.back{

display:inline-block;

background:var(--baby);

padding:10px 22px;

border-radius:30px;

cursor:pointer;

}





@media(min-width:850px){


.product-grid{

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

}


}





@media(max-width:500px){


.window{

padding:18px;

border-radius:35px;

}



.logo-title{

font-size:75px;

}



.price-title{

font-size:70px;

}



.bubble{

font-size:18px;

padding:18px 22px;

}



.product-card h3{

font-size:20px;

}


}

/* ================================
   KAWAII CATALOG ENHANCEMENT
================================ */


.price-title{

position:relative;

}



.price-title::before{

content:"✦";

display:block;

font-family:'Fredoka';

font-size:18px;

color:var(--pink);

margin-bottom:20px;

letter-spacing:8px;

}




.price-title::after{

content:"✦";

position:absolute;

right:20%;

top:20px;

font-size:25px;

color:var(--pink);

}





.product-card{

position:relative;

overflow:visible;

}



.product-card::before{

content:"✦";

position:absolute;

top:12px;

right:15px;

font-size:22px;

color:var(--pink);

opacity:.6;

}





.product-card h3{

letter-spacing:1px;

font-size:24px;

}



.price-category{

border:

1px dashed var(--pink);

}





.price-row{

font-size:16px;

padding:13px 8px;

}



.price-row span{

font-size:17px;

}

.price-row{

gap:8px;

}

.price-row > span:first-child{

flex:1;

}

.price-row > span:nth-child(2){

white-space:nowrap;

}

.package-select-btn{

flex-shrink:0;

padding:6px 10px;

border:1px solid var(--pink);

border-radius:999px;

background:var(--soft);

color:var(--brown);

font-family:'Fredoka',sans-serif;

font-size:12px;

font-weight:600;

cursor:pointer;

}

.package-select-btn:hover,
.package-select-btn.selected{

background:var(--baby);

}

.package-select-btn:focus-visible{

outline:2px solid var(--brown);

outline-offset:2px;

}

.selection-status{

text-align:center;

font-size:14px;

}


.product-card:hover{

transform:translateY(-8px);

}





/* little catalog decoration */




@media(max-width:500px){


.price-title::after{

right:5%;

}


}


/* FIX PRODUCT GRID */

.product-grid{

columns:2;

column-gap:20px;

}


.product-card{

break-inside:avoid;

margin-bottom:20px;

}



.product-card{

height:fit-content;

}



.product-card{

width:100%;

}



@media(max-width:700px){

.product-grid{
    columns:1;
}

}



/* remove uneven empty spaces */

.product-grid{

grid-auto-flow:row dense;

}


@media(min-width:700px){

.product-card{

margin-bottom:0;

}

}


.product-info-btn{

    margin-top:18px;

    padding:10px 22px;

    border-radius:999px;

    border:1px solid #F3A9B8;

    background:#FFF1EA;

    color:#5A3B43;

    font-family:'Fredoka',sans-serif;

    font-size:14px;

    cursor:pointer;

    box-shadow:
    0 5px 15px rgba(217,124,149,.15);

    transition:.3s ease;

    position:relative;

    z-index:5;

}


/* PRODUCT INFO BUTTON */

.product-info-btn{

    margin-top:14px;

    padding:7px 16px;

    border-radius:999px;

    border:1px solid #5A3B43;

    background:#FFF1EA;

    color:#5A3B43;

    font-family:'Fredoka',sans-serif;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    box-shadow:
    0 8px 10px rgba(217,124,149,.15);

    transition:.3s ease;

}


.product-info-btn:hover{

    background:#F8C8D2;

    transform:translateY(-2px);

}



/* =================================
   BIE PRODUCT INFO POPUP FINAL
================================= */


.product-popup{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(90,59,67,.18);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:9999;

}



.product-popup.active{

    opacity:1;

    visibility:visible;

}



.popup-box{

    position:relative;

    width:min(380px,85%);

    max-height:75vh;

    overflow-y:auto;

    padding:35px 28px;

    background:#FFF8F5;

    border-radius:32px;
    
    clip-path: inset(0 round 32px);

    border:2px solid #F8C8D2;

    box-shadow:
    0 25px 60px rgba(90,59,67,.22);

    animation:
    popupShow .35s ease;

}



.popup-box{

    overflow-y:auto;

}


.popup-box::-webkit-scrollbar{

    width: 10px;

}


.popup-box::-webkit-scrollbar-track{

    background:transparent;

}


.popup-box::-webkit-scrollbar-thumb{

    background:#F3A9B8;

    border-radius:999px;

    border:2px solid #FFF8F5;

}




@keyframes popupShow{

    from{

        opacity:0;

        transform:translateY(20px) scale(.95);

    }


    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}





/* tape atas */

.popup-box::before{

    content:"";

    position:absolute;

    top:-15px;

    left:50%;

    transform:translateX(-50%);


    width:95px;

    height:28px;


    background:#F8C8D2;


    border-radius:8px;

}




.popup-box h2{

    text-align:center;


    margin:

    10px 0 20px;


    color:#D97C95;


    font-size:26px;

}




.popup-section{

    padding:12px 5px;


    margin-bottom:14px;


    border-bottom:

    1px dashed #F3A9B8;

}




.popup-section h4{

    display:inline-block;


    padding:6px 14px;


    margin-bottom:8px;


    border-radius:999px;


    background:#F8C8D2;


    color:#5A3B43;


    font-size:13px;

}




.popup-section p,
.popup-section li{


    font-size:13px;


    line-height:1.6;


    color:#5A3B43;

}




.popup-section ul{

    padding-left:18px;

}





.popup-section li::marker{

    color:#D97C95;

}




.popup-close{

    position:absolute;


    top:15px;

    right:15px;


    width:30px;

    height:30px;


    border:none;


    border-radius:50%;


    background:#F3A9B8;


    color:white;


    cursor:pointer;


}




/* scrollbar pink */

.popup-box::-webkit-scrollbar{

    width:6px;

}


.popup-box::-webkit-scrollbar-thumb{

    background:#F3A9B8;

    border-radius:20px;

}


.popup-box::-webkit-scrollbar-track{

    background:#FFF1EA;

}

/* =========================
   PAYMENT SYSTEM
========================= */


.payment-btn{

    margin-top:15px;

    padding:8px 18px;

    border-radius:999px;

    border:1px solid #F3A9B8;

    background:#FFF1EA;

    color:#5A3B43;

    font-family:'Fredoka',sans-serif;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    box-shadow:
    0 5px 15px rgba(217,124,149,.15);

    transition:.3s ease;

}



.payment-btn:hover{

    background:#F3A9B8;

    color:white;

    transform:translateY(-2px);

}





.payment-popup{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(90,59,67,.18);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.3s ease;

    z-index:10000;
    

}



.payment-popup.active{

    opacity:1;
    visibility:visible;

    pointer-events:auto;

}





.payment-box{

    width:min(360px,85%);

    padding:30px;

    background:#FFF8F5;

    border-radius:30px;

    border:2px solid #F8C8D2;

    text-align:center;

    box-shadow:

    0 20px 50px rgba(90,59,67,.2);

    animation:paymentShow .3s ease;

}




@keyframes paymentShow{

    from{

        opacity:0;

        transform:translateY(20px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}





.payment-close{

    position:absolute;

    margin-left:270px;

    margin-top:-15px;

    border:none;

    width:30px;

    height:30px;

    border-radius:50%;

    background:#F3A9B8;

    color:white;

    cursor:pointer;

}




.qris-image{

    width:220px;

    max-width:100%;

    margin:20px auto;

    padding:12px;

    background:white;

    border-radius:20px;

}




.payment-text{

    font-size:13px;

    color:#5A3B43;

}





.payment-confirm-btn{

    margin-top:15px;

    padding:10px 20px;

    border:none;

    border-radius:999px;

    background:#F3A9B8;

    color:white;

    cursor:pointer;

}





.payment-help{

    margin-top:18px;

    font-size:12px;

}


.payment-help a{

    color:#D97C95;

    text-decoration:none;

}

.payment-btn{

display:block;

margin:35px auto 10px;

padding:18px 55px;

font-size:18px;

font-weight:700;

border:1.5px solid #5A3B43;

border-radius:999px;

cursor:pointer;

background:#B8E6C1;

color:#5A3B43;

box-shadow:0 10px 25px rgba(184,230,193,0.45);

transition:0.3s ease;

}

/* =========================
   PAYMENT POPUP
========================= */

.payment-popup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.35);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:0.3s ease;

z-index:999;

}



.payment-popup.active{

opacity:1;

visibility:visible;

}



.payment-box{

position:relative;

width:min(360px, calc(100vw - 30px));

max-height:calc(100vh - 30px);

overflow-y:auto;

padding:30px;

background:#FFF8F5;

border:2px solid #B98293;

border-radius:25px;

box-shadow:0 15px 35px rgba(90,59,67,0.25);

text-align:center;

}



.payment-box h2{

margin-bottom:20px;

color:#5A3B43;

}



.payment-close{

position:absolute;

right:15px;

top:15px;

width:30px;

height:30px;

border:none;

border-radius:50%;

background:#F3A9B8;

color:#5A3B43;

font-size:18px;

cursor:pointer;

}



.qris-image{

width:190px;

height:190px;

object-fit:contain;

padding:10px;

background:white;

border-radius:18px;

margin:10px auto 20px;

}



.payment-box p{

color:#5A3B43;

font-size:14px;

}

/* Polished Bie storefront interactions */

:root{
    --ease-store:cubic-bezier(.2,.75,.25,1);
    --shadow-soft:0 14px 34px rgba(90,59,67,.1);
    --shadow-hover:0 20px 42px rgba(90,59,67,.16);
}

html{
    scroll-behavior:smooth;
}

body{
    background-attachment:fixed;
}

.window{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border-width:2px;
    box-shadow:
        0 28px 70px rgba(90,59,67,.14),
        inset 0 1px 0 rgba(255,255,255,.9);
    animation:window-arrive .7s var(--ease-store) both;
}

.window::before{
    position:absolute;
    z-index:-1;
    top:-130px;
    right:-100px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(248,200,210,.34),transparent 70%);
    content:"";
    pointer-events:none;
}

.window-header{
    box-shadow:0 6px 18px rgba(90,59,67,.05);
}

.window-dot span{
    box-shadow:inset 0 1px 2px rgba(90,59,67,.1);
}

.window-dot span:nth-child(2){
    background:var(--yellow);
}

.window-dot span:nth-child(3){
    background:var(--mauve);
}

.brand{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
    letter-spacing:.2px;
}

.mascot-wrap{
    position:relative;
    display:grid;
    width:104px;
    height:104px;
    margin:10px auto 12px;
    place-items:center;
    animation:mascot-float 4.5s ease-in-out infinite;
}

.mascot-wrap::before{
    position:absolute;
    inset:0;
    border:1px solid rgba(217,124,149,.24);
    border-radius:50%;
    background:linear-gradient(145deg,#fff 5%,var(--soft) 95%);
    box-shadow:0 12px 28px rgba(90,59,67,.12);
    content:"";
}

.mascot{
    position:relative;
    width:88px;
    height:88px;
    border:3px solid #fff;
    border-radius:50%;
    object-fit:cover;
    object-position:50% 42%;
    box-shadow:0 4px 14px rgba(90,59,67,.15);
}

.logo-title{
    text-shadow:0 5px 18px rgba(217,124,149,.14);
}

.tagline{
    margin-top:8px;
    color:var(--mauve);
    letter-spacing:.35px;
}

.bubble,
.order-btn,
.back,
.product-card,
.product-info-btn,
.package-select-btn,
.payment-btn,
.confirm-payment-btn,
.payment-issue a,
.popup-close,
.payment-close{
    transition:
        transform .24s var(--ease-store),
        box-shadow .24s var(--ease-store),
        background-color .24s ease,
        color .24s ease,
        border-color .24s ease;
}

.bubble{
    position:relative;
    overflow:hidden;
    box-shadow:0 5px 0 rgba(90,59,67,.045);
    animation:soft-rise .55s var(--ease-store) both;
}

.bubble:nth-child(1){animation-delay:.06s}
.bubble:nth-child(2){animation-delay:.12s}
.bubble:nth-child(3){animation-delay:.18s}
.bubble:nth-child(4){animation-delay:.24s}

.bubble::after{
    position:absolute;
    top:-80%;
    left:-45%;
    width:30%;
    height:260%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    content:"";
    transform:rotate(25deg);
    transition:left .55s var(--ease-store);
    pointer-events:none;
}

.bubble:hover{
    transform:translateY(-3px);
    box-shadow:0 11px 22px rgba(90,59,67,.12);
}

.bubble:hover::after{
    left:120%;
}

.bubble:active,
.order-btn:active,
.payment-btn:active,
.confirm-payment-btn:active{
    transform:translateY(1px) scale(.99);
}

.order{
    margin-top:38px;
}

.order h2{
    margin-bottom:18px;
    text-shadow:0 4px 14px rgba(217,124,149,.12);
}

.order-btn{
    border:1px solid rgba(90,59,67,.07);
    box-shadow:0 5px 14px rgba(90,59,67,.08);
    text-decoration:none;
}

.order-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(90,59,67,.16);
}

.footer{
    margin:28px 0 4px;
    padding-top:18px;
    border-top:1px dashed rgba(185,130,147,.35);
}

.price-title{
    text-shadow:0 5px 18px rgba(217,124,149,.12);
}

.price-subtitle{
    color:var(--mauve);
    letter-spacing:.25px;
}

.product-card{
    margin-bottom:22px;
    padding:22px;
    background:linear-gradient(150deg,#fffdfb 0%,#fff8f5 100%);
    box-shadow:var(--shadow-soft);
    transition:
        transform .28s var(--ease-store),
        box-shadow .28s var(--ease-store),
        border-color .28s ease;
    animation:soft-rise .5s var(--ease-store) both;
}

.product-card:nth-child(2){animation-delay:.05s}
.product-card:nth-child(3){animation-delay:.1s}
.product-card:nth-child(4){animation-delay:.15s}

.product-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

.product-card h3{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}

.price-category{
    padding:8px 10px;
    color:var(--brown);
    letter-spacing:.25px;
}

.price-row{
    border-bottom-color:rgba(243,169,184,.45);
}

.price-row:hover{
    border-radius:12px;
    background:rgba(255,241,234,.62);
}

.price-row span:nth-child(2){
    color:var(--brown);
}

.package-select-btn{
    box-shadow:0 3px 8px rgba(90,59,67,.07);
}

.package-select-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 7px 14px rgba(90,59,67,.12);
}

.package-select-btn.selected{
    border-color:var(--dusty);
    box-shadow:0 4px 12px rgba(217,124,149,.2);
}

.product-info-btn{
    box-shadow:0 4px 12px rgba(90,59,67,.08);
}

.product-info-btn:hover{
    box-shadow:0 8px 18px rgba(90,59,67,.13);
}

.selection-status{
    width:fit-content;
    max-width:100%;
    margin:24px auto 8px;
    padding:10px 16px;
    border:1px solid rgba(243,169,184,.4);
    border-radius:18px;
    background:rgba(255,241,234,.72);
    color:var(--brown);
    line-height:1.6;
    text-align:left;
}

.selection-status.selection-warning{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-color:rgba(183,83,99,.28);
    background:#FFF0F0;
    box-shadow:0 5px 14px rgba(160,74,88,.08);
    color:#9B4D5A;
    font-weight:600;
    text-align:center;
}

.selection-status.selection-warning::before{
    flex:0 0 auto;
    color:#B85C6B;
    content:"⚠";
    font-size:15px;
    line-height:1;
}

.payment-btn{
    box-shadow:0 9px 22px rgba(184,230,193,.42);
}

.payment-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(184,230,193,.58);
}

.product-popup,
.payment-popup{
    transition:
        opacity .24s ease,
        visibility .24s ease,
        backdrop-filter .24s ease;
}

.product-popup:not(.active) .popup-box{
    animation:none;
}

.product-popup.active .popup-box,
.payment-popup.active .payment-box{
    animation:popup-arrive .36s var(--ease-store) both;
}

.popup-box,
.payment-box{
    border-color:rgba(217,124,149,.6);
    box-shadow:0 28px 70px rgba(61,37,44,.24);
}

.popup-section{
    padding:14px 8px;
}

.popup-section h4{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}

.popup-close:hover,
.payment-close:hover{
    transform:rotate(8deg) scale(1.08);
    box-shadow:0 5px 12px rgba(90,59,67,.16);
}

.qris-image{
    box-shadow:0 7px 20px rgba(90,59,67,.1);
}

.product-popup .popup-box{
    width:min(460px, calc(100% - 32px));
    max-height:min(82vh, 760px);
    padding:34px 30px 26px;
    border-radius:28px;
}

.product-popup .popup-box h2{
    margin:4px 34px 22px;
    color:#5A3B43;
    font-size:25px;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.product-popup .popup-section{
    margin:0 0 17px;
    padding:0 0 16px;
    border-bottom:1px solid rgba(217,124,149,.18);
}

.product-popup .popup-section:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
}

.product-popup .popup-section h4{
    margin:0 0 11px;
    padding:6px 12px;
    background:rgba(248,200,210,.5);
    color:#8B5364;
    font-size:12px;
    font-weight:600;
    letter-spacing:.025em;
}

.product-popup .popup-section p,
.product-popup .popup-section li{
    color:#5A3B43;
    font-size:13px;
    line-height:1.6;
}

.product-popup #popup-description{
    margin:0;
}

.product-popup #popup-details,
.product-popup #popup-rules{
    display:grid;
    gap:9px;
    margin:0;
    padding:0;
    list-style:none;
}

.product-popup .popup-package-item{
    padding:11px 13px;
    border:1px solid rgba(217,124,149,.16);
    border-radius:15px;
    background:rgba(255,241,234,.58);
}

.product-popup .popup-package-item strong{
    display:block;
    margin-bottom:3px;
    color:#5A3B43;
    font-size:13px;
    font-weight:650;
}

.product-popup .popup-package-item p{
    margin:0;
    color:#80636B;
    font-weight:400;
}

.product-popup #popup-rules{
    gap:5px;
    padding-left:16px;
    list-style:disc;
}

.product-popup #popup-rules li::marker{
    color:#D97C95;
}

.product-popup #popup-warranty{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0;
}

.product-popup .popup-warranty-tag{
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:4px 10px;
    border:1px solid rgba(217,124,149,.18);
    border-radius:999px;
    background:#FFF1EA;
    color:#76515E;
    font-size:11px;
    font-weight:600;
}

@media(max-width:600px){
    .product-popup .popup-box{
        width:min(460px, calc(100% - 28px));
        max-height:84vh;
        padding:30px 20px 22px;
        border-radius:24px;
    }

    .product-popup .popup-box h2{
        margin-bottom:18px;
        font-size:22px;
    }

    .product-popup .popup-section{
        margin-bottom:14px;
        padding-bottom:13px;
    }

    .product-popup .popup-package-item{
        padding:10px 11px;
    }
}

.product-popup{
    background:rgba(76,49,58,.28);
    backdrop-filter:blur(10px);
}

.product-popup .popup-box{
    width:min(500px, calc(100% - 32px));
    padding:58px 32px 28px;
    border:1px solid rgba(217,124,149,.3);
    border-radius:32px;
    background:
        radial-gradient(ellipse at 50% 0, rgba(248,200,210,.38), transparent 40%),
        #FFFAF7;
    box-shadow:
        0 30px 80px rgba(61,37,44,.25),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.product-popup .popup-box::before{
    content:"A LITTLE NOTE FROM BIE";
    top:23px;
    left:50%;
    width:auto;
    height:auto;
    transform:translateX(-50%);
    border-radius:0;
    background:transparent;
    color:#B98293;
    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
    white-space:nowrap;
}

.product-popup .popup-box h2{
    position:relative;
    margin:0 22px 27px;
    padding:2px 0 20px;
    border-bottom:1px solid rgba(217,124,149,.2);
    color:#5A3B43;
    font-size:27px;
    font-weight:700;
    letter-spacing:.025em;
    line-height:1.2;
    text-align:center;
}

.product-popup .popup-box h2::after{
    position:absolute;
    bottom:-4px;
    left:calc(50% - 18px);
    width:36px;
    height:7px;
    border-radius:999px;
    background:#F3A9B8;
    content:"";
}

.product-popup .popup-close{
    top:17px;
    right:17px;
    width:32px;
    height:32px;
    border:1px solid rgba(217,124,149,.18);
    background:rgba(255,248,245,.86);
    color:#8B5364;
    font-size:20px;
    line-height:1;
    box-shadow:0 3px 10px rgba(90,59,67,.07);
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.product-popup .popup-close:hover{
    background:#F8C8D2;
    box-shadow:0 6px 15px rgba(90,59,67,.13);
    transform:rotate(8deg);
}

.product-popup .popup-section{
    margin-bottom:18px;
    padding:0 0 17px;
    border-bottom:1px solid rgba(217,124,149,.14);
}

.product-popup .popup-section h4{
    display:table;
    margin:0 auto 12px;
    padding:6px 12px;
    border:1px solid rgba(217,124,149,.13);
    background:rgba(248,200,210,.27);
    color:#8B5364;
    font-size:10px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.product-popup #popup-description{
    margin:0;
    padding:13px 16px;
    border-left:2px solid rgba(217,124,149,.48);
    border-radius:0 15px 15px 0;
    background:rgba(255,241,234,.68);
    color:#6F535C;
    font-size:13px;
    line-height:1.7;
}

.product-popup #popup-details{
    gap:0;
    padding:3px 3px 3px 15px;
    border-left:1px solid rgba(217,124,149,.25);
}

.product-popup .popup-package-item{
    position:relative;
    padding:11px 8px 12px 13px;
    border:0;
    border-bottom:1px dashed rgba(185,130,147,.2);
    border-radius:0;
    background:transparent;
}

.product-popup .popup-package-item:last-child{
    border-bottom:0;
}

.product-popup .popup-package-item::before{
    position:absolute;
    top:16px;
    left:-19px;
    width:8px;
    height:8px;
    border:2px solid #FFF9F6;
    border-radius:50%;
    background:#D97C95;
    content:"";
}

.product-popup .popup-package-item strong{
    margin-bottom:3px;
    color:#5A3B43;
    font-size:13px;
    font-weight:650;
    line-height:1.4;
}

.product-popup .popup-package-item p{
    margin:0;
    color:#80636B;
    font-size:12px;
    line-height:1.6;
}

.product-popup #popup-rules{
    gap:6px;
    padding:11px 14px 11px 29px;
    border-radius:15px;
    background:rgba(255,241,234,.58);
}

.product-popup #popup-rules li{
    color:#80636B;
    font-size:12px;
    line-height:1.55;
}

.product-popup #popup-warranty{
    gap:7px;
    align-items:center;
    min-height:50px;
    padding:9px 13px;
    border:1px solid rgba(217,124,149,.13);
    border-radius:16px;
    background:linear-gradient(120deg, rgba(248,200,210,.2), rgba(255,241,234,.75));
}

.product-popup .popup-warranty-tag{
    min-height:27px;
    padding:4px 11px;
    border-color:rgba(217,124,149,.18);
    background:#FFF9F6;
    color:#76515E;
    font-size:11px;
}

@media(max-width:600px){
    .product-popup .popup-box{
        width:calc(100% - 28px);
        max-height:86vh;
        padding:53px 20px 23px;
        border-radius:27px;
    }

    .product-popup .popup-box::before{
        top:21px;
        font-size:8px;
    }

    .product-popup .popup-box h2{
        margin:0 12px 23px;
        padding-bottom:17px;
        font-size:24px;
    }

    .product-popup .popup-close{
        top:15px;
        right:15px;
        width:30px;
        height:30px;
    }

    .product-popup .popup-section{
        margin-bottom:15px;
        padding-bottom:14px;
    }

    .product-popup #popup-description{
        padding:11px 13px;
        font-size:12px;
    }

    .product-popup .popup-package-item{
        padding-top:9px;
        padding-bottom:10px;
    }
}

.confirm-payment-btn:hover{
    box-shadow:0 8px 18px rgba(90,59,67,.14);
}

.payment-issue a:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 15px rgba(90,59,67,.14);
}

.bubble:focus-visible,
.order-btn:focus-visible,
.back:focus-visible,
.product-info-btn:focus-visible,
.payment-btn:focus-visible,
.confirm-payment-btn:focus-visible,
.payment-issue a:focus-visible,
.popup-close:focus-visible,
.payment-close:focus-visible{
    outline:3px solid var(--brown);
    outline-offset:3px;
}

@keyframes window-arrive{
    from{opacity:0;transform:translateY(12px) scale(.99)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes soft-rise{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}

@keyframes popup-arrive{
    from{opacity:0;transform:translateY(12px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes mascot-float{
    0%,100%{transform:translateY(0) rotate(-1deg)}
    50%{transform:translateY(-5px) rotate(1deg)}
}

@media(max-width:500px){
    .window{
        padding:16px;
    }

    .window-header{
        margin-bottom:26px;
    }

    .mascot-wrap{
        width:90px;
        height:90px;
        margin-top:6px;
    }

    .mascot{
        width:76px;
        height:76px;
    }

    .product-card{
        padding:18px;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

.payment-order-summary{

padding:10px;

border-radius:16px;

background:var(--soft);

font-weight:600;

}

.payment-verification-note{

font-size:12px !important;

line-height:1.5;

}


.confirm-payment-btn{

margin-top:20px;

padding:13px 35px;

border:none;

border-radius:999px;

background:#B8E6C1;

border:2px solid #5A3B43;

color:#5A3B43;

font-weight:bold;

cursor:pointer;

transition:0.3s ease;

}



.confirm-payment-btn:hover{

transform:translateY(-3px);

}



.payment-issue{

margin-top:20px;

font-size:13px;

}



.payment-issue a{
display:inline-block;
margin-top:5px;

padding:8px 20px;

border-radius:999px;

background:#F3A9B8;

color:#5A3B43;

text-decoration:none;

font-weight:bold;

}

/* Premium, scoped checkout popup */
.payment-popup{
    padding:16px;
    background:rgba(90,59,67,.38);
    backdrop-filter:blur(9px);
}

.payment-popup .payment-box{
    position:relative;
    width:min(440px, 100%);
    max-height:min(92vh, 900px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:28px clamp(18px, 5vw, 30px) 24px;
    border:1px solid #F3A9B8;
    border-radius:28px;
    background:#FFF8F5;
    color:#5A3B43;
    box-shadow:0 24px 70px rgba(90,59,67,.24);
    scrollbar-color:#F3A9B8 #FFF1EA;
}

.payment-popup .payment-close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:1;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    margin:0;
    border:1px solid #F8C8D2;
    background:#FFF1EA;
    color:#5A3B43;
    font-size:22px;
    transition:background .2s ease, transform .2s ease;
}

.payment-popup .payment-close:hover{
    background:#F8C8D2;
    transform:rotate(8deg);
}

.checkout-header{
    margin:0 0 20px;
    padding:2px 24px 16px;
    border-bottom:1px solid #F8C8D2;
}

.checkout-eyebrow{
    display:block;
    margin-bottom:5px;
    color:#D97C95;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.checkout-header h2{
    margin:0 !important;
    color:#5A3B43;
    font-size:23px;
    letter-spacing:.08em;
}

.checkout-header p{
    margin:7px 0 0;
    color:#8C6971 !important;
    font-size:12px !important;
}

.checkout-section{
    margin:12px 0;
    padding:15px 16px;
    border:1px solid #F8C8D2;
    border-radius:18px;
    background:#FFF1EA;
    text-align:left;
}

.checkout-section h3{
    margin:0 0 10px;
    color:#D97C95;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
}

.payment-order-summary{
    display:grid;
    gap:4px;
    padding:0;
    border-radius:0;
    background:transparent;
    font-weight:400;
}

.checkout-product{
    color:#5A3B43;
    font-size:16px;
    font-weight:800;
}

.checkout-order-package,
.checkout-order-duration{
    color:#5A3B43;
    font-size:13px;
    line-height:1.45;
}

.checkout-total-section{
    border-color:#F3A9B8;
    background:#F8C8D2;
    text-align:center;
}

.checkout-total-section h3{
    margin-bottom:5px;
}

.checkout-total{
    color:#5A3B43;
    font-size:clamp(28px, 8vw, 36px);
    font-weight:800;
    letter-spacing:-.03em;
    line-height:1.15;
}

.checkout-warranty{
    display:grid;
    gap:5px;
    color:#5A3B43;
    font-size:13px;
    line-height:1.55;
}

.checkout-warranty strong{
    color:#5A3B43;
    font-size:14px;
    font-weight:800;
}

.checkout-payment-section{
    text-align:center;
}

.payment-popup .qris-image{
    display:block;
    width:min(210px, 68vw);
    height:auto;
    aspect-ratio:1;
    object-fit:contain;
    margin:4px auto 10px;
    padding:10px;
    border:1px solid #F8C8D2;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(90,59,67,.09);
}

.checkout-instruction{
    margin:0 !important;
    color:#5A3B43 !important;
    font-size:13px !important;
}

.checkout-steps{
    display:grid;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:checkout-step;
}

.checkout-steps li{
    display:flex;
    align-items:center;
    gap:10px;
    color:#5A3B43;
    font-size:13px;
    line-height:1.4;
    counter-increment:checkout-step;
}

.checkout-steps li::before{
    display:grid;
    flex:0 0 24px;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#F8C8D2;
    color:#5A3B43;
    content:counter(checkout-step);
    font-size:11px;
    font-weight:800;
}

.payment-popup .confirm-payment-btn{
    width:100%;
    margin:10px 0 0;
    padding:14px 18px;
    border:1px solid #D97C95;
    border-radius:999px;
    background:#D97C95;
    color:#fff;
    font-size:14px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(217,124,149,.23);
    transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.payment-popup .confirm-payment-btn:hover{
    background:#C96C86;
    box-shadow:0 11px 22px rgba(217,124,149,.3);
    transform:translateY(-2px);
}

.payment-popup .payment-verification-note,
.payment-popup .payment-issue{
    color:#5A3B43 !important;
    font-size:11px !important;
    line-height:1.5;
}

.payment-popup .payment-issue{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #F8C8D2;
}

/* Homepage sections */
.hero-section{
    padding:0 0 34px;
}

.hero-section .mascot-wrap{
    width:124px;
    height:124px;
    margin:4px auto 14px;
}

.hero-section .mascot{
    width:104px;
    height:104px;
}

.hero-section .logo-title{
    margin:10px 0 4px;
    font-size:clamp(68px, 14vw, 96px);
}

.hero-section .tagline{
    margin:8px 0 22px;
    color:#5A3B43;
    font-size:16px;
    font-weight:500;
    letter-spacing:.04em;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.explore-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:190px;
    padding:13px 22px;
    border:1px solid #D97C95;
    border-radius:999px;
    background:#D97C95;
    box-shadow:0 8px 20px rgba(217,124,149,.2);
    color:#fff;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.explore-secondary{
    display:inline-flex;
    min-height:44px;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border:1px solid #F8C8D2;
    border-radius:999px;
    background:#FFF8F5;
    color:#5A3B43;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:background .2s ease, border-color .2s ease;
}

.explore-secondary:hover{
    border-color:#D97C95;
    background:#FFF1EA;
}

.explore-btn:hover{
    transform:translateY(-2px);
    background:#C96C86;
    box-shadow:0 12px 24px rgba(217,124,149,.28);
}

.home-section{
    margin:10px 0 30px;
    padding:24px 0 0;
    border-top:1px solid #F8C8D2;
    scroll-margin-top:22px;
}

.home-section-heading{
    margin:0 0 18px;
    text-align:center;
}

.section-kicker{
    display:block;
    margin-bottom:5px;
    color:#D97C95;
    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.home-section-heading h2{
    margin:0;
    color:#5A3B43;
    font-size:25px;
    font-weight:700;
}

.home-section-heading p{
    margin:7px 0 0;
    color:#5A3B43;
    font-size:13px;
    line-height:1.5;
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}

.category-card{
    display:flex;
    min-width:0;
    min-height:104px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;
    padding:11px 12px;
    border:1px solid #F8C8D2;
    border-radius:17px;
    background:#FFF8F5;
    box-shadow:0 4px 12px rgba(90,59,67,.035);
    color:#5A3B43;
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.category-card:nth-child(even){
    background:#FFF8F5;
}

.category-card:hover{
    transform:translateY(-3px);
    border-color:#D97C95;
    box-shadow:0 12px 26px rgba(90,59,67,.1);
}

.category-card.active{
    border-color:#D97C95;
    background:#FFF1EA;
    box-shadow:0 7px 18px rgba(217,124,149,.13);
}

.category-mark{
    display:grid;
    width:28px;
    height:28px;
    place-items:center;
    border-radius:10px;
    background:#FCE8ED;
    color:#5A3B43;
    font-size:13px;
    font-weight:800;
}

.category-card:nth-child(even) .category-mark{
    background:#FFF1EA;
}

.category-name{
    margin-top:8px;
    font-size:14px;
    font-weight:700;
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.trust-item{
    display:flex;
    min-height:116px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:13px 8px;
    border:1px solid #F8C8D2;
    border-radius:18px;
    background:#FFF1EA;
    text-align:center;
}

.trust-icon{
    color:#D97C95;
    font-size:19px;
    line-height:1;
}

.trust-item strong{
    color:#5A3B43;
    font-size:14px;
}

.trust-item > span:last-child{
    color:#5A3B43;
    font-size:10px;
    line-height:1.35;
}

.home-product-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    columns:unset;
    gap:12px;
    align-items:start;
}

.home-product-grid .product-card{
    min-width:0;
    margin:0;
    scroll-margin-top:22px;
}

.home-product-grid .product-card h3{
    overflow-wrap:anywhere;
}

.home-catalog-actions{
    display:grid;
    justify-items:center;
    gap:12px;
    margin-top:15px;
}

.home-catalog-actions[hidden]{
    display:none;
}

.home-catalog-actions .selection-status{
    width:100%;
}

.home-catalog-actions .payment-btn{
    width:min(100%,360px);
}

.more-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}

.secondary-action{
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:12px;
    border:1px solid #F8C8D2;
    border-radius:14px;
    background:#FFF8F5;
    color:#5A3B43;
    font:600 12px 'Fredoka',sans-serif;
    text-align:left;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
}

.secondary-action:hover{
    border-color:#D97C95;
    background:#FFF1EA;
}

.home .order{
    margin-top:26px;
    padding:19px 0 0;
    border-top:1px solid #F8C8D2;
}

.contact-heading{
    text-align:center;
}

.contact-heading .section-kicker{
    margin-bottom:4px;
    font-size:10px;
    letter-spacing:.08em;
    text-transform:none;
}

.home .order h2{
    margin:0;
    color:#5A3B43;
    font-family:'Fredoka',sans-serif;
    font-size:19px;
    font-weight:600;
    text-shadow:none;
}

.contact-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:12px;
}

.home .contact-links .order-btn{
    display:inline-flex;
    min-height:36px;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:8px 15px;
    border:1px solid #F8C8D2;
    border-radius:999px;
    background:#FFF8F5;
    box-shadow:none;
    color:#5A3B43;
    font-size:12px;
    font-weight:600;
}

.home .contact-links .order-btn:hover{
    transform:translateY(-1px);
    border-color:#D97C95;
    background:#FFF1EA;
    box-shadow:none;
}

.catalog-empty-state{
    margin:0;
    padding:22px 15px;
    border:1px dashed #F3A9B8;
    border-radius:17px;
    background:rgba(255,241,234,.6);
    color:#5A3B43;
    font-size:13px;
    line-height:1.5;
    text-align:center;
}

@media(max-width:600px){
    .hero-section{
        padding-bottom:24px;
    }

    .hero-section .mascot-wrap{
        width:106px;
        height:106px;
    }

    .hero-section .mascot{
        width:90px;
        height:90px;
    }

    .hero-section .logo-title{
        font-size:clamp(40px, 12.5vw, 75px);
    }

    .hero-section .tagline{
        font-size:14px;
    }

    .home-section{
        margin-bottom:24px;
        padding-top:20px;
    }

    .home-section-heading h2{
        font-size:22px;
    }

    .category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .category-card{
        min-height:96px;
        padding:10px;
    }

    .trust-grid{
        gap:7px;
    }

    .trust-item{
        min-height:108px;
        padding:10px 5px;
    }

    .trust-item strong{
        font-size:13px;
    }

    .trust-item > span:last-child{
        font-size:9px;
    }

    .home-product-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .more-actions{
        grid-template-columns:1fr;
    }

    .secondary-action{
        padding:11px 14px;
        font-size:13px;
    }
}

@media(prefers-reduced-motion:reduce){
    .category-card,
    .explore-btn,
    .explore-secondary,
    .secondary-action{
        transition:none;
    }
}

/* Boutique homepage refinement */
body{
    background:
        radial-gradient(ellipse at 10% 8%,rgba(248,200,210,.3),transparent 26rem),
        radial-gradient(ellipse at 92% 34%,rgba(255,241,234,.92),transparent 25rem),
        #FFF8F5;
}

.window{
    max-width:760px;
    border:1px solid rgba(217,124,149,.3);
    border-radius:34px;
    padding:20px clamp(16px,4vw,32px) 28px;
    box-shadow:0 28px 70px rgba(90,59,67,.1);
}

.window-header{
    height:44px;
    margin-bottom:20px;
    background:transparent;
    border-radius:0;
    box-shadow:none;
}

.window-dot{
    display:none;
}

.brand{
    padding:8px 16px;
    border:1px solid rgba(217,124,149,.2);
    background:rgba(248,200,210,.45);
    color:#5A3B43;
    font-size:12px;
    letter-spacing:.08em;
}

.hero-section{
    position:relative;
    display:grid;
    grid-template-columns:minmax(150px,.78fr) minmax(0,1.22fr);
    align-items:center;
    gap:clamp(14px,4vw,34px);
    min-height:300px;
    margin:4px 0 10px;
    padding:28px clamp(18px,4vw,34px);
    overflow:hidden;
    border:1px solid rgba(217,124,149,.2);
    border-radius:28px 28px 28px 12px;
    background:
        radial-gradient(circle at 13% 12%,rgba(255,255,255,.9) 0 2px,transparent 3px),
        radial-gradient(circle at 84% 82%,rgba(248,200,210,.42) 0 2px,transparent 3px),
        #FFF1EA;
    background-size:34px 34px,46px 46px,auto;
    text-align:left;
}

.hero-mascot-frame{
    position:relative;
    display:grid;
    min-width:0;
    aspect-ratio:1;
    place-items:center;
    border:1px solid rgba(217,124,149,.22);
    border-radius:48% 52% 46% 54% / 53% 46% 54% 47%;
    background:rgba(255,248,245,.78);
    box-shadow:0 16px 38px rgba(90,59,67,.09);
    transform:rotate(-3deg);
}

.hero-mascot-frame::before,
.hero-mascot-frame::after{
    position:absolute;
    border:1px solid rgba(217,124,149,.25);
    border-radius:50%;
    content:"";
}

.hero-mascot-frame::before{
    inset:9px -7px -7px 9px;
}

.hero-mascot-frame::after{
    inset:17px;
    border-style:dashed;
    opacity:.7;
}

.hero-mascot-frame .mascot-wrap{
    width:84%;
    height:84%;
    margin:0;
    animation:none;
}

.hero-mascot-frame .mascot-wrap::before{
    display:none;
}

.hero-mascot-frame .mascot{
    width:100%;
    height:100%;
    border:4px solid #FFF8F5;
    box-shadow:0 7px 18px rgba(90,59,67,.13);
}

.hero-copy{
    position:relative;
    z-index:1;
}

.hero-overline{
    display:block;
    margin-bottom:8px;
    color:#B98293;
    font-size:10px;
    font-weight:700;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.hero-section .logo-title{
    max-width:390px;
    margin:0;
    color:#5A3B43;
    font-family:'Fredoka',sans-serif;
    font-size:clamp(32px,5vw,45px);
    font-weight:600;
    letter-spacing:-.045em;
    line-height:1.06;
    text-shadow:none;
}

.hero-section .tagline{
    margin:10px 0 22px;
    color:#8B6570;
    font-family:Georgia,serif;
    font-size:15px;
    font-style:italic;
    letter-spacing:.01em;
}

.hero-actions{
    justify-content:flex-start;
    gap:8px;
}

.hero-section .explore-btn{
    min-width:0;
    padding:11px 17px;
    box-shadow:0 6px 15px rgba(217,124,149,.18);
    font-size:13px;
}

.hero-section .explore-secondary{
    min-height:40px;
    padding:9px 13px;
    border-color:rgba(217,124,149,.25);
    background:rgba(255,248,245,.66);
    font-size:12px;
}

.hero-spark{
    position:absolute;
    z-index:1;
    color:#D97C95;
    opacity:.65;
    pointer-events:none;
}

.hero-spark-one{
    top:20px;
    left:45%;
    font-size:15px;
}

.hero-spark-two{
    right:24px;
    bottom:22px;
    font-size:20px;
}

.home-section{
    margin:26px 0 0;
    padding:0;
    border-top:0;
}

.category-section{
    margin-top:33px;
}

.home-section-heading{
    margin-bottom:14px;
}

.home-section-heading .section-kicker{
    margin-bottom:4px;
    font-family:Georgia,serif;
    font-size:11px;
    font-style:italic;
    font-weight:400;
    letter-spacing:.04em;
    text-transform:none;
}

.home-section-heading h2{
    font-size:21px;
    font-weight:600;
    letter-spacing:-.025em;
}

.category-grid{
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:8px;
}

.category-card,
.category-card:nth-child(even){
    min-height:86px;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px 5px;
    border:1px solid rgba(217,124,149,.2);
    border-radius:16px 16px 16px 7px;
    background:rgba(255,248,245,.72);
    box-shadow:none;
    text-align:center;
}

.category-card:hover{
    transform:translateY(-2px);
    background:#FFF1EA;
    box-shadow:0 7px 16px rgba(90,59,67,.07);
}

.category-card.active{
    border-color:#D97C95;
    background:#FFF1EA;
    box-shadow:inset 0 0 0 1px rgba(217,124,149,.16);
}

.category-mark,
.category-card:nth-child(even) .category-mark{
    width:27px;
    height:27px;
    border-radius:50%;
    background:#F8C8D2;
    color:#5A3B43;
    font-family:Georgia,serif;
    font-size:14px;
    font-weight:600;
}

.category-mark-note{font-size:17px !important}
.category-mark-star{font-size:17px !important}
.category-mark-chat{font-size:20px !important}
.category-mark-gem{font-size:18px !important}

.category-name{
    margin:0;
    color:#5A3B43;
    font-size:11px;
    font-weight:600;
    letter-spacing:.01em;
}

.home-catalog{
    margin-top:30px;
    padding:18px;
    border:1px solid rgba(217,124,149,.19);
    border-radius:22px;
    background:rgba(255,241,234,.45);
}

.home-catalog .home-section-heading{
    margin-bottom:12px;
}

.home-catalog .home-section-heading h2{
    font-size:19px;
}

.catalog-empty-state{
    padding:16px 12px;
    border:0;
    background:rgba(255,248,245,.65);
    color:#8B6570;
    font-family:Georgia,serif;
    font-size:13px;
    font-style:italic;
}

.trust-section{
    margin-top:22px;
}

.trust-strip{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px 18px;
    padding:13px 10px;
    border-top:1px solid rgba(217,124,149,.2);
    border-bottom:1px solid rgba(217,124,149,.2);
    color:#8B6570;
    font-family:Georgia,serif;
    font-size:11px;
}

.trust-strip span{
    white-space:nowrap;
}

.trust-strip span::first-letter{
    color:#D97C95;
}

.more-section{
    margin-top:23px;
    padding-top:15px;
    border-top:1px solid rgba(217,124,149,.18);
}

.more-section .home-section-heading{
    margin-bottom:10px;
    text-align:left;
}

.more-section .home-section-heading h2{
    font-size:16px;
}

.more-section .home-section-heading .section-kicker{
    display:none;
}

.more-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.secondary-action{
    padding:10px 11px;
    border-color:rgba(217,124,149,.18);
    border-radius:12px;
    background:rgba(255,248,245,.58);
    color:#8B6570;
    font-size:11px;
}

.secondary-action:hover{
    background:#FFF1EA;
}

.home .order{
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid rgba(217,124,149,.18);
}

.contact-heading{
    text-align:left;
}

.home .order h2{
    font-size:15px;
    font-weight:600;
}

.contact-links{
    justify-content:flex-start;
    margin-top:9px;
}

.home .contact-links .order-btn{
    min-height:32px;
    padding:7px 12px;
    color:#8B6570;
    font-size:11px;
}

.home .footer{
    margin-top:20px;
    padding-top:13px;
    font-family:Georgia,serif;
    font-size:11px;
    font-style:italic;
}

@media(max-width:600px){
    .window{
        padding:13px 13px 22px;
        border-radius:27px;
    }

    .window-header{
        height:37px;
        margin-bottom:13px;
    }

    .brand{
        font-size:10px;
    }

    .hero-section{
        grid-template-columns:112px minmax(0,1fr);
        gap:15px;
        min-height:0;
        padding:20px 15px;
        border-radius:22px 22px 22px 9px;
    }

    .hero-section .logo-title{
        font-size:clamp(25px,7vw,35px);
    }

    .hero-section .tagline{
        margin:7px 0 13px;
        font-size:12px;
    }

    .hero-actions{
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }

    .hero-section .explore-btn{
        padding:9px 13px;
        font-size:11px;
    }

    .hero-section .explore-secondary{
        min-height:32px;
        padding:6px 11px;
        font-size:10px;
    }

    .hero-spark-one{
        top:12px;
        left:39%;
    }

    .hero-spark-two{
        right:13px;
        bottom:10px;
        font-size:15px;
    }

    .home-section-heading h2{
        font-size:19px;
    }

    .category-section{
        margin-top:24px;
    }

    .category-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:7px;
    }

    .category-card,
    .category-card:nth-child(even){
        min-height:73px;
        gap:5px;
        padding:8px 3px;
        border-radius:13px 13px 13px 6px;
    }

    .category-mark,
    .category-card:nth-child(even) .category-mark{
        width:23px;
        height:23px;
        font-size:12px;
    }

    .category-name{
        font-size:10px;
    }

    .home-catalog{
        margin-top:22px;
        padding:13px 10px;
        border-radius:18px;
    }

    .trust-strip{
        gap:7px 10px;
        padding:11px 4px;
        font-size:10px;
    }

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

    .secondary-action{
        justify-content:center;
        padding:9px 5px;
        font-size:10px;
        text-align:center;
    }
}

@media(max-width:360px){
    .hero-section{
        grid-template-columns:88px minmax(0,1fr);
        gap:12px;
        padding:17px 11px;
    }

    .hero-section .logo-title{
        font-size:25px;
    }

    .hero-section .tagline{
        font-size:11px;
    }
}

@media(prefers-reduced-motion:reduce){
    .hero-mascot-frame,
    .category-card,
    .secondary-action{
        transition:none;
    }
}

/* Homepage category icons and compact package presentation */
.category-card,
.category-card:nth-child(even){
    min-height:82px;
    gap:6px;
    padding:9px 5px;
    border-radius:15px;
}

.category-mark,
.category-card:nth-child(even) .category-mark{
    display:grid;
    flex:0 0 30px;
    width:30px;
    height:30px;
    overflow:hidden;
    place-items:center;
    border:1px solid rgba(185,130,147,.18);
    border-radius:50%;
    background:#FFF1EA;
    color:#5A3B43;
    font-family:Georgia,serif;
    font-size:14px;
    font-weight:600;
}

.category-mark img{
    display:block;
    width:21px;
    height:21px;
    object-fit:contain;
}

.category-name{
    margin:0;
    font-size:11px;
    line-height:1.15;
}

.home-product-grid{
    gap:8px;
}

.home-product-grid .product-card{
    margin:0;
    padding:13px 15px 11px;
    border-width:1px;
    border-radius:17px;
    box-shadow:0 5px 15px rgba(90,59,67,.05);
}

.home-product-grid .product-card h3{
    margin:0 0 6px;
    padding:0 0 6px;
    border-bottom:1px solid rgba(185,130,147,.14);
    font-size:18px;
    letter-spacing:.02em;
}

.home-product-grid .package-group{
    margin:0;
}

.home-product-grid .package-group + .package-group{
    margin-top:5px;
    padding-top:4px;
    border-top:1px solid rgba(185,130,147,.12);
}

.home-product-grid .price-category{
    margin:0 0 1px;
    padding:2px 0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#8B6570;
    font-size:11px;
    font-weight:600;
    letter-spacing:.015em;
    text-align:left;
}

.home-product-grid .price-row{
    min-height:26px;
    gap:10px;
    padding:2px 0;
    border:0;
    font-size:12px;
}

.home-product-grid .price-row span{
    font-size:12px;
}

.home-product-grid .price-row > span:first-child{
    color:#5A3B43;
    font-weight:500;
}

.home-product-grid .price-row > span:nth-child(2){
    margin-left:auto;
    min-width:48px;
    color:#8B6570;
    font-size:12px;
    font-weight:700;
    text-align:right;
}

.home-product-grid .package-select-btn{
    min-width:50px;
    min-height:24px;
    padding:3px 8px;
    font-size:10px;
}

.home-product-grid .product-info-btn{
    margin-top:9px;
    padding:6px 11px;
    font-size:11px;
}

@media(max-width:600px){
    .category-card,
    .category-card:nth-child(even){
        min-height:71px;
        gap:5px;
        padding:7px 3px;
    }

    .category-mark,
    .category-card:nth-child(even) .category-mark{
        flex-basis:26px;
        width:26px;
        height:26px;
    }

    .category-mark img{
        width:19px;
        height:19px;
    }

    .category-name{
        font-size:10px;
    }

    .home-product-grid .product-card{
        padding:11px 12px 10px;
    }

    .home-product-grid .price-row{
        min-height:25px;
    }
}

/* Premium-sized selected product menu */
.home-product-grid{
    width:min(960px, calc(100vw - 64px));
    margin-left:50%;
    transform:translateX(-50%);
}

.home-product-grid .product-card{
    width:100%;
    max-width:100%;
    padding:38px 44px 32px;
    border:1px solid rgba(185,130,147,.24);
    border-radius:28px;
    box-shadow:0 16px 38px rgba(90,59,67,.08);
}

.home-product-grid .product-card h3{
    position:relative;
    display:flex;
    min-height:68px;
    align-items:center;
    justify-content:center;
    margin:0 0 21px;
    padding:12px 48px;
    font-size:28px;
    letter-spacing:.035em;
    line-height:1.2;
}

.home-product-grid .product-card::before{
    top:61px;
    right:60px;
}

.home-product-grid .package-group{
    margin:0;
    padding:13px 14px 10px;
    border:1px solid rgba(217,124,149,.18);
    border-radius:18px;
    background:rgba(255,248,245,.72);
    box-shadow:0 4px 13px rgba(90,59,67,.035);
}

.home-product-grid .package-group + .package-group{
    margin-top:14px;
}

.home-product-grid .price-category{
    display:table;
    margin:0 auto 9px;
    padding:6px 13px;
    border:1px solid rgba(217,124,149,.14);
    border-radius:999px;
    background:rgba(248,200,210,.38);
    color:#8B6570;
    font-size:13px;
    font-weight:600;
    letter-spacing:.02em;
    text-align:center;
}

.home-product-grid .price-row{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) 80px;
    min-height:58px;
    align-items:center;
    gap:10px;
    padding:6px 8px;
    border:0;
    border-radius:0;
    background:rgba(255,255,255,.56);
    border-bottom:1px solid rgba(185,130,147,.12);
}

.home-product-grid .package-group > .price-row:nth-of-type(2){
    border-radius:12px 12px 0 0;
}

.home-product-grid .price-row:last-child{
    border-bottom:0;
    border-radius:0 0 12px 12px;
}

.home-product-grid .price-row > span:first-child{
    min-width:0;
    padding-left:7px;
    color:#5A3B43;
    font-size:16px;
    font-weight:500;
    text-align:left;
}

.home-product-grid .price-row > span:nth-child(2){
    min-width:0;
    margin:0;
    padding-right:5px;
    color:#76515E;
    font-size:16px;
    font-weight:700;
    text-align:right;
}

.home-product-grid .package-select-btn{
    display:inline-flex;
    width:80px;
    min-width:80px;
    height:38px;
    min-height:38px;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.home-product-grid .product-info-btn{
    display:block;
    margin:25px auto 0;
    padding:9px 18px;
    font-size:12px;
}

@media(max-width:600px){
    .home-product-grid{
        position:relative;
        left:50%;
        width:92vw;
        margin:0;
        transform:translateX(-50%);
    }

    .home-product-grid .product-card{
        padding:24px;
        border-radius:24px;
    }

    .home-product-grid .product-card h3{
        min-height:60px;
        margin-bottom:17px;
        padding:10px 42px;
        font-size:24px;
    }

    .home-product-grid .product-card::before{
        top:43px;
        right:36px;
    }

    .home-product-grid .package-group + .package-group{
        margin-top:12px;
    }

    .home-product-grid .package-group{
        padding:11px 9px 8px;
        border-radius:16px;
    }

    .home-product-grid .price-category{
        margin-bottom:7px;
        padding:5px 11px;
        font-size:12px;
    }

    .home-product-grid .price-row{
        grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) 76px;
        min-height:52px;
        gap:7px;
        padding:5px 5px;
    }

    .home-product-grid .price-row > span:first-child{
        font-size:14px;
    }

    .home-product-grid .price-row > span:nth-child(2){
        font-size:14px;
    }

    .home-product-grid .package-select-btn{
        width:76px;
        min-width:76px;
        height:36px;
        min-height:36px;
        font-size:12px;
    }

    .home-product-grid .product-info-btn{
        margin-top:20px;
    }
}

/* Keep the premium catalog card centered within a matching homepage frame. */
#app:has(.home) .window{
    max-width:1040px;
}

.home-catalog{
    width:100%;
    margin-right:auto;
    margin-left:auto;
}

.home-product-grid{
    width:min(960px,100%);
    margin:0 auto;
    transform:none;
}

@media(max-width:600px){
    .home-product-grid{
        position:relative;
        left:50%;
        width:92vw;
        margin:0;
        transform:translateX(-50%);
    }
}

@media (max-width:480px){
    .payment-popup{
        align-items:flex-end;
        padding:10px;
    }

    .payment-popup .payment-box{
        width:100%;
        max-height:calc(100dvh - 20px);
        padding:24px 16px 18px;
        border-radius:24px 24px 20px 20px;
    }

    .checkout-header{
        margin-bottom:14px;
        padding-bottom:12px;
    }

    .checkout-section{
        margin:9px 0;
        padding:13px 14px;
    }
}

/* Homepage support and footer */
.home .contact-order{
    margin:17px 0 0;
    padding:16px 18px;
    border:1px solid rgba(217,124,149,.18);
    border-radius:20px;
    background:rgba(255,248,245,.62);
    text-align:center;
}

.home .contact-heading{
    text-align:center;
}

.home .order h2{
    color:#5A3B43;
    font-size:16px;
    font-weight:600;
}

.home .contact-links{
    justify-content:center;
    gap:9px;
    margin-top:11px;
}

.home .contact-links .order-btn{
    min-height:35px;
    padding:8px 14px;
    border:1px solid rgba(217,124,149,.18);
    border-radius:999px;
    background:#FFFDFB;
    color:#76515E;
    font-size:11px;
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.home .contact-links .order-btn:hover{
    transform:translateY(-1px);
    background:#FFF1EA;
    box-shadow:0 5px 12px rgba(90,59,67,.07);
}

.home .footer{
    margin-top:13px;
    padding:0;
    border:0;
    color:#9A7881;
    font-size:10px;
}

@media(max-width:600px){
    .home .contact-order{
        margin-top:13px;
        padding:14px 10px;
        border-radius:17px;
    }

    .home .contact-links{
        flex-wrap:wrap;
        gap:7px;
        margin-top:9px;
    }
}

/* Curated featured categories with an expandable full menu */
.category-section .featured-category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.category-section .featured-category-grid .category-card{
    min-height:94px;
    padding:12px 8px;
    border-radius:18px 18px 18px 8px;
    background:rgba(255,248,245,.82);
}

.category-section .featured-category-grid .category-mark{
    width:31px;
    height:31px;
}

.category-section .featured-category-grid .category-name{
    font-size:12px;
}

.all-categories{
    margin-top:18px;
}

.all-categories-trigger{
    position:relative;
    display:flex;
    width:max-content;
    min-width:205px;
    min-height:46px;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin:0 auto;
    padding:10px 43px 10px 21px;
    border:1px solid rgba(217,124,149,.28);
    border-radius:999px;
    background:linear-gradient(135deg,#FCE1E6,#FFF1EA);
    box-shadow:0 6px 16px rgba(90,59,67,.07);
    color:#76515E;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    letter-spacing:.01em;
    list-style:none;
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.all-categories-trigger::-webkit-details-marker{
    display:none;
}

.all-categories-trigger::marker{
    content:"";
}

.all-categories-trigger:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#F8C8D2,#FFF8F5);
    box-shadow:0 9px 20px rgba(90,59,67,.11);
}

.all-categories-heart{
    color:#D97C95;
    font-size:16px;
    line-height:1;
}

.all-categories-chevron{
    position:absolute;
    right:18px;
    top:50%;
    color:#B98293;
    font-size:18px;
    line-height:1;
    transform:translateY(-58%);
    transition:transform .2s ease;
}

.all-categories[open] .all-categories-chevron{
    transform:translateY(-35%) rotate(180deg);
}

.all-category-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    margin-top:14px;
    padding:14px;
    border:1px solid rgba(217,124,149,.15);
    border-radius:20px;
    background:rgba(255,248,245,.55);
}

.all-category-grid .category-card{
    min-height:78px;
}

@media(max-width:600px){
    .category-section .featured-category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .category-section .featured-category-grid .category-card{
        min-height:78px;
        gap:5px;
        padding:8px 4px;
        border-radius:15px 15px 15px 7px;
    }

    .category-section .featured-category-grid .category-mark{
        width:26px;
        height:26px;
    }

    .category-section .featured-category-grid .category-name{
        font-size:10px;
    }

    .all-categories{
        margin-top:14px;
    }

    .all-categories-trigger{
        min-width:195px;
        min-height:44px;
        font-size:12px;
    }

    .all-category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
        margin-top:11px;
        padding:10px;
        border-radius:16px;
    }

    .all-category-grid .category-card{
        min-height:69px;
    }
}

/* Premium Apps showcase cards; other featured categories retain their compact style. */
.category-section .featured-category-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.category-section .featured-category-grid > .premium-app-card{
    min-height:188px;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    padding:18px 12px 15px;
    border:1px solid rgba(217,124,149,.22);
    border-radius:21px 21px 21px 9px;
    background:
        radial-gradient(circle at 50% 0,rgba(248,200,210,.33),transparent 58%),
        #FFF9F6;
    box-shadow:0 7px 20px rgba(90,59,67,.055);
    text-align:center;
    transition:transform .24s ease,box-shadow .24s ease,background .24s ease,border-color .24s ease;
}

.category-section .premium-app-card:hover{
    transform:translateY(-4px);
    border-color:rgba(217,124,149,.42);
    background:
        radial-gradient(circle at 50% 0,rgba(248,200,210,.48),transparent 62%),
        #FFFDFC;
    box-shadow:0 14px 28px rgba(90,59,67,.11);
}

.category-section .premium-app-card.active{
    border-color:rgba(217,124,149,.55);
    background:
        radial-gradient(circle at 50% 0,rgba(248,200,210,.5),transparent 62%),
        #FFF5F2;
    box-shadow:0 8px 22px rgba(217,124,149,.14);
}

.category-section .premium-app-card .category-mark{
    flex:0 0 60px;
    width:60px;
    height:60px;
    margin-bottom:12px;
    overflow:hidden;
    border:1px solid rgba(217,124,149,.18);
    border-radius:19px;
    background:rgba(255,255,255,.88);
    box-shadow:0 5px 14px rgba(90,59,67,.08);
    font-family:Georgia,serif;
    font-size:27px;
}

.category-section .premium-app-card .category-mark img{
    width:39px;
    height:39px;
    object-fit:contain;
}

.category-section .premium-app-card .category-name{
    margin:0;
    color:#5A3B43;
    font-size:15px;
    font-weight:700;
    letter-spacing:.005em;
    line-height:1.25;
}

.category-section .premium-app-card .category-description{
    margin-top:5px;
    color:#90727A;
    font-size:11px;
    font-weight:400;
    line-height:1.35;
}

.category-section .premium-app-card .category-starting-price{
    margin-top:auto;
    padding-top:12px;
    color:#B45F79;
    font-size:12px;
    font-weight:650;
    letter-spacing:.015em;
}

.category-section .featured-category-grid > .category-card:not(.premium-app-card){
    grid-column:span 2;
    min-height:58px;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:9px 12px;
}

.category-section .featured-category-grid > .category-card:not(.premium-app-card) .category-mark{
    flex-basis:28px;
    width:28px;
    height:28px;
    margin:0;
}

.category-section .featured-category-grid > .category-card:not(.premium-app-card) .category-name{
    margin:0;
    font-size:12px;
}

@media(max-width:760px){
    .category-section .featured-category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .category-section .featured-category-grid > .premium-app-card{
        min-height:174px;
    }

    .category-section .featured-category-grid > .category-card:not(.premium-app-card){
        grid-column:span 1;
    }
}

@media(max-width:380px){
    .category-section .featured-category-grid > .premium-app-card{
        min-height:164px;
        padding:15px 8px 12px;
    }

    .category-section .premium-app-card .category-name{
        font-size:14px;
    }

    .category-section .premium-app-card .category-description{
        font-size:10px;
    }

    .category-section .premium-app-card .category-starting-price{
        font-size:11px;
    }
}

/* Floating app stickers and boutique service buttons */
.category-section .featured-category-grid{
    align-items:center;
    gap:16px 14px;
}

.category-section .featured-category-grid > .premium-app-card{
    position:relative;
    min-height:168px;
    align-items:center;
    justify-content:flex-start;
    padding:13px 8px 15px;
    overflow:visible;
    border:1px solid rgba(217,124,149,.15);
    border-radius:46% 46% 28% 28% / 23% 23% 18% 18%;
    background:linear-gradient(155deg,rgba(255,248,245,.98),rgba(255,241,234,.78));
    box-shadow:0 9px 20px rgba(90,59,67,.065);
    text-align:center;
    transition:transform .24s ease,box-shadow .24s ease,background .24s ease,border-color .24s ease;
}

.category-section .featured-category-grid > .premium-app-card:nth-child(2),
.category-section .featured-category-grid > .premium-app-card:nth-child(4){
    transform:translateY(8px);
}

.category-section .featured-category-grid > .premium-app-card:hover{
    z-index:1;
    transform:translateY(-5px) scale(1.035);
    border-color:rgba(217,124,149,.35);
    background:linear-gradient(155deg,#FFFDFC,#FCE8ED);
    box-shadow:0 14px 28px rgba(217,124,149,.18),0 0 24px rgba(248,200,210,.28);
}

.category-section .featured-category-grid > .premium-app-card:nth-child(2):hover,
.category-section .featured-category-grid > .premium-app-card:nth-child(4):hover{
    transform:translateY(2px) scale(1.035);
}

.category-section .featured-category-grid > .premium-app-card::after{
    position:absolute;
    top:13px;
    right:22%;
    color:rgba(217,124,149,.65);
    content:"✦";
    font-size:11px;
    opacity:.72;
}

.category-section .premium-app-card .category-mark{
    flex:0 0 68px;
    width:68px;
    height:68px;
    margin:0 0 10px;
    border:1px solid rgba(217,124,149,.15);
    border-radius:50%;
    background:#FFFDFC;
    box-shadow:0 7px 16px rgba(90,59,67,.1);
    font-size:27px;
}

.category-section .premium-app-card .category-mark img{
    width:43px;
    height:43px;
}

.category-section .premium-app-card .category-name{
    margin:0;
    color:#5A3B43;
    font-size:14px;
    font-weight:700;
    line-height:1.25;
}

.category-section .premium-app-card .category-starting-price{
    margin-top:5px;
    padding:0;
    color:#A96B7D;
    font-size:10px;
    font-weight:600;
    letter-spacing:.025em;
}

.category-section .featured-category-grid > .feature-service-sticker{
    position:relative;
    grid-column:span 2;
    min-height:78px;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:12px 21px;
    border:1px solid rgba(217,124,149,.2);
    border-radius:26px 34px 26px 14px;
    background:linear-gradient(115deg,rgba(248,200,210,.42),rgba(255,248,245,.9) 65%);
    box-shadow:0 7px 18px rgba(90,59,67,.055);
    text-align:left;
    transition:transform .23s ease,box-shadow .23s ease,background .23s ease;
}

.category-section .featured-category-grid > .feature-service-sticker:hover{
    transform:translateY(-4px);
    background:linear-gradient(115deg,rgba(248,200,210,.62),#FFFDFC 70%);
    box-shadow:0 12px 24px rgba(217,124,149,.15);
}

.category-section .feature-service-sticker .category-mark{
    flex:0 0 42px;
    width:42px;
    height:42px;
    margin:0;
    border:1px solid rgba(217,124,149,.18);
    border-radius:15px 50% 50% 50%;
    background:#FFFDFC;
    box-shadow:0 4px 11px rgba(90,59,67,.08);
    font-size:18px;
}

.category-section .service-sticker-copy{
    display:grid;
    min-width:0;
    gap:4px;
}

.category-section .feature-service-sticker .category-name{
    margin:0;
    font-size:13px;
    font-weight:700;
}

.category-section .robux-note{
    margin-left:4px;
    color:#B98293;
    font-size:10px;
    font-weight:500;
}

.category-section .feature-service-sticker .category-details{
    color:#90727A;
    font-size:10px;
    line-height:1.35;
}

.category-section .sticker-sparkle{
    position:absolute;
    top:9px;
    right:15px;
    color:#D97C95;
    font-size:13px;
}

@media(max-width:760px){
    .category-section .featured-category-grid{
        gap:12px 10px;
    }

    .category-section .featured-category-grid > .premium-app-card{
        min-height:158px;
    }

    .category-section .featured-category-grid > .premium-app-card:nth-child(2),
    .category-section .featured-category-grid > .premium-app-card:nth-child(4){
        transform:translateY(6px);
    }

    .category-section .featured-category-grid > .premium-app-card:nth-child(2):hover,
    .category-section .featured-category-grid > .premium-app-card:nth-child(4):hover{
        transform:translateY(1px) scale(1.025);
    }

    .category-section .featured-category-grid > .feature-service-sticker{
        grid-column:span 2;
        min-height:72px;
        gap:9px;
        padding:10px 13px;
        border-radius:22px 28px 22px 12px;
    }
}

@media(max-width:380px){
    .category-section .featured-category-grid > .premium-app-card{
        min-height:150px;
    }

    .category-section .premium-app-card .category-mark{
        flex-basis:60px;
        width:60px;
        height:60px;
    }

    .category-section .premium-app-card .category-mark img{
        width:38px;
        height:38px;
    }

    .category-section .featured-category-grid > .feature-service-sticker{
        gap:7px;
        padding:9px 10px;
    }

    .category-section .feature-service-sticker .category-details{
        font-size:9px;
    }
}

@media(prefers-reduced-motion:reduce){
    .category-section .featured-category-grid > .premium-app-card,
    .category-section .featured-category-grid > .feature-service-sticker{
        transition:none;
    }
}

/* Selected-product catalog card */
.home-catalog .home-product-grid .product-card{
    padding:32px 38px 28px;
    border:1px solid rgba(217,124,149,.2);
    border-radius:30px;
    background:
        radial-gradient(ellipse at 50% 0,rgba(248,200,210,.2),transparent 43%),
        linear-gradient(145deg,#FFFDFC,#FFF8F5);
    box-shadow:0 10px 28px rgba(90,59,67,.065);
    transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}

.home-catalog .home-product-grid .product-card:hover{
    transform:translateY(-3px);
    border-color:rgba(217,124,149,.3);
    box-shadow:0 14px 32px rgba(90,59,67,.09);
}

.home-catalog .home-product-grid .product-card::before{
    top:19px;
    right:23px;
    color:#D97C95;
    font-size:17px;
    opacity:.65;
}

.home-catalog .home-product-grid .product-card h3{
    min-height:0;
    flex-direction:column;
    gap:9px;
    margin:0 0 20px;
    padding:0 36px 18px;
    border-bottom:1px solid rgba(185,130,147,.16);
    color:#5A3B43;
    font-size:26px;
    font-weight:700;
    letter-spacing:.015em;
    line-height:1.2;
    text-align:center;
}

.home-catalog .home-product-grid .product-card h3::before{
    display:grid;
    width:46px;
    height:46px;
    place-items:center;
    border:1px solid rgba(217,124,149,.2);
    border-radius:50%;
    background:linear-gradient(145deg,#FFFDFC,#FCE8ED);
    box-shadow:0 5px 13px rgba(90,59,67,.07);
    color:#B96F83;
    content:"✿";
    font-family:Georgia,serif;
    font-size:23px;
    font-weight:400;
}

.home-catalog .home-product-grid .package-group{
    padding:13px 14px 8px;
    border:1px solid rgba(217,124,149,.14);
    border-radius:19px;
    background:rgba(255,253,251,.82);
    box-shadow:0 3px 11px rgba(90,59,67,.025);
}

.home-catalog .home-product-grid .package-group + .package-group{
    margin-top:12px;
}

.home-catalog .home-product-grid .price-category{
    margin-bottom:8px;
    padding:6px 14px;
    background:rgba(248,200,210,.3);
    color:#865E68;
    font-size:12px;
    font-weight:650;
}

.home-catalog .home-product-grid .price-row{
    grid-template-columns:minmax(0,1fr) minmax(74px,.62fr) 80px;
    min-height:54px;
    gap:10px;
    padding:6px 8px;
    border-bottom:1px solid rgba(185,130,147,.13);
    background:transparent;
    transition:background .18s ease;
}

.home-catalog .home-product-grid .price-row:hover{
    border-radius:11px;
    background:rgba(255,241,234,.55);
}

.home-catalog .home-product-grid .price-row > span:first-child{
    padding-left:5px;
    color:#5A3B43;
    font-size:15px;
    font-weight:500;
    line-height:1.35;
    text-align:left;
}

.home-catalog .home-product-grid .price-row > span:nth-child(2){
    padding-right:3px;
    color:#76515E;
    font-size:15px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    text-align:right;
}

.home-catalog .home-product-grid .package-select-btn{
    width:80px;
    min-width:80px;
    height:37px;
    min-height:37px;
    border:1px solid rgba(217,124,149,.28);
    background:linear-gradient(135deg,#FCE1E6,#FFF1EA);
    box-shadow:0 3px 9px rgba(90,59,67,.06);
    color:#76515E;
    font-size:12px;
    font-weight:650;
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.home-catalog .home-product-grid .package-select-btn:hover{
    transform:translateY(-2px);
    border-color:rgba(217,124,149,.4);
    background:linear-gradient(135deg,#F8C8D2,#FFF8F5);
    box-shadow:0 6px 12px rgba(90,59,67,.09);
}

.home-catalog .home-product-grid .package-select-btn.selected{
    border-color:rgba(217,124,149,.48);
    background:#F8C8D2;
    box-shadow:0 4px 11px rgba(217,124,149,.16);
}

.home-catalog .home-product-grid .package-select-btn:focus-visible{
    outline:2px solid #B98293;
    outline-offset:3px;
}

.home-catalog .home-product-grid .product-info-btn{
    margin-top:19px;
    padding:9px 17px;
    border-radius:999px;
    background:rgba(248,200,210,.28);
    color:#76515E;
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}

.home-catalog .home-product-grid .product-info-btn:hover{
    transform:translateY(-1px);
    background:rgba(248,200,210,.48);
    box-shadow:0 5px 12px rgba(90,59,67,.07);
}

@media(max-width:600px){
    .home-catalog .home-product-grid .product-card{
        padding:22px 15px 20px;
        border-radius:24px;
    }

    .home-catalog .home-product-grid .product-card h3{
        gap:8px;
        margin-bottom:15px;
        padding:0 30px 14px;
        font-size:23px;
    }

    .home-catalog .home-product-grid .product-card h3::before{
        width:41px;
        height:41px;
        font-size:21px;
    }

    .home-catalog .home-product-grid .product-card::before{
        top:14px;
        right:17px;
    }

    .home-catalog .home-product-grid .package-group{
        padding:10px 8px 7px;
        border-radius:16px;
    }

    .home-catalog .home-product-grid .price-row{
        grid-template-columns:minmax(0,1fr) minmax(64px,.65fr) 74px;
        min-height:49px;
        gap:5px;
        padding:5px 4px;
    }

    .home-catalog .home-product-grid .price-row > span:first-child,
    .home-catalog .home-product-grid .price-row > span:nth-child(2){
        font-size:13px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:74px;
        min-width:74px;
        height:35px;
        min-height:35px;
        font-size:11px;
    }
}

@media(prefers-reduced-motion:reduce){
    .home-catalog .home-product-grid .product-card,
    .home-catalog .home-product-grid .price-row,
    .home-catalog .home-product-grid .package-select-btn,
    .home-catalog .home-product-grid .product-info-btn{
        transition:none;
    }
}

/* Boutique checkout presentation */
.payment-popup{
    background:rgba(90,59,67,.42);
    backdrop-filter:blur(10px);
}

.payment-popup .payment-box{
    width:min(460px,100%);
    max-height:min(92vh,900px);
    scrollbar-gutter:stable both-edges;
    padding:27px clamp(20px,5vw,32px) 24px;
    border:1px solid rgba(217,124,149,.25);
    border-radius:30px;
    background:
        radial-gradient(ellipse at 50% 0,rgba(248,200,210,.3),transparent 40%),
        linear-gradient(155deg,#FFFDFC,#FFF8F5 75%);
    box-shadow:0 24px 64px rgba(90,59,67,.22);
}

.payment-popup .payment-close{
    top:15px;
    right:15px;
    width:36px;
    height:36px;
    border:1px solid rgba(217,124,149,.2);
    background:rgba(255,248,245,.9);
    color:#8B6570;
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}

.payment-popup .payment-close:hover{
    transform:rotate(8deg) translateY(-1px);
    background:#FCE1E6;
    box-shadow:0 4px 10px rgba(90,59,67,.08);
}

.payment-popup .checkout-header{
    margin-bottom:14px;
    padding:3px 34px 15px;
    border-bottom:1px solid rgba(185,130,147,.18);
}

.payment-popup .checkout-eyebrow{
    margin-bottom:6px;
    color:#B96F83;
    font-size:10px;
    letter-spacing:.17em;
}

.payment-popup .checkout-header h2{
    color:#5A3B43;
    font-family:Georgia,serif;
    font-size:24px;
    font-weight:600;
    letter-spacing:.025em;
}

.payment-popup .checkout-header p{
    margin-top:6px;
    color:#90727A !important;
    font-size:12px !important;
}

.payment-popup .checkout-section{
    margin:10px 0;
    padding:13px 16px;
    border:1px solid rgba(217,124,149,.13);
    border-radius:19px;
    background:rgba(255,253,251,.76);
}

.payment-popup .checkout-section h3{
    margin-bottom:8px;
    color:#A96B7D;
    font-size:10px;
    font-weight:750;
    letter-spacing:.15em;
}

.payment-popup .checkout-order-section{
    padding:12px 4px 14px;
    border:0;
    border-bottom:1px solid rgba(185,130,147,.17);
    border-radius:0;
    background:transparent;
}

.payment-popup .payment-order-summary{
    gap:3px;
}

.payment-popup .checkout-product{
    color:#5A3B43;
    font-size:17px;
    font-weight:750;
    line-height:1.35;
}

.payment-popup .checkout-order-package,
.payment-popup .checkout-order-duration{
    color:#80636B;
    font-size:13px;
    line-height:1.45;
}

.payment-popup .checkout-total-section{
    margin:12px 0;
    padding:15px 16px 17px;
    border:1px solid rgba(217,124,149,.2);
    border-radius:21px;
    background:linear-gradient(135deg,rgba(248,200,210,.62),rgba(255,241,234,.78));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    text-align:center;
}

.payment-popup .checkout-total-section h3{
    margin-bottom:5px;
    color:#8B6570;
    font-size:10px;
    letter-spacing:.17em;
}

.payment-popup .checkout-total{
    color:#5A3B43;
    font-family:Georgia,serif;
    font-size:clamp(34px,8vw,42px);
    font-weight:700;
    letter-spacing:-.035em;
    line-height:1.12;
}

.payment-popup .checkout-warranty-section{
    padding:12px 15px;
    border:0;
    border-left:3px solid rgba(217,124,149,.52);
    border-radius:4px 15px 15px 4px;
    background:rgba(255,241,234,.62);
}

.payment-popup .checkout-warranty-section h3{
    margin-bottom:5px;
}

.payment-popup .checkout-warranty{
    gap:2px;
    color:#80636B;
    font-size:12px;
    line-height:1.45;
}

.payment-popup .checkout-warranty strong{
    color:#5A3B43;
    font-size:14px;
    font-weight:750;
}

.payment-popup .checkout-payment-section{
    padding:13px 16px 14px;
    background:rgba(255,253,251,.78);
    text-align:center;
}

.payment-popup .checkout-payment-section h3{
    text-align:center;
}

.payment-popup .qris-image{
    width:min(190px,62vw);
    margin:8px auto 10px;
    padding:10px;
    border:1px solid rgba(217,124,149,.18);
    border-radius:18px;
    background:#fff;
    box-shadow:0 6px 18px rgba(90,59,67,.07);
}

.payment-popup .checkout-instruction{
    color:#76515E !important;
    font-size:12px !important;
    font-weight:550;
}

.payment-popup .checkout-next-section{
    padding:11px 4px 4px;
    border:0;
    border-top:1px solid rgba(185,130,147,.15);
    border-radius:0;
    background:transparent;
}

.payment-popup .checkout-next-section h3{
    margin-bottom:9px;
}

.payment-popup .checkout-steps{
    gap:7px;
}

.payment-popup .checkout-steps li{
    gap:9px;
    color:#76515E;
    font-size:12px;
}

.payment-popup .checkout-steps li::before{
    flex-basis:22px;
    width:22px;
    height:22px;
    background:#FCE1E6;
    color:#76515E;
    font-size:10px;
}

.payment-popup .confirm-payment-btn{
    min-height:49px;
    margin-top:13px;
    padding:13px 18px;
    border:1px solid #C96F86;
    background:linear-gradient(135deg,#D97C95,#C96F86);
    box-shadow:0 8px 17px rgba(217,124,149,.22);
    letter-spacing:.01em;
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}

.payment-popup .confirm-payment-btn:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#CF718B,#B96079);
    box-shadow:0 11px 21px rgba(217,124,149,.28);
}

.payment-popup .payment-verification-note{
    margin:9px 0 0;
    color:#90727A !important;
    font-size:10px !important;
    line-height:1.5;
}

.payment-popup .payment-issue{
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid rgba(185,130,147,.15);
    color:#90727A !important;
    font-size:11px !important;
}

.payment-popup .payment-issue a{
    color:#A85F76;
    font-weight:650;
}

/* Order-review hierarchy for the checkout modal */
.payment-popup .payment-box{
    width:min(440px,100%);
    padding:25px clamp(20px,5vw,30px) 22px;
    border-color:rgba(217,124,149,.2);
    border-radius:30px;
    background:
        radial-gradient(ellipse at 50% 0,rgba(248,200,210,.25),transparent 38%),
        linear-gradient(155deg,#FFFDFC,#FFF8F5 78%);
    box-shadow:0 22px 56px rgba(90,59,67,.2);
}

.payment-popup .checkout-header{
    margin-bottom:11px;
    padding:2px 34px 13px;
    border-bottom:0;
}

.payment-popup .checkout-header h2{
    font-size:25px;
    letter-spacing:.035em;
}

.payment-popup .checkout-header p{
    margin-top:5px;
}

.payment-popup .checkout-section{
    margin:8px 0;
    border-color:rgba(217,124,149,.11);
    border-radius:17px;
}

.payment-popup .checkout-section h3{
    margin-bottom:7px;
}

.payment-popup .checkout-order-section{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:4px;
    padding:13px 15px;
    border:1px solid rgba(217,124,149,.12);
    border-radius:18px 18px 18px 7px;
    background:rgba(255,253,251,.76);
}

.payment-popup .checkout-order-section h3{
    margin:0 0 2px;
    color:#A96B7D;
}

.payment-popup .payment-order-summary{
    position:relative;
    gap:2px;
    padding-left:43px;
}

.payment-popup .payment-order-summary::before{
    position:absolute;
    top:2px;
    left:0;
    display:grid;
    width:32px;
    height:32px;
    place-items:center;
    border:1px solid rgba(217,124,149,.18);
    border-radius:12px 12px 12px 5px;
    background:linear-gradient(145deg,#FFFDFC,#FCE8ED);
    box-shadow:0 3px 9px rgba(90,59,67,.05);
    color:#B96F83;
    content:"✦";
    font-size:17px;
}

.payment-popup .checkout-product{
    font-size:16px;
    letter-spacing:.01em;
}

.payment-popup .checkout-order-package{
    color:#76515E;
    font-weight:550;
}

.payment-popup .checkout-order-duration{
    color:#90727A;
    font-size:12px;
}

.payment-popup .checkout-total-section{
    margin:10px 0;
    padding:13px 16px 15px;
    border-color:rgba(217,124,149,.16);
    border-radius:20px;
    background:linear-gradient(135deg,rgba(248,200,210,.53),rgba(255,241,234,.72));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 5px 15px rgba(90,59,67,.035);
}

.payment-popup .checkout-total-section h3{
    color:#8B6570;
}

.payment-popup .checkout-total{
    font-size:clamp(38px,9vw,46px);
}

.payment-popup .checkout-warranty-section{
    margin:8px 0;
    padding:11px 14px;
    border-left-width:3px;
    background:rgba(255,241,234,.48);
}

.payment-popup .checkout-warranty-section h3{
    margin-bottom:4px;
}

.payment-popup .checkout-warranty{
    grid-template-columns:1fr;
    gap:1px;
}

.payment-popup .checkout-warranty strong{
    font-size:13px;
}

.payment-popup .checkout-warranty span{
    font-size:11px;
}

.payment-popup .checkout-payment-section{
    padding:12px 15px 13px;
    border-radius:19px;
    background:rgba(255,253,251,.78);
}

.payment-popup .checkout-payment-section h3{
    margin-bottom:3px;
}

.payment-popup .qris-image{
    width:min(176px,58vw);
    margin:7px auto 8px;
    padding:11px;
    border-color:rgba(185,130,147,.16);
    border-radius:19px;
    box-shadow:0 5px 16px rgba(90,59,67,.055);
}

.payment-popup .checkout-instruction{
    color:#80636B !important;
    font-size:11px !important;
}

.payment-popup .checkout-next-section{
    margin:8px 0 0;
    padding-top:10px;
}

.payment-popup .checkout-next-section h3{
    margin-bottom:7px;
}

.payment-popup .checkout-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
}

.payment-popup .checkout-steps li{
    align-items:flex-start;
    gap:6px;
    font-size:10px;
    line-height:1.35;
}

.payment-popup .checkout-steps li::before{
    flex-basis:19px;
    width:19px;
    height:19px;
}

.payment-popup .confirm-payment-btn{
    min-height:52px;
    margin-top:11px;
    border-color:#86B99A;
    background:linear-gradient(135deg,#A8D5B7,#8FC6A2);
    color:#385B46;
    box-shadow:0 7px 17px rgba(93,151,115,.19);
    font-size:14px;
}

.payment-popup .confirm-payment-btn:hover{
    background:linear-gradient(135deg,#B6DFC3,#9CD1AD);
    box-shadow:0 10px 20px rgba(93,151,115,.24);
}

.payment-popup .payment-verification-note{
    max-width:330px;
    margin:8px auto 0;
}

@media(max-width:480px){
    .payment-popup .payment-box{
        padding:22px 16px 17px;
        border-radius:27px 27px 22px 22px;
    }

    .payment-popup .checkout-header{
        margin-bottom:7px;
        padding-bottom:9px;
    }

    .payment-popup .checkout-section{
        margin:8px 0;
        padding:11px 13px;
    }

    .payment-popup .checkout-order-section,
    .payment-popup .checkout-next-section{
        padding-right:3px;
        padding-left:3px;
    }

    .payment-popup .checkout-total-section{
        padding:12px 13px 14px;
    }

    .payment-popup .qris-image{
        width:min(164px,54vw);
    }

    .payment-popup .checkout-steps li{
        display:grid;
        justify-items:center;
        text-align:center;
    }

    .payment-popup .confirm-payment-btn{
        min-height:52px;
    }
}

@media(prefers-reduced-motion:reduce){
    .payment-popup .payment-close,
    .payment-popup .confirm-payment-btn{
        transition:none;
    }
}

/* Product information boutique layout */
.product-popup .popup-box{
    width:min(520px,calc(100% - 32px));
    max-height:min(88vh,820px);
    padding:57px 30px 25px;
    border:1px solid rgba(217,124,149,.25);
    border-radius:29px;
    background:
        radial-gradient(ellipse at 50% 0,rgba(248,200,210,.29),transparent 39%),
        linear-gradient(155deg,#FFFDFC,#FFF8F5 78%);
    box-shadow:0 25px 65px rgba(90,59,67,.2);
    scrollbar-color:#EAB3C1 #FFF8F5;
}

.product-popup .popup-box h2{
    margin:0 22px 19px;
    padding:0 0 17px;
    border-bottom:1px solid rgba(185,130,147,.18);
    color:#5A3B43;
    font-family:Georgia,serif;
    font-size:28px;
    font-weight:700;
    letter-spacing:.02em;
    line-height:1.2;
}

.product-popup .popup-box h2::after{
    background:#E9A7B7;
}

.product-popup .popup-section{
    margin:0;
    padding:15px 0;
    border-bottom:1px solid rgba(185,130,147,.15);
}

.product-popup .popup-section h4{
    display:block;
    width:max-content;
    max-width:100%;
    margin:0 0 10px;
    padding:0;
    border:0;
    background:transparent;
    color:#A96B7D;
    font-size:11px;
    font-weight:750;
    letter-spacing:.12em;
    line-height:1.3;
    text-align:left;
}

.product-popup .popup-intro-section{
    padding:0 0 17px;
    border-bottom:0;
}

.product-popup #popup-description{
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#80636B;
    font-size:13px;
    line-height:1.6;
    text-align:center;
}

.product-popup .popup-packages-section{
    padding-top:14px;
}

.product-popup #popup-details{
    gap:8px;
    padding:0;
    border:0;
}

.product-popup .popup-package-item{
    position:relative;
    padding:11px 14px 11px 17px;
    border:1px solid rgba(217,124,149,.13);
    border-radius:15px 15px 15px 6px;
    background:rgba(255,253,251,.72);
}

.product-popup .popup-package-item::before{
    top:16px;
    left:7px;
    width:4px;
    height:4px;
    border:0;
    background:#D97C95;
}

.product-popup .popup-package-item strong{
    margin-bottom:3px;
    color:#5A3B43;
    font-size:13px;
    font-weight:700;
    line-height:1.4;
}

.product-popup .popup-package-item p{
    color:#80636B;
    font-size:12px;
    line-height:1.5;
}

.product-popup .popup-notes-section{
    padding-top:15px;
}

.product-popup #popup-rules{
    gap:6px;
    padding:0;
    border-radius:0;
    background:transparent;
    list-style:none;
}

.product-popup #popup-rules li{
    position:relative;
    padding-left:15px;
    color:#80636B;
    font-size:12px;
    line-height:1.5;
}

.product-popup #popup-rules li::before{
    position:absolute;
    top:.57em;
    left:1px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#E5A0B2;
    content:"";
}

.product-popup .popup-warranty-section{
    padding-top:15px;
    padding-bottom:0;
    border-bottom:0;
}

.product-popup #popup-warranty{
    display:grid;
    gap:8px;
    margin:0;
}

.product-popup .popup-warranty-item{
    display:grid;
    justify-items:start;
    gap:4px;
    padding:10px 13px;
    border-radius:14px;
    background:linear-gradient(120deg,rgba(248,200,210,.27),rgba(255,241,234,.65));
}

.product-popup .popup-warranty-tag{
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#6F4C58;
    font-size:13px;
    font-weight:750;
}

.product-popup .popup-warranty-note{
    color:#80636B;
    font-size:11px;
    line-height:1.5;
}

@media(max-width:600px){
    .product-popup .popup-box{
        width:calc(100% - 28px);
        max-height:88vh;
        padding:52px 20px 22px;
        border-radius:25px;
    }

    .product-popup .popup-box h2{
        margin:0 14px 16px;
        padding-bottom:15px;
        font-size:24px;
    }

    .product-popup .popup-section{
        padding-top:13px;
        padding-bottom:13px;
    }

    .product-popup .popup-intro-section{
        padding-top:0;
        padding-bottom:15px;
    }

    .product-popup .popup-package-item{
        padding-top:10px;
        padding-bottom:10px;
    }
}

@media(prefers-reduced-motion:reduce){
    .product-popup .popup-box{
        animation:none;
    }
}

/* Mobile layout and touch-target refinements */
@media(max-width:600px){
    .hero-section .explore-btn,
    .hero-section .explore-secondary{
        min-height:44px;
        align-items:center;
    }

    .category-section .featured-category-grid > .feature-service-sticker{
        min-height:64px;
    }

    .home-catalog,
    .home-catalog-content,
    .home-product-grid{
        min-width:0;
    }

    .home-product-grid{
        position:static;
        left:auto;
        width:100%;
        margin:0;
        transform:none;
    }

    .home-catalog .home-product-grid .product-card{
        width:100%;
        min-width:0;
        padding-right:12px;
        padding-left:12px;
    }

    .home-catalog .home-product-grid .price-row{
        grid-template-columns:minmax(0,1fr) minmax(58px,.65fr) 74px;
        gap:4px;
        padding-right:3px;
        padding-left:3px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:74px;
        min-width:74px;
        height:44px;
        min-height:44px;
        padding:0 6px;
    }

    .home-catalog-actions .payment-btn{
        min-height:48px;
        margin:0;
        padding:12px 18px;
        font-size:14px;
        line-height:1.3;
    }

    .home .contact-links .order-btn{
        min-height:44px;
        padding:8px 13px;
    }

    .home .footer{
        margin-top:15px;
        padding-top:10px;
    }

    .product-popup .popup-close,
    .payment-popup .payment-close{
        top:12px;
        right:12px;
        width:44px;
        height:44px;
    }

    .product-popup .popup-box{
        width:calc(100% - 24px);
        max-width:520px;
        max-height:calc(100vh - 24px);
        max-height:calc(100dvh - 24px);
        padding-right:18px;
        padding-left:18px;
        overflow-x:hidden;
        overscroll-behavior:contain;
    }

    .product-popup .popup-box h2{
        overflow-wrap:anywhere;
    }

    .product-popup .popup-box::before{
        left:18px;
        width:calc(100% - 78px);
        transform:none;
        font-size:7px;
        letter-spacing:.08em;
        text-align:center;
    }

    .payment-popup{
        padding:12px;
    }

    .payment-popup .payment-box{
        width:100%;
        max-width:460px;
        max-height:calc(100vh - 24px);
        max-height:calc(100dvh - 24px);
        padding-right:16px;
        padding-left:16px;
        overflow-x:hidden;
        overscroll-behavior:contain;
    }

    .payment-popup .confirm-payment-btn{
        min-height:52px;
    }

    .payment-popup .qris-image{
        width:min(174px,54vw);
    }
}

@media(max-width:360px){
    .home-catalog .home-product-grid .product-card{
        padding-right:8px;
        padding-left:8px;
    }

    .home-catalog .home-product-grid .package-group{
        padding-right:4px;
        padding-left:4px;
    }

    .home-catalog .home-product-grid .price-row{
        grid-template-columns:minmax(52px,1fr) minmax(58px,.8fr) 70px;
        gap:4px;
        padding-right:2px;
        padding-left:2px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:70px;
        min-width:70px;
    }
}

/* Final Bie brand polish */
.hero-actions a,
.all-categories-trigger,
.home-catalog-actions .payment-btn,
.home-catalog .package-select-btn,
.home-catalog .product-info-btn,
.home .contact-links .order-btn,
.payment-popup .confirm-payment-btn{
    transition:
        transform .22s var(--ease-store),
        box-shadow .22s var(--ease-store),
        background-color .22s ease,
        background-image .22s ease,
        border-color .22s ease,
        color .22s ease;
}

.hero-actions a:hover,
.all-categories-trigger:hover,
.home-catalog-actions .payment-btn:hover,
.home-catalog .package-select-btn:hover,
.home-catalog .product-info-btn:hover,
.home .contact-links .order-btn:hover,
.payment-popup .confirm-payment-btn:hover{
    transform:translateY(-2px) scale(1.015);
}

.hero-actions a:focus-visible,
.all-categories-trigger:focus-visible,
.home-catalog-actions .payment-btn:focus-visible,
.home-catalog .package-select-btn:focus-visible,
.home-catalog .product-info-btn:focus-visible,
.home .contact-links .order-btn:focus-visible,
.payment-popup .confirm-payment-btn:focus-visible{
    outline:2px solid var(--mauve);
    outline-offset:3px;
}

.hero-mascot-frame .mascot{
    animation:brand-image-in .65s var(--ease-store) both;
}

.premium-app-card .category-mark img{
    animation:brand-image-in .6s var(--ease-store) both;
}

@keyframes brand-image-in{
    from{opacity:0;transform:translateY(5px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@supports (animation-timeline:view()){
    .hero-mascot-frame,
    .hero-copy,
    .category-section .featured-category-grid > .category-card,
    .home-catalog,
    .contact-order,
    .home .footer{
        animation:brand-scroll-reveal linear both;
        animation-timeline:view();
        animation-range:entry 0% entry 28%;
    }
}

@keyframes brand-scroll-reveal{
    from{opacity:.35;translate:0 14px}
    to{opacity:1;translate:0 0}
}

@media(prefers-reduced-motion:reduce){
    .hero-mascot-frame .mascot,
    .premium-app-card .category-mark img{
        animation:none;
    }
}

.home-catalog .home-product-grid .package-group{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.home-catalog .home-product-grid .price-category{
    grid-column:1 / -1;
    margin:0;
}

.home-catalog .home-product-grid .price-row{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
    justify-items:center;
    align-content:center;
    min-width:0;
    min-height:104px;
    gap:4px;
    padding:9px 6px 8px;
    border:1px solid rgba(217,124,149,.16);
    border-radius:15px;
    background:linear-gradient(155deg,#FFFEFD,#FFF7F4);
    box-shadow:0 3px 10px rgba(90,59,67,.035);
    text-align:center;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.home-catalog .home-product-grid .price-row:hover{
    transform:translateY(-2px);
    border-color:rgba(217,124,149,.34);
    background:linear-gradient(155deg,#FFFDFC,#FFF0F0);
    box-shadow:0 7px 15px rgba(126,75,91,.09);
}

.home-catalog .home-product-grid .price-row > span:first-child{
    max-width:100%;
    padding:0;
    color:#8B6570;
    font-size:10px;
    font-weight:700;
    letter-spacing:.07em;
    line-height:1.3;
    text-align:center;
    text-transform:uppercase;
}

.home-catalog .home-product-grid .price-row > span:nth-child(2){
    align-self:center;
    min-width:0;
    padding:0;
    color:#5A3B43;
    font-size:19px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.025em;
    line-height:1.1;
    text-align:center;
}

.home-catalog .home-product-grid .package-select-btn{
    align-self:end;
    width:76px;
    min-width:0;
    height:29px;
    min-height:29px;
    padding:4px 8px;
    border-radius:999px;
    background:linear-gradient(135deg,#FCE1E6,#FFF1EA);
    box-shadow:0 2px 7px rgba(90,59,67,.055);
    font-size:10px;
    line-height:1;
}

.home-catalog .home-product-grid .price-row:has(.package-select-btn.selected){
    border-color:rgba(217,124,149,.45);
    background:linear-gradient(155deg,#FFF9F8,#FCE7EA);
    box-shadow:0 4px 12px rgba(217,124,149,.12);
}

.home-catalog .home-product-grid .package-select-btn:hover{
    background:linear-gradient(135deg,#F8C8D2,#FFF8F5);
    box-shadow:0 4px 10px rgba(90,59,67,.09);
}

@media(max-width:360px){
    .home-catalog .home-product-grid .package-group{
        gap:7px;
    }

    .home-catalog .home-product-grid .price-row{
        min-height:99px;
        padding-right:4px;
        padding-left:4px;
    }

    .home-catalog .home-product-grid .price-row > span:nth-child(2){
        font-size:17px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:70px;
    }
}

@media(prefers-reduced-motion:reduce){
    .home-catalog .home-product-grid .price-row{
        transition:none;
    }
}

.category-section .featured-category-grid{
    align-items:stretch;
    gap:12px;
}

.category-section .featured-category-grid > .premium-app-card,
.category-section .featured-category-grid > .premium-app-card:nth-child(2),
.category-section .featured-category-grid > .premium-app-card:nth-child(4){
    min-height:132px;
    justify-content:center;
    gap:0;
    padding:13px 9px 12px;
    overflow:hidden;
    border:1px solid rgba(217,124,149,.14);
    border-radius:20px;
    background:linear-gradient(155deg,#FFFCFA,#FFF6F3);
    box-shadow:0 4px 12px rgba(90,59,67,.035);
    transform:none;
}

.category-section .featured-category-grid > .premium-app-card:hover,
.category-section .featured-category-grid > .premium-app-card:nth-child(2):hover,
.category-section .featured-category-grid > .premium-app-card:nth-child(4):hover{
    transform:translateY(-2px);
    border-color:rgba(217,124,149,.28);
    background:linear-gradient(155deg,#FFFDFC,#FFF5F2);
    box-shadow:0 7px 16px rgba(90,59,67,.065);
}

.category-section .featured-category-grid > .premium-app-card::after{
    content:none;
}

.category-section .premium-app-card .category-mark,
.category-section .premium-app-card:nth-child(2) .category-mark{
    flex:0 0 46px;
    width:46px;
    height:46px;
    margin:0 0 8px;
    border:1px solid rgba(217,124,149,.12);
    border-radius:15px;
    background:#FFFDFC;
    box-shadow:0 3px 9px rgba(90,59,67,.045);
    font-size:21px;
}

.category-section .premium-app-card .category-mark img{
    width:27px;
    height:27px;
    object-fit:contain;
}

.category-section .premium-app-card .category-name{
    font-size:13px;
    line-height:1.25;
}

.category-section .premium-app-card .category-starting-price{
    margin-top:3px;
    padding-top:0;
    color:#9B7180;
    font-size:10px;
    font-weight:600;
}

.category-section .all-category-grid > .has-product-logo{
    min-height:91px;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:9px 4px;
    text-align:center;
}

.category-section .all-category-grid > .has-product-logo .category-mark{
    flex:0 0 46px;
    width:46px;
    height:46px;
    margin:0;
    border:1px solid rgba(217,124,149,.12);
    border-radius:15px;
    background:#FFFDFC;
    box-shadow:0 3px 9px rgba(90,59,67,.045);
}

.category-section .all-category-grid > .has-product-logo .category-mark img{
    width:27px;
    height:27px;
    object-fit:contain;
}

.home-catalog #catalog-netflix h3::before,
.home-catalog #catalog-spotify h3::before,
.home-catalog #catalog-canva h3::before{
    content:"";
    background-color:#FFFDFC;
    background-position:center;
    background-repeat:no-repeat;
    background-size:23px 23px;
}

.home-catalog #catalog-netflix h3::before{
    background-image:url("./images/netflix-192.png");
}

.home-catalog #catalog-spotify h3::before{
    background-image:url("./images/spotify-192.png");
}

.home-catalog #catalog-canva h3::before{
    background-image:url("./images/canva-192.png");
}

.home-catalog #catalog-chatgpt h3::before{
    content:"";
    background-image:url("./images/chatgpt.png");
}

.home-catalog #catalog-wink h3::before{
    content:"";
    background-image:url("./images/wink.png");
}

.home-catalog #catalog-meitu h3::before{
    content:"";
    background-image:url("./images/meitu.png");
}

.product-popup.active #popup-name{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
}

.product-popup.active #popup-name::before{
    display:block;
    width:44px;
    height:44px;
    padding:6px;
    border:1px solid rgba(217,124,149,.14);
    border-radius:14px;
    background-color:#FFFDFC;
    background-position:center;
    background-repeat:no-repeat;
    background-size:25px 25px;
    box-shadow:0 3px 9px rgba(90,59,67,.045);
    content:"";
}

body:has(#catalog-netflix) .product-popup.active #popup-name::before{
    background-image:url("./images/netflix-192.png");
}

body:has(#catalog-spotify) .product-popup.active #popup-name::before{
    background-image:url("./images/spotify-192.png");
}

body:has(#catalog-canva) .product-popup.active #popup-name::before{
    background-image:url("./images/canva-192.png");
}

body:has(#catalog-chatgpt) .product-popup.active #popup-name::before{
    background-image:url("./images/chatgpt.png");
}

body:has(#catalog-wink) .product-popup.active #popup-name::before{
    background-image:url("./images/wink.png");
}

body:has(#catalog-meitu) .product-popup.active #popup-name::before{
    background-image:url("./images/meitu.png");
}

@media(max-width:760px){
    .category-section .featured-category-grid{
        gap:9px;
    }

    .category-section .featured-category-grid > .premium-app-card,
    .category-section .featured-category-grid > .premium-app-card:nth-child(2),
    .category-section .featured-category-grid > .premium-app-card:nth-child(4){
        min-height:122px;
        padding:10px 7px;
    }

    .category-section .all-category-grid > .has-product-logo{
        min-height:84px;
    }
}

@media(max-width:380px){
    .category-section .featured-category-grid > .premium-app-card,
    .category-section .featured-category-grid > .premium-app-card:nth-child(2),
    .category-section .featured-category-grid > .premium-app-card:nth-child(4){
        min-height:116px;
    }

    .category-section .premium-app-card .category-mark,
    .category-section .premium-app-card:nth-child(2) .category-mark{
        flex-basis:42px;
        width:42px;
        height:42px;
        margin-bottom:7px;
    }

    .category-section .all-category-grid > .has-product-logo .category-mark{
        flex-basis:42px;
        width:42px;
        height:42px;
    }
}

.payment-popup .checkout-total-section{
    position:relative;
    overflow:hidden;
    margin:13px 0;
    padding:18px 16px 20px;
    border:1px solid rgba(217,124,149,.24);
    border-radius:23px;
    background:
        radial-gradient(ellipse at 50% 0,rgba(255,255,255,.82),transparent 58%),
        linear-gradient(145deg,#FBE1E6 0%,#FFF0EB 56%,#FFF8F2 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        0 9px 24px rgba(126,75,91,.075);
    text-align:center;
}

.payment-popup .checkout-total-section::before{
    position:absolute;
    top:0;
    left:50%;
    width:58px;
    height:2px;
    border-radius:0 0 3px 3px;
    background:linear-gradient(90deg,#E8A4B5,#D988A0);
    content:"";
    transform:translateX(-50%);
}

.payment-popup .checkout-total-section h3{
    margin:0 0 7px;
    color:#96727B;
    font-size:10px;
    font-weight:700;
    letter-spacing:.2em;
}

.payment-popup .checkout-total{
    color:#583A43;
    font-size:clamp(42px,12vw,52px);
    font-weight:750;
    letter-spacing:-.045em;
    line-height:1.05;
}

/* Boutique catalog package menu */
.home-catalog .home-product-grid .product-card{
    padding:25px 30px 24px;
}

.home-catalog .home-product-grid .product-card::before{
    content:none;
}

.home-catalog .home-product-grid .product-card h3{
    min-height:0;
    gap:7px;
    margin:0 0 15px;
    padding:0 0 14px;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    font-size:22px;
    line-height:1.2;
}

.home-catalog .home-product-grid .product-card h3::before{
    flex:0 0 39px;
    width:39px;
    height:39px;
    border:1px solid rgba(217,124,149,.14);
    border-radius:13px;
    background-color:#FFFDFC;
    background-position:center;
    background-repeat:no-repeat;
    background-size:23px 23px;
    box-shadow:0 3px 9px rgba(90,59,67,.045);
    color:#B96F83;
    content:"✿";
    font-family:Georgia,serif;
    font-size:18px;
    font-weight:400;
}

.home-catalog .home-product-grid .package-group,
.home-catalog .home-product-grid .package-group + .package-group{
    display:block;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.home-catalog .home-product-grid .package-group + .package-group{
    margin-top:13px;
    padding-top:12px;
    border-top:1px solid rgba(185,130,147,.15);
}

.home-catalog .home-product-grid .price-category{
    display:table;
    max-width:100%;
    margin:0 0 5px;
    padding:4px 10px;
    border:1px solid rgba(217,124,149,.14);
    border-radius:999px;
    background:rgba(248,200,210,.24);
    color:#896571;
    font-size:10px;
    font-weight:650;
    letter-spacing:.035em;
    line-height:1.25;
}

.home-catalog .home-product-grid .price-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(68px,.55fr) 68px;
    align-items:center;
    min-width:0;
    min-height:43px;
    gap:9px;
    padding:5px 7px;
    border:0;
    border-bottom:1px solid rgba(185,130,147,.12);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    text-align:left;
    transition:background-color .18s ease;
}

.home-catalog .home-product-grid .price-row:last-child{
    border-bottom:0;
}

#home-catalog .home-product-grid .package-group > .price-row:nth-of-type(2),
#home-catalog .home-product-grid .package-group > .price-row:last-child{
    border-radius:0;
}

.home-catalog .home-product-grid .price-row:hover{
    transform:none;
    border-radius:9px;
    background:rgba(255,241,234,.56);
    box-shadow:none;
}

.home-catalog .home-product-grid .price-row > span:first-child{
    min-width:0;
    padding:0;
    color:#765A63;
    font-size:12px;
    font-weight:500;
    letter-spacing:0;
    line-height:1.35;
    text-align:left;
    text-transform:none;
}

.home-catalog .home-product-grid .price-row > span:nth-child(2){
    min-width:0;
    padding:0;
    color:#583A43;
    font-size:15px;
    font-weight:750;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.01em;
    line-height:1.25;
    text-align:center;
}

.home-catalog .home-product-grid .package-select-btn{
    justify-self:end;
    width:68px;
    min-width:68px;
    height:30px;
    min-height:30px;
    padding:4px 8px;
    border:1px solid rgba(217,124,149,.2);
    border-radius:999px;
    background:linear-gradient(135deg,#FCE8EC,#FFF4EE);
    box-shadow:none;
    color:#805A67;
    font-size:10px;
    font-weight:650;
    line-height:1;
}

.home-catalog .home-product-grid .package-select-btn:hover{
    transform:translateY(-1px);
    border-color:rgba(217,124,149,.34);
    background:linear-gradient(135deg,#F8D6DE,#FFF8F5);
    box-shadow:0 3px 8px rgba(90,59,67,.06);
}

.home-catalog .home-product-grid .package-select-btn.selected{
    border-color:rgba(217,124,149,.4);
    background:#F8DDE3;
    box-shadow:none;
    color:#664653;
}

@media(max-width:600px){
    .home-catalog .home-product-grid .product-card{
        padding:22px 15px 20px;
    }

    .home-catalog .home-product-grid .product-card h3{
        gap:7px;
        margin-bottom:13px;
        padding:0 0 12px;
        font-size:20px;
    }

    .home-catalog .home-product-grid .product-card h3::before{
        flex-basis:36px;
        width:36px;
        height:36px;
        background-size:21px 21px;
    }

    .home-catalog .home-product-grid .package-group{
        padding-right:3px;
        padding-left:3px;
    }

    .home-catalog .home-product-grid .price-row{
        grid-template-columns:minmax(0,1fr) minmax(64px,.55fr) 64px;
        min-height:42px;
        gap:6px;
        padding-right:5px;
        padding-left:5px;
    }

    .home-catalog .home-product-grid .price-row > span:first-child{
        font-size:12px;
    }

    .home-catalog .home-product-grid .price-row > span:nth-child(2){
        font-size:14px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:64px;
        min-width:64px;
    }
}

@media(max-width:360px){
    .home-catalog .home-product-grid .product-card{
        padding-right:12px;
        padding-left:12px;
    }

    .home-catalog .home-product-grid .price-row{
        grid-template-columns:minmax(0,1fr) minmax(60px,.55fr) 60px;
        gap:5px;
        padding-right:3px;
        padding-left:3px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:60px;
        min-width:60px;
    }
}

@media(prefers-reduced-motion:reduce){
    .home-catalog .home-product-grid .price-row,
    .home-catalog .home-product-grid .package-select-btn{
        transition:none;
    }
}

/* Produk dinonaktifkan di admin: tetap tampil, tetapi tidak bisa dipilih */
.category-card.is-unavailable,
.category-card.is-unavailable:hover{
    opacity:.62;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

.category-card.is-unavailable .category-mark{
    filter:grayscale(1);
}

.unavailable-label,
.category-card.is-unavailable .category-starting-price{
    display:inline-block;
    margin-top:2px;
    padding:1px 7px;
    border-radius:999px;
    background:rgba(90,59,67,.1);
    color:#7d5e68;
    font-size:9.5px;
    font-weight:600;
    line-height:1.45;
}

/* ===== Pop up: pilihan paket, info produk, pembayaran =====
   Satu desain untuk ketiganya. Selector memakai id supaya menang atas
   aturan lama yang berlapis di atas. Di layar kecil tampil sebagai sheet bawah. */

:root{
    --pop-ink:#5A3B43;
    --pop-muted:#8B6570;
    --pop-accent:#D97C95;
    --pop-accent-deep:#B96F83;
    --pop-soft:#FCE1E6;
    --pop-cream:#FFF8F5;
    --pop-line:rgba(217,124,149,.24);
}

/* latar */
#home-catalog.home-catalog,
#product-popup,
#payment-popup{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:16px;
    border:0;
    border-radius:0;
    background:rgba(90,59,67,.45);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease,visibility .22s ease;
}

#home-catalog.home-catalog{z-index:900;}
#payment-popup{z-index:999;}
#product-popup{z-index:9999;}

#home-catalog.home-catalog.active,
#product-popup.active,
#payment-popup.active{
    opacity:1;
    visibility:visible;
}

/* kotak */
#home-catalog .home-catalog-box,
#product-popup .popup-box,
#payment-popup .payment-box{
    position:relative;
    width:min(480px,100%);
    max-width:100%;
    max-height:min(88vh,860px);
    max-height:min(88dvh,860px);
    margin:0;
    border:1px solid var(--pop-line);
    border-radius:28px;
    background:linear-gradient(180deg,#FFEFF3 0,#FFFDFC 130px);
    box-shadow:0 24px 70px rgba(90,59,67,.28);
    color:var(--pop-ink);
    overscroll-behavior:contain;
}

#home-catalog .home-catalog-box{
    display:flex;
    flex-direction:column;
    padding:0;
    overflow:hidden;
    transform:translateY(12px) scale(.98);
    transition:transform .28s ease;
}

#home-catalog.active .home-catalog-box{transform:none;}

#product-popup .popup-box,
#payment-popup .payment-box{
    display:block;
    padding:24px 22px 22px;
    overflow-y:auto;
}

#product-popup .popup-box::before,
#product-popup .popup-box::after,
#payment-popup .payment-box::before,
#payment-popup .payment-box::after{
    display:none;
}

/* tombol tutup */
#home-catalog .catalog-close,
#product-popup .popup-close,
#payment-popup .payment-close{
    position:absolute;
    top:14px;
    right:14px;
    left:auto;
    z-index:3;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    margin:0;
    padding:0;
    border:1px solid var(--pop-line);
    border-radius:50%;
    background:#fff;
    color:var(--pop-muted);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(90,59,67,.1);
    transition:transform .2s ease,background .2s ease,color .2s ease;
}

#home-catalog .catalog-close:hover,
#product-popup .popup-close:hover,
#payment-popup .payment-close:hover{
    transform:rotate(90deg);
    background:var(--pop-soft);
    color:var(--pop-accent-deep);
}

/* ---------- 1. pilihan paket ---------- */
#home-catalog .home-catalog-content{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:20px 18px 6px;
}

#home-catalog .home-product-grid{
    position:static;
    display:block;
    width:100%;
    margin:0;
    left:auto;
    transform:none;
}

#home-catalog .home-product-grid .product-card{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
}

#home-catalog .home-product-grid .product-card::before,
#home-catalog .home-product-grid .product-card::after{
    display:none;
}

#home-catalog .home-product-grid .product-card h3{
    position:static;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-height:0;
    margin:0 0 16px;
    padding:0 48px 14px 0;
    border:0;
    border-bottom:1px solid var(--pop-line);
    color:var(--pop-ink);
    font-size:22px;
    font-weight:700;
    letter-spacing:0;
    line-height:1.2;
    text-align:left;
}

#home-catalog .home-product-grid .product-card h3::before{
    flex:none;
    width:48px;
    height:48px;
    margin:0;
}

#home-catalog .home-product-grid .package-group{
    margin:0 0 12px;
    padding:10px 10px 4px;
    border:1px solid var(--pop-line);
    border-radius:18px;
    background:#fff;
    box-shadow:none;
}

#home-catalog .home-product-grid .package-group + .package-group{margin-top:0;}

#home-catalog .home-product-grid .price-category{
    display:block;
    margin:0;
    padding:2px 6px 8px;
    border:0;
    border-radius:0;
    background:none;
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-align:left;
    text-transform:uppercase;
}

#home-catalog .home-product-grid .price-row,
#home-catalog .home-product-grid .package-group > .price-row:nth-of-type(2),
#home-catalog .home-product-grid .price-row:last-child{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 84px;
    align-items:center;
    gap:10px;
    min-height:0;
    margin:0;
    padding:9px 6px;
    border:0;
    border-top:1px solid rgba(217,124,149,.15);
    border-radius:0;
    background:none;
    box-shadow:none;
}

#home-catalog .home-product-grid .price-row:has(.package-select-btn.selected){
    border-radius:12px;
    background:rgba(252,225,230,.6);
}

#home-catalog .home-product-grid .price-row > span:first-child{
    min-width:0;
    padding:0;
    color:var(--pop-ink);
    font-size:15px;
    font-weight:500;
    text-align:left;
}

#home-catalog .home-product-grid .price-row > span:nth-child(2){
    min-width:0;
    margin:0;
    padding:0;
    color:#76515E;
    font-size:15px;
    font-weight:700;
    text-align:right;
    white-space:nowrap;
}

#home-catalog .home-product-grid .package-select-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:84px;
    min-width:84px;
    height:36px;
    min-height:0;
    margin:0;
    padding:0 10px;
    border:1px solid rgba(217,124,149,.5);
    border-radius:999px;
    background:#fff;
    box-shadow:none;
    color:var(--pop-accent-deep);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}

#home-catalog .home-product-grid .package-select-btn:hover{
    background:var(--pop-soft);
    transform:translateY(-1px);
}

#home-catalog .home-product-grid .package-select-btn.selected{
    border-color:var(--pop-accent);
    background:linear-gradient(135deg,#E892A8,#D97C95);
    box-shadow:0 5px 12px rgba(217,124,149,.32);
    color:#fff;
}

#home-catalog .home-product-grid .product-info-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin:2px 0 6px;
    padding:10px 14px;
    border:1px dashed rgba(185,111,131,.45);
    border-radius:14px;
    background:var(--pop-cream);
    box-shadow:none;
    color:var(--pop-muted);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

#home-catalog .home-product-grid .product-info-btn:hover{
    background:var(--pop-soft);
    color:var(--pop-accent-deep);
}

#home-catalog .catalog-empty-state{
    margin:28px 30px 22px;
    padding:0;
    background:none;
    text-align:center;
}

/* bagian bawah: ringkasan pilihan + tombol bayar, selalu terlihat */
#home-catalog .home-catalog-actions{
    flex:none;
    display:grid;
    justify-items:stretch;
    gap:10px;
    margin:0;
    padding:12px 18px 16px;
    border-top:1px solid var(--pop-line);
    background:rgba(255,253,252,.97);
}

#home-catalog .home-catalog-actions[hidden]{display:none;}

#home-catalog .selection-status{
    width:100%;
    margin:0;
    padding:9px 12px;
    border:1px solid var(--pop-line);
    border-radius:14px;
    background:var(--pop-cream);
    color:var(--pop-muted);
    font-size:13px;
    line-height:1.45;
    text-align:left;
}

#home-catalog .selection-status.selection-warning{
    border-color:rgba(176,56,79,.3);
    background:#FFF0F2;
    color:#B0384F;
}

#home-catalog .sel-main{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    color:var(--pop-ink);
}

#home-catalog .sel-price{
    flex:none;
    color:var(--pop-accent-deep);
    font-weight:700;
    white-space:nowrap;
}

#home-catalog .sel-sub{
    display:block;
    margin-top:2px;
    font-size:12px;
}

#home-catalog .home-catalog-actions .payment-btn{
    width:100%;
    max-width:none;
    min-height:46px;
    margin:0;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#E892A8,#D97C95);
    box-shadow:0 8px 18px rgba(217,124,149,.34);
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

/* ---------- 2. info produk ---------- */
#product-popup .popup-box h2,
#product-popup.active #popup-name{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-height:0;
    margin:0 44px 16px 0;
    padding:0 0 14px;
    border-bottom:1px solid var(--pop-line);
    color:var(--pop-ink);
    font-size:22px;
    font-weight:700;
    letter-spacing:0;
    text-align:left;
}

#product-popup .popup-box h2::after,
#product-popup #popup-name::after{
    display:none;
}

#product-popup #popup-name::before{
    flex:none;
    width:44px;
    height:44px;
    margin:0;
}

#product-popup .popup-section{
    margin:0 0 16px;
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
}

#product-popup .popup-section:last-child{margin-bottom:0;}

#product-popup .popup-section h4{
    margin:0 0 8px;
    padding:0;
    border:0;
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-align:left;
    text-transform:uppercase;
}

#product-popup #popup-description{
    margin:0;
    padding:0;
    border:0;
    background:none;
    color:var(--pop-ink);
    font-size:14px;
    line-height:1.65;
    text-align:left;
}

#product-popup #popup-details,
#product-popup #popup-rules{
    margin:0;
    padding:0;
    list-style:none;
}

#product-popup .popup-package-item{
    position:relative;
    margin:0 0 8px;
    padding:10px 12px;
    border:1px solid var(--pop-line);
    border-radius:14px;
    background:#fff;
    box-shadow:none;
}

#product-popup .popup-package-item::before{display:none;}

#product-popup .popup-package-item strong{
    display:block;
    color:var(--pop-ink);
    font-size:14px;
    font-weight:600;
}

#product-popup .popup-package-item p{
    margin:3px 0 0;
    color:var(--pop-muted);
    font-size:13px;
    line-height:1.5;
}

#product-popup #popup-rules li{
    position:relative;
    margin:0;
    padding:6px 0 6px 24px;
    color:var(--pop-ink);
    font-size:14px;
    line-height:1.55;
    text-align:left;
}

#product-popup #popup-rules li::before{
    content:"✦";
    position:absolute;
    top:6px;
    left:2px;
    display:block;
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    background:none;
    transform:none;
    color:var(--pop-accent);
    font-size:13px;
    line-height:1.55;
}

#product-popup #popup-warranty{
    display:grid;
    gap:8px;
    margin:0;
    padding:0;
}

#product-popup .popup-warranty-item{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    margin:0;
    padding:10px 12px;
    border:1px solid var(--pop-line);
    border-radius:14px;
    background:var(--pop-cream);
}

#product-popup .popup-warranty-tag{
    display:inline-block;
    padding:2px 10px;
    border-radius:999px;
    background:var(--pop-soft);
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:600;
}

#product-popup .popup-warranty-note{
    color:var(--pop-muted);
    font-size:13px;
    line-height:1.5;
}

/* ---------- 3. pembayaran ---------- */
#payment-popup .checkout-header{
    margin:0 0 16px;
    padding:0 40px 0 0;
    text-align:left;
}

#payment-popup .checkout-eyebrow{
    display:block;
    margin:0 0 2px;
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#payment-popup .checkout-header h2{
    margin:0;
    color:var(--pop-ink);
    font-size:22px;
    font-weight:700;
    letter-spacing:0;
}

#payment-popup .checkout-header p{
    margin:4px 0 0;
    color:var(--pop-muted);
    font-size:13px;
}

#payment-popup .checkout-section{
    margin:0 0 12px;
    padding:13px 15px;
    border:1px solid var(--pop-line);
    border-radius:16px;
    background:#fff;
    box-shadow:none;
    text-align:left;
}

#payment-popup .checkout-section h3{
    margin:0 0 8px;
    padding:0;
    border:0;
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-align:left;
}

#payment-popup .payment-order-summary{
    display:grid;
    gap:2px;
}

#payment-popup .checkout-product{
    color:var(--pop-ink);
    font-size:17px;
}

#payment-popup .checkout-order-package,
#payment-popup .checkout-order-duration{
    color:var(--pop-muted);
    font-size:14px;
}

#payment-popup .checkout-total-section{
    background:linear-gradient(135deg,#FFF1F4,#FFF8F5);
}

#payment-popup .checkout-total{
    color:var(--pop-accent-deep);
    font-size:26px;
    font-weight:700;
    line-height:1.2;
}

#payment-popup .checkout-warranty{
    display:grid;
    gap:2px;
    color:var(--pop-muted);
    font-size:13px;
    line-height:1.5;
}

#payment-popup .checkout-warranty strong{
    color:var(--pop-ink);
    font-size:14px;
}

#payment-popup .checkout-payment-section{text-align:center;}
#payment-popup .checkout-payment-section h3{text-align:left;}

#payment-popup .qris-image{
    display:block;
    width:min(240px,100%);
    height:auto;
    margin:4px auto 8px;
    padding:8px;
    border:1px solid var(--pop-line);
    border-radius:16px;
    background:#fff;
}

#payment-popup .checkout-instruction{
    margin:0;
    color:var(--pop-muted);
    font-size:13px;
}

#payment-popup .checkout-steps{
    margin:0;
    padding-left:20px;
    color:var(--pop-ink);
    font-size:14px;
    line-height:1.7;
}

#payment-popup .confirm-payment-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:48px;
    margin:4px 0 0;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#E892A8,#D97C95);
    box-shadow:0 8px 18px rgba(217,124,149,.34);
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

#payment-popup #payment-confirmation-status{
    margin:8px 0 0;
    color:var(--pop-muted);
    font-size:13px;
    text-align:center;
}

#payment-popup .payment-verification-note{
    margin:10px 0 0;
    color:var(--pop-muted);
    font-size:12px;
    line-height:1.5;
    text-align:center;
}

#payment-popup .payment-issue{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:12px 0 0;
    padding:10px 0 0;
    border-top:1px solid var(--pop-line);
    font-size:13px;
}

#payment-popup .payment-issue p{margin:0;color:var(--pop-muted);}
#payment-popup .payment-issue a{color:var(--pop-accent-deep);font-weight:600;}

/* ---------- layar kecil: tampil sebagai sheet dari bawah ---------- */
@media (max-width:600px){
    #home-catalog.home-catalog,
    #product-popup,
    #payment-popup{
        align-items:flex-end;
        padding:0;
    }

    #home-catalog .home-catalog-box,
    #product-popup .popup-box,
    #payment-popup .payment-box{
        width:100%;
        max-height:92vh;
        max-height:92dvh;
        border-bottom:0;
        border-radius:24px 24px 0 0;
    }

    #home-catalog .home-catalog-box{transform:translateY(40px);}

    #product-popup .popup-box,
    #payment-popup .payment-box{padding:22px 16px 20px;}

    #home-catalog .home-catalog-content{padding:18px 14px 4px;}
    #home-catalog .home-catalog-actions{padding:10px 14px calc(14px + env(safe-area-inset-bottom));}

    #home-catalog .home-product-grid .price-row,
    #home-catalog .home-product-grid .package-group > .price-row:nth-of-type(2),
    #home-catalog .home-product-grid .price-row:last-child{
        grid-template-columns:minmax(0,1fr) auto 76px;
        gap:8px;
    }

    #home-catalog .home-product-grid .package-select-btn{
        width:76px;
        min-width:76px;
        font-size:12px;
    }

    #home-catalog .home-product-grid .price-row > span:first-child,
    #home-catalog .home-product-grid .price-row > span:nth-child(2){font-size:14px;}
}

/* pop up paket sekarang di luar .home-section: pastikan tidak ada garis atas bawaan */
#home-catalog.home-catalog{border-top:0;}


/* ===== Pop up Info Produk: tampilan lebih cantik ===== */
#product-popup .popup-box{
    padding:22px 20px 20px;
    scrollbar-width:thin;
    scrollbar-color:rgba(217,124,149,.45) transparent;
}

/* tombol tutup menempel di kanan atas saat konten digulir */
#product-popup .popup-close{
    position:sticky;
    top:0;
    float:right;
    margin:-4px -4px 0 10px;
}

#product-popup .popup-head{
    display:flow-root;
    margin:0 0 16px;
    padding:0 0 16px;
    border-bottom:1px dashed rgba(217,124,149,.35);
}

#product-popup .popup-eyebrow{
    display:inline-block;
    margin:0 0 10px;
    padding:3px 11px;
    border-radius:999px;
    background:var(--pop-soft);
    color:var(--pop-accent-deep);
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

#product-popup .popup-head #popup-name{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0;
    padding:0;
    border:0;
    color:var(--pop-ink);
    font-size:clamp(22px,6vw,27px);
    font-weight:700;
    line-height:1.15;
    text-align:left;
}

#product-popup .popup-head #popup-name::before{
    flex:none;
    width:56px;
    height:56px;
    border:3px solid #fff;
    border-radius:18px;
    box-shadow:0 6px 16px rgba(90,59,67,.16),0 0 0 1px rgba(217,124,149,.25);
}

/* deskripsi */
#product-popup .popup-intro-section{
    padding:12px 14px;
    border-left:3px solid var(--pop-accent);
    border-radius:4px 14px 14px 4px;
    background:rgba(252,225,230,.45);
}

#product-popup .popup-intro-section #popup-description:empty{display:none;}
#product-popup .popup-intro-section:has(#popup-description:empty){display:none;}

/* judul bagian */
#product-popup .popup-section h4{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 10px;
}

#product-popup .popup-section h4::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg,rgba(217,124,149,.35),transparent);
}

#product-popup .popup-packages-section h4::before{content:"✦";}
#product-popup .popup-notes-section h4::before{content:"☆";}
#product-popup .popup-warranty-section h4::before{content:"✓";}

/* paket bernomor */
#product-popup #popup-details{counter-reset:pkg;}

#product-popup .popup-package-item{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    column-gap:12px;
    align-items:start;
    counter-increment:pkg;
    margin:0 0 8px;
    padding:12px 14px;
    border:1px solid var(--pop-line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 3px 10px rgba(90,59,67,.04);
}

#product-popup .popup-package-item::before{
    content:counter(pkg);
    position:static;
    display:grid;
    grid-row:1 / span 2;
    place-items:center;
    width:28px;
    height:28px;
    margin:0;
    border:0;
    border-radius:50%;
    background:linear-gradient(135deg,#F8C8D2,#E892A8);
    transform:none;
    color:#fff;
    font-size:13px;
    font-weight:700;
}

#product-popup .popup-package-item strong{grid-column:2;}
#product-popup .popup-package-item p{grid-column:2;}

/* info penting */
#product-popup #popup-rules{
    padding:6px 14px;
    border:1px solid var(--pop-line);
    border-radius:16px;
    background:var(--pop-cream);
}

#product-popup #popup-rules:empty{display:none;}
#product-popup .popup-notes-section:has(#popup-rules:empty){display:none;}

#product-popup #popup-rules li + li{
    border-top:1px dashed rgba(217,124,149,.25);
}

/* garansi berwarna sesuai jenis */
#product-popup .popup-warranty-item{
    --w:#2F7D57;
    --w-bg:#E7F5EC;
    border-color:color-mix(in srgb,var(--w) 22%,transparent);
    background:#fff;
}

#product-popup .popup-warranty-item[data-warranty="1x"],
#product-popup .popup-warranty-item[data-warranty="2x"]{--w:#A67510;--w-bg:#FBF0D2;}
#product-popup .popup-warranty-item[data-warranty="no"]{--w:#B0384F;--w-bg:#FBE1E6;}
#product-popup .popup-warranty-item[data-warranty="pending"]{--w:#6F6670;--w-bg:#EEEAEE;}

#product-popup .popup-warranty-tag{
    background:var(--w-bg);
    color:var(--w);
}

/* tombol bawah */
#product-popup .popup-ok{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:46px;
    margin:18px 0 0;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#E892A8,#D97C95);
    box-shadow:0 8px 18px rgba(217,124,149,.32);
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease;
}

#product-popup .popup-ok:hover{
    transform:translateY(-1px);
    box-shadow:0 11px 22px rgba(217,124,149,.38);
}

/* muncul bertahap */
@keyframes info-rise{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:none}
}

#product-popup.active .popup-head,
#product-popup.active .popup-section,
#product-popup.active .popup-ok{
    animation:info-rise .42s ease both;
}

#product-popup.active .popup-intro-section{animation-delay:.05s;}
#product-popup.active .popup-packages-section{animation-delay:.1s;}
#product-popup.active .popup-notes-section{animation-delay:.15s;}
#product-popup.active .popup-warranty-section{animation-delay:.2s;}
#product-popup.active .popup-ok{animation-delay:.25s;}

@media (prefers-reduced-motion:reduce){
    #product-popup.active .popup-head,
    #product-popup.active .popup-section,
    #product-popup.active .popup-ok{animation:none;}
}

@media (max-width:600px){
    #product-popup .popup-box{padding:26px 16px 18px;}

    /* pegangan sheet */
    #product-popup .popup-box::before{
        content:"";
        position:absolute;
        top:9px;
        left:50%;
        display:block;
        width:40px;
        height:4px;
        border-radius:2px;
        background:rgba(185,111,131,.3);
        transform:translateX(-50%);
    }
}


/* ===== Card produk di beranda =====
   Selector memakai #category-highlights agar menang atas aturan lama yang berlapis. */

#category-highlights{
    --card-line:rgba(217,124,149,.22);
    --card-accent:#D97C95;
    --card-accent-deep:#B96F83;
    --card-ink:#5A3B43;
    --card-ease:cubic-bezier(.2,.8,.2,1);
}

#category-highlights .category-card{
    transition:transform .28s var(--card-ease),box-shadow .28s ease,border-color .28s ease,background .28s ease;
}

#category-highlights .category-card:focus-visible{
    outline:3px solid rgba(217,124,149,.5);
    outline-offset:2px;
}

/* --- kartu aplikasi unggulan (Netflix, Spotify, Canva, ChatGPT) --- */
#category-highlights .featured-category-grid{
    align-items:stretch;
    gap:14px;
}

#category-highlights .featured-category-grid > .premium-app-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    min-height:clamp(128px,36vw,156px);
    padding:16px 6px 13px;
    overflow:hidden;
    border:1px solid var(--card-line);
    border-radius:24px;
    background:
        radial-gradient(circle at 50% -8%,rgba(248,200,210,.6),transparent 62%),
        linear-gradient(180deg,#FFFFFF,#FFF8F5);
    box-shadow:0 6px 16px rgba(90,59,67,.06),inset 0 1px 0 #fff;
    text-align:center;
    transform:none;
}

#category-highlights .premium-app-card .category-mark{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:clamp(42px,12.5vw,62px);
    height:clamp(42px,12.5vw,62px);
    margin:0 0 10px;
    border:3px solid #fff;
    border-radius:clamp(14px,4vw,20px);
    background:linear-gradient(145deg,#FFFFFF,#FDEBF0);
    box-shadow:0 8px 18px rgba(90,59,67,.13),0 0 0 1px rgba(217,124,149,.18);
    transition:transform .3s var(--card-ease);
}

#category-highlights .premium-app-card .category-mark img{
    width:62%;
    height:62%;
    object-fit:contain;
}

#category-highlights .premium-app-card .category-name{
    color:var(--card-ink);
    font-size:clamp(11px,3.2vw,14px);
    font-weight:700;
    line-height:1.2;
}

#category-highlights .premium-app-card .category-starting-price{
    margin-top:7px;
    padding:3px 9px;
    border-radius:999px;
    background:#FCE1E6;
    color:#A65D72;
    font-size:clamp(9px,2.5vw,11px);
    font-weight:600;
    letter-spacing:.01em;
    line-height:1.3;
    white-space:nowrap;
}

/* --- kartu layanan (Discord, Roblox) --- */
#category-highlights .featured-category-grid > .feature-service-sticker{
    position:relative;
    grid-column:span 2;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    min-height:88px;
    padding:14px clamp(12px,3.5vw,20px);
    overflow:hidden;
    border:1px solid var(--card-line);
    border-radius:24px;
    background:linear-gradient(115deg,#FBD3DC,#FFF3EF 62%,#FFFFFF);
    box-shadow:0 6px 16px rgba(90,59,67,.06),inset 0 1px 0 #fff;
    text-align:left;
    transform:none;
}

#category-highlights .featured-category-grid > .discord-service-sticker{
    background:linear-gradient(115deg,#E3E0FA,#FFF4F2 62%,#FFFFFF);
}

#category-highlights .featured-category-grid > .roblox-service-sticker{
    background:linear-gradient(115deg,#FFD9D2,#FFF4EE 62%,#FFFFFF);
}

#category-highlights .feature-service-sticker .category-mark{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:clamp(42px,12vw,54px);
    height:clamp(42px,12vw,54px);
    margin:0;
    border:3px solid #fff;
    border-radius:18px;
    background:linear-gradient(145deg,#FFFFFF,#FDEBF0);
    box-shadow:0 7px 16px rgba(90,59,67,.13),0 0 0 1px rgba(217,124,149,.18);
    color:var(--card-accent-deep);
    font-size:22px;
    font-weight:700;
}

#category-highlights .feature-service-sticker .category-name{
    color:var(--card-ink);
    font-size:clamp(13px,3.6vw,15px);
    font-weight:700;
}

#category-highlights .feature-service-sticker .category-details{
    color:#8B6570;
    font-size:clamp(10px,2.8vw,11.5px);
    line-height:1.4;
}

#category-highlights .sticker-sparkle{
    top:10px;
    right:14px;
    color:var(--card-accent);
    font-size:14px;
}

/* --- grid "Explore All Apps" --- */
#category-highlights .all-category-grid{
    gap:10px;
    padding:14px;
    border:1px solid var(--card-line);
    border-radius:24px;
    background:rgba(255,248,245,.7);
}

#category-highlights .all-category-grid > .category-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:clamp(88px,24vw,102px);
    padding:12px 6px;
    border:1px solid var(--card-line);
    border-radius:18px;
    background:linear-gradient(180deg,#FFFFFF,#FFF9F6);
    box-shadow:0 4px 10px rgba(90,59,67,.045);
    text-align:center;
    transform:none;
}

#category-highlights .all-category-grid > .category-card .category-mark{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:clamp(38px,10.5vw,46px);
    height:clamp(38px,10.5vw,46px);
    margin:0;
    border:2px solid #fff;
    border-radius:15px;
    background:linear-gradient(145deg,#FFFFFF,#FDEBF0);
    box-shadow:0 5px 12px rgba(90,59,67,.11),0 0 0 1px rgba(217,124,149,.16);
    color:var(--card-accent-deep);
    font-size:clamp(15px,4.2vw,19px);
    font-weight:700;
}

#category-highlights .all-category-grid > .category-card .category-mark img{
    width:60%;
    height:60%;
    object-fit:contain;
}

#category-highlights .all-category-grid > .category-card .category-name{
    color:var(--card-ink);
    font-size:clamp(10.5px,2.9vw,12.5px);
    font-weight:600;
    line-height:1.2;
}

/* --- hover & terpilih (hanya kartu yang tersedia) --- */
#category-highlights .category-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-5px);
    border-color:rgba(217,124,149,.55);
    box-shadow:0 16px 30px rgba(217,124,149,.22);
}

#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(217,124,149,.18);
}

#category-highlights .category-card:not(.is-unavailable):not(:disabled):hover .category-mark{
    transform:scale(1.07) rotate(-3deg);
}

#category-highlights .category-card:not(.is-unavailable):not(:disabled):active{
    transform:translateY(-1px) scale(.985);
}

#category-highlights .category-card.active,
#category-highlights .category-card[aria-pressed="true"]{
    border-color:var(--card-accent);
    box-shadow:0 0 0 2px rgba(217,124,149,.35),0 12px 26px rgba(217,124,149,.2);
}

#category-highlights .category-card.active::after,
#category-highlights .category-card[aria-pressed="true"]::after{
    content:"✓";
    position:absolute;
    top:8px;
    right:8px;
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--card-accent);
    box-shadow:0 3px 8px rgba(217,124,149,.4);
    color:#fff;
    font-size:12px;
    font-weight:700;
    line-height:1;
}

/* --- tidak tersedia / memuat --- */
#category-highlights .category-card.is-unavailable{
    border-style:dashed;
    background:#F6F1F0;
    box-shadow:none;
    opacity:.7;
}

#category-highlights .category-card.is-unavailable .category-starting-price,
#category-highlights .category-card .unavailable-label{
    background:rgba(90,59,67,.1);
    color:#7D5E68;
}

#category-highlights .category-card:disabled:not(.is-unavailable){
    opacity:.75;
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .category-card,
    #category-highlights .premium-app-card .category-mark{
        transition:none;
    }
    #category-highlights .category-card:hover,
    #category-highlights .category-card:hover .category-mark{
        transform:none;
    }
}


/* ===== Pop up Pesananmu (checkout): 3 langkah ===== */
#payment-popup .payment-box{
    width:min(460px,100%);
    padding:22px 18px 18px;
    scrollbar-width:thin;
    scrollbar-color:rgba(217,124,149,.45) transparent;
}

#payment-popup .payment-close{
    position:sticky;
    top:0;
    float:right;
    margin:-4px -4px 0 10px;
}

#payment-popup .checkout-header{
    display:flow-root;
    margin:0 0 16px;
    padding:0 0 14px;
    border-bottom:1px dashed rgba(217,124,149,.35);
    text-align:left;
}

#payment-popup .checkout-header h2{
    margin:0;
    font-size:clamp(22px,6vw,26px);
    line-height:1.2;
    text-transform:none;
}

#payment-popup .checkout-header p{
    margin:6px 0 0;
    font-size:13.5px;
    line-height:1.5;
}

/* kartu langkah */
#payment-popup .checkout-step{
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    column-gap:12px;
    align-items:start;
    margin:0 0 12px;
    padding:14px;
    border:1px solid var(--pop-line);
    border-radius:20px;
    background:#fff;
    box-shadow:0 4px 12px rgba(90,59,67,.045);
    text-align:left;
}

#payment-popup .step-num{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:linear-gradient(135deg,#F3A3B8,#D97C95);
    box-shadow:0 4px 10px rgba(217,124,149,.35);
    color:#fff;
    font-size:14px;
    font-weight:700;
}

#payment-popup .step-body{min-width:0;}

#payment-popup .step-title{
    margin:4px 0 10px;
    padding:0;
    color:var(--pop-ink);
    font-size:16px;
    font-weight:700;
    letter-spacing:0;
    text-transform:none;
    text-align:left;
}

#payment-popup .step-hint{
    margin:-4px 0 10px;
    color:var(--pop-muted);
    font-size:13.5px;
    line-height:1.55;
}

#payment-popup .step-hint strong{
    color:var(--pop-accent-deep);
    white-space:nowrap;
}

/* langkah 1: ringkasan */
#payment-popup .payment-order-summary{
    display:grid;
    gap:8px;
    margin:0 0 12px;
}

#payment-popup .checkout-product{
    color:var(--pop-ink);
    font-size:18px;
    line-height:1.25;
}

#payment-popup .checkout-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

#payment-popup .checkout-chip{
    padding:3px 11px;
    border-radius:999px;
    background:var(--pop-soft);
    color:#8F4A5F;
    font-size:12.5px;
    font-weight:600;
}

#payment-popup .checkout-label{
    display:block;
    margin:0 0 3px;
    color:var(--pop-accent-deep);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#payment-popup .checkout-warranty-box{
    margin:0 0 10px;
    padding:10px 12px;
    border:1px solid var(--pop-line);
    border-radius:14px;
    background:var(--pop-cream);
}

#payment-popup .checkout-warranty{
    display:grid;
    gap:2px;
    color:var(--pop-muted);
    font-size:13px;
    line-height:1.5;
}

#payment-popup .checkout-warranty strong{
    color:var(--pop-ink);
    font-size:14px;
}

#payment-popup .checkout-total-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:16px;
    background:linear-gradient(135deg,#FFE3EA,#FFF3EF);
    box-shadow:inset 0 0 0 1px rgba(217,124,149,.28);
}

#payment-popup .checkout-total-box .checkout-label{margin:0;}

#payment-popup .checkout-total{
    color:var(--pop-accent-deep);
    font-size:clamp(22px,6.5vw,27px);
    font-weight:700;
    line-height:1.1;
    text-align:right;
}

/* langkah 2: QRIS */
#payment-popup .qris-image{
    display:block;
    width:min(250px,100%);
    height:auto;
    margin:6px auto 8px;
    padding:10px;
    border:1px solid var(--pop-line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 6px 16px rgba(90,59,67,.08);
}

#payment-popup .qris-zoom{
    display:block;
    text-align:center;
    color:var(--pop-accent-deep);
    font-size:13px;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:3px;
}

/* langkah 3: konfirmasi */
#payment-popup .confirm-payment-btn{
    min-height:50px;
    margin:2px 0 0;
}

#payment-popup #payment-confirmation-status:empty{display:none;}

#payment-popup .payment-verification-note{
    margin:10px 0 0;
    text-align:left;
}

#payment-popup .payment-issue{
    margin:4px 0 0;
    padding:12px 0 0;
}

@media (max-width:600px){
    #payment-popup .payment-box{padding:24px 14px calc(16px + env(safe-area-inset-bottom));}
    #payment-popup .checkout-step{
        grid-template-columns:26px minmax(0,1fr);
        column-gap:10px;
        padding:12px;
    }
    #payment-popup .step-num{width:26px;height:26px;font-size:13px;}
}


/* ===== Premium Apps: gaya stiker kawaii ===== */
#category-highlights .featured-category-grid > .premium-app-card{
    --c1:#FFE0E6;
    --c2:#F59AB1;
    --c3:#B8465F;
    gap:0;
    padding:20px 6px 14px;
    overflow:visible;
    border:3px solid #fff;
    border-radius:30px;
    outline:2px dashed var(--c2);
    outline-offset:-9px;
    background-color:var(--c1);
    background-image:
        radial-gradient(rgba(255,255,255,.8) 2px,transparent 2.6px),
        radial-gradient(circle at 50% 108%,rgba(255,255,255,.9) 0 32%,transparent 33%);
    background-size:15px 15px,100% 100%;
    box-shadow:0 10px 22px color-mix(in srgb,var(--c2) 35%,transparent),0 2px 0 rgba(255,255,255,.9) inset;
    transform:rotate(-1.6deg);
}

#category-highlights .featured-category-grid > .premium-app-card:nth-child(even){
    transform:rotate(1.6deg);
}

#category-highlights .featured-category-grid > .premium-app-card[data-home-product="SPOTIFY"]{
    --c1:#DCF7E8;--c2:#7FD3A8;--c3:#2E7D5B;
}
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="CANVA"]{
    --c1:#DCEFFD;--c2:#86C5F2;--c3:#2F6FA3;
}
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="CHATGPT"]{
    --c1:#EADFFC;--c2:#B79CF0;--c3:#6A4BB5;
}

/* hiasan hati kecil di pojok */
#category-highlights .featured-category-grid > .premium-app-card::before{
    content:"";
    position:absolute;
    top:7px;
    left:12px;
    z-index:1;
    color:var(--c2);
    font-size:clamp(11px,3vw,15px);
    line-height:1;
    pointer-events:none;
}

/* logo bulat bergaya stiker */
#category-highlights .premium-app-card .category-mark{
    width:clamp(44px,13vw,64px);
    height:clamp(44px,13vw,64px);
    margin:0 0 9px;
    border:3px solid var(--c2);
    border-radius:50%;
    background:#fff;
    box-shadow:0 5px 0 color-mix(in srgb,var(--c2) 45%,transparent),0 10px 16px rgba(90,59,67,.1);
}

#category-highlights .premium-app-card .category-name{
    color:var(--c3);
    font-size:clamp(11.5px,3.3vw,15px);
    font-weight:700;
    letter-spacing:.01em;
}

#category-highlights .premium-app-card:not(.is-unavailable) .category-starting-price{
    margin-top:7px;
    padding:3px 10px;
    border:1.5px solid var(--c2);
    border-radius:999px;
    background:#fff;
    color:var(--c3);
    font-size:clamp(9.5px,2.6vw,11.5px);
    font-weight:700;
}

#category-highlights .premium-app-card:not(.is-unavailable) .category-starting-price::before{
    content:"";
    color:var(--c2);
}

/* hover: loncat kecil dan goyang */
#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-7px) rotate(0deg) scale(1.04);
    border-color:#fff;
    box-shadow:0 18px 30px color-mix(in srgb,var(--c2) 55%,transparent),0 2px 0 rgba(255,255,255,.9) inset;
}

#category-highlights .premium-app-card:not(.is-unavailable):not(:disabled):hover .category-mark{
    animation:cute-bounce .6s ease;
    transform:none;
}

#category-highlights .featured-category-grid > .premium-app-card.active,
#category-highlights .featured-category-grid > .premium-app-card[aria-pressed="true"]{
    outline-style:solid;
    border-color:#fff;
    box-shadow:0 0 0 3px var(--c2),0 14px 26px color-mix(in srgb,var(--c2) 50%,transparent);
}

#category-highlights .featured-category-grid > .premium-app-card[aria-pressed="true"]::after,
#category-highlights .featured-category-grid > .premium-app-card.active::after{
    background:var(--c3);
    box-shadow:0 3px 8px color-mix(in srgb,var(--c3) 45%,transparent);
}

#category-highlights .featured-category-grid > .premium-app-card.is-unavailable{
    --c1:#EFEAEA;
    --c2:#C9BDBE;
    --c3:#7D6E70;
    box-shadow:none;
    transform:none;
}

@keyframes cute-bounce{
    0%{transform:translateY(0) scale(1)}
    30%{transform:translateY(-8px) scale(1.08) rotate(-6deg)}
    55%{transform:translateY(0) scale(.96) rotate(4deg)}
    75%{transform:translateY(-3px) scale(1.03) rotate(-2deg)}
    100%{transform:translateY(0) scale(1) rotate(0)}
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .premium-app-card:hover .category-mark{animation:none;}
}


/* ===== Explore All Apps: gaya stiker kawaii (selaras dengan Premium Apps) ===== */
#category-highlights .all-category-grid{
    gap:12px;
    padding:16px 14px;
    border:2px dashed rgba(217,124,149,.4);
    border-radius:28px;
    background-color:#FFF8F5;
    background-image:radial-gradient(rgba(248,200,210,.55) 1.5px,transparent 2px);
    background-size:16px 16px;
}

#category-highlights .all-category-grid > .category-card{
    --c1:#FFE0E6;
    --c2:#F59AB1;
    --c3:#B8465F;
    position:relative;
    gap:7px;
    min-height:clamp(92px,25vw,108px);
    padding:14px 5px 11px;
    overflow:visible;
    border:3px solid #fff;
    border-radius:24px;
    outline:1.5px dashed var(--c2);
    outline-offset:-7px;
    background-color:var(--c1);
    background-image:radial-gradient(rgba(255,255,255,.8) 1.6px,transparent 2.2px);
    background-size:12px 12px;
    box-shadow:0 7px 14px color-mix(in srgb,var(--c2) 32%,transparent);
    transform:rotate(-1.2deg);
}

#category-highlights .all-category-grid > .category-card:nth-child(even){transform:rotate(1.2deg);}

#category-highlights .all-category-grid > .category-card:nth-child(6n+2){--c1:#DCF7E8;--c2:#7FD3A8;--c3:#2E7D5B;}
#category-highlights .all-category-grid > .category-card:nth-child(6n+3){--c1:#DCEFFD;--c2:#86C5F2;--c3:#2F6FA3;}
#category-highlights .all-category-grid > .category-card:nth-child(6n+4){--c1:#EADFFC;--c2:#B79CF0;--c3:#6A4BB5;}
#category-highlights .all-category-grid > .category-card:nth-child(6n+5){--c1:#FFE9D2;--c2:#F7B27F;--c3:#A8581C;}
#category-highlights .all-category-grid > .category-card:nth-child(6n){--c1:#FFF5C8;--c2:#E8CB4D;--c3:#85700E;}

#category-highlights .all-category-grid > .category-card .category-mark{
    width:clamp(40px,11vw,48px);
    height:clamp(40px,11vw,48px);
    border:2.5px solid var(--c2);
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 0 color-mix(in srgb,var(--c2) 45%,transparent),0 8px 12px rgba(90,59,67,.09);
    color:var(--c3);
}

#category-highlights .all-category-grid > .category-card .category-name{
    color:var(--c3);
    font-size:clamp(11px,3vw,13px);
    font-weight:700;
}

#category-highlights .all-category-grid > .category-card::before{
    content:"";
    position:absolute;
    top:5px;
    left:10px;
    color:var(--c2);
    font-size:11px;
    line-height:1;
    pointer-events:none;
}

#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-5px) rotate(0deg) scale(1.05);
    border-color:#fff;
    box-shadow:0 14px 24px color-mix(in srgb,var(--c2) 50%,transparent);
}

#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover .category-mark{
    animation:cute-bounce .6s ease;
    transform:none;
}

#category-highlights .all-category-grid > .category-card.active,
#category-highlights .all-category-grid > .category-card[aria-pressed="true"]{
    outline-style:solid;
    box-shadow:0 0 0 3px var(--c2),0 10px 20px color-mix(in srgb,var(--c2) 45%,transparent);
}

#category-highlights .all-category-grid > .category-card.active::after,
#category-highlights .all-category-grid > .category-card[aria-pressed="true"]::after{
    background:var(--c3);
}

#category-highlights .all-category-grid > .category-card.is-unavailable{
    --c1:#EFEAEA;
    --c2:#C9BDBE;
    --c3:#7D6E70;
    box-shadow:none;
    transform:none;
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .all-category-grid > .category-card:hover .category-mark{animation:none;}
}


/* ===== Poles tambahan card produk: kilap permen, melayang pelan, muncul membal ===== */
#category-highlights .featured-category-grid > .premium-app-card{
    background-image:
        linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 48%),
        radial-gradient(rgba(255,255,255,.8) 2px,transparent 2.6px),
        radial-gradient(circle at 50% 108%,rgba(255,255,255,.9) 0 32%,transparent 33%);
    background-size:100% 100%,15px 15px,100% 100%;
}

#category-highlights .all-category-grid > .category-card{
    background-image:
        linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 50%),
        radial-gradient(rgba(255,255,255,.8) 1.6px,transparent 2.2px);
    background-size:100% 100%,12px 12px;
}

/* nama produk di atas label putih transparan */
#category-highlights .premium-app-card .category-name,
#category-highlights .all-category-grid > .category-card .category-name{
    padding:2px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}

#category-highlights .all-category-grid > .category-card .category-name{padding:2px 8px;}

/* kilau di pojok kanan atas (tidak mengganggu lencana ✓ karena itu ::after) */
#category-highlights .featured-category-grid > .premium-app-card,
#category-highlights .all-category-grid > .category-card{
    animation:
        cute-pop .55s cubic-bezier(.3,1.5,.5,1) both,
        cute-float 4.8s ease-in-out .55s infinite;
}

#category-highlights .featured-category-grid > .premium-app-card:nth-child(2),
#category-highlights .all-category-grid > .category-card:nth-child(2){animation-delay:.07s,.62s;}
#category-highlights .featured-category-grid > .premium-app-card:nth-child(3),
#category-highlights .all-category-grid > .category-card:nth-child(3){animation-delay:.14s,.69s;}
#category-highlights .featured-category-grid > .premium-app-card:nth-child(4),
#category-highlights .all-category-grid > .category-card:nth-child(4){animation-delay:.21s,.76s;}
#category-highlights .all-category-grid > .category-card:nth-child(5){animation-delay:.28s,.83s;}
#category-highlights .all-category-grid > .category-card:nth-child(n+6){animation-delay:.35s,.9s;}

#category-highlights .featured-category-grid > .premium-app-card:nth-child(even),
#category-highlights .all-category-grid > .category-card:nth-child(even){
    animation-direction:normal,reverse;
}

#category-highlights .category-card:hover,
#category-highlights .category-card.is-unavailable{
    animation:cute-pop .55s cubic-bezier(.3,1.5,.5,1) both;
}

#category-highlights .category-card::before{
    animation:cute-twinkle 2.6s ease-in-out infinite;
}

@keyframes cute-pop{
    from{opacity:0;scale:.82}
    to{opacity:1;scale:1}
}

@keyframes cute-float{
    0%,100%{translate:0 0}
    50%{translate:0 -4px}
}

@keyframes cute-twinkle{
    0%,100%{opacity:1;scale:1}
    50%{opacity:.45;scale:.8}
}

/* judul & tombol buka semua */
#category-highlights #category-title::before{
    content:"✿ ";
    color:#F59AB1;
}

#category-highlights .all-categories-trigger{
    border:3px solid #fff;
    border-radius:999px;
    outline:1.5px dashed #F59AB1;
    outline-offset:-7px;
    background:linear-gradient(135deg,#FFE0E6,#FFF1E8);
    box-shadow:0 8px 18px rgba(245,154,177,.3);
    color:#B8465F;
    font-weight:700;
    transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s ease;
}

#category-highlights .all-categories-trigger:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 14px 24px rgba(245,154,177,.4);
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .category-card,
    #category-highlights .category-card::before{
        animation:none !important;
    }
}


/* ===== Pop up Join Reseller ===== */
#reseller-popup.reseller-popup{
    position:fixed;
    inset:0;
    z-index:998;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(90,59,67,.45);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease,visibility .22s ease;
}

#reseller-popup.active{
    opacity:1;
    visibility:visible;
}

#reseller-popup .reseller-box{
    position:relative;
    width:min(400px,100%);
    max-height:min(88vh,760px);
    max-height:min(88dvh,760px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:30px 22px 22px;
    border:1px solid var(--pop-line);
    border-radius:28px;
    background:
        radial-gradient(circle at 50% -10%,#FFD9E2 0,transparent 58%),
        linear-gradient(180deg,#FFF1F4 0,#FFFDFC 150px);
    box-shadow:0 24px 70px rgba(90,59,67,.28);
    color:var(--pop-ink);
    text-align:center;
    transform:translateY(12px) scale(.97);
    transition:transform .3s cubic-bezier(.3,1.4,.5,1);
}

#reseller-popup.active .reseller-box{transform:none;}

#reseller-popup .reseller-close{
    position:absolute;
    top:14px;
    right:14px;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid var(--pop-line);
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 8px rgba(90,59,67,.1);
    color:var(--pop-muted);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    transition:transform .2s ease,background .2s ease,color .2s ease;
}

#reseller-popup .reseller-close:hover{
    transform:rotate(90deg);
    background:var(--pop-soft);
    color:var(--pop-accent-deep);
}

#reseller-popup .reseller-head{margin:0 0 18px;}

#reseller-popup .reseller-badge{
    display:inline-block;
    margin:0 0 12px;
    padding:4px 13px;
    border:2px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#FFE0E6,#FFF1E8);
    box-shadow:0 4px 10px rgba(245,154,177,.3);
    color:#B8465F;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
}

#reseller-popup .reseller-head h2{
    margin:0;
    color:var(--pop-ink);
    font-size:clamp(24px,7vw,28px);
    font-weight:700;
    line-height:1.15;
}

#reseller-popup .reseller-head p{
    margin:8px auto 0;
    max-width:300px;
    color:var(--pop-muted);
    font-size:14px;
    line-height:1.6;
}

#reseller-popup .reseller-list{
    display:grid;
    gap:10px;
    margin:0 0 18px;
    padding:0;
    list-style:none;
    text-align:left;
}

#reseller-popup .reseller-list li{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:3px solid #fff;
    border-radius:20px;
    outline:1.5px dashed rgba(217,124,149,.45);
    outline-offset:-7px;
    background:var(--pop-cream);
    box-shadow:0 6px 14px rgba(245,154,177,.2);
}

#reseller-popup .reseller-ico{
    flex:none;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:2.5px solid #F59AB1;
    border-radius:50%;
    background:#fff;
    box-shadow:0 3px 0 rgba(245,154,177,.4);
    color:#D97C95;
    font-size:16px;
}

#reseller-popup .reseller-text{
    flex:1;
    min-width:0;
    display:grid;
    gap:1px;
}

#reseller-popup .reseller-text strong{
    color:var(--pop-ink);
    font-size:15px;
}

#reseller-popup .reseller-text small{
    color:var(--pop-muted);
    font-size:12.5px;
    line-height:1.4;
}

#reseller-popup .reseller-soon{
    flex:none;
    padding:3px 11px;
    border-radius:999px;
    background:var(--pop-soft);
    color:#A65D72;
    font-size:12px;
    font-style:normal;
    font-weight:700;
}

#reseller-popup .reseller-cta{
    padding:16px 14px 14px;
    border-top:1px dashed rgba(217,124,149,.35);
}

#reseller-popup .reseller-cta p{
    margin:0 0 12px;
    color:var(--pop-muted);
    font-size:13.5px;
    line-height:1.5;
}

#reseller-popup .reseller-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    border-radius:999px;
    background:linear-gradient(135deg,#E892A8,#D97C95);
    box-shadow:0 8px 18px rgba(217,124,149,.34);
    color:#fff;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease;
}

#reseller-popup .reseller-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 22px rgba(217,124,149,.4);
}

#reseller-popup .reseller-alt{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:12px;
    color:var(--pop-muted);
    font-size:13px;
}

#reseller-popup .reseller-alt a{
    color:var(--pop-accent-deep);
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:3px;
}

@media (max-width:600px){
    #reseller-popup.reseller-popup{
        align-items:flex-end;
        padding:0;
    }

    #reseller-popup .reseller-box{
        width:100%;
        padding:28px 16px calc(18px + env(safe-area-inset-bottom));
        border-bottom:0;
        border-radius:24px 24px 0 0;
        transform:translateY(40px);
    }

    #reseller-popup.active .reseller-box{transform:none;}
}

@media (prefers-reduced-motion:reduce){
    #reseller-popup .reseller-box{transition:none;}
}

/* langkah bergabung & daftar keuntungan dinamis (Join Reseller) */
#reseller-popup .reseller-steps{
    margin:0 0 16px;
    padding:12px 14px;
    border:1px solid var(--pop-line);
    border-radius:18px;
    background:#fff;
    text-align:left;
}

#reseller-popup .reseller-steps[hidden]{display:none;}

#reseller-popup .reseller-steps h3{
    margin:0 0 8px;
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#reseller-popup .reseller-steps ol{
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:rs;
}

#reseller-popup .reseller-steps li{
    position:relative;
    counter-increment:rs;
    padding:6px 0 6px 34px;
    color:var(--pop-ink);
    font-size:14px;
    line-height:1.5;
}

#reseller-popup .reseller-steps li::before{
    content:counter(rs);
    position:absolute;
    top:5px;
    left:0;
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:linear-gradient(135deg,#F3A3B8,#D97C95);
    color:#fff;
    font-size:12px;
    font-weight:700;
}

#reseller-popup .reseller-head p[hidden]{display:none;}

/* banner pengumuman & pratinjau maintenance (diatur dari admin → Pengaturan) */
.site-banner{
    margin:0 0 14px;
    padding:10px 16px;
    border:2px dashed rgba(217,124,149,.5);
    border-radius:18px;
    background:linear-gradient(135deg,#FFE0E6,#FFF3EF);
    color:#8F4A5F;
    font-size:14px;
    font-weight:600;
    line-height:1.5;
    text-align:center;
}

.site-banner-preview{
    border-color:rgba(166,117,16,.5);
    background:#FFF6D8;
    color:#7A5A0C;
}


/* ===== Kartu stabil saat produk dipindah ===== */

/* Kartu layanan selalu mulai di baris sendiri dan tidak ikut bergeser oleh kartu lain */
#category-highlights .featured-category-grid > .discord-service-sticker{
    grid-column:1 / span 2;
}

#category-highlights .featured-category-grid > .roblox-service-sticker{
    grid-column:span 2;
}

/* kemiringan berdasarkan nama produk (data-tone), bukan urutan di grid */
#category-highlights .featured-category-grid > .premium-app-card:nth-child(even),
#category-highlights .all-category-grid > .category-card:nth-child(even){
    transform:rotate(-1.4deg);
}

#category-highlights .featured-category-grid > .premium-app-card[data-tone="1"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="3"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="5"],
#category-highlights .all-category-grid > .category-card[data-tone="1"],
#category-highlights .all-category-grid > .category-card[data-tone="3"],
#category-highlights .all-category-grid > .category-card[data-tone="5"]{
    transform:rotate(1.4deg);
}

#category-highlights .featured-category-grid > .premium-app-card[data-tone="0"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="2"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="4"],
#category-highlights .all-category-grid > .category-card[data-tone="0"],
#category-highlights .all-category-grid > .category-card[data-tone="2"],
#category-highlights .all-category-grid > .category-card[data-tone="4"]{
    transform:rotate(-1.4deg);
}

/* warna pastel berdasarkan nama produk */
#category-highlights .all-category-grid > .category-card[data-tone="0"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="0"]{--c1:#FFE0E6;--c2:#F59AB1;--c3:#B8465F;}
#category-highlights .all-category-grid > .category-card[data-tone="1"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="1"]{--c1:#DCF7E8;--c2:#7FD3A8;--c3:#2E7D5B;}
#category-highlights .all-category-grid > .category-card[data-tone="2"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="2"]{--c1:#DCEFFD;--c2:#86C5F2;--c3:#2F6FA3;}
#category-highlights .all-category-grid > .category-card[data-tone="3"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="3"]{--c1:#EADFFC;--c2:#B79CF0;--c3:#6A4BB5;}
#category-highlights .all-category-grid > .category-card[data-tone="4"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="4"]{--c1:#FFE9D2;--c2:#F7B27F;--c3:#A8581C;}
#category-highlights .all-category-grid > .category-card[data-tone="5"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="5"]{--c1:#FFF5C8;--c2:#E8CB4D;--c3:#85700E;}

/* empat aplikasi utama tetap punya warna khasnya */
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="NETFLIX"]{--c1:#FFE0E6;--c2:#F59AB1;--c3:#B8465F;}
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="SPOTIFY"]{--c1:#DCF7E8;--c2:#7FD3A8;--c3:#2E7D5B;}
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="CANVA"]{--c1:#DCEFFD;--c2:#86C5F2;--c3:#2F6FA3;}
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="CHATGPT"]{--c1:#EADFFC;--c2:#B79CF0;--c3:#6A4BB5;}

/* tidak tersedia tetap abu-abu & lurus */
#category-highlights .featured-category-grid > .premium-app-card.is-unavailable,
#category-highlights .all-category-grid > .category-card.is-unavailable{
    --c1:#EFEAEA;--c2:#C9BDBE;--c3:#7D6E70;
    transform:none;
}


/* ===== Kartu layanan (Discord Needs & Roblox): lebih cantik ===== */
#category-highlights .featured-category-grid > .feature-service-sticker{
    --s1:#E3E0FA;
    --s2:#8F86E6;
    --s3:#4F46A8;
    gap:16px;
    min-height:104px;
    padding:16px clamp(14px,3.6vw,22px);
    border:3px solid #fff;
    border-radius:28px;
    outline:2px dashed var(--s2);
    outline-offset:-9px;
    background-color:#fff;
    background-image:
        radial-gradient(circle at 12% 18%,rgba(255,255,255,.9) 0 3px,transparent 4px),
        radial-gradient(circle at 78% 82%,rgba(255,255,255,.7) 0 2px,transparent 3px),
        linear-gradient(120deg,var(--s1) 0,#FFF8F5 62%,#FFFFFF 100%);
    box-shadow:0 12px 24px color-mix(in srgb,var(--s2) 35%,transparent),inset 0 2px 0 rgba(255,255,255,.9);
}

#category-highlights .featured-category-grid > .roblox-service-sticker{
    --s1:#FFD9D2;
    --s2:#F28B7A;
    --s3:#A8412F;
}

/* lingkaran dekoratif di pojok kanan bawah */
#category-highlights .featured-category-grid > .feature-service-sticker::before{
    content:"";
    position:absolute;
    right:-22px;
    bottom:-30px;
    width:104px;
    height:104px;
    border-radius:50%;
    background:radial-gradient(circle,color-mix(in srgb,var(--s2) 30%,#fff) 0,transparent 68%);
    opacity:1;
    animation:none;
    pointer-events:none;
}

#category-highlights .feature-service-sticker .category-mark{
    width:clamp(48px,13vw,60px);
    height:clamp(48px,13vw,60px);
    border:3px solid var(--s2);
    border-radius:20px;
    background:#fff;
    box-shadow:0 5px 0 color-mix(in srgb,var(--s2) 45%,transparent),0 10px 18px rgba(90,59,67,.1);
    color:var(--s3);
    font-size:clamp(22px,6vw,28px);
    font-weight:700;
    transform:rotate(-4deg);
    transition:transform .3s cubic-bezier(.3,1.5,.5,1);
}

#category-highlights .feature-service-sticker .service-sticker-copy{
    gap:6px;
}

#category-highlights .feature-service-sticker .category-name{
    color:var(--s3);
    font-size:clamp(14.5px,4vw,17px);
    font-weight:700;
    letter-spacing:.01em;
}

#category-highlights .feature-service-sticker .robux-note{
    margin-left:6px;
    padding:1px 8px;
    border-radius:999px;
    background:#fff;
    color:var(--s3);
    font-size:10.5px;
    font-weight:600;
    vertical-align:middle;
}

/* daftar layanan sebagai pil kecil */
#category-highlights .feature-service-sticker .service-chips{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

#category-highlights .feature-service-sticker .service-chips > span{
    padding:2px 9px;
    border:1px solid color-mix(in srgb,var(--s2) 55%,transparent);
    border-radius:999px;
    background:rgba(255,255,255,.85);
    color:var(--s3);
    font-size:clamp(10px,2.7vw,11.5px);
    font-weight:600;
    line-height:1.5;
}

#category-highlights .feature-service-sticker .sticker-sparkle{
    top:12px;
    right:16px;
    color:var(--s2);
    font-size:16px;
    transition:transform .4s ease;
}

#category-highlights .featured-category-grid > .feature-service-sticker:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 18px 32px color-mix(in srgb,var(--s2) 50%,transparent),inset 0 2px 0 rgba(255,255,255,.9);
}

#category-highlights .feature-service-sticker:not(.is-unavailable):not(:disabled):hover .category-mark{
    transform:rotate(4deg) scale(1.08);
}

#category-highlights .feature-service-sticker:not(.is-unavailable):not(:disabled):hover .sticker-sparkle{
    transform:rotate(180deg) scale(1.3);
}

#category-highlights .featured-category-grid > .feature-service-sticker.active,
#category-highlights .featured-category-grid > .feature-service-sticker[aria-pressed="true"]{
    outline-style:solid;
    box-shadow:0 0 0 3px var(--s2),0 14px 28px color-mix(in srgb,var(--s2) 45%,transparent);
}

#category-highlights .featured-category-grid > .feature-service-sticker.active::after,
#category-highlights .featured-category-grid > .feature-service-sticker[aria-pressed="true"]::after{
    background:var(--s3);
}

#category-highlights .featured-category-grid > .feature-service-sticker.is-unavailable{
    --s1:#EFEAEA;
    --s2:#C9BDBE;
    --s3:#7D6E70;
    box-shadow:none;
}


/* ============ FILTER KATEGORI HALAMAN UTAMA ============ */
/* tombol sederhana: satu warna pink lembut, tanpa hiasan berlebihan */
#category-highlights .category-filter{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0 0 20px;
    padding:0;
}

#category-highlights .category-filter > .category-chip{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:54px;
    padding:10px 48px;
    border:1.5px solid #F8D3DC;
    border-radius:999px;
    background:#FFF3F6;
    box-shadow:0 2px 0 #F8D3DC;
    color:#B8465F;
    font:inherit;
    font-size:16px;
    font-weight:600;
    letter-spacing:.01em;
    text-align:center;
    cursor:pointer;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,color .2s ease;
}

#category-highlights .category-filter > .category-chip::before{
    content:none;
}

/* panah kecil di kanan */
#category-highlights .category-filter > .category-chip::after{
    content:"";
    position:absolute;
    right:22px;
    top:50%;
    width:7px;
    height:7px;
    margin-top:-6px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    opacity:.45;
    transform:rotate(45deg);
    transition:transform .25s ease,margin-top .25s ease,opacity .2s ease;
}

#category-highlights .chip-count{
    display:none;
}

#category-highlights .category-filter > .category-chip:hover{
    border-color:#F59AB1;
    background:#FFE9EE;
    box-shadow:0 3px 0 #F5B8C6;
    transform:translateY(-1px);
}

#category-highlights .category-filter > .category-chip:hover::after{
    opacity:.8;
}

#category-highlights .category-filter > .category-chip:active{
    transform:translateY(1px);
    box-shadow:0 1px 0 #F8D3DC;
}

#category-highlights .category-filter > .category-chip:focus-visible{
    outline:3px solid rgba(217,124,149,.5);
    outline-offset:2px;
}

#category-highlights .category-filter > .category-chip.is-active{
    border-color:#EE7F9F;
    background:#F59AB1;
    box-shadow:0 2px 0 #E0809A;
    color:#fff;
}

#category-highlights .category-filter > .category-chip.is-active::after{
    opacity:1;
    margin-top:-2px;
    transform:rotate(225deg);
}

#category-highlights .category-empty{
    margin:8px 0 14px;
    padding:18px;
    border:2px dashed #F5B8C6;
    border-radius:18px;
    background:#FFF1F4;
    color:#B8465F;
    text-align:center;
    font-weight:600;
}

#category-highlights .category-empty[hidden]{
    display:none;
}

#category-highlights .filter-hide{
    display:none !important;
}

#category-highlights[data-filter="custom"] .all-categories-trigger{
    display:none;
}

/* sebelum ada tombol yang ditekan, produk tidak ditampilkan */
#category-highlights[data-filter="none"] .featured-category-grid,
#category-highlights[data-filter="none"] .all-categories{
    display:none !important;
}

#category-highlights:not([data-filter="none"]) .featured-category-grid,
#category-highlights:not([data-filter="none"]) .all-categories{
    animation:category-reveal .35s ease both;
}

@keyframes category-reveal{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:none;}
}

@media (prefers-reduced-motion:reduce){
    #category-highlights:not([data-filter="none"]) .featured-category-grid,
    #category-highlights:not([data-filter="none"]) .all-categories{animation:none;}
}

/* hanya tampilkan kartu yang sesuai kategori */
#category-highlights[data-filter="premium"] .featured-category-grid > .feature-service-sticker,
#category-highlights[data-filter="premium"] .all-categories,
#category-highlights[data-filter="discord"] .featured-category-grid > .category-card:not(.discord-service-sticker),
#category-highlights[data-filter="discord"] .all-categories,
#category-highlights[data-filter="roblox"] .featured-category-grid > .category-card:not(.roblox-service-sticker),
#category-highlights[data-filter="roblox"] .all-categories,
#category-highlights[data-filter="other"] .featured-category-grid{
    display:none !important;
}

#category-highlights[data-filter="other"] .all-categories-trigger{
    display:none;
}

#category-highlights[data-filter="discord"] .featured-category-grid > .discord-service-sticker,
#category-highlights[data-filter="roblox"] .featured-category-grid > .roblox-service-sticker{
    grid-column:1 / -1;
}



/* ============ BERANDA: TENTANG + AJAKAN LIHAT PRODUK ============ */
.page-nav{
    margin:0 0 6px;
}

.page-back{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:6px 14px;
    border:2px solid #fff;
    border-radius:999px;
    background:#FFE0E6;
    box-shadow:0 4px 10px rgba(245,154,177,.25);
    color:#B8465F;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease;
}

.page-back:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 14px rgba(245,154,177,.35);
}

.about-points{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
}

.about-points li{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:16px 12px;
    border:3px solid #fff;
    border-radius:24px;
    outline:1.5px dashed #F5B8C6;
    outline-offset:-8px;
    background:#FFF1F4;
    box-shadow:0 8px 18px rgba(245,154,177,.2);
    text-align:center;
}

.about-points li span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    color:#F59AB1;
    font-size:17px;
    box-shadow:0 3px 0 rgba(245,154,177,.35);
}

.about-points strong{
    color:#B8465F;
    font-size:15px;
}

.about-points small{
    color:#7A5A62;
    font-size:12px;
    line-height:1.45;
}

.products-cta{
    text-align:center;
}

.products-cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:52px;
    padding:12px 30px;
    border:3px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#F8A8BD,#EE7F9F);
    box-shadow:0 10px 22px rgba(238,127,159,.4);
    color:#fff;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s ease;
}

.products-cta-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 28px rgba(238,127,159,.5);
}

.products-cta-btn:active{
    transform:scale(.97);
}

@media (max-width:560px){
    .about-points{grid-template-columns:1fr;}
    .about-points li{flex-direction:row;text-align:left;gap:12px;flex-wrap:wrap;padding:12px 14px;}
    .about-points li small{flex-basis:100%;margin-left:50px;margin-top:-6px;}
    .products-cta-btn{width:100%;}
}


/* tombol kategori di beranda berupa tautan */
#category-highlights .category-filter > a.category-chip{
    text-decoration:none;
}

#category-highlights .category-section .home-section-heading,
.home #category-highlights .home-section-heading{
    margin-bottom:12px;
}

/* di halaman produk daftar tombol kategori disembunyikan (hanya ada di beranda) */
#category-highlights .category-filter[hidden]{
    display:none !important;
}


/* ============ POP UP PROMO ============ */
.promo-popup{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(90,59,67,.45);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease,visibility 0s linear .25s;
}

.promo-popup.active{
    opacity:1;
    visibility:visible;
    transition:opacity .25s ease;
}

.promo-box{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:12px;
    width:min(420px,100%);
    max-height:calc(100dvh - 36px);
    padding:22px 20px 18px;
    overflow:auto;
    border:3px solid #fff;
    border-radius:28px;
    outline:1.5px dashed #F5B8C6;
    outline-offset:-10px;
    background:#FFF8F5;
    box-shadow:0 24px 60px rgba(90,59,67,.35);
    text-align:center;
    transform:translateY(16px) scale(.96);
    transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}

.promo-popup.active .promo-box{
    transform:none;
}

.promo-close{
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
    width:36px;
    height:36px;
    border:2px solid #fff;
    border-radius:50%;
    background:#FFE0E6;
    box-shadow:0 3px 8px rgba(245,154,177,.35);
    color:#B8465F;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}

.promo-slide{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.promo-slide[hidden]{
    display:none;
}

.promo-picture{
    width:100%;
    overflow:hidden;
    border:3px solid #fff;
    border-radius:20px;
    background:#fff;
    box-shadow:0 8px 18px rgba(245,154,177,.28);
}

.promo-picture img{
    display:block;
    width:100%;
    max-height:min(46vh,340px);
    object-fit:contain;
}

.promo-title{
    margin:4px 8px 0;
    color:#B8465F;
    font-size:22px;
    font-weight:700;
    line-height:1.25;
}

.promo-text{
    margin:0 4px;
    color:#5A3B43;
    font-size:14px;
    line-height:1.55;
    overflow-wrap:anywhere;
}

.promo-caption{
    display:inline-block;
    padding:5px 14px;
    border:1.5px solid #F59AB1;
    border-radius:999px;
    background:#fff;
    color:#B8465F;
    font-size:12.5px;
    font-weight:700;
}

.promo-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.promo-step{
    width:34px;
    height:34px;
    border:2px solid #fff;
    border-radius:50%;
    background:#FFE0E6;
    color:#B8465F;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}

.promo-dots{
    display:inline-flex;
    gap:6px;
}

.promo-dots i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#F5B8C6;
    transition:transform .2s ease,background .2s ease;
}

.promo-dots i.is-on{
    background:#EE7F9F;
    transform:scale(1.35);
}

.promo-ok{
    align-self:center;
    min-height:44px;
    padding:10px 34px;
    border:3px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#F8A8BD,#EE7F9F);
    box-shadow:0 8px 16px rgba(238,127,159,.4);
    color:#fff;
    font:inherit;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

.promo-ok:active{
    transform:scale(.97);
}

.promo-close:focus-visible,
.promo-ok:focus-visible,
.promo-step:focus-visible{
    outline:3px solid rgba(217,124,149,.6);
    outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
    .promo-popup,
    .promo-box{transition:none;}
}


/* ============ PRODUK PROMO ============ */
.promo-badge{
    position:absolute;
    top:-8px;
    right:-4px;
    z-index:3;
    padding:3px 9px;
    border:2px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#F8A8BD,#EE7F9F);
    box-shadow:0 4px 10px rgba(238,127,159,.45);
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.05em;
    line-height:1.3;
    pointer-events:none;
}

.category-card.is-promo{
    position:relative;
}

.promo-products{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    margin:0;
    padding:0;
    list-style:none;
}

.promo-products li{
    padding:4px 12px;
    border:1.5px solid #F5B8C6;
    border-radius:999px;
    background:#FFE0E6;
    color:#B8465F;
    font-size:12.5px;
    font-weight:600;
}

.promo-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:10px 28px;
    border:3px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#F8A8BD,#EE7F9F);
    box-shadow:0 8px 16px rgba(238,127,159,.4);
    color:#fff;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease;
}

.promo-link:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 20px rgba(238,127,159,.5);
}

.promo-link:active{
    transform:scale(.97);
}


/* harga coret untuk promo */
.price-cell .price-was{
    color:#A8929A;
    font-size:.82em;
    font-weight:500;
    text-decoration:line-through;
    text-decoration-color:#EE7F9F;
}


/* daftar harga promo di pop up */
.promo-deals{
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:6px;
    text-align:left;
}

.promo-deals li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 14px;
    border:2px solid #fff;
    border-radius:16px;
    background:#FFE9EE;
    box-shadow:0 3px 8px rgba(245,154,177,.2);
}

.promo-deals li span{
    min-width:0;
    color:#5A3B43;
    font-size:14px;
    font-weight:600;
    overflow-wrap:anywhere;
}

.promo-deals li strong{
    flex:none;
    padding:3px 12px;
    border-radius:999px;
    background:linear-gradient(135deg,#F8A8BD,#EE7F9F);
    color:#fff;
    font-size:14px;
    font-weight:700;
}


/* ============ KARTU PRODUK: gaya "app tile" lembut ============ */
#category-highlights .all-category-grid{
    gap:12px;
    padding:14px;
    border:1.5px solid #F8D3DC;
    border-radius:26px;
    background:#FFFBFA;
    background-image:none;
}

#category-highlights .featured-category-grid > .premium-app-card,
#category-highlights .all-category-grid > .category-card{
    gap:0;
    padding:16px 8px 12px;
    overflow:visible;
    border:1.5px solid color-mix(in srgb,var(--c2) 38%,#fff);
    border-radius:22px;
    outline:none;
    background:linear-gradient(180deg,var(--c1) 0,var(--c1) 50%,#fff 50%,#fff 100%);
    background-image:linear-gradient(180deg,var(--c1) 0,var(--c1) 50%,#fff 50%,#fff 100%);
    box-shadow:0 6px 16px color-mix(in srgb,var(--c2) 24%,transparent);
    transform:none;
    transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s ease,border-color .2s ease;
}

#category-highlights .featured-category-grid > .premium-app-card:nth-child(even),
#category-highlights .all-category-grid > .category-card:nth-child(even){
    transform:none;
}

#category-highlights .featured-category-grid > .premium-app-card::before,
#category-highlights .all-category-grid > .category-card::before{
    content:none;
}

/* logo: kotak membulat putih yang menimpa batas dua warna */
#category-highlights .featured-category-grid > .premium-app-card .category-mark,
#category-highlights .all-category-grid > .category-card .category-mark{
    width:clamp(48px,14vw,62px);
    height:clamp(48px,14vw,62px);
    margin:0 0 10px;
    overflow:hidden;
    border:3px solid #fff;
    border-radius:18px;
    background:#fff;
    box-shadow:0 6px 14px rgba(90,59,67,.16);
    color:var(--c3);
}

#category-highlights .all-category-grid > .category-card .category-mark{
    width:clamp(42px,12vw,52px);
    height:clamp(42px,12vw,52px);
    border-radius:15px;
}

#category-highlights .featured-category-grid > .premium-app-card .category-name,
#category-highlights .all-category-grid > .category-card .category-name{
    color:#4A3338;
    font-size:clamp(12px,3.3vw,14.5px);
    font-weight:700;
    letter-spacing:0;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable) .category-starting-price{
    margin-top:7px;
    padding:3px 11px;
    border:0;
    border-radius:999px;
    background:var(--c1);
    color:var(--c3);
    font-size:clamp(10px,2.7vw,11.5px);
    font-weight:700;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable) .category-starting-price::before{
    content:none;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover,
#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-5px);
    border-color:var(--c2);
    box-shadow:0 14px 24px color-mix(in srgb,var(--c2) 40%,transparent);
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover .category-mark,
#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover .category-mark{
    animation:none;
    transform:translateY(-2px) scale(1.05);
}

#category-highlights .featured-category-grid > .premium-app-card:active,
#category-highlights .all-category-grid > .category-card:active{
    transform:scale(.97);
}

#category-highlights .featured-category-grid > .premium-app-card.active,
#category-highlights .featured-category-grid > .premium-app-card[aria-pressed="true"],
#category-highlights .all-category-grid > .category-card.active,
#category-highlights .all-category-grid > .category-card[aria-pressed="true"]{
    border-color:var(--c2);
    outline:none;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 55%,#fff),0 10px 20px color-mix(in srgb,var(--c2) 35%,transparent);
}

#category-highlights .featured-category-grid > .premium-app-card.is-unavailable,
#category-highlights .all-category-grid > .category-card.is-unavailable{
    background:linear-gradient(180deg,#EFEAEA 0,#EFEAEA 50%,#fff 50%,#fff 100%);
    box-shadow:none;
}

#category-highlights .featured-category-grid > .premium-app-card.is-unavailable .category-mark img,
#category-highlights .all-category-grid > .category-card.is-unavailable .category-mark img{
    filter:grayscale(1);
    opacity:.6;
}

/* ============ KARTU PRODUK v3: glow pastel + logo bercincin ============ */
#category-highlights .featured-category-grid > .premium-app-card,
#category-highlights .all-category-grid > .category-card{
    position:relative;
    isolation:isolate;
    gap:0;
    padding:20px 8px 14px;
    overflow:hidden;
    border:1.5px solid color-mix(in srgb,var(--c2) 45%,#fff);
    border-radius:26px;
    background:
        radial-gradient(130% 80% at 50% -10%,color-mix(in srgb,var(--c1) 95%,#fff) 0,transparent 72%),
        linear-gradient(180deg,#fff 0,color-mix(in srgb,var(--c1) 38%,#fff) 100%);
    background-image:
        radial-gradient(130% 80% at 50% -10%,color-mix(in srgb,var(--c1) 95%,#fff) 0,transparent 72%),
        linear-gradient(180deg,#fff 0,color-mix(in srgb,var(--c1) 38%,#fff) 100%);
    box-shadow:0 10px 22px color-mix(in srgb,var(--c2) 20%,transparent),inset 0 1px 0 #fff;
}

/* cincin pastel di belakang logo */
#category-highlights .featured-category-grid > .premium-app-card::before,
#category-highlights .all-category-grid > .category-card::before{
    content:"";
    position:absolute;
    top:10px;
    left:50%;
    z-index:-1;
    width:clamp(70px,20vw,88px);
    height:clamp(70px,20vw,88px);
    border-radius:50%;
    background:color-mix(in srgb,var(--c2) 22%,#fff);
    box-shadow:0 0 0 9px color-mix(in srgb,var(--c1) 80%,transparent),0 0 0 18px color-mix(in srgb,var(--c1) 40%,transparent);
    color:transparent;
    font-size:0;
    transform:translateX(-50%);
    transition:transform .45s cubic-bezier(.3,1.5,.5,1);
}

#category-highlights .all-category-grid > .category-card::before{
    top:8px;
    width:clamp(60px,17vw,72px);
    height:clamp(60px,17vw,72px);
}

#category-highlights .featured-category-grid > .premium-app-card .category-mark,
#category-highlights .all-category-grid > .category-card .category-mark{
    position:relative;
    z-index:1;
    width:clamp(50px,14.5vw,64px);
    height:clamp(50px,14.5vw,64px);
    margin:0 0 12px;
    border:3px solid #fff;
    border-radius:20px;
    background:#fff;
    box-shadow:0 8px 16px color-mix(in srgb,var(--c3) 22%,transparent);
}

#category-highlights .all-category-grid > .category-card .category-mark{
    width:clamp(44px,12.5vw,54px);
    height:clamp(44px,12.5vw,54px);
    margin-bottom:10px;
    border-radius:17px;
}

#category-highlights .featured-category-grid > .premium-app-card .category-name,
#category-highlights .all-category-grid > .category-card .category-name{
    color:#4A3338;
    font-size:clamp(12.5px,3.4vw,15px);
    font-weight:700;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable) .category-starting-price{
    margin-top:8px;
    padding:4px 12px;
    border:1.5px solid color-mix(in srgb,var(--c2) 50%,#fff);
    border-radius:999px;
    background:#fff;
    color:var(--c3);
    font-size:clamp(10px,2.7vw,11.5px);
    font-weight:700;
    letter-spacing:.01em;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover,
#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-6px);
    border-color:var(--c2);
    box-shadow:0 18px 30px color-mix(in srgb,var(--c2) 38%,transparent),inset 0 1px 0 #fff;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover::before,
#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover::before{
    transform:translateX(-50%) scale(1.14);
}

#category-highlights .featured-category-grid > .premium-app-card.is-unavailable::before,
#category-highlights .all-category-grid > .category-card.is-unavailable::before{
    background:#ECE6E6;
    box-shadow:0 0 0 9px rgba(236,230,230,.7),0 0 0 18px rgba(236,230,230,.35);
}

#category-highlights .featured-category-grid > .premium-app-card.is-unavailable,
#category-highlights .all-category-grid > .category-card.is-unavailable{
    background:#FBF9F9;
    background-image:none;
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .featured-category-grid > .premium-app-card,
    #category-highlights .all-category-grid > .category-card,
    #category-highlights .featured-category-grid > .premium-app-card::before,
    #category-highlights .all-category-grid > .category-card::before{transition:none;}
}

/* lencana PROMO tetap terlihat di dalam kartu (kartu memakai overflow tersembunyi) */
#category-highlights .category-card .promo-badge{
    top:7px;
    right:7px;
    padding:2px 7px;
    font-size:9px;
}


/* ============ BERANDA: KOTAK KATEGORI ============ */
#category-highlights .category-tiles{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:0 0 20px;
}

#category-highlights .category-tiles > .category-tile{
    --t1:#FFE9EE;
    --t2:#F59AB1;
    --t3:#B8465F;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:112px;
    padding:16px 10px;
    border:1.5px solid color-mix(in srgb,var(--t2) 40%,#fff);
    border-radius:22px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--t1) 70%,#fff),var(--t1));
    box-shadow:0 6px 14px color-mix(in srgb,var(--t2) 18%,transparent);
    color:var(--t3);
    text-align:center;
    text-decoration:none;
    transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s ease,border-color .2s ease;
}

#category-highlights .category-tiles > .category-tile:hover{
    transform:translateY(-4px);
    border-color:var(--t2);
    box-shadow:0 12px 22px color-mix(in srgb,var(--t2) 32%,transparent);
}

#category-highlights .category-tiles > .category-tile:active{
    transform:scale(.97);
}

#category-highlights .category-tiles > .category-tile:focus-visible{
    outline:3px solid color-mix(in srgb,var(--t2) 70%,#fff);
    outline-offset:2px;
}

#category-highlights .category-tile-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 4px 10px color-mix(in srgb,var(--t2) 28%,transparent);
    color:var(--t3);
    transition:transform .3s cubic-bezier(.3,1.6,.5,1);
}

#category-highlights .category-tiles > .category-tile:hover .category-tile-icon{
    transform:scale(1.1) rotate(-4deg);
}

#category-highlights .category-tile-label{
    font-size:clamp(13px,3.6vw,15px);
    font-weight:700;
    line-height:1.25;
    overflow-wrap:anywhere;
}

#category-highlights .category-tiles > .category-tile:nth-child(6n+1){--t1:#FFE9EE;--t2:#F59AB1;--t3:#B8465F;}
#category-highlights .category-tiles > .category-tile:nth-child(6n+2){--t1:#E3F6EC;--t2:#7FD3A8;--t3:#2E7D5B;}
#category-highlights .category-tiles > .category-tile:nth-child(6n+3){--t1:#E4F1FC;--t2:#86C5F2;--t3:#2F6FA3;}
#category-highlights .category-tiles > .category-tile:nth-child(6n+4){--t1:#EEE6FB;--t2:#B79CF0;--t3:#6A4BB5;}
#category-highlights .category-tiles > .category-tile:nth-child(6n+5){--t1:#FFEEDD;--t2:#F7B27F;--t3:#A8581C;}
#category-highlights .category-tiles > .category-tile:nth-child(6n+6){--t1:#FFF7D6;--t2:#E8CB4D;--t3:#85700E;}

@media (max-width:560px){
    #category-highlights .category-tiles{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }
    #category-highlights .category-tiles > .category-tile:last-child:nth-child(odd){
        grid-column:1 / -1;
    }
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .category-tiles > .category-tile,
    #category-highlights .category-tile-icon{transition:none;}
}


/* ============ POP UP PROMO v2: limited offer ============ */
.promo-popup{
    background:radial-gradient(circle at 50% 30%,rgba(255,170,195,.35),rgba(90,59,67,.62) 70%);
    backdrop-filter:blur(3px);
}

.promo-box{
    gap:14px;
    width:min(430px,100%);
    padding:62px 20px 20px;
    border:3px solid #fff;
    border-radius:32px;
    outline:none;
    background:
        radial-gradient(rgba(255,255,255,.75) 1.6px,transparent 2.2px) 0 0/16px 16px,
        linear-gradient(180deg,#FFD3E0 0,#FFE6E8 150px,#FFF8F5 330px);
    box-shadow:0 0 0 6px rgba(255,255,255,.35),0 30px 70px rgba(214,90,130,.45);
    transform:translateY(24px) scale(.9) rotate(-1.5deg);
    transition:transform .55s cubic-bezier(.2,1.5,.4,1);
}

.promo-popup.active .promo-box{
    transform:none;
}

/* pita Limited Offer */
.promo-ribbon{
    position:absolute;
    top:16px;
    left:50%;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 22px;
    overflow:hidden;
    border:2.5px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#F2678F,#F79A7B);
    box-shadow:0 8px 18px rgba(232,98,135,.45);
    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    white-space:nowrap;
    transform:translateX(-50%);
}

.promo-ribbon span{
    font-size:11px;
    animation:promo-twinkle 1.6s ease-in-out infinite;
}

.promo-ribbon span:last-child{
    animation-delay:.8s;
}

.promo-ribbon::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
    transform:translateX(-120%);
    animation:promo-shine 2.8s ease-in-out infinite;
}

@keyframes promo-shine{
    0%,45%{transform:translateX(-120%);}
    80%,100%{transform:translateX(120%);}
}

@keyframes promo-twinkle{
    0%,100%{opacity:1;transform:scale(1) rotate(0);}
    50%{opacity:.55;transform:scale(1.35) rotate(25deg);}
}

.promo-close{
    top:14px;
    right:14px;
    background:#fff;
    border-color:#FFD3E0;
    z-index:3;
}

.promo-slide{
    gap:12px;
}

.promo-picture{
    border:4px solid #fff;
    border-radius:22px;
    box-shadow:0 12px 24px rgba(214,90,130,.3);
    transform:rotate(-1deg);
}

.promo-title{
    margin:2px 6px 0;
    color:#C2335A;
    font-size:clamp(24px,7vw,30px);
    font-weight:700;
    line-height:1.15;
    text-shadow:0 2px 0 #fff;
}

.promo-text{
    color:#6B454E;
    font-size:14.5px;
}

.promo-caption{
    border-color:#F2678F;
    color:#C2335A;
    box-shadow:0 4px 10px rgba(242,103,143,.22);
}

/* hitung mundur */
.promo-countdown{
    width:100%;
    padding:10px 10px 12px;
    border:2px dashed #F5A3BA;
    border-radius:20px;
    background:rgba(255,255,255,.75);
}

.promo-countdown[hidden]{
    display:none;
}

.promo-countdown-label{
    display:block;
    margin-bottom:8px;
    color:#C2335A;
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.promo-countdown-cells{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.promo-countdown-cells div{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:8px 2px 6px;
    border-radius:14px;
    background:linear-gradient(180deg,#F2678F,#E5527D);
    box-shadow:0 6px 12px rgba(229,82,125,.3),inset 0 1px 0 rgba(255,255,255,.35);
    color:#fff;
}

.promo-countdown-cells b{
    font-size:clamp(20px,6vw,25px);
    font-variant-numeric:tabular-nums;
    line-height:1.1;
}

.promo-countdown-cells small{
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.9;
}

/* daftar harga bergaya kupon */
.promo-deals{
    gap:8px;
}

.promo-deals li{
    position:relative;
    padding:11px 14px 11px 18px;
    border:2px solid #fff;
    border-left:6px solid #F2678F;
    border-radius:16px;
    background:#fff;
    box-shadow:0 6px 14px rgba(214,90,130,.16);
}

.promo-deals li span{
    color:#4A3338;
    font-size:15px;
    font-weight:700;
}

.promo-deals li strong{
    padding:5px 14px;
    background:linear-gradient(135deg,#F2678F,#F79A7B);
    box-shadow:0 4px 10px rgba(242,103,143,.35);
    font-size:16px;
}

/* tombol utama berdenyut */
.promo-link{
    width:100%;
    min-height:54px;
    gap:8px;
    background:linear-gradient(135deg,#F2678F,#F79A7B);
    box-shadow:0 10px 22px rgba(232,98,135,.5);
    font-size:16px;
    letter-spacing:.01em;
    animation:promo-pulse 2.2s ease-in-out infinite;
}

.promo-link:hover{
    box-shadow:0 14px 28px rgba(232,98,135,.6);
}

@keyframes promo-pulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.035);}
}

.promo-dots i.is-on{
    background:#F2678F;
}

@media (prefers-reduced-motion:reduce){
    .promo-ribbon span,
    .promo-ribbon::after,
    .promo-link{animation:none;}
    .promo-box{transition:none;}
}

/* =====================================================================
   TEMA v4: jendela imut ala "cute interface" (krem berpetak, outline
   ungu-magenta, title bar pink, tombol pil bergradasi)
   ===================================================================== */
:root{
    --y-line:#5E3B3E;
    --y-line-soft:#EBCFCB;
    --y-pink-1:#F59AB1;
    --y-pink-2:#FFD3DD;
    --y-pink-soft:#FFE9EE;
    --y-cream:#FFF8F5;
    --y-ink:#5A3B43;
}

body{
    background-color:var(--y-cream);
    background-image:
        linear-gradient(rgba(248,200,210,.4) 1px,transparent 1px),
        linear-gradient(90deg,rgba(248,200,210,.4) 1px,transparent 1px);
    background-size:30px 30px;
}

/* ---- jendela utama ---- */
#app .window{
    padding:0 clamp(16px,4vw,32px) 28px;
    overflow:visible;
    border:2.5px solid var(--y-line);
    border-radius:32px;
    background:#fff;
    box-shadow:0 22px 50px rgba(94,59,62,.16),0 4px 0 rgba(94,59,62,.08);
}

#app .window::before{
    display:none;
}

#app .window-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    height:52px;
    margin:0 calc(-1 * clamp(16px,4vw,32px)) 22px;
    padding:0 16px;
    border-bottom:2.5px solid var(--y-line);
    border-radius:29px 29px 0 0;
    background:linear-gradient(180deg,var(--y-pink-1),var(--y-pink-2));
    box-shadow:none;
}

#app .window-header .brand{
    order:1;
    padding:0;
    border:0;
    background:none;
    color:var(--y-ink);
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
}

#app .window-dot{
    position:static;
    order:2;
    display:flex;
    align-items:center;
    gap:7px;
}

#app .window-dot span,
#app .window-dot span:nth-child(2),
#app .window-dot span:nth-child(3){
    position:relative;
    display:block;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 0 rgba(94,59,62,.25);
}

#app .window-dot span::before{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--y-pink-1);
    font-size:13px;
    font-weight:700;
    line-height:1;
}

#app .window-dot span:nth-child(1)::before{content:"–";}
#app .window-dot span:nth-child(2)::before{content:"□";font-size:11px;}
#app .window-dot span:nth-child(3)::before{content:"×";font-size:15px;}

@media (max-width:600px){
    #app .window{
        padding:0 14px 22px;
        border-radius:28px;
    }
    #app .window-header{
        height:46px;
        margin:0 -14px 16px;
        border-radius:25px 25px 0 0;
    }
    #app .window-dot span{width:21px;height:21px;}
}

/* ---- judul bagian ---- */
.home-section-heading h2,
.home .order h2,
.home-section-heading .section-kicker,
.contact-heading .section-kicker{
    color:var(--y-ink);
}

.home-section{
    border-top:2px dashed var(--y-line-soft);
}

.home .order{
    border-top:2px dashed var(--y-line-soft);
}

/* ---- tombol utama: pil pink bergradasi + outline ungu ---- */
.explore-btn,
.hero-section .explore-btn,
.products-cta-btn,
.promo-link,
.package-select-btn,
.home-catalog-actions .payment-btn,
.home-catalog .package-select-btn,
.confirm-payment-btn,
.popup-ok{
    border:2px solid var(--y-line);
    border-radius:999px;
    background:linear-gradient(180deg,var(--y-pink-2),var(--y-pink-1));
    box-shadow:0 4px 0 rgba(94,59,62,.35);
    color:var(--y-ink);
    font-weight:700;
    text-shadow:none;
}

.explore-btn:hover,
.hero-section .explore-btn:hover,
.products-cta-btn:hover,
.promo-link:hover,
.package-select-btn:hover,
.home-catalog-actions .payment-btn:hover,
.confirm-payment-btn:hover,
.popup-ok:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 0 rgba(94,59,62,.4);
}

.explore-btn:active,
.hero-section .explore-btn:active,
.products-cta-btn:active,
.promo-link:active,
.package-select-btn:active,
.home-catalog-actions .payment-btn:active,
.confirm-payment-btn:active,
.popup-ok:active{
    transform:translateY(2px);
    box-shadow:0 1px 0 rgba(94,59,62,.35);
}

/* tombol sekunder: putih berbingkai ungu */
.explore-secondary,
.hero-section .explore-secondary,
.page-back,
.home .contact-links .order-btn{
    border:2px solid var(--y-line);
    border-radius:999px;
    background:#fff;
    box-shadow:0 3px 0 rgba(94,59,62,.22);
    color:var(--y-ink);
    font-weight:700;
}

.explore-secondary:hover,
.hero-section .explore-secondary:hover,
.page-back:hover,
.home .contact-links .order-btn:hover{
    background:var(--y-pink-soft);
}

/* ---- kotak kategori di beranda: seragam pink, outline ungu ---- */
#category-highlights .category-tiles > .category-tile,
#category-highlights .category-tiles > .category-tile:nth-child(n){
    --t1:var(--y-pink-soft);
    --t2:var(--y-pink-1);
    --t3:var(--y-ink);
    border:2px solid var(--y-line);
    border-radius:24px;
    background:linear-gradient(180deg,#fff,var(--y-pink-soft));
    box-shadow:0 4px 0 rgba(94,59,62,.22);
}

#category-highlights .category-tiles > .category-tile:hover{
    border-color:var(--y-line);
    box-shadow:0 7px 0 rgba(94,59,62,.28);
}

#category-highlights .category-tile-icon{
    border:2px solid var(--y-line);
    border-radius:50%;
    background:linear-gradient(180deg,var(--y-pink-2),var(--y-pink-1));
    box-shadow:none;
    color:#fff;
}

/* ---- kartu produk ---- */
#category-highlights .featured-category-grid > .premium-app-card,
#category-highlights .all-category-grid > .category-card{
    border:2px solid var(--y-line);
    border-radius:24px;
    box-shadow:0 4px 0 rgba(94,59,62,.2);
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover,
#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover{
    border-color:var(--y-line);
    box-shadow:0 8px 0 rgba(94,59,62,.26);
}

#category-highlights .all-category-grid{
    border:2px solid var(--y-line-soft);
    border-radius:26px;
    background:var(--y-pink-soft);
}

#category-highlights .all-categories-trigger{
    border:2px solid var(--y-line);
    background:linear-gradient(180deg,var(--y-pink-2),var(--y-pink-1));
    box-shadow:0 4px 0 rgba(94,59,62,.3);
    outline:none;
    color:var(--y-ink);
}

/* ---- pop up: jendela putih, outline ungu, header pink ---- */
.home-catalog-box,
.product-popup .popup-box,
.payment-popup .payment-box{
    border:2.5px solid var(--y-line);
    border-radius:30px;
    box-shadow:0 26px 60px rgba(74,47,50,.28);
}

.popup-head,
.checkout-header{
    border-bottom:2px solid var(--y-line);
    background:linear-gradient(180deg,var(--y-pink-1),var(--y-pink-2));
    color:var(--y-ink);
}

.catalog-close,
.popup-close,
.payment-close{
    border:2px solid var(--y-line);
    background:#fff;
    color:var(--y-line);
}

/* ---- pop up promo ---- */
.promo-box{
    border:2.5px solid var(--y-line);
}

.promo-ribbon{
    border:2px solid var(--y-line);
    background:linear-gradient(180deg,var(--y-pink-2),var(--y-pink-1));
    box-shadow:0 4px 0 rgba(94,59,62,.35);
    color:var(--y-ink);
}

.promo-close{
    border-color:var(--y-line);
    color:var(--y-line);
}

.promo-deals li{
    border:2px solid var(--y-line);
    border-left-width:6px;
    box-shadow:0 3px 0 rgba(94,59,62,.2);
}

.promo-deals li strong,
.promo-countdown-cells div{
    border:1.5px solid var(--y-line);
    background:linear-gradient(180deg,var(--y-pink-2),var(--y-pink-1));
    box-shadow:none;
    color:var(--y-ink);
}

.promo-countdown{
    border-color:var(--y-line-soft);
}

.promo-countdown-label,
.promo-title{
    color:var(--y-ink);
}

.promo-caption{
    border-color:var(--y-line);
    color:var(--y-ink);
}

/* ---- lainnya ---- */
.site-banner{
    border:2px solid var(--y-line);
    border-radius:18px;
    background:var(--y-pink-soft);
    color:var(--y-ink);
}

.footer{
    color:var(--y-ink);
}


/* ============ KOTAK KATEGORI v2: lebih hidup, tiap kategori punya warna ============ */
#category-highlights .category-tiles{
    gap:14px;
}

#category-highlights .category-tiles > .category-tile{
    --k1:#FFE0E6;
    --k2:#FFC3D0;
    --k3:#F59AB1;
    --k4:#B8465F;
    position:relative;
    isolation:isolate;
    min-height:150px;
    gap:8px;
    padding:18px 10px 14px;
    overflow:hidden;
    border:2px solid var(--y-line);
    border-radius:26px;
    background:
        radial-gradient(rgba(255,255,255,.75) 1.6px,transparent 2.2px) 0 0/14px 14px,
        linear-gradient(165deg,var(--k1) 0,var(--k2) 100%);
    box-shadow:0 5px 0 color-mix(in srgb,var(--y-line) 30%,transparent);
    color:var(--k4);
}

/* gelembung besar di pojok bawah */
#category-highlights .category-tiles > .category-tile::before{
    content:"";
    position:absolute;
    right:-22px;
    bottom:-26px;
    z-index:-1;
    width:84px;
    height:84px;
    border-radius:50%;
    background:rgba(255,255,255,.55);
}

/* kilau di pojok atas */
#category-highlights .category-tiles > .category-tile::after{
    content:"✦";
    position:absolute;
    top:9px;
    right:12px;
    color:var(--k3);
    font-size:15px;
    line-height:1;
    transition:transform .5s ease;
}

#category-highlights .category-tiles > .category-tile:hover{
    transform:translateY(-5px);
    box-shadow:0 9px 0 color-mix(in srgb,var(--y-line) 32%,transparent);
}

#category-highlights .category-tiles > .category-tile:hover::after{
    transform:rotate(180deg) scale(1.3);
}

#category-highlights .category-tile-icon{
    width:58px;
    height:58px;
    border:2px solid var(--y-line);
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 0 color-mix(in srgb,var(--k3) 60%,transparent);
    color:var(--k4);
}

#category-highlights .category-tile-icon svg{
    width:28px;
    height:28px;
}

#category-highlights .category-tile-label{
    color:var(--y-ink);
    font-size:clamp(14px,3.8vw,16.5px);
    font-weight:700;
}

#category-highlights .category-tile-go{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:3px 11px;
    border:1.5px solid var(--y-line);
    border-radius:999px;
    background:#fff;
    color:var(--k4);
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
}

#category-highlights .category-tile-go i{
    font-style:normal;
    transition:transform .25s ease;
}

#category-highlights .category-tiles > .category-tile:hover .category-tile-go i{
    transform:translateX(3px);
}

#category-highlights .category-tiles > .category-tile[data-kind="all"]{--k1:#FFE3EA;--k2:#FFC9D6;--k3:#F59AB1;--k4:#B8465F;}
#category-highlights .category-tiles > .category-tile[data-kind="premium"]{--k1:#FFE0E6;--k2:#FFC3D0;--k3:#F59AB1;--k4:#B8465F;}
#category-highlights .category-tiles > .category-tile[data-kind="discord"]{--k1:#E8E6FC;--k2:#CFCBF6;--k3:#9C95E6;--k4:#4F46A8;}
#category-highlights .category-tiles > .category-tile[data-kind="roblox"]{--k1:#FFE6DD;--k2:#FFCDBD;--k3:#F2A08A;--k4:#B04A33;}
#category-highlights .category-tiles > .category-tile[data-kind="other"]{--k1:#FFF4CC;--k2:#FFE79B;--k3:#E8C94E;--k4:#85700E;}
#category-highlights .category-tiles > .category-tile[data-kind="custom"]{--k1:#DDF4E8;--k2:#BCE8D2;--k3:#7FD3A8;--k4:#2E7D5B;}

@media (max-width:560px){
    #category-highlights .category-tiles > .category-tile{
        min-height:138px;
        padding:16px 8px 12px;
    }
    #category-highlights .category-tile-icon{
        width:52px;
        height:52px;
    }
}
:root{

--pink:#F3A9B8;
--baby:#F8C8D2;
--cream:#FFF8F5;
--soft:#FFF1EA;
--yellow:#F6D98B;
--brown:#5A3B43;
--dusty:#D97C95;
--mauve:#B98293;

}



*{

box-sizing:border-box;

}



body{

margin:0;

min-height:100vh;

font-family:'Fredoka',sans-serif;

color:var(--brown);

background:

radial-gradient(
circle,
var(--pink) 1.5px,
transparent 1.5px
);

background-size:45px 45px;

background-color:var(--cream);

}



#app{

min-height:100vh;

padding:25px 15px;

}



/* WINDOW */

.window{

max-width:700px;

margin:auto;

background:#FFF8F5;

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

border-radius:45px;

padding:25px;

box-shadow:

0 25px 60px rgba(90,59,67,.12);

}





.window-header{

height:55px;

background:var(--soft);

border-radius:40px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:35px;

position:relative;

}



.window-dot{

position:absolute;

left:20px;

display:flex;

gap:8px;

}



.window-dot span{

width:13px;

height:13px;

background:var(--pink);

border-radius:50%;

}



.brand{

background:var(--baby);

padding:10px 25px;

border-radius:50px;

font-weight:600;

}





/* HOME */

.home{

text-align:center;

}



.logo-title{

font-family:'Sacramento',cursive;

font-size:100px;

line-height:1;

margin:20px 0 5px;

color:var(--dusty);

}



.tagline{

font-size:18px;

margin-bottom:35px;

}





.menu{

display:flex;

flex-direction:column;

gap:16px;

}



.bubble{

border:none;

width:100%;

padding:21px 26px;

border-radius:50px;

font-family:'Fredoka';

font-size:20px;

font-weight:600;

color:var(--brown);

display:flex;

justify-content:space-between;

cursor:pointer;

transition:.3s;

}



.bubble:hover{

transform:translateY(-7px);

box-shadow:

0 15px 30px rgba(217,124,149,.25);

}



.bubble.pink{

background:var(--baby);

}



.bubble.yellow{

background:var(--yellow);

}





/* ORDER */

.order{

margin-top:45px;

}



.order h2{

font-family:'Sacramento',cursive;

font-size:60px;

color:var(--dusty);

text-align:center;

}



.order-btn{

display:block;

text-align:center;

padding:16px;

border-radius:50px;

margin:12px 0;

font-weight:600;

}



.whatsapp{

background:var(--pink);

color:white;

}



.discord{

background:var(--brown);

color:white;

}



.telegram{

background:var(--yellow);

color:var(--brown);

}





.footer{

text-align:center;

font-size:13px;

color:var(--mauve);

}





/* PRICE LIST */


.price-title{

font-family:'Sacramento',cursive;

font-size:85px;

text-align:center;

color:var(--dusty);

margin:15px 0 0;

}



.price-subtitle{

text-align:center;

margin-bottom:30px;

}





.product-grid{

    columns:2;

    column-gap:30px;

    width:100%;

}





.product-card{

 break-inside:avoid;

 margin-bottom:30px;

background:#FFF8F5;

border-radius:30px;

padding:20px;

border:2px solid var(--baby);

box-shadow:

0 12px 25px rgba(90,59,67,.07);

}



.product-card:nth-child(2n){

border-color:var(--yellow);

}



.product-card:nth-child(3n){

border-color:var(--pink);

}




.product-card h3{

margin:0 0 15px;

padding:11px;

border-radius:30px;

text-align:center;

font-size:22px;

background:var(--baby);

}



.product-card:nth-child(2n) h3{

background:var(--yellow);

}



.price-category{

background:var(--soft);

border-radius:20px;

padding:7px;

font-size:12px;

text-align:center;

font-weight:700;

margin:10px 0;

}



.price-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 5px;

border-bottom:1px dashed var(--baby);

font-size:15px;

}



.price-row:last-child{

border-bottom:none;

}



.price-row span{

font-weight:700;

color:var(--dusty);

}




.back{

display:inline-block;

background:var(--baby);

padding:10px 22px;

border-radius:30px;

cursor:pointer;

}





@media(min-width:850px){


.product-grid{

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

}


}





@media(max-width:500px){


.window{

padding:18px;

border-radius:35px;

}



.logo-title{

font-size:75px;

}



.price-title{

font-size:70px;

}



.bubble{

font-size:18px;

padding:18px 22px;

}



.product-card h3{

font-size:20px;

}


}

/* ================================
   KAWAII CATALOG ENHANCEMENT
================================ */


.price-title{

position:relative;

}



.price-title::before{

content:"✦";

display:block;

font-family:'Fredoka';

font-size:18px;

color:var(--pink);

margin-bottom:20px;

letter-spacing:8px;

}




.price-title::after{

content:"✦";

position:absolute;

right:20%;

top:20px;

font-size:25px;

color:var(--pink);

}





.product-card{

position:relative;

overflow:visible;

}



.product-card::before{

content:"✦";

position:absolute;

top:12px;

right:15px;

font-size:22px;

color:var(--pink);

opacity:.6;

}





.product-card h3{

letter-spacing:1px;

font-size:24px;

}



.price-category{

border:

1px dashed var(--pink);

}





.price-row{

font-size:16px;

padding:13px 8px;

}



.price-row span{

font-size:17px;

}

.price-row{

gap:8px;

}

.price-row > span:first-child{

flex:1;

}

.price-row > span:nth-child(2){

white-space:nowrap;

}

.package-select-btn{

flex-shrink:0;

padding:6px 10px;

border:1px solid var(--pink);

border-radius:999px;

background:var(--soft);

color:var(--brown);

font-family:'Fredoka',sans-serif;

font-size:12px;

font-weight:600;

cursor:pointer;

}

.package-select-btn:hover,
.package-select-btn.selected{

background:var(--baby);

}

.package-select-btn:focus-visible{

outline:2px solid var(--brown);

outline-offset:2px;

}

.selection-status{

text-align:center;

font-size:14px;

}


.product-card:hover{

transform:translateY(-8px);

}





/* little catalog decoration */




@media(max-width:500px){


.price-title::after{

right:5%;

}


}


/* FIX PRODUCT GRID */

.product-grid{

columns:2;

column-gap:20px;

}


.product-card{

break-inside:avoid;

margin-bottom:20px;

}



.product-card{

height:fit-content;

}



.product-card{

width:100%;

}



@media(max-width:700px){

.product-grid{
    columns:1;
}

}



/* remove uneven empty spaces */

.product-grid{

grid-auto-flow:row dense;

}


@media(min-width:700px){

.product-card{

margin-bottom:0;

}

}


.product-info-btn{

    margin-top:18px;

    padding:10px 22px;

    border-radius:999px;

    border:1px solid #F3A9B8;

    background:#FFF1EA;

    color:#5A3B43;

    font-family:'Fredoka',sans-serif;

    font-size:14px;

    cursor:pointer;

    box-shadow:
    0 5px 15px rgba(217,124,149,.15);

    transition:.3s ease;

    position:relative;

    z-index:5;

}


/* PRODUCT INFO BUTTON */

.product-info-btn{

    margin-top:14px;

    padding:7px 16px;

    border-radius:999px;

    border:1px solid #5A3B43;

    background:#FFF1EA;

    color:#5A3B43;

    font-family:'Fredoka',sans-serif;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    box-shadow:
    0 8px 10px rgba(217,124,149,.15);

    transition:.3s ease;

}


.product-info-btn:hover{

    background:#F8C8D2;

    transform:translateY(-2px);

}



/* =================================
   BIE PRODUCT INFO POPUP FINAL
================================= */


.product-popup{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(90,59,67,.18);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:9999;

}



.product-popup.active{

    opacity:1;

    visibility:visible;

}



.popup-box{

    position:relative;

    width:min(380px,85%);

    max-height:75vh;

    overflow-y:auto;

    padding:35px 28px;

    background:#FFF8F5;

    border-radius:32px;
    
    clip-path: inset(0 round 32px);

    border:2px solid #F8C8D2;

    box-shadow:
    0 25px 60px rgba(90,59,67,.22);

    animation:
    popupShow .35s ease;

}



.popup-box{

    overflow-y:auto;

}


.popup-box::-webkit-scrollbar{

    width: 10px;

}


.popup-box::-webkit-scrollbar-track{

    background:transparent;

}


.popup-box::-webkit-scrollbar-thumb{

    background:#F3A9B8;

    border-radius:999px;

    border:2px solid #FFF8F5;

}




@keyframes popupShow{

    from{

        opacity:0;

        transform:translateY(20px) scale(.95);

    }


    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}





/* tape atas */

.popup-box::before{

    content:"";

    position:absolute;

    top:-15px;

    left:50%;

    transform:translateX(-50%);


    width:95px;

    height:28px;


    background:#F8C8D2;


    border-radius:8px;

}




.popup-box h2{

    text-align:center;


    margin:

    10px 0 20px;


    color:#D97C95;


    font-size:26px;

}




.popup-section{

    padding:12px 5px;


    margin-bottom:14px;


    border-bottom:

    1px dashed #F3A9B8;

}




.popup-section h4{

    display:inline-block;


    padding:6px 14px;


    margin-bottom:8px;


    border-radius:999px;


    background:#F8C8D2;


    color:#5A3B43;


    font-size:13px;

}




.popup-section p,
.popup-section li{


    font-size:13px;


    line-height:1.6;


    color:#5A3B43;

}




.popup-section ul{

    padding-left:18px;

}





.popup-section li::marker{

    color:#D97C95;

}




.popup-close{

    position:absolute;


    top:15px;

    right:15px;


    width:30px;

    height:30px;


    border:none;


    border-radius:50%;


    background:#F3A9B8;


    color:white;


    cursor:pointer;


}




/* scrollbar pink */

.popup-box::-webkit-scrollbar{

    width:6px;

}


.popup-box::-webkit-scrollbar-thumb{

    background:#F3A9B8;

    border-radius:20px;

}


.popup-box::-webkit-scrollbar-track{

    background:#FFF1EA;

}

/* =========================
   PAYMENT SYSTEM
========================= */


.payment-btn{

    margin-top:15px;

    padding:8px 18px;

    border-radius:999px;

    border:1px solid #F3A9B8;

    background:#FFF1EA;

    color:#5A3B43;

    font-family:'Fredoka',sans-serif;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    box-shadow:
    0 5px 15px rgba(217,124,149,.15);

    transition:.3s ease;

}



.payment-btn:hover{

    background:#F3A9B8;

    color:white;

    transform:translateY(-2px);

}





.payment-popup{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(90,59,67,.18);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.3s ease;

    z-index:10000;
    

}



.payment-popup.active{

    opacity:1;
    visibility:visible;

    pointer-events:auto;

}





.payment-box{

    width:min(360px,85%);

    padding:30px;

    background:#FFF8F5;

    border-radius:30px;

    border:2px solid #F8C8D2;

    text-align:center;

    box-shadow:

    0 20px 50px rgba(90,59,67,.2);

    animation:paymentShow .3s ease;

}




@keyframes paymentShow{

    from{

        opacity:0;

        transform:translateY(20px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}





.payment-close{

    position:absolute;

    margin-left:270px;

    margin-top:-15px;

    border:none;

    width:30px;

    height:30px;

    border-radius:50%;

    background:#F3A9B8;

    color:white;

    cursor:pointer;

}




.qris-image{

    width:220px;

    max-width:100%;

    margin:20px auto;

    padding:12px;

    background:white;

    border-radius:20px;

}




.payment-text{

    font-size:13px;

    color:#5A3B43;

}





.payment-confirm-btn{

    margin-top:15px;

    padding:10px 20px;

    border:none;

    border-radius:999px;

    background:#F3A9B8;

    color:white;

    cursor:pointer;

}





.payment-help{

    margin-top:18px;

    font-size:12px;

}


.payment-help a{

    color:#D97C95;

    text-decoration:none;

}

.payment-btn{

display:block;

margin:35px auto 10px;

padding:18px 55px;

font-size:18px;

font-weight:700;

border:1.5px solid #5A3B43;

border-radius:999px;

cursor:pointer;

background:#B8E6C1;

color:#5A3B43;

box-shadow:0 10px 25px rgba(184,230,193,0.45);

transition:0.3s ease;

}

/* =========================
   PAYMENT POPUP
========================= */

.payment-popup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.35);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:0.3s ease;

z-index:999;

}



.payment-popup.active{

opacity:1;

visibility:visible;

}



.payment-box{

position:relative;

width:min(360px, calc(100vw - 30px));

max-height:calc(100vh - 30px);

overflow-y:auto;

padding:30px;

background:#FFF8F5;

border:2px solid #B98293;

border-radius:25px;

box-shadow:0 15px 35px rgba(90,59,67,0.25);

text-align:center;

}



.payment-box h2{

margin-bottom:20px;

color:#5A3B43;

}



.payment-close{

position:absolute;

right:15px;

top:15px;

width:30px;

height:30px;

border:none;

border-radius:50%;

background:#F3A9B8;

color:#5A3B43;

font-size:18px;

cursor:pointer;

}



.qris-image{

width:190px;

height:190px;

object-fit:contain;

padding:10px;

background:white;

border-radius:18px;

margin:10px auto 20px;

}



.payment-box p{

color:#5A3B43;

font-size:14px;

}

/* Polished Bie storefront interactions */

:root{
    --ease-store:cubic-bezier(.2,.75,.25,1);
    --shadow-soft:0 14px 34px rgba(90,59,67,.1);
    --shadow-hover:0 20px 42px rgba(90,59,67,.16);
}

html{
    scroll-behavior:smooth;
}

body{
    background-attachment:fixed;
}

.window{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border-width:2px;
    box-shadow:
        0 28px 70px rgba(90,59,67,.14),
        inset 0 1px 0 rgba(255,255,255,.9);
    animation:window-arrive .7s var(--ease-store) both;
}

.window::before{
    position:absolute;
    z-index:-1;
    top:-130px;
    right:-100px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(248,200,210,.34),transparent 70%);
    content:"";
    pointer-events:none;
}

.window-header{
    box-shadow:0 6px 18px rgba(90,59,67,.05);
}

.window-dot span{
    box-shadow:inset 0 1px 2px rgba(90,59,67,.1);
}

.window-dot span:nth-child(2){
    background:var(--yellow);
}

.window-dot span:nth-child(3){
    background:var(--mauve);
}

.brand{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
    letter-spacing:.2px;
}

.mascot-wrap{
    position:relative;
    display:grid;
    width:104px;
    height:104px;
    margin:10px auto 12px;
    place-items:center;
    animation:mascot-float 4.5s ease-in-out infinite;
}

.mascot-wrap::before{
    position:absolute;
    inset:0;
    border:1px solid rgba(217,124,149,.24);
    border-radius:50%;
    background:linear-gradient(145deg,#fff 5%,var(--soft) 95%);
    box-shadow:0 12px 28px rgba(90,59,67,.12);
    content:"";
}

.mascot{
    position:relative;
    width:88px;
    height:88px;
    border:3px solid #fff;
    border-radius:50%;
    object-fit:cover;
    object-position:50% 42%;
    box-shadow:0 4px 14px rgba(90,59,67,.15);
}

.logo-title{
    text-shadow:0 5px 18px rgba(217,124,149,.14);
}

.tagline{
    margin-top:8px;
    color:var(--mauve);
    letter-spacing:.35px;
}

.bubble,
.order-btn,
.back,
.product-card,
.product-info-btn,
.package-select-btn,
.payment-btn,
.confirm-payment-btn,
.payment-issue a,
.popup-close,
.payment-close{
    transition:
        transform .24s var(--ease-store),
        box-shadow .24s var(--ease-store),
        background-color .24s ease,
        color .24s ease,
        border-color .24s ease;
}

.bubble{
    position:relative;
    overflow:hidden;
    box-shadow:0 5px 0 rgba(90,59,67,.045);
    animation:soft-rise .55s var(--ease-store) both;
}

.bubble:nth-child(1){animation-delay:.06s}
.bubble:nth-child(2){animation-delay:.12s}
.bubble:nth-child(3){animation-delay:.18s}
.bubble:nth-child(4){animation-delay:.24s}

.bubble::after{
    position:absolute;
    top:-80%;
    left:-45%;
    width:30%;
    height:260%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    content:"";
    transform:rotate(25deg);
    transition:left .55s var(--ease-store);
    pointer-events:none;
}

.bubble:hover{
    transform:translateY(-3px);
    box-shadow:0 11px 22px rgba(90,59,67,.12);
}

.bubble:hover::after{
    left:120%;
}

.bubble:active,
.order-btn:active,
.payment-btn:active,
.confirm-payment-btn:active{
    transform:translateY(1px) scale(.99);
}

.order{
    margin-top:38px;
}

.order h2{
    margin-bottom:18px;
    text-shadow:0 4px 14px rgba(217,124,149,.12);
}

.order-btn{
    border:1px solid rgba(90,59,67,.07);
    box-shadow:0 5px 14px rgba(90,59,67,.08);
    text-decoration:none;
}

.order-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(90,59,67,.16);
}

.footer{
    margin:28px 0 4px;
    padding-top:18px;
    border-top:1px dashed rgba(185,130,147,.35);
}

.price-title{
    text-shadow:0 5px 18px rgba(217,124,149,.12);
}

.price-subtitle{
    color:var(--mauve);
    letter-spacing:.25px;
}

.product-card{
    margin-bottom:22px;
    padding:22px;
    background:linear-gradient(150deg,#fffdfb 0%,#fff8f5 100%);
    box-shadow:var(--shadow-soft);
    transition:
        transform .28s var(--ease-store),
        box-shadow .28s var(--ease-store),
        border-color .28s ease;
    animation:soft-rise .5s var(--ease-store) both;
}

.product-card:nth-child(2){animation-delay:.05s}
.product-card:nth-child(3){animation-delay:.1s}
.product-card:nth-child(4){animation-delay:.15s}

.product-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

.product-card h3{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}

.price-category{
    padding:8px 10px;
    color:var(--brown);
    letter-spacing:.25px;
}

.price-row{
    border-bottom-color:rgba(243,169,184,.45);
}

.price-row:hover{
    border-radius:12px;
    background:rgba(255,241,234,.62);
}

.price-row span:nth-child(2){
    color:var(--brown);
}

.package-select-btn{
    box-shadow:0 3px 8px rgba(90,59,67,.07);
}

.package-select-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 7px 14px rgba(90,59,67,.12);
}

.package-select-btn.selected{
    border-color:var(--dusty);
    box-shadow:0 4px 12px rgba(217,124,149,.2);
}

.product-info-btn{
    box-shadow:0 4px 12px rgba(90,59,67,.08);
}

.product-info-btn:hover{
    box-shadow:0 8px 18px rgba(90,59,67,.13);
}

.selection-status{
    width:fit-content;
    max-width:100%;
    margin:24px auto 8px;
    padding:10px 16px;
    border:1px solid rgba(243,169,184,.4);
    border-radius:18px;
    background:rgba(255,241,234,.72);
    color:var(--brown);
    line-height:1.6;
    text-align:left;
}

.selection-status.selection-warning{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-color:rgba(183,83,99,.28);
    background:#FFF0F0;
    box-shadow:0 5px 14px rgba(160,74,88,.08);
    color:#9B4D5A;
    font-weight:600;
    text-align:center;
}

.selection-status.selection-warning::before{
    flex:0 0 auto;
    color:#B85C6B;
    content:"⚠";
    font-size:15px;
    line-height:1;
}

.payment-btn{
    box-shadow:0 9px 22px rgba(184,230,193,.42);
}

.payment-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(184,230,193,.58);
}

.product-popup,
.payment-popup{
    transition:
        opacity .24s ease,
        visibility .24s ease,
        backdrop-filter .24s ease;
}

.product-popup:not(.active) .popup-box{
    animation:none;
}

.product-popup.active .popup-box,
.payment-popup.active .payment-box{
    animation:popup-arrive .36s var(--ease-store) both;
}

.popup-box,
.payment-box{
    border-color:rgba(217,124,149,.6);
    box-shadow:0 28px 70px rgba(61,37,44,.24);
}

.popup-section{
    padding:14px 8px;
}

.popup-section h4{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}

.popup-close:hover,
.payment-close:hover{
    transform:rotate(8deg) scale(1.08);
    box-shadow:0 5px 12px rgba(90,59,67,.16);
}

.qris-image{
    box-shadow:0 7px 20px rgba(90,59,67,.1);
}

.product-popup .popup-box{
    width:min(460px, calc(100% - 32px));
    max-height:min(82vh, 760px);
    padding:34px 30px 26px;
    border-radius:28px;
}

.product-popup .popup-box h2{
    margin:4px 34px 22px;
    color:#5A3B43;
    font-size:25px;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.product-popup .popup-section{
    margin:0 0 17px;
    padding:0 0 16px;
    border-bottom:1px solid rgba(217,124,149,.18);
}

.product-popup .popup-section:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
}

.product-popup .popup-section h4{
    margin:0 0 11px;
    padding:6px 12px;
    background:rgba(248,200,210,.5);
    color:#8B5364;
    font-size:12px;
    font-weight:600;
    letter-spacing:.025em;
}

.product-popup .popup-section p,
.product-popup .popup-section li{
    color:#5A3B43;
    font-size:13px;
    line-height:1.6;
}

.product-popup #popup-description{
    margin:0;
}

.product-popup #popup-details,
.product-popup #popup-rules{
    display:grid;
    gap:9px;
    margin:0;
    padding:0;
    list-style:none;
}

.product-popup .popup-package-item{
    padding:11px 13px;
    border:1px solid rgba(217,124,149,.16);
    border-radius:15px;
    background:rgba(255,241,234,.58);
}

.product-popup .popup-package-item strong{
    display:block;
    margin-bottom:3px;
    color:#5A3B43;
    font-size:13px;
    font-weight:650;
}

.product-popup .popup-package-item p{
    margin:0;
    color:#80636B;
    font-weight:400;
}

.product-popup #popup-rules{
    gap:5px;
    padding-left:16px;
    list-style:disc;
}

.product-popup #popup-rules li::marker{
    color:#D97C95;
}

.product-popup #popup-warranty{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0;
}

.product-popup .popup-warranty-tag{
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:4px 10px;
    border:1px solid rgba(217,124,149,.18);
    border-radius:999px;
    background:#FFF1EA;
    color:#76515E;
    font-size:11px;
    font-weight:600;
}

@media(max-width:600px){
    .product-popup .popup-box{
        width:min(460px, calc(100% - 28px));
        max-height:84vh;
        padding:30px 20px 22px;
        border-radius:24px;
    }

    .product-popup .popup-box h2{
        margin-bottom:18px;
        font-size:22px;
    }

    .product-popup .popup-section{
        margin-bottom:14px;
        padding-bottom:13px;
    }

    .product-popup .popup-package-item{
        padding:10px 11px;
    }
}

.product-popup{
    background:rgba(76,49,58,.28);
    backdrop-filter:blur(10px);
}

.product-popup .popup-box{
    width:min(500px, calc(100% - 32px));
    padding:58px 32px 28px;
    border:1px solid rgba(217,124,149,.3);
    border-radius:32px;
    background:
        radial-gradient(ellipse at 50% 0, rgba(248,200,210,.38), transparent 40%),
        #FFFAF7;
    box-shadow:
        0 30px 80px rgba(61,37,44,.25),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.product-popup .popup-box::before{
    content:"A LITTLE NOTE FROM BIE";
    top:23px;
    left:50%;
    width:auto;
    height:auto;
    transform:translateX(-50%);
    border-radius:0;
    background:transparent;
    color:#B98293;
    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
    white-space:nowrap;
}

.product-popup .popup-box h2{
    position:relative;
    margin:0 22px 27px;
    padding:2px 0 20px;
    border-bottom:1px solid rgba(217,124,149,.2);
    color:#5A3B43;
    font-size:27px;
    font-weight:700;
    letter-spacing:.025em;
    line-height:1.2;
    text-align:center;
}

.product-popup .popup-box h2::after{
    position:absolute;
    bottom:-4px;
    left:calc(50% - 18px);
    width:36px;
    height:7px;
    border-radius:999px;
    background:#F3A9B8;
    content:"";
}

.product-popup .popup-close{
    top:17px;
    right:17px;
    width:32px;
    height:32px;
    border:1px solid rgba(217,124,149,.18);
    background:rgba(255,248,245,.86);
    color:#8B5364;
    font-size:20px;
    line-height:1;
    box-shadow:0 3px 10px rgba(90,59,67,.07);
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.product-popup .popup-close:hover{
    background:#F8C8D2;
    box-shadow:0 6px 15px rgba(90,59,67,.13);
    transform:rotate(8deg);
}

.product-popup .popup-section{
    margin-bottom:18px;
    padding:0 0 17px;
    border-bottom:1px solid rgba(217,124,149,.14);
}

.product-popup .popup-section h4{
    display:table;
    margin:0 auto 12px;
    padding:6px 12px;
    border:1px solid rgba(217,124,149,.13);
    background:rgba(248,200,210,.27);
    color:#8B5364;
    font-size:10px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.product-popup #popup-description{
    margin:0;
    padding:13px 16px;
    border-left:2px solid rgba(217,124,149,.48);
    border-radius:0 15px 15px 0;
    background:rgba(255,241,234,.68);
    color:#6F535C;
    font-size:13px;
    line-height:1.7;
}

.product-popup #popup-details{
    gap:0;
    padding:3px 3px 3px 15px;
    border-left:1px solid rgba(217,124,149,.25);
}

.product-popup .popup-package-item{
    position:relative;
    padding:11px 8px 12px 13px;
    border:0;
    border-bottom:1px dashed rgba(185,130,147,.2);
    border-radius:0;
    background:transparent;
}

.product-popup .popup-package-item:last-child{
    border-bottom:0;
}

.product-popup .popup-package-item::before{
    position:absolute;
    top:16px;
    left:-19px;
    width:8px;
    height:8px;
    border:2px solid #FFF9F6;
    border-radius:50%;
    background:#D97C95;
    content:"";
}

.product-popup .popup-package-item strong{
    margin-bottom:3px;
    color:#5A3B43;
    font-size:13px;
    font-weight:650;
    line-height:1.4;
}

.product-popup .popup-package-item p{
    margin:0;
    color:#80636B;
    font-size:12px;
    line-height:1.6;
}

.product-popup #popup-rules{
    gap:6px;
    padding:11px 14px 11px 29px;
    border-radius:15px;
    background:rgba(255,241,234,.58);
}

.product-popup #popup-rules li{
    color:#80636B;
    font-size:12px;
    line-height:1.55;
}

.product-popup #popup-warranty{
    gap:7px;
    align-items:center;
    min-height:50px;
    padding:9px 13px;
    border:1px solid rgba(217,124,149,.13);
    border-radius:16px;
    background:linear-gradient(120deg, rgba(248,200,210,.2), rgba(255,241,234,.75));
}

.product-popup .popup-warranty-tag{
    min-height:27px;
    padding:4px 11px;
    border-color:rgba(217,124,149,.18);
    background:#FFF9F6;
    color:#76515E;
    font-size:11px;
}

@media(max-width:600px){
    .product-popup .popup-box{
        width:calc(100% - 28px);
        max-height:86vh;
        padding:53px 20px 23px;
        border-radius:27px;
    }

    .product-popup .popup-box::before{
        top:21px;
        font-size:8px;
    }

    .product-popup .popup-box h2{
        margin:0 12px 23px;
        padding-bottom:17px;
        font-size:24px;
    }

    .product-popup .popup-close{
        top:15px;
        right:15px;
        width:30px;
        height:30px;
    }

    .product-popup .popup-section{
        margin-bottom:15px;
        padding-bottom:14px;
    }

    .product-popup #popup-description{
        padding:11px 13px;
        font-size:12px;
    }

    .product-popup .popup-package-item{
        padding-top:9px;
        padding-bottom:10px;
    }
}

.confirm-payment-btn:hover{
    box-shadow:0 8px 18px rgba(90,59,67,.14);
}

.payment-issue a:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 15px rgba(90,59,67,.14);
}

.bubble:focus-visible,
.order-btn:focus-visible,
.back:focus-visible,
.product-info-btn:focus-visible,
.payment-btn:focus-visible,
.confirm-payment-btn:focus-visible,
.payment-issue a:focus-visible,
.popup-close:focus-visible,
.payment-close:focus-visible{
    outline:3px solid var(--brown);
    outline-offset:3px;
}

@keyframes window-arrive{
    from{opacity:0;transform:translateY(12px) scale(.99)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes soft-rise{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}

@keyframes popup-arrive{
    from{opacity:0;transform:translateY(12px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes mascot-float{
    0%,100%{transform:translateY(0) rotate(-1deg)}
    50%{transform:translateY(-5px) rotate(1deg)}
}

@media(max-width:500px){
    .window{
        padding:16px;
    }

    .window-header{
        margin-bottom:26px;
    }

    .mascot-wrap{
        width:90px;
        height:90px;
        margin-top:6px;
    }

    .mascot{
        width:76px;
        height:76px;
    }

    .product-card{
        padding:18px;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

.payment-order-summary{

padding:10px;

border-radius:16px;

background:var(--soft);

font-weight:600;

}

.payment-verification-note{

font-size:12px !important;

line-height:1.5;

}


.confirm-payment-btn{

margin-top:20px;

padding:13px 35px;

border:none;

border-radius:999px;

background:#B8E6C1;

border:2px solid #5A3B43;

color:#5A3B43;

font-weight:bold;

cursor:pointer;

transition:0.3s ease;

}



.confirm-payment-btn:hover{

transform:translateY(-3px);

}



.payment-issue{

margin-top:20px;

font-size:13px;

}



.payment-issue a{
display:inline-block;
margin-top:5px;

padding:8px 20px;

border-radius:999px;

background:#F3A9B8;

color:#5A3B43;

text-decoration:none;

font-weight:bold;

}

/* Premium, scoped checkout popup */
.payment-popup{
    padding:16px;
    background:rgba(90,59,67,.38);
    backdrop-filter:blur(9px);
}

.payment-popup .payment-box{
    position:relative;
    width:min(440px, 100%);
    max-height:min(92vh, 900px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:28px clamp(18px, 5vw, 30px) 24px;
    border:1px solid #F3A9B8;
    border-radius:28px;
    background:#FFF8F5;
    color:#5A3B43;
    box-shadow:0 24px 70px rgba(90,59,67,.24);
    scrollbar-color:#F3A9B8 #FFF1EA;
}

.payment-popup .payment-close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:1;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    margin:0;
    border:1px solid #F8C8D2;
    background:#FFF1EA;
    color:#5A3B43;
    font-size:22px;
    transition:background .2s ease, transform .2s ease;
}

.payment-popup .payment-close:hover{
    background:#F8C8D2;
    transform:rotate(8deg);
}

.checkout-header{
    margin:0 0 20px;
    padding:2px 24px 16px;
    border-bottom:1px solid #F8C8D2;
}

.checkout-eyebrow{
    display:block;
    margin-bottom:5px;
    color:#D97C95;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.checkout-header h2{
    margin:0 !important;
    color:#5A3B43;
    font-size:23px;
    letter-spacing:.08em;
}

.checkout-header p{
    margin:7px 0 0;
    color:#8C6971 !important;
    font-size:12px !important;
}

.checkout-section{
    margin:12px 0;
    padding:15px 16px;
    border:1px solid #F8C8D2;
    border-radius:18px;
    background:#FFF1EA;
    text-align:left;
}

.checkout-section h3{
    margin:0 0 10px;
    color:#D97C95;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
}

.payment-order-summary{
    display:grid;
    gap:4px;
    padding:0;
    border-radius:0;
    background:transparent;
    font-weight:400;
}

.checkout-product{
    color:#5A3B43;
    font-size:16px;
    font-weight:800;
}

.checkout-order-package,
.checkout-order-duration{
    color:#5A3B43;
    font-size:13px;
    line-height:1.45;
}

.checkout-total-section{
    border-color:#F3A9B8;
    background:#F8C8D2;
    text-align:center;
}

.checkout-total-section h3{
    margin-bottom:5px;
}

.checkout-total{
    color:#5A3B43;
    font-size:clamp(28px, 8vw, 36px);
    font-weight:800;
    letter-spacing:-.03em;
    line-height:1.15;
}

.checkout-warranty{
    display:grid;
    gap:5px;
    color:#5A3B43;
    font-size:13px;
    line-height:1.55;
}

.checkout-warranty strong{
    color:#5A3B43;
    font-size:14px;
    font-weight:800;
}

.checkout-payment-section{
    text-align:center;
}

.payment-popup .qris-image{
    display:block;
    width:min(210px, 68vw);
    height:auto;
    aspect-ratio:1;
    object-fit:contain;
    margin:4px auto 10px;
    padding:10px;
    border:1px solid #F8C8D2;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(90,59,67,.09);
}

.checkout-instruction{
    margin:0 !important;
    color:#5A3B43 !important;
    font-size:13px !important;
}

.checkout-steps{
    display:grid;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:checkout-step;
}

.checkout-steps li{
    display:flex;
    align-items:center;
    gap:10px;
    color:#5A3B43;
    font-size:13px;
    line-height:1.4;
    counter-increment:checkout-step;
}

.checkout-steps li::before{
    display:grid;
    flex:0 0 24px;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#F8C8D2;
    color:#5A3B43;
    content:counter(checkout-step);
    font-size:11px;
    font-weight:800;
}

.payment-popup .confirm-payment-btn{
    width:100%;
    margin:10px 0 0;
    padding:14px 18px;
    border:1px solid #D97C95;
    border-radius:999px;
    background:#D97C95;
    color:#fff;
    font-size:14px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(217,124,149,.23);
    transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.payment-popup .confirm-payment-btn:hover{
    background:#C96C86;
    box-shadow:0 11px 22px rgba(217,124,149,.3);
    transform:translateY(-2px);
}

.payment-popup .payment-verification-note,
.payment-popup .payment-issue{
    color:#5A3B43 !important;
    font-size:11px !important;
    line-height:1.5;
}

.payment-popup .payment-issue{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #F8C8D2;
}

/* Homepage sections */
.hero-section{
    padding:0 0 34px;
}

.hero-section .mascot-wrap{
    width:124px;
    height:124px;
    margin:4px auto 14px;
}

.hero-section .mascot{
    width:104px;
    height:104px;
}

.hero-section .logo-title{
    margin:10px 0 4px;
    font-size:clamp(68px, 14vw, 96px);
}

.hero-section .tagline{
    margin:8px 0 22px;
    color:#5A3B43;
    font-size:16px;
    font-weight:500;
    letter-spacing:.04em;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.explore-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:190px;
    padding:13px 22px;
    border:1px solid #D97C95;
    border-radius:999px;
    background:#D97C95;
    box-shadow:0 8px 20px rgba(217,124,149,.2);
    color:#fff;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.explore-secondary{
    display:inline-flex;
    min-height:44px;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border:1px solid #F8C8D2;
    border-radius:999px;
    background:#FFF8F5;
    color:#5A3B43;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:background .2s ease, border-color .2s ease;
}

.explore-secondary:hover{
    border-color:#D97C95;
    background:#FFF1EA;
}

.explore-btn:hover{
    transform:translateY(-2px);
    background:#C96C86;
    box-shadow:0 12px 24px rgba(217,124,149,.28);
}

.home-section{
    margin:10px 0 30px;
    padding:24px 0 0;
    border-top:1px solid #F8C8D2;
    scroll-margin-top:22px;
}

.home-section-heading{
    margin:0 0 18px;
    text-align:center;
}

.section-kicker{
    display:block;
    margin-bottom:5px;
    color:#D97C95;
    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.home-section-heading h2{
    margin:0;
    color:#5A3B43;
    font-size:25px;
    font-weight:700;
}

.home-section-heading p{
    margin:7px 0 0;
    color:#5A3B43;
    font-size:13px;
    line-height:1.5;
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}

.category-card{
    display:flex;
    min-width:0;
    min-height:104px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;
    padding:11px 12px;
    border:1px solid #F8C8D2;
    border-radius:17px;
    background:#FFF8F5;
    box-shadow:0 4px 12px rgba(90,59,67,.035);
    color:#5A3B43;
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.category-card:nth-child(even){
    background:#FFF8F5;
}

.category-card:hover{
    transform:translateY(-3px);
    border-color:#D97C95;
    box-shadow:0 12px 26px rgba(90,59,67,.1);
}

.category-card.active{
    border-color:#D97C95;
    background:#FFF1EA;
    box-shadow:0 7px 18px rgba(217,124,149,.13);
}

.category-mark{
    display:grid;
    width:28px;
    height:28px;
    place-items:center;
    border-radius:10px;
    background:#FCE8ED;
    color:#5A3B43;
    font-size:13px;
    font-weight:800;
}

.category-card:nth-child(even) .category-mark{
    background:#FFF1EA;
}

.category-name{
    margin-top:8px;
    font-size:14px;
    font-weight:700;
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.trust-item{
    display:flex;
    min-height:116px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:13px 8px;
    border:1px solid #F8C8D2;
    border-radius:18px;
    background:#FFF1EA;
    text-align:center;
}

.trust-icon{
    color:#D97C95;
    font-size:19px;
    line-height:1;
}

.trust-item strong{
    color:#5A3B43;
    font-size:14px;
}

.trust-item > span:last-child{
    color:#5A3B43;
    font-size:10px;
    line-height:1.35;
}

.home-product-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    columns:unset;
    gap:12px;
    align-items:start;
}

.home-product-grid .product-card{
    min-width:0;
    margin:0;
    scroll-margin-top:22px;
}

.home-product-grid .product-card h3{
    overflow-wrap:anywhere;
}

.home-catalog-actions{
    display:grid;
    justify-items:center;
    gap:12px;
    margin-top:15px;
}

.home-catalog-actions[hidden]{
    display:none;
}

.home-catalog-actions .selection-status{
    width:100%;
}

.home-catalog-actions .payment-btn{
    width:min(100%,360px);
}

.more-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}

.secondary-action{
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:12px;
    border:1px solid #F8C8D2;
    border-radius:14px;
    background:#FFF8F5;
    color:#5A3B43;
    font:600 12px 'Fredoka',sans-serif;
    text-align:left;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
}

.secondary-action:hover{
    border-color:#D97C95;
    background:#FFF1EA;
}

.home .order{
    margin-top:26px;
    padding:19px 0 0;
    border-top:1px solid #F8C8D2;
}

.contact-heading{
    text-align:center;
}

.contact-heading .section-kicker{
    margin-bottom:4px;
    font-size:10px;
    letter-spacing:.08em;
    text-transform:none;
}

.home .order h2{
    margin:0;
    color:#5A3B43;
    font-family:'Fredoka',sans-serif;
    font-size:19px;
    font-weight:600;
    text-shadow:none;
}

.contact-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:12px;
}

.home .contact-links .order-btn{
    display:inline-flex;
    min-height:36px;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:8px 15px;
    border:1px solid #F8C8D2;
    border-radius:999px;
    background:#FFF8F5;
    box-shadow:none;
    color:#5A3B43;
    font-size:12px;
    font-weight:600;
}

.home .contact-links .order-btn:hover{
    transform:translateY(-1px);
    border-color:#D97C95;
    background:#FFF1EA;
    box-shadow:none;
}

.catalog-empty-state{
    margin:0;
    padding:22px 15px;
    border:1px dashed #F3A9B8;
    border-radius:17px;
    background:rgba(255,241,234,.6);
    color:#5A3B43;
    font-size:13px;
    line-height:1.5;
    text-align:center;
}

@media(max-width:600px){
    .hero-section{
        padding-bottom:24px;
    }

    .hero-section .mascot-wrap{
        width:106px;
        height:106px;
    }

    .hero-section .mascot{
        width:90px;
        height:90px;
    }

    .hero-section .logo-title{
        font-size:clamp(40px, 12.5vw, 75px);
    }

    .hero-section .tagline{
        font-size:14px;
    }

    .home-section{
        margin-bottom:24px;
        padding-top:20px;
    }

    .home-section-heading h2{
        font-size:22px;
    }

    .category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .category-card{
        min-height:96px;
        padding:10px;
    }

    .trust-grid{
        gap:7px;
    }

    .trust-item{
        min-height:108px;
        padding:10px 5px;
    }

    .trust-item strong{
        font-size:13px;
    }

    .trust-item > span:last-child{
        font-size:9px;
    }

    .home-product-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .more-actions{
        grid-template-columns:1fr;
    }

    .secondary-action{
        padding:11px 14px;
        font-size:13px;
    }
}

@media(prefers-reduced-motion:reduce){
    .category-card,
    .explore-btn,
    .explore-secondary,
    .secondary-action{
        transition:none;
    }
}

/* Boutique homepage refinement */
body{
    background:
        radial-gradient(ellipse at 10% 8%,rgba(248,200,210,.3),transparent 26rem),
        radial-gradient(ellipse at 92% 34%,rgba(255,241,234,.92),transparent 25rem),
        #FFF8F5;
}

.window{
    max-width:760px;
    border:1px solid rgba(217,124,149,.3);
    border-radius:34px;
    padding:20px clamp(16px,4vw,32px) 28px;
    box-shadow:0 28px 70px rgba(90,59,67,.1);
}

.window-header{
    height:44px;
    margin-bottom:20px;
    background:transparent;
    border-radius:0;
    box-shadow:none;
}

.window-dot{
    display:none;
}

.brand{
    padding:8px 16px;
    border:1px solid rgba(217,124,149,.2);
    background:rgba(248,200,210,.45);
    color:#5A3B43;
    font-size:12px;
    letter-spacing:.08em;
}

.hero-section{
    position:relative;
    display:grid;
    grid-template-columns:minmax(150px,.78fr) minmax(0,1.22fr);
    align-items:center;
    gap:clamp(14px,4vw,34px);
    min-height:300px;
    margin:4px 0 10px;
    padding:28px clamp(18px,4vw,34px);
    overflow:hidden;
    border:1px solid rgba(217,124,149,.2);
    border-radius:28px 28px 28px 12px;
    background:
        radial-gradient(circle at 13% 12%,rgba(255,255,255,.9) 0 2px,transparent 3px),
        radial-gradient(circle at 84% 82%,rgba(248,200,210,.42) 0 2px,transparent 3px),
        #FFF1EA;
    background-size:34px 34px,46px 46px,auto;
    text-align:left;
}

.hero-mascot-frame{
    position:relative;
    display:grid;
    min-width:0;
    aspect-ratio:1;
    place-items:center;
    border:1px solid rgba(217,124,149,.22);
    border-radius:48% 52% 46% 54% / 53% 46% 54% 47%;
    background:rgba(255,248,245,.78);
    box-shadow:0 16px 38px rgba(90,59,67,.09);
    transform:rotate(-3deg);
}

.hero-mascot-frame::before,
.hero-mascot-frame::after{
    position:absolute;
    border:1px solid rgba(217,124,149,.25);
    border-radius:50%;
    content:"";
}

.hero-mascot-frame::before{
    inset:9px -7px -7px 9px;
}

.hero-mascot-frame::after{
    inset:17px;
    border-style:dashed;
    opacity:.7;
}

.hero-mascot-frame .mascot-wrap{
    width:84%;
    height:84%;
    margin:0;
    animation:none;
}

.hero-mascot-frame .mascot-wrap::before{
    display:none;
}

.hero-mascot-frame .mascot{
    width:100%;
    height:100%;
    border:4px solid #FFF8F5;
    box-shadow:0 7px 18px rgba(90,59,67,.13);
}

.hero-copy{
    position:relative;
    z-index:1;
}

.hero-overline{
    display:block;
    margin-bottom:8px;
    color:#B98293;
    font-size:10px;
    font-weight:700;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.hero-section .logo-title{
    max-width:390px;
    margin:0;
    color:#5A3B43;
    font-family:'Fredoka',sans-serif;
    font-size:clamp(32px,5vw,45px);
    font-weight:600;
    letter-spacing:-.045em;
    line-height:1.06;
    text-shadow:none;
}

.hero-section .tagline{
    margin:10px 0 22px;
    color:#8B6570;
    font-family:Georgia,serif;
    font-size:15px;
    font-style:italic;
    letter-spacing:.01em;
}

.hero-actions{
    justify-content:flex-start;
    gap:8px;
}

.hero-section .explore-btn{
    min-width:0;
    padding:11px 17px;
    box-shadow:0 6px 15px rgba(217,124,149,.18);
    font-size:13px;
}

.hero-section .explore-secondary{
    min-height:40px;
    padding:9px 13px;
    border-color:rgba(217,124,149,.25);
    background:rgba(255,248,245,.66);
    font-size:12px;
}

.hero-spark{
    position:absolute;
    z-index:1;
    color:#D97C95;
    opacity:.65;
    pointer-events:none;
}

.hero-spark-one{
    top:20px;
    left:45%;
    font-size:15px;
}

.hero-spark-two{
    right:24px;
    bottom:22px;
    font-size:20px;
}

.home-section{
    margin:26px 0 0;
    padding:0;
    border-top:0;
}

.category-section{
    margin-top:33px;
}

.home-section-heading{
    margin-bottom:14px;
}

.home-section-heading .section-kicker{
    margin-bottom:4px;
    font-family:Georgia,serif;
    font-size:11px;
    font-style:italic;
    font-weight:400;
    letter-spacing:.04em;
    text-transform:none;
}

.home-section-heading h2{
    font-size:21px;
    font-weight:600;
    letter-spacing:-.025em;
}

.category-grid{
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:8px;
}

.category-card,
.category-card:nth-child(even){
    min-height:86px;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px 5px;
    border:1px solid rgba(217,124,149,.2);
    border-radius:16px 16px 16px 7px;
    background:rgba(255,248,245,.72);
    box-shadow:none;
    text-align:center;
}

.category-card:hover{
    transform:translateY(-2px);
    background:#FFF1EA;
    box-shadow:0 7px 16px rgba(90,59,67,.07);
}

.category-card.active{
    border-color:#D97C95;
    background:#FFF1EA;
    box-shadow:inset 0 0 0 1px rgba(217,124,149,.16);
}

.category-mark,
.category-card:nth-child(even) .category-mark{
    width:27px;
    height:27px;
    border-radius:50%;
    background:#F8C8D2;
    color:#5A3B43;
    font-family:Georgia,serif;
    font-size:14px;
    font-weight:600;
}

.category-mark-note{font-size:17px !important}
.category-mark-star{font-size:17px !important}
.category-mark-chat{font-size:20px !important}
.category-mark-gem{font-size:18px !important}

.category-name{
    margin:0;
    color:#5A3B43;
    font-size:11px;
    font-weight:600;
    letter-spacing:.01em;
}

.home-catalog{
    margin-top:30px;
    padding:18px;
    border:1px solid rgba(217,124,149,.19);
    border-radius:22px;
    background:rgba(255,241,234,.45);
}

.home-catalog .home-section-heading{
    margin-bottom:12px;
}

.home-catalog .home-section-heading h2{
    font-size:19px;
}

.catalog-empty-state{
    padding:16px 12px;
    border:0;
    background:rgba(255,248,245,.65);
    color:#8B6570;
    font-family:Georgia,serif;
    font-size:13px;
    font-style:italic;
}

.trust-section{
    margin-top:22px;
}

.trust-strip{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px 18px;
    padding:13px 10px;
    border-top:1px solid rgba(217,124,149,.2);
    border-bottom:1px solid rgba(217,124,149,.2);
    color:#8B6570;
    font-family:Georgia,serif;
    font-size:11px;
}

.trust-strip span{
    white-space:nowrap;
}

.trust-strip span::first-letter{
    color:#D97C95;
}

.more-section{
    margin-top:23px;
    padding-top:15px;
    border-top:1px solid rgba(217,124,149,.18);
}

.more-section .home-section-heading{
    margin-bottom:10px;
    text-align:left;
}

.more-section .home-section-heading h2{
    font-size:16px;
}

.more-section .home-section-heading .section-kicker{
    display:none;
}

.more-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.secondary-action{
    padding:10px 11px;
    border-color:rgba(217,124,149,.18);
    border-radius:12px;
    background:rgba(255,248,245,.58);
    color:#8B6570;
    font-size:11px;
}

.secondary-action:hover{
    background:#FFF1EA;
}

.home .order{
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid rgba(217,124,149,.18);
}

.contact-heading{
    text-align:left;
}

.home .order h2{
    font-size:15px;
    font-weight:600;
}

.contact-links{
    justify-content:flex-start;
    margin-top:9px;
}

.home .contact-links .order-btn{
    min-height:32px;
    padding:7px 12px;
    color:#8B6570;
    font-size:11px;
}

.home .footer{
    margin-top:20px;
    padding-top:13px;
    font-family:Georgia,serif;
    font-size:11px;
    font-style:italic;
}

@media(max-width:600px){
    .window{
        padding:13px 13px 22px;
        border-radius:27px;
    }

    .window-header{
        height:37px;
        margin-bottom:13px;
    }

    .brand{
        font-size:10px;
    }

    .hero-section{
        grid-template-columns:112px minmax(0,1fr);
        gap:15px;
        min-height:0;
        padding:20px 15px;
        border-radius:22px 22px 22px 9px;
    }

    .hero-section .logo-title{
        font-size:clamp(25px,7vw,35px);
    }

    .hero-section .tagline{
        margin:7px 0 13px;
        font-size:12px;
    }

    .hero-actions{
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }

    .hero-section .explore-btn{
        padding:9px 13px;
        font-size:11px;
    }

    .hero-section .explore-secondary{
        min-height:32px;
        padding:6px 11px;
        font-size:10px;
    }

    .hero-spark-one{
        top:12px;
        left:39%;
    }

    .hero-spark-two{
        right:13px;
        bottom:10px;
        font-size:15px;
    }

    .home-section-heading h2{
        font-size:19px;
    }

    .category-section{
        margin-top:24px;
    }

    .category-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:7px;
    }

    .category-card,
    .category-card:nth-child(even){
        min-height:73px;
        gap:5px;
        padding:8px 3px;
        border-radius:13px 13px 13px 6px;
    }

    .category-mark,
    .category-card:nth-child(even) .category-mark{
        width:23px;
        height:23px;
        font-size:12px;
    }

    .category-name{
        font-size:10px;
    }

    .home-catalog{
        margin-top:22px;
        padding:13px 10px;
        border-radius:18px;
    }

    .trust-strip{
        gap:7px 10px;
        padding:11px 4px;
        font-size:10px;
    }

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

    .secondary-action{
        justify-content:center;
        padding:9px 5px;
        font-size:10px;
        text-align:center;
    }
}

@media(max-width:360px){
    .hero-section{
        grid-template-columns:88px minmax(0,1fr);
        gap:12px;
        padding:17px 11px;
    }

    .hero-section .logo-title{
        font-size:25px;
    }

    .hero-section .tagline{
        font-size:11px;
    }
}

@media(prefers-reduced-motion:reduce){
    .hero-mascot-frame,
    .category-card,
    .secondary-action{
        transition:none;
    }
}

/* Homepage category icons and compact package presentation */
.category-card,
.category-card:nth-child(even){
    min-height:82px;
    gap:6px;
    padding:9px 5px;
    border-radius:15px;
}

.category-mark,
.category-card:nth-child(even) .category-mark{
    display:grid;
    flex:0 0 30px;
    width:30px;
    height:30px;
    overflow:hidden;
    place-items:center;
    border:1px solid rgba(185,130,147,.18);
    border-radius:50%;
    background:#FFF1EA;
    color:#5A3B43;
    font-family:Georgia,serif;
    font-size:14px;
    font-weight:600;
}

.category-mark img{
    display:block;
    width:21px;
    height:21px;
    object-fit:contain;
}

.category-name{
    margin:0;
    font-size:11px;
    line-height:1.15;
}

.home-product-grid{
    gap:8px;
}

.home-product-grid .product-card{
    margin:0;
    padding:13px 15px 11px;
    border-width:1px;
    border-radius:17px;
    box-shadow:0 5px 15px rgba(90,59,67,.05);
}

.home-product-grid .product-card h3{
    margin:0 0 6px;
    padding:0 0 6px;
    border-bottom:1px solid rgba(185,130,147,.14);
    font-size:18px;
    letter-spacing:.02em;
}

.home-product-grid .package-group{
    margin:0;
}

.home-product-grid .package-group + .package-group{
    margin-top:5px;
    padding-top:4px;
    border-top:1px solid rgba(185,130,147,.12);
}

.home-product-grid .price-category{
    margin:0 0 1px;
    padding:2px 0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#8B6570;
    font-size:11px;
    font-weight:600;
    letter-spacing:.015em;
    text-align:left;
}

.home-product-grid .price-row{
    min-height:26px;
    gap:10px;
    padding:2px 0;
    border:0;
    font-size:12px;
}

.home-product-grid .price-row span{
    font-size:12px;
}

.home-product-grid .price-row > span:first-child{
    color:#5A3B43;
    font-weight:500;
}

.home-product-grid .price-row > span:nth-child(2){
    margin-left:auto;
    min-width:48px;
    color:#8B6570;
    font-size:12px;
    font-weight:700;
    text-align:right;
}

.home-product-grid .package-select-btn{
    min-width:50px;
    min-height:24px;
    padding:3px 8px;
    font-size:10px;
}

.home-product-grid .product-info-btn{
    margin-top:9px;
    padding:6px 11px;
    font-size:11px;
}

@media(max-width:600px){
    .category-card,
    .category-card:nth-child(even){
        min-height:71px;
        gap:5px;
        padding:7px 3px;
    }

    .category-mark,
    .category-card:nth-child(even) .category-mark{
        flex-basis:26px;
        width:26px;
        height:26px;
    }

    .category-mark img{
        width:19px;
        height:19px;
    }

    .category-name{
        font-size:10px;
    }

    .home-product-grid .product-card{
        padding:11px 12px 10px;
    }

    .home-product-grid .price-row{
        min-height:25px;
    }
}

/* Premium-sized selected product menu */
.home-product-grid{
    width:min(960px, calc(100vw - 64px));
    margin-left:50%;
    transform:translateX(-50%);
}

.home-product-grid .product-card{
    width:100%;
    max-width:100%;
    padding:38px 44px 32px;
    border:1px solid rgba(185,130,147,.24);
    border-radius:28px;
    box-shadow:0 16px 38px rgba(90,59,67,.08);
}

.home-product-grid .product-card h3{
    position:relative;
    display:flex;
    min-height:68px;
    align-items:center;
    justify-content:center;
    margin:0 0 21px;
    padding:12px 48px;
    font-size:28px;
    letter-spacing:.035em;
    line-height:1.2;
}

.home-product-grid .product-card::before{
    top:61px;
    right:60px;
}

.home-product-grid .package-group{
    margin:0;
    padding:13px 14px 10px;
    border:1px solid rgba(217,124,149,.18);
    border-radius:18px;
    background:rgba(255,248,245,.72);
    box-shadow:0 4px 13px rgba(90,59,67,.035);
}

.home-product-grid .package-group + .package-group{
    margin-top:14px;
}

.home-product-grid .price-category{
    display:table;
    margin:0 auto 9px;
    padding:6px 13px;
    border:1px solid rgba(217,124,149,.14);
    border-radius:999px;
    background:rgba(248,200,210,.38);
    color:#8B6570;
    font-size:13px;
    font-weight:600;
    letter-spacing:.02em;
    text-align:center;
}

.home-product-grid .price-row{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) 80px;
    min-height:58px;
    align-items:center;
    gap:10px;
    padding:6px 8px;
    border:0;
    border-radius:0;
    background:rgba(255,255,255,.56);
    border-bottom:1px solid rgba(185,130,147,.12);
}

.home-product-grid .package-group > .price-row:nth-of-type(2){
    border-radius:12px 12px 0 0;
}

.home-product-grid .price-row:last-child{
    border-bottom:0;
    border-radius:0 0 12px 12px;
}

.home-product-grid .price-row > span:first-child{
    min-width:0;
    padding-left:7px;
    color:#5A3B43;
    font-size:16px;
    font-weight:500;
    text-align:left;
}

.home-product-grid .price-row > span:nth-child(2){
    min-width:0;
    margin:0;
    padding-right:5px;
    color:#76515E;
    font-size:16px;
    font-weight:700;
    text-align:right;
}

.home-product-grid .package-select-btn{
    display:inline-flex;
    width:80px;
    min-width:80px;
    height:38px;
    min-height:38px;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.home-product-grid .product-info-btn{
    display:block;
    margin:25px auto 0;
    padding:9px 18px;
    font-size:12px;
}

@media(max-width:600px){
    .home-product-grid{
        position:relative;
        left:50%;
        width:92vw;
        margin:0;
        transform:translateX(-50%);
    }

    .home-product-grid .product-card{
        padding:24px;
        border-radius:24px;
    }

    .home-product-grid .product-card h3{
        min-height:60px;
        margin-bottom:17px;
        padding:10px 42px;
        font-size:24px;
    }

    .home-product-grid .product-card::before{
        top:43px;
        right:36px;
    }

    .home-product-grid .package-group + .package-group{
        margin-top:12px;
    }

    .home-product-grid .package-group{
        padding:11px 9px 8px;
        border-radius:16px;
    }

    .home-product-grid .price-category{
        margin-bottom:7px;
        padding:5px 11px;
        font-size:12px;
    }

    .home-product-grid .price-row{
        grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) 76px;
        min-height:52px;
        gap:7px;
        padding:5px 5px;
    }

    .home-product-grid .price-row > span:first-child{
        font-size:14px;
    }

    .home-product-grid .price-row > span:nth-child(2){
        font-size:14px;
    }

    .home-product-grid .package-select-btn{
        width:76px;
        min-width:76px;
        height:36px;
        min-height:36px;
        font-size:12px;
    }

    .home-product-grid .product-info-btn{
        margin-top:20px;
    }
}

/* Keep the premium catalog card centered within a matching homepage frame. */
#app:has(.home) .window{
    max-width:1040px;
}

.home-catalog{
    width:100%;
    margin-right:auto;
    margin-left:auto;
}

.home-product-grid{
    width:min(960px,100%);
    margin:0 auto;
    transform:none;
}

@media(max-width:600px){
    .home-product-grid{
        position:relative;
        left:50%;
        width:92vw;
        margin:0;
        transform:translateX(-50%);
    }
}

@media (max-width:480px){
    .payment-popup{
        align-items:flex-end;
        padding:10px;
    }

    .payment-popup .payment-box{
        width:100%;
        max-height:calc(100dvh - 20px);
        padding:24px 16px 18px;
        border-radius:24px 24px 20px 20px;
    }

    .checkout-header{
        margin-bottom:14px;
        padding-bottom:12px;
    }

    .checkout-section{
        margin:9px 0;
        padding:13px 14px;
    }
}

/* Homepage support and footer */
.home .contact-order{
    margin:17px 0 0;
    padding:16px 18px;
    border:1px solid rgba(217,124,149,.18);
    border-radius:20px;
    background:rgba(255,248,245,.62);
    text-align:center;
}

.home .contact-heading{
    text-align:center;
}

.home .order h2{
    color:#5A3B43;
    font-size:16px;
    font-weight:600;
}

.home .contact-links{
    justify-content:center;
    gap:9px;
    margin-top:11px;
}

.home .contact-links .order-btn{
    min-height:35px;
    padding:8px 14px;
    border:1px solid rgba(217,124,149,.18);
    border-radius:999px;
    background:#FFFDFB;
    color:#76515E;
    font-size:11px;
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.home .contact-links .order-btn:hover{
    transform:translateY(-1px);
    background:#FFF1EA;
    box-shadow:0 5px 12px rgba(90,59,67,.07);
}

.home .footer{
    margin-top:13px;
    padding:0;
    border:0;
    color:#9A7881;
    font-size:10px;
}

@media(max-width:600px){
    .home .contact-order{
        margin-top:13px;
        padding:14px 10px;
        border-radius:17px;
    }

    .home .contact-links{
        flex-wrap:wrap;
        gap:7px;
        margin-top:9px;
    }
}

/* Curated featured categories with an expandable full menu */
.category-section .featured-category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.category-section .featured-category-grid .category-card{
    min-height:94px;
    padding:12px 8px;
    border-radius:18px 18px 18px 8px;
    background:rgba(255,248,245,.82);
}

.category-section .featured-category-grid .category-mark{
    width:31px;
    height:31px;
}

.category-section .featured-category-grid .category-name{
    font-size:12px;
}

.all-categories{
    margin-top:18px;
}

.all-categories-trigger{
    position:relative;
    display:flex;
    width:max-content;
    min-width:205px;
    min-height:46px;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin:0 auto;
    padding:10px 43px 10px 21px;
    border:1px solid rgba(217,124,149,.28);
    border-radius:999px;
    background:linear-gradient(135deg,#FCE1E6,#FFF1EA);
    box-shadow:0 6px 16px rgba(90,59,67,.07);
    color:#76515E;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    letter-spacing:.01em;
    list-style:none;
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.all-categories-trigger::-webkit-details-marker{
    display:none;
}

.all-categories-trigger::marker{
    content:"";
}

.all-categories-trigger:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#F8C8D2,#FFF8F5);
    box-shadow:0 9px 20px rgba(90,59,67,.11);
}

.all-categories-heart{
    color:#D97C95;
    font-size:16px;
    line-height:1;
}

.all-categories-chevron{
    position:absolute;
    right:18px;
    top:50%;
    color:#B98293;
    font-size:18px;
    line-height:1;
    transform:translateY(-58%);
    transition:transform .2s ease;
}

.all-categories[open] .all-categories-chevron{
    transform:translateY(-35%) rotate(180deg);
}

.all-category-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    margin-top:14px;
    padding:14px;
    border:1px solid rgba(217,124,149,.15);
    border-radius:20px;
    background:rgba(255,248,245,.55);
}

.all-category-grid .category-card{
    min-height:78px;
}

@media(max-width:600px){
    .category-section .featured-category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .category-section .featured-category-grid .category-card{
        min-height:78px;
        gap:5px;
        padding:8px 4px;
        border-radius:15px 15px 15px 7px;
    }

    .category-section .featured-category-grid .category-mark{
        width:26px;
        height:26px;
    }

    .category-section .featured-category-grid .category-name{
        font-size:10px;
    }

    .all-categories{
        margin-top:14px;
    }

    .all-categories-trigger{
        min-width:195px;
        min-height:44px;
        font-size:12px;
    }

    .all-category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
        margin-top:11px;
        padding:10px;
        border-radius:16px;
    }

    .all-category-grid .category-card{
        min-height:69px;
    }
}

/* Premium Apps showcase cards; other featured categories retain their compact style. */
.category-section .featured-category-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.category-section .featured-category-grid > .premium-app-card{
    min-height:188px;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    padding:18px 12px 15px;
    border:1px solid rgba(217,124,149,.22);
    border-radius:21px 21px 21px 9px;
    background:
        radial-gradient(circle at 50% 0,rgba(248,200,210,.33),transparent 58%),
        #FFF9F6;
    box-shadow:0 7px 20px rgba(90,59,67,.055);
    text-align:center;
    transition:transform .24s ease,box-shadow .24s ease,background .24s ease,border-color .24s ease;
}

.category-section .premium-app-card:hover{
    transform:translateY(-4px);
    border-color:rgba(217,124,149,.42);
    background:
        radial-gradient(circle at 50% 0,rgba(248,200,210,.48),transparent 62%),
        #FFFDFC;
    box-shadow:0 14px 28px rgba(90,59,67,.11);
}

.category-section .premium-app-card.active{
    border-color:rgba(217,124,149,.55);
    background:
        radial-gradient(circle at 50% 0,rgba(248,200,210,.5),transparent 62%),
        #FFF5F2;
    box-shadow:0 8px 22px rgba(217,124,149,.14);
}

.category-section .premium-app-card .category-mark{
    flex:0 0 60px;
    width:60px;
    height:60px;
    margin-bottom:12px;
    overflow:hidden;
    border:1px solid rgba(217,124,149,.18);
    border-radius:19px;
    background:rgba(255,255,255,.88);
    box-shadow:0 5px 14px rgba(90,59,67,.08);
    font-family:Georgia,serif;
    font-size:27px;
}

.category-section .premium-app-card .category-mark img{
    width:39px;
    height:39px;
    object-fit:contain;
}

.category-section .premium-app-card .category-name{
    margin:0;
    color:#5A3B43;
    font-size:15px;
    font-weight:700;
    letter-spacing:.005em;
    line-height:1.25;
}

.category-section .premium-app-card .category-description{
    margin-top:5px;
    color:#90727A;
    font-size:11px;
    font-weight:400;
    line-height:1.35;
}

.category-section .premium-app-card .category-starting-price{
    margin-top:auto;
    padding-top:12px;
    color:#B45F79;
    font-size:12px;
    font-weight:650;
    letter-spacing:.015em;
}

.category-section .featured-category-grid > .category-card:not(.premium-app-card){
    grid-column:span 2;
    min-height:58px;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:9px 12px;
}

.category-section .featured-category-grid > .category-card:not(.premium-app-card) .category-mark{
    flex-basis:28px;
    width:28px;
    height:28px;
    margin:0;
}

.category-section .featured-category-grid > .category-card:not(.premium-app-card) .category-name{
    margin:0;
    font-size:12px;
}

@media(max-width:760px){
    .category-section .featured-category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .category-section .featured-category-grid > .premium-app-card{
        min-height:174px;
    }

    .category-section .featured-category-grid > .category-card:not(.premium-app-card){
        grid-column:span 1;
    }
}

@media(max-width:380px){
    .category-section .featured-category-grid > .premium-app-card{
        min-height:164px;
        padding:15px 8px 12px;
    }

    .category-section .premium-app-card .category-name{
        font-size:14px;
    }

    .category-section .premium-app-card .category-description{
        font-size:10px;
    }

    .category-section .premium-app-card .category-starting-price{
        font-size:11px;
    }
}

/* Floating app stickers and boutique service buttons */
.category-section .featured-category-grid{
    align-items:center;
    gap:16px 14px;
}

.category-section .featured-category-grid > .premium-app-card{
    position:relative;
    min-height:168px;
    align-items:center;
    justify-content:flex-start;
    padding:13px 8px 15px;
    overflow:visible;
    border:1px solid rgba(217,124,149,.15);
    border-radius:46% 46% 28% 28% / 23% 23% 18% 18%;
    background:linear-gradient(155deg,rgba(255,248,245,.98),rgba(255,241,234,.78));
    box-shadow:0 9px 20px rgba(90,59,67,.065);
    text-align:center;
    transition:transform .24s ease,box-shadow .24s ease,background .24s ease,border-color .24s ease;
}

.category-section .featured-category-grid > .premium-app-card:nth-child(2),
.category-section .featured-category-grid > .premium-app-card:nth-child(4){
    transform:translateY(8px);
}

.category-section .featured-category-grid > .premium-app-card:hover{
    z-index:1;
    transform:translateY(-5px) scale(1.035);
    border-color:rgba(217,124,149,.35);
    background:linear-gradient(155deg,#FFFDFC,#FCE8ED);
    box-shadow:0 14px 28px rgba(217,124,149,.18),0 0 24px rgba(248,200,210,.28);
}

.category-section .featured-category-grid > .premium-app-card:nth-child(2):hover,
.category-section .featured-category-grid > .premium-app-card:nth-child(4):hover{
    transform:translateY(2px) scale(1.035);
}

.category-section .featured-category-grid > .premium-app-card::after{
    position:absolute;
    top:13px;
    right:22%;
    color:rgba(217,124,149,.65);
    content:"✦";
    font-size:11px;
    opacity:.72;
}

.category-section .premium-app-card .category-mark{
    flex:0 0 68px;
    width:68px;
    height:68px;
    margin:0 0 10px;
    border:1px solid rgba(217,124,149,.15);
    border-radius:50%;
    background:#FFFDFC;
    box-shadow:0 7px 16px rgba(90,59,67,.1);
    font-size:27px;
}

.category-section .premium-app-card .category-mark img{
    width:43px;
    height:43px;
}

.category-section .premium-app-card .category-name{
    margin:0;
    color:#5A3B43;
    font-size:14px;
    font-weight:700;
    line-height:1.25;
}

.category-section .premium-app-card .category-starting-price{
    margin-top:5px;
    padding:0;
    color:#A96B7D;
    font-size:10px;
    font-weight:600;
    letter-spacing:.025em;
}

.category-section .featured-category-grid > .feature-service-sticker{
    position:relative;
    grid-column:span 2;
    min-height:78px;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:12px 21px;
    border:1px solid rgba(217,124,149,.2);
    border-radius:26px 34px 26px 14px;
    background:linear-gradient(115deg,rgba(248,200,210,.42),rgba(255,248,245,.9) 65%);
    box-shadow:0 7px 18px rgba(90,59,67,.055);
    text-align:left;
    transition:transform .23s ease,box-shadow .23s ease,background .23s ease;
}

.category-section .featured-category-grid > .feature-service-sticker:hover{
    transform:translateY(-4px);
    background:linear-gradient(115deg,rgba(248,200,210,.62),#FFFDFC 70%);
    box-shadow:0 12px 24px rgba(217,124,149,.15);
}

.category-section .feature-service-sticker .category-mark{
    flex:0 0 42px;
    width:42px;
    height:42px;
    margin:0;
    border:1px solid rgba(217,124,149,.18);
    border-radius:15px 50% 50% 50%;
    background:#FFFDFC;
    box-shadow:0 4px 11px rgba(90,59,67,.08);
    font-size:18px;
}

.category-section .service-sticker-copy{
    display:grid;
    min-width:0;
    gap:4px;
}

.category-section .feature-service-sticker .category-name{
    margin:0;
    font-size:13px;
    font-weight:700;
}

.category-section .robux-note{
    margin-left:4px;
    color:#B98293;
    font-size:10px;
    font-weight:500;
}

.category-section .feature-service-sticker .category-details{
    color:#90727A;
    font-size:10px;
    line-height:1.35;
}

.category-section .sticker-sparkle{
    position:absolute;
    top:9px;
    right:15px;
    color:#D97C95;
    font-size:13px;
}

@media(max-width:760px){
    .category-section .featured-category-grid{
        gap:12px 10px;
    }

    .category-section .featured-category-grid > .premium-app-card{
        min-height:158px;
    }

    .category-section .featured-category-grid > .premium-app-card:nth-child(2),
    .category-section .featured-category-grid > .premium-app-card:nth-child(4){
        transform:translateY(6px);
    }

    .category-section .featured-category-grid > .premium-app-card:nth-child(2):hover,
    .category-section .featured-category-grid > .premium-app-card:nth-child(4):hover{
        transform:translateY(1px) scale(1.025);
    }

    .category-section .featured-category-grid > .feature-service-sticker{
        grid-column:span 2;
        min-height:72px;
        gap:9px;
        padding:10px 13px;
        border-radius:22px 28px 22px 12px;
    }
}

@media(max-width:380px){
    .category-section .featured-category-grid > .premium-app-card{
        min-height:150px;
    }

    .category-section .premium-app-card .category-mark{
        flex-basis:60px;
        width:60px;
        height:60px;
    }

    .category-section .premium-app-card .category-mark img{
        width:38px;
        height:38px;
    }

    .category-section .featured-category-grid > .feature-service-sticker{
        gap:7px;
        padding:9px 10px;
    }

    .category-section .feature-service-sticker .category-details{
        font-size:9px;
    }
}

@media(prefers-reduced-motion:reduce){
    .category-section .featured-category-grid > .premium-app-card,
    .category-section .featured-category-grid > .feature-service-sticker{
        transition:none;
    }
}

/* Selected-product catalog card */
.home-catalog .home-product-grid .product-card{
    padding:32px 38px 28px;
    border:1px solid rgba(217,124,149,.2);
    border-radius:30px;
    background:
        radial-gradient(ellipse at 50% 0,rgba(248,200,210,.2),transparent 43%),
        linear-gradient(145deg,#FFFDFC,#FFF8F5);
    box-shadow:0 10px 28px rgba(90,59,67,.065);
    transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}

.home-catalog .home-product-grid .product-card:hover{
    transform:translateY(-3px);
    border-color:rgba(217,124,149,.3);
    box-shadow:0 14px 32px rgba(90,59,67,.09);
}

.home-catalog .home-product-grid .product-card::before{
    top:19px;
    right:23px;
    color:#D97C95;
    font-size:17px;
    opacity:.65;
}

.home-catalog .home-product-grid .product-card h3{
    min-height:0;
    flex-direction:column;
    gap:9px;
    margin:0 0 20px;
    padding:0 36px 18px;
    border-bottom:1px solid rgba(185,130,147,.16);
    color:#5A3B43;
    font-size:26px;
    font-weight:700;
    letter-spacing:.015em;
    line-height:1.2;
    text-align:center;
}

.home-catalog .home-product-grid .product-card h3::before{
    display:grid;
    width:46px;
    height:46px;
    place-items:center;
    border:1px solid rgba(217,124,149,.2);
    border-radius:50%;
    background:linear-gradient(145deg,#FFFDFC,#FCE8ED);
    box-shadow:0 5px 13px rgba(90,59,67,.07);
    color:#B96F83;
    content:"✿";
    font-family:Georgia,serif;
    font-size:23px;
    font-weight:400;
}

.home-catalog .home-product-grid .package-group{
    padding:13px 14px 8px;
    border:1px solid rgba(217,124,149,.14);
    border-radius:19px;
    background:rgba(255,253,251,.82);
    box-shadow:0 3px 11px rgba(90,59,67,.025);
}

.home-catalog .home-product-grid .package-group + .package-group{
    margin-top:12px;
}

.home-catalog .home-product-grid .price-category{
    margin-bottom:8px;
    padding:6px 14px;
    background:rgba(248,200,210,.3);
    color:#865E68;
    font-size:12px;
    font-weight:650;
}

.home-catalog .home-product-grid .price-row{
    grid-template-columns:minmax(0,1fr) minmax(74px,.62fr) 80px;
    min-height:54px;
    gap:10px;
    padding:6px 8px;
    border-bottom:1px solid rgba(185,130,147,.13);
    background:transparent;
    transition:background .18s ease;
}

.home-catalog .home-product-grid .price-row:hover{
    border-radius:11px;
    background:rgba(255,241,234,.55);
}

.home-catalog .home-product-grid .price-row > span:first-child{
    padding-left:5px;
    color:#5A3B43;
    font-size:15px;
    font-weight:500;
    line-height:1.35;
    text-align:left;
}

.home-catalog .home-product-grid .price-row > span:nth-child(2){
    padding-right:3px;
    color:#76515E;
    font-size:15px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    text-align:right;
}

.home-catalog .home-product-grid .package-select-btn{
    width:80px;
    min-width:80px;
    height:37px;
    min-height:37px;
    border:1px solid rgba(217,124,149,.28);
    background:linear-gradient(135deg,#FCE1E6,#FFF1EA);
    box-shadow:0 3px 9px rgba(90,59,67,.06);
    color:#76515E;
    font-size:12px;
    font-weight:650;
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.home-catalog .home-product-grid .package-select-btn:hover{
    transform:translateY(-2px);
    border-color:rgba(217,124,149,.4);
    background:linear-gradient(135deg,#F8C8D2,#FFF8F5);
    box-shadow:0 6px 12px rgba(90,59,67,.09);
}

.home-catalog .home-product-grid .package-select-btn.selected{
    border-color:rgba(217,124,149,.48);
    background:#F8C8D2;
    box-shadow:0 4px 11px rgba(217,124,149,.16);
}

.home-catalog .home-product-grid .package-select-btn:focus-visible{
    outline:2px solid #B98293;
    outline-offset:3px;
}

.home-catalog .home-product-grid .product-info-btn{
    margin-top:19px;
    padding:9px 17px;
    border-radius:999px;
    background:rgba(248,200,210,.28);
    color:#76515E;
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}

.home-catalog .home-product-grid .product-info-btn:hover{
    transform:translateY(-1px);
    background:rgba(248,200,210,.48);
    box-shadow:0 5px 12px rgba(90,59,67,.07);
}

@media(max-width:600px){
    .home-catalog .home-product-grid .product-card{
        padding:22px 15px 20px;
        border-radius:24px;
    }

    .home-catalog .home-product-grid .product-card h3{
        gap:8px;
        margin-bottom:15px;
        padding:0 30px 14px;
        font-size:23px;
    }

    .home-catalog .home-product-grid .product-card h3::before{
        width:41px;
        height:41px;
        font-size:21px;
    }

    .home-catalog .home-product-grid .product-card::before{
        top:14px;
        right:17px;
    }

    .home-catalog .home-product-grid .package-group{
        padding:10px 8px 7px;
        border-radius:16px;
    }

    .home-catalog .home-product-grid .price-row{
        grid-template-columns:minmax(0,1fr) minmax(64px,.65fr) 74px;
        min-height:49px;
        gap:5px;
        padding:5px 4px;
    }

    .home-catalog .home-product-grid .price-row > span:first-child,
    .home-catalog .home-product-grid .price-row > span:nth-child(2){
        font-size:13px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:74px;
        min-width:74px;
        height:35px;
        min-height:35px;
        font-size:11px;
    }
}

@media(prefers-reduced-motion:reduce){
    .home-catalog .home-product-grid .product-card,
    .home-catalog .home-product-grid .price-row,
    .home-catalog .home-product-grid .package-select-btn,
    .home-catalog .home-product-grid .product-info-btn{
        transition:none;
    }
}

/* Boutique checkout presentation */
.payment-popup{
    background:rgba(90,59,67,.42);
    backdrop-filter:blur(10px);
}

.payment-popup .payment-box{
    width:min(460px,100%);
    max-height:min(92vh,900px);
    scrollbar-gutter:stable both-edges;
    padding:27px clamp(20px,5vw,32px) 24px;
    border:1px solid rgba(217,124,149,.25);
    border-radius:30px;
    background:
        radial-gradient(ellipse at 50% 0,rgba(248,200,210,.3),transparent 40%),
        linear-gradient(155deg,#FFFDFC,#FFF8F5 75%);
    box-shadow:0 24px 64px rgba(90,59,67,.22);
}

.payment-popup .payment-close{
    top:15px;
    right:15px;
    width:36px;
    height:36px;
    border:1px solid rgba(217,124,149,.2);
    background:rgba(255,248,245,.9);
    color:#8B6570;
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}

.payment-popup .payment-close:hover{
    transform:rotate(8deg) translateY(-1px);
    background:#FCE1E6;
    box-shadow:0 4px 10px rgba(90,59,67,.08);
}

.payment-popup .checkout-header{
    margin-bottom:14px;
    padding:3px 34px 15px;
    border-bottom:1px solid rgba(185,130,147,.18);
}

.payment-popup .checkout-eyebrow{
    margin-bottom:6px;
    color:#B96F83;
    font-size:10px;
    letter-spacing:.17em;
}

.payment-popup .checkout-header h2{
    color:#5A3B43;
    font-family:Georgia,serif;
    font-size:24px;
    font-weight:600;
    letter-spacing:.025em;
}

.payment-popup .checkout-header p{
    margin-top:6px;
    color:#90727A !important;
    font-size:12px !important;
}

.payment-popup .checkout-section{
    margin:10px 0;
    padding:13px 16px;
    border:1px solid rgba(217,124,149,.13);
    border-radius:19px;
    background:rgba(255,253,251,.76);
}

.payment-popup .checkout-section h3{
    margin-bottom:8px;
    color:#A96B7D;
    font-size:10px;
    font-weight:750;
    letter-spacing:.15em;
}

.payment-popup .checkout-order-section{
    padding:12px 4px 14px;
    border:0;
    border-bottom:1px solid rgba(185,130,147,.17);
    border-radius:0;
    background:transparent;
}

.payment-popup .payment-order-summary{
    gap:3px;
}

.payment-popup .checkout-product{
    color:#5A3B43;
    font-size:17px;
    font-weight:750;
    line-height:1.35;
}

.payment-popup .checkout-order-package,
.payment-popup .checkout-order-duration{
    color:#80636B;
    font-size:13px;
    line-height:1.45;
}

.payment-popup .checkout-total-section{
    margin:12px 0;
    padding:15px 16px 17px;
    border:1px solid rgba(217,124,149,.2);
    border-radius:21px;
    background:linear-gradient(135deg,rgba(248,200,210,.62),rgba(255,241,234,.78));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    text-align:center;
}

.payment-popup .checkout-total-section h3{
    margin-bottom:5px;
    color:#8B6570;
    font-size:10px;
    letter-spacing:.17em;
}

.payment-popup .checkout-total{
    color:#5A3B43;
    font-family:Georgia,serif;
    font-size:clamp(34px,8vw,42px);
    font-weight:700;
    letter-spacing:-.035em;
    line-height:1.12;
}

.payment-popup .checkout-warranty-section{
    padding:12px 15px;
    border:0;
    border-left:3px solid rgba(217,124,149,.52);
    border-radius:4px 15px 15px 4px;
    background:rgba(255,241,234,.62);
}

.payment-popup .checkout-warranty-section h3{
    margin-bottom:5px;
}

.payment-popup .checkout-warranty{
    gap:2px;
    color:#80636B;
    font-size:12px;
    line-height:1.45;
}

.payment-popup .checkout-warranty strong{
    color:#5A3B43;
    font-size:14px;
    font-weight:750;
}

.payment-popup .checkout-payment-section{
    padding:13px 16px 14px;
    background:rgba(255,253,251,.78);
    text-align:center;
}

.payment-popup .checkout-payment-section h3{
    text-align:center;
}

.payment-popup .qris-image{
    width:min(190px,62vw);
    margin:8px auto 10px;
    padding:10px;
    border:1px solid rgba(217,124,149,.18);
    border-radius:18px;
    background:#fff;
    box-shadow:0 6px 18px rgba(90,59,67,.07);
}

.payment-popup .checkout-instruction{
    color:#76515E !important;
    font-size:12px !important;
    font-weight:550;
}

.payment-popup .checkout-next-section{
    padding:11px 4px 4px;
    border:0;
    border-top:1px solid rgba(185,130,147,.15);
    border-radius:0;
    background:transparent;
}

.payment-popup .checkout-next-section h3{
    margin-bottom:9px;
}

.payment-popup .checkout-steps{
    gap:7px;
}

.payment-popup .checkout-steps li{
    gap:9px;
    color:#76515E;
    font-size:12px;
}

.payment-popup .checkout-steps li::before{
    flex-basis:22px;
    width:22px;
    height:22px;
    background:#FCE1E6;
    color:#76515E;
    font-size:10px;
}

.payment-popup .confirm-payment-btn{
    min-height:49px;
    margin-top:13px;
    padding:13px 18px;
    border:1px solid #C96F86;
    background:linear-gradient(135deg,#D97C95,#C96F86);
    box-shadow:0 8px 17px rgba(217,124,149,.22);
    letter-spacing:.01em;
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}

.payment-popup .confirm-payment-btn:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#CF718B,#B96079);
    box-shadow:0 11px 21px rgba(217,124,149,.28);
}

.payment-popup .payment-verification-note{
    margin:9px 0 0;
    color:#90727A !important;
    font-size:10px !important;
    line-height:1.5;
}

.payment-popup .payment-issue{
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid rgba(185,130,147,.15);
    color:#90727A !important;
    font-size:11px !important;
}

.payment-popup .payment-issue a{
    color:#A85F76;
    font-weight:650;
}

/* Order-review hierarchy for the checkout modal */
.payment-popup .payment-box{
    width:min(440px,100%);
    padding:25px clamp(20px,5vw,30px) 22px;
    border-color:rgba(217,124,149,.2);
    border-radius:30px;
    background:
        radial-gradient(ellipse at 50% 0,rgba(248,200,210,.25),transparent 38%),
        linear-gradient(155deg,#FFFDFC,#FFF8F5 78%);
    box-shadow:0 22px 56px rgba(90,59,67,.2);
}

.payment-popup .checkout-header{
    margin-bottom:11px;
    padding:2px 34px 13px;
    border-bottom:0;
}

.payment-popup .checkout-header h2{
    font-size:25px;
    letter-spacing:.035em;
}

.payment-popup .checkout-header p{
    margin-top:5px;
}

.payment-popup .checkout-section{
    margin:8px 0;
    border-color:rgba(217,124,149,.11);
    border-radius:17px;
}

.payment-popup .checkout-section h3{
    margin-bottom:7px;
}

.payment-popup .checkout-order-section{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:4px;
    padding:13px 15px;
    border:1px solid rgba(217,124,149,.12);
    border-radius:18px 18px 18px 7px;
    background:rgba(255,253,251,.76);
}

.payment-popup .checkout-order-section h3{
    margin:0 0 2px;
    color:#A96B7D;
}

.payment-popup .payment-order-summary{
    position:relative;
    gap:2px;
    padding-left:43px;
}

.payment-popup .payment-order-summary::before{
    position:absolute;
    top:2px;
    left:0;
    display:grid;
    width:32px;
    height:32px;
    place-items:center;
    border:1px solid rgba(217,124,149,.18);
    border-radius:12px 12px 12px 5px;
    background:linear-gradient(145deg,#FFFDFC,#FCE8ED);
    box-shadow:0 3px 9px rgba(90,59,67,.05);
    color:#B96F83;
    content:"✦";
    font-size:17px;
}

.payment-popup .checkout-product{
    font-size:16px;
    letter-spacing:.01em;
}

.payment-popup .checkout-order-package{
    color:#76515E;
    font-weight:550;
}

.payment-popup .checkout-order-duration{
    color:#90727A;
    font-size:12px;
}

.payment-popup .checkout-total-section{
    margin:10px 0;
    padding:13px 16px 15px;
    border-color:rgba(217,124,149,.16);
    border-radius:20px;
    background:linear-gradient(135deg,rgba(248,200,210,.53),rgba(255,241,234,.72));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 5px 15px rgba(90,59,67,.035);
}

.payment-popup .checkout-total-section h3{
    color:#8B6570;
}

.payment-popup .checkout-total{
    font-size:clamp(38px,9vw,46px);
}

.payment-popup .checkout-warranty-section{
    margin:8px 0;
    padding:11px 14px;
    border-left-width:3px;
    background:rgba(255,241,234,.48);
}

.payment-popup .checkout-warranty-section h3{
    margin-bottom:4px;
}

.payment-popup .checkout-warranty{
    grid-template-columns:1fr;
    gap:1px;
}

.payment-popup .checkout-warranty strong{
    font-size:13px;
}

.payment-popup .checkout-warranty span{
    font-size:11px;
}

.payment-popup .checkout-payment-section{
    padding:12px 15px 13px;
    border-radius:19px;
    background:rgba(255,253,251,.78);
}

.payment-popup .checkout-payment-section h3{
    margin-bottom:3px;
}

.payment-popup .qris-image{
    width:min(176px,58vw);
    margin:7px auto 8px;
    padding:11px;
    border-color:rgba(185,130,147,.16);
    border-radius:19px;
    box-shadow:0 5px 16px rgba(90,59,67,.055);
}

.payment-popup .checkout-instruction{
    color:#80636B !important;
    font-size:11px !important;
}

.payment-popup .checkout-next-section{
    margin:8px 0 0;
    padding-top:10px;
}

.payment-popup .checkout-next-section h3{
    margin-bottom:7px;
}

.payment-popup .checkout-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
}

.payment-popup .checkout-steps li{
    align-items:flex-start;
    gap:6px;
    font-size:10px;
    line-height:1.35;
}

.payment-popup .checkout-steps li::before{
    flex-basis:19px;
    width:19px;
    height:19px;
}

.payment-popup .confirm-payment-btn{
    min-height:52px;
    margin-top:11px;
    border-color:#86B99A;
    background:linear-gradient(135deg,#A8D5B7,#8FC6A2);
    color:#385B46;
    box-shadow:0 7px 17px rgba(93,151,115,.19);
    font-size:14px;
}

.payment-popup .confirm-payment-btn:hover{
    background:linear-gradient(135deg,#B6DFC3,#9CD1AD);
    box-shadow:0 10px 20px rgba(93,151,115,.24);
}

.payment-popup .payment-verification-note{
    max-width:330px;
    margin:8px auto 0;
}

@media(max-width:480px){
    .payment-popup .payment-box{
        padding:22px 16px 17px;
        border-radius:27px 27px 22px 22px;
    }

    .payment-popup .checkout-header{
        margin-bottom:7px;
        padding-bottom:9px;
    }

    .payment-popup .checkout-section{
        margin:8px 0;
        padding:11px 13px;
    }

    .payment-popup .checkout-order-section,
    .payment-popup .checkout-next-section{
        padding-right:3px;
        padding-left:3px;
    }

    .payment-popup .checkout-total-section{
        padding:12px 13px 14px;
    }

    .payment-popup .qris-image{
        width:min(164px,54vw);
    }

    .payment-popup .checkout-steps li{
        display:grid;
        justify-items:center;
        text-align:center;
    }

    .payment-popup .confirm-payment-btn{
        min-height:52px;
    }
}

@media(prefers-reduced-motion:reduce){
    .payment-popup .payment-close,
    .payment-popup .confirm-payment-btn{
        transition:none;
    }
}

/* Product information boutique layout */
.product-popup .popup-box{
    width:min(520px,calc(100% - 32px));
    max-height:min(88vh,820px);
    padding:57px 30px 25px;
    border:1px solid rgba(217,124,149,.25);
    border-radius:29px;
    background:
        radial-gradient(ellipse at 50% 0,rgba(248,200,210,.29),transparent 39%),
        linear-gradient(155deg,#FFFDFC,#FFF8F5 78%);
    box-shadow:0 25px 65px rgba(90,59,67,.2);
    scrollbar-color:#EAB3C1 #FFF8F5;
}

.product-popup .popup-box h2{
    margin:0 22px 19px;
    padding:0 0 17px;
    border-bottom:1px solid rgba(185,130,147,.18);
    color:#5A3B43;
    font-family:Georgia,serif;
    font-size:28px;
    font-weight:700;
    letter-spacing:.02em;
    line-height:1.2;
}

.product-popup .popup-box h2::after{
    background:#E9A7B7;
}

.product-popup .popup-section{
    margin:0;
    padding:15px 0;
    border-bottom:1px solid rgba(185,130,147,.15);
}

.product-popup .popup-section h4{
    display:block;
    width:max-content;
    max-width:100%;
    margin:0 0 10px;
    padding:0;
    border:0;
    background:transparent;
    color:#A96B7D;
    font-size:11px;
    font-weight:750;
    letter-spacing:.12em;
    line-height:1.3;
    text-align:left;
}

.product-popup .popup-intro-section{
    padding:0 0 17px;
    border-bottom:0;
}

.product-popup #popup-description{
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#80636B;
    font-size:13px;
    line-height:1.6;
    text-align:center;
}

.product-popup .popup-packages-section{
    padding-top:14px;
}

.product-popup #popup-details{
    gap:8px;
    padding:0;
    border:0;
}

.product-popup .popup-package-item{
    position:relative;
    padding:11px 14px 11px 17px;
    border:1px solid rgba(217,124,149,.13);
    border-radius:15px 15px 15px 6px;
    background:rgba(255,253,251,.72);
}

.product-popup .popup-package-item::before{
    top:16px;
    left:7px;
    width:4px;
    height:4px;
    border:0;
    background:#D97C95;
}

.product-popup .popup-package-item strong{
    margin-bottom:3px;
    color:#5A3B43;
    font-size:13px;
    font-weight:700;
    line-height:1.4;
}

.product-popup .popup-package-item p{
    color:#80636B;
    font-size:12px;
    line-height:1.5;
}

.product-popup .popup-notes-section{
    padding-top:15px;
}

.product-popup #popup-rules{
    gap:6px;
    padding:0;
    border-radius:0;
    background:transparent;
    list-style:none;
}

.product-popup #popup-rules li{
    position:relative;
    padding-left:15px;
    color:#80636B;
    font-size:12px;
    line-height:1.5;
}

.product-popup #popup-rules li::before{
    position:absolute;
    top:.57em;
    left:1px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#E5A0B2;
    content:"";
}

.product-popup .popup-warranty-section{
    padding-top:15px;
    padding-bottom:0;
    border-bottom:0;
}

.product-popup #popup-warranty{
    display:grid;
    gap:8px;
    margin:0;
}

.product-popup .popup-warranty-item{
    display:grid;
    justify-items:start;
    gap:4px;
    padding:10px 13px;
    border-radius:14px;
    background:linear-gradient(120deg,rgba(248,200,210,.27),rgba(255,241,234,.65));
}

.product-popup .popup-warranty-tag{
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#6F4C58;
    font-size:13px;
    font-weight:750;
}

.product-popup .popup-warranty-note{
    color:#80636B;
    font-size:11px;
    line-height:1.5;
}

@media(max-width:600px){
    .product-popup .popup-box{
        width:calc(100% - 28px);
        max-height:88vh;
        padding:52px 20px 22px;
        border-radius:25px;
    }

    .product-popup .popup-box h2{
        margin:0 14px 16px;
        padding-bottom:15px;
        font-size:24px;
    }

    .product-popup .popup-section{
        padding-top:13px;
        padding-bottom:13px;
    }

    .product-popup .popup-intro-section{
        padding-top:0;
        padding-bottom:15px;
    }

    .product-popup .popup-package-item{
        padding-top:10px;
        padding-bottom:10px;
    }
}

@media(prefers-reduced-motion:reduce){
    .product-popup .popup-box{
        animation:none;
    }
}

/* Mobile layout and touch-target refinements */
@media(max-width:600px){
    .hero-section .explore-btn,
    .hero-section .explore-secondary{
        min-height:44px;
        align-items:center;
    }

    .category-section .featured-category-grid > .feature-service-sticker{
        min-height:64px;
    }

    .home-catalog,
    .home-catalog-content,
    .home-product-grid{
        min-width:0;
    }

    .home-product-grid{
        position:static;
        left:auto;
        width:100%;
        margin:0;
        transform:none;
    }

    .home-catalog .home-product-grid .product-card{
        width:100%;
        min-width:0;
        padding-right:12px;
        padding-left:12px;
    }

    .home-catalog .home-product-grid .price-row{
        grid-template-columns:minmax(0,1fr) minmax(58px,.65fr) 74px;
        gap:4px;
        padding-right:3px;
        padding-left:3px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:74px;
        min-width:74px;
        height:44px;
        min-height:44px;
        padding:0 6px;
    }

    .home-catalog-actions .payment-btn{
        min-height:48px;
        margin:0;
        padding:12px 18px;
        font-size:14px;
        line-height:1.3;
    }

    .home .contact-links .order-btn{
        min-height:44px;
        padding:8px 13px;
    }

    .home .footer{
        margin-top:15px;
        padding-top:10px;
    }

    .product-popup .popup-close,
    .payment-popup .payment-close{
        top:12px;
        right:12px;
        width:44px;
        height:44px;
    }

    .product-popup .popup-box{
        width:calc(100% - 24px);
        max-width:520px;
        max-height:calc(100vh - 24px);
        max-height:calc(100dvh - 24px);
        padding-right:18px;
        padding-left:18px;
        overflow-x:hidden;
        overscroll-behavior:contain;
    }

    .product-popup .popup-box h2{
        overflow-wrap:anywhere;
    }

    .product-popup .popup-box::before{
        left:18px;
        width:calc(100% - 78px);
        transform:none;
        font-size:7px;
        letter-spacing:.08em;
        text-align:center;
    }

    .payment-popup{
        padding:12px;
    }

    .payment-popup .payment-box{
        width:100%;
        max-width:460px;
        max-height:calc(100vh - 24px);
        max-height:calc(100dvh - 24px);
        padding-right:16px;
        padding-left:16px;
        overflow-x:hidden;
        overscroll-behavior:contain;
    }

    .payment-popup .confirm-payment-btn{
        min-height:52px;
    }

    .payment-popup .qris-image{
        width:min(174px,54vw);
    }
}

@media(max-width:360px){
    .home-catalog .home-product-grid .product-card{
        padding-right:8px;
        padding-left:8px;
    }

    .home-catalog .home-product-grid .package-group{
        padding-right:4px;
        padding-left:4px;
    }

    .home-catalog .home-product-grid .price-row{
        grid-template-columns:minmax(52px,1fr) minmax(58px,.8fr) 70px;
        gap:4px;
        padding-right:2px;
        padding-left:2px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:70px;
        min-width:70px;
    }
}

/* Final Bie brand polish */
.hero-actions a,
.all-categories-trigger,
.home-catalog-actions .payment-btn,
.home-catalog .package-select-btn,
.home-catalog .product-info-btn,
.home .contact-links .order-btn,
.payment-popup .confirm-payment-btn{
    transition:
        transform .22s var(--ease-store),
        box-shadow .22s var(--ease-store),
        background-color .22s ease,
        background-image .22s ease,
        border-color .22s ease,
        color .22s ease;
}

.hero-actions a:hover,
.all-categories-trigger:hover,
.home-catalog-actions .payment-btn:hover,
.home-catalog .package-select-btn:hover,
.home-catalog .product-info-btn:hover,
.home .contact-links .order-btn:hover,
.payment-popup .confirm-payment-btn:hover{
    transform:translateY(-2px) scale(1.015);
}

.hero-actions a:focus-visible,
.all-categories-trigger:focus-visible,
.home-catalog-actions .payment-btn:focus-visible,
.home-catalog .package-select-btn:focus-visible,
.home-catalog .product-info-btn:focus-visible,
.home .contact-links .order-btn:focus-visible,
.payment-popup .confirm-payment-btn:focus-visible{
    outline:2px solid var(--mauve);
    outline-offset:3px;
}

.hero-mascot-frame .mascot{
    animation:brand-image-in .65s var(--ease-store) both;
}

.premium-app-card .category-mark img{
    animation:brand-image-in .6s var(--ease-store) both;
}

@keyframes brand-image-in{
    from{opacity:0;transform:translateY(5px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@supports (animation-timeline:view()){
    .hero-mascot-frame,
    .hero-copy,
    .category-section .featured-category-grid > .category-card,
    .home-catalog,
    .contact-order,
    .home .footer{
        animation:brand-scroll-reveal linear both;
        animation-timeline:view();
        animation-range:entry 0% entry 28%;
    }
}

@keyframes brand-scroll-reveal{
    from{opacity:.35;translate:0 14px}
    to{opacity:1;translate:0 0}
}

@media(prefers-reduced-motion:reduce){
    .hero-mascot-frame .mascot,
    .premium-app-card .category-mark img{
        animation:none;
    }
}

.home-catalog .home-product-grid .package-group{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.home-catalog .home-product-grid .price-category{
    grid-column:1 / -1;
    margin:0;
}

.home-catalog .home-product-grid .price-row{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
    justify-items:center;
    align-content:center;
    min-width:0;
    min-height:104px;
    gap:4px;
    padding:9px 6px 8px;
    border:1px solid rgba(217,124,149,.16);
    border-radius:15px;
    background:linear-gradient(155deg,#FFFEFD,#FFF7F4);
    box-shadow:0 3px 10px rgba(90,59,67,.035);
    text-align:center;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.home-catalog .home-product-grid .price-row:hover{
    transform:translateY(-2px);
    border-color:rgba(217,124,149,.34);
    background:linear-gradient(155deg,#FFFDFC,#FFF0F0);
    box-shadow:0 7px 15px rgba(126,75,91,.09);
}

.home-catalog .home-product-grid .price-row > span:first-child{
    max-width:100%;
    padding:0;
    color:#8B6570;
    font-size:10px;
    font-weight:700;
    letter-spacing:.07em;
    line-height:1.3;
    text-align:center;
    text-transform:uppercase;
}

.home-catalog .home-product-grid .price-row > span:nth-child(2){
    align-self:center;
    min-width:0;
    padding:0;
    color:#5A3B43;
    font-size:19px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.025em;
    line-height:1.1;
    text-align:center;
}

.home-catalog .home-product-grid .package-select-btn{
    align-self:end;
    width:76px;
    min-width:0;
    height:29px;
    min-height:29px;
    padding:4px 8px;
    border-radius:999px;
    background:linear-gradient(135deg,#FCE1E6,#FFF1EA);
    box-shadow:0 2px 7px rgba(90,59,67,.055);
    font-size:10px;
    line-height:1;
}

.home-catalog .home-product-grid .price-row:has(.package-select-btn.selected){
    border-color:rgba(217,124,149,.45);
    background:linear-gradient(155deg,#FFF9F8,#FCE7EA);
    box-shadow:0 4px 12px rgba(217,124,149,.12);
}

.home-catalog .home-product-grid .package-select-btn:hover{
    background:linear-gradient(135deg,#F8C8D2,#FFF8F5);
    box-shadow:0 4px 10px rgba(90,59,67,.09);
}

@media(max-width:360px){
    .home-catalog .home-product-grid .package-group{
        gap:7px;
    }

    .home-catalog .home-product-grid .price-row{
        min-height:99px;
        padding-right:4px;
        padding-left:4px;
    }

    .home-catalog .home-product-grid .price-row > span:nth-child(2){
        font-size:17px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:70px;
    }
}

@media(prefers-reduced-motion:reduce){
    .home-catalog .home-product-grid .price-row{
        transition:none;
    }
}

.category-section .featured-category-grid{
    align-items:stretch;
    gap:12px;
}

.category-section .featured-category-grid > .premium-app-card,
.category-section .featured-category-grid > .premium-app-card:nth-child(2),
.category-section .featured-category-grid > .premium-app-card:nth-child(4){
    min-height:132px;
    justify-content:center;
    gap:0;
    padding:13px 9px 12px;
    overflow:hidden;
    border:1px solid rgba(217,124,149,.14);
    border-radius:20px;
    background:linear-gradient(155deg,#FFFCFA,#FFF6F3);
    box-shadow:0 4px 12px rgba(90,59,67,.035);
    transform:none;
}

.category-section .featured-category-grid > .premium-app-card:hover,
.category-section .featured-category-grid > .premium-app-card:nth-child(2):hover,
.category-section .featured-category-grid > .premium-app-card:nth-child(4):hover{
    transform:translateY(-2px);
    border-color:rgba(217,124,149,.28);
    background:linear-gradient(155deg,#FFFDFC,#FFF5F2);
    box-shadow:0 7px 16px rgba(90,59,67,.065);
}

.category-section .featured-category-grid > .premium-app-card::after{
    content:none;
}

.category-section .premium-app-card .category-mark,
.category-section .premium-app-card:nth-child(2) .category-mark{
    flex:0 0 46px;
    width:46px;
    height:46px;
    margin:0 0 8px;
    border:1px solid rgba(217,124,149,.12);
    border-radius:15px;
    background:#FFFDFC;
    box-shadow:0 3px 9px rgba(90,59,67,.045);
    font-size:21px;
}

.category-section .premium-app-card .category-mark img{
    width:27px;
    height:27px;
    object-fit:contain;
}

.category-section .premium-app-card .category-name{
    font-size:13px;
    line-height:1.25;
}

.category-section .premium-app-card .category-starting-price{
    margin-top:3px;
    padding-top:0;
    color:#9B7180;
    font-size:10px;
    font-weight:600;
}

.category-section .all-category-grid > .has-product-logo{
    min-height:91px;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:9px 4px;
    text-align:center;
}

.category-section .all-category-grid > .has-product-logo .category-mark{
    flex:0 0 46px;
    width:46px;
    height:46px;
    margin:0;
    border:1px solid rgba(217,124,149,.12);
    border-radius:15px;
    background:#FFFDFC;
    box-shadow:0 3px 9px rgba(90,59,67,.045);
}

.category-section .all-category-grid > .has-product-logo .category-mark img{
    width:27px;
    height:27px;
    object-fit:contain;
}

.home-catalog #catalog-netflix h3::before,
.home-catalog #catalog-spotify h3::before,
.home-catalog #catalog-canva h3::before{
    content:"";
    background-color:#FFFDFC;
    background-position:center;
    background-repeat:no-repeat;
    background-size:23px 23px;
}

.home-catalog #catalog-netflix h3::before{
    background-image:url("./images/netflix-192.png");
}

.home-catalog #catalog-spotify h3::before{
    background-image:url("./images/spotify-192.png");
}

.home-catalog #catalog-canva h3::before{
    background-image:url("./images/canva-192.png");
}

.home-catalog #catalog-chatgpt h3::before{
    content:"";
    background-image:url("./images/chatgpt.png");
}

.home-catalog #catalog-wink h3::before{
    content:"";
    background-image:url("./images/wink.png");
}

.home-catalog #catalog-meitu h3::before{
    content:"";
    background-image:url("./images/meitu.png");
}

.product-popup.active #popup-name{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
}

.product-popup.active #popup-name::before{
    display:block;
    width:44px;
    height:44px;
    padding:6px;
    border:1px solid rgba(217,124,149,.14);
    border-radius:14px;
    background-color:#FFFDFC;
    background-position:center;
    background-repeat:no-repeat;
    background-size:25px 25px;
    box-shadow:0 3px 9px rgba(90,59,67,.045);
    content:"";
}

body:has(#catalog-netflix) .product-popup.active #popup-name::before{
    background-image:url("./images/netflix-192.png");
}

body:has(#catalog-spotify) .product-popup.active #popup-name::before{
    background-image:url("./images/spotify-192.png");
}

body:has(#catalog-canva) .product-popup.active #popup-name::before{
    background-image:url("./images/canva-192.png");
}

body:has(#catalog-chatgpt) .product-popup.active #popup-name::before{
    background-image:url("./images/chatgpt.png");
}

body:has(#catalog-wink) .product-popup.active #popup-name::before{
    background-image:url("./images/wink.png");
}

body:has(#catalog-meitu) .product-popup.active #popup-name::before{
    background-image:url("./images/meitu.png");
}

@media(max-width:760px){
    .category-section .featured-category-grid{
        gap:9px;
    }

    .category-section .featured-category-grid > .premium-app-card,
    .category-section .featured-category-grid > .premium-app-card:nth-child(2),
    .category-section .featured-category-grid > .premium-app-card:nth-child(4){
        min-height:122px;
        padding:10px 7px;
    }

    .category-section .all-category-grid > .has-product-logo{
        min-height:84px;
    }
}

@media(max-width:380px){
    .category-section .featured-category-grid > .premium-app-card,
    .category-section .featured-category-grid > .premium-app-card:nth-child(2),
    .category-section .featured-category-grid > .premium-app-card:nth-child(4){
        min-height:116px;
    }

    .category-section .premium-app-card .category-mark,
    .category-section .premium-app-card:nth-child(2) .category-mark{
        flex-basis:42px;
        width:42px;
        height:42px;
        margin-bottom:7px;
    }

    .category-section .all-category-grid > .has-product-logo .category-mark{
        flex-basis:42px;
        width:42px;
        height:42px;
    }
}

.payment-popup .checkout-total-section{
    position:relative;
    overflow:hidden;
    margin:13px 0;
    padding:18px 16px 20px;
    border:1px solid rgba(217,124,149,.24);
    border-radius:23px;
    background:
        radial-gradient(ellipse at 50% 0,rgba(255,255,255,.82),transparent 58%),
        linear-gradient(145deg,#FBE1E6 0%,#FFF0EB 56%,#FFF8F2 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        0 9px 24px rgba(126,75,91,.075);
    text-align:center;
}

.payment-popup .checkout-total-section::before{
    position:absolute;
    top:0;
    left:50%;
    width:58px;
    height:2px;
    border-radius:0 0 3px 3px;
    background:linear-gradient(90deg,#E8A4B5,#D988A0);
    content:"";
    transform:translateX(-50%);
}

.payment-popup .checkout-total-section h3{
    margin:0 0 7px;
    color:#96727B;
    font-size:10px;
    font-weight:700;
    letter-spacing:.2em;
}

.payment-popup .checkout-total{
    color:#583A43;
    font-size:clamp(42px,12vw,52px);
    font-weight:750;
    letter-spacing:-.045em;
    line-height:1.05;
}

/* Boutique catalog package menu */
.home-catalog .home-product-grid .product-card{
    padding:25px 30px 24px;
}

.home-catalog .home-product-grid .product-card::before{
    content:none;
}

.home-catalog .home-product-grid .product-card h3{
    min-height:0;
    gap:7px;
    margin:0 0 15px;
    padding:0 0 14px;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    font-size:22px;
    line-height:1.2;
}

.home-catalog .home-product-grid .product-card h3::before{
    flex:0 0 39px;
    width:39px;
    height:39px;
    border:1px solid rgba(217,124,149,.14);
    border-radius:13px;
    background-color:#FFFDFC;
    background-position:center;
    background-repeat:no-repeat;
    background-size:23px 23px;
    box-shadow:0 3px 9px rgba(90,59,67,.045);
    color:#B96F83;
    content:"✿";
    font-family:Georgia,serif;
    font-size:18px;
    font-weight:400;
}

.home-catalog .home-product-grid .package-group,
.home-catalog .home-product-grid .package-group + .package-group{
    display:block;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.home-catalog .home-product-grid .package-group + .package-group{
    margin-top:13px;
    padding-top:12px;
    border-top:1px solid rgba(185,130,147,.15);
}

.home-catalog .home-product-grid .price-category{
    display:table;
    max-width:100%;
    margin:0 0 5px;
    padding:4px 10px;
    border:1px solid rgba(217,124,149,.14);
    border-radius:999px;
    background:rgba(248,200,210,.24);
    color:#896571;
    font-size:10px;
    font-weight:650;
    letter-spacing:.035em;
    line-height:1.25;
}

.home-catalog .home-product-grid .price-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(68px,.55fr) 68px;
    align-items:center;
    min-width:0;
    min-height:43px;
    gap:9px;
    padding:5px 7px;
    border:0;
    border-bottom:1px solid rgba(185,130,147,.12);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    text-align:left;
    transition:background-color .18s ease;
}

.home-catalog .home-product-grid .price-row:last-child{
    border-bottom:0;
}

#home-catalog .home-product-grid .package-group > .price-row:nth-of-type(2),
#home-catalog .home-product-grid .package-group > .price-row:last-child{
    border-radius:0;
}

.home-catalog .home-product-grid .price-row:hover{
    transform:none;
    border-radius:9px;
    background:rgba(255,241,234,.56);
    box-shadow:none;
}

.home-catalog .home-product-grid .price-row > span:first-child{
    min-width:0;
    padding:0;
    color:#765A63;
    font-size:12px;
    font-weight:500;
    letter-spacing:0;
    line-height:1.35;
    text-align:left;
    text-transform:none;
}

.home-catalog .home-product-grid .price-row > span:nth-child(2){
    min-width:0;
    padding:0;
    color:#583A43;
    font-size:15px;
    font-weight:750;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.01em;
    line-height:1.25;
    text-align:center;
}

.home-catalog .home-product-grid .package-select-btn{
    justify-self:end;
    width:68px;
    min-width:68px;
    height:30px;
    min-height:30px;
    padding:4px 8px;
    border:1px solid rgba(217,124,149,.2);
    border-radius:999px;
    background:linear-gradient(135deg,#FCE8EC,#FFF4EE);
    box-shadow:none;
    color:#805A67;
    font-size:10px;
    font-weight:650;
    line-height:1;
}

.home-catalog .home-product-grid .package-select-btn:hover{
    transform:translateY(-1px);
    border-color:rgba(217,124,149,.34);
    background:linear-gradient(135deg,#F8D6DE,#FFF8F5);
    box-shadow:0 3px 8px rgba(90,59,67,.06);
}

.home-catalog .home-product-grid .package-select-btn.selected{
    border-color:rgba(217,124,149,.4);
    background:#F8DDE3;
    box-shadow:none;
    color:#664653;
}

@media(max-width:600px){
    .home-catalog .home-product-grid .product-card{
        padding:22px 15px 20px;
    }

    .home-catalog .home-product-grid .product-card h3{
        gap:7px;
        margin-bottom:13px;
        padding:0 0 12px;
        font-size:20px;
    }

    .home-catalog .home-product-grid .product-card h3::before{
        flex-basis:36px;
        width:36px;
        height:36px;
        background-size:21px 21px;
    }

    .home-catalog .home-product-grid .package-group{
        padding-right:3px;
        padding-left:3px;
    }

    .home-catalog .home-product-grid .price-row{
        grid-template-columns:minmax(0,1fr) minmax(64px,.55fr) 64px;
        min-height:42px;
        gap:6px;
        padding-right:5px;
        padding-left:5px;
    }

    .home-catalog .home-product-grid .price-row > span:first-child{
        font-size:12px;
    }

    .home-catalog .home-product-grid .price-row > span:nth-child(2){
        font-size:14px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:64px;
        min-width:64px;
    }
}

@media(max-width:360px){
    .home-catalog .home-product-grid .product-card{
        padding-right:12px;
        padding-left:12px;
    }

    .home-catalog .home-product-grid .price-row{
        grid-template-columns:minmax(0,1fr) minmax(60px,.55fr) 60px;
        gap:5px;
        padding-right:3px;
        padding-left:3px;
    }

    .home-catalog .home-product-grid .package-select-btn{
        width:60px;
        min-width:60px;
    }
}

@media(prefers-reduced-motion:reduce){
    .home-catalog .home-product-grid .price-row,
    .home-catalog .home-product-grid .package-select-btn{
        transition:none;
    }
}

/* Produk dinonaktifkan di admin: tetap tampil, tetapi tidak bisa dipilih */
.category-card.is-unavailable,
.category-card.is-unavailable:hover{
    opacity:.62;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

.category-card.is-unavailable .category-mark{
    filter:grayscale(1);
}

.unavailable-label,
.category-card.is-unavailable .category-starting-price{
    display:inline-block;
    margin-top:2px;
    padding:1px 7px;
    border-radius:999px;
    background:rgba(90,59,67,.1);
    color:#7d5e68;
    font-size:9.5px;
    font-weight:600;
    line-height:1.45;
}

/* ===== Pop up: pilihan paket, info produk, pembayaran =====
   Satu desain untuk ketiganya. Selector memakai id supaya menang atas
   aturan lama yang berlapis di atas. Di layar kecil tampil sebagai sheet bawah. */

:root{
    --pop-ink:#5A3B43;
    --pop-muted:#8B6570;
    --pop-accent:#D97C95;
    --pop-accent-deep:#B96F83;
    --pop-soft:#FCE1E6;
    --pop-cream:#FFF8F5;
    --pop-line:rgba(217,124,149,.24);
}

/* latar */
#home-catalog.home-catalog,
#product-popup,
#payment-popup{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:16px;
    border:0;
    border-radius:0;
    background:rgba(90,59,67,.45);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease,visibility .22s ease;
}

#home-catalog.home-catalog{z-index:900;}
#payment-popup{z-index:999;}
#product-popup{z-index:9999;}

#home-catalog.home-catalog.active,
#product-popup.active,
#payment-popup.active{
    opacity:1;
    visibility:visible;
}

/* kotak */
#home-catalog .home-catalog-box,
#product-popup .popup-box,
#payment-popup .payment-box{
    position:relative;
    width:min(480px,100%);
    max-width:100%;
    max-height:min(88vh,860px);
    max-height:min(88dvh,860px);
    margin:0;
    border:1px solid var(--pop-line);
    border-radius:28px;
    background:linear-gradient(180deg,#FFEFF3 0,#FFFDFC 130px);
    box-shadow:0 24px 70px rgba(90,59,67,.28);
    color:var(--pop-ink);
    overscroll-behavior:contain;
}

#home-catalog .home-catalog-box{
    display:flex;
    flex-direction:column;
    padding:0;
    overflow:hidden;
    transform:translateY(12px) scale(.98);
    transition:transform .28s ease;
}

#home-catalog.active .home-catalog-box{transform:none;}

#product-popup .popup-box,
#payment-popup .payment-box{
    display:block;
    padding:24px 22px 22px;
    overflow-y:auto;
}

#product-popup .popup-box::before,
#product-popup .popup-box::after,
#payment-popup .payment-box::before,
#payment-popup .payment-box::after{
    display:none;
}

/* tombol tutup */
#home-catalog .catalog-close,
#product-popup .popup-close,
#payment-popup .payment-close{
    position:absolute;
    top:14px;
    right:14px;
    left:auto;
    z-index:3;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    margin:0;
    padding:0;
    border:1px solid var(--pop-line);
    border-radius:50%;
    background:#fff;
    color:var(--pop-muted);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(90,59,67,.1);
    transition:transform .2s ease,background .2s ease,color .2s ease;
}

#home-catalog .catalog-close:hover,
#product-popup .popup-close:hover,
#payment-popup .payment-close:hover{
    transform:rotate(90deg);
    background:var(--pop-soft);
    color:var(--pop-accent-deep);
}

/* ---------- 1. pilihan paket ---------- */
#home-catalog .home-catalog-content{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:20px 18px 6px;
}

#home-catalog .home-product-grid{
    position:static;
    display:block;
    width:100%;
    margin:0;
    left:auto;
    transform:none;
}

#home-catalog .home-product-grid .product-card{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
}

#home-catalog .home-product-grid .product-card::before,
#home-catalog .home-product-grid .product-card::after{
    display:none;
}

#home-catalog .home-product-grid .product-card h3{
    position:static;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-height:0;
    margin:0 0 16px;
    padding:0 48px 14px 0;
    border:0;
    border-bottom:1px solid var(--pop-line);
    color:var(--pop-ink);
    font-size:22px;
    font-weight:700;
    letter-spacing:0;
    line-height:1.2;
    text-align:left;
}

#home-catalog .home-product-grid .product-card h3::before{
    flex:none;
    width:48px;
    height:48px;
    margin:0;
}

#home-catalog .home-product-grid .package-group{
    margin:0 0 12px;
    padding:10px 10px 4px;
    border:1px solid var(--pop-line);
    border-radius:18px;
    background:#fff;
    box-shadow:none;
}

#home-catalog .home-product-grid .package-group + .package-group{margin-top:0;}

#home-catalog .home-product-grid .price-category{
    display:block;
    margin:0;
    padding:2px 6px 8px;
    border:0;
    border-radius:0;
    background:none;
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-align:left;
    text-transform:uppercase;
}

#home-catalog .home-product-grid .price-row,
#home-catalog .home-product-grid .package-group > .price-row:nth-of-type(2),
#home-catalog .home-product-grid .price-row:last-child{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 84px;
    align-items:center;
    gap:10px;
    min-height:0;
    margin:0;
    padding:9px 6px;
    border:0;
    border-top:1px solid rgba(217,124,149,.15);
    border-radius:0;
    background:none;
    box-shadow:none;
}

#home-catalog .home-product-grid .price-row:has(.package-select-btn.selected){
    border-radius:12px;
    background:rgba(252,225,230,.6);
}

#home-catalog .home-product-grid .price-row > span:first-child{
    min-width:0;
    padding:0;
    color:var(--pop-ink);
    font-size:15px;
    font-weight:500;
    text-align:left;
}

#home-catalog .home-product-grid .price-row > span:nth-child(2){
    min-width:0;
    margin:0;
    padding:0;
    color:#76515E;
    font-size:15px;
    font-weight:700;
    text-align:right;
    white-space:nowrap;
}

#home-catalog .home-product-grid .package-select-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:84px;
    min-width:84px;
    height:36px;
    min-height:0;
    margin:0;
    padding:0 10px;
    border:1px solid rgba(217,124,149,.5);
    border-radius:999px;
    background:#fff;
    box-shadow:none;
    color:var(--pop-accent-deep);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}

#home-catalog .home-product-grid .package-select-btn:hover{
    background:var(--pop-soft);
    transform:translateY(-1px);
}

#home-catalog .home-product-grid .package-select-btn.selected{
    border-color:var(--pop-accent);
    background:linear-gradient(135deg,#E892A8,#D97C95);
    box-shadow:0 5px 12px rgba(217,124,149,.32);
    color:#fff;
}

#home-catalog .home-product-grid .product-info-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin:2px 0 6px;
    padding:10px 14px;
    border:1px dashed rgba(185,111,131,.45);
    border-radius:14px;
    background:var(--pop-cream);
    box-shadow:none;
    color:var(--pop-muted);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

#home-catalog .home-product-grid .product-info-btn:hover{
    background:var(--pop-soft);
    color:var(--pop-accent-deep);
}

#home-catalog .catalog-empty-state{
    margin:28px 30px 22px;
    padding:0;
    background:none;
    text-align:center;
}

/* bagian bawah: ringkasan pilihan + tombol bayar, selalu terlihat */
#home-catalog .home-catalog-actions{
    flex:none;
    display:grid;
    justify-items:stretch;
    gap:10px;
    margin:0;
    padding:12px 18px 16px;
    border-top:1px solid var(--pop-line);
    background:rgba(255,253,252,.97);
}

#home-catalog .home-catalog-actions[hidden]{display:none;}

#home-catalog .selection-status{
    width:100%;
    margin:0;
    padding:9px 12px;
    border:1px solid var(--pop-line);
    border-radius:14px;
    background:var(--pop-cream);
    color:var(--pop-muted);
    font-size:13px;
    line-height:1.45;
    text-align:left;
}

#home-catalog .selection-status.selection-warning{
    border-color:rgba(176,56,79,.3);
    background:#FFF0F2;
    color:#B0384F;
}

#home-catalog .sel-main{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    color:var(--pop-ink);
}

#home-catalog .sel-price{
    flex:none;
    color:var(--pop-accent-deep);
    font-weight:700;
    white-space:nowrap;
}

#home-catalog .sel-sub{
    display:block;
    margin-top:2px;
    font-size:12px;
}

#home-catalog .home-catalog-actions .payment-btn{
    width:100%;
    max-width:none;
    min-height:46px;
    margin:0;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#E892A8,#D97C95);
    box-shadow:0 8px 18px rgba(217,124,149,.34);
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

/* ---------- 2. info produk ---------- */
#product-popup .popup-box h2,
#product-popup.active #popup-name{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-height:0;
    margin:0 44px 16px 0;
    padding:0 0 14px;
    border-bottom:1px solid var(--pop-line);
    color:var(--pop-ink);
    font-size:22px;
    font-weight:700;
    letter-spacing:0;
    text-align:left;
}

#product-popup .popup-box h2::after,
#product-popup #popup-name::after{
    display:none;
}

#product-popup #popup-name::before{
    flex:none;
    width:44px;
    height:44px;
    margin:0;
}

#product-popup .popup-section{
    margin:0 0 16px;
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
}

#product-popup .popup-section:last-child{margin-bottom:0;}

#product-popup .popup-section h4{
    margin:0 0 8px;
    padding:0;
    border:0;
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-align:left;
    text-transform:uppercase;
}

#product-popup #popup-description{
    margin:0;
    padding:0;
    border:0;
    background:none;
    color:var(--pop-ink);
    font-size:14px;
    line-height:1.65;
    text-align:left;
}

#product-popup #popup-details,
#product-popup #popup-rules{
    margin:0;
    padding:0;
    list-style:none;
}

#product-popup .popup-package-item{
    position:relative;
    margin:0 0 8px;
    padding:10px 12px;
    border:1px solid var(--pop-line);
    border-radius:14px;
    background:#fff;
    box-shadow:none;
}

#product-popup .popup-package-item::before{display:none;}

#product-popup .popup-package-item strong{
    display:block;
    color:var(--pop-ink);
    font-size:14px;
    font-weight:600;
}

#product-popup .popup-package-item p{
    margin:3px 0 0;
    color:var(--pop-muted);
    font-size:13px;
    line-height:1.5;
}

#product-popup #popup-rules li{
    position:relative;
    margin:0;
    padding:6px 0 6px 24px;
    color:var(--pop-ink);
    font-size:14px;
    line-height:1.55;
    text-align:left;
}

#product-popup #popup-rules li::before{
    content:"✦";
    position:absolute;
    top:6px;
    left:2px;
    display:block;
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    background:none;
    transform:none;
    color:var(--pop-accent);
    font-size:13px;
    line-height:1.55;
}

#product-popup #popup-warranty{
    display:grid;
    gap:8px;
    margin:0;
    padding:0;
}

#product-popup .popup-warranty-item{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    margin:0;
    padding:10px 12px;
    border:1px solid var(--pop-line);
    border-radius:14px;
    background:var(--pop-cream);
}

#product-popup .popup-warranty-tag{
    display:inline-block;
    padding:2px 10px;
    border-radius:999px;
    background:var(--pop-soft);
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:600;
}

#product-popup .popup-warranty-note{
    color:var(--pop-muted);
    font-size:13px;
    line-height:1.5;
}

/* ---------- 3. pembayaran ---------- */
#payment-popup .checkout-header{
    margin:0 0 16px;
    padding:0 40px 0 0;
    text-align:left;
}

#payment-popup .checkout-eyebrow{
    display:block;
    margin:0 0 2px;
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#payment-popup .checkout-header h2{
    margin:0;
    color:var(--pop-ink);
    font-size:22px;
    font-weight:700;
    letter-spacing:0;
}

#payment-popup .checkout-header p{
    margin:4px 0 0;
    color:var(--pop-muted);
    font-size:13px;
}

#payment-popup .checkout-section{
    margin:0 0 12px;
    padding:13px 15px;
    border:1px solid var(--pop-line);
    border-radius:16px;
    background:#fff;
    box-shadow:none;
    text-align:left;
}

#payment-popup .checkout-section h3{
    margin:0 0 8px;
    padding:0;
    border:0;
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-align:left;
}

#payment-popup .payment-order-summary{
    display:grid;
    gap:2px;
}

#payment-popup .checkout-product{
    color:var(--pop-ink);
    font-size:17px;
}

#payment-popup .checkout-order-package,
#payment-popup .checkout-order-duration{
    color:var(--pop-muted);
    font-size:14px;
}

#payment-popup .checkout-total-section{
    background:linear-gradient(135deg,#FFF1F4,#FFF8F5);
}

#payment-popup .checkout-total{
    color:var(--pop-accent-deep);
    font-size:26px;
    font-weight:700;
    line-height:1.2;
}

#payment-popup .checkout-warranty{
    display:grid;
    gap:2px;
    color:var(--pop-muted);
    font-size:13px;
    line-height:1.5;
}

#payment-popup .checkout-warranty strong{
    color:var(--pop-ink);
    font-size:14px;
}

#payment-popup .checkout-payment-section{text-align:center;}
#payment-popup .checkout-payment-section h3{text-align:left;}

#payment-popup .qris-image{
    display:block;
    width:min(240px,100%);
    height:auto;
    margin:4px auto 8px;
    padding:8px;
    border:1px solid var(--pop-line);
    border-radius:16px;
    background:#fff;
}

#payment-popup .checkout-instruction{
    margin:0;
    color:var(--pop-muted);
    font-size:13px;
}

#payment-popup .checkout-steps{
    margin:0;
    padding-left:20px;
    color:var(--pop-ink);
    font-size:14px;
    line-height:1.7;
}

#payment-popup .confirm-payment-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:48px;
    margin:4px 0 0;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#E892A8,#D97C95);
    box-shadow:0 8px 18px rgba(217,124,149,.34);
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

#payment-popup #payment-confirmation-status{
    margin:8px 0 0;
    color:var(--pop-muted);
    font-size:13px;
    text-align:center;
}

#payment-popup .payment-verification-note{
    margin:10px 0 0;
    color:var(--pop-muted);
    font-size:12px;
    line-height:1.5;
    text-align:center;
}

#payment-popup .payment-issue{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:12px 0 0;
    padding:10px 0 0;
    border-top:1px solid var(--pop-line);
    font-size:13px;
}

#payment-popup .payment-issue p{margin:0;color:var(--pop-muted);}
#payment-popup .payment-issue a{color:var(--pop-accent-deep);font-weight:600;}

/* ---------- layar kecil: tampil sebagai sheet dari bawah ---------- */
@media (max-width:600px){
    #home-catalog.home-catalog,
    #product-popup,
    #payment-popup{
        align-items:flex-end;
        padding:0;
    }

    #home-catalog .home-catalog-box,
    #product-popup .popup-box,
    #payment-popup .payment-box{
        width:100%;
        max-height:92vh;
        max-height:92dvh;
        border-bottom:0;
        border-radius:24px 24px 0 0;
    }

    #home-catalog .home-catalog-box{transform:translateY(40px);}

    #product-popup .popup-box,
    #payment-popup .payment-box{padding:22px 16px 20px;}

    #home-catalog .home-catalog-content{padding:18px 14px 4px;}
    #home-catalog .home-catalog-actions{padding:10px 14px calc(14px + env(safe-area-inset-bottom));}

    #home-catalog .home-product-grid .price-row,
    #home-catalog .home-product-grid .package-group > .price-row:nth-of-type(2),
    #home-catalog .home-product-grid .price-row:last-child{
        grid-template-columns:minmax(0,1fr) auto 76px;
        gap:8px;
    }

    #home-catalog .home-product-grid .package-select-btn{
        width:76px;
        min-width:76px;
        font-size:12px;
    }

    #home-catalog .home-product-grid .price-row > span:first-child,
    #home-catalog .home-product-grid .price-row > span:nth-child(2){font-size:14px;}
}

/* pop up paket sekarang di luar .home-section: pastikan tidak ada garis atas bawaan */
#home-catalog.home-catalog{border-top:0;}


/* ===== Pop up Info Produk: tampilan lebih cantik ===== */
#product-popup .popup-box{
    padding:22px 20px 20px;
    scrollbar-width:thin;
    scrollbar-color:rgba(217,124,149,.45) transparent;
}

/* tombol tutup menempel di kanan atas saat konten digulir */
#product-popup .popup-close{
    position:sticky;
    top:0;
    float:right;
    margin:-4px -4px 0 10px;
}

#product-popup .popup-head{
    display:flow-root;
    margin:0 0 16px;
    padding:0 0 16px;
    border-bottom:1px dashed rgba(217,124,149,.35);
}

#product-popup .popup-eyebrow{
    display:inline-block;
    margin:0 0 10px;
    padding:3px 11px;
    border-radius:999px;
    background:var(--pop-soft);
    color:var(--pop-accent-deep);
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

#product-popup .popup-head #popup-name{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0;
    padding:0;
    border:0;
    color:var(--pop-ink);
    font-size:clamp(22px,6vw,27px);
    font-weight:700;
    line-height:1.15;
    text-align:left;
}

#product-popup .popup-head #popup-name::before{
    flex:none;
    width:56px;
    height:56px;
    border:3px solid #fff;
    border-radius:18px;
    box-shadow:0 6px 16px rgba(90,59,67,.16),0 0 0 1px rgba(217,124,149,.25);
}

/* deskripsi */
#product-popup .popup-intro-section{
    padding:12px 14px;
    border-left:3px solid var(--pop-accent);
    border-radius:4px 14px 14px 4px;
    background:rgba(252,225,230,.45);
}

#product-popup .popup-intro-section #popup-description:empty{display:none;}
#product-popup .popup-intro-section:has(#popup-description:empty){display:none;}

/* judul bagian */
#product-popup .popup-section h4{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 10px;
}

#product-popup .popup-section h4::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg,rgba(217,124,149,.35),transparent);
}

#product-popup .popup-packages-section h4::before{content:"✦";}
#product-popup .popup-notes-section h4::before{content:"☆";}
#product-popup .popup-warranty-section h4::before{content:"✓";}

/* paket bernomor */
#product-popup #popup-details{counter-reset:pkg;}

#product-popup .popup-package-item{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    column-gap:12px;
    align-items:start;
    counter-increment:pkg;
    margin:0 0 8px;
    padding:12px 14px;
    border:1px solid var(--pop-line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 3px 10px rgba(90,59,67,.04);
}

#product-popup .popup-package-item::before{
    content:counter(pkg);
    position:static;
    display:grid;
    grid-row:1 / span 2;
    place-items:center;
    width:28px;
    height:28px;
    margin:0;
    border:0;
    border-radius:50%;
    background:linear-gradient(135deg,#F8C8D2,#E892A8);
    transform:none;
    color:#fff;
    font-size:13px;
    font-weight:700;
}

#product-popup .popup-package-item strong{grid-column:2;}
#product-popup .popup-package-item p{grid-column:2;}

/* info penting */
#product-popup #popup-rules{
    padding:6px 14px;
    border:1px solid var(--pop-line);
    border-radius:16px;
    background:var(--pop-cream);
}

#product-popup #popup-rules:empty{display:none;}
#product-popup .popup-notes-section:has(#popup-rules:empty){display:none;}

#product-popup #popup-rules li + li{
    border-top:1px dashed rgba(217,124,149,.25);
}

/* garansi berwarna sesuai jenis */
#product-popup .popup-warranty-item{
    --w:#2F7D57;
    --w-bg:#E7F5EC;
    border-color:color-mix(in srgb,var(--w) 22%,transparent);
    background:#fff;
}

#product-popup .popup-warranty-item[data-warranty="1x"],
#product-popup .popup-warranty-item[data-warranty="2x"]{--w:#A67510;--w-bg:#FBF0D2;}
#product-popup .popup-warranty-item[data-warranty="no"]{--w:#B0384F;--w-bg:#FBE1E6;}
#product-popup .popup-warranty-item[data-warranty="pending"]{--w:#6F6670;--w-bg:#EEEAEE;}

#product-popup .popup-warranty-tag{
    background:var(--w-bg);
    color:var(--w);
}

/* tombol bawah */
#product-popup .popup-ok{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:46px;
    margin:18px 0 0;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,#E892A8,#D97C95);
    box-shadow:0 8px 18px rgba(217,124,149,.32);
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease;
}

#product-popup .popup-ok:hover{
    transform:translateY(-1px);
    box-shadow:0 11px 22px rgba(217,124,149,.38);
}

/* muncul bertahap */
@keyframes info-rise{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:none}
}

#product-popup.active .popup-head,
#product-popup.active .popup-section,
#product-popup.active .popup-ok{
    animation:info-rise .42s ease both;
}

#product-popup.active .popup-intro-section{animation-delay:.05s;}
#product-popup.active .popup-packages-section{animation-delay:.1s;}
#product-popup.active .popup-notes-section{animation-delay:.15s;}
#product-popup.active .popup-warranty-section{animation-delay:.2s;}
#product-popup.active .popup-ok{animation-delay:.25s;}

@media (prefers-reduced-motion:reduce){
    #product-popup.active .popup-head,
    #product-popup.active .popup-section,
    #product-popup.active .popup-ok{animation:none;}
}

@media (max-width:600px){
    #product-popup .popup-box{padding:26px 16px 18px;}

    /* pegangan sheet */
    #product-popup .popup-box::before{
        content:"";
        position:absolute;
        top:9px;
        left:50%;
        display:block;
        width:40px;
        height:4px;
        border-radius:2px;
        background:rgba(185,111,131,.3);
        transform:translateX(-50%);
    }
}


/* ===== Card produk di beranda =====
   Selector memakai #category-highlights agar menang atas aturan lama yang berlapis. */

#category-highlights{
    --card-line:rgba(217,124,149,.22);
    --card-accent:#D97C95;
    --card-accent-deep:#B96F83;
    --card-ink:#5A3B43;
    --card-ease:cubic-bezier(.2,.8,.2,1);
}

#category-highlights .category-card{
    transition:transform .28s var(--card-ease),box-shadow .28s ease,border-color .28s ease,background .28s ease;
}

#category-highlights .category-card:focus-visible{
    outline:3px solid rgba(217,124,149,.5);
    outline-offset:2px;
}

/* --- kartu aplikasi unggulan (Netflix, Spotify, Canva, ChatGPT) --- */
#category-highlights .featured-category-grid{
    align-items:stretch;
    gap:14px;
}

#category-highlights .featured-category-grid > .premium-app-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    min-height:clamp(128px,36vw,156px);
    padding:16px 6px 13px;
    overflow:hidden;
    border:1px solid var(--card-line);
    border-radius:24px;
    background:
        radial-gradient(circle at 50% -8%,rgba(248,200,210,.6),transparent 62%),
        linear-gradient(180deg,#FFFFFF,#FFF8F5);
    box-shadow:0 6px 16px rgba(90,59,67,.06),inset 0 1px 0 #fff;
    text-align:center;
    transform:none;
}

#category-highlights .premium-app-card .category-mark{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:clamp(42px,12.5vw,62px);
    height:clamp(42px,12.5vw,62px);
    margin:0 0 10px;
    border:3px solid #fff;
    border-radius:clamp(14px,4vw,20px);
    background:linear-gradient(145deg,#FFFFFF,#FDEBF0);
    box-shadow:0 8px 18px rgba(90,59,67,.13),0 0 0 1px rgba(217,124,149,.18);
    transition:transform .3s var(--card-ease);
}

#category-highlights .premium-app-card .category-mark img{
    width:62%;
    height:62%;
    object-fit:contain;
}

#category-highlights .premium-app-card .category-name{
    color:var(--card-ink);
    font-size:clamp(11px,3.2vw,14px);
    font-weight:700;
    line-height:1.2;
}

#category-highlights .premium-app-card .category-starting-price{
    margin-top:7px;
    padding:3px 9px;
    border-radius:999px;
    background:#FCE1E6;
    color:#A65D72;
    font-size:clamp(9px,2.5vw,11px);
    font-weight:600;
    letter-spacing:.01em;
    line-height:1.3;
    white-space:nowrap;
}

/* --- kartu layanan (Discord, Roblox) --- */
#category-highlights .featured-category-grid > .feature-service-sticker{
    position:relative;
    grid-column:span 2;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    min-height:88px;
    padding:14px clamp(12px,3.5vw,20px);
    overflow:hidden;
    border:1px solid var(--card-line);
    border-radius:24px;
    background:linear-gradient(115deg,#FBD3DC,#FFF3EF 62%,#FFFFFF);
    box-shadow:0 6px 16px rgba(90,59,67,.06),inset 0 1px 0 #fff;
    text-align:left;
    transform:none;
}

#category-highlights .featured-category-grid > .discord-service-sticker{
    background:linear-gradient(115deg,#E3E0FA,#FFF4F2 62%,#FFFFFF);
}

#category-highlights .featured-category-grid > .roblox-service-sticker{
    background:linear-gradient(115deg,#FFD9D2,#FFF4EE 62%,#FFFFFF);
}

#category-highlights .feature-service-sticker .category-mark{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:clamp(42px,12vw,54px);
    height:clamp(42px,12vw,54px);
    margin:0;
    border:3px solid #fff;
    border-radius:18px;
    background:linear-gradient(145deg,#FFFFFF,#FDEBF0);
    box-shadow:0 7px 16px rgba(90,59,67,.13),0 0 0 1px rgba(217,124,149,.18);
    color:var(--card-accent-deep);
    font-size:22px;
    font-weight:700;
}

#category-highlights .feature-service-sticker .category-name{
    color:var(--card-ink);
    font-size:clamp(13px,3.6vw,15px);
    font-weight:700;
}

#category-highlights .feature-service-sticker .category-details{
    color:#8B6570;
    font-size:clamp(10px,2.8vw,11.5px);
    line-height:1.4;
}

#category-highlights .sticker-sparkle{
    top:10px;
    right:14px;
    color:var(--card-accent);
    font-size:14px;
}

/* --- grid "Explore All Apps" --- */
#category-highlights .all-category-grid{
    gap:10px;
    padding:14px;
    border:1px solid var(--card-line);
    border-radius:24px;
    background:rgba(255,248,245,.7);
}

#category-highlights .all-category-grid > .category-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:clamp(88px,24vw,102px);
    padding:12px 6px;
    border:1px solid var(--card-line);
    border-radius:18px;
    background:linear-gradient(180deg,#FFFFFF,#FFF9F6);
    box-shadow:0 4px 10px rgba(90,59,67,.045);
    text-align:center;
    transform:none;
}

#category-highlights .all-category-grid > .category-card .category-mark{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:clamp(38px,10.5vw,46px);
    height:clamp(38px,10.5vw,46px);
    margin:0;
    border:2px solid #fff;
    border-radius:15px;
    background:linear-gradient(145deg,#FFFFFF,#FDEBF0);
    box-shadow:0 5px 12px rgba(90,59,67,.11),0 0 0 1px rgba(217,124,149,.16);
    color:var(--card-accent-deep);
    font-size:clamp(15px,4.2vw,19px);
    font-weight:700;
}

#category-highlights .all-category-grid > .category-card .category-mark img{
    width:60%;
    height:60%;
    object-fit:contain;
}

#category-highlights .all-category-grid > .category-card .category-name{
    color:var(--card-ink);
    font-size:clamp(10.5px,2.9vw,12.5px);
    font-weight:600;
    line-height:1.2;
}

/* --- hover & terpilih (hanya kartu yang tersedia) --- */
#category-highlights .category-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-5px);
    border-color:rgba(217,124,149,.55);
    box-shadow:0 16px 30px rgba(217,124,149,.22);
}

#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(217,124,149,.18);
}

#category-highlights .category-card:not(.is-unavailable):not(:disabled):hover .category-mark{
    transform:scale(1.07) rotate(-3deg);
}

#category-highlights .category-card:not(.is-unavailable):not(:disabled):active{
    transform:translateY(-1px) scale(.985);
}

#category-highlights .category-card.active,
#category-highlights .category-card[aria-pressed="true"]{
    border-color:var(--card-accent);
    box-shadow:0 0 0 2px rgba(217,124,149,.35),0 12px 26px rgba(217,124,149,.2);
}

#category-highlights .category-card.active::after,
#category-highlights .category-card[aria-pressed="true"]::after{
    content:"✓";
    position:absolute;
    top:8px;
    right:8px;
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--card-accent);
    box-shadow:0 3px 8px rgba(217,124,149,.4);
    color:#fff;
    font-size:12px;
    font-weight:700;
    line-height:1;
}

/* --- tidak tersedia / memuat --- */
#category-highlights .category-card.is-unavailable{
    border-style:dashed;
    background:#F6F1F0;
    box-shadow:none;
    opacity:.7;
}

#category-highlights .category-card.is-unavailable .category-starting-price,
#category-highlights .category-card .unavailable-label{
    background:rgba(90,59,67,.1);
    color:#7D5E68;
}

#category-highlights .category-card:disabled:not(.is-unavailable){
    opacity:.75;
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .category-card,
    #category-highlights .premium-app-card .category-mark{
        transition:none;
    }
    #category-highlights .category-card:hover,
    #category-highlights .category-card:hover .category-mark{
        transform:none;
    }
}


/* ===== Pop up Pesananmu (checkout): 3 langkah ===== */
#payment-popup .payment-box{
    width:min(460px,100%);
    padding:22px 18px 18px;
    scrollbar-width:thin;
    scrollbar-color:rgba(217,124,149,.45) transparent;
}

#payment-popup .payment-close{
    position:sticky;
    top:0;
    float:right;
    margin:-4px -4px 0 10px;
}

#payment-popup .checkout-header{
    display:flow-root;
    margin:0 0 16px;
    padding:0 0 14px;
    border-bottom:1px dashed rgba(217,124,149,.35);
    text-align:left;
}

#payment-popup .checkout-header h2{
    margin:0;
    font-size:clamp(22px,6vw,26px);
    line-height:1.2;
    text-transform:none;
}

#payment-popup .checkout-header p{
    margin:6px 0 0;
    font-size:13.5px;
    line-height:1.5;
}

/* kartu langkah */
#payment-popup .checkout-step{
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    column-gap:12px;
    align-items:start;
    margin:0 0 12px;
    padding:14px;
    border:1px solid var(--pop-line);
    border-radius:20px;
    background:#fff;
    box-shadow:0 4px 12px rgba(90,59,67,.045);
    text-align:left;
}

#payment-popup .step-num{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:linear-gradient(135deg,#F3A3B8,#D97C95);
    box-shadow:0 4px 10px rgba(217,124,149,.35);
    color:#fff;
    font-size:14px;
    font-weight:700;
}

#payment-popup .step-body{min-width:0;}

#payment-popup .step-title{
    margin:4px 0 10px;
    padding:0;
    color:var(--pop-ink);
    font-size:16px;
    font-weight:700;
    letter-spacing:0;
    text-transform:none;
    text-align:left;
}

#payment-popup .step-hint{
    margin:-4px 0 10px;
    color:var(--pop-muted);
    font-size:13.5px;
    line-height:1.55;
}

#payment-popup .step-hint strong{
    color:var(--pop-accent-deep);
    white-space:nowrap;
}

/* langkah 1: ringkasan */
#payment-popup .payment-order-summary{
    display:grid;
    gap:8px;
    margin:0 0 12px;
}

#payment-popup .checkout-product{
    color:var(--pop-ink);
    font-size:18px;
    line-height:1.25;
}

#payment-popup .checkout-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

#payment-popup .checkout-chip{
    padding:3px 11px;
    border-radius:999px;
    background:var(--pop-soft);
    color:#8F4A5F;
    font-size:12.5px;
    font-weight:600;
}

#payment-popup .checkout-label{
    display:block;
    margin:0 0 3px;
    color:var(--pop-accent-deep);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#payment-popup .checkout-warranty-box{
    margin:0 0 10px;
    padding:10px 12px;
    border:1px solid var(--pop-line);
    border-radius:14px;
    background:var(--pop-cream);
}

#payment-popup .checkout-warranty{
    display:grid;
    gap:2px;
    color:var(--pop-muted);
    font-size:13px;
    line-height:1.5;
}

#payment-popup .checkout-warranty strong{
    color:var(--pop-ink);
    font-size:14px;
}

#payment-popup .checkout-total-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:16px;
    background:linear-gradient(135deg,#FFE3EA,#FFF3EF);
    box-shadow:inset 0 0 0 1px rgba(217,124,149,.28);
}

#payment-popup .checkout-total-box .checkout-label{margin:0;}

#payment-popup .checkout-total{
    color:var(--pop-accent-deep);
    font-size:clamp(22px,6.5vw,27px);
    font-weight:700;
    line-height:1.1;
    text-align:right;
}

/* langkah 2: QRIS */
#payment-popup .qris-image{
    display:block;
    width:min(250px,100%);
    height:auto;
    margin:6px auto 8px;
    padding:10px;
    border:1px solid var(--pop-line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 6px 16px rgba(90,59,67,.08);
}

#payment-popup .qris-zoom{
    display:block;
    text-align:center;
    color:var(--pop-accent-deep);
    font-size:13px;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:3px;
}

/* langkah 3: konfirmasi */
#payment-popup .confirm-payment-btn{
    min-height:50px;
    margin:2px 0 0;
}

#payment-popup #payment-confirmation-status:empty{display:none;}

#payment-popup .payment-verification-note{
    margin:10px 0 0;
    text-align:left;
}

#payment-popup .payment-issue{
    margin:4px 0 0;
    padding:12px 0 0;
}

@media (max-width:600px){
    #payment-popup .payment-box{padding:24px 14px calc(16px + env(safe-area-inset-bottom));}
    #payment-popup .checkout-step{
        grid-template-columns:26px minmax(0,1fr);
        column-gap:10px;
        padding:12px;
    }
    #payment-popup .step-num{width:26px;height:26px;font-size:13px;}
}


/* ===== Premium Apps: gaya stiker kawaii ===== */
#category-highlights .featured-category-grid > .premium-app-card{
    --c1:#FFE0E6;
    --c2:#F59AB1;
    --c3:#B8465F;
    gap:0;
    padding:20px 6px 14px;
    overflow:visible;
    border:3px solid #fff;
    border-radius:30px;
    outline:2px dashed var(--c2);
    outline-offset:-9px;
    background-color:var(--c1);
    background-image:
        radial-gradient(rgba(255,255,255,.8) 2px,transparent 2.6px),
        radial-gradient(circle at 50% 108%,rgba(255,255,255,.9) 0 32%,transparent 33%);
    background-size:15px 15px,100% 100%;
    box-shadow:0 10px 22px color-mix(in srgb,var(--c2) 35%,transparent),0 2px 0 rgba(255,255,255,.9) inset;
    transform:rotate(-1.6deg);
}

#category-highlights .featured-category-grid > .premium-app-card:nth-child(even){
    transform:rotate(1.6deg);
}

#category-highlights .featured-category-grid > .premium-app-card[data-home-product="SPOTIFY"]{
    --c1:#DCF7E8;--c2:#7FD3A8;--c3:#2E7D5B;
}
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="CANVA"]{
    --c1:#DCEFFD;--c2:#86C5F2;--c3:#2F6FA3;
}
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="CHATGPT"]{
    --c1:#EADFFC;--c2:#B79CF0;--c3:#6A4BB5;
}

/* hiasan hati kecil di pojok */
#category-highlights .featured-category-grid > .premium-app-card::before{
    content:"";
    position:absolute;
    top:7px;
    left:12px;
    z-index:1;
    color:var(--c2);
    font-size:clamp(11px,3vw,15px);
    line-height:1;
    pointer-events:none;
}

/* logo bulat bergaya stiker */
#category-highlights .premium-app-card .category-mark{
    width:clamp(44px,13vw,64px);
    height:clamp(44px,13vw,64px);
    margin:0 0 9px;
    border:3px solid var(--c2);
    border-radius:50%;
    background:#fff;
    box-shadow:0 5px 0 color-mix(in srgb,var(--c2) 45%,transparent),0 10px 16px rgba(90,59,67,.1);
}

#category-highlights .premium-app-card .category-name{
    color:var(--c3);
    font-size:clamp(11.5px,3.3vw,15px);
    font-weight:700;
    letter-spacing:.01em;
}

#category-highlights .premium-app-card:not(.is-unavailable) .category-starting-price{
    margin-top:7px;
    padding:3px 10px;
    border:1.5px solid var(--c2);
    border-radius:999px;
    background:#fff;
    color:var(--c3);
    font-size:clamp(9.5px,2.6vw,11.5px);
    font-weight:700;
}

#category-highlights .premium-app-card:not(.is-unavailable) .category-starting-price::before{
    content:"";
    color:var(--c2);
}

/* hover: loncat kecil dan goyang */
#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-7px) rotate(0deg) scale(1.04);
    border-color:#fff;
    box-shadow:0 18px 30px color-mix(in srgb,var(--c2) 55%,transparent),0 2px 0 rgba(255,255,255,.9) inset;
}

#category-highlights .premium-app-card:not(.is-unavailable):not(:disabled):hover .category-mark{
    animation:cute-bounce .6s ease;
    transform:none;
}

#category-highlights .featured-category-grid > .premium-app-card.active,
#category-highlights .featured-category-grid > .premium-app-card[aria-pressed="true"]{
    outline-style:solid;
    border-color:#fff;
    box-shadow:0 0 0 3px var(--c2),0 14px 26px color-mix(in srgb,var(--c2) 50%,transparent);
}

#category-highlights .featured-category-grid > .premium-app-card[aria-pressed="true"]::after,
#category-highlights .featured-category-grid > .premium-app-card.active::after{
    background:var(--c3);
    box-shadow:0 3px 8px color-mix(in srgb,var(--c3) 45%,transparent);
}

#category-highlights .featured-category-grid > .premium-app-card.is-unavailable{
    --c1:#EFEAEA;
    --c2:#C9BDBE;
    --c3:#7D6E70;
    box-shadow:none;
    transform:none;
}

@keyframes cute-bounce{
    0%{transform:translateY(0) scale(1)}
    30%{transform:translateY(-8px) scale(1.08) rotate(-6deg)}
    55%{transform:translateY(0) scale(.96) rotate(4deg)}
    75%{transform:translateY(-3px) scale(1.03) rotate(-2deg)}
    100%{transform:translateY(0) scale(1) rotate(0)}
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .premium-app-card:hover .category-mark{animation:none;}
}


/* ===== Explore All Apps: gaya stiker kawaii (selaras dengan Premium Apps) ===== */
#category-highlights .all-category-grid{
    gap:12px;
    padding:16px 14px;
    border:2px dashed rgba(217,124,149,.4);
    border-radius:28px;
    background-color:#FFF8F5;
    background-image:radial-gradient(rgba(248,200,210,.55) 1.5px,transparent 2px);
    background-size:16px 16px;
}

#category-highlights .all-category-grid > .category-card{
    --c1:#FFE0E6;
    --c2:#F59AB1;
    --c3:#B8465F;
    position:relative;
    gap:7px;
    min-height:clamp(92px,25vw,108px);
    padding:14px 5px 11px;
    overflow:visible;
    border:3px solid #fff;
    border-radius:24px;
    outline:1.5px dashed var(--c2);
    outline-offset:-7px;
    background-color:var(--c1);
    background-image:radial-gradient(rgba(255,255,255,.8) 1.6px,transparent 2.2px);
    background-size:12px 12px;
    box-shadow:0 7px 14px color-mix(in srgb,var(--c2) 32%,transparent);
    transform:rotate(-1.2deg);
}

#category-highlights .all-category-grid > .category-card:nth-child(even){transform:rotate(1.2deg);}

#category-highlights .all-category-grid > .category-card:nth-child(6n+2){--c1:#DCF7E8;--c2:#7FD3A8;--c3:#2E7D5B;}
#category-highlights .all-category-grid > .category-card:nth-child(6n+3){--c1:#DCEFFD;--c2:#86C5F2;--c3:#2F6FA3;}
#category-highlights .all-category-grid > .category-card:nth-child(6n+4){--c1:#EADFFC;--c2:#B79CF0;--c3:#6A4BB5;}
#category-highlights .all-category-grid > .category-card:nth-child(6n+5){--c1:#FFE9D2;--c2:#F7B27F;--c3:#A8581C;}
#category-highlights .all-category-grid > .category-card:nth-child(6n){--c1:#FFF5C8;--c2:#E8CB4D;--c3:#85700E;}

#category-highlights .all-category-grid > .category-card .category-mark{
    width:clamp(40px,11vw,48px);
    height:clamp(40px,11vw,48px);
    border:2.5px solid var(--c2);
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 0 color-mix(in srgb,var(--c2) 45%,transparent),0 8px 12px rgba(90,59,67,.09);
    color:var(--c3);
}

#category-highlights .all-category-grid > .category-card .category-name{
    color:var(--c3);
    font-size:clamp(11px,3vw,13px);
    font-weight:700;
}

#category-highlights .all-category-grid > .category-card::before{
    content:"";
    position:absolute;
    top:5px;
    left:10px;
    color:var(--c2);
    font-size:11px;
    line-height:1;
    pointer-events:none;
}

#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-5px) rotate(0deg) scale(1.05);
    border-color:#fff;
    box-shadow:0 14px 24px color-mix(in srgb,var(--c2) 50%,transparent);
}

#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover .category-mark{
    animation:cute-bounce .6s ease;
    transform:none;
}

#category-highlights .all-category-grid > .category-card.active,
#category-highlights .all-category-grid > .category-card[aria-pressed="true"]{
    outline-style:solid;
    box-shadow:0 0 0 3px var(--c2),0 10px 20px color-mix(in srgb,var(--c2) 45%,transparent);
}

#category-highlights .all-category-grid > .category-card.active::after,
#category-highlights .all-category-grid > .category-card[aria-pressed="true"]::after{
    background:var(--c3);
}

#category-highlights .all-category-grid > .category-card.is-unavailable{
    --c1:#EFEAEA;
    --c2:#C9BDBE;
    --c3:#7D6E70;
    box-shadow:none;
    transform:none;
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .all-category-grid > .category-card:hover .category-mark{animation:none;}
}


/* ===== Poles tambahan card produk: kilap permen, melayang pelan, muncul membal ===== */
#category-highlights .featured-category-grid > .premium-app-card{
    background-image:
        linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 48%),
        radial-gradient(rgba(255,255,255,.8) 2px,transparent 2.6px),
        radial-gradient(circle at 50% 108%,rgba(255,255,255,.9) 0 32%,transparent 33%);
    background-size:100% 100%,15px 15px,100% 100%;
}

#category-highlights .all-category-grid > .category-card{
    background-image:
        linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 50%),
        radial-gradient(rgba(255,255,255,.8) 1.6px,transparent 2.2px);
    background-size:100% 100%,12px 12px;
}

/* nama produk di atas label putih transparan */
#category-highlights .premium-app-card .category-name,
#category-highlights .all-category-grid > .category-card .category-name{
    padding:2px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}

#category-highlights .all-category-grid > .category-card .category-name{padding:2px 8px;}

/* kilau di pojok kanan atas (tidak mengganggu lencana ✓ karena itu ::after) */
#category-highlights .featured-category-grid > .premium-app-card,
#category-highlights .all-category-grid > .category-card{
    animation:
        cute-pop .55s cubic-bezier(.3,1.5,.5,1) both,
        cute-float 4.8s ease-in-out .55s infinite;
}

#category-highlights .featured-category-grid > .premium-app-card:nth-child(2),
#category-highlights .all-category-grid > .category-card:nth-child(2){animation-delay:.07s,.62s;}
#category-highlights .featured-category-grid > .premium-app-card:nth-child(3),
#category-highlights .all-category-grid > .category-card:nth-child(3){animation-delay:.14s,.69s;}
#category-highlights .featured-category-grid > .premium-app-card:nth-child(4),
#category-highlights .all-category-grid > .category-card:nth-child(4){animation-delay:.21s,.76s;}
#category-highlights .all-category-grid > .category-card:nth-child(5){animation-delay:.28s,.83s;}
#category-highlights .all-category-grid > .category-card:nth-child(n+6){animation-delay:.35s,.9s;}

#category-highlights .featured-category-grid > .premium-app-card:nth-child(even),
#category-highlights .all-category-grid > .category-card:nth-child(even){
    animation-direction:normal,reverse;
}

#category-highlights .category-card:hover,
#category-highlights .category-card.is-unavailable{
    animation:cute-pop .55s cubic-bezier(.3,1.5,.5,1) both;
}

#category-highlights .category-card::before{
    animation:cute-twinkle 2.6s ease-in-out infinite;
}

@keyframes cute-pop{
    from{opacity:0;scale:.82}
    to{opacity:1;scale:1}
}

@keyframes cute-float{
    0%,100%{translate:0 0}
    50%{translate:0 -4px}
}

@keyframes cute-twinkle{
    0%,100%{opacity:1;scale:1}
    50%{opacity:.45;scale:.8}
}

/* judul & tombol buka semua */
#category-highlights #category-title::before{
    content:"✿ ";
    color:#F59AB1;
}

#category-highlights .all-categories-trigger{
    border:3px solid #fff;
    border-radius:999px;
    outline:1.5px dashed #F59AB1;
    outline-offset:-7px;
    background:linear-gradient(135deg,#FFE0E6,#FFF1E8);
    box-shadow:0 8px 18px rgba(245,154,177,.3);
    color:#B8465F;
    font-weight:700;
    transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s ease;
}

#category-highlights .all-categories-trigger:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 14px 24px rgba(245,154,177,.4);
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .category-card,
    #category-highlights .category-card::before{
        animation:none !important;
    }
}


/* ===== Pop up Join Reseller ===== */
#reseller-popup.reseller-popup{
    position:fixed;
    inset:0;
    z-index:998;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(90,59,67,.45);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease,visibility .22s ease;
}

#reseller-popup.active{
    opacity:1;
    visibility:visible;
}

#reseller-popup .reseller-box{
    position:relative;
    width:min(400px,100%);
    max-height:min(88vh,760px);
    max-height:min(88dvh,760px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:30px 22px 22px;
    border:1px solid var(--pop-line);
    border-radius:28px;
    background:
        radial-gradient(circle at 50% -10%,#FFD9E2 0,transparent 58%),
        linear-gradient(180deg,#FFF1F4 0,#FFFDFC 150px);
    box-shadow:0 24px 70px rgba(90,59,67,.28);
    color:var(--pop-ink);
    text-align:center;
    transform:translateY(12px) scale(.97);
    transition:transform .3s cubic-bezier(.3,1.4,.5,1);
}

#reseller-popup.active .reseller-box{transform:none;}

#reseller-popup .reseller-close{
    position:absolute;
    top:14px;
    right:14px;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid var(--pop-line);
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 8px rgba(90,59,67,.1);
    color:var(--pop-muted);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    transition:transform .2s ease,background .2s ease,color .2s ease;
}

#reseller-popup .reseller-close:hover{
    transform:rotate(90deg);
    background:var(--pop-soft);
    color:var(--pop-accent-deep);
}

#reseller-popup .reseller-head{margin:0 0 18px;}

#reseller-popup .reseller-badge{
    display:inline-block;
    margin:0 0 12px;
    padding:4px 13px;
    border:2px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#FFE0E6,#FFF1E8);
    box-shadow:0 4px 10px rgba(245,154,177,.3);
    color:#B8465F;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
}

#reseller-popup .reseller-head h2{
    margin:0;
    color:var(--pop-ink);
    font-size:clamp(24px,7vw,28px);
    font-weight:700;
    line-height:1.15;
}

#reseller-popup .reseller-head p{
    margin:8px auto 0;
    max-width:300px;
    color:var(--pop-muted);
    font-size:14px;
    line-height:1.6;
}

#reseller-popup .reseller-list{
    display:grid;
    gap:10px;
    margin:0 0 18px;
    padding:0;
    list-style:none;
    text-align:left;
}

#reseller-popup .reseller-list li{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:3px solid #fff;
    border-radius:20px;
    outline:1.5px dashed rgba(217,124,149,.45);
    outline-offset:-7px;
    background:var(--pop-cream);
    box-shadow:0 6px 14px rgba(245,154,177,.2);
}

#reseller-popup .reseller-ico{
    flex:none;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:2.5px solid #F59AB1;
    border-radius:50%;
    background:#fff;
    box-shadow:0 3px 0 rgba(245,154,177,.4);
    color:#D97C95;
    font-size:16px;
}

#reseller-popup .reseller-text{
    flex:1;
    min-width:0;
    display:grid;
    gap:1px;
}

#reseller-popup .reseller-text strong{
    color:var(--pop-ink);
    font-size:15px;
}

#reseller-popup .reseller-text small{
    color:var(--pop-muted);
    font-size:12.5px;
    line-height:1.4;
}

#reseller-popup .reseller-soon{
    flex:none;
    padding:3px 11px;
    border-radius:999px;
    background:var(--pop-soft);
    color:#A65D72;
    font-size:12px;
    font-style:normal;
    font-weight:700;
}

#reseller-popup .reseller-cta{
    padding:16px 14px 14px;
    border-top:1px dashed rgba(217,124,149,.35);
}

#reseller-popup .reseller-cta p{
    margin:0 0 12px;
    color:var(--pop-muted);
    font-size:13.5px;
    line-height:1.5;
}

#reseller-popup .reseller-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    border-radius:999px;
    background:linear-gradient(135deg,#E892A8,#D97C95);
    box-shadow:0 8px 18px rgba(217,124,149,.34);
    color:#fff;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease;
}

#reseller-popup .reseller-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 22px rgba(217,124,149,.4);
}

#reseller-popup .reseller-alt{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:12px;
    color:var(--pop-muted);
    font-size:13px;
}

#reseller-popup .reseller-alt a{
    color:var(--pop-accent-deep);
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:3px;
}

@media (max-width:600px){
    #reseller-popup.reseller-popup{
        align-items:flex-end;
        padding:0;
    }

    #reseller-popup .reseller-box{
        width:100%;
        padding:28px 16px calc(18px + env(safe-area-inset-bottom));
        border-bottom:0;
        border-radius:24px 24px 0 0;
        transform:translateY(40px);
    }

    #reseller-popup.active .reseller-box{transform:none;}
}

@media (prefers-reduced-motion:reduce){
    #reseller-popup .reseller-box{transition:none;}
}

/* langkah bergabung & daftar keuntungan dinamis (Join Reseller) */
#reseller-popup .reseller-steps{
    margin:0 0 16px;
    padding:12px 14px;
    border:1px solid var(--pop-line);
    border-radius:18px;
    background:#fff;
    text-align:left;
}

#reseller-popup .reseller-steps[hidden]{display:none;}

#reseller-popup .reseller-steps h3{
    margin:0 0 8px;
    color:var(--pop-accent-deep);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#reseller-popup .reseller-steps ol{
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:rs;
}

#reseller-popup .reseller-steps li{
    position:relative;
    counter-increment:rs;
    padding:6px 0 6px 34px;
    color:var(--pop-ink);
    font-size:14px;
    line-height:1.5;
}

#reseller-popup .reseller-steps li::before{
    content:counter(rs);
    position:absolute;
    top:5px;
    left:0;
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:linear-gradient(135deg,#F3A3B8,#D97C95);
    color:#fff;
    font-size:12px;
    font-weight:700;
}

#reseller-popup .reseller-head p[hidden]{display:none;}

/* banner pengumuman & pratinjau maintenance (diatur dari admin → Pengaturan) */
.site-banner{
    margin:0 0 14px;
    padding:10px 16px;
    border:2px dashed rgba(217,124,149,.5);
    border-radius:18px;
    background:linear-gradient(135deg,#FFE0E6,#FFF3EF);
    color:#8F4A5F;
    font-size:14px;
    font-weight:600;
    line-height:1.5;
    text-align:center;
}

.site-banner-preview{
    border-color:rgba(166,117,16,.5);
    background:#FFF6D8;
    color:#7A5A0C;
}


/* ===== Kartu stabil saat produk dipindah ===== */

/* Kartu layanan selalu mulai di baris sendiri dan tidak ikut bergeser oleh kartu lain */
#category-highlights .featured-category-grid > .discord-service-sticker{
    grid-column:1 / span 2;
}

#category-highlights .featured-category-grid > .roblox-service-sticker{
    grid-column:span 2;
}

/* kemiringan berdasarkan nama produk (data-tone), bukan urutan di grid */
#category-highlights .featured-category-grid > .premium-app-card:nth-child(even),
#category-highlights .all-category-grid > .category-card:nth-child(even){
    transform:rotate(-1.4deg);
}

#category-highlights .featured-category-grid > .premium-app-card[data-tone="1"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="3"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="5"],
#category-highlights .all-category-grid > .category-card[data-tone="1"],
#category-highlights .all-category-grid > .category-card[data-tone="3"],
#category-highlights .all-category-grid > .category-card[data-tone="5"]{
    transform:rotate(1.4deg);
}

#category-highlights .featured-category-grid > .premium-app-card[data-tone="0"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="2"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="4"],
#category-highlights .all-category-grid > .category-card[data-tone="0"],
#category-highlights .all-category-grid > .category-card[data-tone="2"],
#category-highlights .all-category-grid > .category-card[data-tone="4"]{
    transform:rotate(-1.4deg);
}

/* warna pastel berdasarkan nama produk */
#category-highlights .all-category-grid > .category-card[data-tone="0"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="0"]{--c1:#FFE0E6;--c2:#F59AB1;--c3:#B8465F;}
#category-highlights .all-category-grid > .category-card[data-tone="1"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="1"]{--c1:#DCF7E8;--c2:#7FD3A8;--c3:#2E7D5B;}
#category-highlights .all-category-grid > .category-card[data-tone="2"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="2"]{--c1:#DCEFFD;--c2:#86C5F2;--c3:#2F6FA3;}
#category-highlights .all-category-grid > .category-card[data-tone="3"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="3"]{--c1:#EADFFC;--c2:#B79CF0;--c3:#6A4BB5;}
#category-highlights .all-category-grid > .category-card[data-tone="4"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="4"]{--c1:#FFE9D2;--c2:#F7B27F;--c3:#A8581C;}
#category-highlights .all-category-grid > .category-card[data-tone="5"],
#category-highlights .featured-category-grid > .premium-app-card[data-tone="5"]{--c1:#FFF5C8;--c2:#E8CB4D;--c3:#85700E;}

/* empat aplikasi utama tetap punya warna khasnya */
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="NETFLIX"]{--c1:#FFE0E6;--c2:#F59AB1;--c3:#B8465F;}
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="SPOTIFY"]{--c1:#DCF7E8;--c2:#7FD3A8;--c3:#2E7D5B;}
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="CANVA"]{--c1:#DCEFFD;--c2:#86C5F2;--c3:#2F6FA3;}
#category-highlights .featured-category-grid > .premium-app-card[data-home-product="CHATGPT"]{--c1:#EADFFC;--c2:#B79CF0;--c3:#6A4BB5;}

/* tidak tersedia tetap abu-abu & lurus */
#category-highlights .featured-category-grid > .premium-app-card.is-unavailable,
#category-highlights .all-category-grid > .category-card.is-unavailable{
    --c1:#EFEAEA;--c2:#C9BDBE;--c3:#7D6E70;
    transform:none;
}


/* ===== Kartu layanan (Discord Needs & Roblox): lebih cantik ===== */
#category-highlights .featured-category-grid > .feature-service-sticker{
    --s1:#E3E0FA;
    --s2:#8F86E6;
    --s3:#4F46A8;
    gap:16px;
    min-height:104px;
    padding:16px clamp(14px,3.6vw,22px);
    border:3px solid #fff;
    border-radius:28px;
    outline:2px dashed var(--s2);
    outline-offset:-9px;
    background-color:#fff;
    background-image:
        radial-gradient(circle at 12% 18%,rgba(255,255,255,.9) 0 3px,transparent 4px),
        radial-gradient(circle at 78% 82%,rgba(255,255,255,.7) 0 2px,transparent 3px),
        linear-gradient(120deg,var(--s1) 0,#FFF8F5 62%,#FFFFFF 100%);
    box-shadow:0 12px 24px color-mix(in srgb,var(--s2) 35%,transparent),inset 0 2px 0 rgba(255,255,255,.9);
}

#category-highlights .featured-category-grid > .roblox-service-sticker{
    --s1:#FFD9D2;
    --s2:#F28B7A;
    --s3:#A8412F;
}

/* lingkaran dekoratif di pojok kanan bawah */
#category-highlights .featured-category-grid > .feature-service-sticker::before{
    content:"";
    position:absolute;
    right:-22px;
    bottom:-30px;
    width:104px;
    height:104px;
    border-radius:50%;
    background:radial-gradient(circle,color-mix(in srgb,var(--s2) 30%,#fff) 0,transparent 68%);
    opacity:1;
    animation:none;
    pointer-events:none;
}

#category-highlights .feature-service-sticker .category-mark{
    width:clamp(48px,13vw,60px);
    height:clamp(48px,13vw,60px);
    border:3px solid var(--s2);
    border-radius:20px;
    background:#fff;
    box-shadow:0 5px 0 color-mix(in srgb,var(--s2) 45%,transparent),0 10px 18px rgba(90,59,67,.1);
    color:var(--s3);
    font-size:clamp(22px,6vw,28px);
    font-weight:700;
    transform:rotate(-4deg);
    transition:transform .3s cubic-bezier(.3,1.5,.5,1);
}

#category-highlights .feature-service-sticker .service-sticker-copy{
    gap:6px;
}

#category-highlights .feature-service-sticker .category-name{
    color:var(--s3);
    font-size:clamp(14.5px,4vw,17px);
    font-weight:700;
    letter-spacing:.01em;
}

#category-highlights .feature-service-sticker .robux-note{
    margin-left:6px;
    padding:1px 8px;
    border-radius:999px;
    background:#fff;
    color:var(--s3);
    font-size:10.5px;
    font-weight:600;
    vertical-align:middle;
}

/* daftar layanan sebagai pil kecil */
#category-highlights .feature-service-sticker .service-chips{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

#category-highlights .feature-service-sticker .service-chips > span{
    padding:2px 9px;
    border:1px solid color-mix(in srgb,var(--s2) 55%,transparent);
    border-radius:999px;
    background:rgba(255,255,255,.85);
    color:var(--s3);
    font-size:clamp(10px,2.7vw,11.5px);
    font-weight:600;
    line-height:1.5;
}

#category-highlights .feature-service-sticker .sticker-sparkle{
    top:12px;
    right:16px;
    color:var(--s2);
    font-size:16px;
    transition:transform .4s ease;
}

#category-highlights .featured-category-grid > .feature-service-sticker:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 18px 32px color-mix(in srgb,var(--s2) 50%,transparent),inset 0 2px 0 rgba(255,255,255,.9);
}

#category-highlights .feature-service-sticker:not(.is-unavailable):not(:disabled):hover .category-mark{
    transform:rotate(4deg) scale(1.08);
}

#category-highlights .feature-service-sticker:not(.is-unavailable):not(:disabled):hover .sticker-sparkle{
    transform:rotate(180deg) scale(1.3);
}

#category-highlights .featured-category-grid > .feature-service-sticker.active,
#category-highlights .featured-category-grid > .feature-service-sticker[aria-pressed="true"]{
    outline-style:solid;
    box-shadow:0 0 0 3px var(--s2),0 14px 28px color-mix(in srgb,var(--s2) 45%,transparent);
}

#category-highlights .featured-category-grid > .feature-service-sticker.active::after,
#category-highlights .featured-category-grid > .feature-service-sticker[aria-pressed="true"]::after{
    background:var(--s3);
}

#category-highlights .featured-category-grid > .feature-service-sticker.is-unavailable{
    --s1:#EFEAEA;
    --s2:#C9BDBE;
    --s3:#7D6E70;
    box-shadow:none;
}


/* ============ FILTER KATEGORI HALAMAN UTAMA ============ */
/* tombol sederhana: satu warna pink lembut, tanpa hiasan berlebihan */
#category-highlights .category-filter{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0 0 20px;
    padding:0;
}

#category-highlights .category-filter > .category-chip{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:54px;
    padding:10px 48px;
    border:1.5px solid #F8D3DC;
    border-radius:999px;
    background:#FFF3F6;
    box-shadow:0 2px 0 #F8D3DC;
    color:#B8465F;
    font:inherit;
    font-size:16px;
    font-weight:600;
    letter-spacing:.01em;
    text-align:center;
    cursor:pointer;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,color .2s ease;
}

#category-highlights .category-filter > .category-chip::before{
    content:none;
}

/* panah kecil di kanan */
#category-highlights .category-filter > .category-chip::after{
    content:"";
    position:absolute;
    right:22px;
    top:50%;
    width:7px;
    height:7px;
    margin-top:-6px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    opacity:.45;
    transform:rotate(45deg);
    transition:transform .25s ease,margin-top .25s ease,opacity .2s ease;
}

#category-highlights .chip-count{
    display:none;
}

#category-highlights .category-filter > .category-chip:hover{
    border-color:#F59AB1;
    background:#FFE9EE;
    box-shadow:0 3px 0 #F5B8C6;
    transform:translateY(-1px);
}

#category-highlights .category-filter > .category-chip:hover::after{
    opacity:.8;
}

#category-highlights .category-filter > .category-chip:active{
    transform:translateY(1px);
    box-shadow:0 1px 0 #F8D3DC;
}

#category-highlights .category-filter > .category-chip:focus-visible{
    outline:3px solid rgba(217,124,149,.5);
    outline-offset:2px;
}

#category-highlights .category-filter > .category-chip.is-active{
    border-color:#EE7F9F;
    background:#F59AB1;
    box-shadow:0 2px 0 #E0809A;
    color:#fff;
}

#category-highlights .category-filter > .category-chip.is-active::after{
    opacity:1;
    margin-top:-2px;
    transform:rotate(225deg);
}

#category-highlights .category-empty{
    margin:8px 0 14px;
    padding:18px;
    border:2px dashed #F5B8C6;
    border-radius:18px;
    background:#FFF1F4;
    color:#B8465F;
    text-align:center;
    font-weight:600;
}

#category-highlights .category-empty[hidden]{
    display:none;
}

#category-highlights .filter-hide{
    display:none !important;
}

#category-highlights[data-filter="custom"] .all-categories-trigger{
    display:none;
}

/* sebelum ada tombol yang ditekan, produk tidak ditampilkan */
#category-highlights[data-filter="none"] .featured-category-grid,
#category-highlights[data-filter="none"] .all-categories{
    display:none !important;
}

#category-highlights:not([data-filter="none"]) .featured-category-grid,
#category-highlights:not([data-filter="none"]) .all-categories{
    animation:category-reveal .35s ease both;
}

@keyframes category-reveal{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:none;}
}

@media (prefers-reduced-motion:reduce){
    #category-highlights:not([data-filter="none"]) .featured-category-grid,
    #category-highlights:not([data-filter="none"]) .all-categories{animation:none;}
}

/* hanya tampilkan kartu yang sesuai kategori */
#category-highlights[data-filter="premium"] .featured-category-grid > .feature-service-sticker,
#category-highlights[data-filter="premium"] .all-categories,
#category-highlights[data-filter="discord"] .featured-category-grid > .category-card:not(.discord-service-sticker),
#category-highlights[data-filter="discord"] .all-categories,
#category-highlights[data-filter="roblox"] .featured-category-grid > .category-card:not(.roblox-service-sticker),
#category-highlights[data-filter="roblox"] .all-categories,
#category-highlights[data-filter="other"] .featured-category-grid{
    display:none !important;
}

#category-highlights[data-filter="other"] .all-categories-trigger{
    display:none;
}

#category-highlights[data-filter="discord"] .featured-category-grid > .discord-service-sticker,
#category-highlights[data-filter="roblox"] .featured-category-grid > .roblox-service-sticker{
    grid-column:1 / -1;
}



/* ============ BERANDA: TENTANG + AJAKAN LIHAT PRODUK ============ */
.page-nav{
    margin:0 0 6px;
}

.page-back{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:6px 14px;
    border:2px solid #fff;
    border-radius:999px;
    background:#FFE0E6;
    box-shadow:0 4px 10px rgba(245,154,177,.25);
    color:#B8465F;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease;
}

.page-back:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 14px rgba(245,154,177,.35);
}

.about-points{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
}

.about-points li{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:16px 12px;
    border:3px solid #fff;
    border-radius:24px;
    outline:1.5px dashed #F5B8C6;
    outline-offset:-8px;
    background:#FFF1F4;
    box-shadow:0 8px 18px rgba(245,154,177,.2);
    text-align:center;
}

.about-points li span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    color:#F59AB1;
    font-size:17px;
    box-shadow:0 3px 0 rgba(245,154,177,.35);
}

.about-points strong{
    color:#B8465F;
    font-size:15px;
}

.about-points small{
    color:#7A5A62;
    font-size:12px;
    line-height:1.45;
}

.products-cta{
    text-align:center;
}

.products-cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:52px;
    padding:12px 30px;
    border:3px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#F8A8BD,#EE7F9F);
    box-shadow:0 10px 22px rgba(238,127,159,.4);
    color:#fff;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s ease;
}

.products-cta-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 28px rgba(238,127,159,.5);
}

.products-cta-btn:active{
    transform:scale(.97);
}

@media (max-width:560px){
    .about-points{grid-template-columns:1fr;}
    .about-points li{flex-direction:row;text-align:left;gap:12px;flex-wrap:wrap;padding:12px 14px;}
    .about-points li small{flex-basis:100%;margin-left:50px;margin-top:-6px;}
    .products-cta-btn{width:100%;}
}


/* tombol kategori di beranda berupa tautan */
#category-highlights .category-filter > a.category-chip{
    text-decoration:none;
}

#category-highlights .category-section .home-section-heading,
.home #category-highlights .home-section-heading{
    margin-bottom:12px;
}

/* di halaman produk daftar tombol kategori disembunyikan (hanya ada di beranda) */
#category-highlights .category-filter[hidden]{
    display:none !important;
}


/* ============ POP UP PROMO ============ */
.promo-popup{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(90,59,67,.45);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease,visibility 0s linear .25s;
}

.promo-popup.active{
    opacity:1;
    visibility:visible;
    transition:opacity .25s ease;
}

.promo-box{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:12px;
    width:min(420px,100%);
    max-height:calc(100dvh - 36px);
    padding:22px 20px 18px;
    overflow:auto;
    border:3px solid #fff;
    border-radius:28px;
    outline:1.5px dashed #F5B8C6;
    outline-offset:-10px;
    background:#FFF8F5;
    box-shadow:0 24px 60px rgba(90,59,67,.35);
    text-align:center;
    transform:translateY(16px) scale(.96);
    transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}

.promo-popup.active .promo-box{
    transform:none;
}

.promo-close{
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
    width:36px;
    height:36px;
    border:2px solid #fff;
    border-radius:50%;
    background:#FFE0E6;
    box-shadow:0 3px 8px rgba(245,154,177,.35);
    color:#B8465F;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}

.promo-slide{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.promo-slide[hidden]{
    display:none;
}

.promo-picture{
    width:100%;
    overflow:hidden;
    border:3px solid #fff;
    border-radius:20px;
    background:#fff;
    box-shadow:0 8px 18px rgba(245,154,177,.28);
}

.promo-picture img{
    display:block;
    width:100%;
    max-height:min(46vh,340px);
    object-fit:contain;
}

.promo-title{
    margin:4px 8px 0;
    color:#B8465F;
    font-size:22px;
    font-weight:700;
    line-height:1.25;
}

.promo-text{
    margin:0 4px;
    color:#5A3B43;
    font-size:14px;
    line-height:1.55;
    overflow-wrap:anywhere;
}

.promo-caption{
    display:inline-block;
    padding:5px 14px;
    border:1.5px solid #F59AB1;
    border-radius:999px;
    background:#fff;
    color:#B8465F;
    font-size:12.5px;
    font-weight:700;
}

.promo-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.promo-step{
    width:34px;
    height:34px;
    border:2px solid #fff;
    border-radius:50%;
    background:#FFE0E6;
    color:#B8465F;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}

.promo-dots{
    display:inline-flex;
    gap:6px;
}

.promo-dots i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#F5B8C6;
    transition:transform .2s ease,background .2s ease;
}

.promo-dots i.is-on{
    background:#EE7F9F;
    transform:scale(1.35);
}

.promo-ok{
    align-self:center;
    min-height:44px;
    padding:10px 34px;
    border:3px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#F8A8BD,#EE7F9F);
    box-shadow:0 8px 16px rgba(238,127,159,.4);
    color:#fff;
    font:inherit;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

.promo-ok:active{
    transform:scale(.97);
}

.promo-close:focus-visible,
.promo-ok:focus-visible,
.promo-step:focus-visible{
    outline:3px solid rgba(217,124,149,.6);
    outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
    .promo-popup,
    .promo-box{transition:none;}
}


/* ============ PRODUK PROMO ============ */
.promo-badge{
    position:absolute;
    top:-8px;
    right:-4px;
    z-index:3;
    padding:3px 9px;
    border:2px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#F8A8BD,#EE7F9F);
    box-shadow:0 4px 10px rgba(238,127,159,.45);
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.05em;
    line-height:1.3;
    pointer-events:none;
}

.category-card.is-promo{
    position:relative;
}

.promo-products{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    margin:0;
    padding:0;
    list-style:none;
}

.promo-products li{
    padding:4px 12px;
    border:1.5px solid #F5B8C6;
    border-radius:999px;
    background:#FFE0E6;
    color:#B8465F;
    font-size:12.5px;
    font-weight:600;
}

.promo-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:10px 28px;
    border:3px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#F8A8BD,#EE7F9F);
    box-shadow:0 8px 16px rgba(238,127,159,.4);
    color:#fff;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease;
}

.promo-link:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 20px rgba(238,127,159,.5);
}

.promo-link:active{
    transform:scale(.97);
}


/* harga coret untuk promo */
.price-cell .price-was{
    color:#A8929A;
    font-size:.82em;
    font-weight:500;
    text-decoration:line-through;
    text-decoration-color:#EE7F9F;
}


/* daftar harga promo di pop up */
.promo-deals{
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:6px;
    text-align:left;
}

.promo-deals li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 14px;
    border:2px solid #fff;
    border-radius:16px;
    background:#FFE9EE;
    box-shadow:0 3px 8px rgba(245,154,177,.2);
}

.promo-deals li span{
    min-width:0;
    color:#5A3B43;
    font-size:14px;
    font-weight:600;
    overflow-wrap:anywhere;
}

.promo-deals li strong{
    flex:none;
    padding:3px 12px;
    border-radius:999px;
    background:linear-gradient(135deg,#F8A8BD,#EE7F9F);
    color:#fff;
    font-size:14px;
    font-weight:700;
}


/* ============ KARTU PRODUK: gaya "app tile" lembut ============ */
#category-highlights .all-category-grid{
    gap:12px;
    padding:14px;
    border:1.5px solid #F8D3DC;
    border-radius:26px;
    background:#FFFBFA;
    background-image:none;
}

#category-highlights .featured-category-grid > .premium-app-card,
#category-highlights .all-category-grid > .category-card{
    gap:0;
    padding:16px 8px 12px;
    overflow:visible;
    border:1.5px solid color-mix(in srgb,var(--c2) 38%,#fff);
    border-radius:22px;
    outline:none;
    background:linear-gradient(180deg,var(--c1) 0,var(--c1) 50%,#fff 50%,#fff 100%);
    background-image:linear-gradient(180deg,var(--c1) 0,var(--c1) 50%,#fff 50%,#fff 100%);
    box-shadow:0 6px 16px color-mix(in srgb,var(--c2) 24%,transparent);
    transform:none;
    transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s ease,border-color .2s ease;
}

#category-highlights .featured-category-grid > .premium-app-card:nth-child(even),
#category-highlights .all-category-grid > .category-card:nth-child(even){
    transform:none;
}

#category-highlights .featured-category-grid > .premium-app-card::before,
#category-highlights .all-category-grid > .category-card::before{
    content:none;
}

/* logo: kotak membulat putih yang menimpa batas dua warna */
#category-highlights .featured-category-grid > .premium-app-card .category-mark,
#category-highlights .all-category-grid > .category-card .category-mark{
    width:clamp(48px,14vw,62px);
    height:clamp(48px,14vw,62px);
    margin:0 0 10px;
    overflow:hidden;
    border:3px solid #fff;
    border-radius:18px;
    background:#fff;
    box-shadow:0 6px 14px rgba(90,59,67,.16);
    color:var(--c3);
}

#category-highlights .all-category-grid > .category-card .category-mark{
    width:clamp(42px,12vw,52px);
    height:clamp(42px,12vw,52px);
    border-radius:15px;
}

#category-highlights .featured-category-grid > .premium-app-card .category-name,
#category-highlights .all-category-grid > .category-card .category-name{
    color:#4A3338;
    font-size:clamp(12px,3.3vw,14.5px);
    font-weight:700;
    letter-spacing:0;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable) .category-starting-price{
    margin-top:7px;
    padding:3px 11px;
    border:0;
    border-radius:999px;
    background:var(--c1);
    color:var(--c3);
    font-size:clamp(10px,2.7vw,11.5px);
    font-weight:700;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable) .category-starting-price::before{
    content:none;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover,
#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-5px);
    border-color:var(--c2);
    box-shadow:0 14px 24px color-mix(in srgb,var(--c2) 40%,transparent);
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover .category-mark,
#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover .category-mark{
    animation:none;
    transform:translateY(-2px) scale(1.05);
}

#category-highlights .featured-category-grid > .premium-app-card:active,
#category-highlights .all-category-grid > .category-card:active{
    transform:scale(.97);
}

#category-highlights .featured-category-grid > .premium-app-card.active,
#category-highlights .featured-category-grid > .premium-app-card[aria-pressed="true"],
#category-highlights .all-category-grid > .category-card.active,
#category-highlights .all-category-grid > .category-card[aria-pressed="true"]{
    border-color:var(--c2);
    outline:none;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 55%,#fff),0 10px 20px color-mix(in srgb,var(--c2) 35%,transparent);
}

#category-highlights .featured-category-grid > .premium-app-card.is-unavailable,
#category-highlights .all-category-grid > .category-card.is-unavailable{
    background:linear-gradient(180deg,#EFEAEA 0,#EFEAEA 50%,#fff 50%,#fff 100%);
    box-shadow:none;
}

#category-highlights .featured-category-grid > .premium-app-card.is-unavailable .category-mark img,
#category-highlights .all-category-grid > .category-card.is-unavailable .category-mark img{
    filter:grayscale(1);
    opacity:.6;
}

/* ============ KARTU PRODUK v3: glow pastel + logo bercincin ============ */
#category-highlights .featured-category-grid > .premium-app-card,
#category-highlights .all-category-grid > .category-card{
    position:relative;
    isolation:isolate;
    gap:0;
    padding:20px 8px 14px;
    overflow:hidden;
    border:1.5px solid color-mix(in srgb,var(--c2) 45%,#fff);
    border-radius:26px;
    background:
        radial-gradient(130% 80% at 50% -10%,color-mix(in srgb,var(--c1) 95%,#fff) 0,transparent 72%),
        linear-gradient(180deg,#fff 0,color-mix(in srgb,var(--c1) 38%,#fff) 100%);
    background-image:
        radial-gradient(130% 80% at 50% -10%,color-mix(in srgb,var(--c1) 95%,#fff) 0,transparent 72%),
        linear-gradient(180deg,#fff 0,color-mix(in srgb,var(--c1) 38%,#fff) 100%);
    box-shadow:0 10px 22px color-mix(in srgb,var(--c2) 20%,transparent),inset 0 1px 0 #fff;
}

/* cincin pastel di belakang logo */
#category-highlights .featured-category-grid > .premium-app-card::before,
#category-highlights .all-category-grid > .category-card::before{
    content:"";
    position:absolute;
    top:10px;
    left:50%;
    z-index:-1;
    width:clamp(70px,20vw,88px);
    height:clamp(70px,20vw,88px);
    border-radius:50%;
    background:color-mix(in srgb,var(--c2) 22%,#fff);
    box-shadow:0 0 0 9px color-mix(in srgb,var(--c1) 80%,transparent),0 0 0 18px color-mix(in srgb,var(--c1) 40%,transparent);
    color:transparent;
    font-size:0;
    transform:translateX(-50%);
    transition:transform .45s cubic-bezier(.3,1.5,.5,1);
}

#category-highlights .all-category-grid > .category-card::before{
    top:8px;
    width:clamp(60px,17vw,72px);
    height:clamp(60px,17vw,72px);
}

#category-highlights .featured-category-grid > .premium-app-card .category-mark,
#category-highlights .all-category-grid > .category-card .category-mark{
    position:relative;
    z-index:1;
    width:clamp(50px,14.5vw,64px);
    height:clamp(50px,14.5vw,64px);
    margin:0 0 12px;
    border:3px solid #fff;
    border-radius:20px;
    background:#fff;
    box-shadow:0 8px 16px color-mix(in srgb,var(--c3) 22%,transparent);
}

#category-highlights .all-category-grid > .category-card .category-mark{
    width:clamp(44px,12.5vw,54px);
    height:clamp(44px,12.5vw,54px);
    margin-bottom:10px;
    border-radius:17px;
}

#category-highlights .featured-category-grid > .premium-app-card .category-name,
#category-highlights .all-category-grid > .category-card .category-name{
    color:#4A3338;
    font-size:clamp(12.5px,3.4vw,15px);
    font-weight:700;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable) .category-starting-price{
    margin-top:8px;
    padding:4px 12px;
    border:1.5px solid color-mix(in srgb,var(--c2) 50%,#fff);
    border-radius:999px;
    background:#fff;
    color:var(--c3);
    font-size:clamp(10px,2.7vw,11.5px);
    font-weight:700;
    letter-spacing:.01em;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover,
#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover{
    transform:translateY(-6px);
    border-color:var(--c2);
    box-shadow:0 18px 30px color-mix(in srgb,var(--c2) 38%,transparent),inset 0 1px 0 #fff;
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover::before,
#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover::before{
    transform:translateX(-50%) scale(1.14);
}

#category-highlights .featured-category-grid > .premium-app-card.is-unavailable::before,
#category-highlights .all-category-grid > .category-card.is-unavailable::before{
    background:#ECE6E6;
    box-shadow:0 0 0 9px rgba(236,230,230,.7),0 0 0 18px rgba(236,230,230,.35);
}

#category-highlights .featured-category-grid > .premium-app-card.is-unavailable,
#category-highlights .all-category-grid > .category-card.is-unavailable{
    background:#FBF9F9;
    background-image:none;
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .featured-category-grid > .premium-app-card,
    #category-highlights .all-category-grid > .category-card,
    #category-highlights .featured-category-grid > .premium-app-card::before,
    #category-highlights .all-category-grid > .category-card::before{transition:none;}
}

/* lencana PROMO tetap terlihat di dalam kartu (kartu memakai overflow tersembunyi) */
#category-highlights .category-card .promo-badge{
    top:7px;
    right:7px;
    padding:2px 7px;
    font-size:9px;
}


/* ============ BERANDA: KOTAK KATEGORI ============ */
#category-highlights .category-tiles{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:0 0 20px;
}

#category-highlights .category-tiles > .category-tile{
    --t1:#FFE9EE;
    --t2:#F59AB1;
    --t3:#B8465F;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:112px;
    padding:16px 10px;
    border:1.5px solid color-mix(in srgb,var(--t2) 40%,#fff);
    border-radius:22px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--t1) 70%,#fff),var(--t1));
    box-shadow:0 6px 14px color-mix(in srgb,var(--t2) 18%,transparent);
    color:var(--t3);
    text-align:center;
    text-decoration:none;
    transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s ease,border-color .2s ease;
}

#category-highlights .category-tiles > .category-tile:hover{
    transform:translateY(-4px);
    border-color:var(--t2);
    box-shadow:0 12px 22px color-mix(in srgb,var(--t2) 32%,transparent);
}

#category-highlights .category-tiles > .category-tile:active{
    transform:scale(.97);
}

#category-highlights .category-tiles > .category-tile:focus-visible{
    outline:3px solid color-mix(in srgb,var(--t2) 70%,#fff);
    outline-offset:2px;
}

#category-highlights .category-tile-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 4px 10px color-mix(in srgb,var(--t2) 28%,transparent);
    color:var(--t3);
    transition:transform .3s cubic-bezier(.3,1.6,.5,1);
}

#category-highlights .category-tiles > .category-tile:hover .category-tile-icon{
    transform:scale(1.1) rotate(-4deg);
}

#category-highlights .category-tile-label{
    font-size:clamp(13px,3.6vw,15px);
    font-weight:700;
    line-height:1.25;
    overflow-wrap:anywhere;
}

#category-highlights .category-tiles > .category-tile:nth-child(6n+1){--t1:#FFE9EE;--t2:#F59AB1;--t3:#B8465F;}
#category-highlights .category-tiles > .category-tile:nth-child(6n+2){--t1:#E3F6EC;--t2:#7FD3A8;--t3:#2E7D5B;}
#category-highlights .category-tiles > .category-tile:nth-child(6n+3){--t1:#E4F1FC;--t2:#86C5F2;--t3:#2F6FA3;}
#category-highlights .category-tiles > .category-tile:nth-child(6n+4){--t1:#EEE6FB;--t2:#B79CF0;--t3:#6A4BB5;}
#category-highlights .category-tiles > .category-tile:nth-child(6n+5){--t1:#FFEEDD;--t2:#F7B27F;--t3:#A8581C;}
#category-highlights .category-tiles > .category-tile:nth-child(6n+6){--t1:#FFF7D6;--t2:#E8CB4D;--t3:#85700E;}

@media (max-width:560px){
    #category-highlights .category-tiles{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }
    #category-highlights .category-tiles > .category-tile:last-child:nth-child(odd){
        grid-column:1 / -1;
    }
}

@media (prefers-reduced-motion:reduce){
    #category-highlights .category-tiles > .category-tile,
    #category-highlights .category-tile-icon{transition:none;}
}


/* ============ POP UP PROMO v2: limited offer ============ */
.promo-popup{
    background:radial-gradient(circle at 50% 30%,rgba(255,170,195,.35),rgba(90,59,67,.62) 70%);
    backdrop-filter:blur(3px);
}

.promo-box{
    gap:14px;
    width:min(430px,100%);
    padding:62px 20px 20px;
    border:3px solid #fff;
    border-radius:32px;
    outline:none;
    background:
        radial-gradient(rgba(255,255,255,.75) 1.6px,transparent 2.2px) 0 0/16px 16px,
        linear-gradient(180deg,#FFD3E0 0,#FFE6E8 150px,#FFF8F5 330px);
    box-shadow:0 0 0 6px rgba(255,255,255,.35),0 30px 70px rgba(214,90,130,.45);
    transform:translateY(24px) scale(.9) rotate(-1.5deg);
    transition:transform .55s cubic-bezier(.2,1.5,.4,1);
}

.promo-popup.active .promo-box{
    transform:none;
}

/* pita Limited Offer */
.promo-ribbon{
    position:absolute;
    top:16px;
    left:50%;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 22px;
    overflow:hidden;
    border:2.5px solid #fff;
    border-radius:999px;
    background:linear-gradient(135deg,#F2678F,#F79A7B);
    box-shadow:0 8px 18px rgba(232,98,135,.45);
    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    white-space:nowrap;
    transform:translateX(-50%);
}

.promo-ribbon span{
    font-size:11px;
    animation:promo-twinkle 1.6s ease-in-out infinite;
}

.promo-ribbon span:last-child{
    animation-delay:.8s;
}

.promo-ribbon::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
    transform:translateX(-120%);
    animation:promo-shine 2.8s ease-in-out infinite;
}

@keyframes promo-shine{
    0%,45%{transform:translateX(-120%);}
    80%,100%{transform:translateX(120%);}
}

@keyframes promo-twinkle{
    0%,100%{opacity:1;transform:scale(1) rotate(0);}
    50%{opacity:.55;transform:scale(1.35) rotate(25deg);}
}

.promo-close{
    top:14px;
    right:14px;
    background:#fff;
    border-color:#FFD3E0;
    z-index:3;
}

.promo-slide{
    gap:12px;
}

.promo-picture{
    border:4px solid #fff;
    border-radius:22px;
    box-shadow:0 12px 24px rgba(214,90,130,.3);
    transform:rotate(-1deg);
}

.promo-title{
    margin:2px 6px 0;
    color:#C2335A;
    font-size:clamp(24px,7vw,30px);
    font-weight:700;
    line-height:1.15;
    text-shadow:0 2px 0 #fff;
}

.promo-text{
    color:#6B454E;
    font-size:14.5px;
}

.promo-caption{
    border-color:#F2678F;
    color:#C2335A;
    box-shadow:0 4px 10px rgba(242,103,143,.22);
}

/* hitung mundur */
.promo-countdown{
    width:100%;
    padding:10px 10px 12px;
    border:2px dashed #F5A3BA;
    border-radius:20px;
    background:rgba(255,255,255,.75);
}

.promo-countdown[hidden]{
    display:none;
}

.promo-countdown-label{
    display:block;
    margin-bottom:8px;
    color:#C2335A;
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.promo-countdown-cells{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.promo-countdown-cells div{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:8px 2px 6px;
    border-radius:14px;
    background:linear-gradient(180deg,#F2678F,#E5527D);
    box-shadow:0 6px 12px rgba(229,82,125,.3),inset 0 1px 0 rgba(255,255,255,.35);
    color:#fff;
}

.promo-countdown-cells b{
    font-size:clamp(20px,6vw,25px);
    font-variant-numeric:tabular-nums;
    line-height:1.1;
}

.promo-countdown-cells small{
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.9;
}

/* daftar harga bergaya kupon */
.promo-deals{
    gap:8px;
}

.promo-deals li{
    position:relative;
    padding:11px 14px 11px 18px;
    border:2px solid #fff;
    border-left:6px solid #F2678F;
    border-radius:16px;
    background:#fff;
    box-shadow:0 6px 14px rgba(214,90,130,.16);
}

.promo-deals li span{
    color:#4A3338;
    font-size:15px;
    font-weight:700;
}

.promo-deals li strong{
    padding:5px 14px;
    background:linear-gradient(135deg,#F2678F,#F79A7B);
    box-shadow:0 4px 10px rgba(242,103,143,.35);
    font-size:16px;
}

/* tombol utama berdenyut */
.promo-link{
    width:100%;
    min-height:54px;
    gap:8px;
    background:linear-gradient(135deg,#F2678F,#F79A7B);
    box-shadow:0 10px 22px rgba(232,98,135,.5);
    font-size:16px;
    letter-spacing:.01em;
    animation:promo-pulse 2.2s ease-in-out infinite;
}

.promo-link:hover{
    box-shadow:0 14px 28px rgba(232,98,135,.6);
}

@keyframes promo-pulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.035);}
}

.promo-dots i.is-on{
    background:#F2678F;
}

@media (prefers-reduced-motion:reduce){
    .promo-ribbon span,
    .promo-ribbon::after,
    .promo-link{animation:none;}
    .promo-box{transition:none;}
}

/* =====================================================================
   TEMA v4: jendela imut ala "cute interface" (krem berpetak, outline
   ungu-magenta, title bar pink, tombol pil bergradasi)
   ===================================================================== */
:root{
    --y-line:#5E3B3E;
    --y-line-soft:#EBCFCB;
    --y-pink-1:#F59AB1;
    --y-pink-2:#FFD3DD;
    --y-pink-soft:#FFE9EE;
    --y-cream:#FFF8F5;
    --y-ink:#5A3B43;
}

body{
    background-color:var(--y-cream);
    background-image:
        linear-gradient(rgba(248,200,210,.4) 1px,transparent 1px),
        linear-gradient(90deg,rgba(248,200,210,.4) 1px,transparent 1px);
    background-size:30px 30px;
}

/* ---- jendela utama ---- */
#app .window{
    padding:0 clamp(16px,4vw,32px) 28px;
    overflow:visible;
    border:2.5px solid var(--y-line);
    border-radius:32px;
    background:#fff;
    box-shadow:0 22px 50px rgba(94,59,62,.16),0 4px 0 rgba(94,59,62,.08);
}

#app .window::before{
    display:none;
}

#app .window-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    height:52px;
    margin:0 calc(-1 * clamp(16px,4vw,32px)) 22px;
    padding:0 16px;
    border-bottom:2.5px solid var(--y-line);
    border-radius:29px 29px 0 0;
    background:linear-gradient(180deg,var(--y-pink-1),var(--y-pink-2));
    box-shadow:none;
}

#app .window-header .brand{
    order:1;
    padding:0;
    border:0;
    background:none;
    color:var(--y-ink);
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
}

#app .window-dot{
    position:static;
    order:2;
    display:flex;
    align-items:center;
    gap:7px;
}

#app .window-dot span,
#app .window-dot span:nth-child(2),
#app .window-dot span:nth-child(3){
    position:relative;
    display:block;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 0 rgba(94,59,62,.25);
}

#app .window-dot span::before{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--y-pink-1);
    font-size:13px;
    font-weight:700;
    line-height:1;
}

#app .window-dot span:nth-child(1)::before{content:"–";}
#app .window-dot span:nth-child(2)::before{content:"□";font-size:11px;}
#app .window-dot span:nth-child(3)::before{content:"×";font-size:15px;}

@media (max-width:600px){
    #app .window{
        padding:0 14px 22px;
        border-radius:28px;
    }
    #app .window-header{
        height:46px;
        margin:0 -14px 16px;
        border-radius:25px 25px 0 0;
    }
    #app .window-dot span{width:21px;height:21px;}
}

/* ---- judul bagian ---- */
.home-section-heading h2,
.home .order h2,
.home-section-heading .section-kicker,
.contact-heading .section-kicker{
    color:var(--y-ink);
}

.home-section{
    border-top:2px dashed var(--y-line-soft);
}

.home .order{
    border-top:2px dashed var(--y-line-soft);
}

/* ---- tombol utama: pil pink bergradasi + outline ungu ---- */
.explore-btn,
.hero-section .explore-btn,
.products-cta-btn,
.promo-link,
.package-select-btn,
.home-catalog-actions .payment-btn,
.home-catalog .package-select-btn,
.confirm-payment-btn,
.popup-ok{
    border:2px solid var(--y-line);
    border-radius:999px;
    background:linear-gradient(180deg,var(--y-pink-2),var(--y-pink-1));
    box-shadow:0 4px 0 rgba(94,59,62,.35);
    color:var(--y-ink);
    font-weight:700;
    text-shadow:none;
}

.explore-btn:hover,
.hero-section .explore-btn:hover,
.products-cta-btn:hover,
.promo-link:hover,
.package-select-btn:hover,
.home-catalog-actions .payment-btn:hover,
.confirm-payment-btn:hover,
.popup-ok:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 0 rgba(94,59,62,.4);
}

.explore-btn:active,
.hero-section .explore-btn:active,
.products-cta-btn:active,
.promo-link:active,
.package-select-btn:active,
.home-catalog-actions .payment-btn:active,
.confirm-payment-btn:active,
.popup-ok:active{
    transform:translateY(2px);
    box-shadow:0 1px 0 rgba(94,59,62,.35);
}

/* tombol sekunder: putih berbingkai ungu */
.explore-secondary,
.hero-section .explore-secondary,
.page-back,
.home .contact-links .order-btn{
    border:2px solid var(--y-line);
    border-radius:999px;
    background:#fff;
    box-shadow:0 3px 0 rgba(94,59,62,.22);
    color:var(--y-ink);
    font-weight:700;
}

.explore-secondary:hover,
.hero-section .explore-secondary:hover,
.page-back:hover,
.home .contact-links .order-btn:hover{
    background:var(--y-pink-soft);
}

/* ---- kotak kategori di beranda: seragam pink, outline ungu ---- */
#category-highlights .category-tiles > .category-tile,
#category-highlights .category-tiles > .category-tile:nth-child(n){
    --t1:var(--y-pink-soft);
    --t2:var(--y-pink-1);
    --t3:var(--y-ink);
    border:2px solid var(--y-line);
    border-radius:24px;
    background:linear-gradient(180deg,#fff,var(--y-pink-soft));
    box-shadow:0 4px 0 rgba(94,59,62,.22);
}

#category-highlights .category-tiles > .category-tile:hover{
    border-color:var(--y-line);
    box-shadow:0 7px 0 rgba(94,59,62,.28);
}

#category-highlights .category-tile-icon{
    border:2px solid var(--y-line);
    border-radius:50%;
    background:linear-gradient(180deg,var(--y-pink-2),var(--y-pink-1));
    box-shadow:none;
    color:#fff;
}

/* ---- kartu produk ---- */
#category-highlights .featured-category-grid > .premium-app-card,
#category-highlights .all-category-grid > .category-card{
    border:2px solid var(--y-line);
    border-radius:24px;
    box-shadow:0 4px 0 rgba(94,59,62,.2);
}

#category-highlights .featured-category-grid > .premium-app-card:not(.is-unavailable):not(:disabled):hover,
#category-highlights .all-category-grid > .category-card:not(.is-unavailable):not(:disabled):hover{
    border-color:var(--y-line);
    box-shadow:0 8px 0 rgba(94,59,62,.26);
}

#category-highlights .all-category-grid{
    border:2px solid var(--y-line-soft);
    border-radius:26px;
    background:var(--y-pink-soft);
}

#category-highlights .all-categories-trigger{
    border:2px solid var(--y-line);
    background:linear-gradient(180deg,var(--y-pink-2),var(--y-pink-1));
    box-shadow:0 4px 0 rgba(94,59,62,.3);
    outline:none;
    color:var(--y-ink);
}

/* ---- pop up: jendela putih, outline ungu, header pink ---- */
.home-catalog-box,
.product-popup .popup-box,
.payment-popup .payment-box{
    border:2.5px solid var(--y-line);
    border-radius:30px;
    box-shadow:0 26px 60px rgba(74,47,50,.28);
}

.popup-head,
.checkout-header{
    border-bottom:2px solid var(--y-line);
    background:linear-gradient(180deg,var(--y-pink-1),var(--y-pink-2));
    color:var(--y-ink);
}

.catalog-close,
.popup-close,
.payment-close{
    border:2px solid var(--y-line);
    background:#fff;
    color:var(--y-line);
}

/* ---- pop up promo ---- */
.promo-box{
    border:2.5px solid var(--y-line);
}

.promo-ribbon{
    border:2px solid var(--y-line);
    background:linear-gradient(180deg,var(--y-pink-2),var(--y-pink-1));
    box-shadow:0 4px 0 rgba(94,59,62,.35);
    color:var(--y-ink);
}

.promo-close{
    border-color:var(--y-line);
    color:var(--y-line);
}

.promo-deals li{
    border:2px solid var(--y-line);
    border-left-width:6px;
    box-shadow:0 3px 0 rgba(94,59,62,.2);
}

.promo-deals li strong,
.promo-countdown-cells div{
    border:1.5px solid var(--y-line);
    background:linear-gradient(180deg,var(--y-pink-2),var(--y-pink-1));
    box-shadow:none;
    color:var(--y-ink);
}

.promo-countdown{
    border-color:var(--y-line-soft);
}

.promo-countdown-label,
.promo-title{
    color:var(--y-ink);
}

.promo-caption{
    border-color:var(--y-line);
    color:var(--y-ink);
}

/* ---- lainnya ---- */
.site-banner{
    border:2px solid var(--y-line);
    border-radius:18px;
    background:var(--y-pink-soft);
    color:var(--y-ink);
}

.footer{
    color:var(--y-ink);
}


/* ============ KOTAK KATEGORI v2: lebih hidup, tiap kategori punya warna ============ */
#category-highlights .category-tiles{
    gap:14px;
}

#category-highlights .category-tiles > .category-tile{
    --k1:#FFE0E6;
    --k2:#FFC3D0;
    --k3:#F59AB1;
    --k4:#B8465F;
    position:relative;
    isolation:isolate;
    min-height:150px;
    gap:8px;
    padding:18px 10px 14px;
    overflow:hidden;
    border:2px solid var(--y-line);
    border-radius:26px;
    background:
        radial-gradient(rgba(255,255,255,.75) 1.6px,transparent 2.2px) 0 0/14px 14px,
        linear-gradient(165deg,var(--k1) 0,var(--k2) 100%);
    box-shadow:0 5px 0 color-mix(in srgb,var(--y-line) 30%,transparent);
    color:var(--k4);
}

/* gelembung besar di pojok bawah */
#category-highlights .category-tiles > .category-tile::before{
    content:"";
    position:absolute;
    right:-22px;
    bottom:-26px;
    z-index:-1;
    width:84px;
    height:84px;
    border-radius:50%;
    background:rgba(255,255,255,.55);
}

/* kilau di pojok atas */
#category-highlights .category-tiles > .category-tile::after{
    content:"✦";
    position:absolute;
    top:9px;
    right:12px;
    color:var(--k3);
    font-size:15px;
    line-height:1;
    transition:transform .5s ease;
}

#category-highlights .category-tiles > .category-tile:hover{
    transform:translateY(-5px);
    box-shadow:0 9px 0 color-mix(in srgb,var(--y-line) 32%,transparent);
}

#category-highlights .category-tiles > .category-tile:hover::after{
    transform:rotate(180deg) scale(1.3);
}

#category-highlights .category-tile-icon{
    width:58px;
    height:58px;
    border:2px solid var(--y-line);
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 0 color-mix(in srgb,var(--k3) 60%,transparent);
    color:var(--k4);
}

#category-highlights .category-tile-icon svg{
    width:28px;
    height:28px;
}

#category-highlights .category-tile-label{
    color:var(--y-ink);
    font-size:clamp(14px,3.8vw,16.5px);
    font-weight:700;
}

#category-highlights .category-tile-go{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:3px 11px;
    border:1.5px solid var(--y-line);
    border-radius:999px;
    background:#fff;
    color:var(--k4);
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
}

#category-highlights .category-tile-go i{
    font-style:normal;
    transition:transform .25s ease;
}

#category-highlights .category-tiles > .category-tile:hover .category-tile-go i{
    transform:translateX(3px);
}

#category-highlights .category-tiles > .category-tile[data-kind="all"]{--k1:#FFE3EA;--k2:#FFC9D6;--k3:#F59AB1;--k4:#B8465F;}
#category-highlights .category-tiles > .category-tile[data-kind="premium"]{--k1:#FFE0E6;--k2:#FFC3D0;--k3:#F59AB1;--k4:#B8465F;}
#category-highlights .category-tiles > .category-tile[data-kind="discord"]{--k1:#E8E6FC;--k2:#CFCBF6;--k3:#9C95E6;--k4:#4F46A8;}
#category-highlights .category-tiles > .category-tile[data-kind="roblox"]{--k1:#FFE6DD;--k2:#FFCDBD;--k3:#F2A08A;--k4:#B04A33;}
#category-highlights .category-tiles > .category-tile[data-kind="other"]{--k1:#FFF4CC;--k2:#FFE79B;--k3:#E8C94E;--k4:#85700E;}
#category-highlights .category-tiles > .category-tile[data-kind="custom"]{--k1:#DDF4E8;--k2:#BCE8D2;--k3:#7FD3A8;--k4:#2E7D5B;}

@media (max-width:560px){
    #category-highlights .category-tiles > .category-tile{
        min-height:138px;
        padding:16px 8px 12px;
    }
    #category-highlights .category-tile-icon{
        width:52px;
        height:52px;
    }
}


/* ============ DAFTAR PAKET LANGSUNG TAMPIL (Roblox / Discord dari beranda) ============ */
#category-highlights .inline-catalog{
    margin:0 0 20px;
}

#category-highlights .inline-catalog[hidden]{
    display:none;
}

#category-highlights.inline-catalog-mode .featured-category-grid,
#category-highlights.inline-catalog-mode .all-categories,
#category-highlights.inline-catalog-mode .category-empty{
    display:none !important;
}

#home-catalog.home-catalog.is-inline,
#home-catalog.home-catalog.is-inline.active{
    position:static;
    inset:auto;
    z-index:auto;
    display:block;
    padding:0;
    background:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    opacity:1;
    visibility:visible;
    transition:none;
}

#home-catalog.is-inline .home-catalog-box{
    width:100%;
    max-height:none;
    overflow:visible;
    transform:none;
    box-shadow:0 8px 0 rgba(94,59,62,.12);
}

#home-catalog.is-inline .home-catalog-content{
    max-height:none;
    overflow:visible;
}

#home-catalog.is-inline .catalog-close{
    display:none;
}

/* ============ Perbaikan pop up Your Order (rapi, header tanpa blok pink) ============ */
#payment-popup .checkout-header,
#product-popup .popup-head{
    background:none;
    background-image:none;
    color:inherit;
}

#payment-popup .payment-box{
    border:2px solid var(--y-line);
    border-radius:28px;
    background:linear-gradient(180deg,#FFF1F4 0,#FFFFFF 150px);
    box-shadow:0 24px 60px rgba(74,47,50,.3);
}

#payment-popup .checkout-header{
    margin:0 0 16px;
    padding:0 40px 14px 0;
    border-bottom:2px dashed var(--y-line-soft);
}

#payment-popup .checkout-eyebrow{
    display:inline-block;
    margin:0 0 6px;
    padding:2px 10px;
    border-radius:999px;
    background:var(--y-pink-soft);
    color:var(--y-ink);
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

#payment-popup .checkout-header h2{
    color:var(--y-ink);
}

#payment-popup .payment-close{
    width:34px;
    height:34px;
    padding:0;
    border:2px solid var(--y-line);
    border-radius:50%;
    background:#fff;
    color:var(--y-ink);
    font-size:20px;
    line-height:1;
}

#payment-popup .checkout-step{
    border:2px solid var(--y-line-soft);
    border-radius:20px;
    box-shadow:none;
}

#payment-popup .step-num{
    border:2px solid var(--y-line);
    background:linear-gradient(180deg,var(--y-pink-2),var(--y-pink-1));
    box-shadow:none;
    color:var(--y-ink);
}

#payment-popup .checkout-warranty-box{
    border:1.5px solid var(--y-line-soft);
}

#payment-popup .checkout-total-box{
    background:var(--y-pink-soft);
    box-shadow:inset 0 0 0 1.5px var(--y-line-soft);
}

#payment-popup .confirm-payment-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:50px;
    padding:10px 16px;
    font-size:15px;
    line-height:1.3;
    text-align:center;
    cursor:pointer;
}

#payment-popup .payment-issue{
    border-top:2px dashed var(--y-line-soft);
}

/* ============ Warna teks saat diseleksi: pink ============ */
::selection{
    background:#F8B7C8;
    color:#4A2F31;
    text-shadow:none;
}

::-moz-selection{
    background:#F8B7C8;
    color:#4A2F31;
    text-shadow:none;
}