* {

box-sizing:border-box;

}



body {

margin:0;

font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
Arial,
sans-serif;


background:
#050505;

background-image:

radial-gradient(
    circle at 15% 10%,
    rgba(255,140,0,.18),
    transparent 32%
),

radial-gradient(
    circle at 85% 18%,
    rgba(255,40,0,.14),
    transparent 28%
),

radial-gradient(
    circle at 50% 100%,
    rgba(180,30,0,.10),
    transparent 45%
);

background-repeat:no-repeat;
background-attachment:fixed;


color:white;

min-height:100vh;

}




.app {

padding:

25px 18px 100px;

}




.header {

text-align:center;

margin-bottom:25px;

}


.logo{

    position:relative;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:8px;

}





.logo img{

    width:170px;

    max-width:70vw;

    height:auto;

    object-fit:contain;

    opacity:0;

    transform:scale(.85) translateY(-15px);


    animation:

    logoAppear .9s cubic-bezier(.22,.8,.2,1)

    forwards;
    
     -webkit-backface-visibility:hidden;

    backface-visibility:hidden;

}



.logo img:active{

    transform:scale(.95);

}



.subtitle {

opacity:.6;

margin-top:5px;

}




.search {

height:55px;

border-radius:22px;

display:flex;

align-items:center;

padding:0 20px;

margin-bottom:20px;

}




.category {

display:flex;

gap:10px;

overflow-x:auto;

margin-bottom:25px;

}




.category-item {

padding:

10px 20px;


border-radius:20px;

white-space:nowrap;

}




.active {

background:

rgba(255,255,255,.2);

}




.products {

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:15px;

}




.product {

position:relative;

overflow:hidden;

min-height:330px;

padding:15px;

border-radius:28px;

display:flex;

flex-direction:column;

}




.product-image {

height:190px;

display:flex;

align-items:center;

justify-content:center;

}




.product-image img {

max-width:100%;

max-height:190px;

object-fit:contain;


filter:

drop-shadow(
0 20px 20px rgba(0,0,0,.4)
);


transition:.3s;

}




.product:active img {

transform:

scale(.95);

}




.product-name {

font-size:18px;

font-weight:600;

}




.product-info {

opacity:.6;

font-size:14px;

margin-top:5px;

}




.power {

margin-top:8px;

font-size:14px;

color:#ffd54a;

letter-spacing:3px;

}




.product-bottom {

display:flex;

justify-content:space-between;

align-items:center;

margin-top:auto;

padding-top:15px;

}



.menu {

position:fixed;

bottom:15px;

left:15px;

right:15px;

height:65px;

border-radius:30px;

display:flex;

justify-content:space-around;

align-items:center;

font-size:24px;

z-index:900;

}



.menu-item {

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;


border-radius:16px;


background:none;

border:none;

color:white;


font-size:24px;


padding:0;


cursor:pointer;


transition:.25s;


}


.menu-item:active {

transform:scale(.9);

background:

rgba(255,255,255,.15);

}


.cart-icon{

position:relative;

}


#cart-count {

position:absolute;


top:-5px;

right:-8px;


min-width:20px;

height:20px;


border-radius:50%;


background:#ff3b30;


color:white;


font-size:12px;


display:flex;

align-items:center;

justify-content:center;


font-weight:600;

}

/* ===========================
   PRODUCT SHEET
=========================== */

#productSheet{

    position:fixed;

    inset:0;

    display:flex;

    align-items:flex-end;

    pointer-events:none;

    opacity:0;

    transition:opacity .3s;

    z-index:1000;

}



#productSheet.show{

    opacity:1;

    pointer-events:auto;

}



.sheet-backdrop{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

}



.sheet{

    position:relative;

    width:100%;

    min-height:420px;

    max-height:85vh;

    border-radius:30px 30px 0 0;

    padding:24px;

    transform:translateY(100%);

    transition:transform .35s cubic-bezier(.22,.8,.2,1);

    overflow:auto;

}



#productSheet.show .sheet{

    transform:translateY(0);

}



.sheet-handle{

    width:54px;

    height:5px;

    border-radius:20px;

    margin:0 auto 20px;

    background:rgba(255,255,255,.4);

}

/* ===========================
   PRODUCT INFO
=========================== */

.sheet-title{

    margin:0 0 24px;

    text-align:center;

    font-size:28px;

    font-weight:700;

}



.sheet-info{

    border-radius:24px;

    padding:10px 20px;

    margin-bottom:24px;

}



.sheet-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}



.sheet-row:last-child{

    border-bottom:none;

}



.sheet-row span{

    color:rgba(255,255,255,.65);

}



.sheet-row strong{

    color:#fff;

    font-weight:600;

}



.sheet-price{

    text-align:center;

    font-size:34px;

    font-weight:700;

    margin-bottom:24px;

}



.sheet-buy{

    width:100%;

    height:56px;

    border-radius:18px;

    font-size:18px;

    font-weight:600;

}

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


.cart-item{

    padding:18px;

    border-radius:24px;

    margin-bottom:14px;

}



.cart-name{

    font-size:18px;

    font-weight:600;

    margin-bottom:15px;

}



.cart-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.cart-price{

    font-size:20px;

    font-weight:700;

}



.cart-actions{

    display:flex;

    align-items:center;

    gap:12px;

}



.cart-btn{

    width:38px;

    height:38px;

    border-radius:50%;

    border:

    1px solid rgba(255,255,255,.2);


    background:

    rgba(255,255,255,.15);


    color:white;

    font-size:22px;


    display:flex;

    align-items:center;

    justify-content:center;

}



.cart-qty{

    min-width:20px;

    text-align:center;

    font-size:18px;

}

/* ===========================
   ORDER BUTTON
=========================== */


.sheet-buy{


    position:relative;

    width:100%;

    height:60px;


    border-radius:22px;


    border:

    1px solid rgba(255,255,255,.25);


    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.25),

        rgba(255,255,255,.08)

    );


    backdrop-filter:

    blur(20px);


    -webkit-backdrop-filter:

    blur(20px);



    color:white;


    font-size:18px;


    font-weight:600;


    letter-spacing:.3px;


    overflow:hidden;


    cursor:pointer;


    transition:

    transform .25s ease,

    background .25s ease;



    box-shadow:

    0 10px 35px rgba(255,80,0,.18);


}





.sheet-buy::before{


    content:"";


    position:absolute;


    top:0;

    left:-80%;


    width:60%;

    height:100%;



    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.22),

        transparent

    );



    filter:

    blur(8px);



    transform:

    skewX(-20deg);



    border-radius:50%;



    animation:

    buttonShine 5s infinite;



}




.sheet-buy:active{


    transform:

    scale(.96);


    background:

    rgba(255,255,255,.25);


}





@keyframes buttonShine{


    0%{

        left:-80%;

    }


    35%{

        left:120%;

    }


    100%{

        left:120%;

    }


}

.sheet-buy{

overflow:hidden;

isolation:isolate;

}

/* ===========================
   ORDER FORM
=========================== */


.order-form{

display:flex;

flex-direction:column;

gap:14px;

margin-bottom:20px;

}




.glass-input{


width:100%;

height:55px;


border-radius:20px;


border:

1px solid rgba(255,255,255,.18);



background:

rgba(255,255,255,.08);



backdrop-filter:

blur(15px);



-webkit-backdrop-filter:

blur(15px);



color:white;



font-size:16px;



padding:0 18px;



outline:none;


}



.glass-input::placeholder{


color:

rgba(255,255,255,.55);


}



textarea.glass-input{


height:100px;

padding-top:16px;

resize:none;


}

.sheet-inner{

    width:100%;

}

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


.cart-total{

    margin:25px 0;

    padding:22px;

    border-radius:28px;

    text-align:center;

    position:relative;

    overflow:hidden;

}



.cart-total::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    right:-40px;

    top:-40px;


    background:

    rgba(255,120,0,.25);


    filter:blur(45px);

    border-radius:50%;

}



.total-label{

    position:relative;

    opacity:.65;

    font-size:15px;

    margin-bottom:8px;

}



.total-value{

    position:relative;

    font-size:32px;

    font-weight:700;

    letter-spacing:1px;

    background:

    linear-gradient(
        90deg,
        #fff,
        #ffd166
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* ===========================
   LOGO
=========================== */


.logo{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    margin-bottom:10px;

}



.logo img{

    width:170px;

    max-width:70vw;

    height:auto;

    display:block;

    object-fit:contain;


    opacity:0;


    animation:

    logoFade .8s ease forwards;


    -webkit-backface-visibility:hidden;

    backface-visibility:hidden;

}



@keyframes logoFade{


    from{

        opacity:0;

        transform:

        translateY(-15px)

        scale(.9);

    }


    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }


}

img{

    -webkit-transform:translateZ(0);

    transform:translateZ(0);

}

/* ===========================
   LOGO PARTICLES
=========================== */

.logo{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:visible;

}

#logoParticles{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.logo-particle{

    position:absolute;

    left:50%;

    top:50%;

    width:5px;

    height:5px;

    border-radius:50%;

    background:rgba(255,255,255,.75);

    box-shadow:0 0 8px rgba(255,255,255,.4);

    animation:logoParticle linear forwards;

}

@keyframes logoParticle{

    0%{

        opacity:0;
        transform:translate(0,0) scale(.3);

    }

    15%{

        opacity:1;

    }

    100%{

        opacity:0;
        transform:
            translate(var(--x), var(--y))
            scale(1.3);

    }

}