@media(max-width:767px){

    html, body{
        overflow-x:hidden !important;
        max-width:100vw;
    }

}

/* =========================================================
   1. CATEGORY TABS — dark bar, icons, scroll fade hints
   Full-bleed via the vw/margin trick (safe here since this
   element is NOT position:fixed).
   ========================================================= */

.jigji-cat-tabs{
    display:none;
}

@media(max-width:767px){

    .jigji-cat-tabs{
        display:block;
        position:relative;
        width:100vw;
        left:50%;
        margin-left:-50vw;
        background:#151515;
        z-index:1;
        overflow-x:hidden;
    }

    .jigji-cat-tabs-scroll{
        display:flex;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding:0 12px;
        position:relative;
    }

    .jigji-cat-tabs-scroll::-webkit-scrollbar{
        display:none;
    }

    .jigji-cat-tab{
        flex-shrink:0;
        display:flex;
        align-items:center;
        gap:6px;
        text-decoration:none;
        color:#b8b8b8;
        font-size:14px;
        font-weight:500;
        padding:14px 14px;
        white-space:nowrap;
        transition:color .2s;
    }

    .jigji-cat-tab-icon{
        font-size:15px;
        line-height:1;
        display:inline-flex;
    }

    .jigji-cat-tab-icon img{
        width:15px;
        height:15px;
    }

    .jigji-cat-tab.active{
        color:#ffffff;
        font-weight:700;
    }

    .jigji-cat-tabs-underline{
        position:absolute;
        bottom:0;
        height:2px;
        background:#ffffff;
        transition:transform .25s ease, width .25s ease;
        width:0;
        left:0;
    }

    .jigji-cat-tabs-fade{
        position:absolute;
        top:0;
        bottom:0;
        width:28px;
        pointer-events:none;
        opacity:0;
        transition:opacity .2s;
        z-index:2;
    }

    .jigji-cat-tabs-fade-left{
        left:0;
        background:linear-gradient(90deg,#151515,transparent);
    }

    .jigji-cat-tabs-fade-right{
        right:0;
        background:linear-gradient(270deg,#151515,transparent);
    }

    .jigji-cat-tabs.show-fade-left .jigji-cat-tabs-fade-left,
    .jigji-cat-tabs.show-fade-right .jigji-cat-tabs-fade-right{
        opacity:1;
    }

}

/* =========================================================
   2. FULL-WIDTH SEARCH SECTION
   ========================================================= */

@media(max-width:767px){

    .elementor-element-ff0c5b3{
        width:100% !important;
        max-width:100% !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .elementor-element-ff0c5b3 .e-con-inner{
        width:100% !important;
        max-width:100% !important;
    }

}

/* =========================================================
   3. ALWAYS-VISIBLE MOBILE SEARCH — dark themed
   ========================================================= */

@media(max-width:767px){

    .elementor-element-24002df{
        background:#151515 !important;
    }

    .elementor-element-24002df .search-toggle{
        display:none !important;
    }

    .elementor-element-24002df .searchform-popup{
        position:static !important;
        width:100% !important;
        background:#151515 !important;
    }

    .elementor-element-24002df .searchform{
        display:block !important;
        position:static !important;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        width:100% !important;
        box-shadow:none !important;
        border-radius:0 !important;
        padding:10px 14px !important;
        background:#151515 !important;
    }

    .elementor-element-24002df .searchform-fields{
        display:flex !important;
        width:100%;
        border:1px solid #2a2a2a;
        border-radius:10px;
        overflow:hidden;
        background:#1f1f1f;
    }

    .elementor-element-24002df .searchform-fields .text{
        flex:1;
    }

    .elementor-element-24002df .searchform-fields input[type="text"]{
        width:100%;
        height:42px;
        border:none;
        background:transparent;
        color:#ffffff;
        padding:0 14px;
        font-size:14px;
    }

    .elementor-element-24002df .searchform-fields input[type="text"]::placeholder{
        color:#888888;
    }

    .elementor-element-24002df .btn.btn-special{
        background:#151515 !important;
        border:none;
    }

    .elementor-element-24002df .btn.btn-special i,
    .elementor-element-24002df .btn.btn-special{
        color:#ffffff !important;
    }

    .elementor-element-24002df .search-lists,
    .elementor-element-24002df .live-search-list{
        position:absolute;
        left:0;
        right:0;
        top:100%;
        z-index:99;
    }

}

/* =========================================================
   4. DARK HEADER — entire mobile header background
   ========================================================= */

@media(max-width:767px){

    .header-wrapper,
    #header,
    .elementor-element-ce4330c,
    .elementor-element-7dffc04{
        background:#151515 !important;
    }

    .elementor-element-ce4330c .my-account,
    .elementor-element-ce4330c .my-account i,
    .elementor-element-ce4330c .minicart-icon,
    .elementor-element-ce4330c .cart-items-text{
        color:#ffffff !important;
    }

    .elementor-element-ce4330c .cart-items{
        background:#c10000;
        color:#ffffff;
    }

}

/* =========================================================
   5. STICKY MOBILE TOP ROW (logo / account / cart)
   FIX: pin with left:0 + right:0 instead of width:100%.
   This makes the browser compute the width directly against
   the true viewport, avoiding all vw/scrollbar/transform
   edge-case mismatches that caused the right-edge gap.
   ========================================================= */

@media(max-width:767px){

    .elementor-element-ce4330c{
        transition:box-shadow .2s;
    }

    .elementor-element-ce4330c.jigji-sticky-header{
        position:fixed !important;
        top:0;
        left:0;
        right:0;
        width:auto !important;
        max-width:none !important;
        box-sizing:border-box;
        z-index:9995;
        box-shadow:0 4px 14px rgba(0,0,0,.35);
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .elementor-element-ce4330c.jigji-sticky-header *{
        box-sizing:border-box;
        max-width:100%;
    }

    .elementor-element-ce4330c.jigji-sticky-header .elementor-element-7dffc04{
        width:100%;
        padding-left:14px !important;
        padding-right:14px !important;
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        overflow:hidden;
    }

    .elementor-element-ce4330c.jigji-sticky-header .elementor-element-e92e7ac,
    .elementor-element-ce4330c.jigji-sticky-header .elementor-element-3c47e97{
        min-width:0;
        flex-shrink:1;
    }

    .elementor-element-ce4330c.jigji-sticky-header .elementor-element-3c47e97{
        display:flex;
        align-items:center;
        gap:12px;
        flex-shrink:0;
    }

    .elementor-element-ce4330c.jigji-sticky-header .logo img{
        max-width:100%;
        height:auto;
    }

    .elementor-element-ce4330c.jigji-sticky-header .cart-popup{
        right:0;
        left:auto;
        max-width:calc(100vw - 24px);
    }

}
