/* =========================================
   SAYAMA ATTARS PWA INSTALL POPUP
========================================= */

.pwa-install-popup {
    position: fixed;
    inset: 0;

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

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

    z-index: 999999;

    padding: 15px;
}


.pwa-install-popup.show {
    display: flex;
}


.pwa-install-card {

    position: relative;

    width: 100%;
    max-width: 420px;

    background: #ffffff;

    border-radius: 24px;

    padding: 25px 20px 20px;

    text-align: center;

    animation: pwaSlideUp .35s ease;
}


@keyframes pwaSlideUp {

    from {

        transform: translateY(100px);
        opacity: 0;

    }

    to {

        transform: translateY(0);
        opacity: 1;

    }

}


/* CLOSE BUTTON */

.pwa-close-btn {

    position: absolute;

    top: 12px;
    right: 12px;

    width: 34px;
    height: 34px;

    border: none;

    border-radius: 50%;

    background: #f1f1f1;

    font-size: 17px;

    cursor: pointer;

}


/* APP ICON */

.pwa-icon-box {

    width: 80px;
    height: 80px;

    margin: 0 auto 15px;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 24, 61, 0.18);

}


.pwa-icon-box img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


/* CONTENT */

.pwa-install-content h3 {

    font-size: 21px;

    font-weight: 600;

    color: #00183D;

    margin-bottom: 8px;

}


.pwa-install-content p {

    font-size: 14px;

    color: #666666;

    line-height: 1.6;

    margin-bottom: 20px;

}


/* INSTALL BUTTON */

.pwa-install-btn {

    width: 100%;

    border: none;

    border-radius: 10px;

    padding: 13px;

    background: #00183D;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}


.pwa-install-btn:hover {

    transform: translateY(-2px);

}


/* LATER BUTTON */

.pwa-later-btn {

    width: 100%;

    border: none;

    background: transparent;

    padding: 12px;

    color: #777777;

    font-size: 14px;

    cursor: pointer;

}
/* ==============================
   MAIN SKELETON OVERLAY
============================== */

#pageSkeleton{
    position:fixed;
    inset:0;

    width:100%;
    height:100vh;

    background:#ffffff;

    z-index:99999;

    overflow:hidden;

    opacity:1;

    visibility:visible;

    transition:
        opacity .45s ease,
        visibility .45s ease;
}


/* ==============================
   HIDE SKELETON
============================== */

#pageSkeleton.hide-skeleton{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


/* ==============================
   SKELETON SHIMMER
============================== */

.skeleton-item{

    position:relative;

    overflow:hidden;

    background:#eeeeee;

    border-radius:6px;

}


.skeleton-item::after{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.75) 50%,
        transparent 100%
    );

    animation:skeletonShimmer 1.2s infinite;

}


@keyframes skeletonShimmer{

    100%{
        left:150%;
    }

}


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

.skeleton-header{

    width:100%;

    height:76px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 35px;

    border-bottom:1px solid #eeeeee;

    background:#ffffff;

}


.skeleton-logo-area{

    display:flex;

    align-items:center;

    gap:12px;

}


.skeleton-logo{

    width:45px;

    height:45px;

    border-radius:50%;

}


.skeleton-brand{

    width:130px;

    height:18px;

}


.skeleton-search{

    width:310px;

    height:42px;

    border-radius:8px;

}


.skeleton-menu{

    display:flex;

    gap:22px;

    align-items:center;

}


.skeleton-menu-item{

    width:55px;

    height:15px;

}


.skeleton-circle{

    width:38px;

    height:38px;

    border-radius:50%;

}


/* =====================================================
   SLIDER SKELETON
===================================================== */

.skeleton-slider{

    width:100%;

    height:380px;

    margin-top:10px;

    border-radius:0;

}


/* =====================================================
   MAIN CONTENT
===================================================== */

.skeleton-container{

    max-width:1200px;

    margin:30px auto;

    padding:0 15px;

}


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

.skeleton-title{

    width:200px;

    height:25px;

    margin-bottom:25px;

}


/* =====================================================
   CATEGORIES
===================================================== */

.skeleton-categories{

    display:flex;

    gap:20px;

    margin-bottom:40px;

    overflow:hidden;

}


.skeleton-category{

    min-width:110px;

    text-align:center;

}


.skeleton-category-image{

    width:100px;

    height:100px;

    border-radius:50%;

    margin:auto;

}


.skeleton-category-text{

    width:75px;

    height:13px;

    margin:12px auto 0;

}


/* =====================================================
   FEATURE BOXES
===================================================== */

.skeleton-features{

    display:grid;

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

    gap:20px;

    margin-bottom:45px;

}


.skeleton-feature{

    height:90px;

    border-radius:10px;

}


/* =====================================================
   PRODUCT SECTION
===================================================== */

.skeleton-products{

    display:grid;

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

    gap:22px;

}


.skeleton-product{

    border:1px solid #eeeeee;

    padding:12px;

    border-radius:10px;

}


.skeleton-product-image{

    width:100%;

    height:220px;

    border-radius:8px;

}


.skeleton-product-name{

    width:80%;

    height:15px;

    margin-top:15px;

}


.skeleton-product-price{

    width:45%;

    height:14px;

    margin-top:12px;

}


.skeleton-product-button{

    width:100%;

    height:35px;

    margin-top:15px;

    border-radius:6px;

}


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

@media(max-width:991px){

    .skeleton-search{

        width:200px;

    }


    .skeleton-menu-item{

        display:none;

    }


    .skeleton-slider{

        height:280px;

    }


    .skeleton-features{

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

    }


    .skeleton-products{

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

    }

}


@media(max-width:767px){

    /* HEADER */

    .skeleton-header{

        height:65px;

        padding:0 12px;

    }


    .skeleton-logo{

        width:38px;

        height:38px;

    }


    .skeleton-brand{

        width:95px;

        height:14px;

    }


    .skeleton-search{

        display:none;

    }


    .skeleton-menu{

        gap:10px;

    }


    .skeleton-circle{

        width:32px;

        height:32px;

    }


    /* SLIDER */

    .skeleton-slider{

        height:180px;

        margin-top:5px;

    }


    /* CONTAINER */

    .skeleton-container{

        margin:22px auto;

        padding:0 12px;

    }


    .skeleton-title{

        width:150px;

        height:20px;

        margin-bottom:20px;

    }


    /* CATEGORIES */

    .skeleton-categories{

        gap:14px;

        margin-bottom:30px;

    }


    .skeleton-category{

        min-width:75px;

    }


    .skeleton-category-image{

        width:65px;

        height:65px;

    }


    .skeleton-category-text{

        width:55px;

        height:10px;

        margin-top:8px;

    }


    /* FEATURES */

    .skeleton-features{

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

        gap:12px;

        margin-bottom:30px;

    }


    .skeleton-feature{

        height:65px;

    }


    /* PRODUCTS */

    .skeleton-products{

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

        gap:12px;

    }


    .skeleton-product{

        padding:8px;

    }


    .skeleton-product-image{

        height:170px;

    }


    .skeleton-product-name{

        height:12px;

        margin-top:10px;

    }


    .skeleton-product-price{

        height:11px;

        margin-top:8px;

    }


    .skeleton-product-button{

        height:30px;

        margin-top:10px;

    }

}


@media(max-width:400px){

    .skeleton-slider{

        height:155px;

    }


    .skeleton-product-image{

        height:145px;

    }


    .skeleton-category{

        min-width:65px;

    }


    .skeleton-category-image{

        width:58px;

        height:58px;

    }

}
/* ===== NAVBAR ===== */

.navbar{
    background:#ffffff;
    box-shadow:0 3px 18px rgba(0,0,0,.08);
    min-height:70px;
    z-index:1030;
    border-bottom:1px solid #f1f1f1;
}

.navbar .container-fluid{
    padding-left:18px;
    padding-right:18px;
}


/* =========================
   BRAND
========================= */

.navbar-brand{
    display:flex;
    align-items:center;
    gap:8px;
    color:#171717 !important;
    font-size:19px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
}

.navbar-brand img{
    width:38px;
    height:38px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #d4af37;
    padding:1px;
    background:#fff;
    box-shadow:0 3px 10px rgba(0,0,0,.10);
}

.navbar-brand:hover{
    color:#b8860b !important;
}


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

#desktopSearch{
    height:46px;
    width:320px !important;
    border:1px solid #e1e1e1;
    border-radius:12px;
    background:#fafafa;
    padding:0 16px;
    font-size:14px;
    color:#222;
    transition:.25s ease;
}

#desktopSearch:focus{
    background:#fff;
    border-color:#d4af37;
    box-shadow:0 0 0 3px rgba(212,175,55,.12);
    outline:none;
}

#desktopSearch::placeholder{
    color:#999;
}


/* =========================
   NAV LINKS
========================= */

.desktop-right .navbar-nav{
    align-items:center;
}

.desktop-right .nav-link{
    position:relative;
    color:#444 !important;
    font-size:13px;
    font-weight:500;
    padding:10px 2px !important;
    transition:.25s ease;
    white-space:nowrap;
}

.desktop-right .nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:3px;
    width:0;
    height:2px;
    background:#d4af37;
    border-radius:10px;
    transition:.25s ease;
}

.desktop-right .nav-link:hover{
    color:#b8860b !important;
}

.desktop-right .nav-link:hover::after{
    width:100%;
}


/* =========================
   ICON COMMON
========================= */

.nav-icon{
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;

    font-size:17px;
    color:#333 !important;

    margin-left:7px;
    margin-right:7px;

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

    background:#fafafa;
    border:1px solid #eeeeee;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.nav-icon:hover{
    background:#fff8df;
    color:#b8860b !important;
    border-color:#e5c65c;
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgba(212,175,55,.18);
}


/* =========================
   HEART ICON
========================= */

.desktop-right > .nav-icon:first-of-type{
    color:#444 !important;
}

.desktop-right > .nav-icon:first-of-type:hover{
    color:#d4af37 !important;
}


/* =========================
   CART
========================= */

.desktop-right a[href="cart.php"]{
    margin-right:10px;
}

.desktop-right a[href="cart.php"] i{
    transition:.25s ease;
}

.desktop-right a[href="cart.php"]:hover i{
    transform:scale(1.08);
}


/* =========================
   CART BADGE
========================= */

#cart-count-desktop,
#cart-count-mobile{

    min-width:20px;
    height:20px;

    padding:2px 6px;

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

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

    color:#fff !important;

    background:#d4af37 !important;

    border:2px solid #fff;

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

    top:0 !important;
    left:100% !important;

    transform:translate(-35%,-25%) !important;
}


/* =========================
   USER LOGIN / USER PILL
========================= */

.nav-icon.dropdown-toggle{
    text-decoration:none !important;
    color:#222 !important;

    width:auto;
    min-width:42px;

    padding:0 12px;

    border-radius:22px;

    background:#fafafa;
    border:1px solid #eeeeee;

    gap:5px;

    margin-left:5px;
}

.nav-icon.dropdown-toggle::after{
    margin-left:3px;
    font-size:9px;
}

.nav-icon.dropdown-toggle i{
    font-size:16px;
}

.nav-icon.dropdown-toggle span{
    font-size:13px;
    font-weight:500 !important;
    color:#333;
    max-width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.nav-icon.dropdown-toggle:hover,
.nav-icon.dropdown-toggle:focus{
    text-decoration:none !important;
    color:#b8860b !important;
    background:#fff8df;
    border-color:#e5c65c;
}


/* =========================
   DROPDOWN
========================= */

.desktop-right .dropdown-menu,
.mobile-icons .dropdown-menu{

    border:1px solid #eeeeee;
    border-radius:13px;

    padding:8px;

    margin-top:10px;

    min-width:190px;

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

    animation:navDropdown .2s ease;
}

@keyframes navDropdown{

    from{
        opacity:0;
        transform:translateY(-6px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.dropdown-item{
    border-radius:9px;
    padding:10px 12px;
    font-size:13px;
    font-weight:500;
    transition:.2s ease;
}

.dropdown-item:hover{
    background:#fff8df;
    color:#b8860b;
}

.dropdown-item.text-danger:hover{
    background:#fff0f0;
    color:#dc3545 !important;
}


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

.search-result-box{

    position:absolute;

    top:100%;
    left:0;
    right:0;

    background:#fff;

    border-radius:13px;

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

    display:none;

    max-height:420px;

    overflow-y:auto;

    z-index:99999;

    margin-top:8px;

    border:1px solid #eeeeee;

    animation:fadeSearch .18s ease;
}

.search-item{

    display:flex;
    align-items:center;

    padding:10px 12px;

    text-decoration:none;
    color:#222;

    transition:.2s ease;

    border-bottom:1px solid #f3f3f3;
}

.search-item:last-child{
    border-bottom:none;
}

.search-item:hover{
    background:#fffaf0;
}

.search-item img{

    width:55px;
    height:55px;

    object-fit:cover;

    border-radius:9px;

    margin-right:12px;
}

.search-title{
    font-size:14px;
    font-weight:600;
}

.search-price{
    color:#b8860b;
    font-weight:700;
    font-size:13px;
}

.search-result-box::-webkit-scrollbar{
    width:5px;
}

.search-result-box::-webkit-scrollbar-thumb{
    background:#d4af37;
    border-radius:20px;
}

@keyframes fadeSearch{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{
    position:fixed;
    top:0;
    left:-260px;
    width:260px;
    height:100%;

    background:#fff;

    padding:15px;

    transition:.3s;

    z-index:2000;

    box-shadow:5px 0 20px rgba(0,0,0,.10);
}

.sidebar.show{
    left:0;
}

.sidebar a{
    display:block;
    padding:8px 0;
    color:#333;
    text-decoration:none;
}


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

.mobile-header{
    min-height:45px;
}

.mobile-header > .btn{

    width:40px;
    height:40px;

    border-radius:50%;

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

    border:1px solid #eeeeee;

    background:#fafafa;

    color:#333;

    transition:.25s ease;
}

.mobile-header > .btn:hover{
    background:#fff8df;
    color:#b8860b;
    border-color:#e5c65c;
}

.mobile-header > span{
    font-size:16px;
    color:#222;
    letter-spacing:-.2px;
}


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

.mobile-icons{

    margin-left:auto;

    display:flex;
    align-items:center;

    gap:10px !important;

    font-size:18px;
}

.mobile-icons > i,
.mobile-icons > a,
.mobile-icons > .dropdown > i{

    width:38px;
    height:38px;

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

    border-radius:50%;

    background:#fafafa;

    border:1px solid #eeeeee;

    color:#333;

    text-decoration:none;

    transition:.25s ease;

    cursor:pointer;
}

.mobile-icons > i:hover,
.mobile-icons > a:hover,
.mobile-icons > .dropdown > i:hover{

    background:#fff8df;

    color:#b8860b;

    border-color:#e5c65c;

    transform:translateY(-1px);
}


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

.mobile-icons > a.position-relative{

    position:relative;
}

.mobile-icons > a.position-relative i{
    font-size:16px;
}


/* =========================
   MOBILE USER DROPDOWN
========================= */

.mobile-icons .dropdown{
    position:relative;
}

.mobile-icons .dropdown > i{
    font-size:16px;
}

.mobile-icons .dropdown-menu{
    right:0;
    left:auto;
    margin-top:8px;
}


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

.mobile-search{
    position:relative;
    width:100%;
    margin-top:10px;
}

#mobileSearchInput{

    height:42px;

    border-radius:11px;

    border:1px solid #e1e1e1;

    background:#fafafa;

    font-size:14px;

    padding:0 15px;

    transition:.25s ease;
}

#mobileSearchInput:focus{

    background:#fff;

    border-color:#d4af37;

    box-shadow:0 0 0 3px rgba(212,175,55,.12);

    outline:none;
}

#mobileSearchInput::placeholder{
    color:#999;
}


#mobileSearchResult{

    position:absolute;

    top:48px;

    left:0;
    right:0;

    background:#fff;

    border-radius:12px;

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

    z-index:99999;

    display:none;

    max-height:350px;

    overflow-y:auto;

    border:1px solid #eee;
}

#mobileSearchResult::-webkit-scrollbar{
    width:6px;
}

#mobileSearchResult::-webkit-scrollbar-thumb{
    background:#d4af37;
    border-radius:20px;
}

#mobileSearchResult .search-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 12px;

    color:#222;

    text-decoration:none;

    border-bottom:1px solid #f2f2f2;
}

#mobileSearchResult .search-item:last-child{
    border-bottom:none;
}

#mobileSearchResult .search-item:hover{
    background:#fffaf0;
}


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

@media(max-width:991px){

    .navbar{

        padding:8px 10px;

        min-height:66px;

    }

    .navbar .container-fluid{

        padding-left:5px;
        padding-right:5px;

    }

    .desktop-left,
    .desktop-right,
    .desktop-search{

        display:none !important;

    }

    .mobile-header{

        display:flex;

        align-items:center;

        width:100%;

        gap:8px;

    }

    .mobile-search{

        width:100%;

        margin-top:9px;

    }

}


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

@media(max-width:480px){

    .mobile-header > span{

        font-size:15px;

    }

    .mobile-icons{

        gap:7px !important;

    }
.
    .mobile-icons > i,
    .mobile-icons > a,
    .mobile-icons > .dropdown > i{

        width:35px;
        height:35px;

    }

    #mobileSearchInput{

        height:40px;

        font-size:13px;

    }

}


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

@media(min-width:992px){

    .mobile-header,
    .mobile-search{

        display:none !important;

    }

}


/* =========================================================
   BODY SPACE FOR FIXED NAVBAR
========================================================= */

body{
    padding-top:70px;
}

@media(max-width:991px){

    body{
        padding-top:115px;
    }

}

/* Product Image */

#mobileSearchResult .search-item img{

    width:55px;

    height:55px;

    border-radius:10px;

    object-fit:cover;

    border:1px solid #eee;

}

/* Product Name */

#mobileSearchResult .search-title{

    font-size:14px;

    font-weight:600;

    line-height:20px;

    color:#222;

}

#mobileSearchResult small{

    display:block;

    font-size:12px;

    color:#888;

}

/* Small phones */

@media(max-width:576px){

    #mobileSearchResult{

        max-height:300px;

    }

    #mobileSearchResult .search-item img{

        width:50px;
        height:50px;

    }

}
/* OVERLAY */
#overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    z-index:1500;
    display:none;
}

/* SIDEBAR */
.sidebar{

    position:fixed;

    top:0;
    left:-290px;

    width:290px;
    height:100vh;

    background:#ffffff;

    padding:0;

    transition:
        left .35s cubic-bezier(.4,0,.2,1);

    z-index:2000;

    overflow-y:auto;

    box-shadow:
        8px 0 35px rgba(0,0,0,.16);

    border-right:1px solid #eeeeee;
}


/* OPEN SIDEBAR */

.sidebar.show{

    left:0;

}


/* =========================================================
   SIDEBAR SCROLLBAR
========================================================= */

.sidebar::-webkit-scrollbar{
    width:5px;
}

.sidebar::-webkit-scrollbar-track{
    background:#f7f7f7;
}

.sidebar::-webkit-scrollbar-thumb{

    background:#d4af37;

    border-radius:20px;

}


/* =========================================================
   SIDEBAR LINKS
========================================================= */

.sidebar a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 18px;

    margin:4px 10px;

    color:#333;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

    border-radius:10px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        padding-left .25s ease;

}


/* HOVER */

.sidebar a:hover{

    background:
        linear-gradient(
            90deg,
            #fff8df,
            #fffdf5
        );

    color:#b8860b;

    padding-left:23px;

    transform:translateX(2px);

}


/* ACTIVE STYLE */

.sidebar a.active{

    background:#fff8df;

    color:#b8860b;

    font-weight:600;

}


/* =========================================================
   SIDEBAR ICONS
========================================================= */

.sidebar a i{

    width:30px;
    height:30px;

    display:flex;

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

    border-radius:8px;

    background:#f7f7f7;

    color:#555;

    font-size:13px;

    transition:.25s ease;

}


.sidebar a:hover i{

    background:#d4af37;

    color:#ffffff;

}


/* =========================================================
   SIDEBAR CLOSE BUTTON
   Agar aapke sidebar HTML mein close button hai
========================================================= */

.sidebar .close-btn{

    width:34px;
    height:34px;

    display:flex;

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

    border-radius:50%;

    background:#f8f8f8;

    color:#333;

    cursor:pointer;

    transition:.25s ease;

}


.sidebar .close-btn:hover{

    background:#d4af37;

    color:#ffffff;

    transform:rotate(90deg);

}


/* =========================================================
   SIDEBAR HEADER
   Agar existing sidebar mein header class use ho rahi hai
========================================================= */

.sidebar-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px 18px;

    margin-bottom:8px;

    border-bottom:1px solid #eeeeee;

}


/* LOGO / TITLE */

.sidebar-header h5,
.sidebar-header h4{

    margin:0;

    font-size:17px;

    font-weight:700;

    color:#222;

}


/* =========================================================
   SIDEBAR TITLE
========================================================= */

.sidebar-title{

    padding:15px 18px 7px;

    color:#b8860b;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}


/* =========================================================
   LOGGED USER SECTION
   Agar sidebar mein user information hai
========================================================= */

.sidebar-user{

    margin:12px;

    padding:14px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #ffffff
        );

    border:1px solid #f0e1a8;

    display:flex;

    align-items:center;

    gap:12px;

}


.sidebar-user .user-avatar{

    width:42px;
    height:42px;

    border-radius:50%;

    display:flex;

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

    background:#d4af37;

    color:#ffffff;

    font-size:17px;

    box-shadow:
        0 4px 12px rgba(212,175,55,.25);

}


.sidebar-user .user-name{

    font-size:13px;

    font-weight:600;

    color:#222;

}


.sidebar-user .user-email{

    font-size:10px;

    color:#888;

    margin-top:2px;

}


/* =========================================================
   SIDEBAR DIVIDER
========================================================= */

.sidebar hr{

    margin:10px 18px;

    border:0;

    border-top:1px solid #eeeeee;

}


/* =========================================================
   LOGOUT
========================================================= */

.sidebar a.text-danger{

    color:#dc3545 !important;

}


.sidebar a.text-danger i{

    color:#dc3545;

}


.sidebar a.text-danger:hover{

    background:#fff0f0;

    color:#dc3545 !important;

}


.sidebar a.text-danger:hover i{

    background:#dc3545;

    color:#ffffff;

}


/* =========================================================
   MOBILE SIDEBAR OVERLAY
========================================================= */

.sidebar-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.38);

    backdrop-filter:blur(2px);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:1999;

}


.sidebar-overlay.show{

    opacity:1;

    visibility:visible;

}


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

@media(max-width:991px){

    .sidebar{

        width:285px;

        left:-300px;

    }

    .sidebar.show{

        left:0;

    }

}


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

@media(max-width:480px){

    .sidebar{

        width:275px;

        left:-290px;

    }

    .sidebar.show{

        left:0;

    }

    .sidebar a{

        font-size:13px;

        padding:11px 16px;

    }

}

/* =========================================================
   SIDEBAR MENU TEXT - PROFESSIONAL FIX
========================================================= */

.sidebar > div:first-child,
.sidebar .sidebar-header,
.sidebar-header {

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    width:100%;

    min-height:52px;

    padding:14px 16px !important;

    margin:0 0 8px 0 !important;

    border-bottom:1px solid #eeeeee;

}


/* MENU TEXT */

.sidebar > div:first-child:first-child,
.sidebar .sidebar-header h4,
.sidebar .sidebar-header h5 {

    font-size:16px !important;

    font-weight:700 !important;

    color:#222 !important;

    line-height:1.3 !important;

    margin:0 !important;

    letter-spacing:.2px;

}


/* CLOSE BUTTON / X */

.sidebar > div:first-child button,
.sidebar .close-btn,
.sidebar .btn-close {

    width:32px !important;

    height:32px !important;

    min-width:32px !important;

    padding:0 !important;

    margin:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    border-radius:50% !important;

    border:1px solid #eeeeee !important;

    background:#fafafa !important;

    color:#333 !important;

    opacity:1 !important;

    transition:.25s ease;

}


.sidebar > div:first-child button:hover,
.sidebar .close-btn:hover,
.sidebar .btn-close:hover {

    background:#d4af37 !important;

    border-color:#d4af37 !important;

    color:#fff !important;

}


/* =========================================================
   SIDEBAR MENU ITEMS
========================================================= */

.sidebar a {

    min-height:44px;

    display:flex !important;

    align-items:center !important;

    gap:12px !important;

    padding:9px 14px !important;

    margin:4px 10px !important;

    font-size:13px !important;

    font-weight:500 !important;

    line-height:1.4 !important;

}


/* ICON */

.sidebar a i {

    flex:0 0 30px;

    width:30px !important;

    height:30px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    font-size:12px !important;

}


/* TEXT ALIGNMENT */

.sidebar a span {

    line-height:1.4;

}


/* LOGOUT */

.sidebar a.text-danger {

    margin-top:7px !important;

}

/* ===== FIX FOR FIXED NAVBAR ===== */
body {
    padding-top: 70px;
}

/* Mobile navbar height */
@media (max-width: 768px) {
    body {
        padding-top: 56px;
    }
}


/* =========================================================
   SAYAMA ATTARS
   AMAZON STYLE MOBILE BOTTOM NAVIGATION
========================================================= */

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


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

@media (max-width: 991px) {

    /* -----------------------------------------------------
       BOTTOM NAVIGATION
    ----------------------------------------------------- */

    .mobile-bottom-nav {

        position: fixed;

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

        width: 100%;

        height: 68px;

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

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

        border-top: 1px solid #e8e8e8;

        box-shadow:
            0 -4px 20px rgba(0, 0, 0, 0.08);

        display: flex;

        align-items: stretch;

        justify-content: space-around;

        z-index: 1500;

        padding: 5px 8px 6px;

    }


    /* -----------------------------------------------------
       BOTTOM NAV ITEM
    ----------------------------------------------------- */

    .mobile-bottom-item {

        position: relative;

        flex: 1;

        max-width: 120px;

        min-width: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 3px;

        color: #333;

        text-decoration: none !important;

        border-radius: 12px;

        transition:
            background 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;

        -webkit-tap-highlight-color: transparent;

    }


    /* -----------------------------------------------------
       ICON AREA
    ----------------------------------------------------- */

    .bottom-icon {

        position: relative;

        width: 34px;
        height: 30px;

        display: flex;

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

        border-radius: 10px;

        font-size: 17px;

        color: #333;

        transition:
            background 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;

    }


    /* -----------------------------------------------------
       LABEL
    ----------------------------------------------------- */

    .bottom-label {

        font-size: 10px;

        line-height: 1;

        font-weight: 500;

        color: #555;

        white-space: nowrap;

        transition:
            color 0.2s ease,
            font-weight 0.2s ease;

    }


    /* -----------------------------------------------------
       HOVER
    ----------------------------------------------------- */

    .mobile-bottom-item:hover {

        color: #b8860b;

        text-decoration: none;

    }


    .mobile-bottom-item:hover .bottom-icon {

        color: #b8860b;

    }


    .mobile-bottom-item:hover .bottom-label {

        color: #b8860b;

    }


    /* -----------------------------------------------------
       ACTIVE ITEM
    ----------------------------------------------------- */

    .mobile-bottom-item.active {

        color: #b8860b;

    }


    .mobile-bottom-item.active .bottom-icon {

        color: #b8860b;

        background: #fff8df;

    }


    .mobile-bottom-item.active .bottom-label {

        color: #b8860b;

        font-weight: 600;

    }


    /* -----------------------------------------------------
       CLICK EFFECT
    ----------------------------------------------------- */

    .mobile-bottom-item:active {

        transform: scale(0.94);

    }


    /* -----------------------------------------------------
       CART ICON
    ----------------------------------------------------- */

    .cart-bottom-icon {

        position: relative;

    }


    /* -----------------------------------------------------
       CART BADGE
    ----------------------------------------------------- */

    .bottom-cart-badge {

        position: absolute;

        top: -7px;

        right: -8px;

        min-width: 17px;

        height: 17px;

        padding: 0 4px;

        display: flex;

        align-items: center;

        justify-content: center;

        background: #dc3545;

        color: #fff;

        border-radius: 50px;

        font-size: 9px;

        font-weight: 700;

        line-height: 17px;

        border: 2px solid #fff;

        box-shadow:
            0 2px 5px rgba(0, 0, 0, 0.15);

    }


    /* -----------------------------------------------------
       BODY SPACE
       
       Bottom bar ke peeche footer/content hide na ho.
    ----------------------------------------------------- */

    body {

        padding-bottom: 78px;

    }


    /* -----------------------------------------------------
       SAFE AREA
       iPhone / Android devices
    ----------------------------------------------------- */

    @supports (padding-bottom: env(safe-area-inset-bottom)) {

        .mobile-bottom-nav {

            height:
                calc(68px + env(safe-area-inset-bottom));

            padding-bottom:
                calc(6px + env(safe-area-inset-bottom));

        }

        body {

            padding-bottom:
                calc(78px + env(safe-area-inset-bottom));

        }

    }

}


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

@media (max-width: 420px) {

    .mobile-bottom-nav {

        height: 66px;

        padding-left: 4px;

        padding-right: 4px;

        padding-top: 4px;

        padding-bottom: 5px;

    }


    .mobile-bottom-item {

        max-width: 90px;

    }


    .bottom-icon {

        width: 32px;

        height: 29px;

        font-size: 16px;

    }


    .bottom-label {

        font-size: 9px;

    }


    .bottom-cart-badge {

        top: -6px;

        right: -7px;

        min-width: 16px;

        height: 16px;

        font-size: 8px;

        line-height: 16px;

    }


    body {

        padding-bottom: 74px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .mobile-bottom-nav {

        padding-left: 2px;

        padding-right: 2px;

    }


    .mobile-bottom-item {

        max-width: 78px;

    }


    .bottom-icon {

        width: 30px;

        height: 27px;

        font-size: 15px;

    }


    .bottom-label {

        font-size: 8px;

    }

}

/* =========================================================
   MOBILE FOOTER HIDE
   Bottom Navigation ke saath footer nahi dikhana
========================================================= */

@media (max-width: 991px) {

    footer,
    .footer,
    #footer,
    .site-footer {

        display: none !important;

    }

    /* Footer hide hone ke baad extra bottom space bhi nahi */
    body {

        padding-bottom: 0 !important;

    }

}
/* ===== Slider Wrapper ===== */
./* =====================================
   HOME SLIDER
===================================== */

.home-slider-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}


/* =====================================
   CAROUSEL
===================================== */

.banner-slider {
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
}


/* =====================================
   BANNER IMAGE - DESKTOP
===================================== */

.banner-img {
    width: 100%;
    height: 420px;
    display: block;

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

    border-radius: 14px;
}


/* =====================================
   BANNER LINK
===================================== */

.banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
}


/* =====================================
   CAPTION
===================================== */

.banner-slider .carousel-caption {
    bottom: 15%;
    left: 50%;
    right: auto;

    transform: translateX(-50%);

    padding: 12px 25px;

    background: rgba(0, 0, 0, 0.50);
    border-radius: 10px;

    width: auto;
    max-width: 80%;
}


.banner-slider .carousel-caption h2 {
    margin: 0;
    color: #fff;

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


/* =====================================
   INDICATORS
===================================== */

.banner-slider .carousel-indicators {
    margin-bottom: 12px;
}

.banner-slider .carousel-indicators button {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    margin: 0 4px;
}


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

@media (max-width: 768px) {

    .home-slider-wrapper {
        padding: 0 8px;
    }


    .banner-slider {
        border-radius: 10px;
    }


    /* MAIN FIX */

    .banner-img {
        width: 100%;

        height: 180px;

        object-fit: cover;

        /* Image ka center maintain */
        object-position: center center;

        border-radius: 10px;
    }


    /* Caption */

    .banner-slider .carousel-caption {

        bottom: 10%;

        padding: 6px 12px;

        max-width: 85%;

        border-radius: 6px;
    }


    .banner-slider .carousel-caption h2 {

        font-size: 14px;

        font-weight: 600;
    }


    /* Indicators */

    .banner-slider .carousel-indicators {
        margin-bottom: 5px;
    }


    .banner-slider .carousel-indicators button {

        width: 6px;
        height: 6px;

        margin: 0 3px;
    }


    /* Controls */

    .banner-slider .carousel-control-prev,
    .banner-slider .carousel-control-next {
        width: 12%;
    }

}


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

@media (max-width: 480px) {

    .home-slider-wrapper {
        padding: 0 5px;
    }


    .banner-img {

        height: 160px;

        border-radius: 8px;
    }


    .banner-slider .carousel-caption h2 {
        font-size: 12px;
    }

}

/* ===== Main Content ===== */
.main-content {
    margin-top: 15px;         /* thoda gap slider ke niche */
}

.feature-section{
  
    padding:25px 15px;
    border-radius:16px;
    font-family:'Poppins', sans-serif;
}

.feature-card{
    background:#111;
    border-radius:14px;
    padding:18px 10px;
    text-align:center;
    box-shadow:0 6px 18px rgba(255,255,255,0.08);
    transition:0.3s ease;
    height:100%;
    color:#fff;
}

.feature-card i{
    font-size:32px;
    color:#fff;
    margin-bottom:8px;
    display:block;
}

.feature-card h6{
    font-size:14px;
    font-weight:500;
    margin:0;
    color:#fff;
}

.feature-card:hover{
    transform:translateY(-4px);
    background:#1a1a1a;
}
.category-section{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
}

/* Scroll area */
.category-scroll-wrapper{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding:10px 5px;
    scrollbar-width:none;
}

.category-scroll-wrapper::-webkit-scrollbar{
    display:none;
}

/* Amazon pill */
.category-pill{
    padding:10px 18px;
    background:#111;
    color:#fff;
    border-radius:25px;
    font-size:14px;
    font-weight:500;
    white-space:nowrap;
    cursor:pointer;
    border:1px solid #222;
    transition:0.25s;
}

.category-pill:hover{
    background:#1a1a1a;
}

/* Active category */
.category-pill.active{
    background:#fff;
    color:#000;
    font-weight:600;
}

/* Arrows */
.scroll-btn{
    background:#000;
    color:#fff;
    border:none;
    width:38px;
    height:38px;
    border-radius:50%;
    cursor:pointer;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.3s;
}

.scroll-btn:hover{
    background:#222;
}

/* Mobile arrow size */
@media(max-width:768px){
    .scroll-btn{
        width:32px;
        height:32px;
        font-size:16px;
    }
}
.category-wrapper{
    margin:20px 0;
}

.category-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.category-header h5{
    font-size:18px;
    font-weight:600;
    margin:0;
    color:#000;
}

/* arrows side-by-side */
.arrow-group{
    display:flex;
    gap:8px;
}


.product-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    transition:0.3s;
    height:100%;
}

.product-card:hover{
    transform:translateY(-4px);
}

.product-img{
    height:160px;
    background:#f7f7f7;
    display:flex;
    align-items:center;
    justify-content:center;
     position:relative;
    overflow:hidden;
    border-radius:12px;
}

.product-img img{
   
    width:100%;
    height:220px;
    object-fit:cover;
}

.product-info{
    padding:10px;
}

.product-name{
    font-size:14px;
    font-weight:500;
    margin:0 0 4px;
    line-height:1.3;
}

.product-brand{
    font-size:12px;
    color:#777;
    margin-bottom:6px;
}

.product-price{
    font-size:16px;
    font-weight:600;
    color:#000;
}

/* Mobile tuning */
@media(max-width:768px){
    .product-img{
        height:140px;
    }
}
.product-price{
    display:flex;
    gap:6px;
    align-items:center;
}

.old-price{
    text-decoration:line-through;
    color:#999;
    font-size:13px;
}

.sale-price{
    color:#000;
    font-weight:600;
    font-size:14px;
}
.products-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.products-header h5{
    margin:0;
    font-size:18px;
    font-weight:600;
}

.view-all{
    font-size:14px;
    font-weight:500;
    color:#000;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:4px;
}

.view-all:hover{
    text-decoration:underline;
}


.luxury-card{
    background:linear-gradient(145deg,#000,#111);
    border-radius:16px;
    padding:18px;
    display:flex;
    gap:14px;
    align-items:flex-start;
    box-shadow:0 8px 22px rgba(0,0,0,0.6);
    font-family:'Poppins', sans-serif;
}

.luxury-card i{
    font-size:30px;
    color:#d4af37; /* GOLD */
    flex-shrink:0;
}

.luxury-card h6{
    margin:0 0 6px;
    font-size:15px;
    font-weight:600;
    color:#d4af37;
}

.luxury-card p{
    margin:0;
    font-size:13px;
    color:#f5e6b8;
    line-height:1.5;
}

/* Hover premium effect */
.luxury-card:hover{
    transform:translateY(-4px);
    transition:0.3s ease;
}
.brand-description{
   
    border-radius:16px;
    padding:22px;
    box-shadow:0 8px 22px rgba(0,0,0,0.6);
    font-family:'Poppins', sans-serif;
}

.brand-description p{
    margin:0;
    font-size:14px;
    line-height:1.7;
    color:#000;
}

.brand-description strong{
    color:#000; /* gold */
    font-weight:600;
}


.site-footer{
    background:#000;
    padding:50px 0 20px;
    color:#f5e6b8;
    font-family:'Poppins', sans-serif;
}

.footer-title{
    color:#d4af37;
    font-size:15px;
    font-weight:600;
    margin-bottom:12px;
}

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li{
    margin-bottom:6px;
}

.footer-links a{
    color:#f5e6b8;
    font-size:13px;
    text-decoration:none;
    transition:0.3s;
}

.footer-links a:hover{
    color:#d4af37;
    padding-left:4px;
}

.footer-text{
    font-size:13px;
    line-height:1.6;
}

.newsletter-form{
    display:flex;
    gap:8px;
}

.newsletter-form input{
    flex:1;
    padding:8px 10px;
    border-radius:6px;
    border:1px solid #333;
    background:#111;
    color:#fff;
    font-size:13px;
}

.newsletter-form button{
    background:#d4af37;
    border:none;
    padding:8px 14px;
    border-radius:6px;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
}

.footer-social{
    display:flex;
    gap:12px;
}

.footer-social a{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#d4af37;
    font-size:18px;
    transition:0.3s;
}

.footer-social a:hover{
    background:#d4af37;
    color:#000;
}

.footer-bottom{
    border-top:1px solid #222;
    margin-top:30px;
    padding-top:12px;
    text-align:center;
    font-size:13px;
    color:#777;
}

/* Sidebar */
.pc-sidebar{
    background:#fff;
    padding:15px;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    margin-bottom:20px;
}

.pc-sidebar-title{
    font-size:15px;
    font-weight:600;
    margin-bottom:10px;
    font-family:'Poppins', sans-serif;
    color:#d4af37;
}

.pc-sidebar-links{
    list-style:none;
    padding:0;
    margin:0;
}

.pc-sidebar-links li{
    margin-bottom:6px;
}

.pc-sidebar-links a{
    text-decoration:none;
    color:#000;
    font-size:14px;
    transition:0.3s;
}

.pc-sidebar-links a:hover,
.pc-sidebar-links a.pc-active{
    color:#d4af37;
    font-weight:600;
}

/* Price Filter */
.pc-input{
    border-radius:6px;
    border:1px solid #ccc;
    padding:6px 10px;
}

.pc-btn-apply{
    background:#d4af37;
    border:none;
    color:#000;
    font-weight:500;
    border-radius:6px;
    padding:8px 12px;
    cursor:pointer;
    transition:0.3s;
}

.pc-btn-apply:hover{
    background:#b8952f;
    color:#fff;
}

/* Product Card */
.pc-product-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    transition:0.3s;
    height:100%;
}
.pc-product-card:hover{
    transform:translateY(-4px);
}

.pc-product-img{
    height:160px;
    background:#f7f7f7;
    display:flex;
    align-items:center;
    justify-content:center;
}
.pc-product-img img{
    max-height:100%;
    max-width:100%;
    object-fit:contain;
}

.pc-product-info{
    padding:10px;
}

.pc-product-name{
    font-size:14px;
    font-weight:500;
    margin:0 0 4px;
    line-height:1.3;
}
.pc-product-brand{
    font-size:12px;
    color:#777;
    margin-bottom:6px;
}

.pc-product-price{
    margin-top:6px;
}
.pc-old-price{
    display:block;
    font-size:13px;
    color:#777;
    text-decoration:line-through;
}
.pc-sale-price{
    font-size:16px;
    font-weight:600;
    color:#000;
}

.pc-price-form{
    display:flex;
    gap:8px;
    flex-wrap:wrap; /* mobile me stacked ho jaye agar width kam ho */
}

.pc-input{
    flex:1;
    min-width:70px;
    padding:6px 10px;
    border-radius:6px;
    border:1px solid #ccc;
}

.pc-btn-apply{
    padding:6px 12px;
    background:#d4af37;
    border:none;
    color:#000;
    font-weight:500;
    border-radius:6px;
    cursor:pointer;
    transition:0.3s;
    white-space:nowrap;
}

.pc-btn-apply:hover{
    background:#b8952f;
    color:#fff;
}
.pc-price-range-slider{
    position: relative;
    width: 100%;
    padding: 10px 0;
}

.pc-price-range-slider input[type=range]{
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

.pc-price-range-slider input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    pointer-events: all;
    width: 16px;
    height: 16px;
    background: #d4af37;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    position: relative;
    z-index: 2;
}

.pc-range-track{
    position: absolute;
    height:6px;
    width: 100%;
    background:#eee;
    border-radius:3px;
    top:50%;
    transform:translateY(-50%);
    z-index:1;
}

.pc-range-values span{
    font-size:14px;
    font-weight:500;
}
/* GLOBAL TOP LOADER */
#topLoader{
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px; /* Amazon style */
    background: linear-gradient(
        90deg,
        #d4af37,
        #f5e08e,
        #d4af37
    );
    background-size: 200% 100%;
    animation: loaderGradient 1.2s linear infinite;
    z-index: 99999;
    transition: width 0.35s ease;
}

/* Gradient animation */
@keyframes loaderGradient{
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ADD TO CART ICON ONLY */
.product-img{
    position:relative;
}


/* ===== Founder Section ===== */
.about-founder {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

/* Founder Image */
.about-founder img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: 0.4s;
}

/* Hover Effect */
.about-founder img:hover {
    transform: scale(1.05);
}

/* Text Section */
.about-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
}

/* Headings */
.about-heading {
    text-align: center;
    color: #c7890a;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 15px;
}

/* Vision & Mission Paragraph */
.about-para {
    text-align: center;
    max-width: 850px;
    margin: auto;
    font-size: 15px;
    line-height: 1.8;
}


/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {

    .about-founder {
        flex-direction: column;
        text-align: center;
    }

    .about-founder img {
        max-width: 220px;
        margin-bottom: 15px;
    }

    .about-text {
        text-align: center;
    }

}
/* ===== Contact Section Background ===== */
.contact-section{
   
    padding:40px 20px;
    border-radius:15px;
    color:black;
}

/* Heading */
.contact-heading{
    font-weight:700;
    margin-bottom:25px;
    color:black;
}

/* Contact Info Card */
.contact-info{
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(10px);
    padding:25px;
    border-radius:20px;
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

/* Contact Items */
.contact-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:12px 0;
    border-bottom:1px solid #ddd;
    font-size:15px;
    color:black;
}

.contact-item:last-child{
    border-bottom:none;
}

/* Icons */
.contact-icon{
    font-size:18px;
    color:#c7890a;
}

/* Map Card */
.map-card{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

/* Scroll Animation */
.fade-up{
    opacity:0;
    transform:translateY(40px);
    transition:all 0.8s ease;
}

.fade-up.active{
    opacity:1;
    transform:translateY(0);
}


/* Mobile */
@media(max-width:768px){
    .contact-info{
        margin-bottom:20px;
    }
}

/* ===============================
   PRODUCT DETAILS PAGE STYLING
================================= */

.pd-img-main{
    width:100%;
    border-radius:10px;
    transition:0.3s ease;
}

.pd-img-main:hover{
    transform:scale(1.02);
}

.pd-thumb{
    width:60px;
    border:1px solid #ddd;
    padding:5px;
    cursor:pointer;
    border-radius:6px;
    transition:0.3s ease;
}

.pd-thumb:hover{
    border-color:#000;
}

.pd-title{
    font-size:22px;
    font-weight:600;
}

.pd-price{
    font-size:28px;
    color:#B12704;
    font-weight:700;
}

.pd-old{
    text-decoration:line-through;
    color:#777;
    margin-right:10px;
}

.pd-box{
    border:1px solid #ddd;
    padding:20px;
    border-radius:8px;
    background:#fff;
}

.pd-btn{
    width:100%;
    margin-bottom:10px;
    font-weight:500;
    padding:10px;
    border-radius:6px;
    transition:0.3s ease;
}

.pd-btn:hover{
    transform:translateY(-2px);
}


/* ==================================
   STICKY BUTTON DEFAULT (HIDDEN)
====================================*/

.mobile-sticky-cart{
    display:none;   /* Hide everywhere by default */
}


/* ===============================
   MOBILE RESPONSIVE SETTINGS
================================= */

@media(max-width:768px){

    .pd-title{
        font-size:18px;
    }

    /* Hide desktop buy box */
    .pd-box{
        display:none !important;
    }

    /* 🔥 Sticky Bottom Cart */
    .mobile-sticky-cart{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 12px;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
        z-index: 9999;

        display:flex !important;   /* Force show only on mobile */
        gap:10px;
    }

    .mobile-sticky-cart .btn{
        flex:1;
        padding:12px;
        font-weight:600;
        border-radius:6px;
    }

    /* Prevent overlap */
    body{
        padding-bottom:90px;
    }
}


/* ===============================
   DESKTOP SETTINGS
================================= */

@media(min-width:769px){

    .mobile-sticky-cart{
        display:none !important;   /* Force hide on desktop */
    }

    .pd-box{
        display:block !important;  /* Ensure desktop buy box visible */
    }
}

/* Checkout Page CSS ------*/
.checkout-title{
    font-size:32px;
    font-weight:700;
    color:#111;
}

.step-box{

display:flex;
justify-content:center;
align-items:center;
margin-bottom:40px;
gap:20px;

}

.step{

width:45px;
height:45px;
border-radius:50%;
background:#ddd;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;

}

.active-step{

background:#D4AF37;
color:#fff;

}

.line{

width:80px;
height:3px;
background:#ccc;

}

.checkout-card{

background:#fff;
padding:30px;
border-radius:15px;
box-shadow:0px 10px 25px rgba(0,0,0,.08);
margin-bottom:25px;

}

.checkout-card h4{

font-weight:700;
margin-bottom:20px;

}

.form-control,
.form-select{

height:50px;
border-radius:10px;

}

.summary-card{

background:#fff;
padding:25px;
border-radius:15px;
box-shadow:0px 10px 25px rgba(0,0,0,.08);
position:sticky;
top:20px;

}

.summary-title{

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

}

.total-row{

font-size:22px;
font-weight:bold;
color:#111;

}

.place-btn{

width:100%;
height:55px;
border:none;
background:linear-gradient(90deg,#D4AF37,#f0c040);
border-radius:10px;
font-size:18px;
font-weight:700;
transition:.3s;

}

.place-btn:hover{

transform:translateY(-3px);
box-shadow:0px 10px 25px rgba(212,175,55,.4);

}

.payment-box{

border:2px solid #eee;
padding:15px;
border-radius:10px;
margin-bottom:15px;
cursor:pointer;
transition:.3s;

}

.payment-box:hover{

border-color:#D4AF37;

}
/* Order Success CSS*/
.success-card{

max-width:750px;

margin:60px auto;

background:#fff;

border-radius:20px;

padding:40px;

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

}

.success-icon{

width:120px;
height:120px;
background:#28a745;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
margin:auto;
font-size:55px;
color:#fff;

animation:pop .5s ease;

}

@keyframes pop{

0%{

transform:scale(.3);

}

100%{

transform:scale(1);

}

}

.order-box{

background:#fafafa;

padding:18px;

border-radius:12px;

margin-top:25px;

}

.btn-shop{

background:#f4b400;

color:#000;

font-weight:bold;

}

.btn-shop:hover{

background:#dca300;

}

/* my-order CSS*/
.page-title{
    font-weight:700;
    margin-bottom:30px;
}

.order-card{
    border:none;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    margin-bottom:25px;
    overflow:hidden;
    transition:.3s;
}

.order-card:hover{
    transform:translateY(-4px);
}

.card-header{
    background:#111827;
    color:#fff;
    padding:18px;
}

.order-price{
    color:#ff9800;
    font-weight:700;
    font-size:22px;
}

.badge{
    padding:8px 14px;
    font-size:13px;
}

.empty-box{
    background:#fff;
    border-radius:18px;
    padding:60px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.empty-box i{
    font-size:70px;
    color:#ffc107;
}

.btn-theme{
    background:#ff9800;
    color:#fff;
    border:none;
}

.btn-theme:hover{
    background:#e68900;
    color:#fff;
}

/* Order Details CSS */
.order-card{

background:#fff;

border-radius:18px;

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

padding:30px;

margin-top:40px;

}

.section-title{

font-size:20px;

font-weight:700;

margin-bottom:20px;

}

.product-box{

padding:18px;

border-radius:15px;

border:1px solid #eee;

margin-bottom:18px;

transition:.3s;

}

.product-box:hover{

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

}

.product-box img{

width:90px;

height:90px;

object-fit:cover;

border-radius:10px;

}

.badge{

font-size:13px;

padding:8px 15px;

}

.summary{

background:#fafafa;

padding:18px;

border-radius:12px;

}

@media print{

body{
    background:#fff !important;
}

header,
nav,
footer,
#topbar,
.navbar,
.sidebar,
.btn,
#cancelOrder,
.no-print{
    display:none !important;
}

.order-card{

    box-shadow:none !important;

    border:none !important;

    margin:0 !important;

    padding:0 !important;

    width:100% !important;

}

.container{

    max-width:100% !important;

    width:100% !important;

    margin:0 !important;

    padding:0 !important;

}

.product-box{

    page-break-inside:avoid;

}

.summary{

    border:1px solid #ddd;

}

}
/* My Account CSS */
     .logout-confirm{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.logout-box{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 280px;
    text-align: center;
}

.logout-actions{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.account-sidebar{

background:#fff;

border-radius:15px;

padding:30px;

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

}

.profile-img{

width:90px;

height:90px;

border-radius:50%;

border:4px solid #d4af37;

object-fit:cover;

}

.account-menu{

display:block;

padding:14px 18px;

margin-bottom:10px;

text-decoration:none;

color:#222;

border-radius:10px;

font-weight:600;

transition:.3s;

}

.account-menu i{

width:28px;

}

.account-menu:hover{

background:#d4af37;

color:#fff;

}

.active{

background:#d4af37;

color:#fff;

}

.logout{

color:#dc3545;

}

.logout:hover{

background:#dc3545;

color:#fff;

}

.welcome-card{

background:linear-gradient(135deg,#000,#2d2d2d);

padding:35px;

border-radius:15px;

color:#fff;

}

.welcome-card span{

color:#d4af37;

}

.dashboard-card{

background:#fff;

padding:30px;

border-radius:15px;

text-align:center;

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

transition:.3s;

}

.dashboard-card:hover{

transform:translateY(-5px);

}

.dashboard-card i{

font-size:35px;

color:#d4af37;

margin-bottom:15px;

}

.dashboard-card h2{

font-size:40px;

margin-bottom:5px;

font-weight:700;

}

/* Combo Offer CSS */
/* ==========================================
   COMBO OFFERS PAGE
========================================== */

.combo-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    transition:all .35s ease;
    cursor:pointer;
    border:1px solid #ececec;
    height:100%;
}

.combo-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.12)!important;
}

.combo-img-box{
    position:relative;
    overflow:hidden;
    background:#f8f8f8;
}

.combo-img{
    width:100%;
    height:240px;
    object-fit:cover;
    transition:.4s;
}

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

.combo-card .card-body{
    padding:18px;
}

.combo-title{
    font-size:20px;
    font-weight:700;
    color:#222;
    margin-bottom:10px;
    line-height:1.4;
}

.combo-card p{
    font-size:14px;
    color:#666;
    line-height:1.6;
}

.combo-card .badge{
    border-radius:30px;
    font-size:12px;
    padding:8px 14px;
    font-weight:600;
}

/* ===========================
   Heading
=========================== */

.combo-heading{
    font-size:36px;
    font-weight:700;
    color:#222;
}

.combo-subtitle{
    color:#777;
    font-size:16px;
}

/* ===========================
   Desktop
=========================== */

@media(min-width:1200px){

    .combo-img{
        height:260px;
    }

}

/* ===========================
   Tablet
=========================== */

@media(max-width:991px){

    .combo-title{
        font-size:18px;
    }

    .combo-img{
        height:220px;
    }

}

/* ===========================
   Mobile
=========================== */

@media(max-width:767px){

    .combo-card{

        border-radius:14px;

    }

    .combo-card .card-body{

        padding:12px;

    }

    .combo-title{

        font-size:15px;
        margin-bottom:6px;

    }

    .combo-card p{

        font-size:12px;
        line-height:1.5;

    }

    .combo-img{

        height:160px;

    }

    .combo-card .badge{

        font-size:10px;
        padding:6px 10px;

    }

}

/* ===========================
   Small Mobile
=========================== */

@media(max-width:480px){

    .combo-img{

        height:145px;

    }

    .combo-title{

        font-size:14px;

    }

}

/* ===========================
   Smooth Animation
=========================== */

.combo-card,
.combo-img,
.combo-card .badge{

    transition:all .35s ease;

}



/* =========================================================
   RELATED PRODUCT CAROUSEL
========================================================= */

.related-products-section {
    margin-top: 65px;
    padding: 45px 0 70px;
    background: #faf9f6;
    border-top: 1px solid #eeeeee;
}


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

.related-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}


.related-eyebrow {
    display: block;
    margin-bottom: 6px;

    color: #a47c00;

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

    letter-spacing: 1.5px;
}


.related-header h2 {
    margin: 0 0 7px;

    color: #171717;

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


.related-header p {
    margin: 0;

    color: #777777;

    font-size: 13px;
}


/* =========================================================
   NAVIGATION BUTTONS
========================================================= */

.related-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
}


.related-navigation button {
    width: 42px;
    height: 42px;

    border: 1px solid #dedede;

    border-radius: 50%;

    background: #ffffff;

    color: #171717;

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

    cursor: pointer;

    transition: 0.2s ease;
}


.related-navigation button:hover {
    background: #171717;
    border-color: #171717;
    color: #ffffff;
}


.related-navigation button.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


/* =========================================================
   SWIPER
========================================================= */

.relatedProductsSwiper {
    width: 100%;
    overflow: hidden;
}


.relatedProductsSwiper .swiper-slide {
    height: auto;
    display: flex;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.related-product-card {
    width: 100%;
    height: 100%;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 13px;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.related-product-card:hover {
    transform: translateY(-4px);

    border-color: #d9c477;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.08);
}


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

.related-image-link {
    display: block;
}


.related-image-box {
    width: 100%;
    height: 220px;

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

    overflow: hidden;

    background: #ffffff;
}


.related-product-image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 15px;

    display: block;

    transition:
        transform 0.3s ease;
}


.related-product-card:hover
.related-product-image {
    transform: scale(1.04);
}


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

.related-product-info {
    padding: 15px 15px 17px;
}


.related-brand {
    margin-bottom: 5px;

    color: #a47c00;

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.6px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.related-product-name {
    display: -webkit-box;

    min-height: 42px;

    overflow: hidden;

    color: #171717;

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

    line-height: 1.6;

    text-decoration: none;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.related-product-name:hover {
    color: #a47c00;
}


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

.related-price {
    margin-top: 10px;

    color: #171717;

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


/* =========================================================
   VIEW BUTTON
========================================================= */

.related-view-btn {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 12px;

    color: #171717;

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

    text-decoration: none;

    transition: 0.2s ease;
}


.related-view-btn:hover {
    color: #a47c00;
}


.related-view-btn i {
    transition: 0.2s ease;
}


.related-view-btn:hover i {
    transform: translateX(3px);
}


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

@media (max-width: 991.98px) {

    .related-products-section {
        margin-top: 50px;
        padding: 40px 0 55px;
    }

    .related-header h2 {
        font-size: 25px;
    }

    .related-image-box {
        height: 200px;
    }

}


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

@media (max-width: 767.98px) {

    .related-products-section {
        margin-top: 40px;
        padding: 35px 0 45px;
    }


    .related-header {
        align-items: center;
        margin-bottom: 20px;
    }


    .related-header h2 {
        font-size: 22px;
    }


    .related-header p {
        font-size: 12px;
    }


    .related-navigation button {
        width: 36px;
        height: 36px;

        font-size: 13px;
    }


    .related-image-box {
        height: 180px;
    }


    .related-product-info {
        padding: 12px;
    }


    .related-product-name {
        font-size: 12px;
    }


    .related-price {
        font-size: 15px;
    }

}


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

@media (max-width: 480px) {

    .related-products-section {
        padding-left: 12px;
        padding-right: 12px;
    }


    .related-header {
        gap: 10px;
    }


    .related-header h2 {
        font-size: 20px;
    }


    .related-header p {
        display: none;
    }


    .related-navigation button {
        width: 34px;
        height: 34px;
    }


    .related-image-box {
        height: 155px;
    }


    .related-product-info {
        padding: 10px;
    }


    .related-brand {
        font-size: 9px;
    }


    .related-product-name {
        font-size: 11px;
        min-height: 36px;
    }


    .related-price {
        font-size: 14px;
        margin-top: 7px;
    }


    .related-view-btn {
        margin-top: 9px;
        font-size: 10px;
    }

}

/* =========================================================
   PRODUCT RATING PREVIEW
========================================================= */

.product-rating-preview{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin:8px 0 12px;
}

.rating-stars{
    display:flex;
    align-items:center;
    gap:2px;
}

.rating-stars i{
    font-size:18px;
    color:#f9b233;
}

.rating-average{
    font-size:15px;
    font-weight:700;
    color:#212529;
}

.rating-count{
    font-size:14px;
    color:#6c757d;
}


/* MOBILE */

@media(max-width:576px){

    .rating-stars i{
        font-size:16px;
    }

    .rating-average{
        font-size:14px;
    }

    .rating-count{
        font-size:13px;
    }

}

/* =========================================================
   AMAZON STYLE CUSTOMER REVIEWS
========================================================= */

.customer-reviews-section{
    padding:30px 0 50px;
}


.reviews-main-card{
    background:#fff;
    border:1px solid #e7e7e7;
    border-radius:14px;
    padding:28px;
    box-shadow:0 3px 15px rgba(0,0,0,.04);
}


.reviews-header{
    margin-bottom:25px;
}


.reviews-eyebrow{
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    color:#777;
    margin-bottom:5px;
}


.reviews-title{
    font-size:26px;
    font-weight:700;
    color:#111;
    margin:0;
}


/* =========================================
   RATING SUMMARY
========================================= */

.rating-summary-box{
    border-right:1px solid #e5e5e5;
    min-height:220px;
    padding-right:30px;
}


.rating-big-number{
    font-size:38px;
    font-weight:700;
    color:#111;
    line-height:1;
}


.rating-big-number span{
    font-size:14px;
    font-weight:400;
    color:#666;
}


.rating-big-stars{
    display:flex;
    gap:4px;
    margin:12px 0;
}


.rating-big-stars i{
    font-size:23px;
    color:#f59e0b;
}


.rating-total-text{
    font-size:14px;
    color:#666;
    margin-bottom:20px;
}


/* =========================================
   WRITE REVIEW BUTTON
========================================= */

.write-review-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-height:44px;

    padding:10px 18px;

    background:#ffd814;

    color:#111;

    border:1px solid #fcd200;

    border-radius:8px;

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

    text-decoration:none;

    cursor:pointer;

    transition:.2s ease;
}


.write-review-btn:hover{
    background:#f7ca00;
    color:#111;
    transform:translateY(-1px);
}


.write-review-btn i{
    font-size:16px;
}


/* =========================================
   RATING BREAKDOWN
========================================= */

.rating-breakdown-box{
    padding:5px 0;
}


.rating-progress-row{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:14px;
}


.rating-star-label{
    width:45px;

    font-size:14px;

    color:#444;

    white-space:nowrap;
}


.rating-star-label i{
    color:#f59e0b;
    font-size:13px;
}


.rating-progress{
    flex:1;

    height:10px;

    background:#eeeeee;

    border-radius:20px;

    overflow:hidden;
}


.rating-progress-fill{
    height:100%;

    background:#f59e0b;

    border-radius:20px;

    min-width:0;

    transition:width .4s ease;
}


.rating-progress-count{
    width:30px;

    text-align:right;

    font-size:13px;

    color:#666;
}


/* =========================================
   SECURITY NOTE
========================================= */

.review-security-note{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #eeeeee;

    color:#777;

    font-size:13px;
}


.review-security-note i{

    font-size:18px;

    color:#198754;
}


/* =========================================
   REVIEW MODAL
========================================= */

.review-modal-content{

    border:none;

    border-radius:16px;

    overflow:hidden;
}


.review-modal-header{

    padding:20px 22px;

    border-bottom:1px solid #eeeeee;
}


.review-modal-header h5{

    font-size:20px;

    font-weight:700;

    color:#111;

    margin-bottom:3px;
}


.review-modal-header small{

    color:#777;

    font-size:13px;
}


.review-form-group{

    margin-bottom:22px;
}


.review-form-label{

    display:block;

    font-weight:600;

    color:#222;

    margin-bottom:9px;

    font-size:14px;
}


.review-input,
.review-textarea{

    border:1px solid #c7c7c7;

    border-radius:8px;

    padding:11px 13px;

    font-size:14px;

    box-shadow:none;
}


.review-input:focus,
.review-textarea:focus{

    border-color:#111;

    box-shadow:0 0 0 3px rgba(0,0,0,.07);
}


.review-textarea{

    resize:vertical;
}


/* =========================================
   STAR SELECTOR
========================================= */

.review-star-selector{

    display:flex;

    align-items:center;

    gap:5px;
}


.review-star{

    border:none;

    background:transparent;

    padding:2px;

    cursor:pointer;

    font-size:34px;

    line-height:1;

    color:#b8b8b8;

    transition:.15s ease;
}


.review-star:hover{

    transform:scale(1.08);
}


.review-star.active{

    color:#f59e0b;
}


.review-rating-error{

    display:none;

    margin-top:8px;

    color:#dc3545;

    font-size:12px;
}


/* =========================================
   USER INFO
========================================= */

.review-user-info{

    display:flex;

    gap:12px;

    align-items:flex-start;

    background:#f8f9fa;

    padding:13px;

    border-radius:8px;
}


.review-user-info i{

    font-size:20px;

    color:#198754;
}


.review-user-info strong{

    font-size:14px;

    color:#222;
}


.review-user-info small{

    color:#777;

    font-size:12px;
}
/* ========================================= 
   MODAL FOOTER 
========================================= */ 
 
.review-modal-footer{ 
 
    padding:15px 22px; 
 
    border-top:1px solid #eeeeee; 
 
    background:#fff;
} 
 
 
.submit-review-btn{ 
 
    display:inline-flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    gap:7px; 
 
    border:none; 
 
    background:#ffd814; 
 
    color:#111; 
 
    min-height:42px; 
 
    padding:9px 18px; 
 
    border-radius:8px; 
 
    font-weight:600; 
 
    font-size:14px; 
 
    cursor:pointer; 
 
    transition:.2s ease; 
} 
 
 
.submit-review-btn:hover{ 
 
    background:#f7ca00; 
} 
 
 
/* ========================================= 
   MOBILE VIEW 
========================================= */ 
 
@media(max-width:991px){ 
 
    .rating-summary-box{ 
 
        border-right:none; 
 
        border-bottom:1px solid #e5e5e5; 
 
        padding-right:0; 
 
        padding-bottom:25px; 
 
        margin-bottom:25px; 
 
        min-height:auto; 
    } 
 
} 
 
 
@media(max-width:576px){ 
 
    .customer-reviews-section{ 
 
        padding:20px 0 95px; 
    } 
 
 
    .reviews-main-card{ 
 
        border-radius:0; 
 
        border-left:none; 
 
        border-right:none; 
 
        padding:20px 15px; 
 
        box-shadow:none; 
    } 
 
 
    .reviews-title{ 
 
        font-size:22px; 
    } 
 
 
    .rating-big-number{ 
 
        font-size:34px; 
    } 
 
 
    .rating-big-stars i{ 
 
        font-size:21px; 
    } 
 
 
    .write-review-btn{ 
 
        width:100%; 
 
        min-height:48px; 
    } 
 
 
    .rating-progress-row{ 
 
        gap:8px; 
    } 
 
 
    .rating-star-label{ 
 
        width:42px; 
    } 
 
 
    .rating-progress-count{ 
 
        width:25px; 
    } 
 
 
    /* ========================================= 
       MOBILE MODAL 
       REVIEW MODAL ONLY
    ========================================= */ 
 
    #reviewModal .modal-dialog{ 
 
        position:fixed;

        left:0;

        right:0;

        bottom:0;

        width:100%; 

        max-width:100%;

        margin:0 !important;

        min-height:auto;

        height:auto;

        display:flex; 

        align-items:flex-end;

        pointer-events:auto;
    } 
 
 
    #reviewModal .review-modal-content{ 
 
        width:100%; 

        border-radius:20px 20px 0 0;

        border:none;

        margin:0;

        max-height:92vh;

        display:flex;

        flex-direction:column;

        overflow:hidden;
    } 
 
 
    #reviewModal .review-modal-header{ 
 
        padding:18px 18px 14px;

        flex-shrink:0;
    } 
 
 
    #reviewModal .modal-body{ 
 
        padding:18px;

        overflow-y:auto;

        flex:1;

        max-height:none;

        -webkit-overflow-scrolling:touch;
    } 
 
 
    #reviewModal .review-modal-footer{ 
 
        padding:14px 18px; 

        position:relative;

        bottom:auto;

        background:#fff;

        flex-shrink:0;

        border-top:1px solid #eeeeee;

        display:flex;

        gap:10px;
    } 
 
 
    #reviewModal .review-star{ 
 
        font-size:32px;

        cursor:pointer;

        margin-right:4px;
    } 
 
 
    #reviewModal .submit-review-btn{ 
 
        flex:1; 

        min-height:46px; 
    } 
 
} 
 
 
/* ========================================================= 
   AMAZON STYLE REVIEW MODAL 
========================================================= */ 
 
#reviewModal .modal-dialog{ 

    max-width:500px; 

    margin:1.75rem auto;
} 
 
 
#reviewModal .modal-content{ 

    border:none; 

    border-radius:18px; 

    overflow:hidden;

    width:100%;

    background:#fff;
} 
 
 
#reviewModal .modal-header{ 

    padding:24px 24px 18px;

    border-bottom:1px solid #eeeeee;
} 
 
 
#reviewModal .modal-body{ 

    padding:18px 24px 24px; 
} 
 
 
#reviewModal .modal-footer{ 

    padding:14px 24px;

    border-top:1px solid #eeeeee;

    background:#fff;
} 
 
 
/* ========================================================= 
   MOBILE REVIEW MODAL 
========================================================= */ 
 
@media (max-width:767px){ 
 
    /* =====================================
       MAIN MODAL
    ====================================== */
 
    #reviewModal{ 

        padding:0 !important;

        overflow:hidden !important;
    } 
 
 
    /* =====================================
       MODAL DIALOG
    ====================================== */
 
    #reviewModal .modal-dialog{ 
 
        position:fixed;

        left:0;

        right:0;

        bottom:0;

        top:auto;

        width:100%;

        max-width:100%;

        height:auto;

        max-height:94vh;

        min-height:auto;

        margin:0 !important;

        display:flex;

        align-items:flex-end;

        transform:none !important;
    } 
 
 
    /* =====================================
       MODAL CONTENT
    ====================================== */
 
    #reviewModal .modal-content{ 
 
        width:100%;

        height:auto;

        max-height:94vh;

        min-height:auto;

        border:none;

        border-radius:22px 22px 0 0;

        overflow:hidden;

        display:flex;

        flex-direction:column;

        box-shadow:0 -5px 30px rgba(0,0,0,.18);
    } 
 
 
    /* =====================================
       REVIEW MODAL CONTENT
       COMPATIBILITY
    ====================================== */

    #reviewModal .review-modal-content{

        width:100%;

        height:auto;

        max-height:94vh;

        border-radius:22px 22px 0 0;

        display:flex;

        flex-direction:column;

        overflow:hidden;
    }
 
 
    /* ===================================== 
       HEADER 
    ====================================== */ 
 
    #reviewModal .modal-header{ 
 
        padding:18px 18px 14px;

        flex-shrink:0;

        border-bottom:1px solid #eeeeee;
    } 
 
 
    #reviewModal .review-modal-header{

        padding:18px 18px 14px;

        flex-shrink:0;
    }


    /* =====================================
       MODAL TITLE
    ====================================== */
 
    #reviewModal .modal-title{ 
 
        font-size:19px; 
 
        font-weight:700;

        line-height:1.3;
    } 
 
 
    /* ===================================== 
       BODY SCROLL 
    ====================================== */ 
 
    #reviewModal .modal-body{ 
 
        padding:16px 18px 18px;

        overflow-y:auto;

        overflow-x:hidden;

        flex:1;

        max-height:none;

        -webkit-overflow-scrolling:touch;
    } 
 
 
    /* ===================================== 
       FOOTER 
    ====================================== */ 
 
    #reviewModal .modal-footer{ 
 
        padding:12px 18px 14px;

        display:flex;

        align-items:center;

        gap:10px;

        background:#fff;

        flex-shrink:0;

        border-top:1px solid #eeeeee;
    } 
 
 
    #reviewModal .review-modal-footer{

        padding:12px 18px 14px;

        display:flex;

        align-items:center;

        gap:10px;

        background:#fff;

        flex-shrink:0;

        border-top:1px solid #eeeeee;
    }
 
 
    #reviewModal .modal-footer button{ 
 
        flex:1;

        min-height:48px;

        font-size:15px;
    } 
 
 
    /* ===================================== 
       STAR RATING 
    ====================================== */ 
 
    #reviewModal .review-star{ 
 
        font-size:30px;

        margin-right:3px;

        cursor:pointer;

        line-height:1;

        display:inline-flex;

        align-items:center;

        justify-content:center;
    } 
 
 
    /* ===================================== 
       INPUTS 
    ====================================== */ 
 
    #reviewModal input, 
 
    #reviewModal textarea{ 
 
        font-size:16px !important; 

        width:100%;

        max-width:100%;
    } 
 
 
    #reviewModal textarea{

        min-height:90px;

        resize:vertical;
    }


    /* ===================================== 
       CLOSE BUTTON 
    ====================================== */ 
 
    #reviewModal .btn-close{ 
 
        width:38px; 

        height:38px;

        flex-shrink:0;
    } 


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

    #reviewModal .submit-review-btn{

        flex:1;

        min-height:48px;

        display:flex;

        align-items:center;

        justify-content:center;
    }


    /* =====================================
       PREVENT BACKGROUND CONTENT ISSUE
    ====================================== */

    body.modal-open{

        overflow:hidden !important;

        padding-right:0 !important;
    }
 
} 
 
 
/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:380px){

    #reviewModal .modal-content{

        max-height:96vh;
    }


    #reviewModal .review-star{

        font-size:27px;

        margin-right:2px;
    }


    #reviewModal .modal-header{

        padding:15px 15px 12px;
    }


    #reviewModal .modal-body{

        padding:14px 15px;
    }


    #reviewModal .modal-footer{

        padding:10px 15px 12px;
    }

}

/* =========================================================
   FINAL MOBILE REVIEW MODAL FIX
   ADD THIS AT THE VERY END OF YOUR CSS
========================================================= */

@media (max-width: 767px) {

    /* Bootstrap Modal Full Screen Area */

    #reviewModal.modal{

        padding:0 !important;

        overflow:hidden !important;
    }


    /* Dialog */

    #reviewModal .modal-dialog{

        position:fixed !important;

        left:0 !important;

        right:0 !important;

        bottom:0 !important;

        top:auto !important;

        width:100% !important;

        max-width:100% !important;

        min-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 !important;

        padding:0 !important;

        display:block !important;

        transform:none !important;
    }


    /* Content */

    #reviewModal .modal-content,

    #reviewModal .review-modal-content{

        width:100% !important;

        min-width:100% !important;

        max-width:100% !important;

        height:auto !important;

        max-height:90vh !important;

        min-height:0 !important;

        margin:0 !important;

        border:none !important;

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

        display:flex !important;

        flex-direction:column !important;

        overflow:hidden !important;

        background:#ffffff !important;

        box-shadow:0 -8px 35px rgba(0,0,0,.20) !important;
    }


    /* Header */

    #reviewModal .modal-header,

    #reviewModal .review-modal-header{

        width:100% !important;

        padding:18px !important;

        flex-shrink:0 !important;
    }


    /* Body */

    #reviewModal .modal-body{

        width:100% !important;

        padding:16px 18px !important;

        flex:1 1 auto !important;

        overflow-y:auto !important;

        overflow-x:hidden !important;

        max-height:60vh !important;

        -webkit-overflow-scrolling:touch;
    }


    /* Footer */

    #reviewModal .modal-footer,

    #reviewModal .review-modal-footer{

        width:100% !important;

        padding:14px 18px !important;

        margin:0 !important;

        flex-shrink:0 !important;

        display:flex !important;

        align-items:center !important;

        gap:10px !important;

        background:#ffffff !important;

        border-top:1px solid #eeeeee !important;
    }


    /* Footer Buttons */

    #reviewModal .modal-footer button,

    #reviewModal .review-modal-footer button{

        flex:1 !important;

        min-height:46px !important;
    }


    /* Stars */

    #reviewModal .review-star{

        font-size:30px !important;

        margin-right:2px !important;

        line-height:1 !important;
    }


    /* Inputs */

    #reviewModal input,

    #reviewModal textarea{

        width:100% !important;

        max-width:100% !important;

        font-size:16px !important;
    }


    /* Close Button */

    #reviewModal .btn-close{

        flex-shrink:0 !important;
    }

}


/* =========================================================
   SMALL MOBILE FIX
========================================================= */

@media (max-width:380px){

    #reviewModal .modal-header,

    #reviewModal .review-modal-header{

        padding:15px !important;
    }


    #reviewModal .modal-body{

        padding:14px 15px !important;
    }


    #reviewModal .modal-footer,

    #reviewModal .review-modal-footer{

        padding:12px 15px !important;
    }


    #reviewModal .review-star{

        font-size:27px !important;
    }

}

/* =========================================================
   CUSTOMER REVIEW LIST
========================================================= */

.customer-review-list{

    margin-top:30px;

}


/* =========================================================
   REVIEW ITEM
========================================================= */

.customer-review-item{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:12px;

    padding:22px;

    margin-bottom:18px;

    transition:.25s ease;

}


.customer-review-item:hover{

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

}


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

.customer-review-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:16px;

}


/* =========================================================
   USER INFO
========================================================= */

.review-user-info{

    display:flex;

    align-items:center;

    gap:12px;

}


.review-user-avatar{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#232f3e;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:17px;

    font-weight:700;

    flex-shrink:0;

}


.review-user-name{

    font-size:15px;

    font-weight:600;

    color:#222;

}


.verified-customer{

    margin-top:3px;

    font-size:12px;

    color:#198754;

}


.verified-customer i{

    margin-right:4px;

}


/* =========================================================
   REVIEW DATE
========================================================= */

.review-date{

    font-size:13px;

    color:#777;

    white-space:nowrap;

}


/* =========================================================
   REVIEW STARS
========================================================= */

.customer-review-stars{

    display:flex;

    align-items:center;

    gap:4px;

    margin-bottom:12px;

}


.customer-review-stars i{

    color:#f59e0b;

    font-size:17px;

}


.review-rating-number{

    margin-left:7px;

    font-size:14px;

    font-weight:600;

    color:#333;

}


/* =========================================================
   REVIEW TITLE
========================================================= */

.customer-review-title{

    font-size:17px;

    font-weight:700;

    color:#222;

    margin:0 0 8px;

}


/* =========================================================
   REVIEW TEXT
========================================================= */

.customer-review-text{

    margin:0;

    color:#555;

    font-size:15px;

    line-height:1.7;

}


/* =========================================================
   NO REVIEWS
========================================================= */

.no-customer-reviews{

    text-align:center;

    padding:40px 20px;

    background:#fafafa;

    border:1px dashed #d5d5d5;

    border-radius:12px;

}


.no-review-icon{

    font-size:35px;

    color:#999;

    margin-bottom:10px;

}


.no-customer-reviews h4{

    font-size:18px;

    font-weight:600;

    color:#333;

    margin-bottom:7px;

}


.no-customer-reviews p{

    margin:0;

    color:#777;

    font-size:14px;

}


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

@media(max-width:576px){

    .customer-review-list{

        margin-top:22px;

    }


    .customer-review-item{

        padding:16px;

        border-radius:10px;

    }


    .customer-review-header{

        align-items:flex-start;

        flex-direction:column;

        gap:10px;

    }


    .review-date{

        margin-left:56px;

        margin-top:-8px;

    }


    .review-user-avatar{

        width:40px;

        height:40px;

        font-size:15px;

    }


    .customer-review-stars i{

        font-size:16px;

    }


    .customer-review-title{

        font-size:16px;

    }


    .customer-review-text{

        font-size:14px;

        line-height:1.6;

    }

}