/* ================= ПАЛІТРА ================= */
:root {
--black:#111;
--white:#fff;
--primary:#ff6f61;
--bg:#f4f7fa;
--trans:rgba(255,255,255,.06);
--shadow:rgba(0,0,0,.12);
}

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

body {
font-family:system-ui,-apple-system,BlinkMacSystemFont,Arial,Helvetica,sans-serif;
background:var(--bg);
color:#333;
min-height:100vh;
display:flex;
flex-direction:column;
}

/* ================= HEADER ================= */
header {
background:var(--black);
color:var(--white);
padding:1rem 2rem;
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:0;
z-index:1000;
}

header .logo {
font-size:1.6rem;
font-weight:700;
}

nav ul {
list-style:none;
display:flex;
gap:1.5rem;
align-items:center;
}

nav a {
color:var(--white);
text-decoration:none;
position:relative;
}

nav a::after {
content:"";
position:absolute;
bottom:-3px;
left:0;
width:0;
height:2px;
background:var(--primary);
transition:width .25s;
}

nav a:hover::after { width:100%; }

/* CART ICON */
.cart {
position:relative;
cursor:pointer;
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
}

.cart::before {
content:"\f07a";
font-family:"Font Awesome 5 Free";
font-weight:900;
font-size:1.4rem;
color:var(--white);
}

.cart .badge {
position:absolute;
top:-5px;
right:-5px;
background:var(--primary);
color:var(--white);
font-size:.75rem;
padding:.2rem .5rem;
border-radius:999px;
}

/* ================= MAIN ================= */
main {
flex:1;
display:flex;
gap:1rem;
overflow:hidden;
padding:1rem 2rem;
}

/* Sidebar */
.sidebar {
background:var(--white);
border-radius:12px;
box-shadow:0 4px 12px var(--shadow);
width:220px;
overflow-y:auto;
padding-bottom:1rem;
}

.sidebar h2 {
font-size:1.2rem;
margin:1rem 1rem 0;
padding-right:1rem;
}

.sidebar ul { list-style:none; }

.sidebar li {
padding:0.75rem 1rem;
cursor:pointer;
transition:background .15s;
border-left:4px solid transparent;
}

.sidebar li:hover {
background:rgba(0,0,0,0.03);
}

.sidebar li.active {
background:linear-gradient(90deg, rgba(255,111,97,0.06), transparent);
border-left-color:var(--primary);
}

/* Product grid */
.grid {
flex:1;
display:grid;
grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
gap:1.5rem;
align-content:start;
}

.card {
background:var(--white);
border-radius:12px;
overflow:hidden;
box-shadow:0 4px 12px var(--shadow);
display:flex;
flex-direction:column;
transition:transform .2s;
opacity:0;
transform:translateY(20px);
animation:fadeIn .6s ease-out forwards;
}

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

.card img {
width:100%;
aspect-ratio:4/3;
object-fit:cover;
background:#e9eef6;
}

.card .info {
padding:1rem;
flex-grow:1;
display:flex;
flex-direction:column;
}

.card h3 {
font-size:1.05rem;
margin:0 0 .5rem;
}

.card p.desc {
font-size:.9rem;
color:#555;
margin-bottom:.6rem;
flex-grow:1;
line-height:1.25;
}

.card .meta {
font-size:.85rem;
color:#666;
margin-bottom:.6rem;
}

.card .price {
color:var(--primary);
font-weight:700;
margin-bottom:.5rem;
}

.card .btn-group {
display:flex;
gap:.5rem;
margin-top:auto;
}

.card button,
.card a {
background:var(--primary);
color:var(--white);
border:none;
padding:.5rem 1rem;
border-radius:20px;
cursor:pointer;
transition:background .25s;
text-decoration:none;
text-align:center;
font-size:.9rem;
}

.card button:hover,
.card a:hover {
background:#e04c3d;
}

/* Animation */
@keyframes fadeIn {
from { opacity:0; transform:translateY(20px); }
to { opacity:1; transform:translateY(0); }
}

/* ================= FOOTER ================= */
footer {
background:var(--black);
color:var(--white);
text-align:center;
padding:1.5rem;
font-size:.9rem;
}

/* Responsive */
@media (max-width:900px) {
main { flex-direction:column; padding:1rem; }
.sidebar { width:100%; display:flex; overflow-x:auto; }
.sidebar ul { display:flex; gap:.5rem; }
.sidebar li {
white-space:nowrap;
border-left:0;
border-bottom:2px solid transparent;
}
.sidebar li.active {
border-bottom-color:var(--primary);
border-left:0;
}
}