body{
margin:0;
background:#f6f3ee;
font-family:Inter,sans-serif;
color:#111;
}

body{
margin:0;
background:#f6f3ee;
font-family:Inter,sans-serif;
color:#111;
}

#app{
padding-bottom:340px;
}

/* =========================
TOPBAR
========================= */

.topbar{
position:sticky;
top:0;
z-index:40;

display:flex;
justify-content:space-between;
align-items:center;

padding:22px 22px 18px;

background:rgba(246,243,238,.92);

border-bottom:1px solid rgba(0,0,0,.05);

}

.brand{
font-size:18px;
font-weight:600;
letter-spacing:.04em;
}

.subtitle{
margin-top:4px;
font-size:13px;
opacity:.5;
}

.counter{
width:74px;
height:42px;

border-radius:999px;

background:#111;
color:#fff;

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

font-size:14px;
font-weight:600;
}

/* =========================
GRID
========================= */

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

gap:48px 24px;

padding:
40px
22px
40px;
}

@media(min-width:980px){

.grid{
grid-template-columns:repeat(4,1fr);
gap:80px 40px;

padding:
60px
40px
60px;
}

}

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

.card{
position:relative;

display:flex;
flex-direction:column;
align-items:center;
}

.card-image{
height:260px;

display:flex;
align-items:flex-end;
justify-content:center;
}

.card-image img{
max-height:240px;
width:auto;
object-fit:contain;

transition:
transform .25s ease;
}

.card:hover img{
transform:translateY(-6px);
}

.card-title{
margin-top:20px;

font-size:15px;
font-weight:600;
line-height:1.35;

text-align:center;
}

.card-price{
margin-top:8px;

font-size:15px;

opacity:.45;
}

.add{
margin-top:16px;

width:44px;
height:44px;

border:none;
border-radius:999px;

background:#111;
color:#fff;

font-size:24px;

cursor:pointer;

transition:
transform .2s ease,
opacity .2s ease;
}

.add:hover{
transform:scale(1.08);
}

/* =========================
DOCK
========================= */

.dock{
position:fixed;
left:18px;
right:18px;
bottom:18px;

z-index:60;

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

border:1px solid rgba(0,0,0,.06);

border-radius:34px;

overflow:hidden;

box-shadow:
0 10px 40px rgba(0,0,0,.08);
}

/* =========================
SELECTION
========================= */

.slots{
display:flex;
gap:14px;

overflow-x:auto;

padding:18px;
}

.slots::-webkit-scrollbar{
display:none;
}

.slot{
position:relative;

min-width:140px;

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

border-radius:24px;

padding:14px;

display:flex;
flex-direction:column;
align-items:center;
}

.slot-remove{
position:absolute;
top:10px;
right:10px;

width:24px;
height:24px;

border-radius:999px;

background:#fff;

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

font-size:14px;

cursor:pointer;

box-shadow:
0 2px 8px rgba(0,0,0,.08);
}

.slot img{
height:110px;
width:auto;
object-fit:contain;
}

.slot-name{
margin-top:12px;

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

text-align:center;
line-height:1.3;
}

.slot-price{
margin-top:6px;

font-size:14px;

opacity:.5;
}

/* =========================
BOTTOM BAR
========================= */

.bottom-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;

padding:
18px
22px
22px;

border-top:
1px solid rgba(0,0,0,.06);
}

.bottom-left{
display:flex;
flex-direction:column;
}

.bottom-count{
font-size:15px;
font-weight:600;
}

.bottom-sub{
margin-top:4px;

font-size:13px;

opacity:.45;
}

.total{
font-size:16px;
font-weight:600;
}

.total strong{
display:block;

margin-top:4px;

font-size:36px;
line-height:1;
}

.buy{
height:62px;

padding:0 34px;

border:none;
border-radius:999px;

background:#111;
color:#fff;

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

cursor:pointer;
}

.buy:disabled{
opacity:.3;
}