@media (max-width: 768px) {
            .shop-container {
                flex-direction: column;
            }

            .category-sidebar {
                width: 100%;
            }
        }

        .shop-container {
            display: flex;
            margin: 20px;
        }

        .category-sidebar {
            width: 250px;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 5px;
        }

        .category-group {
            margin-bottom: 20px;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
        }

        .category-title {
            font-size: 16px;
            color: #2c3e50;
            margin-bottom: 5px;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }

        .checkbox-list li:hover {
            background-color: #f0f7ff;
        }

        .subcategories {
            margin-top: 10px;
        }

        .subcategory-item {
            display: block;
            padding: 5px 10px;
            color: #555;
            text-decoration: none;
            transition: all 0.3s;
        }

            .subcategory-item:hover {
                background: #e0e0e0;
                color: #000;
            }

            .subcategory-item.active {
                background-color: #4CAF50;
                color: white !important;
                font-weight: bold;
            }

        .products-grid {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            padding-left: 20px;
			height:200px;
        }

        .product-card {
            border: 1px solid #388E3C;
            padding: 15px;
            border-radius: 5px;
            transition: all 0.3s;
			text-align:center;
			
			display: flex;
			flex-direction: column;       /* محتوا به صورت ستونی */
			justify-content: space-between; /* فاصله بین بالا و پایین */
			height: auto;  /* ارتفاع دلخواه کارت */
        }
		.product-image{
			padding:10px;
			width:100%;
			height:180p ;
		}
		
            .product-card:hover {
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            }

        .old-price {
            text-decoration: line-through;
            color: #999;
            margin-right: 5px;
        }
        .current-price {
            color: green;
            margin-right: 5px;
			font-size:17px;
			font-weight:bold;
        }

        .discount-price {
            color: #e53935;
            font-weight: bold;
			font-size:17px;
        }
		.price-container{
			width:100%; 
		}
		.btn-container{
			width:100%; 
            background: #4CAF50;
            padding: 8px 15px;
            border-radius: 6px;
		}
		.btn-container:hover{
			background: #388E3C;
			color:yellow;
		}
        .add-to-cart-btn {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 3px;
            cursor: pointer;
			margin-top: 30px;  /* دکمه رو به پایین می‌چسبونه */
			margin-bottom: 10px; /* فاصله 20px از ته کارت */
        }

            .add-to-cart-btn:hover {
                background: #388E3C;
				color:yellow;
            }

        .checkbox-list {
            margin-top: 10px;
            list-style-type: none;
            padding: 0;
        }

            .checkbox-list li {
                display: flex;
                align-items: center;
                padding: 5px 0;
            }

            .checkbox-list label {
                cursor: pointer;
                font-weight: normal; /* حذف حالت بولدار */
                transition: all 0.3s;
                flex: 1;
				font-size:14px;
            }

                .checkbox-list label:hover {
                    background: #f0f8ff;
                }

            .checkbox-list input[type="checkbox"] {
                margin: 0 8px 0 0;
                cursor: pointer;
            }

                /* استایل برای آیتم‌های انتخاب شده */
                .checkbox-list input[type="checkbox"]:checked + label {
                    color: #0d47a1;
                    background-color: transparent; /* حذف پس‌زمینه */
                }

        .apply-filter-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 15px 0;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
            width: 100%;
        }

            .apply-filter-btn:hover {
                background-color: #45a049;
            }
.subcategory-item.active {
    background-color: #4CAF50;
    color: white !important;
    font-weight: bold;
}

/* POPUP products */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
}

.popup {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 700px; max-width: 90%;
    padding: 20px; border-radius: 12px; 
    z-index: 10000;
}

.popup-content {
    display: flex;
    gap: 20px;
}

.popup-left {
    flex: 1;
}

.main-image {
    width: 100%;
    border: 1px solid #ddd;
    margin-bottom: 10px;
}

.thumbnails {
    display: flex;
    gap: 10px;
}

.thumb {
    width: 80px;
    cursor: pointer;
    border: 1px solid #ccc;
}

.popup-right {
    flex: 1;
}

.close-btn {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 24px;
    cursor: pointer;
}


#overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9999; }
#popup { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
         background:#fff; padding:20px; border-radius:12px; width:700px; max-width:90%; z-index:10000; }
.popup-left { float:left; width:50%; }
.popup-right { float:right; width:50%; padding-left:20px; }
.main-image { width:100%; border:1px solid #ccc; margin-bottom:10px; }
.thumbnails { display:flex; gap:10px; }
.thumb { width:80px; cursor:pointer; border:1px solid #ccc; }
.close-btn { position:absolute; top:10px; right:15px; font-size:24px; cursor:pointer; }



/* Product Details */


:root{
/* رنگ‌های برند شما (قابل تغییر) */
--brand-red: #e11d48; /* قرمز لوگو */
--brand-green: #16a34a;/* سبز لوگو */
--ink-900:#0f172a; /* متن اصلی */
--ink-600:#475569; /* متن فرعی */
--muted:#eef2f7; /* پس‌زمینه‌های ملایم */
--ring: rgba(22,163,74,.25);
--radius: 14px;
}





.price-card{
display:grid; gap:.75rem; align-content:start;
border:0px solid #e5e7eb; border-radius: var(--radius);
padding:1rem 1.25rem; background: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,.04);
max-width: 360px;
transition: box-shadow .2s ease, transform .15s ease;
width:100%;
padding-left:20px;
padding-right:20px;
}
/*.price-card:hover{ box-shadow: 0 10px 28px rgba(0,0,0,.08); transform: translateY(-2px); }*/


.price-title{ font-size:1.05rem; font-weight:700; line-height:1.6; }


/* قیمت پایه */
.price{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;}
.price__current{ font-weight:800; font-size:1.4rem; letter-spacing:.2px; }
.price__currency{ font-weight:500; font-size:.95rem; color:var(--ink-600); }


/* حالت بدون تخفیف */
.price--regular .price__current{ color: var(--brand-green); }


/* حالت تخفیف‌دار */
.price--discount .price__current{ color: var(--brand-green); font-size:25px;}
.price__old{ position:relative; color: var(--brand-red); font-weight:600;  font-size:20px;}
.price__old::after{ content:""; position:absolute; inset:auto 0 .5em 0; height:2px; background:linear-gradient(90deg,transparent, #ef4444 40%, #ef4444 60%, transparent); transform: skewY(-8deg); }


.badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border-radius:999px; font-size:.8rem; font-weight:700; }
.badge--off{ background: rgba(225,29,72,.1); color: var(--brand-red); border:1px dashed rgba(225,29,72,.5);font-size:12px; }
.badge--save{ background: rgba(22,163,74,.1); color: var(--brand-green); border:1px dashed rgba(22,163,74,.45); font-size:12px;}


.meta{ display:flex; align-items:center; gap:.5rem; color:var(--ink-600); font-size:.85rem; }


/* دکمه نمونه */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem 1rem; border-radius:calc(var(--radius) - 4px); border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-weight:700; }
.btn:focus{ outline:3px solid var(--ring); outline-offset:2px; }
.btn--buy{ border-color: transparent; background: linear-gradient(135deg, var(--brand-green), #22c55e); color:#fff; }
.btn--buy:hover{ filter:brightness(1.05); }


.muted{ color:var(--ink-600); }
/*.row{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }*/


@media (max-width: 420px){
.price__current{ font-size:1.25rem; }
}


@media (prefers-color-scheme: dark){
body{ background:#0b1220; color:#e6e8ec; }
.price-card{ background:#0f172a; border-color:#1f2937; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.price__currency,.muted{ color:#94a3b8; }
}

#lblPrijsBox {
    position: fixed;      /* ثابت در صفحه */
    top: 50%;             /* وسط عمودی */
    right: 60px;          /* فاصله از راست */
    transform: translateY(-50%);
    background: #fff;     /* پس‌زمینه سفید */
    padding: 10px 20px;   /* فاصله داخلی */
    border: 2px solid #16a34a; /* سبز برند */
    border-radius: 12px;
    font-weight: bold;
    font-size: 1.2rem;
    color: #e11d48;       /* قرمز برند */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;        /* بالاتر از همه */
    min-height:120px;
    min-width :250px;
}
#discount-badge {
    position: fixed;        /* ثابت روی صفحه */
    top: 50px;              /* فاصله از بالا */
    right: 30px;            /* فاصله از راست */
    width: 80px;            /* عرض دایره */
    height: 80px;           /* ارتفاع دایره */
    background: #e11d48;    /* قرمز برند */
    color: #fff;            /* متن سفید */
    border-radius: 50%;     /* دایره‌ای */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    z-index: 10000;         /* بالاتر از بقیه */
    transform: rotate(-10deg); /* کمی کج برای جذابیت */
}