/* =========================================================
       AMANDIKA4 PUBLIC SHOP THEME
       Vibrant Purple + Magenta + Cyan
    ========================================================== */

    :root {

        /* Main Brand */
        --brand: #7c3aed;
        --brand-dark: #6d28d9;
        --brand-light: #a855f7;

        /* Secondary */
        --secondary: #db2777;
        --secondary-dark: #be185d;
        --secondary-light: #ec4899;

        /* Accent */
        --accent: #06b6d4;
        --accent-dark: #0891b2;
        --accent-light: #22d3ee;

        /* Status */
        --green: #10b981;
        --green-dark: #059669;
        --warning: #f59e0b;
        --danger: #ef4444;

        /* Background */
        --bg: #f8f7ff;
        --surface: #ffffff;
        --surface-soft: #faf5ff;

        /* Text */
        --text: #1e1b4b;
        --text-secondary: #4c1d95;
        --muted: #6b7280;

        /* Border */
        --border: #ede9fe;
        --border-strong: #ddd6fe;

        /* Shadows */
        --shadow-sm: 0 2px 8px rgba(124, 58, 237, .08);
        --shadow-md: 0 8px 24px rgba(124, 58, 237, .13);
        --shadow-lg: 0 16px 35px rgba(124, 58, 237, .18);

    }


    * {
        box-sizing: border-box;
    }


    html {
        scroll-behavior: smooth;
    }


    body {

        margin: 0;

        font-family: 'Inter', sans-serif;

        background:
            radial-gradient(
                circle at top left,
                rgba(168, 85, 247, .08),
                transparent 28%
            ),
            radial-gradient(
                circle at top right,
                rgba(6, 182, 212, .08),
                transparent 24%
            ),
            var(--bg);

        color: var(--text);

    }


    a {
        transition: .2s ease;
    }


    /* =========================================================
       TOP BAR
    ========================================================== */

    .topbar {

        background: linear-gradient(
            90deg,
            #5b21b6 0%,
            #7c3aed 45%,
            #be185d 100%
        );

        color: #ffffff;

        font-size: 13px;

        padding: 8px 0;

        border-bottom: 1px solid rgba(255, 255, 255, .14);

    }


    .topbar-content {

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 15px;

        flex-wrap: wrap;

    }


    .topbar a {

        color: #ffffff;

        text-decoration: none;

    }


    .topbar a:hover {

        color: #cffafe;

    }


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

    .shop-header {

        background: linear-gradient(
            135deg,
            #7c3aed 0%,
            #9333ea 42%,
            #db2777 100%
        );

        padding: 16px 0;

        color: #ffffff;

        position: sticky;

        top: 0;

        z-index: 1000;

        box-shadow: 0 7px 22px rgba(124, 58, 237, .28);

    }


    .shop-header::after {

        content: '';

        position: absolute;

        inset: 0;

        pointer-events: none;

        background:
            radial-gradient(
                circle at 15% 20%,
                rgba(255, 255, 255, .15),
                transparent 24%
            ),
            radial-gradient(
                circle at 85% 0%,
                rgba(34, 211, 238, .18),
                transparent 26%
            );

    }


    .shop-header > .container {

        position: relative;

        z-index: 2;

    }


    .header-main {

        display: flex;

        align-items: center;

        gap: 18px;

    }


    /* =========================================================
       LOGO
    ========================================================== */

    .shop-logo {

        display: flex;

        align-items: center;

        flex-shrink: 0;

        gap: 10px;

        color: #ffffff;

        text-decoration: none;

    }


    .shop-logo:hover {

        color: #ffffff;

        text-decoration: none;

        transform: translateY(-1px);

    }


    .logo-circle {

        width: 48px;

        height: 48px;

        background: #ffffff;

        border-radius: 14px;

        padding: 4px;

        object-fit: contain;

        border: 2px solid rgba(255, 255, 255, .65);

        box-shadow: 0 5px 15px rgba(76, 29, 149, .28);

    }


    .logo-text h1 {

        font-size: 23px;

        font-weight: 900;

        line-height: 1;

        margin: 0;

        letter-spacing: -.4px;

    }


    .logo-text small {

        font-size: 12px;

        opacity: .92;

    }


/* =========================================================
   SEARCH + LIVE SEARCH
========================================================= */

.search-box {
    position: relative;
    flex: 1;
    max-width: 720px;
}

.search-input {
    width: 100%;
    height: 46px;
    padding-left: 17px;
    padding-right: 72px;
    color: var(--text);
    background: #ffffff;
    border: 2px solid rgba(255, 255, 255, .45);
    border-radius: 12px;
    font-size: 14px;
    transition: .2s ease;
    box-shadow: 0 3px 12px rgba(76, 29, 149, .14);
}

.search-input::placeholder {
    color: #9ca3af;
}

.search-input:focus {
    border-color: var(--accent-light);
    outline: none;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .20);
}

.search-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 60px;
    height: 38px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--accent),
        var(--accent-dark)
    );
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: .2s ease;
    box-shadow: 0 3px 10px rgba(6, 182, 212, .26);
}

.search-btn:hover {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--accent-light),
        var(--accent-dark)
    );
    transform: translateY(-1px);
}

/* =========================================================
   LIVE SEARCH RESULTS
========================================================= */

.live-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 1080;
    display: none;
    max-height: 430px;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--text);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(30, 27, 75, .22);
}

.live-search-results.show {
    display: block;
}

.live-search-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 13px;
    color: var(--muted);
    background: #faf5ff;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.live-search-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 13px;
    color: var(--text);
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: .2s ease;
}

.live-search-item:last-of-type {
    border-bottom: 0;
}

.live-search-item:hover,
.live-search-item:focus {
    color: var(--brand);
    background: #faf5ff;
}

.live-search-image {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    padding: 4px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.live-search-content {
    flex: 1;
    min-width: 0;
}

.live-search-name {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-model {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--muted);
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-price {
    display: block;
    margin-top: 4px;
    color: var(--secondary);
    font-size: 11px;
    font-weight: 900;
}

.live-search-arrow {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: 10px;
}

.live-search-empty,
.live-search-loading {
    padding: 22px 15px;
    color: var(--muted);
    background: #ffffff;
    text-align: center;
    font-size: 10.5px;
}

.live-search-loading i {
    color: var(--brand);
}

.live-search-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: block;
    padding: 11px 13px;
    color: var(--brand);
    background: #faf5ff;
    border-top: 1px solid var(--border);
    text-align: center;
    text-decoration: none;
    font-size: 10px;
    font-weight: 900;
}

.live-search-footer:hover {
    color: var(--secondary);
    background: #fdf2f8;
}

/* =========================================================
   LIVE SEARCH SCROLLBAR
========================================================= */

.live-search-results::-webkit-scrollbar {
    width: 7px;
}

.live-search-results::-webkit-scrollbar-track {
    background: #faf5ff;
}

.live-search-results::-webkit-scrollbar-thumb {
    background: #c4b5fd;
    border-radius: 10px;
}

.live-search-results::-webkit-scrollbar-thumb:hover {
    background: #a78bfa;
}

/* =========================================================
   RESPONSIVE SEARCH
========================================================= */

@media (max-width: 767.98px) {
    .search-box {
        max-width: none;
    }

    .live-search-results {
        right: -55px;
        left: -55px;
        width: auto;
        max-height: 390px;
    }
}

@media (max-width: 575.98px) {
    .search-input {
        height: 42px;
        padding-left: 13px;
        padding-right: 55px;
        font-size: 12px;
    }

    .search-btn {
        top: 4px;
        right: 4px;
        width: 47px;
        height: 34px;
    }

    .live-search-results {
        right: -48px;
        left: -48px;
        max-height: 360px;
        border-radius: 12px;
    }

    .live-search-item {
        gap: 9px;
        padding: 10px;
    }

    .live-search-image {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .live-search-name {
        font-size: 10.5px;
    }
}

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

    .header-actions {

        display: flex;

        align-items: center;

        gap: 8px;

        flex-shrink: 0;

    }


    .header-action {

        min-width: 62px;

        color: #ffffff;

        text-decoration: none;

        text-align: center;

        padding: 7px 8px;

        border-radius: 10px;

        transition: .2s ease;

        position: relative;

    }


    .header-action:hover {

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

        color: #ffffff;

        text-decoration: none;

        transform: translateY(-2px);

    }


    .header-action i {

        display: block;

        font-size: 21px;

        margin-bottom: 3px;

    }


    .header-action-label {

        display: block;

        font-size: 10px;

        font-weight: 800;

        white-space: nowrap;

    }


/* =========================================================
   BUYER ACCOUNT DROPDOWN
========================================================= */

.account-dropdown {
    position: relative;
}

.account-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    max-width: 175px;
    padding: 7px 10px;
    color: #ffffff;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    transition: .2s ease;
}

.account-dropdown-toggle:hover,
.account-dropdown-toggle:focus,
.account-dropdown-toggle.show {
    color: #ffffff;
    background: rgba(255, 255, 255, .16);
    outline: none;
}

.account-dropdown-toggle > i {
    font-size: 21px;
}

.account-dropdown-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-dropdown-menu {
    width: 280px;
    padding: 8px;
    margin-top: 10px !important;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}

.account-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.account-avatar {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--brand),
        var(--secondary)
    );
    border-radius: 50%;
}

.account-header-info {
    min-width: 0;
}

.account-header-info strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-header-info small {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--muted);
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    color: var(--text);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
}

.account-dropdown-menu .dropdown-item i {
    display: inline-flex;
    flex: 0 0 22px;
    justify-content: center;
    color: var(--brand);
}

.account-dropdown-menu .dropdown-item:hover,
.account-dropdown-menu .dropdown-item:focus {
    color: var(--brand-dark);
    background: var(--surface-soft);
}

.account-dropdown-menu .account-logout {
    width: 100%;
    color: var(--danger);
    background: transparent;
    border: 0;
    text-align: left;
}

.account-dropdown-menu .account-logout i {
    color: var(--danger);
}

.account-dropdown-menu .account-logout:hover {
    color: #991b1b;
    background: #fef2f2;
}

@media (max-width: 767.98px) {
    .account-dropdown-name {
        display: none;
    }

    .account-dropdown-toggle {
        min-width: 45px;
        padding: 5px;
    }

    .account-dropdown-menu {
        width: min(280px, calc(100vw - 24px));
    }
}

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

    .cart-icon-wrapper {

        display: inline-block;

        position: relative;

    }


    .cart-count {

        position: absolute;

        top: -9px;

        right: -12px;

        min-width: 20px;

        height: 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        background: #fbbf24;

        color: #4c1d95;

        border: 2px solid #ffffff;

        border-radius: 50%;

        font-size: 10px;

        font-weight: 900;

        padding: 0 4px;

        box-shadow: 0 3px 8px rgba(245, 158, 11, .35);

    }


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

    .mobile-nav {

        display: none;

        background: #ffffff;

        border-bottom: 1px solid var(--border);

        box-shadow: var(--shadow-sm);

    }


    .mobile-nav-inner {

        display: flex;

        align-items: center;

        justify-content: space-around;

    }


    .mobile-nav-link {

        flex: 1;

        color: var(--muted);

        text-decoration: none;

        text-align: center;

        padding: 10px 5px;

        font-size: 11px;

        font-weight: 800;

        position: relative;

    }


    .mobile-nav-link i {

        display: block;

        font-size: 17px;

        margin-bottom: 3px;

    }


    .mobile-nav-link:hover,
    .mobile-nav-link.active {

        color: var(--brand);

        background: #faf5ff;

    }


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

    .info-bar {

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

        padding: 14px 16px;

        border-radius: 13px;

        margin-bottom: 18px;

        display: flex;

        gap: 20px;

        flex-wrap: wrap;

        border: 1px solid var(--border);

        box-shadow: var(--shadow-sm);

        font-size: 13px;

        font-weight: 700;

        color: var(--text-secondary);

    }


    .info-bar i {

        color: var(--accent);

        margin-right: 4px;

    }


/* ==========================================================
   PREMIUM HERO
========================================================== */

.hero-shop{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    margin-bottom:24px;
    padding:60px;
    color:#fff;

    background:
    radial-gradient(circle at top right,
    rgba(255,255,255,.18),
    transparent 30%),

    linear-gradient(
        135deg,
        #5b21b6 0%,
        #7c3aed 40%,
        #9333ea 100%
    );

    box-shadow:
        0 20px 45px rgba(91,33,182,.22);
}

.hero-shop::before{

    content:'';

    position:absolute;

    width:340px;
    height:340px;

    right:-100px;
    top:-100px;

    border-radius:50%;

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

.hero-shop::after{

    content:'';

    position:absolute;

    width:240px;
    height:240px;

    left:-60px;
    bottom:-80px;

    border-radius:50%;

    background:
    rgba(255,255,255,.06);
}

.hero-title{

    font-size:46px;

    font-weight:800;

    line-height:1.15;
}

.hero-subtitle{

    opacity:.95;

    font-size:17px;

    margin:18px 0 28px;
}

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;
}

.hero-stat{

    display:flex;

    gap:18px;

    margin-top:35px;

    flex-wrap:wrap;
}

.hero-stat-box{

    min-width:120px;

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

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:16px;

    padding:16px;
}

.hero-stat-box h4{

    font-size:26px;

    margin:0;

    font-weight:800;
}

.hero-stat-box span{

    font-size:13px;

    opacity:.9;
}

.hero-features{

    display:grid;

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

    gap:15px;
}

.hero-feature{

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

    border-radius:16px;

    padding:18px;

    backdrop-filter:blur(10px);
}

.hero-feature i{

    font-size:26px;

    margin-bottom:12px;
}

.hero-feature h6{

    margin-bottom:6px;

    font-weight:700;
}

@media(max-width:992px){

.hero-shop{

padding:35px;

}

.hero-title{

font-size:34px;

}

.hero-features{

grid-template-columns:1fr;

}

}

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

    .search-result-box {

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

        border: 1px solid var(--border);

        border-radius: 13px;

        padding: 14px 17px;

        margin-bottom: 18px;

        box-shadow: var(--shadow-sm);

    }


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

    .product-card {

        background: #ffffff;

        border: 1px solid var(--border);

        height: 100%;

        text-decoration: none;

        color: inherit;

        display: block;

        transition: .23s ease;

        border-radius: 14px;

        overflow: hidden;

        box-shadow: var(--shadow-sm);

    }


    .product-card:hover {

        transform: translateY(-6px);

        border-color: #c4b5fd;

        box-shadow: var(--shadow-lg);

        color: inherit;

        text-decoration: none;

    }


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

    .img-wrapper {

        position: relative;

        width: 100%;

        padding-top: 100%;

        background:
            linear-gradient(
                180deg,
                #ffffff,
                #fafafa
            );

        border-bottom: 1px solid var(--border);

        overflow: hidden;

    }


    .img-wrapper img {

        position: absolute;

        inset: 0;

        width: 100%;

        height: 100%;

        object-fit: contain;

        padding: 10px;

        transition: transform .3s ease;

    }


    .product-card:hover .img-wrapper img {

        transform: scale(1.055);

    }


    /* =========================================================
       PRODUCT BADGES
    ========================================================== */

    .ready-label {

        position: absolute;

        top: 9px;

        left: 0;

        background: linear-gradient(
            135deg,
            var(--green),
            var(--green-dark)
        );

        color: #ffffff;

        font-size: 10px;

        padding: 5px 9px;

        font-weight: 900;

        border-radius: 0 7px 7px 0;

        box-shadow: 0 4px 10px rgba(16, 185, 129, .28);

    }


    .stock-badge {

        position: absolute;

        right: 8px;

        bottom: 8px;

        background: linear-gradient(
            135deg,
            rgba(76, 29, 149, .92),
            rgba(124, 58, 237, .92)
        );

        color: #ffffff;

        font-size: 11px;

        padding: 5px 8px;

        border-radius: 7px;

        backdrop-filter: blur(5px);

        box-shadow: 0 3px 9px rgba(76, 29, 149, .25);

    }


    /* =========================================================
       PRODUCT INFORMATION
    ========================================================== */

    .product-info {

        padding: 12px;

    }


    .product-name {

        font-size: 13px;

        line-height: 18px;

        height: 36px;

        overflow: hidden;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        color: var(--text);

        font-weight: 700;

    }


    .price {

        color: var(--secondary);

        font-size: 19px;

        font-weight: 900;

        margin-top: 9px;

        letter-spacing: -.3px;

    }


    .price-currency {

        font-size: 12px;

        margin-right: 2px;

        color: var(--secondary-dark);

    }


    .meta {

        font-size: 11px;

        color: var(--muted);

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 8px;

        margin-top: 8px;

    }


    .meta span {

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }


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

    .view-btn {

        width: 100%;

        margin-top: 10px;

        border: 1px solid #d8b4fe;

        border-radius: 9px;

        color: var(--brand);

        background: #faf5ff;

        font-weight: 800;

        font-size: 12px;

        padding: 8px 0;

        transition: .2s ease;

    }


    .product-card:hover .view-btn {

        background: linear-gradient(
            135deg,
            var(--brand),
            var(--secondary)
        );

        border-color: transparent;

        color: #ffffff;

        box-shadow: 0 5px 14px rgba(124, 58, 237, .24);

    }


    /* =========================================================
       GENERAL PUBLIC SHOP BUTTONS
    ========================================================== */

    .btn-brand,
    .btn-primary-shop {

        background: linear-gradient(
            135deg,
            var(--brand),
            var(--secondary)
        );

        border-color: transparent;

        color: #ffffff;

        font-weight: 800;

        box-shadow: 0 4px 12px rgba(124, 58, 237, .23);

    }


    .btn-brand:hover,
    .btn-primary-shop:hover {

        background: linear-gradient(
            135deg,
            var(--brand-dark),
            var(--secondary-dark)
        );

        border-color: transparent;

        color: #ffffff;

        transform: translateY(-1px);

    }


    .btn-accent {

        background: linear-gradient(
            135deg,
            var(--accent),
            var(--accent-dark)
        );

        border-color: transparent;

        color: #ffffff;

        font-weight: 800;

    }


    .btn-accent:hover {

        background: linear-gradient(
            135deg,
            var(--accent-light),
            var(--accent-dark)
        );

        border-color: transparent;

        color: #ffffff;

    }


    .btn-success-shop {

        background: linear-gradient(
            135deg,
            var(--green),
            var(--green-dark)
        );

        border-color: transparent;

        color: #ffffff;

        font-weight: 800;

    }


    .btn-success-shop:hover {

        color: #ffffff;

        background: var(--green-dark);

    }


    /* =========================================================
       FORM ELEMENTS
    ========================================================== */

    .form-control {

        border-color: var(--border-strong);

        border-radius: 9px;

    }


    .form-control:focus {

        border-color: var(--brand-light);

        box-shadow: 0 0 0 .2rem rgba(168, 85, 247, .15);

    }


    .form-select {

        border-color: var(--border-strong);

        border-radius: 9px;

    }


    .form-select:focus {

        border-color: var(--brand-light);

        box-shadow: 0 0 0 .2rem rgba(168, 85, 247, .15);

    }


    /* =========================================================
       ALERTS
    ========================================================== */

    .alert-info {

        color: #155e75;

        background: #ecfeff;

        border-color: #a5f3fc;

    }


    .alert-success {

        color: #065f46;

        background: #ecfdf5;

        border-color: #a7f3d0;

    }


    .alert-warning {

        color: #92400e;

        background: #fffbeb;

        border-color: #fde68a;

    }


    /* =========================================================
       EMPTY STATE
    ========================================================== */

    .empty-state {

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

        border: 1px solid var(--border);

        border-radius: 15px;

        padding: 60px 20px;

        text-align: center;

        box-shadow: var(--shadow-sm);

    }


    .empty-state i {

        color: #c4b5fd;

    }


    /* =========================================================
       PAGINATION
    ========================================================== */

    .pagination .page-link {

        color: var(--brand);

        border-color: var(--border);

    }


    .pagination .page-item.active .page-link {

        background: linear-gradient(
            135deg,
            var(--brand),
            var(--secondary)
        );

        border-color: transparent;

        color: #ffffff;

    }


    .pagination .page-link:hover {

        background: #faf5ff;

        color: var(--brand-dark);

    }


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

    ::-webkit-scrollbar {

        width: 10px;

        height: 10px;

    }


    ::-webkit-scrollbar-track {

        background: #f3e8ff;

    }


    ::-webkit-scrollbar-thumb {

        background: linear-gradient(
            180deg,
            var(--brand-light),
            var(--secondary-light)
        );

        border-radius: 20px;

        border: 2px solid #f3e8ff;

    }


    ::-webkit-scrollbar-thumb:hover {

        background: linear-gradient(
            180deg,
            var(--brand),
            var(--secondary)
        );

    }


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

    @media (max-width: 991.98px) {

        .header-main {

            flex-wrap: wrap;

        }


        .shop-logo {

            order: 1;

        }


        .header-actions {

            order: 2;

            margin-left: auto;

        }


        .search-box {

            order: 3;

            width: 100%;

            max-width: none;

            flex-basis: 100%;

        }

    }


    @media (max-width: 767.98px) {

        .topbar {

            font-size: 11px;

        }


        .shop-header {

            position: relative;

            padding: 12px 0;

        }


        .header-main {

            gap: 10px;

        }


        .logo-circle {

            width: 42px;

            height: 42px;

            border-radius: 11px;

        }


        .logo-text {

            display: none;

        }


        .desktop-track {

            display: none;

        }


        .header-action {

            min-width: 45px;

            padding: 5px;

        }


        .header-action-label {

            display: none;

        }


        .mobile-nav {

            display: block;

        }


        .info-bar {

            gap: 10px;

            font-size: 11px;

        }


        .info-bar > div {

            width: calc(50% - 5px);

        }

    }


    @media (max-width: 575.98px) {

        main.container {

            padding-left: 8px;

            padding-right: 8px;

        }


        .product-info {

            padding: 10px;

        }


        .product-name {

            font-size: 12px;

        }


        .price {

            font-size: 17px;

        }


        .meta {

            font-size: 10px;

        }


        .product-card {

            border-radius: 11px;

        }


        .search-input {

            height: 44px;

            border-radius: 10px;

        }


        .search-btn {

            height: 36px;

            border-radius: 8px;

        }

    }


.notification-menu{

    width:360px;

    border-radius:15px;

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

}

.notification-header{

    padding:15px;

    border-bottom:1px solid #eee;

}

.notification-menu .dropdown-item{

    padding:14px;

    white-space:normal;

}

.notification-menu .dropdown-item:hover{

    background:#faf5ff;

}

.notification-toggle{

    border:0;

    background:transparent;

}

/* =========================================================
   LIVE NOTIFICATION DROPDOWN
========================================================= */

.notification-dropdown {
    position: relative;
}

.notification-toggle {
    border: 0;
    background: transparent;
}

.notification-menu {
    width: 370px;
    max-height: 520px;
    padding: 0;
    margin-top: 10px !important;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
}

.notification-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(
        135deg,
        #ffffff,
        #faf5ff
    );
}

.notification-menu-header strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.notification-menu-header small {
    font-size: 9.5px;
}

.notification-mark-all {
    padding: 5px 8px;
    color: var(--brand);
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 9.5px;
    font-weight: 800;
}

.notification-mark-all:hover {
    background: #f3e8ff;
}

#notificationDropdownList {
    max-height: 365px;
    overflow-y: auto;
}

.notification-dropdown-form {
    margin: 0;
}

.notification-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    color: inherit;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    transition: .2s ease;
}

.notification-dropdown-item:hover {
    background: #faf5ff;
}

.notification-dropdown-item.unread {
    background: #fffdf3;
}

.notification-dropdown-icon {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 50%;
}

.notification-dropdown-content {
    display: block;
    flex: 1;
    min-width: 0;
}

.notification-dropdown-content strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 10.5px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-dropdown-content small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.notification-dropdown-content span {
    display: block;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 8.5px;
}

.notification-dropdown-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    background: var(--warning);
    border-radius: 50%;
}

.notification-dropdown-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 35px 15px;
    color: var(--muted);
    font-size: 10px;
}

.notification-dropdown-empty i {
    color: #c4b5fd;
    font-size: 28px;
}

.notification-menu-footer {
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    background: #ffffff;
    text-align: center;
}

.notification-menu-footer a {
    color: var(--brand);
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
}

@media (max-width: 575.98px) {
    .notification-menu {
        width: min(
            370px,
            calc(100vw - 18px)
        );
    }
}



/* =========================================================
   LANGUAGE SWITCHER
========================================================= */

.language-dropdown {
    position: relative;
}

.language-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 48px;
    padding: 7px 10px;

    color: #ffffff;
    background: transparent;

    border: 0;
    border-radius: 10px;

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

    transition: .2s ease;
}

.language-dropdown-toggle:hover,
.language-dropdown-toggle:focus,
.language-dropdown-toggle.show {
    color: #ffffff;
    background: rgba(255, 255, 255, .16);
    outline: none;
}

.language-dropdown-toggle > i {
    font-size: 20px;
}

.language-current-label {
    white-space: nowrap;
}

.language-dropdown-menu {
    width: 230px;

    padding: 8px;
    margin-top: 10px !important;

    border: 1px solid var(--border);
    border-radius: 14px;

    box-shadow: var(--shadow-lg);
}

.language-dropdown-header {
    padding: 10px 11px;
    margin-bottom: 5px;

    color: var(--muted);

    border-bottom: 1px solid var(--border);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;

    text-transform: uppercase;
}

.language-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 11px;

    color: var(--text);

    border-radius: 9px;

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

.language-dropdown-menu .dropdown-item:hover,
.language-dropdown-menu .dropdown-item:focus {
    color: var(--brand-dark);
    background: var(--surface-soft);
}

.language-dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--brand),
        var(--secondary)
    );
}

.language-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 24px;

    color: var(--brand-dark);
    background: #f3e8ff;

    border-radius: 6px;

    font-size: 9px;
    font-weight: 900;
}

.language-dropdown-menu .dropdown-item.active .language-code {
    color: var(--brand-dark);
    background: #ffffff;
}

.language-check {
    margin-left: auto;
    font-size: 10px;
}

@media (max-width: 767.98px) {
    .language-current-label {
        display: none;
    }

    .language-dropdown-toggle {
        min-width: 45px;
        padding: 5px;
    }

    .language-dropdown-menu {
        width: min(
            230px,
            calc(100vw - 24px)
        );
    }
}

/* PRODUCT CONDITION */


/* KEEP CARD CONTENT CONSISTENT */

.product-info {
    display: flex;
    flex-direction: column;
    min-height: 175px;
}

.product-name {
    height: 36px;
    min-height: 36px;
    overflow: hidden;
}

.product-info .view-btn {
    margin-top: auto;
}

.meta .sold-count {
    color: var(--secondary);
    font-weight: 800;
}

.meta .sold-count i {
    color: var(--warning);
    margin-right: 2px;
}

.meta .sold-count .fa-fire {
    color: var(--danger);
}

/* =========================================================
   PRODUCT CONDITION BADGE
========================================================= */
/* =========================================================
   PRODUCT CONDITION — FINAL OVERRIDE
========================================================= */

.product-info .product-condition {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    gap: 4px !important;

    width: fit-content !important;
    margin-bottom: 7px !important;
    padding: 3px 8px !important;

    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

/* Used — green */
.product-info .product-condition.condition-used {
    color: #166534 !important;
    background-color: #dcfce7 !important;
    border: 1px solid #86efac !important;
}

/* Brand New — blue */
.product-info .product-condition.condition-new {
    color: #1d4ed8 !important;
    background-color: #dbeafe !important;
    border: 1px solid #93c5fd !important;
}

/* Open Box — orange */
.product-info .product-condition.condition-open-box {
    color: #b45309 !important;
    background-color: #fef3c7 !important;
    border: 1px solid #fcd34d !important;
}

/* Refurbished — purple */
.product-info .product-condition.condition-refurbished {
    color: #6d28d9 !important;
    background-color: #ede9fe !important;
    border: 1px solid #c4b5fd !important;
}

/* Other — grey */
.product-info .product-condition.condition-default {
    color: #475569 !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

.product-info .product-condition i {
    color: inherit !important;
    font-size: 9px !important;
}

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

.product-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 14px;
    margin-top: 4px;
    line-height: 1;
}

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

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

.rating-value {
    color: #25204f;
    font-size: 9px;
    font-weight: 700;
}

.review-count {
    color: #8b8b98;
    font-size: 8px;
    font-weight: 500;
}


/* PRODUCT DETAIL GALLERY */

.main-image-wrapper {
    position: relative;
    width: 100%;
    min-height: 0;
    display: block;
    overflow: hidden;
    background: #ffffff;
}

.product-gallery {
    width: 100%;
    background: #ffffff;
}

.gallery-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 520px;
    overflow: hidden;
    background: #ffffff;
    cursor: zoom-in;
}

.gallery-main-image {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px;
    object-fit: contain;
    object-position: center;
}

.gallery-thumbnails {
    display: flex;
    gap: 10px;
    padding: 12px;
    overflow-x: auto;
    border-top: 1px solid #ede9fe;
    background: #ffffff;
}

.gallery-thumbnail {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
}

.gallery-thumbnail.active {
    border-color: #7c3aed;
}

.gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(30, 27, 75, .75);
    color: #ffffff;
    transform: translateY(-50%);
}

.gallery-arrow-prev {
    left: 14px;
}

.gallery-arrow-next {
    right: 14px;
}

.gallery-counter {
    position: absolute;
    right: 15px;
    bottom: 14px;
    z-index: 10;
    padding: 7px 11px;
    border-radius: 20px;
    background: rgba(30, 27, 75, .78);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.gallery-open-hint {
    position: absolute;
    left: 15px;
    bottom: 14px;
    z-index: 10;
    padding: 7px 11px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    color: #7c3aed;
    font-size: 10px;
    font-weight: 800;
}

@media (max-width: 767px) {
    .gallery-main {
        height: 350px;
    }

    .gallery-main-image {
        padding: 12px;
    }

    .gallery-thumbnail {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
    }
}