@media (max-width: 991px) {
    /* ===== Hero Section - موبایل ===== */
    .hero-section {
        padding-top: 80px; /* با توجه به ارتفاع هدر خودتون تنظیم کنید */
    }

    .hero-text {
        margin-top: unset;
    }

    .hero-title {
        font-size: 34px;
        letter-spacing: 0.08em;
    }

    .hero-eyebrow {
        font-size: 13px;
        letter-spacing: 2.5px;
    }


    /* ===== Intro Section - موبایل ===== */
    .intro-section {
        margin-top: 0 !important; /* حذف margin منفی که برای همپوشانی با هیرو بود */
        padding: 40px 0;
    }

    .intro-grid {
        gap: 30px;
    }

    .intro-text {
        padding: 0 15px;
    }

    .intro-heading {
        font-size: 20px !important;
        line-height: 1.3;
    }

        .intro-heading span {
            font-size: 32px !important; /* override فونت 50px دسکتاپ */
            margin-top: 10px;
            display: inline-block;
        }

    .intro-desc {
        font-size: 15px;
        line-height: 1.7;
        padding: 0 5px;
    }

    .usp-grid {
        gap: 30px !important; /* کاهش فاصله از 60px */
    }

    .usp-item {
        flex: 0 0 calc(50% - 15px); /* دو ستونه */
        max-width: calc(50% - 15px);
    }

    .usp-icon {
        width: 60px !important; /* کوچک‌تر شدن آیکون */
        margin-bottom: 10px;
    }

    .usp-title {
        font-size: 12px !important;
    }

    /* ===== اسلایدر محو شونده - ریسپانسیو موبایل ===== */

    .slider-fade-section {
        padding: 60px 0;
    }

    .slider-fade-wrapper {
        padding: 0 20px;
    }

    .slider-fade-container {
        flex-direction: column; /* چینش عمودی (بالا و پایین) */
        align-items: center;
        gap: 24px; /* ===== فاصله عمودی بین دو عکس ===== */
    }

    .slider-fade-item, .slider-fade-item2 {
        width: 100% !important; /* override عرض ۴۲۰px دسکتاپ */
        max-width: 480px; /* حداکثر عرض برای تبلت‌های کوچک */
        height: 280px; /* ===== ارتفاع هر عکس در موبایل ===== */
    }

    .slider-item-title, slider-item-title2 {
        font-size: 16px; /* کوچک‌تر شدن فونت عنوان */
        left: 16px;
        bottom: 16px;
    }

    .slider-item-overlay, .slider-item-overlay2 {
        height: 60%; /* لایه‌ی گرادیان کمی کوتاه‌تر */
    }

    .fullscreen-image-section {
        width: 100vw;
        height: 100vh; /* دقیقاً به اندازهٔ ارتفاع قابل مشاهده */
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #000; /* رنگ پس‌زمینه در صورت وجود حاشیه */
        /* هیچ overflow ای تعریف نمی‌کنیم تا اسکرول صفحه مختل نشود */
    }

    .fullscreen-image-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fullscreen-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain; /* کل تصویر را بدون برش نشان می‌دهد */
        object-position: center;
    }


    /* ===== Product Details Header - موبایل ===== */
    .colors-filter-section {
        padding: 20px 0 10px 0; /* فاصله از بالا و پایین */
    }

    .colors-filter-container {
        max-width: 1400px; /* همان عرض کانتینر اصلی */
        margin: 0 auto;
        padding: 0 16px; /* هم‌اهنگ با کانتینر اصلی در موبایل */
        box-sizing: border-box;
    }

    .colors-filter-title {
        display: block !important; /* اطمینان از نمایش */
        font-size: 32px; /* اندازه مناسب موبایل */
        font-weight: 700;
        line-height: 40px;
        margin: 0;
        padding: 0;
        text-align: left; /* یا center اگر طراحی ایجاب کند */
        letter-spacing: 0.5px; /* اختیاری برای زیبایی */
    }

        /* اگر نیاز به خط جداکننده زیر عنوان دارید */
        .colors-filter-title::after {
            content: '';
            display: block;
            width: 60px; /* عرض خط زیر عنوان */
            height: 3px;
            margin-top: 8px;
        }


    /* ============================================
   1. مخفی کردن دکمه‌های تب (فقط در موبایل)
   ============================================ */
    .colors-filter-row {
        display: none !important; /* کل ردیف دکمه‌ها را مخفی می‌کنیم */
    }

    .colors-content-section {
        padding: unset;
        max-width: 991px;
    }

    .colors-content-container {
        width: 100%;
    }

    .colors-content-text {
        width: 100%;
        text-align: justify;
    }
    /* ============================================
   2. نمایش عنوان "Color" به‌جای دکمه‌ها
   ============================================ */
    /* از آنجایی که دکمه‌ها مخفی شدند، یک عنوان مجازی برای Color
   با استفاده از ::before روی پنل COLOR ایجاد می‌کنیم */
    #panel-color::before {
        content: "Color";
        display: block;
        font-size: 28px;
        font-weight: 700;
        line-height: 36px;
        color: #5a5a5a;
        padding: 0 0 12px 0;
        margin: 0;
        letter-spacing: 0.5px;
    }

    /* ============================================
   3. نمایش کامل پنل COLOR
   ============================================ */
    #panel-color {
        display: block !important;
        padding: 0px 18px;
    }

        /* ============================================
   4. عنوان اصلی (16 Unique Textures)
   ============================================ */
        #panel-color .colors-content-title.main-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 32px;
            color: #5a5a5a;
            margin: 0 0 8px 0;
            padding: 0;
        }

        /* ============================================
   5. متن توضیحی
   ============================================ */
        #panel-color .colors-content-text.main-subtitle {
            font-size: 16px;
            line-height: 24px;
            color: #5a5a5a;
            margin: 0 0 24px 0;
            padding: 0;
        }

            #panel-color .colors-content-text.main-subtitle p {
                margin: 0;
                padding: 0;
            }

    /* ============================================
   6. گروه‌های رنگی
   ============================================ */
    .color-group {
        margin-bottom: 32px; /* فاصله بین گروه‌ها */
    }

        .color-group:last-child {
            margin-bottom: 0; /* آخرین گروه فاصله‌ی پایین نداشته باشد */
        }

    /* ============================================
   7. هدر گروه (عنوان + تعداد)
   ============================================ */
    .color-group-header {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 6px;
    }

    .color-group-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 28px;
        color: #5a5a5a;
        margin: 0;
        padding: 0;
    }

    .color-group-count {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #5a5a5a;
        margin: 0;
        padding: 0;
    }

    /* ============================================
   8. خط جداکننده زیر هدر گروه
   ============================================ */
    .color-group-line {
        width: 100%;
        height: 1px;
        background-color: #5a5a5a;
        margin: 0 0 16px 0;
    }

    /* ============================================
   9. گرید کارت‌ها (تبدیل به یک ستون عمودی)
   ============================================ */
    .color-group-grid {
        display: grid;
        grid-template-columns: 1fr; /* یک ستون کامل */
        gap: 20px; /* فاصله عمودی بین کارت‌ها */
    }

        /* ============================================
   10. استایل هر کارت (عکس + متن زیر آن)
   ============================================ */
        .color-group-grid .project-card {
            display: block;
            width: 100%;
        }

            .color-group-grid .project-card img {
                width: 100%;
                height: auto;
                display: block;
                aspect-ratio: 1 / 1; /* نسبت مربع برای عکس‌ها */
                object-fit: cover;
                border-radius: 4px; /* گوشه‌های گرد (اختیاری) */
            }

        /* ============================================
   11. اطلاعات زیر عکس (عنوان و زیرنویس)
   ============================================ */
        .color-group-grid .project-info {
            display: block !important;
            text-align: center;
            padding: 12px 0 0 0;
            margin: 0;
        }

        .color-group-grid .color-card-title {
            font-size: 16px;
            font-weight: 600;
            line-height: 22px;
            color: #5a5a5a;
            margin: 0 0 4px 0;
            padding: 0;
        }

        .color-group-grid .project-info-group {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #5a5a5a;
            margin: 0;
            padding: 0;
        }

    /* ============================================
   تصویر بیننده (مودال) - موبایل
   ============================================ */
    .image-viewer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9); /* یا همان رنگی که در دسکتاپ دارید */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
        z-index: 9999;
    }

    .image-viewer-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #ffffff;
    }

    .image-viewer-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        font-size: 30px;
        color: #ffffff;
        cursor: pointer;
        z-index: 10;
    }

        .image-viewer-close .fa-times {
            color: #4a4646;
            border: 1px solid #4a4646;
            padding: 0px 4px;
            margin: 0px;
            border-radius: 50%;
        }

    .image-viewer-images {
        display: flex;
        flex-direction: column; /* ← تغییر اصلی: تبدیل به ستون عمودی */
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        gap: 10px; /* فاصله‌ی عمودی بین دو تصویر */
    }

    .image-viewer-detail,
    .image-viewer-render {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 48%; /* هر تصویر حداکثر نیمی از ارتفاع صفحه را بگیرد */
        object-fit: contain; /* تصویر بدون برش و با حفظ نسبت نمایش داده شود */
        border-radius: 4px;
    }

    /* در صورت نیاز به حذف اسکرول بدنه هنگام باز بودن مودال */
    body.image-viewer-open {
        overflow: hidden;
    }


    /* ============================================
   بخش SIZE - موبایل
   ============================================ */

    /* 1. نمایش عنوان "Size" با ::before */
    #panel-size::before {
        content: "Size";
        display: block;
        font-size: 28px;
        font-weight: 700;
        line-height: 36px;
        color: #5a5a5a; /* هماهنگ با بخش COLOR */
        padding: 0 0 12px 0;
        margin: 0;
        letter-spacing: 0.5px;
    }

    /* 2. نمایش کامل پنل SIZE */
    #panel-size {
        display: block !important;
        padding: 10px 18px; /* هماهنگ با بخش COLOR */
        margin: 32px 0 0 0; /* فاصله از بخش قبلی */
        border-top: 1px solid black;
    }

        #panel-size .colors-content-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 32px;
        }

    /* 3. تبدیل کانتینر دوستونی به یک ستون عمودی */
    .colors-two-column {
        display: flex;
        flex-direction: column; /* چینش عمودی: متن بالا، ویدیو پایین */
        gap: 16px; /* فاصله‌ی بین متن و ویدیو */
        width: 100%;
    }

    /* 4. بخش متن (سمت چپ سابق) - بدون تغییر در فونت/رنگ */
    .colors-two-column-content {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* 5. بخش ویدیو (سمت راست سابق) */
    .colors-two-column-video {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* 6. استایل ویدیو (ریسپانسیو و بدون کشیدگی) */
    .size-video {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9; /* نسبت ابعاد استاندارد (اختیاری) */
        object-fit: contain; /* ویدیو بدون برش و با حفظ نسبت */
        display: block;
        border-radius: 4px;
        padding: 0 2px; /* فاصله‌ی بسیار کم از لبه‌های کناری */
    }

    /* ============================================
   بخش THICKNESS - موبایل
   ============================================ */

    /* 1. نمایش عنوان "Thickness" با ::before */
    #panel-thickness::before {
        content: "Thickness";
        display: block;
        font-size: 28px;
        font-weight: 700;
        line-height: 36px;
        color: #5a5a5a; /* هماهنگ با بخش‌های قبلی */
        padding: 0 0 12px 0;
        margin: 0;
        letter-spacing: 0.5px;
    }

    /* 2. نمایش کامل پنل THICKNESS */
    #panel-thickness {
        display: block !important;
        padding: 10px 18px; /* هماهنگ با بخش‌های قبلی */
        margin: 32px 0 0 0; /* فاصله از بخش قبلی */
        border-top: 1px solid black;
    }

        #panel-thickness .colors-content-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 32px;
        }

    /* 3. تبدیل کانتینر دوستونی به یک ستون عمودی */
    .colors-two-column {
        display: flex;
        flex-direction: column; /* چینش عمودی: متن بالا، تصویر پایین */
        gap: 16px; /* فاصله‌ی بین متن و تصویر */
        width: 100%;
    }

    /* 4. بخش متن (سمت چپ سابق) - بدون تغییر در فونت/رنگ */
    .colors-two-column-text {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* 5. بخش تصویر (سمت راست سابق) */
    .colors-two-column-image {
        width: 100%;
        padding: 0;
        margin: 0;
    }

        /* 6. استایل تصویر (ریسپانسیو و بدون کشیدگی) */
        .colors-two-column-image img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 4px; /* گوشه‌های گرد (هماهنگ با تم) */
            object-fit: contain; /* تصویر بدون برش و با حفظ نسبت */
            clip-path: unset;
        }

    /* ============================================
   بخش FINISH - موبایل (لغو کامل استایل دسکتاپ)
   ============================================ */

    /* 1. عنوان "Finish" با ::before */
    #panel-finish::before {
        content: "Finish";
        display: block;
        font-size: 28px;
        font-weight: 700;
        line-height: 36px;
        color: #5a5a5a;
        padding: 0 0 12px 0;
        margin: 0;
        letter-spacing: 0.5px;
    }

    /* 2. پنل FINISH */
    #panel-finish {
        display: block !important;
        padding: 10px 18px;
        margin: 32px 0 0 0;
        border-top: 1px solid black;
    }


        /* 3. اندازه عنوان اصلی (Surface Finishes) */
        #panel-finish .colors-content-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 32px;
        }

    /* 4. چیدمان عمودی */
    .finish-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    /* 5. متن */
    .finish-text {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* 6. کارت‌ها - لغو کامل استایل دسکتاپ با همان Specificity */
    #panel-finish .project-card {
        opacity: 1 !important; /* لغو opacity: 0 */
        transform: none !important; /* لغو translateX */
        width: 100%;
        display: block;
        padding: 0;
        margin: 0;
    }

    /* 7. کانتینر کارت‌ها */
    .finish-cards {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* 8. ویدیوها - نمایش کامل بدون برش و بدون فاصله */
    #panel-finish .size-video {
        width: 100%;
        height: auto;
        aspect-ratio: auto; /* نسبت ابعاد واقعی ویدیو را از خود فایل می‌خواند */
        display: block;
        border-radius: 4px;
        padding: 0;
        margin: 0;
    }

    /* 9. محتوای متنی زیر ویدیو */
    .project-card-content {
        text-align: center;
        padding: 12px 0 0 0;
        margin: 0;
    }

    .project-card-title {
        margin: 0 0 4px 0;
        padding: 0;
    }

    .project-card-description {
        margin: 0;
        padding: 0;
    }

    /* ============================================
   بخش FEATURE - موبایل
   ============================================ */

    /* 1. نمایش عنوان "Features" با ::before */
    #panel-feature::before {
        content: "Features";
        display: block;
        font-size: 28px;
        font-weight: 700;
        line-height: 36px;
        color: #5a5a5a;
        padding: 0 0 12px 0;
        margin: 0;
        letter-spacing: 0.5px;
    }

    /* 2. نمایش کامل پنل FEATURE */
    #panel-feature {
        display: block !important;
        padding: 10px 18px; /* هماهنگ با بخش‌های قبلی */
        margin: 32px 0 0px 0; /* فاصله از بخش قبلی */
        border-top: 1px solid black;
    }

        #panel-feature .colors-content-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 32px;
        }

    /* 3. تبدیل گرید به یک ستون عمودی */
    .feature-grid {
        display: grid;
        grid-template-columns: 1fr; /* یک ستون کامل */
        gap: 24px; /* فاصله‌ی عمودی بین آیتم‌ها */
        width: 100%;
    }

    /* 4. هر آیتم ویژگی - چیدمان عمودی (آیکون بالا، عنوان وسط، متن پایین) */
    .feature-item {
        display: flex;
        flex-direction: column; /* آیکون بالا، عنوان وسط، متن پایین */
        align-items: center; /* وسط‌چین کردن محتوا */
        text-align: center; /* متن‌ها در مرکز */
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* 5. آیکون - در بالا */
    .feature-icon-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0 0 12px 0; /* فاصله‌ی آیکون از عنوان */
    }

    .feature-icon {
        width: 60px; /* اندازه‌ی آیکون (در صورت نیاز تغییر دهید) */
        height: 60px;
        object-fit: contain;
        display: block;
    }

    /* 6. عنوان - در وسط */
    .feature-text {
        width: 100%;
        padding: 0;
        margin: 0;
        border: unset;
        border-top: 2px solid rgb(135 133 130);
    }

    .feature-item-title {
        font-size: 18px; /* در صورت نیاز تغییر دهید */
        font-weight: 700;
        line-height: 26px;
        margin: 0 0 8px 0; /* فاصله‌ی عنوان از توضیحات */
        padding: 0;
    }

    /* 7. توضیحات - در پایین */
    .feature-item-description {
        font-size: 15px; /* در صورت نیاز تغییر دهید */
        line-height: 22px;
        margin: 0;
        padding: 0;
    }

    /* ============================================
   بخش FAQ - موبایل
   ============================================ */

    /* 1. کانتینر اصلی */
    .product-faq-section {
        padding: 0 18px; /* هماهنگ با بخش‌های قبلی */
        margin: 32px 0 0 0; /* فاصله از بخش قبلی */
        width: 100%;
        box-sizing: border-box;
    }

    .product-faq-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* 2. عنوان اصلی (Frequently Asked Questions) */
    .product-faq-title {
        font-size: 24px; /* هماهنگ با سایر عناوین اصلی در موبایل */
        font-weight: 700;
        line-height: 32px;
        margin: 0 0 20px 0; /* فاصله از اولین سوال */
        padding: 0;
    }

    /* 3. هر آیتم آکاردئون */
    .product-faq-item {
        width: 100%;
        margin-bottom: 12px; /* فاصله‌ی بین سوال‌ها */
    }

        .product-faq-item:last-child {
            margin-bottom: 0;
            border-bottom: none;
        }

    /* 4. هدر (دکمه‌ی سوال) */
    .product-faq-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 16px 0; /* فاصله‌ی عمودی داخلی */
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        gap: 16px; /* فاصله‌ی بین متن سوال و آیکون */
    }

    /* 5. متن سوال */
    .product-faq-label {
        font-size: 16px; /* اندازه‌ی مناسب موبایل */
        font-weight: 600;
        line-height: 24px;
        margin: 0;
        padding: 0;
        flex: 1; /* متن سوال فضای باقیمانده را بگیرد */
    }

    /* 6. آیکون (فلش/پلاس) */
    .product-faq-icon {
        font-size: 18px;
        color: #5a5a5a; /* هماهنگ با رنگ‌های دیگر */
        flex-shrink: 0; /* از جمع شدن آیکون جلوگیری کند */
        transition: transform 0.3s ease; /* در صورت چرخش در حالت باز */
    }

    /* 7. محتوای جواب (بسته/باز توسط جاوااسکریپت کنترل می‌شود) */
    .product-faq-content {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden; /* برای انیمیشن باز/بسته شدن (اختیاری) */
    }

    /* 8. متن جواب */
    .product-faq-body {
        padding: 0 0 16px 0; /* فاصله‌ی پایین جواب از سوال بعدی */
        margin: 0;
        width:unset;
    }

        .product-faq-body p {
            font-size: 15px; /* اندازه‌ی مناسب موبایل */
            line-height: 24px;
            margin: 0;
            padding: 0;
        }

    .product-faq-section{
        background-color:unset;
    }
}