:root {
            --primary: #7c3aed;
            --primary-hover: #6d28d9;
            --primary-light: #a855f7;
            --primary-bg: #f3e8ff;
            --primary-pale: #faf5ff;
            --dark: #1e1b2e;
            --gray: #6b7280;
            --gray-light: #9ca3af;
            --white: #ffffff;
            --success: #10b981;
            --shadow-sm: rgba(124, 58, 237, 0.06);
            --shadow-md: rgba(124, 58, 237, 0.12);
            --shadow-lg: rgba(124, 58, 237, 0.20);
            --transition: all 0.35s ease;
            --radius-lg: 20px;
            --radius-md: 14px;
            --radius-sm: 12px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Vazirmatn', sans-serif;
            background-color: #faf8ff;
            color: var(--dark);
            direction: rtl;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            line-height: 1.6;
        }

        /* ==========================================
           هدر - طراحی مدرن
           ========================================== */
        .header-container-wrapper {
            position: sticky;
            top: 0;
            z-index: 1000;
            padding: 14px 0;
            transition: var(--transition);
        }
        .header-container-wrapper.scrolled {
            padding: 8px 0;
        }
        .main-header {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 100px;
            box-shadow: 0 8px 32px var(--shadow-md);
            border: 1px solid rgba(124, 58, 237, 0.1);
            transition: var(--transition);
        }
        .header-container-wrapper.scrolled .main-header {
            box-shadow: 0 12px 40px var(--shadow-lg);
            background: rgba(255, 255, 255, 0.95);
        }
        .header-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 24px;
            gap: 16px;
        }
        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            flex-shrink: 0;
        }
        .logo-img {
            height: 44px;
            width: auto;
            object-fit: contain;
            transition: transform 0.3s ease;
        }
        .logo:hover .logo-img { transform: scale(1.06); }

        .main-nav .navbar-nav { gap: 6px; }
        .main-nav .nav-link {
            color: var(--dark);
            font-size: 14px;
            font-weight: 600;
            transition: var(--transition);
            padding: 8px 16px !important;
            border-radius: 30px;
            position: relative;
        }
        .main-nav .nav-link.active {
            color: var(--primary);
            background-color: var(--primary-bg);
            font-weight: 700;
        }
        .main-nav .nav-link:hover {
            color: var(--primary);
            background-color: var(--primary-pale);
        }

        .icon-btn-clean {
            background: #f5f3fa;
            border: none;
            color: var(--dark);
            font-size: 17px;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 50%;
        }
        .icon-btn-clean:hover {
            color: var(--primary);
            background-color: var(--primary-bg);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px var(--shadow-sm);
        }
        .cart-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: var(--white);
            font-size: 10px;
            font-weight: 700;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 8px rgba(239, 68, 68, 0.5);
            border: 2px solid var(--white);
            animation: pulse-badge 2s infinite;
        }
        @keyframes pulse-badge {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }

        .btn-account {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: var(--white) !important;
            padding: 11px 24px;
            border-radius: 50px;
            text-decoration: none;
            font-size: 13.5px;
            font-weight: 700;
            box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }
        .btn-account:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45);
            color: var(--white) !important;
        }

        .search-box-header {
            display: flex;
            align-items: center;
            background: #f5f3fa;
            border: 2px solid transparent;
            border-radius: 50px;
            padding: 5px;
            transition: var(--transition);
            width: 220px;
        }
        .search-box-header:focus-within {
            background: #fff;
            border-color: var(--primary);
            box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.08);
            width: 250px;
        }
        .search-input-header {
            border: none;
            background: transparent;
            padding: 8px 14px 8px 4px;
            font-size: 13px;
            font-weight: 500;
            width: 100%;
            font-family: 'Vazirmatn', sans-serif;
            color: var(--dark);
            outline: none;
        }
        .search-input-header::placeholder { color: #b0a8c0; font-size: 12px; }
        .search-btn-header {
            background: var(--primary);
            color: #fff;
            border: none;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            flex-shrink: 0;
            font-size: 13px;
        }
        .search-btn-header:hover {
            background: var(--primary-hover);
            transform: scale(1.08);
        }

        /* BREADCRUMB */
        .breadcrumb-nav { max-width: 1200px; margin: 20px auto 20px; padding: 0 20px; font-size: 13px; color: var(--gray-light); }
        .breadcrumb-nav a { color: var(--primary); text-decoration: none; font-weight: 600; }
        .breadcrumb-nav a:hover { text-decoration: underline; }
        .breadcrumb-nav span { color: var(--gray); }

        /* LAYOUT */
        .product-page { max-width: 1200px; margin: 0 auto 40px; padding: 0 20px; }
        .product-layout { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
        .card-box { background: var(--white); border: 1px solid #e5e7eb; border-radius: var(--radius-lg); box-shadow: 0 2px 12px var(--shadow-sm); }

        /* HERO CARD & IMAGE FIX */
        .hero-card { padding: 26px; display: flex; align-items: center; gap: 22px; position: relative; }
        .hero-icon {
            flex-shrink: 0;
            width: 140px; /* Increased size for better visibility */
            height: 140px;
            border-radius: 24px;
            background: var(--primary-pale);
            border: 2px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden; /* Critical for containing the image */
            transition: var(--transition);
            position: relative;
        }
        .hero-card:hover .hero-icon { border-color: var(--primary-light); box-shadow: 0 8px 20px var(--shadow-md); }
        
        /* IMAGE 100% SCALE FIX */
        .hero-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures image fills frame without distortion */
            transition: transform 0.5s ease;
        }
        .hero-card:hover .hero-icon img {
            transform: scale(1.08); /* Subtle professional zoom on hover */
        }

        .hero-info { flex: 1; min-width: 0; }
        .product-name-large { font-size: 23px; font-weight: 900; color: var(--dark); margin-bottom: 4px; line-height: 1.4; }
        .product-category-tag { display: inline-block; color: var(--gray); font-size: 12.5px; font-weight: 500; margin-bottom: 12px; }
        .hero-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
        .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 30px; font-size: 12px; font-weight: 700; }
        .pill-safe { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
        .pill-warranty { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
        .pill-discount { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
        .pill-stock { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
        .pill-stock.out { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
        .hero-side { margin-inline-start: auto; align-self: flex-start; }
        .product-rating { display: flex; align-items: center; gap: 8px; }
        .product-rating .num { font-weight: 800; font-size: 14px; color: var(--dark); }
        .product-rating .stars { color: #f59e0b; font-size: 13px; letter-spacing: 2px; }
        .product-rating .count { color: var(--gray); font-size: 12px; }

        /* SELECT BOXES */
        .select-card { margin-top: 18px; padding: 20px 24px; }
        .select-card .select-title { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
        .select-card .select-title i { color: var(--primary); font-size: 14px; }
        .plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .plan-btn { padding: 11px 8px; border: 2px solid #e5e7eb; border-radius: var(--radius-sm); background: var(--white); cursor: pointer; transition: var(--transition); text-align: center; font-size: 12.5px; font-weight: 700; color: var(--dark); font-family: 'Vazirmatn', sans-serif; line-height: 1.5; }
        .plan-btn:hover { border-color: var(--primary-light); transform: translateY(-2px); }
        .plan-btn.active { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); box-shadow: 0 4px 14px var(--shadow-md); }

        /* SIDEBAR */
        .sidebar-col { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 100px; }
        .trust-card { padding: 13px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .trust-label { background: linear-gradient(135deg, #059669, #10b981); color: #fff; padding: 6px 16px; border-radius: 10px; font-weight: 800; font-size: 13px; }
        .trust-stars { display: flex; gap: 3px; }
        .trust-stars span { width: 22px; height: 22px; background: var(--success); color: #fff; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
        .trust-count { color: var(--gray); font-size: 11.5px; font-weight: 600; }
        .guarantee-banner { padding: 13px 18px; border-radius: var(--radius-md); background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 1px solid #a7f3d0; color: #065f46; font-weight: 800; font-size: 13.5px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: var(--transition); }
        .guarantee-banner:hover { box-shadow: 0 6px 18px rgba(16, 185, 129, 0.18); }
        .guarantee-banner i.fa-shield-halved { font-size: 17px; }
        .guarantee-banner i.fa-chevron-left { margin-inline-start: auto; font-size: 12px; opacity: .6; }
        .summary-card { padding: 24px 24px 22px; }
        .sidebar-title { font-size: 16.5px; font-weight: 800; color: var(--dark); margin-bottom: 14px; line-height: 1.5; padding-bottom: 12px; border-bottom: 2px solid var(--primary-pale); }
        .sidebar-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; }
        .sidebar-item .label { color: var(--gray); font-size: 13px; font-weight: 500; }
        .sidebar-item .value { font-weight: 700; font-size: 13px; color: var(--dark); }
        .sidebar-item .value.instant { color: var(--success); }
        .sum-divider { border-top: 1px dashed #e5e7eb; margin: 10px 0 12px; }
        .sum-price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
        .sum-price-row .label { color: var(--gray); font-size: 13px; font-weight: 500; }
        .price-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
        .old-price { color: var(--gray-light); font-size: 12px; font-weight: 600; text-decoration: line-through; }
        .price-wrap .value.highlight { color: var(--primary); font-size: 21px; font-weight: 900; }
        .sidebar-price-box { background: linear-gradient(135deg, var(--primary-bg), var(--primary-pale)); padding: 14px 18px; border-radius: var(--radius-sm); text-align: center; margin: 8px 0 16px; border: 1px solid rgba(124, 58, 237, 0.08); }
        .sidebar-price-box .price { font-size: 28px; font-weight: 900; color: var(--primary); }
        .btn-buy { width: 100%; background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: var(--white); border: none; padding: 14px; border-radius: var(--radius-sm); font-size: 16px; font-weight: 800; font-family: 'Vazirmatn', sans-serif; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3); }
        .btn-buy:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4); color: var(--white); }
        .btn-buy.disabled, .btn-buy:disabled { background: #e5e7eb; color: var(--gray-light); cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }

        /* ==========================================
           PROFESSIONAL DESCRIPTION SECTION
           ========================================== */
        .description-section {
            margin-top: 30px;
            background: var(--white);
            border: 1px solid #e5e7eb;
            border-radius: var(--radius-lg);
            box-shadow: 0 2px 12px var(--shadow-sm);
            overflow: hidden;
        }
        
        .desc-tabs {
            display: flex;
            border-bottom: 1px solid #e5e7eb;
            background: #fafafa;
        }
        
        .desc-tab {
            padding: 16px 28px;
            font-weight: 700;
            font-size: 14px;
            color: var(--gray);
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: var(--transition);
        }
        
        .desc-tab:hover { color: var(--primary); background: var(--primary-pale); }
        .desc-tab.active { 
            color: var(--primary); 
            border-bottom-color: var(--primary); 
            background: var(--white);
        }

        .desc-content {
            padding: 32px;
            display: none;
            animation: fadeIn 0.4s ease;
        }
        .desc-content.active { display: block; }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

        /* Typography for Description */
        .prose h2, .prose h3, .prose h4 { color: var(--dark); margin-top: 1.5em; margin-bottom: 0.8em; font-weight: 800; }
        .prose h2 { font-size: 20px; border-right: 4px solid var(--primary); padding-right: 12px; }
        .prose h3 { font-size: 17px; color: var(--primary-hover); }
        .prose p { line-height: 1.9; color: #4b5563; margin-bottom: 1.2em; font-size: 14.5px; text-align: justify; }
        .prose ul, .prose ol { margin-bottom: 1.5em; padding-right: 24px; color: #4b5563; }
        .prose li { margin-bottom: 8px; line-height: 1.8; position: relative; }
        .prose ul li::marker { color: var(--primary); }
        .prose strong { color: var(--dark); font-weight: 700; }
        .prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 20px 0; border: 1px solid #e5e7eb; }
        .prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13.5px; }
        .prose th, .prose td { padding: 12px 16px; border: 1px solid #e5e7eb; text-align: right; }
        .prose th { background: var(--primary-pale); color: var(--primary-hover); font-weight: 700; width: 30%; }

        /* RELATED PRODUCTS */
        .related-section { margin-top: 40px; }
        .related-section .section-title { font-size: 18px; font-weight: 800; color: var(--dark); margin-bottom: 16px; position: relative; display: inline-block; }
        .related-section .section-title::after { content: ''; position: absolute; bottom: -6px; right: 0; width: 40px; height: 3px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 4px; }
        .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .related-card { background: var(--white); border: 1px solid #e5e7eb; border-radius: var(--radius-md); padding: 14px; text-decoration: none; color: inherit; transition: var(--transition); display: flex; flex-direction: column; }
        .related-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: 0 12px 30px var(--shadow-md); }
        .related-card .related-img { width: 100%; aspect-ratio: 1 / 1; background: var(--primary-pale); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #e5e7eb; margin-bottom: 10px; }
        .related-card .related-img img { width: 100% !important; height: 100% !important; object-fit: cover; }
        .related-card .related-name { font-size: 13px; font-weight: 700; color: var(--dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
        .related-card .related-price { font-size: 14px; font-weight: 900; color: var(--primary); margin-top: auto; }

        /* RESPONSIVE */
        @media (max-width: 1024px) {
            .product-layout { grid-template-columns: 1fr; }
            .sidebar-col { position: static; order: -1; } /* Move sidebar to top on tablet */
            .plan-grid { grid-template-columns: repeat(3, 1fr); }
            .related-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .product-page { padding: 0 15px; }
            .header-wrapper { padding: 8px 12px; }
            .search-box-header { width: 150px; }
            .search-box-header:focus-within { width: 180px; }
            .hero-card { padding: 18px; gap: 16px; flex-direction: column; text-align: center; }
            .hero-icon { width: 120px; height: 120px; border-radius: 20px; margin: 0 auto; }
            .product-name-large { font-size: 19px; }
            .hero-badges { justify-content: center; }
            .product-rating { justify-content: center; }
            .hero-side { margin: 0 auto; }
            .plan-grid { grid-template-columns: repeat(2, 1fr); }
            .desc-tab { padding: 12px 16px; font-size: 13px; }
            .desc-content { padding: 20px; }
            .related-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
        }
        @media (max-width: 480px) {
            .hero-icon { width: 100px; height: 100px; }
            .product-name-large { font-size: 16.5px; }
            .plan-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
            .sidebar-price-box .price { font-size: 24px; }
            .related-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
        }