/*==================================================
  PALAM BAKERS HEADER
  CLEAN FINAL VERSION
==================================================*/


/*==================================================
  TOP OFFER BAR
==================================================*/

.top-bar{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:38px;

    display:flex;
    align-items:center;

    background:var(--green);
    color:#fff;

    overflow:hidden;

    z-index:99999;
}

.pb-offer-wrap{
    width:100%;
    overflow:hidden;
}

.pb-offer-track{
    display:flex;
    align-items:center;

    width:max-content;

    gap:70px;

    white-space:nowrap;

    animation:offerMove 18s linear infinite;
}

.pb-offer-track span{
    display:inline-block;

    font-size:13px;
    letter-spacing:.4px;

    white-space:nowrap;
}

@keyframes offerMove{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}


/*==================================================
  MAIN HEADER
==================================================*/

.header{
    position:fixed;

    top:38px;
    left:0;

    width:100%;
    height:84px;

    background:transparent;

    border-bottom:none;

    box-shadow:none;

    transition:
        background .35s ease,
        height .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    z-index:9999;
}


/*==================================================
  HOME PAGE — NORMAL
==================================================*/

body.home-page .header{
    background:transparent;
    border-bottom:none;
    box-shadow:none;
}


/*==================================================
  HOME PAGE — NORMAL TEXT
==================================================*/

body.home-page .header .desktop-nav a,
body.home-page .header .logo-text h2,
body.home-page .header .logo-text span,
body.home-page .header .icon-link{
    color:#fff;
}


/*==================================================
  SCROLLED HEADER
  THIS IS THE IMPORTANT PART
==================================================*/

.header.scrolled{

    position:fixed;

    top:38px;
    left:0;

    width:100%;
    height:86px;

    background:#fff !important;

    background-color:#fff !important;

    background-image:none !important;

    border-bottom:1px solid #e8e8e8 !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.10) !important;

    z-index:9999;
}


/*==================================================
  SCROLLED HEADER INNER
==================================================*/

.header.scrolled .header-inner{
    height:86px;
}


/*==================================================
  SCROLLED TEXT
==================================================*/

.header.scrolled .desktop-nav a,
.header.scrolled .logo-text h2,
.header.scrolled .logo-text span,
.header.scrolled .icon-link{

    color:#111b12 !important;
}


/*==================================================
  SCROLLED NAV HOVER
==================================================*/

.header.scrolled .desktop-nav a:hover,
.header.scrolled .desktop-nav a.active{

    color:var(--gold) !important;
}


/*==================================================
  HEADER INNER
==================================================*/

.header-inner{

    width:100%;

    max-width:1400px;

    height:84px;

    margin:0 auto;

    display:flex;

    align-items:center;

}


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

.logo{

    width:340px;

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    transition:transform .25s ease;

    color: #fff;
}

.logo:hover{
    transform:translateY(-2px);
}


.logo img{

    width:70px;
    height:70px;

    object-fit:cover;

    border-radius:50%;

    box-shadow:
        0 4px 12px rgba(0,0,0,.12);
}


.logo-text{

    display:flex;

    flex-direction:column;
}


.logo-text h2{

    margin:0;

    font-family:'Cormorant Garamond',serif;

    font-size:35px;

    font-weight:700;

    line-height:1;
    color:#fff}



.logo-text span{

    display:block;

    margin-top:3px;

    font-size:11px;

    font-weight:500;

    letter-spacing:2px;

    text-transform:uppercase;
}


/*==================================================
  DESKTOP NAVIGATION
==================================================*/

.desktop-nav{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:38px;

    font-family:'Cormorant Garamond',serif;
}


.desktop-nav a{

    position:relative;

    display:flex;

    align-items:center;

    height:84px;


    color:#fff;

    font-size:22px;

    font-weight:600;

    letter-spacing:.3px;

    text-decoration:none;

    transition:
        color .3s ease;
        
    
}


.desktop-nav a:hover,
.desktop-nav a.active{

    color:var(--gold);
}


.desktop-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:14px;

    width:0;

    height:2px;

    background:var(--gold);

    border-radius:20px;

    transition:
        width .3s ease;
}


.desktop-nav a:hover::after,
.desktop-nav a.active::after{

    width:100%;
}


/*==================================================
  RIGHT HEADER ICONS
==================================================*/

.header-icons{

    width:0px;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:0px;
}


.icon-link{

    position:relative;

    width: 50px;
    height:50px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:18px;

    color:#fff;

    transition:
        background .3s ease,
        color .3s ease;
}





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

#cartCount{

    position:absolute;

    top:-6px;
    right:-6px;

    width:18px;
    height:18px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:var(--green);

    color:#fff;

    border-radius:50%;

    font-size:10px;

    font-weight:600;
}


/*==================================================
  INNER PAGES
  ALWAYS WHITE HEADER
==================================================*/

body.page-inner .header{

    background:#fff;

    background-color:#fff;

    border-bottom:1px solid #ececec;

    box-shadow:
        0 8px 25px rgba(0,0,0,.08);

    height:86px;
}


body.page-inner .header-inner{

    height:86px;
}


/*==================================================
  INNER PAGE TEXT
==================================================*/

body.page-inner .header .desktop-nav a,
body.page-inner .header .logo-text h2,
body.page-inner .header .logo-text span,
body.page-inner .header .icon-link{

    color:#111b12;
}


/*==================================================
  INNER PAGE HOVER
==================================================*/

body.page-inner .header .desktop-nav a:hover,
body.page-inner .header .desktop-nav a.active{

    color:var(--gold);
}


/*==================================================
  INNER PAGE — IF JS ADDS SCROLLED
  NOTHING CHANGES
==================================================*/

body.page-inner .header.scrolled{

    background:#fff !important;

    background-color:#fff !important;

    border-bottom:1px solid #ececec !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.08) !important;

    height:86px;
}


body.page-inner .header.scrolled .desktop-nav a,
body.page-inner .header.scrolled .logo-text h2,
body.page-inner .header.scrolled .logo-text span,
body.page-inner .header.scrolled .icon-link{

    color:#111b12 !important;
}


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

.mini-cart{

    position:fixed;

    top:105px;
    right:20px;

    width:360px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    display:none;

    opacity:0;

    visibility:hidden;

    box-shadow:
        0 18px 45px rgba(0,0,0,.18);

    transition:
        opacity .25s ease,
        visibility .25s ease;

    z-index:999999;
}


.mini-cart.show{

    display:block;

    opacity:1;

    visibility:visible;
}


/*==================================================
  MOBILE NAV OVERLAY
==================================================*/

.nav-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(5px);

    -webkit-backdrop-filter:blur(5px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

    z-index:9998;
}


.nav-overlay.active{

    opacity:1;

    visibility:visible;
}


/*==================================================
  UTILITY
==================================================*/

.header-shadow{

    box-shadow:
        0 10px 35px rgba(0,0,0,.08);
}


.header-hide{
    transform:translateY(-100%);
}


.header-show{
    transform:translateY(0);
}


/*==================================================
  DESKTOP ONLY
==================================================*/

@media (min-width:993px){

    .mobile-toggle,
    .mobile-brand,
    .mobile-menu-logo{

        display:none;
    }

}



/*==================================================
  PRODUCT DETAIL PAGE HEADER
  FIXED WHITE HEADER
==================================================*/

body.pb-detail-page .header{
    position:fixed !important;

    top:38px !important;
    left:0 !important;

    width:100% !important;
    height:86px !important;

    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;

    border-bottom:1px solid #e8e8e8 !important;

    box-shadow:0 8px 25px rgba(0,0,0,.08) !important;

    z-index:9999 !important;
}


/* Header inner */

body.pb-detail-page .header-inner{
    height:86px !important;
}


/* Logo text */

body.pb-detail-page .header .logo-text h2,
body.pb-detail-page .header .logo-text span{

    color:#111b12 !important;
}


/* Navigation */

body.pb-detail-page .header .desktop-nav a{

    color:#111b12 !important;
}


/* Navigation hover */

body.pb-detail-page .header .desktop-nav a:hover,
body.pb-detail-page .header .desktop-nav a.active{

    color:var(--gold) !important;
}


/* Cart / icons */

body.pb-detail-page .header .icon-link{

    color:#111b12 !important;
}


/* Cart count */

body.pb-detail-page .header #cartCount{

    background:var(--green) !important;
    color:#fff !important;
}


/* If JS adds .scrolled, DON'T change anything */

body.pb-detail-page .header.scrolled{

    background:#fff !important;
    background-color:#fff !important;

    height:86px !important;

    border-bottom:1px solid #e8e8e8 !important;

    box-shadow:0 8px 25px rgba(0,0,0,.08) !important;
}


body.pb-detail-page .header.scrolled .desktop-nav a,
body.pb-detail-page .header.scrolled .logo-text h2,
body.pb-detail-page .header.scrolled .logo-text span,
body.pb-detail-page .header.scrolled .icon-link{

    color:#111b12 !important;
}


/* =========================================================
   MOBILE HEADER — FINAL
========================================================= */

@media (max-width: 992px){

    /* -----------------------------------------
       TOP OFFER BAR
    ----------------------------------------- */

    .top-bar{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        width:100% !important;
        height:38px !important;
        z-index:100000 !important;
    }


    /* -----------------------------------------
       MAIN MOBILE HEADER
    ----------------------------------------- */

    .header{
        position:fixed !important;

        top:38px !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;
        height:62px !important;

        background:#fff !important;

        border-bottom:1px solid #eeeeee !important;

        box-shadow:0 3px 12px rgba(0,0,0,.08) !important;

        z-index:99999 !important;
    }


    .header-inner{
        position:relative !important;

        width:100% !important;
        max-width:none !important;

        height:62px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        padding:0 14px !important;

        box-sizing:border-box !important;
    }


    /* -----------------------------------------
       HIDE DESKTOP LOGO
    ----------------------------------------- */

    .header .logo{
        display:none !important;
    }


    /* -----------------------------------------
       HIDE DESKTOP NAV
    ----------------------------------------- */

    .header .desktop-nav{
        display:none !important;
    }


    /* -----------------------------------------
       MOBILE HAMBURGER
    ----------------------------------------- */

    .header .mobile-toggle{
        display:flex !important;

        position:relative !important;

        width:40px !important;
        height:40px !important;

        align-items:center !important;
        justify-content:center !important;

        flex-shrink:0 !important;

        z-index:20 !important;

        color:#171717 !important;
    }

    .header .mobile-toggle i{
        font-size:19px !important;
        color:#171717 !important;
    }


    /* -----------------------------------------
       MOBILE LOGO
    ----------------------------------------- */

    .header .mobile-brand{

        position:absolute !important;

        left:50% !important;
        top:50% !important;

        transform:translate(-50%,-50%) !important;

        width:92px !important;
        height:54px !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        margin:0 !important;
        padding:0 !important;

        text-decoration:none !important;

        z-index:30 !important;

        overflow:hidden !important;
    }


    .header .mobile-brand img{

        display:block !important;

        width:auto !important;
        height:48px !important;

        max-width:82px !important;
        max-height:48px !important;

        object-fit:contain !important;

        margin:0 !important;
        padding:0 !important;

        border:0 !important;
        border-radius:0 !important;

        box-shadow:none !important;
    }


    /* -----------------------------------------
       CART
    ----------------------------------------- */

    .header .header-icons{

        width:40px !important;

        height:40px !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        flex-shrink:0 !important;

        margin-left:auto !important;
    }


    .header .icon-link{

        width:40px !important;
        height:40px !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        font-size:18px !important;

        color:#111 !important;

        border-radius:50% !important;
    }


    /* -----------------------------------------
       CART COUNT
    ----------------------------------------- */

    .header #cartCount{

        top:-1px !important;
        right:-1px !important;

        width:17px !important;
        height:17px !important;

        font-size:9px !important;
    }


    /* -----------------------------------------
       REMOVE ANY BODY SPACE
    ----------------------------------------- */

    body{
        padding-top:0 !important;
    }

    main{
        padding-top:0 !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px){

    .header{
        height:62px !important;
    }

    .header-inner{
        height:62px !important;
        padding:0 12px !important;
    }

    .header .mobile-brand{
        width:88px !important;
        height:54px !important;
    }

    .header .mobile-brand img{
        height:46px !important;
        max-width:78px !important;
        max-height:46px !important;
    }

}