/* =========================================================
   ARIYAN PERFUME - VIDEO STYLE STICKY HEADER
   File: assets/css/sticky-header.css

   Behaviour:
   1) Topbar normal থাকবে এবং scroll করলে উপরে চলে যাবে
   2) Logo + Search + Actions + Menu একসাথে sticky হবে
   3) Header fixed হলে page jump করবে না
   ========================================================= */

html,
body{
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
}

/* ---------- TOP BAR ---------- */
.topbar{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    z-index:1 !important;
}

/* ---------- HEADER NORMAL STATE ---------- */
body > header,
header{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    margin:0 !important;
    background:#fff !important;
    z-index:100 !important;
}

/* Logo + Search + Account/Cart */
.header-main{
    position:relative !important;
    width:100% !important;
    max-width:1690px !important;
    min-height:108px !important;
    margin:0 auto !important;
    padding:18px 22px !important;

    display:grid !important;
    grid-template-columns:300px minmax(350px,820px) 330px !important;
    column-gap:48px !important;
    align-items:center !important;
    justify-content:space-between !important;

    box-sizing:border-box !important;
    background:#fff !important;
}

.header-main .logo{
    justify-self:start !important;
}

.header-main .search{
    width:100% !important;
    max-width:820px !important;
    height:51px !important;
    margin:0 auto !important;
    justify-self:center !important;
}

.header-main .actions{
    justify-self:end !important;
}

/* =========================================================
   MENU
   ========================================================= */

header nav{
    display:block !important;
    width:100% !important;
    background:#fff !important;
    border-top:1px solid #eeeeee !important;
    border-bottom:1px solid #eeeeee !important;
}

header .nav-inner{
    width:100% !important;
    max-width:1690px !important;
    min-height:46px !important;
    margin:0 auto !important;
    padding:0 22px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:30px !important;

    box-sizing:border-box !important;
    white-space:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;

    scrollbar-width:none;
}

header .nav-inner::-webkit-scrollbar{
    display:none;
}

header .nav-inner a{
    position:relative !important;
    min-height:46px !important;

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

    color:#222 !important;
    text-decoration:none !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:600 !important;

    border-bottom:2px solid transparent !important;
    transition:color .2s ease,border-color .2s ease !important;
}

header .nav-inner a:hover,
header .nav-inner a:focus{
    color:#c8141c !important;
    border-bottom-color:#c8141c !important;
}

/* =========================================================
   FIXED STATE
   JS body-তে ap-header-fixed class যোগ করবে
   ========================================================= */

body.ap-header-fixed > header{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:0 !important;

    width:100% !important;
    margin:0 !important;
    transform:none !important;

    background:#fff !important;
    z-index:2147483000 !important;

    border-bottom:1px solid #e5e5e5 !important;
    box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
}

/* Fixed অবস্থায়ও menu থাকবে */
body.ap-header-fixed > header nav{
    display:block !important;
}

/* JS এই placeholder তৈরি করবে */
#ap-header-placeholder{
    display:block !important;
    width:100% !important;
    height:0;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

    .header-main{
        grid-template-columns:200px minmax(300px,1fr) 230px !important;
        column-gap:20px !important;
        padding:18px 20px !important;
    }

    header .nav-inner{
        gap:22px !important;
        justify-content:flex-start !important;
        padding:0 20px !important;
    }
}

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

@media(max-width:900px){

    .header-main{
        grid-template-columns:1fr !important;
        min-height:auto !important;
        row-gap:10px !important;
        padding:12px 14px !important;
    }

    .header-main .logo{
        justify-self:center !important;
    }

    .header-main .search{
        width:100% !important;
        max-width:100% !important;
        justify-self:stretch !important;
    }

    .header-main .actions{
        justify-self:center !important;
    }

    header .nav-inner{
        justify-content:flex-start !important;
        gap:20px !important;
        padding:0 14px !important;
    }

    header .nav-inner a{
        min-height:42px !important;
        font-size:12px !important;
    }
}

@media(max-width:550px){

    .header-main{
        padding:10px 12px !important;
    }

    .header-main .search{
        height:46px !important;
    }

    .header-main .actions{
        gap:16px !important;
        font-size:12px !important;
    }

    header .nav-inner{
        min-height:40px !important;
        gap:18px !important;
        padding:0 12px !important;
    }

    header .nav-inner a{
        min-height:40px !important;
        font-size:11px !important;
    }
}