:root {
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --secondary-color: #10b981;
    --dark-color: #0f172a;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-500: #64748b;
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08);
    --shadow-lg: 0 10px 25px -3px rgba(0,0,0,.1);
    --shadow-xl: 0 20px 40px -5px rgba(0,0,0,.15);
}

.page-content {
    margin-top: 80px;
    padding-bottom: 80px;
}

[data-bs-theme="dark"] .page-content {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .trust-section,
[data-bs-theme="dark"] .product-card,
[data-bs-theme="dark"] .product-body {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .section-header h2,
[data-bs-theme="dark"] .product-title,
[data-bs-theme="dark"] .trust-item h4 {
    color: #f8fafc !important;
}

/* ================== اسلایدر اصلی (Main Carousel) ================== */
.hero-slider-section {
    margin-bottom: 2rem;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}
.carousel-item {
    height: 360px; 
    position: relative;
    overflow: hidden;
}
.carousel-item img.slider-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.carousel-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 100%);
    z-index: 2;
}
.carousel-caption-custom {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    text-align: right;
    max-width: 600px;
    color: #fff;
    z-index: 3; /* باید بالاتر از لایه گرادیانت باشد */
}
.carousel-caption-custom h2 {
    font-size: 2.4rem;
    font-weight: 900;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.carousel-caption-custom p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}
.btn-explore {
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    color: #fff;
    padding: 0.9rem 2.5rem;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(99,102,241,0.4);
    transition: all 0.3s ease;
}
.btn-explore:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(99,102,241,0.5);
    color: #fff;
}

/* ================== بنرهای دسته‌بندی ================== */
.category-banners {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
}
@media (min-width: 768px) { .category-banners { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .category-banners { grid-template-columns: repeat(4, 1fr); } }

.cat-banner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 171px;
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: all 0.4s ease;
    background-color: var(--dark-color);
}
.cat-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
    opacity: 0.7;
}
.cat-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 80%);
}
.cat-banner:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.cat-banner:hover img { transform: scale(1.1); opacity: 0.9; }
.cat-banner h3 {
    position: relative;
    z-index: 2;
    color: #fff;
    margin: 0;
    font-weight: 800;
    font-size: 1.3rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ================== کارت محصولات ================== */
.product-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid var(--gray-100);
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-decoration: none !important;
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.product-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    padding: 1.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-image-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .5s ease; }
.product-card:hover .product-image-wrap img { transform: scale(1.1); }
.view-overlay {
    position: absolute; inset: 0; background: rgba(99,102,241,0.1); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.3s ease;
}
.view-overlay span {
    background: var(--primary-color); color: #fff; padding: 0.5rem 1.5rem; border-radius: 50px;
    font-weight: 700; transform: translateY(20px); transition: all 0.3s ease;
}
.product-card:hover .view-overlay { opacity: 1; }
.product-card:hover .view-overlay span { transform: translateY(0); }
.wishlist-btn {
    position: absolute; top: 12px; left: 12px; z-index: 5; background: #fff; border: none; border-radius: 50%;
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--gray-500);
    box-shadow: var(--shadow-md); transition: all .2s ease;
}
.wishlist-btn:hover { color: #ef4444; transform: scale(1.15); }
.wishlist-btn .fa-heart.fas { color: #ef4444; }
.product-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; text-align: center; background: #fff; }
.product-title { font-size: 1rem; font-weight: 800; margin: 0 0 .5rem; color: var(--dark-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-price { margin-top: auto; color: var(--primary-color); font-size: 1.25rem; font-weight: 900; }
.product-price .currency { font-size: 0.8rem; color: var(--gray-500); font-weight: 600; margin-right: 2px;}

/* ================== نوار محصولات متحرک پیشرفته ================== */
.section-header { margin-bottom: 2rem; border-bottom: 2px solid var(--gray-200); padding-bottom: 1rem; }
.section-header h2 { font-size: 1.8rem; font-weight: 900; color: var(--dark-color); margin: 0; }
.section-header h2 i { color: var(--primary-color); margin-left: 0.5rem; }

.auto-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 4rem;
}

.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    color: var(--primary-color);
    transition: all 0.3s ease;
    opacity: 0;
    font-size: 1.2rem;
}
.auto-slider-wrapper:hover .slider-nav-btn { opacity: 1; }
.slider-nav-btn:hover { background: var(--primary-color); color: #fff; transform: translateY(-50%) scale(1.1); }
.slider-nav-btn.prev-btn { right: 10px; }
.slider-nav-btn.next-btn { left: 10px; }
@media (max-width: 768px) { .slider-nav-btn { display: none; } }

.auto-slider-container { overflow: hidden; width: 100%; position: relative; padding: 1rem 0; }
.auto-slider-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none;
    cursor: grab;
}
.auto-slider-track:active { cursor: grabbing; }
.auto-slider-track::-webkit-scrollbar { display: none; } 
.auto-slider-track > * { min-width: 280px; max-width: 280px; flex: 0 0 auto; }

/* ================== گرید محصولات ================== */
.product-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 576px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* ================== ویژگی‌های فروشگاه ================== */
.trust-section {
    background: #fff;
    border-radius: 24px;
    padding: 3rem 2rem;
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
    border: 1px solid var(--gray-100);
}
@media (min-width: 768px) { .trust-section { grid-template-columns: repeat(4, 1fr); } }
.trust-item { text-align: center; }
.trust-icon {
    width: 70px; height: 70px; background: var(--gray-50); color: var(--primary-color);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; margin: 0 auto 1rem; transition: all 0.3s ease;
}
.trust-item:hover .trust-icon { background: var(--primary-color); color: #fff; transform: scale(1.1); }
.trust-item h4 { font-weight: 800; font-size: 1.1rem; color: var(--dark-color); }
.trust-item p { font-size: 0.85rem; color: var(--gray-500); margin: 0; }

/* ================== بخش محتوای سئو (UI جدید) ================== */
.seo-content-section { background: #fff; border-radius: 24px; border: 1px solid var(--gray-100); }
.seo-content-section .badge { background-color: var(--gray-100); color: var(--dark-color); border: 1px solid var(--gray-200); }
.seo-link { color: inherit; text-decoration: none; }
.seo-link:hover { text-decoration: underline; }

/* دارک مود بخش سئو */
[data-bs-theme="dark"] .seo-content-section { background-color: #1e293b !important; border-color: #334155 !important; }
[data-bs-theme="dark"] .seo-content-section h1 { color: #f8fafc !important; }
[data-bs-theme="dark"] .seo-content-section p { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .seo-content-section strong { color: #f1f5f9 !important; font-weight: 700; }
[data-bs-theme="dark"] .seo-content-section strong a { color: #a5b4fc !important; text-decoration: underline; }
[data-bs-theme="dark"] .seo-content-section strong a:hover { color: #c7d2fe !important; }
[data-bs-theme="dark"] .seo-content-section .badge { background-color: #334155 !important; color: #e2e8f0 !important; border: 1px solid #475569; }
[data-bs-theme="dark"] .seo-content-section .badge i { color: #a5b4fc !important; }
[data-bs-theme="dark"] .seo-content-section img { filter: brightness(0.9); }

/* ================== بهینه‌سازی موبایل ================== */
@media (max-width: 576px) {
    .page-content { margin-top: 65px; padding-bottom: 50px; }
    .hero-slider-section { border-radius: 16px; margin-bottom: 1.5rem; }
    .carousel-item { height: 220px; }
    .carousel-caption-custom { right: 5%; max-width: 90%; }
    .carousel-caption-custom h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
    .carousel-caption-custom p { font-size: 0.9rem; margin-bottom: 1rem; }
    .btn-explore { padding: 0.6rem 1.5rem; font-size: 0.9rem; }
    .category-banners { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 2rem; }
    .cat-banner { height: 130px; border-radius: 16px; padding: 1rem; }
    .cat-banner h3 { font-size: 0.9rem; }
    .section-header { margin-bottom: 1.2rem; padding-bottom: 0.7rem; }
    .section-header h2 { font-size: 1.2rem; }
    .auto-slider-wrapper { margin-bottom: 2rem; }
    .auto-slider-track { gap: 1rem; }
    .auto-slider-track > * { min-width: 240px; max-width: 240px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 2rem; }
    .product-image-wrap { padding: 1rem; }
    .product-body { padding: 1rem; }
    .product-title { font-size: 0.8rem; }
    .product-price { font-size: 1rem; }
    .wishlist-btn { width: 32px; height: 32px; top: 8px; left: 8px; }
    .trust-section { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 1.5rem 1rem; border-radius: 16px; margin-bottom: 2rem; }
    .trust-icon { width: 50px; height: 50px; font-size: 1.5rem; margin-bottom: 0.7rem; }
    .trust-item h4 { font-size: 0.9rem; }
    .trust-item p { font-size: 0.75rem; }
    .seo-content-section { padding: 1.5rem 1rem !important; margin-bottom: 2rem !important; }
    .seo-content-section h1 { font-size: 1.3rem; }
    .seo-content-section p { font-size: 0.9rem; }
    .badge { font-size: 0.8rem !important; }
}