html[dir="rtl"]{
    --start: right;
    --end: left;
    --reverse: 1;
}

html[dir="ltr"]{
    --start: left;
    --end: right;
    --reverse: -1;
}

:root{

    --surface: #ffffff;
    --surface-soft: #f8fafc;

    --text: #0f172a;
    --text-soft: #64748b;

    --border: #e2e8f0;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;

    --shadow-sm:
        0 2px 8px rgba(15,23,42,.04);

    --shadow-md:
        0 20px 40px rgba(15,23,42,.08);

    --transition:
        .22s cubic-bezier(.4,0,.2,1);
}

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

.modern-header{
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
}

.header-announcement{
    position: relative;
    padding: 10px 20px;

    font-size: 14px;
    font-weight: 600;
}

.announcement-close{

    position: absolute;

    inset-inline-end: 0;

    width: 34px;
    height: 34px;

    border: none;
    background: transparent;

    color: inherit;
}

/* =========================================================
   TOPBAR
========================================================= */

.topbar-wrapper{
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar-inner{

    height: 42px;

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

.topbar-link{

    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--text-soft);

    font-size: 13px;
    font-weight: 500;

    transition: color var(--transition);
}

.topbar-link:hover{
    color: var(--pd-primary);
    text-decoration: none;
}

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

.main-header-wrapper{

    position: sticky;
    top: 0;

    z-index: 9999;

    background: rgba(255,255,255,.92);

    backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(226,232,240,.8);
}

.main-header-wrapper.scrolled{
    background: rgba(255,255,255,.98);
    box-shadow: var(--shadow-sm);
}

.main-header-inner{

    height: 84px;

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

    gap: 24px;
}

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

.header-logo img{
    height: 52px;
    width: auto;
}

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

.header-search{
    position: relative;

    flex: 1;

    max-width: 650px;
}

.header-search-form{
    position: relative;
    width: 100%;
}

.header-search-input{

    width: 100%;
    height: 48px;

    padding-inline: 16px 52px;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background: var(--surface-soft);

    font-size: 14px;

    text-align: start;

    outline: none;

    transition: all var(--transition);
}

.header-search-input:focus{

    background: #fff;

    border-color: var(--pd-primary);

    box-shadow:
        0 0 0 4px rgba(var(--pd-primary-rgb), .12);
}

.header-search-btn{

    position: absolute;

    top: 4px;
    inset-inline-end: 4px;

    width: 40px;
    height: 40px;

    border: none;

    border-radius: var(--radius-md);

    background: var(--pd-primary) !important;

    color: #fff;

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

    cursor: pointer;

    transition: all var(--transition);
}

.header-search-btn:hover{
    filter: brightness(1.05);
}

.search-card{

    position: absolute;

    top: 56px;
    left: 0;
    right: 0;

    z-index: 9999;

    border: none;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    overflow: hidden;
}

.search-result-box{
    max-height: 380px;
    overflow-y: auto;
}

/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions{

    display: flex;
    align-items: center;
    gap: 12px;
}

.header-action,
.header-user{

    position: relative;

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

    width: 44px;
    height: 44px;

    border-radius: 50%;

    color: var(--text);

    transition: all var(--transition);
}

.header-user{
    width: auto;
    gap: 12px;
}

.header-action:hover,
.header-user:hover{

    background: var(--surface-soft);

    color: var(--pd-primary) !important;

    text-decoration: none;
}

.header-avatar{

    width: 42px;
    height: 42px;

    border-radius: 50%;

    object-fit: cover;
}

.header-user-text{
    flex-direction: column;
    line-height: 1.1;
}

.header-user-text small{

    color: var(--text-soft);

    font-size: 11px;
}

.header-user-text span{

    color: var(--text);

    font-size: 13px;
    font-weight: 600;
}

.header-count{

    position: absolute;

    top: -3px;
    inset-inline-end: -3px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    border-radius: 999px;

    background: var(--pd-primary) !important;

    color: #fff;

    font-size: 11px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   DESKTOP NAVBAR
========================================================= */

.desktop-navbar{

    position: relative;

    background: var(--surface);

    border-bottom: 1px solid var(--border);

    z-index: 100;

    overflow: visible !important;
}

.desktop-navbar{
    overflow: visible;
}

.desktop-menu{
    position: relative;
}

.desktop-menu{

    display: flex;
    align-items: center;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.menu-item{
    position: relative;
}

.menu-link{

    position: relative;

    display: flex;
    align-items: center;
    gap: 6px;

    height: 64px;

    padding: 0 14px;

    color: var(--text);

    font-size: 15px;
    font-weight: 500;

    text-decoration: none;

    transition:
        color var(--transition),
        opacity var(--transition);
}

.menu-link::after{

    content:'';

    position:absolute;

    bottom: 0;
    inset-inline-start: 0;

    width:0;
    height:2px;

    background: var(--pd-primary) !important;

    transition: width var(--transition);
}

.menu-link:hover,
.menu-item.active .menu-link{

    color: var(--pd-primary) !important;

    text-decoration: none;
}

.menu-link:hover::after,
.menu-item.active .menu-link::after{
    width:100%;
}

/* =========================================================
   NAV ARROW
========================================================= */

.menu-arrow{

    display: flex;
    align-items: center;

    font-size: 11px;

    transition: transform var(--transition);
}

.mega-parent:hover .menu-arrow{
    transform: rotate(180deg);
}

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

html[dir="ltr"] .mega-dropdown{ right: 0px; transform :translate3d(0px, 20px, 0px) }

.mega-dropdown{
 position: absolute;

    will-change: transform;
    /* width: 100vw; */
    max-width: 100vw;


    background: var(--surface);
    border-top: 1px solid rgba(0,0,0,.05);

    padding: 8px 0;

    opacity: 0;
    visibility: hidden;

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

    box-shadow: 0 10px 30px rgba(0,0,0,.06);

    z-index: 9999;

    overflow: hidden;
}

.mega-parent:hover .mega-dropdown{

    opacity: 1;
    visibility: visible;


    transform :translate3d(0px, 0px, 0px);

    will-change: transform;
}
.mega-next{
    right: 0;
}
.mega-prev{ left: 5px; }
/* =========================================================
   SLIDER WRAPPER
========================================================= */
.mega-dropdown .container{
    max-width: 1280px;
    margin: 0 auto;

    padding-inline:0;
}
.mega-slider-wrapper{

   position: relative;
    width: 100%;

    padding-inline: clamp(8px, 2vw, 64px);

    overflow: visible;
}

/* =========================================================
   CATEGORY SLIDER
========================================================= */

.category-grid-modern{

    display: flex;
    align-items: flex-start;

    gap: 12px;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;

    padding: 5px 0;
}

.category-grid-modern::-webkit-scrollbar{
    display: none;
}

/* =========================================================
   CATEGORY CARD
========================================================= */

.mega-card{

    flex: 0 0 120px;

    min-width: 120px;
    max-width: 120px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 12px 10px;

    border-radius: 14px;

    text-align: center;

    text-decoration: none;

    transition:
        transform .20s ease,
        background .20s ease;
}

.mega-card:hover{

    transform: translateY(-2px);

    background: rgba(0,0,0,.03);
}

/* =========================================================
   CATEGORY IMAGE
========================================================= */

.category-icon{

    width: 68px;
    height: 68px;

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

    margin-bottom: 12px;
}

.category-icon img{

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform .25s ease;
}

.mega-card:hover img{
    transform: scale(1.06);
}

/* =========================================================
   CATEGORY TITLE
========================================================= */

.mega-title{

    display: block;

    max-width: 95px;

    color: inherit;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.45;

    opacity: .88;
}

/* =========================================================
   MEGA NAV BUTTONS
========================================================= */

.mega-nav{

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 38px;
    height: 38px;

    border: none;

    border-radius: 50%;

    background: #fff;

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

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

    cursor: pointer;

    z-index: 10;

    transition: all .2s ease;
}
html[dir="ltr"] .mega-prev{ left: 5px; }
.mega-nav:hover{
    transform: translateY(-50%) scale(1.05);
}



html[dir="ltr"] .mega-next{ right: 5px; }

html[dir="rtl"] .mega-prev{ right: 5px; }
html[dir="rtl"] .mega-next{ left: 5px; }
/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-toggle button{

    width: 44px;
    height: 44px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: #fff;
}

.mobile-overlay{

    position: fixed;

    inset: 0;

    background: rgba(15,23,42,.45);

    opacity: 0;
    visibility: hidden;

    transition: all .25s ease;

    z-index: 1190;
}

.mobile-overlay.active{
    opacity: 1;
    visibility: visible;
}

.mobile-sidebar{

    display: none;

    position: fixed;

    top: 0;

    width: 340px;
    max-width: 88vw;

    height: 100vh;

    background: #fff;

    z-index: 99999;

    overflow-y: auto;

    transition: transform .28s ease;
}

html[dir="rtl"] .mobile-sidebar{
    right: 0;
    transform: translateX(100%);
}

html[dir="ltr"] .mobile-sidebar{
    left: 0;
    transform: translateX(-100%);
}

.mobile-sidebar.active{
     display: block;
    transform: translateX(0) !important;
}

.mobile-sidebar-header{

    height: 74px;

    padding: 0 20px;

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

    border-bottom: 1px solid var(--border);
}

.mobile-sidebar-header img{
    height: 42px;
}

.mobile-sidebar-header button{

    width: 40px;
    height: 40px;

    border: none;

    border-radius: 12px;

    background: var(--surface-soft);
}

.mobile-search-wrapper{
    padding: 20px;
}

.mobile-search-wrapper form{
    position: relative;
}

.mobile-search-input{

    width: 100%;
    height: 48px;

    padding-inline: 16px 52px;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.mobile-search-wrapper button{

    position: absolute;

    top: 4px;
    inset-inline-end: 4px;

    width: 40px;
    height: 40px;

    border: none;

    border-radius: 10px;

    background: var(--pd-primary);

    color: #fff;
}

.mobile-menu-content{
    padding: 0 20px 40px;
}

.mobile-menu-link,
.mobile-accordion summary{

    height: 52px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid #f1f5f9;

    color: var(--text);

    font-size: 14px;
    font-weight: 600;
}

.mobile-menu-link:hover{
    color: var(--pd-primary);
    text-decoration: none;
}

.mobile-menu-link.active,
.mobile-mega-section.active > .mobile-mega-header{
    color: var(--pd-primary);
}

.mobile-menu-link.active{
    position: relative;
    font-weight: 700;
}

.mobile-menu-link.active::after{
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 7px;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--pd-primary);
}

.mobile-menu-title{

    padding: 24px 0 10px;

    color: var(--text-soft);

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
}

.mobile-submenu{
    padding-bottom: 12px;
}

.mobile-submenu a{

    display: block;

    padding: 10px 16px;

    border-radius: 12px;

    color: var(--text-soft);
}

.mobile-submenu a:hover{

    background: var(--surface-soft);

    color: var(--pd-primary);

    text-decoration: none;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

    .main-header-inner{

        height: 74px;

        gap: 14px;
    }

    .header-logo img{
        height: 42px;
    }

    .header-search{
        max-width: 100%;
    }


}

/* =========================================================
   REMOVE OLD CONFLICTS
========================================================= */

.navbar-stuck-menu,
.navbar-sticky{
    background: transparent !important;
    box-shadow: none !important;
}

html[dir="rtl"] .desktop-menu{
    padding-right: 0;
}

html[dir="rtl"] .mega-dropdown{
    direction: rtl;
}
/* wrapper */
.menu-item.has-dropdown{
    position: relative;
}

/* dropdown hidden */
.simple-dropdown-menu{
    position: absolute;

    top: 100%;
    inset-inline-start: 0;

    min-width: 220px;

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 12px;

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

    padding: 8px 0;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: all .2s ease;

    z-index: 1100;
}

/* show on hover */
.menu-item.has-dropdown:hover .simple-dropdown-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* items */
.simple-dropdown-menu .dropdown-item{
    display: block;

    padding: 10px 14px;

    font-size: 14px;

    color: var(--text);

    text-decoration: none;

    transition: background .2s ease;
}

.simple-dropdown-menu .dropdown-item:hover{
    background: var(--surface-soft);
    color: var(--pd-primary);
}
/* dropdown container */
.brands-dropdown{
    min-width: 260px;
    max-height: 360px;
    overflow-y: auto;
}

/* brand item */
.brand-item{
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 14px;

    text-decoration: none;

    transition: background .2s ease;
}

.brand-item:hover{
    background: var(--surface-soft);
    text-decoration: none;
}

/* logo */
.brand-logo{
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo img{
    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* name */
.brand-name{
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

/* optional scrollbar styling */
.brands-dropdown::-webkit-scrollbar{
    width: 4px;
}

.brands-dropdown::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.1);
    border-radius: 10px;
}
/* =========================
   MINI MEGA SYSTEM (MOBILE)
========================= */

.mobile-mega-section{
    border-bottom: 1px solid #f1f5f9;
}

.mobile-mega-header{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 0;

    list-style: none;
    cursor: pointer;
}

.mobile-mega-header::-webkit-details-marker{
    display: none;
}

.mobile-mega-header > .czi-chevron-down{
    font-size: 12px;
    transition: transform .2s ease;
}

.mobile-mega-section[open] > .mobile-mega-header > .czi-chevron-down{
    transform: rotate(180deg);
}

.mobile-mega-title{
    display: flex;
    align-items: center;
    gap: 10px;

    font-weight: 600;
    color: var(--text);
}

.mobile-mega-title img{
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.mobile-mega-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    padding: 10px 0 14px;
}

.mobile-category-grid{
    grid-template-columns: 1fr;
}

.mobile-mega-all-link{
    grid-column: 1 / -1;

    min-height: 42px;
    padding: 9px 12px;

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

    border-radius: 10px;
    background: rgba(11, 87, 208, .07);

    color: var(--pd-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.mobile-mega-all-link:hover{
    background: rgba(11, 87, 208, .12);
    color: var(--pd-primary);
    text-decoration: none;
}

.mobile-mega-all-link i{
    font-size: 12px;
}

.mobile-mega-card{
    padding: 10px;

    background: var(--surface-soft);
    border-radius: 12px;

    font-size: 13px;

    text-decoration: none;
    color: var(--text);

    transition: all .2s ease;
}

.mobile-mega-card:hover{
    background: #eef2f7;
}

.mobile-mega-card.active,
.mobile-brand-item.active{
    background: #eef4ff;
    color: var(--pd-primary);
    box-shadow: inset 0 0 0 1px rgba(11, 87, 208, .15);
}

.mobile-category-icon{
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mobile-category-icon img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile-category-svg-icon{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* BRANDS */
.mobile-brands-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;

    padding: 10px 0 14px;
}

.mobile-brand-item{
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 12px;

    border-radius: 12px;

    text-decoration: none;

    transition: background .2s ease;
}

.mobile-brand-item:hover{
    background: var(--surface-soft);
}

.mobile-brand-item img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile-brand-item .brand-name{
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}