*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

button,
input,
select,
textarea{
    font-family:'Vazirmatn',sans-serif;
}

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

:root{

    --bg-primary:#0a0e14;
    --bg-secondary:#11161e;
    --bg-card:#161c26;
    --bg-card-hover:#1c2330;

    --text-primary:#e8e6e3;
    --text-secondary:#b0b8c1;
    --text-muted:#7a8290;

    --accent-purple:#a855f7;
    --accent-cyan:#22d3ee;
    --accent-pink:#ec4899;
    --accent-green:#10b981;
    --accent-orange:#f59e0b;
    --accent-red:#ef4444;

    --gradient-hero:
        linear-gradient(
            135deg,
            #1a0a2e 0%,
            #0f172a 40%,
            #0a1628 70%,
            #1a0a2e 100%
        );

    --gradient-btn:
        linear-gradient(
            135deg,
            #a855f7 0%,
            #7c3aed 100%
        );

    --gradient-btn-hover:
        linear-gradient(
            135deg,
            #c084fc 0%,
            #8b5cf6 100%
        );

    --shadow-card:
        0 4px 24px rgba(0,0,0,.5);

    --shadow-card-hover:
        0 12px 40px rgba(0,0,0,.7),
        0 2px 12px rgba(168,85,247,.25);

    --shadow-neon:
        0 0 20px rgba(168,85,247,.30);

    --shadow-cyan:
        0 0 16px rgba(34,211,238,.25);

    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:20px;
    --radius-xl:30px;

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

}

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

body{

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

    background:var(--bg-primary);

    color:var(--text-primary);

    line-height:1.7;

    min-height:100vh;

    overflow-x:hidden;

}

.main-content{

    position:relative;

    z-index:1;

    max-width:1300px;

    margin:auto;

    padding:0 24px;

}

.container{

    max-width:1300px;

    margin:auto;

    padding:0 24px;

}

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

.d-flex{
    display:flex;
}

.align-center{
    align-items:center;
}

.justify-between{
    justify-content:space-between;
}

.gap-10{
    gap:10px;
}

.gap-15{
    gap:15px;
}

.gap-20{
    gap:20px;
}

/* ===========================
   Particles
=========================== */

.particles-bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}

.particles-bg span{
    position:absolute;
    display:block;
    width:3px;
    height:3px;
    border-radius:50%;
    background:var(--accent-purple);
    animation:floatUp linear infinite;
    opacity:0;
}

@keyframes floatUp{

    0%{
        transform:translateY(100vh) scale(0);
        opacity:0;
    }

    10%{
        opacity:.7;
    }

    90%{
        opacity:.1;
    }

    100%{
        transform:translateY(-10vh) scale(1.4);
        opacity:0;
    }

}

/* ===========================
   Header
=========================== */

.header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(10,14,20,.82);

    backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(168,85,247,.18);

    transition:var(--transition);

}

.header.scrolled{

    background:rgba(10,14,20,.93);

    border-bottom-color:rgba(168,85,247,.35);

    box-shadow:0 4px 30px rgba(0,0,0,.6);

}

.nav-container{

    max-width:1300px;

    height:68px;

    margin:auto;

    padding:0 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* ===========================
   Logo
=========================== */

.logo{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#fff;

    font-size:1.6rem;

    font-weight:900;

    letter-spacing:-.5px;

}

.logo i{

    font-size:2rem;

    background:linear-gradient(135deg,#22d3ee,#a855f7);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    filter:drop-shadow(0 0 8px rgba(168,85,247,.5));

}

.logo span{

    background:linear-gradient(135deg,#c084fc,#22d3ee);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

/* ===========================
   Navigation
=========================== */

.nav-links{

    display:flex;

    align-items:center;

    gap:6px;

}

.nav-links li{

    list-style:none;

}

.nav-links a{

    display:block;

    padding:8px 16px;

    color:var(--text-secondary);

    border-radius:25px;

    transition:var(--transition);

    font-size:.93rem;

    font-weight:500;

    position:relative;

    white-space:nowrap;

}

.nav-links a:hover,
.nav-links a.active{

    color:#fff;

    background:rgba(168,85,247,.12);

}

.nav-links a.active::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:2px;

    transform:translateX(-50%);

    width:20px;

    height:3px;

    border-radius:10px;

    background:var(--accent-cyan);

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

}

/* ===========================
   Right Header
=========================== */

.nav-icons{

    display:flex;

    align-items:center;

    gap:14px;

}

.hamburger{

    display:none;

    background:none;

    border:none;

    color:#fff;

    cursor:pointer;

    font-size:1.6rem;

    padding:6px;

}
/* ===========================
   Search Form
=========================== */

.search-form{

    display:flex;

    align-items:center;

    gap:8px;

    background:var(--bg-secondary);

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

    border-radius:30px;

    padding:4px 4px 4px 12px;

    transition:var(--transition);

}

.search-form:focus-within{

    border-color:var(--accent-purple);

    box-shadow:0 0 14px rgba(168,85,247,.25);

}

.search-form input{

    width:170px;

    border:none;

    outline:none;

    background:transparent;

    color:#fff;

    font-size:.85rem;

    padding:8px 6px;

}

.search-form input::placeholder{

    color:var(--text-muted);

}

.search-form button{

    border:none;

    cursor:pointer;

    color:#fff;

    background:var(--gradient-btn);

    padding:9px 16px;

    border-radius:25px;

    transition:var(--transition);

}

.search-form button:hover{

    background:var(--gradient-btn-hover);

}

/* ===========================
   Cart Icon
=========================== */

.cart-icon-wrap{

    position:relative;

    color:#fff;

    font-size:1.3rem;

    padding:8px;

    cursor:pointer;

    transition:var(--transition);

}

.cart-icon-wrap:hover{

    color:var(--accent-cyan);

    text-shadow:var(--shadow-cyan);

}

.cart-count{

    position:absolute;

    top:-3px;

    right:-6px;

    width:20px;

    height:20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--accent-pink);

    color:#fff;

    font-size:.68rem;

    font-weight:700;

    box-shadow:0 0 12px rgba(236,72,153,.45);

}

/* ===========================
   Login Button
=========================== */

.btn-login{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:10px 22px;

    border-radius:30px;

    background:var(--gradient-btn);

    color:#fff;

    font-weight:700;

    transition:var(--transition);

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

}

.btn-login:hover{

    transform:translateY(-2px);

    background:var(--gradient-btn-hover);

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

}

/* ===========================
   Common Buttons
=========================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:none;

    cursor:pointer;

    border-radius:25px;

    padding:12px 22px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--gradient-btn);

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-2px);

    background:var(--gradient-btn-hover);

}

.btn-outline{

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

    background:transparent;

    color:#fff;

}

.btn-outline:hover{

    border-color:var(--accent-purple);

    background:rgba(168,85,247,.08);

}

/* ===========================
   Common Badges
=========================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:4px 10px;

    border-radius:20px;

    font-size:.72rem;

    font-weight:700;

}

.badge-purple{

    background:rgba(168,85,247,.15);

    color:var(--accent-purple);

}

.badge-cyan{

    background:rgba(34,211,238,.15);

    color:var(--accent-cyan);

}

.badge-green{

    background:rgba(16,185,129,.15);

    color:var(--accent-green);

}

.badge-red{

    background:rgba(239,68,68,.15);

    color:var(--accent-red);

}
.badge-gray{
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}



/* بسیار پررنگ - حالت مات با شادو */
.badge-green{
    background: #10b981; /* سبز مات */
    color: #000;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
}

.badge-red{
    background: #ef4444; /* قرمز مات */
    color: #000;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
}

.badge-purple{
    background: #8b5cf6; /* بنفش مات */
    color: #000;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.5);
}

.badge-used {
    background: #f59e0b; /* طلایی مات */
    color: #000;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.5);
}
/* ===========================
   Cart Sidebar
=========================== */

.cart-sidebar{

    position:fixed;

    top:0;

    left:-420px;

    width:400px;

    max-width:90vw;

    height:100vh;

    background:var(--bg-secondary);

    display:flex;

    flex-direction:column;

    z-index:2000;

    transition:left .35s ease;

    border-right:1px solid rgba(168,85,247,.25);

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

}

.cart-sidebar.open{

    left:0;

}

/* ===========================
   Cart Overlay
=========================== */

.cart-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:1999;

}

.cart-overlay.show{

    opacity:1;

    pointer-events:auto;

}

/* ===========================
   Cart Header
=========================== */

.cart-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px 24px;

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

}

.cart-header h3{

    font-size:1.15rem;

    font-weight:800;

    display:flex;

    align-items:center;

    gap:8px;

}

.btn-close-cart{

    background:none;

    border:none;

    color:#fff;

    font-size:1.4rem;

    cursor:pointer;

    transition:var(--transition);

}

.btn-close-cart:hover{

    color:var(--accent-red);

}

/* ===========================
   Cart Items
=========================== */

.cart-items{

    flex:1;

    overflow-y:auto;

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.cart-item{

    display:flex;

    gap:14px;

    align-items:center;

    background:var(--bg-card);

    border-radius:var(--radius-md);

    padding:12px;

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

}

.cart-item-icon{

    width:44px;

    font-size:2rem;

    text-align:center;

    color:var(--accent-purple);

}

.cart-item-info{

    flex:1;

}

.cart-item-info h5{

    color:#fff;

    font-size:.92rem;

    margin-bottom:4px;

}

.ci-price{

    color:var(--accent-cyan);

    font-weight:700;

}

.btn-remove-item{

    background:none;

    border:none;

    color:var(--text-muted);

    cursor:pointer;

    transition:var(--transition);

}

.btn-remove-item:hover{

    color:var(--accent-red);

}

/* ===========================
   Cart Footer
=========================== */

.cart-footer{

    padding:20px;

    border-top:1px solid rgba(255,255,255,.08);

}

.cart-total{

    display:flex;

    justify-content:space-between;

    margin-bottom:16px;

    color:#fff;

    font-weight:700;

}

.btn-checkout{

    display:block;

    width:100%;

    padding:14px;

    border-radius:30px;

    text-align:center;

    color:#fff;

    background:var(--gradient-btn);

    transition:var(--transition);

}

.btn-checkout:hover{

    background:var(--gradient-btn-hover);

}

/* ===========================
   Toast
=========================== */

.toast{

    position:fixed;

    right:30px;

    bottom:30px;

    z-index:3000;

    background:var(--bg-card);

    color:#fff;

    padding:14px 22px;

    border-radius:30px;

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

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

    animation:slideInToast .35s,fadetoast .4s 2s forwards;

}

.toast.error{

    border-color:var(--accent-red);

}

@keyframes slideInToast{

    from{

        transform:translateX(120%);

        opacity:0;

    }

    to{

        transform:translateX(0);

        opacity:1;

    }

}

@keyframes fadetoast{

    to{

        opacity:0;

        transform:translateY(20px);

    }

}

/* ===========================
   Footer
=========================== */

.footer{

    margin-top:60px;

    padding:35px 20px;

    text-align:center;

    background:var(--bg-secondary);

    border-top:1px solid rgba(168,85,247,.2);

    color:var(--text-muted);

}

.footer .socials{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:14px;

}

.footer .socials a{

    color:var(--text-muted);

    font-size:1.3rem;

    transition:var(--transition);

}

.footer .socials a:hover{

    color:var(--accent-cyan);

    text-shadow:var(--shadow-cyan);

}

/* ===========================
   Responsive
=========================== */

@media(max-width:992px){

    .nav-links{

        position:absolute;

        top:68px;

        right:0;

        left:0;

        background:var(--bg-secondary);

        display:none;

        flex-direction:column;

        padding:20px;

    }

    .nav-links.show{

        display:flex;

    }

    .hamburger{

        display:block;

    }

}

@media(max-width:768px){

    .search-form input{

        width:110px;

    }

    .main-content{

        padding:0 16px;

    }

    .container{

        padding:0 16px;

    }

}

@media(max-width:576px){

    .btn-login span{

        display:none;

    }

    .cart-sidebar{

        width:100%;

        max-width:100%;

    }

}

.price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    .price-row .price {
        font-weight: 700;
        font-size: 1rem;
        color: var(--accent-cyan);
    }
    .price-row .price .old-price {
        font-size: 0.7rem;
        color: var(--text-muted);
        text-decoration: line-through;
        display: block;
        font-weight: 400;
    }
    .price-row .price .currency {
        font-size: 0.7rem;
        color: var(--text-muted);
        font-weight: 400;
    }
      /* ===== استایل Price Range Slider ===== */
    .price-filter {
        display: flex;
        align-items: center;
    }
    .price-range-wrapper {
        background: var(--bg-primary);
        border-radius: var(--radius-md);
        padding: 8px 14px;
        min-width: 280px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    @media (max-width: 768px) {
        .price-range-wrapper {
            min-width: unset;
            width: 100%;
            flex-direction: column;
            align-items: stretch;
        }
    }
    .price-range-header {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .price-range-header .price-label {
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 500;
    }
    .price-range-values {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--accent-cyan);
    }
    .price-range-values .price-range-separator {
        color: var(--text-muted);
        font-weight: 300;
    }
    .price-range-values .price-currency {
        font-size: 0.6rem;
        color: var(--text-muted);
        font-weight: 400;
    }

    .price-range-slider {
        position: relative;
        width: 180px;
        height: 30px;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    @media (max-width: 768px) {
        .price-range-slider {
            width: 100%;
        }
    }
    .price-range-slider input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        position: absolute;
        width: 100%;
        height: 4px;
        background: transparent;
        pointer-events: none;
        outline: none;
        z-index: 2;
        direction: ltr;
    }
    .price-range-slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--accent-purple);
        cursor: pointer;
        pointer-events: auto;
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
        transition: var(--transition);
    }
    .price-range-slider input[type="range"]::-webkit-slider-thumb:hover {
        transform: scale(1.15);
        box-shadow: 0 2px 16px rgba(168, 85, 247, 0.6);
    }
    .price-range-slider input[type="range"]::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--accent-purple);
        cursor: pointer;
        pointer-events: auto;
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
    }
    .price-range-slider input[type="range"]::-moz-range-track {
        height: 4px;
        background: transparent;
    }
    .price-range-slider input[type="range"]:first-child {
        z-index: 3;
    }
    .price-range-slider input[type="range"]:last-child {
        z-index: 4;
    }

    .price-slider-track {
        position: relative;
        width: 100%;
        height: 4px;
        background: var(--bg-secondary);
        border-radius: 4px;
    }
    .price-slider-range {
        position: absolute;
        height: 100%;
        background: var(--gradient-btn);
        border-radius: 4px;
        left: 0%;
        right: 0%;
    }

    .price-range-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }
    .price-range-actions .btn-apply {
        padding: 4px 14px;
        font-size: 0.7rem;
        background: var(--gradient-btn);
        color: #fff;
        border: none;
        border-radius: 20px;
        cursor: pointer;
        font-family: 'Vazirmatn', sans-serif;
        font-weight: 600;
        transition: var(--transition);
        text-decoration: none;
    }
    .price-range-actions .btn-apply:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
    }
    .price-range-actions .btn-clear {
        background: var(--accent-red);
    }
    .price-range-actions .btn-clear:hover {
        background: #dc2626;
        box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
    }

    .sort-options select {
        padding: 6px 12px;
        border-radius: 20px;
        background: var(--bg-primary);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #fff;
        font-family: 'Vazirmatn', sans-serif;
        font-size: 0.8rem;
        outline: none;
        cursor: pointer;
        transition: var(--transition);
    }
    .sort-options select:focus {
        border-color: var(--accent-purple);
    }
    .sort-options select option {
        background: var(--bg-secondary);
    }

    .games-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 24px;
    }
    @media (max-width: 768px) {
        .games-grid {
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 16px;
        }
    }
    @media (max-width: 480px) {
        .games-grid {
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 12px;
        }
    }

.game-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    min-height: 380px;
}
    .game-card:hover {
        transform: translateY(-6px);
        border-color: rgba(168, 85, 247, 0.2);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    }


    game-card-img {
    height: 250px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
    .game-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .game-card-img i {
        font-size: 3rem;
        opacity: 0.3;
    }
    .game-card-img .badges {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .game-card-img .badge {
        font-size: 0.55rem;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 12px;
        color: #fff;
        text-align: center;
    }
    .badge-featured {
        background: var(--accent-purple);
    }
    .badge-sale {
        background: var(--accent-red);
    }
    .badge-new {
        background: var(--accent-cyan);
        color: #000;
    }
    .badge-hot {
        background: var(--accent-orange);
    }

    .game-card-body {
        padding: 14px 16px 16px;
    }
    .game-card-body h3 {
        font-size: 0.9rem;
        font-weight: 700;
        margin-bottom: 4px;
        color: #fff;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 44px;
    }
    .game-card-body .category-tag {
        font-size: 0.65rem;
        color: var(--accent-cyan);
        background: rgba(34, 211, 238, 0.1);
        padding: 2px 10px;
        border-radius: 12px;
        display: inline-block;
        margin-bottom: 6px;
    }
    .game-card-body .genre {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 36px;
    }
    .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    .price-row .price {
        font-weight: 700;
        font-size: 1rem;
        color: var(--accent-cyan);
    }
    .price-row .price .old-price {
        font-size: 0.7rem;
        color: var(--text-muted);
        text-decoration: line-through;
        display: block;
        font-weight: 400;
    }
    .price-row .price .currency {
        font-size: 0.7rem;
        color: var(--text-muted);
        font-weight: 400;
    }
    .btn-add-cart {
        background: var(--gradient-btn);
        color: #fff;
        border: none;
        padding: 6px 14px;
        border-radius: 20px;
        font-family: 'Vazirmatn', sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
    }
    .btn-add-cart:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
    }

    .no-products {
        grid-column: 1 / -1;
        text-align: center;
        padding: 60px 20px;
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        border: 1px solid rgba(168, 85, 247, 0.1);
    }
    .no-products i {
        font-size: 4rem;
        opacity: 0.3;
        display: block;
        margin-bottom: 16px;
        color: var(--text-muted);
    }
    .no-products h3 {
        color: #fff;
        font-size: 1.3rem;
        margin-bottom: 8px;
    }
    .no-products p {
        color: var(--text-muted);
    }

    /* ===== استایل Active Filters ===== */
    .active-filters {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 16px;
        padding: 8px 0;
    }
    .filter-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: rgba(168, 85, 247, 0.12);
        color: var(--accent-purple);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        border: 1px solid rgba(168, 85, 247, 0.2);
    }
    .filter-tag .remove-filter {
        cursor: pointer;
        color: var(--text-muted);
        font-size: 0.7rem;
        transition: var(--transition);
    }
    .filter-tag .remove-filter:hover {
        color: var(--accent-red);
    }

    @media (max-width: 768px) {
        .filter-bar {
            flex-direction: column;
            align-items: stretch;
        }
        .filter-bar-left {
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .filter-bar-right {
            flex-direction: column;
            align-items: stretch;
        }
        .price-filter {
            width: 100%;
        }
        .price-range-wrapper {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }
        .price-range-header {
            justify-content: space-between;
        }
        .price-range-actions {
            justify-content: center;
        }
        .sort-options select {
            width: 100%;
        }
        .category-header {
            padding: 20px;
        }
        .category-header h1 {
            font-size: 1.3rem;
        }
        .extra-filters {
            justify-content: center;
        }
    }
    @media (max-width: 480px) {
        .price-range-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
        }
        .extra-filters {
            flex-wrap: wrap;
        }
    }