/* ==========================================================
   Print Platform
   File    : header.css
   Version : 1.0.0
   Purpose : Site Header
========================================================== */

:root{

    --primary:#D63384;
    --primary-hover:#B52B6F;

    --text:#222222;

    /*--background:#FFFFFF;*/
    --background:#efefef;

    --border:#E6E6E6;

    --shadow:0 3px 15px rgba(0,0,0,.10);
    
    --menu-font-size:20px;
    --logo-font-size:28px;

}

/* ==========================================================
   Page
========================================================== */

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;

}

/* ==========================================================
   Header
========================================================== */

#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;

}

/* ==========================================================
   Logo
========================================================== */

.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;

}

/* ==========================================================
   Navigation
========================================================== */

.pp-navigation{

    flex:1;

  /*  margin-left:60px; */

}

.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:20px; */ 
    font-size:var(--menu-font-size);

    font-weight:500;

    transition:.25s;

}

.pp-menu a:hover{

    color:#0052D9;

}

/* ==========================================================
   Right Side
========================================================== */

.pp-header-right{

    display:flex;

    align-items:center;

    gap:18px;

    margin-left:auto;

}

/* Divider */

.pp-divider{

    width:1px;

    height:32px;

    background:var(--border);

}

/* Basket */

.pp-basket{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:var(--text);

    /* font-size:20px; */
    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;

}

/* Login */

.pp-login{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:var(--text);

   /* font-size:20px; */
   font-size:var(--menu-font-size);

    font-weight:600;

    transition:.25s;

}

.pp-login:hover{

    color:var(--primary);

}

/* ==========================================================
   Sticky
========================================================== */

#pp-header.scrolled{

    height:65px;

    box-shadow:var(--shadow);

}

#pp-header.scrolled .pp-logo img{

    height:60px;

}

/* ==========================================================
   Responsive
========================================================== */

@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;

    }

}