/* ==========================================================
   BabyChoice Nappies
   HEADER / NAVIGATION CSS
========================================================== */


/* ===============================
   HEADER WRAPPER
================================ */

.site-header {

position:sticky;

top:0;

z-index:1000;

background:rgba(255,251,245,.94);

backdrop-filter:blur(10px);

border-bottom:
1px solid rgba(255,143,174,.15);

}



/* ===============================
   NAV CONTAINER
================================ */


.nav-wrap {

max-width:var(--container);

margin:auto;

padding:16px 24px;

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;

}



/* ===============================
   LOGO
================================ */


.logo {

display:flex;

align-items:center;

gap:10px;

font-family:'Baloo 2',cursive;

font-size:26px;

font-weight:800;

color:var(--pink-deep);

}



.logo-img {

height:48px;

width:auto;

object-fit:contain;

}



/* ===============================
   DESKTOP NAV LINKS
================================ */


.nav-links {

display:flex;

align-items:center;

gap:32px;

font-weight:700;

}



.nav-links a {

position:relative;

padding:5px 0;

transition:.25s ease;

}



.nav-links a:hover {

color:var(--pink-deep);

}



.nav-links a::after {

content:"";

position:absolute;

bottom:-5px;

left:0;

width:0;

height:2px;

background:var(--pink-deep);

transition:.25s ease;

}



.nav-links a:hover::after {

width:100%;

}



/* ===============================
   RIGHT SIDE ACTIONS
================================ */


.nav-actions {

display:flex;

align-items:center;

gap:15px;

}



/* ===============================
   SEARCH
================================ */


.nav-search {

display:flex;

align-items:center;

gap:8px;

background:white;

border:2px solid var(--pink);

border-radius:999px;

padding:8px 16px;

}



.nav-search input {

border:none;

outline:none;

background:transparent;

width:150px;

font-size:14px;

}



/* ===============================
   CART
================================ */


.cart-icon {

position:relative;

font-size:25px;

display:flex;

align-items:center;

}



.cart-badge {

position:absolute;

top:-10px;

right:-12px;

background:var(--pink-deep);

color:white;

font-size:11px;

font-weight:700;

width:20px;

height:20px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}



/* ===============================
   MOBILE BUTTON
================================ */


.mobile-toggle {

display:none;

border:none;

background:none;

font-size:28px;

color:var(--ink);

}



/* Mobile search hidden desktop */

.mobile-search {

display:none;

}



/* ===============================
   TABLET + MOBILE
================================ */


@media(max-width:900px){


.nav-wrap {

position:relative;

}



.nav-links {


display:none;


position:absolute;

top:100%;

left:0;

right:0;


background:var(--cream);


padding:20px 24px;


flex-direction:column;

gap:0;


box-shadow:
0 15px 30px rgba(0,0,0,.08);


}



.nav-links.open {

display:flex;

}



.nav-links a {

padding:14px 0;

border-bottom:
1px solid rgba(255,143,174,.12);

}



.nav-search {

display:none;

}



.mobile-toggle {

display:block;

}



.mobile-search {


display:flex;


align-items:center;

gap:8px;


background:white;

border:2px solid var(--pink);


border-radius:999px;


padding:10px 16px;


margin-top:15px;


}



.mobile-search input {


border:none;

outline:none;

width:100%;

background:transparent;


}



}