/* ... استایل‌های موجود ... */

        /* استایل‌های جدید برای نمایش رنگ‌ها */
        .color-display-container {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 12px;
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
        }
        
        .color-item {
            display: inline-flex;
            align-items: center;
            padding: 8px 15px;
            margin: 5px;
            border: 1px solid #dee2e6;
            border-radius: 25px;
            background-color: white;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .color-item:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        
        .color-preview {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-left: 8px;
            border: 2px solid #fff;
            box-shadow: 0 0 0 1px #dee2e6;
            flex-shrink: 0;
        }
        
        .color-name {
            font-size: 0.9rem;
            font-weight: 500;
            color: #495057;
        }
        /* استایل جدید برای اتمام موجودی */
        .out-of-stock-banner {
            position: absolute;
            top: 50%;
            right: -10px; /* موقعیت در سمت راست عکس */
            transform: translateY(-50%) rotate(-15deg);
            background-color: rgba(220, 53, 69, 0.9);
            color: white;
            font-size: 2rem;
            font-weight: bold;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            z-index: 10;
            text-align: center;
            animation: pulse 2s infinite;
        }
        
        .product-image-container {
            position: relative;
            overflow: visible; /* تغییر از hidden به visible برای نمایش بنر */
        }
        
        /* برای محصولات ناموجود، عکس را کمی محو کنیم */
        .product-unavailable .main-image img {
            opacity: 0.7;
            filter: grayscale(30%);
        }
        /* اضافه کردن فونت Vazirmatn */
        @font-face {
            font-family: 'Vazirmatn';
            src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Vazirmatn';
            src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        /* اعمال فونت به تمام عناصر */
        body {
            font-family: 'Vazirmatn', sans-serif !important;
        }
        h1, h2, h3, h4, h5, h6,
        .h1, .h2, .h3, .h4, .h5, .h6 {
            font-family: 'Vazirmatn', sans-serif !important;
            font-weight: 700;
        }
        .btn, input, textarea, select, button {
            font-family: 'Vazirmatn', sans-serif !important;
        }

        /* استایل‌های اصلی صفحه */
        [dir="rtl"] {
            text-align: right;
        }
        
        .product-gallery {
            position: sticky;
            top: 20px;
        }
        
        .main-image {
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
            text-align: center;
            background: #f9f9f9;
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .thumbnail-container {
            overflow-x: auto;
            padding-bottom: 10px;
        }
        
        .thumbnail {
            width: 80px;
            height: 80px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
        }
        
        .thumbnail:hover {
            border-color: #0d6efd;
            transform: scale(1.05);
        }
        
        .product-info {
            position: sticky;
            top: 20px;
        }
        
        .breadcrumb {
            background-color: transparent;
            padding-right: 0;
        }
        
        .price-section {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        
        .price-container {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .current-price {
            font-size: 1.5rem;
            font-weight: bold;
            color: #dc3545;
        }
        
        .original-price {
            text-decoration: line-through;
            color: #6c757d;
            font-size: 1.1rem;
        }
        
        .discount-badge {
            align-self: flex-start;
            margin-top: 5px;
        }
        
        .color-circle {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #ddd;
        }
        
        .user-avatar img {
            object-fit: cover;
        }
        
        .avatar-placeholder {
            background-color: #e9ecef;
            color: #6c757d;
            font-weight: bold;
        }
        
        [dir="rtl"] input[type="number"] {
            direction: ltr;
            text-align: center;
        }
        
        /* استایل‌های دکمه‌ها */
        .btn-cart {
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .btn-cart:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .btn-cart:active {
            transform: translateY(1px);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .btn-wishlist {
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-right: 10px;
        }
        
        .btn-wishlist:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .btn-wishlist:active {
            transform: translateY(1px);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .btn-outline-danger:hover .far.fa-heart {
            color: white !important;
        }
        
        .btn-outline-danger:hover {
            background-color: #dc3545;
            border-color: #dc3545;
        }
        
        /* استایل‌های بخش انتخاب رنگ */
        .color-options {
            padding: 10px 0;
        }
        
        .color-circle {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #ddd;
            vertical-align: middle;
        }
        
        .form-check-input[type="radio"] {
            margin-right: 0;
            margin-left: 0.5em;
        }
        
        .form-check-label {
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 20px;
            transition: all 0.3s;
        }
        
        .form-check-input:checked + .form-check-label {
            background-color: #f0f7ff;
            border: 1px solid #0d6efd;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .comment-form {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
        }
        
        .card {
            margin-bottom: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 15px 15px 15px 15px;
        }
        
        .card-header {
            border-bottom: 1px solid #e0e0e0;
            border-radius: 15px 15px 0 0 !important;
        }

        .card-body {
            border-radius: 0 0 15px 15px !important;
        }

        #quantityError {
            transition: all 0.3s ease;
        }

        .product-unavailable {
            opacity: 0.6;
            pointer-events: none;
        }

        .product-unavailable-message {
            color: #dc3545;
            font-weight: bold;
            margin-top: 10px;
        }
        
        /* انیمیشن‌های اضافی */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .pulse-animation {
            animation: pulse 1.5s infinite;
        }
        
        .shake-animation {
            animation: shake 0.5s;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
            20%, 40%, 60%, 80% { transform: translateX(3px); }
        }
        /* استایل‌های مربوط به گارانتی */
        .warranty-badge {
            font-size: 0.85rem;
            padding: 0.5rem 1rem;
            border-radius: 20px;
        }

        .warranty-icon {
            margin-left: 5px;
        }

        .warranty-feature {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 10px;
            border-right: 4px solid #28a745;
        }

        .warranty-feature i {
            color: #28a745;
            margin-left: 10px;
            font-size: 1.2rem;
        }

        .warranty-info-box {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #dee2e6;
            border-radius: 10px;
            padding: 20px;
            margin: 15px 0;
        }

        .warranty-title {
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .warranty-title i {
            margin-left: 10px;
            color: #dc3545;
        }