:root{
--primary:#D63384;
--primary-hover:#B52B6F;
--text:#222222; --background:#efefef;
--border:#E6E6E6;
--shadow:0 3px 15px rgba(0,0,0,.10);
--menu-font-size:20px;
--logo-font-size:28px;
} body{
margin:0;
padding-top:80px;
background:#F8F9FB;
font-family:Poppins,sans-serif;
}
.pp-container{
max-width:1400px;
height:100%;
margin:0 auto;
padding:0 25px;
display:flex;
align-items:center;
} #pp-header{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
background:var(--background);
border-bottom:1px solid var(--border);
transition:all .30s ease;
z-index:9999;
} .pp-logo{
flex:0 0 auto;
display:flex;
align-items:center;
}
.pp-logo img{
display:block;
height:50px;
width:auto;
transition:.30s;
}
.pp-logo a{
text-decoration:none;
color:var(--text);
font-size:30px;
font-weight:700;
} .pp-navigation{
flex:1; }
.pp-menu{
display:flex;
justify-content:center;
align-items:center;
gap:30px;
list-style:none;
margin:0;
padding:0;
}
.pp-menu li{
margin:0;
padding:0;
}
.pp-menu a{
text-decoration:none;
color:var(--text); font-size:var(--menu-font-size);
font-weight:500;
transition:.25s;
}
.pp-menu a:hover{
color:#0052D9;
} .pp-header-right{
display:flex;
align-items:center;
gap:18px;
margin-left:auto;
} .pp-divider{
width:1px;
height:32px;
background:var(--border);
} .pp-basket{
display:flex;
align-items:center;
gap:8px;
text-decoration:none;
color:var(--text); font-size:var(--menu-font-size);
font-weight:600;
transition:.25s;
}
.pp-basket:hover{
color:var(--primary);
}
#pp-basket-total{
color:var(--primary);
font-weight:700;
} .pp-login{
display:flex;
align-items:center;
gap:8px;
text-decoration:none;
color:var(--text); font-size:var(--menu-font-size);
font-weight:600;
transition:.25s;
}
.pp-login:hover{
color:var(--primary);
} #pp-header.scrolled{
height:65px;
box-shadow:var(--shadow);
}
#pp-header.scrolled .pp-logo img{
height:60px;
} @media (max-width:1024px){
.pp-navigation{
display:none;
}
}
@media (max-width:768px){
body{
padding-top:70px;
}
#pp-header{
height:70px;
}
.pp-logo img{
height:46px;
}
}