.topbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    z-index: 999;
    background: linear-gradient(90deg, #fffaf2, #ffffff);
    border-bottom: 1px solid rgba(184,134,11,.25);
    box-shadow: 0 6px 20px rgba(59,35,95,.12);
}

    /* BRAND TEXT */
    .topbar h1 {
        color: #3b235f;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .topbar span {
        color: #b8860b;
        font-size: 13px;
    }

/* MENU BUTTON */
.icon-btn {
    background: linear-gradient(135deg, #3b235f, #6b3fa0) !important;
    color: #ffd86b !important;
    border: none;
    padding: 6px 10px;
    font-size: 18px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(59,35,95,.25);
}

/* CART ICON */
.topbar .bi-cart-fill {
    color: #3b235f !important;
    transition: 0.3s;
}

    .topbar .bi-cart-fill:hover {
        color: #b8860b !important;
        transform: scale(1.1);
    }

/* CART COUNT BADGE */
.topbar span[ng-show] {
    background: linear-gradient(90deg, #ff4d4d, #ff0000) !important;
    font-weight: 700;
}

/* PROFILE ICON */
.topbar .bi-person-circle {
    color: #3b235f !important;
}

/* LOGIN BUTTON */
.topbar .btn {
    background: linear-gradient(90deg, #b8860b, #ffd86b);
    color: #2b1748 !important;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 14px;
    border: none;
    box-shadow: 0 6px 14px rgba(184,134,11,.3);
}

/* MOBILE */
@media (max-width: 576px) {

    .topbar {
        height: 60px;
        padding: 0 12px;
    }

        .topbar h1 {
            font-size: 1.2rem !important;
        }

        .topbar span {
            font-size: 11px;
        }

    .icon-btn {
        font-size: 16px;
        padding: 5px 8px;
    }

    .topbar .bi-cart-fill {
        font-size: 1.4rem !important;
    }

    .topbar .bi-person-circle {
        font-size: 1.5rem !important;
    }
}




/* SIDEBAR */
.sidebar {
    position: fixed;
    top: 70px;
    left: -280px;
    width: 280px;
    height: 100%;
    background: #fff;
    padding: 22px;
    transition: left .4s cubic-bezier(.77,0,.18,1);
    box-shadow: 10px 0 40px rgba(0,0,0,.08);
    z-index: 1000;
    overflow-y: auto;
}

    .sidebar.active {
        left: 0;
    }

    /* SCROLLBAR (cleaner + subtle premium) */
    .sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #d4af37, #b8962e);
        border-radius: 10px;
    }

    /* SECTION HEADINGS */
    .sidebar h6 {
        font-weight: 600;
        margin-top: 22px;
        margin-bottom: 12px;
        font-size: 13px;
        letter-spacing: 1px;
        color: #999;
        text-transform: uppercase;
    }

    /* LINKS */
    .sidebar a {
        display: block;
        padding: 10px 12px;
        margin: 4px 0;
        text-decoration: none;
        color: #555;
        font-size: 14px;
        border-radius: 8px;
        position: relative;
        transition: all 0.25s ease;
    }

        /* 🔥 PREMIUM HOVER EFFECT */
        .sidebar a::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 3px;
            height: 0%;
            background: linear-gradient(180deg, #d4af37, #ffd86b);
            border-radius: 4px;
            transition: 0.3s ease;
            transform: translateY(-50%);
        }

        .sidebar a:hover {
            color: #000;
            background: linear-gradient(90deg, rgba(212,175,55,0.12), transparent);
            transform: translateX(6px);
            box-shadow: inset 0 0 12px rgba(212,175,55,0.08);
        }

            .sidebar a:hover::before {
                height: 70%;
            }

        /* ACTIVE LINK (optional but recommended) */
        .sidebar a.active {
            color: #000;
            background: rgba(212,175,55,0.15);
        }

            .sidebar a.active::before {
                height: 70%;
            }

/* OVERLAY */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.3);
    backdrop-filter: blur(4px);
    display: none;
    z-index: 900;
}

    .overlay.show {
        display: block;
    }