/* === استایل‌های مخصوص صفحه گالری === */

/* ============================================================
   v24 — کارت «مشاوره هوشمند» (تک‌مسیر پیام‌رسانی سایت)
   رفع باگ گزارش کارفرما («انگار یک باکس دیگه زیرش ایجاد شده»):
   بدنه کارت با اتریبیوت hidden کامل از نمایش حذف می‌شود
   (display:none) — بدون max-height صفر، بدون padding پنهان و
   بدون هیچ عنصر دومی که سایه/کادرش زیر کارت دیده شود. فقط یک
   کارت واحد وجود دارد.
   ============================================================ */
.consult-card[hidden],
.consult-body[hidden],
.consult-preview[hidden] {
    display: none !important;
}

.consult-card {
    max-width: 940px;
    margin: -6px auto 30px;
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* سرِکارت: آیکون + تیتر + توضیح + فلش باز/بسته */
.consult-head {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: right;
    font-family: 'Pinar', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.consult-icon {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #F5E6D3; /* کرم چوبی روشن — هماهنگ با کارت‌های تماس */
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.consult-head:hover .consult-icon {
    transform: scale(1.08);
}

.consult-icon svg {
    width: 30px;
    height: 30px;
}

.consult-titles {
    flex: 1;
    min-width: 0;
}

.consult-titles h2 {
    font-size: 22px;
    color: var(--accent-color);
    margin-bottom: 6px;
    line-height: 1.4;
}

.consult-titles p {
    color: #666;
    font-size: 14.5px;
    line-height: 1.9;
}

.consult-chevron {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: #9a8f83;
    transition: transform 0.3s ease;
}

.consult-card.open .consult-chevron {
    transform: rotate(-90deg); /* ‹ هنگام باز شدن به ˅ تبدیل می‌شود */
}

/* بدنه: بخش بازشو داخل همان کارت (نه کارت جدا) */
.consult-body {
    border-top: 1px dashed rgba(184, 147, 74, 0.28);
    padding: 22px 24px 26px;
}

.consult-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}

.consult-field label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 7px;
}

.consult-field input,
.consult-field select,
.consult-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: 'Pinar', sans-serif;
    font-size: 15px;
    background: #fff;
    color: var(--text-color);
}

.consult-field input:focus,
.consult-field select:focus,
.consult-field textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.consult-field-full {
    grid-column: 1 / -1;
}

/* کادر انتخاب عکس — دقیقا با زبان بصری کارت‌های تماس */
.consult-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    padding: 12px 10px;
    border: 1.5px dashed rgba(184, 147, 74, 0.45);
    border-radius: 10px;
    background: #FDF8F0;
    color: var(--accent-color);
    font-size: 14.5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* v54: اینپوت فایل «به‌صورت بصری مخفی» است نه display:none —
   بعضی مرورگرهای موبایل (iOS/WebView اندروید) برای اینپوت display:none
   پیکر عکس را باز نمی‌کنند؛ این شکل در همه موتورها کار می‌کند */
.consult-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.consult-upload:hover,
.consult-upload.has-photo {
    background: #F5E6D3;
}

.consult-preview {
    margin-top: 10px;
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #eee;
    display: block;
}

.consult-submit {
    margin-top: 18px;
    width: 100%;
    padding: 13px;
    background: var(--accent-color);
    color: #FFFDF8;
    border: 0;
    border-radius: 10px;
    font-family: 'Pinar', sans-serif;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.consult-submit:hover {
    background: #6f4520;
    transform: translateY(-2px);
}

.consult-submit:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.consult-msg {
    margin-top: 12px;
    font-size: 14.5px;
    text-align: center;
}

.consult-msg.ok { color: #1e7d3c; }
.consult-msg.err { color: #b3261e; }

/* موبایل: فرم تک‌ستونه */
@media (max-width: 640px) {
    .consult-card {
        margin: -6px 16px 26px;
    }

    .consult-grid {
        grid-template-columns: 1fr;
    }

    .consult-head {
        padding: 16px 18px;
        gap: 12px;
    }

    .consult-icon {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
    }

    .consult-icon svg {
        width: 25px;
        height: 25px;
    }

    .consult-titles h2 {
        font-size: 19px;
    }

    .consult-titles p {
        font-size: 13.5px;
    }

    .consult-body {
        padding: 18px 18px 22px;
    }
}

/* پس‌زمینه صفحه گالری (حذف عکس و جایگزینی با رنگ) */
.gallery-bg {
    background-color: #FDFBF7;
    /* رنگ دلخواه شما */
}

/* تیتر بالای گالری */
.page-header {
    text-align: center;
    padding: 60px 20px 40px;
    margin-top: 60px;
}

.page-header h1 {
    font-size: 36px;
    margin-bottom: 15px;
}

.page-header p {
    color: #555;
    font-size: 18px;
}

/* v83 — شعار صفحهٔ کاتالوگ و پروژه‌ها (خواست کارفرما): زیر داک/جستجو، بالای
   محتوا؛ همان فونت شعار قبلی اما یک پله ریزتر (۱۸→۱۵). در جریان صفحه است و
   با اسکرول طبیعی به بالا می‌رود؛ JS شفافیت را روی ۱۴۰px اول اسکرول کم می‌کند
   تا لطیف محو شود. فاصلهٔ پایین ۱۸px: در کاتالوگ با margin-top منفیِ
   باکس مشاوره (−۶px) جمع می‌شود → ~۱۲px فاصلهٔ تمیز. */
.page-slogan {
    text-align: center;
    color: #555;
    font-size: 15px;
    line-height: 1.9;
    margin: 6px 16px 18px;
    opacity: 1;
    will-change: opacity;
}

@media (max-width: 480px) {
    .page-slogan {
        font-size: 14px;
    }
}

/* دکمه‌های دسته‌بندی */
.category-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 20px 10px 40px;
}

.filter-btn {
    padding: 10px 25px;
    border: 1px solid var(--text-color);
    background: transparent;
    color: var(--text-color);
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Pinar', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
    /* v38 — وقتی دسته‌ای انتخاب می‌شود دکمه با اسکرول نرم به بالای صفحه
       می‌آید؛ این فاصله باعث می‌شود دکمه زیر نوار بالاییِ ثابت (fixed)
       گیر نکند (نوار حدود ۶۶ پیکسل است). فقط گالری از این کلاس استفاده می‌کند. */
    scroll-margin-top: 78px;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--text-color);
    color: var(--white);
}

/* شبکه بندی محصولات با Flexbox (سیستم جدید) */
/* v38 — کارت‌های محصول دیگر به ارتفاع بلندترین کارتِ ردیف کشیده نمی‌شوند:
   پیش‌تر flex پیش‌فرض stretch داشت و کارت تک‌عکسی هم به بلندی کارت
   پنج‌عکسی درمی‌آمد و زیرش فضای خالی بزرگ دیده می‌شد (گزارش کارفرما).
   حالا هر کارت به اندازه محتوای خودش بلند می‌شود.
   نکته مهم: فقط همین کانتینرِ صفحه گالری است — کارت‌های صفحه پروژه‌ها
   (#ongoing-container و #done-container) دقیقا مثل قبل stretch می‌مانند. */
#products-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 30px;
    padding: 40px 5% 80px;
}

/* کادر محصول - عرض ثابت ۳۵۰ پیکسل */
/* کادر محصول - عرض کوچکتر شد تا تعداد بیشتری در صفحه قرار بگیرند */
.product-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    flex: 0 0 260px !important;
    /* از 350 به 260 کاهش یافت */
    max-width: 260px !important;
}

.product-card:hover {
    transform: translateY(-5px);
}

/* کادر عکس با حاشیه سفید */
.product-image-container {
    position: relative;
    width: 100%;
    /* height: 200px را پاک کردیم */
    aspect-ratio: 1 / 1;
    /* این دستور عکس را دقیقا مربع میکند */
    border: 2px solid #ffffff;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* v77 — آیکون بزرگنمایی: SVG جدید کارفرما (فلش بزرگ‌نمایی به بیرون) + انتقال
   به گوشهٔ پایین چپ (روبروی جایگاه قبلی: پایین راست) — روی هر دو صفحهٔ
   محصولات و پروژه‌ها یکسان اعمال می‌شود (کلاس مشترک) */
.zoom-icon {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent !important;
    /* حذف دایره سفید */
    box-shadow: none !important;
    /* حذف سایه */
    opacity: 0;
    /* مخفی پیش‌فرض */
    transition: opacity 0.3s;
}

/* استایل خودِ فایل SVG (بزرگتر شد) */
.zoom-icon img {
    width: 40px;
    height: 40px;
    pointer-events: none;
}

.product-image-container:hover .zoom-icon {
    opacity: 1;
}

/* اطلاعات محصول */
.product-info {
    padding: 20px;
    text-align: right;
}

.product-code {
    display: inline-block;
    background-color: #f0f0f0;
    color: #555;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: bold;
}

.product-info h3 {
    color: var(--text-color);
    margin-bottom: 10px;
}

.product-info p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/* === استایل‌های سیستم بزرگنمایی (Lightbox) === */
/* پس‌زمینه: عکس کامل پترن روشن کارفرما (v15) — چون نسخه کاشی‌شده در نمایش واقعی
   به‌هم‌ریخته دیده شد، اکنون خودِ عکس به‌صورت تمام‌صفحه (cover) و بدون تکرار استفاده می‌شود */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f1ea;
    background-image: url('/images/gallery-bg-full.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* v42: کد محصول بالای عکس؛ نوار و دایره‌ها زیر آن */
    gap: 10px;
    padding: 24px;
}

.lightbox-overlay.active {
    display: flex;
}

/* کادر عکس: دقیقاً هم‌اندازه‌ی خود عکس می‌شود (هر نسبت ابعادی) —
   بنابراین هیچ ناحیه سفید اضافه‌ای در طول یا عرض دیده نمی‌شود */
.lightbox-image-container {
    position: relative;
    /* اندازه توسط خود عکس تعیین می‌شود؛ فقط سقف مجاز مشخص است
       (v42: جای کد محصول بالای عکس + نوار/دایره‌های زیر آن رعایت شده) */
    max-width: min(1200px, calc(92vw - 264px));
    max-height: 68vh;
    max-height: 68svh;
    border-radius: 16px;
    border: 1px solid rgba(60, 36, 21, 0.18);
    /* خط دور بسیار نازک */
    box-shadow: 0 30px 90px rgba(44, 26, 12, 0.35), 0 8px 28px rgba(44, 26, 12, 0.18);
    /* سایه نرم و محو */
    overflow: hidden;
    background: #ffffff;
    line-height: 0;
    /* فاصله زیر تگ img حذف شود */
    touch-action: none;
}

.lightbox-image-container img {
    display: block;
    width: auto;
    height: auto;
    /* عکس در سقف مجاز جا می‌شود و کادر خودش را با نسبت ابعاد عکس تنظیم می‌کند */
    max-width: min(1200px, calc(92vw - 264px));
    max-height: 68vh;
    max-height: 68svh;
    transition: transform 0.1s ease-out;
}

.lightbox-close {
    position: absolute;
    top: 10px;
    right: 24px;
    color: #3c2415;
    font-size: 48px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: #b8934a;
}

/* v28 — کد محصول بالای عکس در بزرگنمایی:
   مشتری از همین نما اسکرین‌شات می‌گیرد و از منوی شناور تماس می‌فرستد؛
   پس کد باید همیشه بالای عکس، درشت و خوانا باشد */
/* v42 — کد محصول: بیرون از عکس، با فاصله کمی بالای آن؛ کادر سفید ۷۰٪
   با متن قهوه‌ای و فونت سبک‌تر/باریک‌تر (خواست کارفرما) */
.lb-code {
    position: static;
    z-index: 4;
    pointer-events: none;
    max-width: 86%;
    padding: 7px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    border: none;
    color: #3c2415;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 3px 12px rgba(44, 26, 12, 0.12);
}

.lb-code[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .lb-code {
        font-size: 13px;
        font-weight: 500;
        padding: 5px 14px;
        max-width: 80%;
    }
}

/* موبایل: کادر نزدیک‌تر به لبه‌ها و ضربدر جمع‌وجورتر */
@media (max-width: 768px) {
    .lightbox-overlay {
        padding: 12px;
        /* v18: مقدار قدیمیِ ثابت ۳۰۰ پیکسل (میراث کاشی v14) عکس کامل را به یک
           مُهر کوچک وسط صفحه تبدیل می‌کرد و بقیه صفحه ساده دیده می‌شد؛
           حالا مثل دسکتاپ تمام‌صفحه (cover) است */
        background-size: cover;
    }

    .lightbox-image-container {
        max-width: calc(94vw - 144px); /* v42: جا برای دو ستون پیشنهاد (۶۴px) */
        border-radius: 12px;
    }

    .lightbox-image-container img {
        max-width: calc(94vw - 144px);
        max-height: 56vh;
        max-height: 56svh;
    }

    .lightbox-close {
        top: 2px;
        right: 14px;
        font-size: 40px;
    }
}

/* ============================================================
   ناوبری چندعکسی لایت‌باکس (v14)
   فلش‌های نیمه‌شفاف روی لبه‌های چپ/راست عکس + شمارنده فارسی
   ============================================================ */
.lb-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(60, 36, 21, 0.15);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #b8934a;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.55;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(44, 26, 12, 0.18);
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.25s ease, background 0.25s ease, transform 0.2s ease;
}

/* فلش‌ها فقط وقتی محصول بیش از یک عکس دارد دیده می‌شوند */
.lightbox-overlay.has-multi .lb-nav {
    display: flex;
}

.lb-nav:hover,
.lb-nav:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.85);
    outline: none;
}

.lb-nav:active {
    transform: translateY(-50%) scale(0.92);
}

.lb-nav svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* در فارسی «بعدی» سمت چپ است (جهت خواندن راست‌به‌چپ) */
.lb-next {
    left: 14px;
}

.lb-prev {
    right: 14px;
}

/* شمارنده فارسی «۲ از ۳» پایین کادر عکس */
.lb-counter {
    display: none;
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(60, 36, 21, 0.12);
    color: #6b4a2f;
    font-size: 13px;
    line-height: 1;
    padding: 6px 14px 7px;
    border-radius: 999px;
    z-index: 3;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 10px rgba(44, 26, 12, 0.12);
    pointer-events: none;
}

.lightbox-overlay.has-multi .lb-counter {
    display: flex;
}

/* انیمیشن اسلاید بین عکس‌ها */
@keyframes lbInNext {
    from { opacity: 0; transform: translateX(-34px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes lbInPrev {
    from { opacity: 0; transform: translateX(34px); }
    to   { opacity: 1; transform: translateX(0); }
}

.lightbox-image-container img.lb-anim-next {
    animation: lbInNext 0.3s ease;
}

.lightbox-image-container img.lb-anim-prev {
    animation: lbInPrev 0.3s ease;
}

/* موبایل: فلش‌های جمع‌وجورتر نزدیک لبه */
@media (max-width: 768px) {
    .lb-nav {
        width: 38px;
        height: 38px;
        opacity: 0.65;
    }

    .lb-nav svg {
        width: 18px;
        height: 18px;
    }

    .lb-next {
        left: 8px;
    }

    .lb-prev {
        right: 8px;
    }

    .lb-counter {
        bottom: 10px;
        font-size: 12px;
    }
}
/* ============================================================
   v27 — صفحه «پروژه‌ها»: تیتر دو بخش (درحال ساخت / اجرا شده)
   کارت‌ها و لایت‌باکس از همان استایل‌های گالری استفاده می‌کنند.
   ============================================================ */
.projects-section {
    padding: 0;
}

.projects-section-title {
    text-align: center;
    color: var(--accent-color);
    font-size: 30px;
    margin: 30px 0 6px;
}

.projects-section-sub {
    text-align: center;
    color: #9a8f83;
    font-size: 15px;
    margin: 0 0 26px;
}

@media (max-width: 768px) {
    .projects-section-title {
        font-size: 24px;
        margin: 22px 0 4px;
    }

    .projects-section-sub {
        font-size: 13.5px;
        margin-bottom: 20px;
    }
}

/* v39 — پیام بارگذاری استاتیک: تا وقتی جاوااسکریپت محصولات را می‌سازد،
   به‌جای فضای خالی این پیام دیده می‌شود (محافظت در برابر قطعی شبکه/استقرار).
   بعد از رندر، displayProducts آن را پاک می‌کند. */
.products-loading {
    flex: 1 1 100%;
    text-align: center;
    padding: 60px 0;
    color: var(--muted, #8a7a6d);
    font-size: 0.95rem;
}


/* ============================================================
   v42 — بازطراحی لایت‌باکس (سبک اینستاگرام) + دایره‌های کارت
   ============================================================ */
/* صحنه: دو ستون پیشنهاد + عکس اصلی وسط (ستون‌ها همیشه سر جایشان می‌مانند
   تا چیدمان بین محصولات نپرد) */
.lb-stage {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 0;
}

.lb-side {
    flex: 0 0 120px;
    width: 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lb-side-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(60, 36, 21, 0.18);
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(44, 26, 12, 0.14);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lb-side-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(44, 26, 12, 0.2);
}

.lb-side-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* نوار بندانگشتی بقیه عکس‌ها زیر عکس اصلی */
.lb-thumbs {
    display: flex;
    flex-direction: row;
    gap: 8px;
    max-width: min(1200px, 92vw);
    overflow-x: auto;
    padding: 4px 2px;
    touch-action: pan-x; /* اسکرول لمسی نوار باید کار کند */
    -webkit-overflow-scrolling: touch;
}

/* وسط‌چین وقتی جا هست؛ در سرریز هم ابتدای نوار بریده نشود */
.lb-thumb:first-child { margin-inline-start: auto; }
.lb-thumb:last-child { margin-inline-end: auto; }

.lb-thumb {
    flex: 0 0 56px;
    width: 56px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(60, 36, 21, 0.22);
    overflow: hidden;
    background: #ffffff;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lb-thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.lb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* دایره‌های نشانگر (جای شمارنده متنی) — سفید ۷۰٪؛ دایره فعال کمی بزرگ‌تر */
.lb-dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 2px 0 0;
}

.lb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 1px rgba(60, 36, 21, 0.22);
    cursor: pointer;
    transition: width 0.2s ease, height 0.2s ease;
}

.lb-dot.on {
    width: 11px;
    height: 11px;
    box-shadow: 0 0 0 1px rgba(60, 36, 21, 0.3);
}

/* ============================================================
   v60 — کارت تکِ «پروژه اجراشده» در بزرگنمایی (خواست کارفرما):
   یک نوار باریک شیشه‌ای زیر دایره‌ها — با نشان قهوه‌ای برند از
   کارت‌های محصول متمایز می‌شود تا با «محصولات مشابه» اشتباه نشود.
   حداکثر یک پروژه؛ بدون پروژه‌ی ثبت‌شده اصلا نمایش داده نمی‌شود.
   (لایت‌باکس پس‌زمینه‌ی روشن دارد — استایل روشن هماهنگ است.)
   ============================================================ */
.lb-project {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    width: calc(100% - 32px);
    margin: 2px auto 0;
    padding: 8px 14px;
    border: 1px solid rgba(184, 147, 74, 0.35);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--text-color);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lb-project:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.14);
}

.lb-project-badge {
    flex: 0 0 auto;
    font-family: 'Pinar', sans-serif;
    font-size: 11px;
    line-height: 1.4;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-color);
    color: #fff;
}

.lb-project-thumb {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 9px;
    flex: 0 0 auto;
}

.lb-project-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Pinar', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-project-cta {
    flex: 0 0 auto;
    font-family: 'Pinar', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: var(--accent-color);
}

/* attribute hidden باید حتی با display:flex هم مخفی کند */
.lb-project[hidden] {
    display: none !important;
}

@media (max-width: 560px) {
    .lb-project-cta { display: none; } /* در موبایل فقط نشان + عکس + عنوان */
}

/* دایره‌های روی کارت محصول: به تعداد عکس‌های نمایش‌داده‌نشده */
.card-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 4px;
    z-index: 2;
    pointer-events: none;
}

.card-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 1px rgba(44, 26, 12, 0.3);
}

/* v43 — تیتر «محصولات مشابه»: دسکتاپ/لنداسکیپ نمایش داده نمی‌شود؛
   فقط در موبایل عمودی (بلاک بعدی). بدون هیچ قاب یا بک‌گراندی. */
.lb-similar-title {
    display: none;
}

.lb-similar-title[hidden] {
    display: none !important;
}

/* attribute hidden باید حتی با display:flex هم مخفی کند */
.lb-thumbs[hidden],
.lb-dots[hidden] {
    display: none !important;
}

/* موبایل: ستون‌های پیشنهاد جمع‌وجورتر */
@media (max-width: 768px) {
    .lb-stage {
        gap: 8px;
    }

    .lb-side {
        flex: 0 0 64px;
        width: 64px;
        gap: 8px;
    }

    .lb-thumb {
        flex: 0 0 46px;
        width: 46px;
    }

    .lb-dot {
        width: 6px;
        height: 6px;
    }

    .lb-dot.on {
        width: 10px;
        height: 10px;
    }
}

/* ============================================================
   v43 — نسخه عمودی موبایل: چیدمان تازه لایت‌باکس (خواست کارفرما)
   • کد محصول + عکس بزرگ‌شده به «بالای صفحه» می‌روند (فاصله مناسب از بالا)
   • عکس تا ۸۰٪ عرض صفحه بزرگ می‌شود (قبلا ~۵۷٪ به‌خاطر دو ستون پیشنهاد)
   • ستون‌های پیشنهاد از دو طرف عکس حذف و «زیر نوار بقیه عکس‌ها» می‌آیند
     با تیتر «محصولات مشابه» (بدون قاب/بک‌گراند)
   • اگر عکس خیلی بلند باشد، سقف ارتفاعش طوری است که بخش‌های «اسلاید
     بقیه عکس‌ها» و «محصولات مشابه» همیشه ~۱۵ پیکسل بالای دکمه شناور
     بمانند (پدینگ پایین ۸۴px = ۶px بوتوم + ۵۴px دکمه + ~۲۴px مجاز)
   • دسکتاپ و موبایل لنداسکیپ عیناً مثل v42 می‌مانند
   ============================================================ */
@media (max-width: 768px) and (orientation: portrait) {
    .lightbox-overlay.active {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, auto);
        row-gap: 7px;
        column-gap: 8px;
        justify-items: center;
        align-items: start;
        /* v43 اصلاح: پیش‌فرض گرید align-content:stretch است که فضای خالی را
           بین همه ردیف‌ها پخش می‌کند و محتوا را از بالا دور می‌کند؛
           با start محتوا دقیقا از بالای صفحه می‌نشیند */
        align-content: start;
        padding: 12px 10px 84px;
        overflow: hidden;
    }

    /* صحنه و ستون‌ها از جریان حذف و بچه‌هایشان آیتم گرید می‌شوند */
    .lb-stage,
    .lb-side {
        display: contents;
    }

    .lb-code {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .lightbox-image-container {
        grid-column: 1 / -1;
        grid-row: 2;
        width: fit-content;
        max-width: 80vw;
        justify-self: center;
    }

    .lightbox-image-container img {
        max-width: 80vw;
        /* سقف ارتفاع: همه سکشن‌ها + دکمه شناور + ۱۵px در همان یک صفحه جا شوند */
        max-height: max(calc(100vh - 360px), 240px);
        max-height: max(calc(100dvh - 360px), 240px);
    }

    .lb-dots {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .lb-thumbs {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .lb-similar-title {
        display: block;
        grid-column: 1 / -1;
        grid-row: 5;
        margin: 2px 0 0;
        color: #6b4a2f;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        background: none;
        border: none;
        box-shadow: none;
    }

    /* ۴ کارت پیشنهاد (۲+۲) در یک ردیف چهارستونه، زیر تیتر */
    .lb-side-card {
        grid-column: auto;
        grid-row: 6;
        width: 100%;
        max-width: 96px;
    }
}

/* ============================================================
   v52 — منوی کشویی «کاتالوگ» (خواست کارفرما):
   دکمه‌های جدا دسته‌بندی حذف و داخل یک منوی بازشونده منتقل شدند
   تا در موبایل فضای کمتری گرفته شود. زبان طراحی همان دکمه‌های
   قبلی است: حاشیه تیره، حالت فعال توپر.
   ============================================================ */
.catalog-dropdown {
    position: relative;
    max-width: 420px;
    margin: 0 auto 28px;
    padding: 0 10px;
    z-index: 60;
}

.catalog-toggle {
    position: relative;
    z-index: 0; /* v69 — زمینهٔ چیدمان: لایهٔ ذرات فیز (z-index:-2) پشت لایهٔ دیداری دکمه (::before با z-index:-1) می‌ماند */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    border: 0;          /* v69 — حاشیه به لایهٔ دیداری ::before منتقل شد */
    border-radius: 50px; /* v69 — شکل قرص خود دکمه (سایهٔ fizz-static/فوکوس) */
    background: none;   /* v69 — پس‌زمینه به لایهٔ دیداری ::before منتقل شد */
    color: var(--text-color);
    font-family: 'Pinar', sans-serif;
    cursor: pointer;
    transition: color 0.3s ease;
    touch-action: manipulation;
    /* v58: کل دکمه هدف لمس است — بدون فلش، بدون تأخیر */
    -webkit-tap-highlight-color: transparent;
}

/* v69 — لایهٔ دیداری دکمه: قرص ماتِ هم‌رنگ صفحه. خواست واسطه: ذرات فیز از
   «پشتِ» دکمه و از تمام مناطق پشت آن متولد شوند و داخل دکمه دیده نشوند.
   پس زمینه مات است (کرم #FDFBF7 = همان رنگ صفحه — ظاهر دکمه کاملاً مثل قبل)،
   ذرهٔ زیر دکمه نامرئی می‌ماند تا از لبه بیرون بزند و در اطراف ظاهر شود. */
.catalog-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--text-color);
    border-radius: 50px;
    background: var(--bg-color);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.catalog-dropdown.open .catalog-toggle {
    color: var(--white);
}

.catalog-dropdown.open .catalog-toggle::before {
    background: var(--text-color);
}

/* v82 — هاور فقط برای دستگاه‌های موس‌دار. روی موبایل/تاچ، بعد از اولین تاچ
   حالت :hover «چسبیده» می‌ماند و پس‌زمینهٔ تیرهٔ دکمه بعد از بسته شدن منو
   برنمی‌گشت (گزارش کارفرما — هر دو صفحه کاتالوگ و پروژه‌ها). حالت باز
   (.open) مستقل از هاور برای همهٔ دستگاه‌ها برقرار است. */
@media (hover: hover) and (pointer: fine) {
    .catalog-toggle:hover {
        color: var(--white);
    }
    .catalog-toggle:hover::before {
        background: var(--text-color);
    }
}

/* v69 — افکت «فیز» از پشت دکمه (خواست واسطه بعد از تست v68): ذره‌ها از
   «تمام مناطق پشتِ» دکمه متولد می‌شوند، تا بیرون زدن از لبه پشت لایهٔ مات
   دکمه پنهان‌اند (داخل دکمه دیده نمی‌شوند) و بعد در اطراف دکمه پراکنده و
   محو می‌شوند — حتی روی باکس جستجو. بی‌نهایت و در همهٔ بازدیدها؛
   v76: با چسبیدن داک یا باز شدن منو خاموش و با برگشت به ابتدای صفحه
   دوباره روشن می‌شود. فقط transform/opacity روی عناصر
   pointer-events:none — صفر جابه‌جایی چیدمان و صفر بار سرور. برد بیرون‌زد
   هر ذره با فضای واقعی viewport محدود شده، پس هیچ سرریز افقی/اسکرول
   ناخواسته‌ای ایجاد نمی‌شود. */
.mta-fizz {
    position: absolute;
    inset: 0;
    z-index: -2; /* v69 — پشتِ لایهٔ دیداری دکمه (::before با z-index:-1) */
    pointer-events: none;
    overflow: visible;
}
.mta-fizz i {
    position: absolute;
    left: var(--x, 50%); /* v69 — محل تولد: تصادفی روی تمام سطح پشت دکمه */
    top: var(--y, 50%);
    width: var(--s, 10px);
    height: var(--s, 10px);
    margin: calc(var(--s, 10px) / -2);
    /* v70 — ستارهٔ چهارپر (لوزی با گودیِ نرمِ داخل — مثل آیکون جرقهٔ هوش
       مصنوعی؛ خواست کارفرما، بدون چرخش). ماسک SVG درون‌خطی: بدون فایل یا
       درخواست جدید، بدون تغییر JS و انیمیشن — همان کارایی و روانی v69.
       رنگ از background می‌آید و ماسک فقط شکل را می‌برد. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C53.75 27.5 72.5 46.25 100 50 72.5 53.75 53.75 72.5 50 100 46.25 72.5 27.5 53.75 0 50 27.5 46.25 46.25 27.5 50 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C53.75 27.5 72.5 46.25 100 50 72.5 53.75 53.75 72.5 50 100 46.25 72.5 27.5 53.75 0 50 27.5 46.25 46.25 27.5 50 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    background: var(--c, rgba(184, 147, 74, 0.85)); /* قهوه‌ای چوبی — پایه */
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
    animation: mta-fizz-fly var(--dur, 2.4s) linear var(--d, 0s) infinite;
    will-change: transform, opacity;
}
/* تنوع رنگ فقط داخل پالت خود سایت */
.mta-fizz i:nth-child(3n) { --c: rgba(176, 123, 69, 0.9); }  /* کاراملی روشن‌تر */
.mta-fizz i:nth-child(5n) { --c: rgba(90, 58, 33, 0.85); }   /* قهوه‌ای تیره‌تر */
.mta-fizz i:nth-child(7n) { --c: rgba(184, 147, 74, 0.5); }   /* کم‌رنگ‌تر */
@keyframes mta-fizz-fly {
    0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
    12%  { opacity: 0.9; }
    62%  { opacity: 0.6; }
    100% { transform: translate(var(--dx, 40px), var(--dy, -20px)) scale(1.05); opacity: 0; }
}
/* فیز خاموش (JS کلاس off می‌گذارد؛ v76: با داک‌شدن/باز شدن منو خاموش و
   با برگشت اسکرول به ابتدای صفحه دوباره روشن می‌شود) */
.mta-fizz.off { display: none; }
/* برای کسانی که «کاهش حرکت» دارند: هیچ ذره‌ای ساخته نمی‌شود —
   فقط یک حلقهٔ ثابت قهوه‌ای دور دکمه می‌ماند (بدون هیچ حرکتی) */
@media (prefers-reduced-motion: reduce) {
    .mta-fizz { display: none; }
    .catalog-toggle.fizz-static { box-shadow: 0 0 0 3px rgba(184, 147, 74, 0.55); }
}

.catalog-titles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.catalog-title {
    font-size: 20px; /* v76 — درشت‌تر (خواست کارفرما: ۱۷ ← ۲۰) */
    line-height: 1.35;
    font-weight: 600;
}

.catalog-selected {
    font-size: 13px; /* v76 — هماهنگ با تیتر درشت‌تر */

    opacity: 0.75;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* v101 — فلش کوچک رو به پایین بازگشت (خواست کارفرما): در قوسِ انتهای دکمه،
   روبه‌روی کلمه «کاتالوگ» و کاملاً جدا از متن. justify-content:space-between
   خودِ دکمه (v52) فلش را به انتهای قرص می‌برد و gap:12px همان را از متن
   دور نگه می‌دارد. رنگ از currentColor: در حالت عادی قهوه‌ای متن، با هاور
   یا باز شدن منو سفید — هماهنگ با بقیهٔ دکمه. با باز شدن منو نرم ۱۸۰ درجه
   می‌چرخد تا جهتِ «باز» را نشان بدهد و با بسته شدن برگردد. فقط تزئینی است:
   کلیک روی خود فلش هم مثل هر نقطهٔ دیگر دکمه منو را باز/بسته می‌کند. */
.catalog-chev {
    flex: 0 0 auto;
    opacity: 0.9;
    transition: transform 0.35s ease;
}
.catalog-dropdown.open .catalog-chev {
    transform: rotate(180deg);
}

.catalog-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 10px;
    left: 10px;
    background: var(--white);
    border: 1px solid rgba(26, 26, 26, 0.12);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(26, 26, 26, 0.18);
    padding: 8px;
    max-height: min(52vh, 430px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* v60: اسکرول داخل منو به صفحه زنجیر نشود — وگرنه در موبایل وقتی کاربر
       داخل لیست دسته‌ها اسکرول می‌کند تا به دسته‌ی آخر برسد، صفحه هم کمی
       اسکرول می‌شد و منو وسط انتخاب بسته می‌شد (از دید مشتری مثل باگ) */
    overscroll-behavior: contain;
}

.catalog-item {
    /* v70 — ردیف فلکسی: نام دسته یک سمت، شمارندهٔ محصولات سمت دیگر
       (جهت خودکار با RTL/LTR صفحه عوض می‌شود) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: start;
    padding: 11px 16px;
    margin: 2px 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-color);
    font-family: 'Pinar', sans-serif;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

/* v70 — شمارندهٔ محصولات: همان فونت دسته‌بندی (مورابا)، فقط کوچک‌تر و
   کم‌رنگ تا مینیمال بماند و با نام رقابت نکند؛ همیشه نمایان است (موبایل
   هم بدون hover همان لحظهٔ باز شدن منو می‌بیندش) */
.catalog-item .ci-count {
    flex: none;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}

.catalog-item.active .ci-count { opacity: 0.8; }

.catalog-item:hover {
    background-color: rgba(26, 26, 26, 0.08);
}

.catalog-item.active {
    background-color: var(--text-color);
    color: var(--white);
}

/* ============================================================
   v55 — جستجوی محصولات (خواست کارفرما):
   جعبه جستجو زیر منوی کاتالوگ — هم‌سبک با دکمه کاتالوگ
   (کپسولی با حاشیه تیره). جستجو روی نام سه‌زبانه + کد + نوع چوب.
   ============================================================ */
.gallery-search {
    position: relative;
    max-width: 420px;
    margin: -12px auto 24px;
    padding: 0 10px;
    z-index: 50;
}

.gallery-search-input {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--text-color);
    border-radius: 50px;
    background: transparent;
    padding: 0 20px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.gallery-search-input:focus-within {
    background-color: var(--text-color);
    color: var(--white);
}

.gallery-search-input svg {
    flex: 0 0 auto;
    opacity: 0.8;
}

.gallery-search-input input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font-family: 'Pinar', sans-serif;
    font-size: 15px;
    padding: 12px 0;
    -webkit-appearance: none;
    appearance: none;
}

.gallery-search-input input::placeholder {
    color: inherit;
    opacity: 0.55;
}

.gallery-search-hint {
    max-width: 420px;
    margin: -16px auto 24px;
    padding: 0 24px;
    text-align: center;
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.75;
}

/* ===== v53 — اسکلتون بارگیری محصولات (شیمر) ===== */
.sk-card { pointer-events: none; }
.sk-card .sk-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background-color: #efe9df;
    background-image: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: mta-shimmer 1.4s ease-in-out infinite;
}
.sk-line {
    display: block;
    height: 12px;
    border-radius: 6px;
    margin: 10px 0;
    background-color: #efe9df;
    background-image: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: mta-shimmer 1.4s ease-in-out infinite;
}
.sk-line-70 { width: 70%; }
.sk-line-50 { width: 50%; }
@keyframes mta-shimmer {
    0% { background-position: 130% 0; }
    100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sk-card .sk-img, .sk-line { animation: none; }
}

/* ============================================================
   v76 — داک کاتالوگ (خواست کارفرما): حذف هدینگ؛ دکمه کاتالوگ + باکس
   جستجو در یک نوار شناور که زیر ناوبر «می‌چسبد». بالای صفحه همه‌چیز
   مثل قبل (فیز روشن، پس‌زمینهٔ کامل)؛ به محض چسبیدن داک (اسکرول به
   سمت محصولات): فیز خاموش، پس‌زمینهٔ دکمه و جستجو ۲۰٪ + بلور شیشه‌ای
   و نوار ثابت می‌ماند تا از هر نقطهٔ لیست بتوان دسته عوض کرد. برگشت
   به ابتدا = بازگشت استایل و فیز. متن‌ها همیشه کاملاً واضح می‌مانند.
   ============================================================ */
.gallery-dock {
    position: sticky;
    top: 66px; /* JS ارتفاع واقعی هدر را روی همین المان تنظیم می‌کند */
    z-index: 900; /* زیر هدر (۱۰۰۰)، بالای محصولات؛ لایت‌باکس (۹۹۹۹) بالای همه */
    max-width: 440px;
    margin: 84px auto 0;
    padding: 6px 0 2px;
}

/* حالت داک‌شده — شیشهٔ ۲۰٪؛ فقط پس‌زمینه شفاف می‌شود، متن واضح می‌ماند */
body.gallery-docked .catalog-dropdown:not(.open) .catalog-toggle::before {
    background: rgba(253, 251, 247, 0.2);
    border-color: rgba(26, 26, 26, 0.28);
    box-shadow: 0 3px 18px rgba(26, 26, 26, 0.07);
    -webkit-backdrop-filter: blur(7px) saturate(1.15);
    backdrop-filter: blur(7px) saturate(1.15);
}
body.gallery-docked .gallery-search-input {
    background: rgba(253, 251, 247, 0.2);
    border-color: rgba(26, 26, 26, 0.28);
    -webkit-backdrop-filter: blur(7px) saturate(1.15);
    backdrop-filter: blur(7px) saturate(1.15);
}

/* هاور/فوکوس روی دکمهٔ داک‌شده (دسکتاپ): مثل حالت باز، جامد تیره — خوانا
   v82 — هاور در همان مدیای موس‌دار (چسبیدن هاور تاچی نباید تیره‌اش کند)؛
   فوکوس کیبورد (:focus-visible) برای همهٔ دستگاه‌ها می‌ماند. */
@media (hover: hover) and (pointer: fine) {
    body.gallery-docked .catalog-dropdown:not(.open) .catalog-toggle:hover::before {
        background: var(--text-color);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
body.gallery-docked .catalog-dropdown:not(.open) .catalog-toggle:focus-visible::before {
    background: var(--text-color);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* تایپ در جستجوی داک‌شده: شیشه جمع‌تر تا متن تیره خوانا بماند */
body.gallery-docked .gallery-search-input:focus-within {
    background: rgba(253, 251, 247, 0.65);
    color: var(--text-color);
    border-color: rgba(26, 26, 26, 0.35);
    -webkit-backdrop-filter: blur(7px) saturate(1.15);
    backdrop-filter: blur(7px) saturate(1.15);
}

/* هدینگ فقط برای موتور جستجو و صفحه‌خوان — هیچ رد بصری ندارد */
.mta-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ============================================================
   v78 — صفحه پروژه‌ها: کارت = یک عکس کاور + نشان تعداد عکس‌ها
   (الگوی کارت محصول؛ بقیه عکس‌ها در لایت‌باکس اسکرول می‌شوند).
   تمام قواعد با body[data-page="projects"] محدود به همین صفحه‌اند
   تا کاتالوگ که از همین فایل CSS استفاده می‌کند دست‌نخورده بماند.
   ============================================================ */

/* v78 — ریشه باگ چیدمان (از v38): فلکسِ شبکه فقط به #products-container
   (کاتالوگ) داده شده بود و #ongoing-container/#done-container هیچ استایلی
   نداشتند → display:block؛ کارت‌ها در RTL به لبه راست می‌چسبیدند و بدون
   فاصله روی هم می‌افتند (همان به‌هم‌ریختگی اسکرین‌شات کارفرما). حالا دقیقاً
   همان مدل کاتالوگ: فلکس مرکزچین با همان gap و padding. */
body[data-page="projects"] .gallery-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 30px;
    padding: 40px 5% 80px;
}

body[data-page="projects"] .proj-photo-count {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(26, 26, 26, 0.66);
    color: #FDFBF7;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 12px 7px;
    border-radius: 999px;
    letter-spacing: 0.3px;
    pointer-events: none;
    /* کلیک از روی نشان رد می‌شود تا لایت‌باکس باز شود */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* توضیح بلند پروژه: حداکثر ۲ خط با سه‌نقطه — کارت‌های یک ردیف هم‌قد می‌مانند */
body[data-page="projects"] .product-info p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   v80 — صفحه «پروژه‌ها»: بزرگنمایی در موبایل عمودی
   خواست کارفرما: عکس بزرگ‌شده پروژه در موبایل «کاملا به بالای صفحه
   چسبیده» نباشد و تقریبا از نظر ارتفاع در مرکز دیده شود. گرید v43
   کاتالوگ عمدا بالای صفحه می‌ماند (کد محصول برای اسکرین‌شات مشتری)؛
   نام پروژه = همان کلاس lb-code؛ همه استایل‌هایش از v42/v43 ارث می‌رسد.
   v81 — همان خواست برای کاتالوگ: «فاصله از بالا کم شده؛ معادل فاصلهٔ
   عکس بزرگ‌نمایی‌شده در پروژه‌ها باشد» — پس همین center برای صفحهٔ
   کاتالوگ (data-page="gallery") هم اعمال شد تا هر دو لایت‌باکس دقیقا
   هم‌تراز باشند. گرید v43 و دسکتاپ/لنداسکیپ دست‌نخورده‌اند.
   ============================================================ */
@media (max-width: 768px) and (orientation: portrait) {
    body[data-page="projects"] .lightbox-overlay.active,
    body[data-page="gallery"] .lightbox-overlay.active {
        align-content: center;
    }
}

/* ============================================================
   v98 — دراپ‌داون سفارشی فرم مشاوره (بازخورد کارفرما: سلکت بومی
   موبایل با تم سایت نمی‌خواند). سلکت بومی بصری مخفی می‌شود؛ تریگر
   و پنل سفارشی جای آن را می‌گیرند (پنل position:fixed — ضد کلیپ).
   ============================================================ */
.cdd-wrap {
    position: relative;
}

/* نکته: سلیکتور دوکلاسه تا از `.consult-field select` (0,1,1) قوی‌تر باشد */
.cdd-wrap .cdd-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cdd-trigger {
    width: 100%;
    min-height: 47px;
    padding: 10px 13px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    font-family: 'Pinar', sans-serif;
    font-size: 15px;
    color: var(--text-color);
    text-align: right;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cdd-trigger.is-empty {
    color: #9b8a76;
}

.cdd-trigger:focus-visible {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(184, 147, 74, 0.12);
}

.cdd-chev {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-left: 2px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    transform: rotate(-45deg);
    margin-top: -4px;
    transition: transform 0.2s ease;
}

.cdd-trigger.is-open .cdd-chev {
    transform: rotate(135deg);
    margin-top: 4px;
}

.cdd-panel {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #E2D5C3;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(60, 42, 24, 0.18);
    padding: 6px;
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cdd-opt {
    display: block;
    width: 100%;
    text-align: right;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: 'Pinar', sans-serif;
    font-size: 15px;
    color: var(--text-color);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cdd-opt:hover,
.cdd-opt:focus-visible {
    background: #F5E6D3;
    outline: none;
}

.cdd-opt.is-sel {
    background: #F5E6D3;
    color: var(--accent-color);
    font-weight: 500;
}

.cdd-opt.is-ph {
    color: #9b8a76;
}