/*
Theme Name: Gonaveh 24 New
Author: hadi
Version: 1.0
*/

@font-face {
    font-family: 'IRANSans';
    src: url('fonts/IRANSansWeb.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* نمایش سریع متن */
}

/* --- تعریف فونت ضخیم (Bold) --- */
@font-face {
    font-family: 'IRANSans';
    src: url('fonts/IRANSansWeb_Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* --- اعمال فونت به کل سایت --- */
body, h1, h2, h3, h4, h5, h6, p, a, span, button, input, select, textarea, li {
    font-family: 'IRANSans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    line-height: 1.6; /* تنظیم ارتفاع خط برای جلوگیری از پرش */
}

/* 3. تنظیمات کلی (Reset) */
body {
    background-color: #f8f9fa;
    color: #333;
    overflow-x: hidden; /* جلوگیری از اسکرول افقی ناخواسته */
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
    display: inline-block;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* --- استایل‌های هدر (Header Styles) --- */

/* سایز متن‌ها */
.font-12 { font-size: 11px; }
.font-14 { font-size: 12px; }

/* لینک‌های نوار بالا */
.top-links ul li {
    display: inline-block;
    margin-left: 20px;
}
.top-links a {
    color: #666;
    text-decoration: none;
    transition: 0.2s;
}
.top-links a:hover { color: #ef394e; } /* رنگ قرمز دیجی‌کالا */

.phone-number {
    font-size: 15px;  /* کوچک کردن اندازه فونت */
    color: #0918e8;   /* رنگ آبی روشن */
    text-decoration: none;  /* حذف خط زیر */
}

.phone-number:hover {
    text-decoration: underline;  /* اضافه کردن خط زیر در حالت هاور */
}

/* لینک‌دار کردن شماره تلفن */
.phone-number a {
    color: inherit;
    text-decoration: none;
}

/* سرچ باکس */
.search-box {
     background-color: #f0f0f1 !important;
    border: 1px solid transparent;
    transition: 0.3s;
    width: 100%;
    max-width: 700px; /* حداکثر عرض باکس (کوچکتر شد) */
    
}
.search-box:focus-within {
    background-color: #fff !important;
    box-shadow: 0 0 0 2px #e0e0e2;
}
.search-box input::placeholder {
    color: #a1a3a8;
    font-size: 13px;
}


/* اصلاحات نوار منوی پایین (Main Nav) */
.main-nav {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    position: relative;
    z-index: 10;
}

/* فاصله آیتم‌های منو */
.main-nav ul li {
    display: inline-block;
    margin-left: 25px;
}
.main-nav ul li a {
    color: #444;
    text-decoration: none;
    font-size: 14px;
    padding: 15px 0; /* ارتفاع نوار منو را تنظیم می‌کند */
    display: block;
    border-bottom: 3px solid transparent;
    transition: 0.2s;
}
.main-nav ul li a:hover {
    color: #ef394e;
    border-bottom-color: #ef394e;
}

/* باکس سبد خرید در نوار پایین */
.cart-login-box {
    padding-left: 20px;
    height: 100%;
}
.cart-login-box img {
    vertical-align: middle; /* تراز کردن عکس سبد خرید */
}

/* =========================================
   تنظیمات اختصاصی موبایل (Mobile Layout)
   ========================================= */

@media (max-width: 991px) {
    
    /* 1. تنظیمات شماره تلفن بالای موبایل */
    .mobile-top-phone {
        background-color: #fff;
        font-size: 13px; /* سایز فونت شماره */
        font-weight: bold;
    }
    .mobile-phone-number {
        font-family: Arial, Helvetica, sans-serif !important; /* فونت بدون لرزش */
        color: #000000 !important; /* رنگ متن را مشکی مطلق می‌کند */
        font-weight: bold; /* متن را کمی ضخیم‌تر می‌کند تا خواناتر شود */
        letter-spacing: 1px;
        font-size: 15px;       /* سایز دقیق */
        display: inline-block; /* برای اینکه عرض و ارتفاع بگیرد */
        min-width: 100px;      /* رزرو فضای کافی برای شماره */
        text-align: center;    /* وسط چین */
        line-height: 1;        /* جلوگیری از پرش عمودی */
    }

    /* 2. لوگوی موبایل (سمت چپ و کوچک) */
    .mobile-logo img {
        height: 35px; /* ارتفاع لوگو در موبایل */
        width: auto;
    }

    /* 3. باکس جستجوی موبایل */
    .d-lg-none .search-box {
        background-color: #f0f0f1 !important; /* طوسی */
        border-radius: 8px !important; /* گردی گوشه‌ها */
        margin-top: 15px;
    }
    
    /* 4. اصلاح فاصله دکمه منو */
    .d-lg-none .btn:focus {
        box-shadow: none;
    }
}

/* =========================================
   استایل‌های فوتر (Footer Styles)
   ========================================= */

.site-footer {
    background-color: #fcfcfc; /* رنگ پس‌زمینه خیلی روشن */
    font-size: 14px;
}

/* عنوان ستون‌ها */
.footer-title {
    font-weight: bold;
    color: #444;
    margin-bottom: 15px;
    font-size: 16px;
}

/* لینک‌های منو */
.footer-menu li {
    margin-bottom: 10px;
    position: relative;
    padding-right: 20px; /* جا برای آیکون تیک */
}

.footer-menu li a {
    color: #666;
    text-decoration: none;
    transition: 0.2s;
}

.footer-menu li a:hover {
    color: #ef394e;
}

/* آیکون تیک کنار لینک‌ها (شبیه عکس) */
.footer-menu li::before {
    content: '\2713'; /* کد یونیکد تیک */
    position: absolute;
    right: 0;
    color: #ccc; /* رنگ تیک خاکستری */
    font-weight: bold;
}

/* متن توضیحات */
.text-justify {
    text-align: justify;
}

/* آیکون‌های اجتماعی */
.social-icon {
    color: #888;
    transition: 0.2s;
    display: inline-block;
    margin: 0 5px;
}
.social-icon:hover {
    color: #333;
}
.bi-instagram:hover { color: #E1306C; }
.bi-telegram:hover { color: #0088cc; }
.bi-whatsapp:hover { color: #25D366; }


/* --- استایل کارت محصول (جدید) --- */

/* تنظیم فونت عنوان محصول */
.product-title-text {
    font-size: 13px;
    line-height: 24px; /* ارتفاع هر خط */
    font-weight: bold;
    color: #444;
    text-align: right;
    
    /* نمایش تا 2 خط (استاندارد دیجی‌کالا) */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* اگر می‌خواهید کل متن باشد، این خط را پاک کنید */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px; /* ارتفاع ثابت برای هم‌تراز شدن کارت‌ها (24px * 2) */
}

/* فونت ریز برای تومان */
.font-10 { font-size: 10px; }

/* دکمه سبد خرید در کارت */
.btn-outline-danger {
    border-color: #ef394e;
    color: #ef394e;
}
.btn-outline-danger:hover {
    background-color: #ef394e;
    color: #fff;
}

/* =========================================
   اصلاح ارتفاع کارت‌های محصول (Equal Height)
   ========================================= */

/* 1. تنظیم اسلایدهای Swiper */
.swiper-wrapper {
    align-items: stretch; /* باعث می‌شود همه اسلایدها هم‌قد شوند */
}

.swiper-slide {
    height: auto !important; /* ارتفاع اتوماتیک بر اساس بلندترین آیتم */
    display: flex; /* برای اینکه کارت داخلش بتواند کل ارتفاع را بگیرد */
}

/* 2. تنظیم کارت محصول */
.product-card {
    width: 100%; /* عرض کامل */
    height: 100%; /* ارتفاع کامل اسلاید */
}

.product-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* فاصله بین المان‌ها رو تنظیم می‌کنه */
}

/* 3. ثابت کردن ارتفاع عنوان (خیلی مهم) */
/* این باعث می‌شود حتی اگر اسم محصول کوتاه باشد، جای ۲ خط را اشغال کند تا کارت‌ها تراز بمانند */
.product-title-text {
    min-height: 48px; /* ارتفاع دقیق ۲ خط متن */
    max-height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* محدود کردن به ۲ خط */
    -webkit-box-orient: vertical;
    margin-bottom: 15px; /* فاصله از پایین */
}

 
/* --- تنظیمات عکس کارت محصول (بهینه شده) --- */
.product-card img {
    width: 100%;
    object-fit: contain;
    margin-bottom: 10px;
    
    /* در دسکتاپ ارتفاع کنترل شده باشد تا کارت‌ها یک‌اندازه شوند */
    height: 220px; 
}

/* تنظیمات مخصوص موبایل (برای بزرگتر دیده شدن عکس) */
@media (max-width: 768px) {
    .product-card img {
         height: auto !important;      /* ارتفاع اتوماتیک */
        max-height: 180px !important; /* حداکثر ارتفاع برای جلوگیری از درازی بیش از حد */
        width: 100%;
        object-fit: contain;          /* عکس کامل دیده شود */
        margin-bottom: 5px; 
    }
    
    .product-title-text {
        font-size: 11px !important;   /* سایز فونت ریزتر برای جا شدن */
        height: auto !important;      /* ارتفاع آزاد */
        min-height: 35px;             /* حداقل ارتفاع برای تراز شدن */
        
        /* نمایش چند خطی */
        white-space: normal !important; 
        display: -webkit-box;
        -webkit-line-clamp: 3;        /* تا 3 خط اجازه نمایش بده */
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;             /* فاصله خطوط */
    }
    
    /* اگر خواستید پدینگ کارت را هم در موبایل کم کنید تا عکس بزرگتر شود */
    .product-card .card-body {
        padding: 8px !important;
    }
}

/* =========================================
   استایل بخش مراحل خرید (Buying Steps)
   ========================================= */

.step-card {
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: #e0e0e0;
}

/* استایل آیکون‌های بالا (SVG) */
.step-icon {
    background: #f3f0ff; /* پس‌زمینه بنفش خیلی کمرنگ */
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* دایره */
    margin-bottom: 15px;
}

/* استایل عکس‌های تکی (پایین) */
.step-image img {
    max-height: 80px; /* ارتفاع ثابت برای یکدست شدن عکس‌ها */
    width: auto;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* شماره مرحله */
.step-number {
    font-family: sans-serif;
    color: #6f42c1 !important;
}


/* =========================================
   استایل بخش ویژگی‌ها (Features Bar) - نسخه نهایی و بهینه شده CLS
   ========================================= */

/* 1. کانتینر اصلی کارت */
.feature-card {
    border: 1px solid #f0f0f0;
    background-color: #fff;
    border-radius: 12px; /* گوشه‌های گرد */
    padding: 12px !important;
    
    /* قفل کردن ارتفاع (حیاتی برای CLS) */
    min-height: 75px; 
    height: 100%;
    
    display: flex;
    align-items: center;
    justify-content: flex-start; /* در دسکتاپ از راست شروع شود */
    
    transition: transform 0.2s, border-color 0.2s;
}

/* افکت هاور */
.feature-card:hover {
    transform: translateY(-3px);
    border-color: #e0e0e0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* 2. استایل آیکون‌ها (قفل کردن سایز) */
.feature-icon {
    flex-shrink: 0; /* جلوگیری از جمع شدن آیکون */
    margin-left: 10px;
}

.feature-icon svg {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px; /* قفل کردن عرض */
    display: block;
    fill: #0097a7; /* رنگ آیکون */
}

/* 3. استایل متن‌ها (قفل کردن ارتفاع خط) */
.feature-text {
    text-align: right;
    width: 100%;
}

/* عنوان (قبلا h6 بود الان div) */
.feature-text div {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    
    line-height: 1.4 !important; /* ارتفاع خط ثابت */
    min-height: 19px;            /* رزرو جای متن */
    margin-bottom: 2px;
}

/* زیرنویس */
.feature-text span {
    font-size: 11px;
    color: #888;
    
    display: block;
    line-height: 1.2 !important;
    min-height: 14px; /* رزرو جای زیرنویس */
}

/* =========================================
   تنظیمات ریسپانسیو (موبایل)
   ========================================= */
@media (max-width: 991px) {
    
    .feature-card {
        flex-direction: column; /* آیکون بالا، متن پایین */
        justify-content: center;
        text-align: center;
        
        /* افزایش ارتفاع در موبایل چون زیر هم هستند */
        min-height: 90px !important; 
        padding: 15px 10px !important;
    }
    
    .feature-icon {
        margin-left: 0;
        margin-bottom: 8px; /* فاصله آیکون تا متن */
    }
    
    .feature-text {
        text-align: center;
    }
    
    /* کمی بزرگتر کردن فونت در موبایل برای خوانایی */
    .feature-text div {
        font-size: 12px;
    }
}

/* =========================================
   استایل دسته‌بندی‌های دایره‌ای
   ========================================= */
.cat-img-box {
    width: 180px;       /* سایز بزرگ برای دسکتاپ */
    height: 180px;
    overflow: hidden;
    border: 5px solid #fff; /* حاشیه کمی ضخیم‌تر */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, border-color 0.3s;
    margin: 0 auto 15px auto; /* وسط‌چین و فاصله از متن پایین */
}

.cat-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* افکت هاور */
.cat-circle-item:hover .cat-img-box {
    transform: scale(1.05);
    border-color: #ef394e;
}

.cat-circle-item:hover .cat-title {
    color: #ef394e !important;
}

/* سایز فونت عنوان */
.cat-title {
    font-size: 15px; /* فونت کمی درشت‌تر */
    margin-top: 10px;
}

/* تنظیمات موبایل */
@media (max-width: 991px) {
    .cat-img-box {
        width: 100px;  /* سایز مناسب برای دو ستونه موبایل */
        height: 100px;
        border-width: 3px;
    }
    
    .cat-title {
        font-size: 13px;
    }
}

/* =========================================
   استایل صفحه آرشیو/دسته بندی
   ========================================= */

/* استایل آیتم‌های سایدبار */
.side-prod-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.side-img {
    border: 1px solid #eee;
}

.sidebar-title {
    font-size: 16px;
    color: #444;
}

.pagination-box .page-numbers {
    display: inline-block;
    padding: 5px 12px;
    margin: 0 2px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.pagination-box .page-numbers.current {
    background: #ef394e;
    color: #fff;
    border-color: #ef394e;
}

.pagination-box .page-numbers:hover:not(.current) {
    background: #f0f0f0;
}

/* متن توضیحات دسته */
.cat-desc-top h1 {
    font-size: 1.5rem; /* تنظیم سایز H1 داخل توضیحات */
    margin-bottom: 15px;
}

.cat-desc-top {
    /* به مرورگر می‌گوید این بخش مستقل است و سریع رندرش کن */
    contain: content; 
    content-visibility: auto;
}

/* ایجاد تباین برای کارت محصول داخل باکس سفید */
.product-archive-box .product-card {
    border: 1px solid #eee !important; /* کادر طوسی کمرنگ دور هر محصول */
    box-shadow: none !important; /* حذف سایه برای تمیزتر شدن */
}

.product-archive-box .product-card:hover {
    border-color: #ccc !important; /* تیره‌تر شدن کادر هنگام موس */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; /* سایه فقط موقع هاور */
}

/* =========================================
   استایل صفحه تکی محصول (Single Product)
   ========================================= */

/* مسیر راهنما */
.breadcrumb-item a {
    color: #666;
    text-decoration: none;
}
.breadcrumb-item.active {
    color: #999;
}

/* عنوان انگلیسی */
.product-en-title {
    font-family: sans-serif; /* فونت انگلیسی ساده */
    letter-spacing: 0.5px;
}

/* =========================================
   استایل باکس عنوان محصول (Title Box)
   ========================================= */

.product-title-box {
    background-color: #f9fafa; /* رنگ خیلی ملایم (نزدیک به سفید/طوسی) */
    border: 1px solid #eee;    /* کادر نازک */
    border-radius: 12px;       /* گوشه‌های گرد */
    padding: 20px;             /* فضای داخلی */
    text-align: right;
}

/* تنظیم فاصله و فونت عنوان اصلی */
.product-title {
    margin-bottom: 12px !important; /* فاصله از زیرنویس */
    font-size: 22px !important;     /* سایز مناسب */
    line-height: 1.5;
}

/* تنظیم عنوان انگلیسی */
.product-en-title {
    margin-bottom: 0 !important;    /* حذف فاصله اضافه پایین */
    font-size: 16px !important;     /* کوچکتر از فارسی */
    font-weight: normal;
    color: #777 !important;         /* رنگ طوسی */
    letter-spacing: 0.5px;          /* خوانایی بهتر انگلیسی */
}

/* =========================================
   استایل ویژگی‌های کلیدی (نهایی - فشرده و چندخطی)
   ========================================= */
.key-features h3 {
    font-size: 18px;
}
.key-features ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* دو ستون */
    gap: 5px 20px; /* فاصله */
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

/* تنظیمات کلی برای هر آیتم لیست */
.key-features li {
    border: none !important;
    padding: 3px 0 !important;
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.6;
    
    /* این خطوط حیاتی هستند برای شکستن متن */
    display: block !important; /* تغییر از flex به block برای سازگاری با متن‌های قدیمی */
    white-space: normal !important; /* حتما بشکند */
    word-wrap: break-word !important; /* کلمات طولانی بشکنند */
    overflow-wrap: break-word !important;
    color: #666; /* رنگ پیش‌فرض متن */
}

/* اگر سیستم جدید باشد (یعنی تگ span داشته باشد) */
.key-features li span.fw-bold {
    color: #000;
    font-weight: 900;
    float: right; /* عنوان سمت راست بماند */
    margin-left: 5px;
}

.key-features li span.text-muted {
    color: #666;
    font-weight: normal;
    /* این باعث می‌شود متن مقدار، ادامه عنوان قرار گیرد و اگر جا نشد بشکند */
    display: inline; 
}

/* تنظیم آیکون (چه قدیم چه جدید) */
.key-features li i, 
.key-features li::before {
    display: none; /* آیکون‌های قدیمی یا بولت‌ها را مخفی کن تا فضا باز شود */
}

/* --- حالت موبایل: تک ستونه --- */
@media (max-width: 768px) {
    .key-features ul {
        grid-template-columns: 1fr;
    }
    .key-features li {
        border-bottom: 1px dashed #eee !important; /* خط جداکننده در موبایل */
        padding-bottom: 5px !important;
        margin-bottom: 5px !important;
    }
}

/* باکس خرید */
.purchase-box {
    background-color: #f8f9fa; /* خاکستری خیلی روشن */
    border: 1px solid #e9ecef;
}

/* سایز عکس اصلی */
.main-image-box img {
    width: 100%;
    height: auto;
    
    /* فرض بر این است که عکس‌های محصولات شما مربعی هستند */
    /* اگر مستطیل هستند، نسبت را تغییر دهید (مثلا 4/3) */
    aspect-ratio: 1 / 1; 
    
    object-fit: contain; /* عکس دفرمه نشود */
}


/* =========================================
   استایل باکس نوسان قیمت
   ========================================= */

.price-fluctuation-box {
    background-color: #ffffff; /* بک‌گراند سفید */
    border: 2px solid #f0f0f0; /* بوردر طوسی روشن (یا #ef394e برای قرمز) */
    border-radius: 12px;       /* گوشه‌های گرد */
    padding: 15px 20px;        /* فاصله داخلی */
    text-align: center;        /* وسط چین */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* سایه خیلی ملایم */
    font-size: 13px;
    line-height: 1.8;
    color: #444;
}

/* تنظیم پاراگراف‌های داخلی */
.price-fluctuation-box p {
    margin-bottom: 10px;
}
.price-fluctuation-box p:last-child {
    margin-bottom: 0;
}

/* استایل لینک‌ها و شماره‌ها (اگر در ادیتور لینک دادید) */
.price-fluctuation-box a {
    text-decoration: none;
    font-weight: bold;
}

/* =========================================
   استایل گالری تصاویر محصول
   ========================================= */

.product-gallery-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto; /* اسکرول افقی فعال باشد */
    padding-bottom: 5px;
   
}


.thumb-item {
    transition: 0.2s;
    background: #fff;
    cursor: pointer;
    min-width: 74px; /* عرض ثابت برای جمع نشدن عکس‌ها */
    border: 1px solid #eee;
    border-radius: 8px;
}

.thumb-item:hover {
    border-color: #999 !important;
}

/* عکس انتخاب شده */
.selected-thumb {
    border: 2px solid #ef394e !important;
}

/* =========================================
   استایل تب‌های محصول (Tabs)
   ========================================= */

.product-details-tabs .nav-tabs {
    border-bottom: none; /* حذف خط پیش‌فرض بوت‌استرپ */
}

.product-details-tabs .nav-link {
    color: #555;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: none; /* وصل شدن به باکس پایین */
    margin-left: 5px;
    border-radius: 8px 8px 0 0;
    padding: 12px 20px;
    transition: 0.3s;
}

/* تب فعال */
.product-details-tabs .nav-link.active {
    color: #c92a3e; /* رنگ قرمز برند */
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff; /* خط پایین سفید شود تا به محتوا وصل شود */
    box-shadow: 0 -3px 0 #ef394e inset; /* نوار قرمز بالای تب */
}

.product-details-tabs .nav-link:hover:not(.active) {
    background-color: #e9ecef;
    color: #333;
}

/* استایل جدول مشخصات */
.product-details-tabs table th, 
.product-details-tabs table td {
    padding: 12px 15px;
    vertical-align: middle;
}

/* استایل محتوای توضیحات */
.product-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 10px 0;
}

.product-content h2, 
.product-content h3 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
}

/* --- استایل جدول مشخصات فنی (اصلاح شده) --- */
.product-details-tabs table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #eee; /* کادر دور کل جدول */
}

/* ستون سمت راست (عنوان ویژگی: مثلا "ویژگی‌های هوشمند") */
.product-details-tabs table th {
    background-color: #f9f9f9 !important; /* پس‌زمینه خاکستری ملایم */
    color: #555;
    font-weight: bold !important;
    font-size: 14px !important;
    padding: 15px !important;
    vertical-align: middle;
    width: 30%;
    border-bottom: 1px solid #eee; /* خط جداکننده زیرین */
    border-left: 1px solid #eee;   /* خط جداکننده عمودی */
}

/* ستون سمت چپ (مقدار ویژگی: مثلا لیست قابلیت‌ها) */
.product-details-tabs table td {
    background-color: #ffffff !important; /* پس‌زمینه کاملاً سفید */
    color: #333;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.8 !important;
    padding: 15px !important;
    border-bottom: 1px solid #eee; /* خط جداکننده زیرین */
}

/* تنظیمات ریسپانسیو (موبایل) */
@media (max-width: 768px) {
    .product-details-tabs table th, 
    .product-details-tabs table td {
        display: block;
        width: 100% !important;
        border-left: none; /* حذف خط عمودی در موبایل */
    }
    
    .product-details-tabs table th {
        background-color: #eee !important; /* تیره‌تر در موبایل برای تمایز */
        color: #000;
    }
}

/* =========================================
   استایل بخش توضیح کوتاه (ویدئو)
   ========================================= */

.product-video-content img,
.product-video-content video,
.product-video-content iframe {
    max-width: 100%; /* عرض بیشتر از کادر نشود */
    height: auto;    /* ارتفاع اتوماتیک */
    border-radius: 8px; /* گوشه‌های گرد */
    display: block;
    margin: 10px auto; /* وسط‌چین کردن ویدئو */
}

/* تنظیم فاصله پاراگراف‌ها */
.product-video-content p {
    margin-bottom: 15px;
    color: #444;
}

code
CSS
/* استایل باکس نتیجه یافت نشد */
.no-result-box {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* =========================================
   استایل صفحه سبد خرید (طرح جدید)
   ========================================= */

.cart-item:last-child {
    border-bottom: none !important;
}

/* عنوان محصول کوچک و ظریف */
.cart-title {
    font-size: 13px !important;
    line-height: 1.6;
    font-weight: bold;
}

/* دکمه حذف (ضربدر خاکستری) */
.remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: 0.2s;
    color: #aaa;
}

.remove-btn:hover {
    background-color: #f0f0f0;
    color: #ef394e; /* قرمز شدن هنگام هاور */
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .cart-item {
        flex-wrap: wrap;
    }
    .cart-item > div {
        width: 100% !important;
        margin-top: 10px;
        text-align: right !important;
    }
    .cart-item .d-flex {
        width: 100% !important;
    }
    .remove-btn {
        margin-right: auto;
    }
}

/* =========================================
   استایل مسیر راهنما (Rank Math) - اصلاح کنتراست
   ========================================= */

.rank-math-breadcrumb-box {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
    
    /* اصلاح رنگ: تیره‌تر شد (#444) */
    font-size: 14px !important;
    color: #444; 
}

/* لینک‌ها (دسته‌ها و خانه) */
.rank-math-breadcrumb-box a {
    color: #333; /* رنگ تقریباً مشکی برای لینک‌ها */
    text-decoration: none;
    font-weight: 500;
    transition: 0.2s;
}

.rank-math-breadcrumb-box a:hover {
    color: #ef394e;
    text-decoration: underline;
}

/* آیتم آخر (محصول فعلی - که خطا داشت) */
.rank-math-breadcrumb-box .last {
    color: #555; /* اصلاح: از #999 به #555 تغییر کرد (تیره‌تر) */
    font-weight: 600; /* کمی ضخیم‌تر برای خوانایی بهتر */
}

/* جداکننده (/) */
.rank-math-breadcrumb-box .separator {
    margin: 0 10px;
    color: #666; /* این هم تیره‌تر شد */
    font-size: 13px;
}

/* =========================================
   استایل وبلاگ (Blog Styles)
   ========================================= */

/* افکت هاور روی کارت‌های وبلاگ */
.blog-card {
    transition: transform 0.3s, box-shadow 0.3s;
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

.title-hover:hover {
    color: #ef394e !important;
}

/* استایل متن داخل مقاله */
.article-content h2, 
.article-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
}

.article-content p {
    margin-bottom: 20px;
    color: #444;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
}


/* =========================================
   استایل مگامنو (Mega Menu) - اصلاح شده (کانتینر + ۶ ستون)
   ========================================= */

@media (min-width: 992px) {
    
    /* 1. تنظیم کانتینر برای اینکه منو بیرون نزند */
    .main-nav .container {
        position: relative; /* این خط حیاتی است برای عرض استاندارد */
    }

    /* 2. آیتم اصلی */
    .main-nav li.mega-menu {
        position: static; /* اجازه می‌دهد منو نسبت به کانتینر باز شود */
    }

    /* 3. باکس اصلی مگامنو */
    .main-nav li.mega-menu > ul.sub-menu {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%; /* عرض ۱۰۰٪ نسبت به کانتینر */
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 20px;
        border-top: 3px solid #ef394e;
        z-index: 999;
        
        opacity: 0;
        visibility: hidden;
        top: 120%;
        transition: all 0.3s ease;
        
        pointer-events: none; 
        
        /* تغییر به ۶ ستون */
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* اینجا شد ۶ ستون */
        gap: 15px; /* فاصله بین ستون‌ها را کمی کم کردم تا ۶ تا جا شوند */
    }

    /* نمایش */
    .main-nav li.mega-menu:hover > ul.sub-menu {
        opacity: 1;
        visibility: visible;
        top: 100%;
        pointer-events: auto;
    }

    /* 4. استایل ستون‌ها */
    .main-nav li.mega-menu > ul.sub-menu > li {
        display: block;
        border-left: 1px solid #eee;
        padding-right: 10px;
        padding-left: 10px;
    }
    .main-nav li.mega-menu > ul.sub-menu > li:last-child {
        border-left: none;
    }

    /* عنوان ستون */
    .main-nav li.mega-menu > ul.sub-menu > li > a {
        font-weight: bold;
        color: #0091ea;
        font-size: 13px; /* کمی ریزتر برای جا شدن */
        border-bottom: 2px solid #0091ea;
        display: inline-block;
        margin-bottom: 10px;
        padding-bottom: 5px;
        white-space: nowrap; /* جلوگیری از شکستن خط عنوان */
    }

    /* آیتم‌های زیرمجموعه */
    .main-nav li.mega-menu > ul.sub-menu > li > ul.sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        display: block;
        padding: 0;
        opacity: 1;
        visibility: visible;
    }

    .main-nav li.mega-menu > ul.sub-menu > li > ul.sub-menu li {
        margin: 0;
        display: block;
    }

    .main-nav li.mega-menu > ul.sub-menu > li > ul.sub-menu li a {
        color: #555;
        font-size: 12px;
        padding: 3px 0;
        font-weight: normal;
        border: none;
    }
    
    .main-nav li.mega-menu > ul.sub-menu > li > ul.sub-menu li a:hover {
        color: #ef394e;
        padding-right: 5px;
    }
}

/* =========================================
   اصلاحات موبایل (تب‌ها و فرم نظرات)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. تنظیم تب‌ها در یک خط (اسکرول افقی) */
    .product-details-tabs .nav-tabs {
        display: flex;
        flex-wrap: nowrap !important; /* جلوگیری از شکستن خط */
        overflow-x: auto; /* فعال کردن اسکرول افقی */
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* اسکرول نرم در موبایل */
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 0;
        scrollbar-width: none; /* مخفی کردن نوار اسکرول در فایرفاکس */
    }
    
    /* مخفی کردن نوار اسکرول در کروم و سافاری */
    .product-details-tabs .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .product-details-tabs .nav-link {
        font-size: 13px; /* فونت کمی ریزتر */
        padding: 10px 15px;
        border-radius: 0; /* حذف گردی گوشه‌ها برای چسبیدن به هم */
        flex-shrink: 0; /* جلوگیری از له شدن دکمه‌ها */
    }

    /* 2. حل مشکل بیرون زدگی فرم نظرات */
    #respond {
        width: 100%;
        overflow: hidden; /* جلوگیری از اسکرول افقی صفحه */
        padding: 0;
    }
    
    .comment-form {
        width: 100%;
        max-width: 100%;
    }

    /* تنظیم ورودی‌های فرم که از کادر نزنند بیرون */
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important; /* این خط حیاتی است */
        padding: 10px;
    }
    
    /* تنظیم دکمه ارسال نظر */
    .form-submit .submit {
        width: 100%;
        margin-top: 10px;
    }
}

/* =========================================
   تنظیمات اختصاصی موبایل (Mobile Layout) - اصلاح نهایی
   ========================================= */

@media (max-width: 991px) {
    
    /* 1. تنظیم عرض منوی کشویی (که کل صفحه را نگیرد) */
    .offcanvas {
        width: 300px !important; /* عرض ثابت و استاندارد */
        max-width: 80% !important; /* در گوشی‌های خیلی کوچک، ۸۰ درصد صفحه را بگیرد */
    }

    /* 2. تنظیم جهت و چیدمان منو */
    .offcanvas-body {
        padding: 0;
        direction: rtl; /* تضمین راست‌چین بودن */
        text-align: right;
    }

    /* 3. استایل آیتم‌های لیست */
    .mobile-nav-list li {
        border-bottom: 1px solid #f0f0f0;
        position: relative; /* برای اینکه دکمه مثبت نسبت به این تنظیم شود */
    }

    /* 4. استایل لینک‌ها (فاصله دادن از چپ برای دکمه مثبت) */
    .mobile-nav-list a {
        display: block;
        padding: 12px 15px 12px 50px; /* 50px فاصله از چپ برای دکمه + */
        color: #333;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        text-align: right;
    }

    /* 5. استایل دکمه مثبت/منفی (سمت چپ) */
    .mobile-nav-list li.menu-item-has-children > .toggle-btn {
        position: absolute;
        left: 0; /* چسبیدن به چپ */
        top: 0;
        width: 45px; /* عرض دکمه */
        height: 46px; /* هم‌ارتفاع با سطر */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 20px;
        color: #666;
        background: transparent;
        border: none;
        border-right: 1px solid #f5f5f5; /* خط جداکننده ظریف */
        z-index: 10;
        padding-bottom: 3px;
    }

    /* تغییر رنگ دکمه وقتی باز است */
    .mobile-nav-list li.open > .toggle-btn {
        color: #ef394e;
        background-color: #fff5f6;
        
        transition: 0.3s;
    }

    .mobile-nav-list li.open > a {
        color: #ef394e;
    }

    /* 6. استایل زیرمنوها */
    .mobile-nav-list .sub-menu {
        display: none;
        background-color: #fcfcfc;
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.03);
    }
    
    /* لینک‌های زیرمنو (کمی تو رفتگی) */
    .mobile-nav-list .sub-menu a {
        font-weight: normal;
        font-size: 13px;
        color: #555;
        padding-right: 25px; /* فاصله بیشتر از راست */
    }

    /* 7. تنظیمات هدر موبایل (لوگو و دکمه‌ها) */
    .mobile-top-phone {
        background-color: #fff;
        font-size: 13px;
        font-weight: bold;
    }
    .mobile-phone-number {
        color: #00b0ff;
        letter-spacing: 1px;
    }
    
    /* بخش تغییر کرده */
    .mobile-logo img {
    width: 100%;
    max-width: 210px; /* عرضی که باعث میشه ارتفاع حدود 35px بشه */
    height: auto;
    aspect-ratio: 324 / 54; /* قفل کردن جای عکس */
    }
    
    .d-lg-none .search-box {
        background-color: #f0f0f1 !important;
        border-radius: 8px !important;
        margin-top: 15px !important;
    }
}

/* =========================================
   استایل انتخاب رنگ/سایز (Variations) - نهایی
   ========================================= */

/* 1. تنظیم کادر اصلی (اضافه کردن خط بالا) */
.product-variants {
    border-top: 1px solid #eee; /* خط جداکننده بالا */
    padding-top: 20px;          /* فاصله داخلی از خط بالا */
    margin-top: 20px;           /* فاصله خارجی از المان بالایی */
    margin-bottom: 20px;        /* فاصله از پایین */
    border-bottom: 1px solid #eee; /* خط پایین (که قبلا هم بود) */
    padding-bottom: 20px;
}

/* 2. تنظیم عنوان (انتخاب سایز/رنگ) */
.product-variants h6 {
    font-size: 16px !important; /* سایز بزرگتر (قبلا 13 بود) */
    font-weight: 800 !important; /* ضخیم‌تر */
    color: #333;
    margin-bottom: 15px;
}

/* استایل دکمه‌های عادی */
.variant-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px; /* کمی بزرگتر */
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #666;
    font-size: 14px;
    font-weight: bold;
    background: #fff;
    transition: all 0.2s;
    min-height: 45px;
    text-decoration: none;
}

.variant-btn:hover {
    border-color: #999;
    color: #333;
}

/* 3. استایل دکمه فعال (صفحه جاری) */
.variant-btn.active {
    border: 2px solid #b01010 !important; /* رنگ قرمز برند (جایگزین مشکی) */
    color: #b01010 !important;            /* متن قرمز */
    background-color: #ffffff;            /* پس‌زمینه خیلی کمرنگ قرمز */
    box-shadow: none !important;          /* حذف سایه مشکی قبلی */
    pointer-events: none;
}

/* دایره رنگی */
.color-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 10px;
    border: 1px solid rgba(0,0,0,0.1);
}

/* کلاس مخفی‌سازی متن برای سئو (Screen Reader Text) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =========================================
   رفع خطای سایز دکمه‌ها (Touch Targets)
   ========================================= */

/* 1. استاندارد کردن ارتفاع کل باکس جستجو */
.search-box {
    min-height: 48px; /* حداقل ارتفاع استاندارد */
    display: flex;
    align-items: center;
}

/* 2. بزرگ کردن ناحیه کلیک دکمه جستجو */
.search-box button {
    min-width: 48px !important;  /* عرض حداقل 48 */
    min-height: 48px !important; /* ارتفاع حداقل 48 */
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 3. تنظیم ارتفاع فیلد ورودی */
.search-box input {
    min-height: 48px !important; /* ارتفاع فیلد نوشتن */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

/* =========================================
   استایل آیکون‌های اجتماعی (SVG)
   ========================================= */

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #eee; /* پس‌زمینه دایره‌ای طوسی */
    border-radius: 50%;
    color: #666;
    transition: 0.3s;
    margin: 0 5px;
}

/* سایز SVG */
.social-icon svg {
    width: 20px;
    height: 20px;
}

/* هاور کلی */
.social-icon:hover {
    color: #fff; /* آیکون سفید شود */
    transform: translateY(-3px); /* کمی بالا برود */
}

/* رنگ‌های اختصاصی برندها هنگام هاور */
.social-instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #fff;
}

.social-telegram:hover {
    background-color: #0088cc;
}

.social-whatsapp:hover {
    background-color: #25D366;
}

/* مخفی کردن عنوان "صفحه بندی نوشته ها" */
.pagination-box h2.screen-reader-text {
    display: none;
}

/* --- استایل باکس پشتیبانی (نهایی و فیکس شده) --- */
#customer_support {
    border-top: none;
    overflow: hidden;
    border-bottom: 3px solid #28a745; /* خط سبز پایین */
}

#customer_support header {
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 0;
}

#customer_support header img {
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
    display: block;
    /* اگر عکس پیدا نشد، کادر زشت نشان ندهد */
    background: #f0f0f0; 
    min-height: 100px;
}

#customer_support .sellers-container {
    padding: 0 15px;
    margin: 0;
    list-style: none;
}

#customer_support .sellers-container li {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between; /* فاصله بین متن و آیکون */
}

#customer_support .sellers-container li:last-child {
    border-bottom: none;
}

/* استایل متن‌ها */
.support-info {
    text-align: right;
    flex-grow: 1; /* متن فضای خالی را پر کند */
}

.support-name {
    display: block;
    color: #444; /* تغییر از #888 به #444 برای رفع خطای کنتراست */
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: 500; /* کمی ضخیم‌تر برای خوانایی بهتر */
}

.support-number {
    display: block;
}

.support-number a {
    color: #333;
    font-family: 'IRANSans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
}

/* استایل آیکون گوشی - با زور زیاد (!important) */
.support-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px; /* فاصله آیکون از متن */
}

.support-icon-svg {
    width: 35px !important;      /* عرض اجباری */
    height: 35px !important;     /* ارتفاع اجباری */
    min-width: 35px !important;  /* جلوگیری از جمع شدن */
    max-width: 35px !important;  /* جلوگیری از بزرگ شدن */
    fill: #3e4e50;               /* رنگ آیکون */
    transform: rotate(-15deg);   /* چرخش */
}

/* تیتر منوهای ستونی (قبلا H4) */
.footer-title {
    font-family: 'IRANSans', sans-serif;
    font-size: 16px;      /* سایز استاندارد برای تیتر فوتر */
    font-weight: bold;    /* ضخامت متن */
    color: #333;          /* رنگ متن */
    margin-bottom: 15px;  /* فاصله از پایین */
}

/* تیتر توضیحات پایین (قبلا H5) */
.footer-desc-title {
    font-family: 'IRANSans', sans-serif;
    font-size: 18px;      /* کمی بزرگتر برای تیتر توضیحات */
    /* فونت-وزن و رنگ را از کلاس های بوت استرپ (fw-bold text-dark) میگیرد */
}

/* =========================================
   منو فوتر در حالت موبایل
   ========================================= */
/* --- استایل منوی چسبان موبایل (Glassmorphism) --- */

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px; /* ارتفاع نوار */
    
    /* افکت شیشه‌ای و شفافیت */
    background: rgba(255, 255, 255, 0.9); /* سفید با شفافیت 90 درصد */
    backdrop-filter: blur(10px); /* تار کردن پس زمینه پشت نوار */
    -webkit-backdrop-filter: blur(10px); /* برای آیفون */
    
    border-top: 1px solid rgba(0,0,0,0.05); /* خط خیلی کمرنگ بالا */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05); /* سایه نرم به سمت بالا */
    
    display: flex;
    justify-content: space-around; /* فاصله‌گذاری مساوی */
    align-items: center;
    z-index: 9999; /* همیشه رو قرار بگیرد */
    padding-bottom: 5px; /* برای گوشی‌های جدید که نوار پایین دارند */
}

/* آیتم‌های منو */
.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #666; /* رنگ پیش‌فرض آیکون‌ها (خاکستری) */
    font-size: 11px; /* سایز متن */
    padding: 8px 10px;
    border-radius: 12px;
    transition: all 0.3s ease;
    width: 25%; /* تقسیم مساوی عرض */
}

/* آیکون‌ها */
.mobile-bottom-nav .nav-item svg {
    margin-bottom: 4px;
    transition: transform 0.2s;
}

/* افکت هاور و اکتیو (وقتی کاربر لمس می‌کند یا در صفحه خانه است) */
.mobile-bottom-nav .nav-item:hover,
.mobile-bottom-nav .nav-item.active {
    color: #ef394e; /* رنگ قرمز برند شما */
}

.mobile-bottom-nav .nav-item:hover svg {
    transform: translateY(-3px); /* حرکت جزئی آیکون به بالا */
}

/* اصلاح فوتر برای اینکه زیر منو پنهان نشود */
body {
    padding-bottom: 70px; /* به اندازه ارتفاع منو فاصله میدهیم */
}

/* حذف فاصله در دسکتاپ (چون منو مخفی است) */
@media (min-width: 992px) {
    body {
        padding-bottom: 0 !important;
    }
}


/* --- استایل نهایی سوالات متداول (FAQ) --- */

/* تنظیم رنگ پس‌زمینه باکس کلی */
.product-faq-section .bg-light {
    background-color: #f8f9fa !important; /* خاکستری ملایم */
}

/* تنظیم فاصله و کادر آیتم‌ها */
.custom-faq-accordion .accordion-item {
    background-color: #fff !important;
    border: 1px solid #e9ecef !important; /* کادر ظریف */
    margin-bottom: 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

/* استایل نوار سوال (خاکستری شود) */
.custom-faq-accordion .accordion-button {
    background-color: #f8f9fa !important; /* این خط نوار سوال را خاکستری می‌کند */
    font-size: 14px;
    color: #333 !important;
    box-shadow: none !important;
}

/* استایل متن جواب (سفید بماند) */
.custom-faq-accordion .accordion-body {
    background-color: #fff !important;
    font-size: 13px;
    padding: 20px;
    text-align: justify;
}

/* تنظیم آیکون فلش */
.custom-faq-accordion .accordion-button::after {
    background-size: 15px;
    margin-right: auto;
    margin-left: 0;
}

/* --- استایل صفحه 404 --- */

.error-404-box {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* استایل عدد بزرگ */
.error-code {
    font-size: 120px;
    line-height: 1;
    font-family: Arial, sans-serif; /* برای اعداد انگلیسی زیباتر است */
    opacity: 0.8;
    margin-bottom: 10px;
    text-shadow: 4px 4px 0px rgba(239, 57, 78, 0.1); /* سایه قرمز ملایم */
}

/* اصلاح فرم جستجو */
.search-404 .form-control {
    padding: 10px 15px;
    background-color: #f8f9fa;
}

.search-404 .form-control:focus {
    background-color: #fff;
    box-shadow: none;
    border-color: #ef394e;
}

/* تنظیمات موبایل */
@media (max-width: 768px) {
    .error-code {
        font-size: 80px;
    }
    .error-404-box {
        padding: 30px !important;
    }
}


/* --- رفع پرش متن‌ها هنگام لود فونت --- */
body {
    line-height: 1.6 !important; /* ارتفاع خط استاندارد */
}

h1, h2, h3, h4, h5, h6, .product-title {
    line-height: 1.4 !important; /* ارتفاع خط تیترها */
}

/* جلوگیری از شکستن ناگهانی خط در عنوان محصول */
.product-title {
    min-height: 60px; /* رزرو جا برای دو خط متن */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



/* قفل کردن ابعاد عکس محصول */
.main-image-box img, 
.wp-post-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* مربع کامل - بسیار مهم برای موبایل */
    object-fit: contain;
}

/* --- اصلاح باکس مسیر راهنما (رفع مشکل کوچک شدن) --- */

.rank-math-breadcrumb-box {
    display: block !important;    /* حتما تمام عرض باشد */
    width: 100% !important;       /* عرض ۱۰۰ درصد */
    box-sizing: border-box;
    white-space: nowrap;          /* متن در یک خط بماند */
    overflow: hidden;             /* اضافات متن مخفی شود */
    text-overflow: ellipsis;      /* اگر جا نشد سه نقطه بگذارد */
}

/* استایل لینک‌ها و متن داخلی */
.rank-math-breadcrumb-box a,
.rank-math-breadcrumb-box span {
    display: inline;              /* این‌ها نباید بلاک باشند */
    vertical-align: middle;
}

/* جلوگیری از لرزش لینک‌های دسته‌بندی و بردکرامب */
.rank-math-breadcrumb-box a,
.product-category a,
.cat-links a {
    display: inline-block; /* باعث می‌شود باکس لینک ثبات داشته باشد */
    line-height: 1.5;      /* ارتفاع خط ثابت */
    white-space: nowrap;   /* جلوگیری از شکستن خط */
}

/* --- وسط‌چین کردن تصاویر داخل توضیحات محصول --- */

/* 1. هدف گرفتن عکس‌ها در بخش نقد و بررسی و توضیحات کوتاه */
.product-content img,
.product-video-content img,
.entry-content img {
    display: block !important;       /* عکس را از حالت متنی خارج کن */
    margin-left: auto !important;    /* فاصله چپ اتوماتیک */
    margin-right: auto !important;   /* فاصله راست اتوماتیک */
    margin-top: 15px;                /* کمی فاصله از بالا */
    margin-bottom: 15px;             /* کمی فاصله از پایین */
    max-width: 100%;                 /* در موبایل بیرون نزند */
    height: auto;                    /* ارتفاع دفرمه نشود */
}

/* 2. تنظیم کلاس‌های استاندارد وردپرس (اگر در ویرایشگر دکمه وسط‌چین را زدید) */
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* 3. اگر عکس داخل تگ figure بود (در گوتنبرگ) */
.product-content figure,
.product-video-content figure {
    text-align: center;
    margin: 0 auto;
    display: block;
}


/* --- ریسپانسیو کردن تصاویر توضیحات پایین دسته‌بندی --- */

.cat-desc-bottom img {
    max-width: 100% !important; /* عرض عکس هرگز از عرض گوشی بیشتر نشود */
    height: auto !important;    /* ارتفاع به صورت اتوماتیک تنظیم شود تا عکس دفرمه نشود */
    display: block;             /* عکس به صورت بلوک نمایش داده شود */
    margin: 15px auto;          /* فاصله از بالا/پایین و وسط‌چین شدن */
    border-radius: 8px;         /* کمی گرد شدن گوشه‌ها برای زیبایی */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* سایه ریز (اختیاری) */
}

/* اگر عکس داخل تگ figure بود (در برخی نسخه‌های وردپرس) */
.cat-desc-bottom figure {
    max-width: 100% !important;
    margin: 0 auto;
}

/* --- اصلاح مسیر راهنما در موبایل (شکستن خط) --- */
@media (max-width: 768px) {
    .rank-math-breadcrumb-box,
    .rank-math-breadcrumb-box p, 
    .rank-math-breadcrumb-box span, 
    .rank-math-breadcrumb-box a {
        white-space: normal !important;   /* اجازه شکستن خط */
        overflow: visible !important;     /* نمایش کامل متن */
        text-overflow: clip !important;   /* حذف سه نقطه (...) */
        height: auto !important;          /* ارتفاع اتوماتیک شود */
        line-height: 1.8 !important;      /* فاصله بین خطوط برای خوانایی */
    }
}

/* --- استایل لیست دسته‌بندی سایدبار --- */

.sidebar-cat-list li.last-no-border:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* افکت هاور روی لینک‌ها */
.sidebar-cat-list a.transition-link {
    transition: all 0.2s ease-in-out;
}

.sidebar-cat-list a:hover {
    color: #ef394e !important; /* قرمز شدن متن */
    padding-right: 5px; /* کمی حرکت به سمت چپ */
}

/* تغییر رنگ آیکون فلش هنگام هاور */
.sidebar-cat-list a:hover svg {
    fill: #ef394e;
}

/* استایل بج تعداد */
.sidebar-cat-list .badge {
    font-weight: normal;
    border: 1px solid #eee;
}

/* --- رفع لرزش تیتر H2 لیست محصولات (CLS Fix) --- */
.products-header h2 {
    line-height: 1.6 !important;  /* ارتفاع خط ثابت و مشخص */
    min-height: 26px;             /* رزرو ارتفاع برای یک خط متن */
    display: block;               /* رفتار بلوکی برای ثبات بیشتر */
    overflow: hidden;             /* جلوگیری از بیرون زدگی احتمالی */
    
    /* جلوگیری از تغییر عرض ناگهانی */
    white-space: normal;          
}

/* اگر در موبایل فونت کوچک‌تر است، ارتفاع رزرو شده را تنظیم کنیم */
@media (max-width: 768px) {
    .products-header h2 {
        min-height: 24px;
        font-size: 14px !important; /* فیکس کردن سایز فونت */
    }
}

/* --- استایل هدر پشتیبانی (SVG به جای عکس) --- */

.support-header-graphic {
    height: 160px; /* ارتفاع مشابه عکس قبلی */
    background: linear-gradient(135deg, #007cba, #005a87); /* گرادینت آبی حرفه‌ای */
    /* یا اگر تم سایت قرمز است از این استفاده کنید: */
    /* background: linear-gradient(135deg, #ef394e, #c92a3e); */
    
    border-radius: 8px 8px 0 0; /* گردی گوشه‌های بالا */
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* افکت دایره‌های محو در پس‌زمینه برای زیبایی (اختیاری) */
.support-header-graphic::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.support-header-graphic::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -10px;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.support-header-graphic svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); /* سایه به آیکون */
}

/* --- تنظیم دقیق عدد سبد خرید موبایل --- */
.mobile-cart-badge {
    position: absolute !important;
    top: -5px !important;    /* چسبیده به بالا */
    right: -5px !important;  /* چسبیده به راست */
    left: auto !important;   /* جلوگیری از تداخل */
    transform: none !important; /* حذف کدهای بوت استرپ */
    
    /* استایل ظاهری */
    width: 18px;
    height: 18px;
    background-color: #ef394e;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    border: 2px solid #fff;
}

.cart-mobile-btn {
    height: 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    
    /* فاصله از چپ (بین سرچ و سبد) */
    margin-left: 15px !important; 
    
    /* این خط سبد خرید را کمی پایین می‌آورد تا تراز شود */
    margin-top: 16px !important; 
    
    padding: 0;
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    transition: all 0.2s;
}

/* بزرگ کردن آیکون داخل دکمه */
.cart-mobile-btn svg {
    width: 30px;  /* قبلا 22 بود */
    height: 30px;
}

/* تنظیم دقیق جای عدد قرمز برای سایز جدید */
.cart-mobile-btn .mobile-cart-badge {
    top: -5px !important;
    right: -5px !important;
    width: 20px;  /* کمی بزرگتر شدن دایره عدد */
    height: 20px;
    font-size: 11px;
}

/* --- تراز کردن هدر موبایل (هم‌قد کردن جستجو و سبد خرید) --- */

/* 1. تنظیم ارتفاع باکس جستجو */
.d-lg-none .search-box {
    height: 50px !important; /* ارتفاع ثابت */
    display: flex;
    align-items: center;
    padding-top: 0 !important;    /* حذف پدینگ‌های اضافه */
    padding-bottom: 0 !important;
}

/* 2. تنظیم ارتفاع دکمه سبد خرید (هماهنگ با جستجو) */
.cart-mobile-btn {
    height: 50px !important;      /* دقیقا هم‌قد جستجو */
    width: 50px !important;       /* مربعی */
    min-width: 50px !important;
    
    /* اگر مارجین دارد، آن را تنظیم کنیم */
    margin-left: 10px !important; 
}

/* 3. تنظیم ورودی متن داخل جستجو (که وسط بیفتد) */
.d-lg-none .search-box input {
    height: 100% !important;
    margin: 0;
}

/* --- استایل بنر اینستاگرام (SVG) --- */

.instagram-box-graphic {
    height: 250px; /* ارتفاع مشابه عکس قبلی */
    
    /* گرادینت معروف اینستاگرام */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* افکت هاور: کمی روشن‌تر شدن */
.instagram-box-graphic:hover {
    filter: brightness(1.1);
}

/* افکت هاور روی آیکون: بزرگ شدن */
.instagram-box-graphic:hover svg {
    transform: scale(1.1);
    transition: transform 0.3s;
}

/* دایره‌های تزیینی برای زیبایی بیشتر */
.instagram-box-graphic::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
}
.instagram-box-graphic::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 90px;
    height: 90px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
}

/* --- استایل باکس سئو صفحه اصلی --- */

/* تنظیمات کلی باکس */
.seo-content-box {
    transition: transform 0.3s ease;
    overflow: hidden; /* برای جلوگیری از بیرون زدگی آیکون پس‌زمینه */
}

.seo-content-box:hover {
    transform: translateY(-5px); /* افکت حرکت ریز هنگام هاور */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}

/* استایل تیتر H1 */
.seo-main-title {
    font-size: 22px;
    position: relative;
    padding-bottom: 15px;
}

/* خط قرمز زیر تیتر H1 */
.seo-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #ef394e;
    border-radius: 2px;
}

/* خط قرمز کنار تیتر H2 */
.title-line {
    width: 4px;
    height: 20px;
    background-color: #ef394e;
    border-radius: 2px;
    display: inline-block;
}

/* آیکون محو در پس‌زمینه */
.seo-bg-icon {
    position: absolute;
    top: -20px;
    left: -20px;
    opacity: 0.5;
    z-index: 1;
    transform: rotate(-15deg);
}

/* تنظیمات موبایل */
@media (max-width: 768px) {
    .seo-content-box {
        padding: 25px !important;
    }
    .seo-main-title {
        font-size: 18px;
    }
    .seo-bg-icon {
        width: 100px;
        height: 100px;
    }
}

/* --- رفع تاخیر نمایش اسلایدر (LCP Fix) --- */

/* 1. چیدمان اولیه قبل از لود شدن JS */
.mainSwiper .swiper-wrapper {
    display: flex;       /* چیدمان افقی */
    flex-wrap: nowrap;   /* در یک خط */
    overflow: hidden;    /* جلوگیری از اسکرول */
}

/* 2. اجبار به نمایش اسلاید اول */
.mainSwiper .swiper-slide:first-child {
    display: block !important;
    width: 100%;         /* عرض کامل */
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. اطمینان از نمایش عکس */
.mainSwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}


/* --- رفع لرزش دکمه‌های اسلایدر --- */
.swiper-button-next,
.swiper-button-prev {
    width: 44px !important;  /* عرض ثابت */
    height: 44px !important; /* ارتفاع ثابت */
    
    /* جلوگیری از تغییر مکان ناگهانی */
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* مخفی کردن دکمه‌ها قبل از لود شدن کامل (برای جلوگیری از پرش دیداری) */
.swiper-button-lock {
    display: none !important;
}


@media (max-width: 768px) {
    
    /* --- اصلاح عنوان اصلی در صفحه محصول (H1) --- */
    .product-title-box h1.product-title {
        font-size: 18px !important;   /* سایز مناسب موبایل */
        line-height: 1.5 !important;  /* فاصله خطوط */
        
        /* دستورات برای نمایش کامل متن */
        white-space: normal !important; 
        overflow: visible !important;
        text-overflow: clip !important;
        height: auto !important;
        min-height: auto !important;
        
        /* حذف محدودیت خط */
        display: block !important;
        -webkit-line-clamp: unset !important; 
        
        text-align: center; /* وسط چین */
        margin-bottom: 10px;
    }

    /* --- اصلاح عنوان انگلیسی (H2) --- */
    .product-title-box h2.product-en-title {
        font-size: 14px !important;
        white-space: normal !important;
        height: auto !important;
        text-align: center;
        line-height: 1.4;
    }
}

/* تنظیم ارتفاع بنر اصلی */
.main-banner img {
    height: 400px; /* ارتفاع ثابت در دسکتاپ */
    object-fit: cover;
    width: 100%;
    display: block;
}

/* در موبایل ارتفاع آزاد باشد */
@media (max-width: 991px) {
    .main-banner img {
        height: auto;
        aspect-ratio: 16/9; /* نسبت تصویر استاندارد */
    }
}

/* --- استایل لیست محصولات (CSS Scroll Snap) --- */

/* کانتینر اصلی که اسکرول می‌خورد */
.scrolling-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 15px;           /* فاصله بین کارت‌ها */
    padding-bottom: 20px; /* فضا برای سایه پایین کارت‌ها */
    padding-right: 5px;   /* فاصله از لبه راست */
    padding-left: 5px;
    
    /* حالت آهنربایی (Snap) */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* نرم کردن اسکرول در iOS */
    
    /* مخفی کردن اسکرول‌بار */
    scrollbar-width: none; /* فایرفاکس */
    -ms-overflow-style: none; /* IE */
}

/* مخفی کردن اسکرول‌بار در کروم */
.scrolling-wrapper::-webkit-scrollbar { 
    display: none; 
}

/* آیتم تکی (کارت محصول) */
.scrolling-card {
    flex: 0 0 auto;           /* اندازه ثابت بماند */
    scroll-snap-align: start; /* کارت در ابتدای صفحه تراز شود */
    width: 46%;               /* موبایل: حدود 2.2 محصول دیده شود */
}

/* تنظیمات دسکتاپ */
@media (min-width: 768px) {
    .scrolling-card {
        width: 22%;           /* دسکتاپ: حدود 4.5 محصول دیده شود */
    }
}

/* --- اصلاح نمایش لیست‌های نشانه‌دار (Bullet Points) --- */

/* 1. برای توضیحات محصول و مقالات */
.product-content ul,
.entry-content ul,
.cat-desc-bottom ul,
.text-justify ul {
    list-style-type: disc !important; /* دایره توپر */
    margin-right: 20px !important;    /* فاصله از راست برای دیده شدن دایره */
    padding-right: 15px !important;
}

/* 2. تنظیمات هر آیتم لیست */
.product-content ul li,
.entry-content ul li,
.cat-desc-bottom ul li,
.text-justify ul li {
    list-style-position: outside !important; /* دایره بیرون از متن باشد */
    margin-bottom: 5px; /* فاصله بین خطوط */
}

/* 3. اگر لیست عددی (1, 2, 3) هم استفاده می‌کنید */
.product-content ol,
.entry-content ol {
    list-style-type: decimal !important;
    margin-right: 20px !important;
    padding-right: 15px !important;
}