/*
Theme Name: Shopex BD
Author: Jahangir Alam
Version: 1.0
*/

/*====================================================
Root Variables
====================================================*/

:root{
    --shopex-body:#f5f7fa;
}

/*====================================================
Body
====================================================*/

body{
    background:var(--shopex-body);
    color:#222;
}

/*====================================================
00. Hero Base
====================================================*/

.shopex-hero{
    position:relative;
}

/*====================================================
01. Hero Slider
====================================================*/

.shopex-hero-slider{

    position:relative;
    width:100%;
    overflow:hidden;

}

/*====================================================
02. Hero Wrapper
====================================================*/

.shopex-hero-wrapper{

    position:relative;
    width:100%;
    margin:0 auto;
    padding:0;
    overflow:hidden;

}

/*====================================================
03. Hero Track
====================================================*/

.shopex-hero-track{

    display:flex;
    transition:transform .70s ease-in-out;
    will-change:transform;

}

/*====================================================
04. Hero Slide
====================================================*/

.shopex-hero-slide{

    position:relative;
    flex:0 0 100%;
    min-height:560px;
    overflow:visible;

}

/*====================================================
05. Hero Content
====================================================*/

.shopex-hero-content{

    position:absolute;
    top:50%;
    left:80px;

    transform:translateY(-50%);

    width:640px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    z-index:20;

}

/*====================================================
06. Hero Image
====================================================*/

.shopex-hero-image{

    position:absolute;

    inset:0;

    z-index:1;

    overflow:hidden;

}

.shopex-hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    display:block;

}

.shopex-hero-image::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:180px;

    background:linear-gradient(
        to bottom,
        rgba(245,247,250,0) 0%,
        rgba(245,247,250,.08) 15%,
        rgba(245,247,250,.18) 30%,
        rgba(245,247,250,.35) 45%,
        rgba(245,247,250,.55) 60%,
        rgba(245,247,250,.78) 75%,
        rgba(245,247,250,.92) 90%,
        var(--shopex-body) 100%
    );

    pointer-events:none;
}

/*====================================================
08. Navigation
====================================================*/

.shopex-hero-navigation{

    position:absolute;

    left:50%;

    bottom:65px;   /* আগে 25px ছিল */

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    z-index:100;

}

/*====================================================
09. Hero Title
====================================================*/

.shopex-hero-title{

    font-size:56px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-1px;

    color:#222;

    margin:0 0 22px;

}

/*====================================================
10. Hero Description
====================================================*/

.shopex-hero-description{

    font-size:22px;
    line-height:1.8;

    color:#666;

    margin:0 0 34px;

}

/*====================================================
11. Offer Badge
====================================================*/

.shopex-offer-badge{

    position:absolute;

    top:40px;
    left:55%;

    transform:translateX(-50%);

    width:110px;
    height:110px;

    border-radius:50%;

    background:#fff;

    border:4px solid rgba(255,107,0,.10);

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

    box-shadow:
        0 18px 45px rgba(0,0,0,.10),
        0 6px 15px rgba(255,107,0,.08);

    z-index:30;

}

.shopex-offer-badge span{

    font-size:28px;
    font-weight:800;
    color:#ff6b00;

}

.shopex-offer-badge small{

    font-size:12px;
    font-weight:700;
    color:#666;

}


/*====================================================
12. Hero Badge
====================================================*/

.shopex-hero-badge{

    display:inline-flex;

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

    padding:10px 22px;

    margin-bottom:34px;

    border-radius:999px;

    background:#fff;

    color:#ff6b00;

    font-size:14px;

    font-weight:700;

    letter-spacing:.4px;

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

}


/*====================================================
13. Hero Buttons
====================================================*/

.shopex-hero-buttons{

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

    margin-bottom:28px;

}


/*====================================================
14. Base Button
====================================================*/

.shopex-btn{

    display:inline-flex;

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

    padding:16px 34px;

    border-radius:999px;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:.35s ease;

}


/*====================================================
15. Primary Button
====================================================*/

.shopex-btn-primary{

    background:#ff6b00;
    color:#fff;

    box-shadow:0 14px 30px rgba(255,107,0,.25);

}

.shopex-btn-primary:hover{

    background:#e95d00;

    transform:translateY(-2px);

}


/*====================================================
16. Outline Button
====================================================*/

.shopex-btn-outline{

    background:#fff;

    color:#222;

    border:1px solid #ececec;

}

.shopex-btn-outline:hover{

    background:#222;
    color:#fff;

}


/*====================================================
17. Previous / Next Button
====================================================*/

.shopex-hero-prev,
.shopex-hero-next{

    width:32px;
    height:32px;

    border:none;
    border-radius:50%;

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

    color:#444;

    font-size:14px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:.30s ease;

}

.shopex-hero-prev:hover,
.shopex-hero-next:hover{

    background:#ff6b00;

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 12px 26px rgba(255,107,0,.22);

}


/*====================================================
18. Hero Dots
====================================================*/

.shopex-hero-dots{

    display:flex;

    align-items:center;

    gap:8px;

}

.shopex-hero-dot{

    width:10px;

    height:10px;

    border:none;

    border-radius:50%;

    background:#d9d9d9;

    cursor:pointer;

    transition:.30s ease;

}

.shopex-hero-dot.active{

    width:25px;

    height:8px;

    border-radius:30px;

    background:#ff9900;

}

.shopex-hero-dot:hover{

    background:#ff9900;

}


/*====================================================
19. Trending Search
====================================================*/

.shopex-trending-search a{

    position:relative;

    display:inline-block;

    text-decoration:none;

    color:#666;

    font-weight:500;

    transition:color .30s ease;

}

.shopex-trending-search a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:100%;

    height:4px;

    background:#ff6b00;

    border-radius:50px;

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .40s cubic-bezier(.4,0,.2,1);
    
    

}

.shopex-trending-search a:hover{

    color:#ff6b00;

}

.shopex-trending-search a:hover::after{

    transform:scaleX(1);

}

/* ---------- Divider ---------- */

.shopex-trending-search a:not(:last-child){

    margin-right:14px;

}

.shopex-trending-search a:not(:last-child)::before{

    content:"";

    position:absolute;

    right:-12px;

    top:50%;

    width:5px;

    height:5px;

    background:#ff9900;

    border-radius:50%;

    transform:translateY(-50%);

    opacity:.9;

}

/*====================================================
20 Hero User Panel
====================================================*/

.shopex-user-panel{

    position:absolute;

    top:clamp(
        44%,
        calc(50% - 2.5vh),
        50%
    );

    right:clamp(
        12px,
        1.5vw,
        25px
    );

    transform:translateY(-50%);

    /* ---------- Rounded Background ---------- */

    width:70px;

    background:#ffffff;

    border-radius:50px;

    padding:14px 0;

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

    overflow:hidden;

    z-index:100;

}



.shopex-user-item{

    width:100%;

    height:74px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    text-decoration:none;

    color:#555;

    font-size:12px;

    font-weight:600;

    transition:all .30s ease;

}

.shopex-user-item:not(:last-child){

    border-bottom:1px solid #f2f2f2;

}

.shopex-user-item i{

    font-size:20px;

    color:#ff9900;

    transition:all .30s ease;

}

.shopex-user-item:hover{

    background:#fff5eb;

    color:#ff9900;

}

.shopex-user-item:hover i{

    transform:scale(1.15);

}

.shopex-user-item.active{

    background:#ff9900;

    color:#ffffff;

}

.shopex-user-item.active i{

    color:#ffffff;

}


/* ==========================================
21 Hero Features
========================================== */

.shopex-hero-features{

    position:relative;

    z-index:60;

    margin-top:-60px;

    padding:14px 18px;

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

    backdrop-filter:blur(14px);

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

    border-radius:24px;

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

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:18px;

}

.shopex-hero-feature{

    display:flex;

    align-items:center;

    gap:16px;

}

.shopex-feature-icon{

    width:40px;

    height:40px;

    border-radius:16px;

    background:#fff3e8;

    color:#ff6b00;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    flex-shrink:0;

}

.shopex-feature-content h4{

    margin:0 0 4px;

    font-size:14px;

    font-weight:700;

    color:#222;

}

.shopex-feature-content p{

    margin:0;

    font-size:13px;

    color:#777;

    line-height:1.5;

}

/* Divider */

.shopex-hero-feature:not(:last-child){

    border-right:1px solid #eeeeee;

    padding-right:18px;

}

/*====================================================
   Shopex Pro — Fluid User Panel Position
====================================================*/

.shopex-user-panel{

    position:absolute;

    top:clamp(
        44%,
        calc(50% - 2.5vh),
        50%
    );

    right:clamp(
        12px,
        1.5vw,
        25px
    );

    transform:translateY(-50%);

}

/*====================================================
22. SHOPEX PRO — FLUID RESPONSIVE SYSTEM
====================================================*/

/*
    Fluid Responsive Architecture

    1200px+  : Fluid Desktop
    768–1199 : Fluid Tablet
    0–767px  : Fluid Mobile

    No resolution-specific positioning.
    No .shopex-floating-menu.
    Floating menu = .shopex-user-panel
*/


/*====================================================
22.01 — FLUID DESKTOP
1200px and above
====================================================*/

@media (min-width:1200px){

    /*----------------------------------
      Hero Slide
    ----------------------------------*/

    .shopex-hero-slide{

        min-height:clamp(
            500px,
            32vw,
            560px
        );

        overflow:hidden;

    }


    /*----------------------------------
      Hero Content
    ----------------------------------*/

    .shopex-hero-content{

        left:clamp(
            40px,
            5vw,
            90px
        );

        width:min(
            42vw,
            640px
        );

    }

    .shopex-hero-slide:first-child
    .shopex-hero-content{

        width:min(
            45vw,
            680px
        );

    }


    /*----------------------------------
      Hero Title
    ----------------------------------*/

    .shopex-hero-title{

        font-size:clamp(
            38px,
            3.15vw,
            56px
        );

        line-height:1.08;

        letter-spacing:clamp(
            -.5px,
            -.07vw,
            -1px
        );

        margin-bottom:clamp(
            18px,
            1.35vw,
            22px
        );

    }


    /*----------------------------------
      Hero Description
    ----------------------------------*/

    .shopex-hero-description{

        max-width:min(
            38vw,
            600px
        );

        font-size:clamp(
            16px,
            1.2vw,
            22px
        );

        line-height:1.7;

        margin-bottom:clamp(
            24px,
            1.8vw,
            34px
        );

    }


    /*----------------------------------
      Hero Badge
    ----------------------------------*/

    .shopex-hero-badge{

        padding:
            clamp(8px, .65vw, 10px)
            clamp(18px, 1.45vw, 22px);

        margin-bottom:clamp(
            24px,
            2vw,
            34px
        );

        font-size:clamp(
            12px,
            .8vw,
            14px
        );

    }


    /*----------------------------------
      Hero Buttons
    ----------------------------------*/

    .shopex-hero-buttons{

        gap:clamp(
            12px,
            1.2vw,
            18px
        );

        margin-bottom:clamp(
            20px,
            1.6vw,
            28px
        );

    }

    .shopex-btn{

        padding:
            clamp(13px, 1vw, 16px)
            clamp(24px, 2vw, 34px);

        font-size:clamp(
            14px,
            .9vw,
            16px
        );

    }


    /*----------------------------------
      Hero Image
    ----------------------------------*/

    .shopex-hero-image{

        inset:0;

    }

    .shopex-hero-image img{

        width:100%;
        height:100%;
        max-width:none;

        object-fit:cover;
        object-position:center center;

    }


    /*----------------------------------
      Image Fade
    ----------------------------------*/

    .shopex-hero-image::after{

        height:clamp(
            150px,
            11vw,
            190px
        );

    }


    /*----------------------------------
      Offer Badge
    ----------------------------------*/

    .shopex-offer-badge{

        top:clamp(
            28px,
            2.5vw,
            40px
        );

        left:55%;

        width:clamp(
            85px,
            6vw,
            110px
        );

        height:clamp(
            85px,
            6vw,
            110px
        );

        border-width:clamp(
            3px,
            .2vw,
            4px
        );

    }

    .shopex-offer-badge span{

        font-size:clamp(
            22px,
            1.6vw,
            28px
        );

    }

    .shopex-offer-badge small{

        font-size:clamp(
            10px,
            .7vw,
            12px
        );

    }


    /*----------------------------------
      Navigation
    ----------------------------------*/

    .shopex-hero-navigation{

        bottom:clamp(
            45px,
            4vw,
            65px
        );

        gap:clamp(
            10px,
            1.2vw,
            18px
        );

    }


    .shopex-hero-prev,
    .shopex-hero-next{

        width:clamp(
            28px,
            2.2vw,
            32px
        );

        height:clamp(
            28px,
            2.2vw,
            32px
        );

        font-size:clamp(
            12px,
            .8vw,
            14px
        );

    }


    /*----------------------------------
      Dots
    ----------------------------------*/

    .shopex-hero-dots{

        gap:clamp(
            6px,
            .55vw,
            8px
        );

    }

    .shopex-hero-dot{

        width:clamp(
            8px,
            .7vw,
            10px
        );

        height:clamp(
            8px,
            .7vw,
            10px
        );

    }

    .shopex-hero-dot.active{

        width:clamp(
            20px,
            1.7vw,
            25px
        );

        height:clamp(
            7px,
            .55vw,
            8px
        );

    }


    /*----------------------------------
      Trending Search
    ----------------------------------*/

    .shopex-trending-search{

        font-size:clamp(
            12px,
            .85vw,
            14px
        );

    }

    .shopex-trending-search a:not(:last-child){

        margin-right:clamp(
            10px,
            1vw,
            14px
        );

    }


    /*----------------------------------
      User Panel / Floating Menu
    ----------------------------------*/

    .shopex-user-panel{

        position:absolute;

        top:50%;

        right:clamp(
            12px,
            1.5vw,
            25px
        );

        transform:translateY(-50%);

        width:clamp(
            58px,
            4.2vw,
            70px
        );

        padding:
            clamp(10px, 1vw, 14px)
            0;

    }

    .shopex-user-item{

        height:clamp(
            62px,
            4.5vw,
            74px
        );

        gap:clamp(
            4px,
            .4vw,
            6px
        );

        font-size:clamp(
            10px,
            .7vw,
            12px
        );

    }

    .shopex-user-item i{

        font-size:clamp(
            17px,
            1.25vw,
            20px
        );

    }


    /*----------------------------------
      Hero Features
    ----------------------------------*/

    .shopex-hero-features{

        margin-top:clamp(
            -60px,
            -3.5vw,
            -35px
        );

        padding:
            clamp(12px, 1vw, 14px)
            clamp(14px, 1.3vw, 18px);

        gap:clamp(
            12px,
            1.2vw,
            18px
        );

        border-radius:clamp(
            18px,
            1.7vw,
            24px
        );

    }

    .shopex-hero-feature{

        gap:clamp(
            10px,
            1.1vw,
            16px
        );

    }

    .shopex-feature-icon{

        width:clamp(
            36px,
            2.8vw,
            40px
        );

        height:clamp(
            36px,
            2.8vw,
            40px
        );

        border-radius:clamp(
            12px,
            1.1vw,
            16px
        );

        font-size:clamp(
            14px,
            1.1vw,
            16px
        );

    }

    .shopex-feature-content h4{

        font-size:clamp(
            12px,
            .85vw,
            14px
        );

    }

    .shopex-feature-content p{

        font-size:clamp(
            11px,
            .75vw,
            13px
        );

    }

    .shopex-hero-feature:not(:last-child){

        padding-right:clamp(
            12px,
            1.2vw,
            18px
        );

    }

}


/*====================================================
22.02 — SHOPEX PRO
FLUID TABLET SYSTEM
768px – 1199px
====================================================*/

@media (min-width:768px) and (max-width:1199px){

    /*----------------------------------
      Hero Slide
    ----------------------------------*/

    .shopex-hero-slide{

        min-height:clamp(
            430px,
            52vw,
            520px
        );

        overflow:hidden;

    }


    /*----------------------------------
      Hero Content
    ----------------------------------*/

    .shopex-hero-content{

        left:clamp(
            25px,
            4vw,
            55px
        );

        width:clamp(
            380px,
            43vw,
            520px
        );

    }


    /*----------------------------------
      Hero Title
    ----------------------------------*/

    .shopex-hero-title{

        font-size:clamp(
            30px,
            3.5vw,
            42px
        );

        line-height:1.10;

    }


    /*----------------------------------
      Hero Description
    ----------------------------------*/

    .shopex-hero-description{

        max-width:clamp(
            350px,
            42vw,
            520px
        );

        font-size:clamp(
            15px,
            1.55vw,
            18px
        );

        line-height:1.65;

    }


    /*----------------------------------
      Hero Badge
    ----------------------------------*/

    .shopex-hero-badge{

        padding:
            clamp(7px, .8vw, 10px)
            clamp(15px, 1.8vw, 22px);

        margin-bottom:clamp(
            20px,
            2.5vw,
            30px
        );

        font-size:clamp(
            11px,
            1.1vw,
            14px
        );

    }


    /*----------------------------------
      Hero Buttons
    ----------------------------------*/

    .shopex-hero-buttons{

        gap:clamp(
            10px,
            1.3vw,
            18px
        );

        margin-bottom:clamp(
            18px,
            2vw,
            28px
        );

    }

    .shopex-btn{

        padding:
            clamp(12px, 1.3vw, 15px)
            clamp(20px, 2.2vw, 30px);

        font-size:clamp(
            13px,
            1.2vw,
            16px
        );

    }


    /*----------------------------------
      Hero Image
    ----------------------------------*/

    .shopex-hero-image{

        inset:0;

        overflow:hidden;

    }

    .shopex-hero-image img{

        width:100%;
        height:100%;

        max-width:none;

        object-fit:cover;

        object-position:center center;

        display:block;

    }


    /*----------------------------------
      Image Fade
    ----------------------------------*/

    .shopex-hero-image::after{

        height:clamp(
            110px,
            13vw,
            170px
        );

    }


    /*----------------------------------
  Offer Badge — Fluid Tablet
----------------------------------*/

.shopex-offer-badge{

    top:clamp(
        25px,
        3.5vw,
        40px
    );

    left:clamp(
        58%,
        62%,
        64%
    );

    transform:translateX(-50%);

    width:clamp(
        76px,
        8vw,
        96px
    );

    height:clamp(
        76px,
        8vw,
        96px
    );

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.shopex-offer-badge span{

    display:block;

    width:100%;

    text-align:center;

    font-size:clamp(
        19px,
        2.2vw,
        24px
    );

    line-height:1;

}

.shopex-offer-badge small{

    display:block;

    width:100%;

    text-align:center;

    font-size:clamp(
        9px,
        1vw,
        12px
    );

    line-height:1.2;

}


    /*----------------------------------
      Navigation
    ----------------------------------*/

    .shopex-hero-navigation{

        bottom:clamp(
            30px,
            5vw,
            60px
        );

        gap:clamp(
            8px,
            1.2vw,
            18px
        );

    }


    /*----------------------------------
      Previous / Next
    ----------------------------------*/

    .shopex-hero-prev,
    .shopex-hero-next{

        width:clamp(
            28px,
            2.4vw,
            32px
        );

        height:clamp(
            28px,
            2.4vw,
            32px
        );

        font-size:clamp(
            12px,
            1vw,
            14px
        );

    }


    /*----------------------------------
      Hero Dots
    ----------------------------------*/

    .shopex-hero-dots{

        gap:clamp(
            6px,
            .7vw,
            8px
        );

    }

    .shopex-hero-dot{

        width:clamp(
            8px,
            .8vw,
            10px
        );

        height:clamp(
            8px,
            .8vw,
            10px
        );

    }

    .shopex-hero-dot.active{

        width:clamp(
            20px,
            2vw,
            25px
        );

        height:8px;

    }


    /*----------------------------------
      Trending Search
    ----------------------------------*/

    .shopex-trending-search{

        font-size:clamp(
            11px,
            1.1vw,
            14px
        );

    }


    /*----------------------------------
      User Panel / Floating Menu
    ----------------------------------*/

    .shopex-user-panel{

        position:absolute;

        top:clamp(
            44%,
            calc(50% - 2vh),
            50%
        );

        right:clamp(
            10px,
            1.4vw,
            18px
        );

        transform:translateY(-50%);

        width:clamp(
            55px,
            5.5vw,
            68px
        );

        background:#ffffff;

        border-radius:50px;

        padding:
            clamp(9px, 1vw, 13px)
            0;

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

        overflow:hidden;

        z-index:100;

    }

    .shopex-user-item{

        height:clamp(
            58px,
            6vw,
            72px
        );

        gap:clamp(
            4px,
            .5vw,
            6px
        );

        font-size:clamp(
            9px,
            1vw,
            12px
        );

    }

    .shopex-user-item i{

        font-size:clamp(
            16px,
            1.7vw,
            20px
        );

    }


    /*----------------------------------
      Hero Features
    ----------------------------------*/

    .shopex-hero-features{

        margin-top:clamp(
            -45px,
            -4vw,
            -25px
        );

        padding:
            clamp(10px, 1.2vw, 14px)
            clamp(12px, 1.5vw, 18px);

        gap:clamp(
            8px,
            1.3vw,
            16px
        );

        border-radius:clamp(
            18px,
            2vw,
            24px
        );

    }

    .shopex-hero-feature{

        gap:clamp(
            8px,
            1.1vw,
            15px
        );

    }

    .shopex-feature-icon{

        width:clamp(
            34px,
            3.5vw,
            40px
        );

        height:clamp(
            34px,
            3.5vw,
            40px
        );

        border-radius:clamp(
            12px,
            1.2vw,
            16px
        );

        font-size:clamp(
            14px,
            1.3vw,
            16px
        );

    }

    .shopex-feature-content h4{

        font-size:clamp(
            11px,
            1.1vw,
            14px
        );

    }

    .shopex-feature-content p{

        font-size:clamp(
            10px,
            1vw,
            13px
        );

    }

    .shopex-hero-feature:not(:last-child){

        padding-right:clamp(
            10px,
            1.5vw,
            18px
        );

    }

}


/*====================================================
22.03 — SHOPEX PRO
FLUID MOBILE SYSTEM
360px – 767px
====================================================*/

@media (max-width:767px){

/*----------------------------------
Hero Slide
----------------------------------*/

.shopex-hero-slide{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    min-height:clamp(
        250px,
        55vw,
        430px
    );

    max-height:430px;

    overflow:hidden;

}


/*----------------------------------
Hero Image
----------------------------------*/

.shopex-hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:hidden;

    z-index:1;

}


.shopex-hero-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:right center;

    transform:scale(1);

}


/*----------------------------------
Image Overlay
----------------------------------*/

.shopex-hero-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(255,255,255,.92) 0%,

        rgba(255,255,255,.74) 22%,

        rgba(255,255,255,.22) 46%,

        rgba(255,255,255,0) 70%

    );

    z-index:2;

}


/*----------------------------------
Bottom Fade
----------------------------------*/

.shopex-hero-image::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:clamp(

        55px,

        11vw,

        90px

    );

    background:

    linear-gradient(

        to bottom,

        rgba(245,247,250,0),

        rgba(245,247,250,.92)

    );

    z-index:3;

}

/*----------------------------------
Hero Content
----------------------------------*/

.shopex-hero-content{

    position:absolute;

    top:clamp(
        98px,
        25vw,
        88px
    );

    left:clamp(
        14px,
        4vw,
        26px
    );

    width:min(
        54%,
        310px
    );

    max-width:310px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    text-align:left;

    z-index:20;

}


/*----------------------------------
Hero Badge
----------------------------------*/

.shopex-hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:flex-start;

    padding:

        clamp(5px,1.2vw,8px)

        clamp(12px,3vw,18px);

    margin-bottom:

        clamp(8px,2vw,14px);

    border-radius:999px;

    font-size:

        clamp(9px,2.4vw,12px);

    font-weight:700;

    line-height:1;

}


/*----------------------------------
Hero Title
----------------------------------*/

.shopex-hero-title{

    width:100%;

    max-width:280px;

    font-size:

        clamp(

            20px,

            5vw,

            30px

        );

    font-weight:800;

    line-height:1.08;

    letter-spacing:-.45px;

    color:#222;

    text-align:left;

    margin:

        0

        0

        clamp(8px,2vw,12px);

}


/*----------------------------------
Hero Description
----------------------------------*/

.shopex-hero-description{

    width:100%;

    max-width:250px;

    font-size:

        clamp(

            11px,

            2.8vw,

            14px

        );

    line-height:1.55;

    color:#666;

    text-align:left;

    margin:0;

}


/*----------------------------------
Hero Buttons
----------------------------------*/

.shopex-hero-buttons{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    flex-wrap:nowrap;

    gap:clamp(
        5px,
        1.6vw,
        10px
    );

    width:100%;

    margin:
        clamp(10px,2.6vw,16px)
        0
        clamp(8px,2vw,14px);

}


/*----------------------------------
Buttons
----------------------------------*/

.shopex-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:clamp(
        28px,
        4vw,
        34px
    );

    min-width:clamp(
        70px,
        16vw,
        90px
    );

    padding:
        0
        clamp(
            12px,
            3vw,
            16px
        );

    border-radius:999px;

    font-size:clamp(
        9px,
        2.3vw,
        12px
    );

    font-weight:700;

    line-height:1;

    white-space:nowrap;

    transition:.30s ease;

}



/*----------------------------------
Trending Search
----------------------------------*/

.shopex-trending-search{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:flex-start;

    width:100%;

    gap:clamp(
        4px,
        1vw,
        8px
    );

    margin-top:clamp(
        12px,
        2.8vw,
        20px
    );

    font-size:clamp(
        9px,
        2.4vw,
        11px
    );

    line-height:1.5;

}

.shopex-trending-search strong{

    font-weight:700;

    font-size:inherit;

    white-space:nowrap;

}

.shopex-trending-search a{

    display:inline-flex;

    align-items:center;

    font-size:inherit;

    text-decoration:none;

    white-space:nowrap;

    transition:.30s ease;

}

.shopex-trending-search a:hover{

    color:#ff6b00;

}

.shopex-trending-search a:not(:last-child){

    margin-right:clamp(
        4px,
        1vw,
        8px
    );

}

@media (max-width:380px){

.shopex-trending-search a:nth-last-child(-n+2){

    display:none;

}

}

/*====================================================
22.03-PART-3
Offer Badge + User Panel
====================================================*/


/*----------------------------------
Offer Badge
----------------------------------*/

.shopex-offer-badge{

    position:absolute;

    top:clamp(
        64%,
        66%,
        68%
    );

    left:clamp(
        20px,
        2vw,
        25px
    );

    transform:none;

    width:clamp(
        60px,
        5vw,
        70px
    );
    height:clamp(
        60px,
        5vw,
        70px
    );
    
    

    aspect-ratio:0.1;
border-radius:50%;


    

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:#fff;

    border:2px solid rgba(255,107,0,.08);

    box-shadow:

        0 10px 24px rgba(0,0,0,.10),

        0 4px 10px rgba(255,107,0,.08);

    z-index:60;

}


.shopex-offer-badge span{

    font-size:clamp(
        18px,
        3.5vw,
        12px
    );

    font-weight:800;

    line-height:1;

}


.shopex-offer-badge small{

    font-size:clamp(
        8px,
        1.8vw,
        10px
    );

    font-weight:700;

    line-height:1.2;

}



/*----------------------------------
User Panel
----------------------------------*/

.shopex-user-panel{

    position:absolute;

    top:clamp(
        20%,
        20%,
        20%
    );

    right:clamp(
        8px,
        2vw,
        14px
    );

    transform:none;

    width:clamp(
        42px,
        7vw,
        50px
    );

    background:#fff;

    border-radius:32px;

    padding:

        clamp(4px,1vw,6px)

        0;

    box-shadow:

        0 10px 24px rgba(0,0,0,.10);

    overflow:hidden;

    z-index:90;

}


/*----------------------------------
User Item
----------------------------------*/

.shopex-user-item{

    width:100%;

    height:clamp(
        30px,
        6vw,
        44px
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:0;

    transition:

        background .25s,

        transform .25s;

}


.shopex-user-item span{

    display:none;

}


.shopex-user-item i{

    font-size:clamp(
        14px,
        2.8vw,
        17px
    );

    color:#ff9900;

    transition:.25s;

}


.shopex-user-item:hover{

    background:#fff5eb;

}


.shopex-user-item:hover i{

    color:#ff6b00;

    transform:scale(1.10);

}


.shopex-user-item.active{

    background:#ff9900;

}


.shopex-user-item.active i{

    color:#fff;

}

/*====================================================
22.03-PART-4
Navigation • Features • Final Optimization
====================================================*/


/*----------------------------------
Hero Navigation
----------------------------------*/

.shopex-hero-navigation{

    position:absolute;

    left:50%;

    bottom:clamp(
        20px,
        2vw,
        18px
    );

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    z-index:95;

}


/*----------------------------------
Prev / Next
----------------------------------*/

.shopex-hero-prev,
.shopex-hero-next{

    width:25px;

    height:25px;

    border:none;

    border-radius:32%;

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

    color:#444;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    cursor:pointer;

    box-shadow:

        0 8px 18px rgba(0,0,0,.10);

    transition:.30s;

}

.shopex-hero-prev:hover,
.shopex-hero-next:hover{

    background:#ff9900;

    color:#fff;

}


/*----------------------------------
Hero Dots
----------------------------------*/

.shopex-hero-dots{

    display:flex;

    align-items:center;

    gap:6px;

}

.shopex-hero-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    transition:.30s;

}

.shopex-hero-dot.active{

    width:22px;

    height:8px;

    border-radius:20px;

}



/*----------------------------------
Hero Features
----------------------------------*/

.shopex-hero-features{

    position:relative;

    z-index:70;

    margin-top:-12px;

    padding:8px;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:8px;

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

    backdrop-filter:blur(10px);

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

    border-radius:18px;

    box-shadow:

        0 12px 30px rgba(0,0,0,.08);

}


/*----------------------------------
Feature Item
----------------------------------*/

.shopex-hero-feature{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 !important;

    border:none !important;

}


/*----------------------------------
Feature Icon
----------------------------------*/

.shopex-feature-icon{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:#fff3e8;

    color:#ff6b00;

    font-size:15px;

    transition:.30s;

}


.shopex-hero-feature:hover
.shopex-feature-icon{

    transform:translateY(-2px);

    background:#ff6b00;

    color:#fff;

}


/*----------------------------------
Hide Feature Text
----------------------------------*/

.shopex-feature-content{

    display:none;

}



/*----------------------------------
Performance
----------------------------------*/

.shopex-hero-track{

    will-change:transform;

}

.shopex-hero-image img{

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}

.shopex-user-panel{

    backface-visibility:hidden;

}



/*----------------------------------
Touch Optimization
----------------------------------*/

.shopex-btn,
.shopex-user-item,
.shopex-hero-prev,
.shopex-hero-next{

    touch-action:manipulation;

    -webkit-tap-highlight-color:transparent;

}


/*----------------------------------
Safe Area
----------------------------------*/

.shopex-hero-slide{

    isolation:isolate;

}

}