*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:#ffffff;

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

display:flex;
justify-content:center;

color:#111;

}

.app{

width:100%;
max-width:480px;

padding:18px;
padding-bottom:120px;

}

/* HERO */

.hero{

height:200px;

position:relative;

overflow:hidden;

max-width:480px;
width:100%;

}

.hero-bg{

position:absolute;

width:100%;
height:100%;

background:linear-gradient(
135deg,
#f5f5f5,
#e9e9e9
);

}

.hero-content{

position:relative;

text-align:center;

padding-top:40px;

}

.avatar{

width:80px;
height:80px;

border-radius:50%;

border:4px solid white;

object-fit:cover;

}

.hero h1{

font-size:20px;
margin-top:6px;

}

.hero p{

font-size:13px;
color:#666;

}

/* section */

.section-title{

margin:24px 0 10px;

font-size:15px;
font-weight:600;

}

/* grid */

.grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

}

/* glass card */

.card{

background:linear-gradient(
135deg,
rgba(255,255,255,0.9),
rgba(255,255,255,0.6)
);

backdrop-filter:blur(20px);

border-radius:20px;

border:1px solid rgba(255,255,255,0.4);

box-shadow:
0 10px 30px rgba(0,0,0,0.08);

padding:10px;

cursor:pointer;

transition:.25s;

}

.card:hover{

transform:translateY(-6px) scale(1.02);

box-shadow:
0 20px 40px rgba(0,0,0,0.12);

}

.card img{

width:100%;

border-radius:12px;

margin-bottom:6px;

}

.card p{

font-size:14px;
font-weight:500;

}

/* link */

.link{

display:block;

padding:14px;

margin-bottom:10px;

border-radius:16px;

background:#fafafa;

border:1px solid #eee;

text-decoration:none;

color:#111;

}

/* blog */

.blog{

padding:14px;

border-radius:16px;

border:1px solid #eee;

margin-bottom:8px;

background:#fafafa;

}

/* popup */

#popup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

display:none;

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

align-items:center;
justify-content:center;

padding:20px;

z-index:100;

}

.popup-box{

background:white;

border-radius:26px;

padding:20px;

max-width:420px;

width:100%;

animation:fade .2s ease;

}

.popup-box img{

width:100%;

border-radius:12px;

margin-bottom:8px;

}

@keyframes fade{

from{
opacity:0;
transform:scale(.95);
}

to{
opacity:1;
transform:scale(1);
}

}

/* slider */

.slider{

overflow:hidden;

border-radius:12px;

}

.slider img{

width:100%;

}

/* button */

.btn{

display:inline-block;

padding:10px 14px;

border-radius:10px;

border:1px solid #ddd;

margin-top:8px;

background:#fafafa;

}

/* nav */

.nav{

position:fixed;

bottom:14px;

left:50%;

transform:translateX(-50%);

max-width:460px;

width:92%;

background:white;

border-radius:28px;

padding:12px;

display:flex;

justify-content:space-around;

box-shadow:
0 20px 40px rgba(0,0,0,0.12);

}

.nav a{

width:44px;
height:44px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

color:#333;

}

.nav a.active{

background:#111;

color:#fff;

}

/* cart badge */

.cart-btn{

position:relative;

}

#cart-count{

position:absolute;

top:-4px;
right:-4px;

background:#111;

color:white;

font-size:10px;

width:18px;
height:18px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

}

/* responsive */

@media(max-width:380px){

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

}