/* =========================================================
   GIFTRIXS PRODUCT REELS
   Desktop  → Instagram-style centered reel
   Mobile   → Full-screen reel, NO HEADER
========================================================= */


/* =========================
   REELS PAGE BASE
========================= */

.reels-page {
    position: relative;
    width: 100%;
    height: calc(100vh - 0px);
    min-height: 100vh;
    background: #08060d;
    overflow: hidden;
}

.reels-feed {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    background: #08060d;
}

.reels-feed::-webkit-scrollbar {
    display: none;
}


/* =========================
   EACH REEL
========================= */

.reel-slide {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 100vh;

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

    overflow: hidden;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    background: #08060d;
}


/* VIDEO */

.reel-video {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    background: #000;
}


/* =========================
   DESKTOP / LAPTOP
========================= */

@media (min-width: 769px) {

    /* Header remains visible */

    #header {
        position: relative;
        z-index: 1000;
    }

    .reels-page {
        height: calc(100vh - 0px);
        min-height: 650px;

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

        background: #08060d;
    }

    .reels-feed {
        width: 100%;
        height: 100%;

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

        overflow-y: auto;
    }

    .reel-slide {
        flex: 0 0 auto;

        width: min(395px, 90vw);

        /*
           Header ke neeche proper reel height
        */
        height: calc(100vh - 120px);

        min-height: 580px;
        max-height: 780px;

        margin: 20px 0;

        border-radius: 22px;

        overflow: hidden;

        background: #111;

        box-shadow:
            0 0 0 2px rgba(137, 67, 255, 0.25),
            0 20px 70px rgba(80, 20, 180, 0.30);
    }

    .reel-video {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    /*
       Desktop par video center me rahegi
    */

    .reel-gradient-top {
        top: 0;
    }

    .reel-gradient-bottom {
        bottom: 0;
    }
}


/* =========================
   MOBILE
   FULL SCREEN INSTAGRAM STYLE
========================= */

@media (max-width: 768px) {

    /*
       IMPORTANT:
       Dynamic header completely hidden
    */

    #header {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }


    /*
       Remove any header spacing
    */

    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #000 !important;
        overflow: hidden;
    }


    /*
       Reel page starts from very top
    */

    .reels-page {
        position: fixed;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;

        margin: 0;
        padding: 0;

        background: #000;

        overflow: hidden;

        z-index: 1;
    }


    /*
       Feed
    */

    .reels-feed {
        width: 100vw;
        height: 100dvh;

        margin: 0;
        padding: 0;

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

        scroll-snap-type: y mandatory;

        scrollbar-width: none;

        background: #000;
    }

    .reels-feed::-webkit-scrollbar {
        display: none;
    }


    /*
       Reel = Complete phone screen
    */

    .reel-slide {
        position: relative;

        width: 100vw;
        height: 100dvh;

        min-height: 100dvh;
        max-height: none;

        margin: 0;
        padding: 0;

        flex: 0 0 100dvh;

        border-radius: 0;
        border: 0;

        box-shadow: none;

        background: #000;

        overflow: hidden;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }


    /*
       Full screen video
    */

    .reel-video {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;

        border-radius: 0;

        background: #000;
    }
}


/* =========================
   MOBILE BOTTOM NAV
========================= */

@media (max-width: 768px) {

    .mobile-bottom-nav {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;

        height: 76px;

        z-index: 99999;

        display: flex;

        padding-bottom: env(safe-area-inset-bottom);

        background: rgba(10, 9, 15, 0.96);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .mobile-bottom-nav a {
        flex: 1;

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

        gap: 5px;

        text-decoration: none;
    }
}


/* =========================
   DESKTOP BOTTOM NAV HIDE
========================= */

@media (min-width: 769px) {

    .mobile-bottom-nav {
        display: none !important;
    }
}


/* =========================
   REEL CONTENT
========================= */

.reel-gradient {
    position: absolute;

    left: 0;
    right: 0;

    height: 35%;

    pointer-events: none;

    z-index: 2;
}

.reel-gradient-top {
    top: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.45),
            transparent
        );
}

.reel-gradient-bottom {
    bottom: 0;

    height: 48%;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.75),
            transparent
        );
}


/* =========================
   MUTE BUTTON
========================= */

.reel-mute-btn {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 44px;
    height: 44px;

    border: none;
    border-radius: 50%;

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

    color: #fff;

    background: rgba(0, 0, 0, 0.48);

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

    z-index: 10;

    cursor: pointer;
}


/* =========================
   REEL INFO
========================= */

.reel-info {
    position: absolute;

    left: 18px;
    right: 90px;
    bottom: 90px;

    z-index: 10;
}

.reel-product-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    max-width: 100%;

    padding: 8px 14px 8px 8px;

    border-radius: 40px;

    text-decoration: none;

    color: #fff;

    background: rgba(70, 60, 65, 0.72);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.reel-product-thumb {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 50%;

    object-fit: cover;

    background: #fff;
}

.reel-product-name {
    max-width: 210px;

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

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reel-price {
    margin-top: 3px;

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


/* =========================
   ACTION BUTTONS
========================= */

.reel-actions {
    position: absolute;

    right: 12px;
    bottom: 135px;

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

    gap: 18px;

    z-index: 10;
}

.reel-action-btn {
    border: none;

    background: transparent;

    color: #fff;

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

    gap: 5px;

    cursor: pointer;
}

.reel-action-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    background: rgba(255,255,255,0.18);

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

    font-size: 21px;
}

.reel-action-label {
    font-size: 11px;
    font-weight: 600;

    color: #fff;
}


/* =========================
   BUY NOW
========================= */

.reel-buy-now-btn {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    width: calc(100% - 36px);

    height: 50px;

    border: none;
    border-radius: 30px;

    color: #fff;

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

    background: linear-gradient(
        90deg,
        #8138f5,
        #e92b9b
    );

    box-shadow:
        0 8px 25px rgba(150, 50, 255, 0.35);

    cursor: pointer;

    z-index: 20;
}


/* =========================
   MOBILE CONTENT ADJUSTMENT
========================= */

@media (max-width: 768px) {

    /*
       Bottom nav ke upar content
    */

    .reel-info {
        left: 16px;
        right: 90px;
        bottom: 105px;
    }

    .reel-actions {
        right: 10px;
        bottom: 155px;
    }

    .reel-buy-now-btn {
        bottom: 88px;
        left: 16px;
        width: calc(100% - 32px);
    }

    .reel-mute-btn {
        top: 18px;
        right: 16px;
    }
}


/* =========================
   VERY SMALL PHONES
========================= */

@media (max-width: 380px) {

    .reel-info {
        left: 12px;
        right: 78px;
        bottom: 100px;
    }

    .reel-product-name {
        max-width: 170px;
    }

    .reel-actions {
        right: 7px;
    }

    .reel-action-icon {
        width: 46px;
        height: 46px;
    }
}

/* =========================================================
   FINAL MOBILE REEL FIX
========================================================= */

@media (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    #header {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .reels-page {
        position: fixed !important;

        inset: 0 !important;

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

        height: 100dvh !important;
        min-height: 100dvh !important;

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

        background: #000 !important;

        overflow: hidden !important;
    }

    .reels-feed {
        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;

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

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

        scrollbar-width: none;

        background: #000 !important;
    }

    .reels-feed::-webkit-scrollbar {
        display: none;
    }

    .reel-slide {
        position: relative !important;

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

        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: none !important;

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

        flex: 0 0 100% !important;

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

        box-shadow: none !important;

        overflow: hidden !important;

        background: #000 !important;
    }

    .reel-video {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

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

        height: 100% !important;

        object-fit: cover !important;

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

        background: #000 !important;
    }


    /* =========================================
       BACK BUTTON
    ========================================= */

    .reel-back-btn {
        position: absolute;

        top: max(18px, env(safe-area-inset-top));
        left: 16px;

        width: 44px;
        height: 44px;

        border: 0;
        border-radius: 50%;

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

        color: #fff;

        background: rgba(0, 0, 0, 0.48);

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

        font-size: 20px;

        cursor: pointer;

        z-index: 100;
    }


    /* =========================================
       MUTE BUTTON
       Back ke opposite side
    ========================================= */

    .reel-mute-btn {
        top: max(18px, env(safe-area-inset-top)) !important;
        right: 16px !important;

        width: 44px !important;
        height: 44px !important;

        z-index: 100 !important;
    }


    /* =========================================
       PRODUCT INFO
    ========================================= */

    .reel-info {
        left: 18px !important;
        right: 92px !important;

        /*
           Bottom nav ke upar nahi,
           Buy Now ke just upar
        */
        bottom: 150px !important;

        z-index: 20 !important;
    }


    /* =========================================
       WISHLIST + CART
    ========================================= */

    .reel-actions {
        right: 12px !important;

        /*
           Bottom nav se safe distance
        */
        bottom: 180px !important;

        z-index: 30 !important;
    }


    /* =========================================
       BUY NOW
    ========================================= */

    .reel-buy-now-btn {
        position: absolute !important;

        left: 18px !important;
        right: 18px !important;

        width: calc(100% - 36px) !important;

        /*
           Bottom nav ke bilkul upar
        */
        bottom: calc(76px + 14px) !important;

        height: 52px !important;

        z-index: 50 !important;
    }


    /* =========================================
       MOBILE BOTTOM NAV
    ========================================= */

    .mobile-bottom-nav {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

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

        height: 76px !important;

        margin: 0 !important;

        z-index: 99999 !important;

        box-sizing: border-box !important;

        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}



/* =========================================
   FINAL MOBILE POSITION
========================================= */

@media (max-width: 768px) {

    /* Product name / price */
    .reel-info {
        bottom: 75px !important;
    }

    /* Wishlist + Cart */
    .reel-actions {
        right: 12px !important;
        bottom: 70px !important;
        gap: 14px !important;
    }

    /* Buy Now */
    .reel-buy-now-btn {
        bottom: 10px !important;
    }
}

/* =========================================
   FINAL DESKTOP / LAPTOP REELS FIX
========================================= */

@media (min-width: 769px) {

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #08060d !important;
        overflow: hidden !important;
    }

    /* Header fixed at top */
    #header {
        position: relative !important;
        z-index: 9999 !important;
    }

    .reels-page {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        /*
           Header ke neeche se reels start
        */
        top: 0 !important;

        width: 100% !important;
        height: 100vh !important;

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

        display: flex !important;
        justify-content: center !important;

        background: #08060d !important;

        overflow: hidden !important;
    }

    .reels-feed {
        width: 100% !important;
        height: 100% !important;

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

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

        scroll-snap-type: y mandatory !important;

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

        scrollbar-width: none !important;
    }

    .reels-feed::-webkit-scrollbar {
        display: none !important;
    }

    /*
       ONE BIG CENTERED REEL
    */
    .reel-slide {
        position: relative !important;

        width: min(430px, 42vw) !important;

        /*
           Header ke neeche proper height
        */
        height: calc(100vh - 115px) !important;

        min-height: 620px !important;
        max-height: 780px !important;

        flex: 0 0 auto !important;

        margin: 15px 0 30px !important;

        border-radius: 22px !important;

        overflow: hidden !important;

        background: #000 !important;

        box-shadow:
            0 0 0 2px rgba(137, 67, 255, .25),
            0 20px 70px rgba(0, 0, 0, .65) !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    .reel-video {
        position: absolute !important;

        inset: 0 !important;

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

        object-fit: cover !important;

        background: #000 !important;
    }

    /*
       Desktop par actions proper size
    */
    .reel-actions {
        right: 12px !important;
        bottom: 135px !important;
    }

    .reel-info {
        left: 18px !important;
        right: 80px !important;
        bottom: 80px !important;
    }

    .reel-buy-now-btn {
        left: 18px !important;
        right: 18px !important;

        width: calc(100% - 36px) !important;

        bottom: 18px !important;
    }

    .reel-mute-btn {
        top: 18px !important;
        right: 18px !important;
    }

    /*
       Back button desktop par bhi clean
    */
    .reel-back-btn {
        top: 18px !important;
        left: 18px !important;
    }
}


/* =========================================
   DESKTOP ONLY - FINAL REEL FIX
   MOBILE KO TOUCH NAHI KAREGA
========================================= */

@media (min-width: 769px) {

    /* Header normal flow me rahega */
    #header {
        position: relative !important;
        z-index: 9999 !important;
    }

    /*
       Header ke baad jitni screen bachi,
       reels sirf utni hi height lega
    */
    .reels-page {
        position: relative !important;

        width: 100% !important;

        height: calc(100vh - 130px) !important;
        min-height: 0 !important;

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

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

        background: #08060d !important;

        overflow: hidden !important;
    }

    /*
       Feed poori available height lega
    */
    .reels-feed {
        width: 100% !important;
        height: 100% !important;

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

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

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

        scroll-snap-type: y mandatory !important;

        scrollbar-width: none !important;
    }

    .reels-feed::-webkit-scrollbar {
        display: none !important;
    }

    /*
       EK COMPLETE REEL
    */
    .reel-slide {
        width: min(400px, 40vw) !important;

        height: calc(100vh - 150px) !important;

        min-height: 0 !important;
        max-height: none !important;

        flex: 0 0 auto !important;

        margin: 10px 0 !important;

        border-radius: 22px !important;

        overflow: hidden !important;

        background: #000 !important;

        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;

        box-shadow:
            0 0 0 2px rgba(137, 67, 255, .25),
            0 20px 70px rgba(0, 0, 0, .55) !important;
    }

    .reel-video {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
    }
}

/* =========================================================
   DESKTOP ONLY
   FIX REEL GOING BEHIND HEADER
========================================================= */

@media (min-width: 769px) {

    /*
       Header ki actual space reserve karo
    */
    .reels-page {
        position: relative !important;

        width: 100% !important;

        /*
           Header ke neeche se start
        */
        margin-top: 142px !important;

        /*
           Remaining viewport height
        */
        height: calc(100vh - 142px) !important;

        min-height: 0 !important;

        padding: 0 !important;

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

        overflow: hidden !important;

        background: #08060d !important;
    }


    /*
       Feed ko available area me rakho
    */
    .reels-feed {
        width: 100% !important;
        height: 100% !important;

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

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

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

        scrollbar-width: none !important;

        scroll-snap-type: y mandatory !important;
    }


    .reels-feed::-webkit-scrollbar {
        display: none !important;
    }


    /*
       ONE COMPLETE REEL
    */
    .reel-slide {
        width: 400px !important;

        height: calc(100vh - 162px) !important;

        min-height: 0 !important;
        max-height: none !important;

        flex: 0 0 auto !important;

        margin: 10px 0 !important;

        border-radius: 22px !important;

        overflow: hidden !important;

        background: #000 !important;

        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;

        box-shadow:
            0 0 0 2px rgba(137, 67, 255, .25),
            0 20px 70px rgba(0, 0, 0, .55) !important;
    }


    .reel-video {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
    }
}
/* =========================================================
   DESKTOP REELS - INSTAGRAM STYLE
   HEADER HIDE + LEFT NAVIGATION
   MOBILE UNCHANGED
========================================================= */

@media (min-width: 769px) {

    /* =========================================
       HIDE HEADER COMPLETELY
    ========================================= */

    #header {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }


    html,
    body {
        width: 100% !important;
        height: 100% !important;

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

        overflow: hidden !important;

        background: #08060d !important;
    }


    /* =========================================
       FULL SCREEN REELS
    ========================================= */

    .reels-page {
        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

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

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

        background: #08060d !important;

        overflow: hidden !important;

        z-index: 1 !important;
    }


    .reels-feed {
        width: 100% !important;
        height: 100% !important;

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

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

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

        scroll-snap-type: y mandatory !important;

        scrollbar-width: none !important;
    }

    .reels-feed::-webkit-scrollbar {
        display: none !important;
    }


    /* =========================================
       REEL
    ========================================= */

    .reel-slide {
        width: 420px !important;

        height: calc(100vh - 30px) !important;

        min-height: 0 !important;
        max-height: none !important;

        flex: 0 0 auto !important;

        margin: 15px 0 !important;

        border-radius: 22px !important;

        overflow: hidden !important;

        background: #000 !important;

        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;

        box-shadow:
            0 0 0 2px rgba(137, 67, 255, .25),
            0 20px 70px rgba(0, 0, 0, .65) !important;
    }


    .reel-video {
        position: absolute !important;

        inset: 0 !important;

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

        object-fit: cover !important;

        background: #000 !important;
    }


    /* =========================================
       LEFT SIDE NAVIGATION
    ========================================= */

    .mobile-bottom-nav {
        position: fixed !important;

        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;

        width: 82px !important;
        height: 100vh !important;

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

        display: flex !important;
        flex-direction: column !important;

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

        gap: 26px !important;

        background: transparent !important;

        z-index: 99999 !important;

        box-sizing: border-box !important;
    }


    .mobile-bottom-nav a {
        width: 70px !important;
        min-height: 58px !important;

        display: flex !important;

        flex-direction: column !important;

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

        gap: 6px !important;

        color: #fff !important;

        text-decoration: none !important;

        border-radius: 14px !important;

        transition:
            transform .2s ease,
            background .2s ease !important;
    }


    .mobile-bottom-nav a i {
        font-size: 25px !important;

        color: #fff !important;
    }


    .mobile-bottom-nav a span {
        font-size: 11px !important;

        font-weight: 600 !important;

        color: #fff !important;
    }


    .mobile-bottom-nav a:hover {
        transform: scale(1.08) !important;

        background: rgba(255,255,255,.08) !important;
    }


    /* =========================================
       REEL ACTIONS
    ========================================= */

    .reel-actions {
        right: 12px !important;
        bottom: 125px !important;

        gap: 14px !important;

        z-index: 30 !important;
    }


    /* =========================================
       PRODUCT INFO
    ========================================= */

    .reel-info {
        left: 18px !important;
        right: 80px !important;

        bottom: 78px !important;

        z-index: 20 !important;
    }


    /* =========================================
       BUY NOW
    ========================================= */

    .reel-buy-now-btn {
        left: 18px !important;
        right: 18px !important;

        width: calc(100% - 36px) !important;

        bottom: 16px !important;

        z-index: 40 !important;
    }


    /* =========================================
       MUTE
    ========================================= */

    .reel-mute-btn {
        top: 18px !important;
        right: 18px !important;

        z-index: 50 !important;
    }


    /* =========================================
       BACK
    ========================================= */

    .reel-back-btn {
        top: 18px !important;
        left: 18px !important;

        z-index: 50 !important;
    }
}


/* =========================================================
   MOBILE — DO NOT CHANGE
========================================================= */

@media (max-width: 768px) {

    .mobile-bottom-nav {
        display: flex !important;
    }

}

/* =========================================================
   FINAL DESKTOP REELS
========================================================= */

@media (min-width: 769px) {

    /* Reel exact center */
    .reels-feed {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .reel-slide {
        position: relative !important;

        width: 420px !important;

        /*
           Almost full desktop height
        */
        height: calc(100vh - 30px) !important;

        min-height: 0 !important;
        max-height: none !important;

        flex: 0 0 auto !important;

        margin: 15px 0 !important;

        transform: none !important;

        border-radius: 22px !important;

        overflow: hidden !important;
    }


    /* =========================================
       BACK ARROW — TOP LEFT
    ========================================= */

    .reel-back-btn {
        position: absolute !important;

        top: 18px !important;
        left: 18px !important;

        width: 44px !important;
        height: 44px !important;

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

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

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

        background: rgba(0, 0, 0, .55) !important;

        color: #fff !important;

        font-size: 20px !important;

        z-index: 999 !important;
    }


    /* =========================================
       MUTE — TOP RIGHT
    ========================================= */

    .reel-mute-btn {
        position: absolute !important;

        top: 18px !important;
        right: 18px !important;

        z-index: 999 !important;
    }


    /* =========================================
       VIDEO
    ========================================= */

    .reel-video {
        position: absolute !important;

        inset: 0 !important;

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

        object-fit: cover !important;
    }
}

.reel-price {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    margin-top: 4px !important;
}

.reel-current-price {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #fff !important;
}

.reel-old-price {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.65) !important;

    text-decoration: line-through !important;
    text-decoration-thickness: 1.5px !important;
}

/* =========================================================
   FINAL DESKTOP REELS
   - Header hidden
   - Reel centered
   - Full height
   - Back button top-left
   - Proper product pricing
========================================================= */

@media (min-width: 769px) {

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

    #header {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html,
    body {
        width: 100% !important;
        height: 100% !important;

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

        overflow: hidden !important;

        background: #08060d !important;
    }


    /* =========================
       FULL SCREEN REELS AREA
    ========================= */

    .reels-page {
        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

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

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

        background: #08060d !important;

        overflow: hidden !important;

        z-index: 1 !important;
    }


    .reels-feed {
        position: relative !important;

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

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

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

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

        scroll-snap-type: y mandatory !important;

        scrollbar-width: none !important;
    }

    .reels-feed::-webkit-scrollbar {
        display: none !important;
    }


    /* =========================
       REEL
    ========================= */

    .reel-slide {
        position: relative !important;

        width: 420px !important;

        /*
           Almost complete desktop height
        */
        height: calc(100vh - 30px) !important;

        min-height: 0 !important;
        max-height: none !important;

        flex: 0 0 auto !important;

        margin: 15px 0 !important;
        padding: 0 !important;

        border-radius: 22px !important;

        overflow: hidden !important;

        background: #000 !important;

        transform: none !important;

        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;

        box-shadow:
            0 0 0 2px rgba(137, 67, 255, .25),
            0 20px 70px rgba(0, 0, 0, .65) !important;
    }


    .reel-video {
        position: absolute !important;

        inset: 0 !important;

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

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

        object-fit: cover !important;

        background: #000 !important;
    }


    /* =========================
       BACK ARROW
       FORCE TOP LEFT
    ========================= */

    .reel-back-btn {
        position: absolute !important;

        top: 18px !important;
        left: 18px !important;

        right: auto !important;
        bottom: auto !important;

        width: 44px !important;
        height: 44px !important;

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

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

        border: none !important;
        border-radius: 50% !important;

        background: rgba(0, 0, 0, .55) !important;

        color: #fff !important;

        font-size: 20px !important;
        line-height: 1 !important;

        z-index: 9999 !important;

        cursor: pointer !important;

        transform: none !important;
    }

    .reel-back-btn i {
        color: #fff !important;

        font-size: 20px !important;

        pointer-events: none !important;
    }


    /* =========================
       MUTE BUTTON
    ========================= */

    .reel-mute-btn {
        position: absolute !important;

        top: 18px !important;
        right: 18px !important;

        left: auto !important;
        bottom: auto !important;

        z-index: 9999 !important;
    }


    /* =========================
       WISHLIST + CART
    ========================= */

    .reel-actions {
        position: absolute !important;

        right: 12px !important;
        bottom: 125px !important;

        z-index: 100 !important;
    }


    /* =========================
       PRODUCT INFO
    ========================= */

    .reel-info {
        position: absolute !important;

        left: 18px !important;
        right: 78px !important;
        bottom: 78px !important;

        z-index: 100 !important;
    }


    /* =========================
       PRICE FIX
    ========================= */

    .reel-price {
        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        margin-top: 4px !important;

        white-space: nowrap !important;
    }

    /* Current / Sale Price */
    .reel-price strong {
        display: inline-block !important;

        font-size: 15px !important;
        font-weight: 800 !important;

        color: #fff !important;
    }

    /* Old Price */
    .reel-price .old {
        display: inline-block !important;

        font-size: 12px !important;
        font-weight: 600 !important;

        color: rgba(255, 255, 255, .65) !important;

        text-decoration: line-through !important;
        text-decoration-thickness: 1.5px !important;
    }


    /* =========================
       BUY NOW
    ========================= */

    .reel-buy-now-btn {
        position: absolute !important;

        left: 18px !important;
        right: 18px !important;
        bottom: 16px !important;

        width: calc(100% - 36px) !important;

        height: 50px !important;

        z-index: 200 !important;
    }
}


    /* =========================
       PRICE FIX
    ========================= */

    .reel-price {
        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        margin-top: 4px !important;

        white-space: nowrap !important;
    }

    /* Current / Sale Price */
    .reel-price strong {
        display: inline-block !important;

        font-size: 15px !important;
        font-weight: 800 !important;

        color: #fff !important;
    }

    /* Old Price */
    .reel-price .old {
        display: inline-block !important;

        font-size: 12px !important;
        font-weight: 600 !important;

        color: rgba(255, 255, 255, .65) !important;

        text-decoration: line-through !important;
        text-decoration-thickness: 1.5px !important;
    }