:root {
    --primary-lavender: #ECD0EC;
    --dark: #111111;
    --gray-bg: #fdfaff;
    --sidebar-w: 240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: var(--gray-bg); color: var(--dark); }

/* FUNDO MESH FLUIDO */
.bg-mesh {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(at 0% 0%, var(--primary-lavender) 0, transparent 50%),
                radial-gradient(at 100% 100%, #ffffff 0, transparent 50%);
    z-index: -1; filter: blur(50px);
}

header {
    position: fixed; top: 0; width: 100%; height: 70px;
    background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(15px);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 4%; border-bottom: 1px solid rgba(0,0,0,0.05); z-index: 1000;
}

.search-box { display: flex; align-items: center; background: #f2f2f2; padding: 8px 15px; border-radius: 25px; }
.search-box input { border: none; background: transparent; font-size: 0.8rem; margin-left: 10px; width: 150px; }
.logo { font-family: 'Playfair Display'; font-size: 1.6rem; letter-spacing: 5px; font-weight: 700; cursor: pointer; }
.nav-icons { display: flex; gap: 20px; }
.icon-btn { position: relative; cursor: pointer; }
.badge { position: absolute; top: -6px; right: -8px; background: var(--dark); color: white; font-size: 9px; padding: 2px 6px; border-radius: 12px; }

.home-view { display: flex; margin-top: 70px; }
aside { width: var(--sidebar-w); padding: 40px 25px; border-right: 1px solid rgba(0,0,0,0.05); position: sticky; top: 70px; height: calc(100vh - 70px); }
.main-content { flex: 1; padding: 30px; }

/* GRID PARA CELULAR (2 COLUNAS) */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.card { background: white; position: relative; border: 1px solid rgba(0,0,0,0.02); transition: 0.3s; }
.card-img { aspect-ratio: 2/3; background: #eee; overflow: hidden; cursor: pointer; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.fav-heart { position: absolute; top: 12px; right: 12px; z-index: 10; cursor: pointer; }
.fav-heart.active svg { fill: #000; }

#cart-drawer { position: fixed; right: -100%; top: 0; width: 400px; height: 100%; background: white; z-index: 2000; transition: 0.4s; padding: 40px; display: flex; flex-direction: column; }
#cart-drawer.open { right: 0; }
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 1500; display: none; }

@media (min-width: 768px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 768px) {
    aside { display: none; }
    #cart-drawer { width: 100%; }
}