/* تعریف متغیرهای رنگ برای دسترسی سریع در آینده */
:root {
    --bg-color: #FDFBF7;
    /* رنگ پس‌زمینه کرم روشن */
    --text-color: #1A1A1A;
    /* رنگ مشکی مات متن و لوگو */
    --accent-color: #b8934a;
    /* رنگ قهوه‌ای چوبی برای دکمه‌ها */
    --white: #ffffff;
}

/* ریست کردن تنظیمات پیش‌فرض مرورگر */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Pinar', sans-serif;
    /* استفاده از فونت وزیرمتن */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Pinar', sans-serif;
    /* تغییر به فونت مربع */
}

/* استایل دهی به نوار بالایی سایت */
/* استایل دهی به نوار بالایی سایت */
/* استایل نوار بالایی سایت - ثابت در بالای صفحه */
/* استایل نوار بالایی سایت - ثابت در بالای صفحه */
/* استایل نوار بالایی سایت - ثابت در بالای صفحه */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--white);
    /* حالت اولیه: پس‌زمینه سفید جامد */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    /* ترانزیشن نرم فقط برای تغییر رنگ پس‌زمینه و سایه */
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* استایل داخل نوار */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 5%;
}

/* وقتی جاوااسکریپت کلاس scrolled را اضافه کرد: */
header.scrolled {
    background-color: rgba(255, 255, 255, 0);
    /* پس‌زمینه کاملا شفاف (Opacity صفر) */
    box-shadow: none;
    /* حذف سایه */
    /* هیچ افکت بلوری (blur) در کار نیست */
}

/* صفحه‌های داخلی (گالری، تماس): نوار بالایی با اسکرول سفید بماند
   تا لوگو و دکمه همبرگر با کارت‌ها قاطی نشوند */
body:not(.home) header.scrolled {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* متن‌ها و لوگو همیشه مشکی هستند تا روی پس‌زمینه سفید خوانا باشند */
.logo h3 {
    color: var(--text-color);
}

.nav-links a {
    color: var(--text-color);
}

.hamburger span {
    background-color: var(--text-color);
}

/* متن‌ها و لوگو همیشه مشکی هستند تا روی شیشه سفید خوانا باشند */
.logo h3 {
    color: var(--text-color);
}

.nav-links a {
    color: var(--text-color);
}

.hamburger span {
    background-color: var(--text-color);
}

.nav-links a {
    color: #fff;
    /* سفید روی عکس */
    transition: color 0.4s ease;
}

.hamburger span {
    background-color: #fff;
    /* همبرگر سفید روی عکس */
    transition: background-color 0.4s ease;
}

/* وقتی اسکرول شد، رنگ‌ها به مشکی برگردد */
.navbar.scrolled .logo h3,
.navbar.scrolled .nav-links a {
    color: var(--text-color);
    /* مشکی */
}

.navbar.scrolled .hamburger span {
    background-color: var(--text-color);
    /* مشکی */
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* استایل اختصاصی برای متن لوگو */
/* v18: مارجین/پدینگ کمتر شد — ناوبر حدود ۲۰ پیکسل کوتاه‌تر می‌شود تا
   بالای متن هرو زیر پس‌زمینه سفید ناوبر گم نشود */
.logo h3 {
    font-size: 18px;
    /* سایز دلخواهتان، مثلا 24 پیکسل */
    font-weight: bold;
    /* ضخامت فونت */
    letter-spacing: 0px;
    /* فاصله بین حروف (برای لوگوهای لاتین لوکس، این VERY تاثیرگذار است) */
    margin: 2px 0;
    /* حذف فاصله‌های پیش‌فرض (v18: از ۱۰ به ۲) */
    padding-top: 0;
    /* v52: متن PEACE OF ART کمی به پایین منتقل شد تا از نظر ارتفاع
       دقیقا وسط آیکون ۶۴ پیکسلی لوگو بنشیند (خواست کارفرما).
       transform است تا ارتفاع ناوبر (≈۶۶px) تغییری نکند. */
    transform: translateY(2px);
    color: var(--text-color);
    /* رنگ مشکی */
}

/* اگر از کلاس english-name استفاده کرده بودید، این هم حذف کنید */


/* مهم: کنترل سایز دقیق لوگو */
/* v18: از ۸۰ به ۶۴ پیکسل — ارتفاع کل ناوبر ≈ ۶۶ پیکسل می‌شود */
.logo-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-left: -10px;
    /* فاصله کمی بین لوگو و متن */
    flex-shrink: 0;
    /* این دستور جلوی فشرده شدن لوگو را وقتی صفحه کوچک می‌شود می‌گیرد */
}

.english-name {
    font-size: 12px;
    color: gray;
    font-weight: normal;
    margin-top: 5px;
    /* فاصله کمی برای زیباتر شدن */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    /* ریست کردن مارجین پیش‌فرض */
    padding: 0;
    /* ریست کردن پدینگ پیش‌فرض */
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: bold;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--accent-color);
    /* وقتی موس میره روش قهوه‌ای میشه */
}

/* بخش اصلی هیرو (معرفی اولیه) */
/* کادر بیرونی که فضای اسکرول را ایجاد میکند (ارتفاع زیاد دارد) */
/* کادر بیرونی که فضای اسکرول را ایجاد میکند */
.hero-scroll {
    height: 300vh;
    position: relative;
}

/* کادر داخلی که موقع اسکرول ثابت (Sticky) می‌ماند */
.hero-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    /* در موبایل ارتفاع نوار آدرس‌مرورگر را از view حذف می‌کند
       تا پایه‌های صندلی زیر نوار مرورگر پنهان نشوند */
    width: 100vw;
    /* عرض کامل صفحه */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* چینش عمودی متن و دکمه */
    justify-content: space-between;
    /* این متن را بالا و دکمه را پایین هل می‌دهد */
    padding-top: 105px;
    /* v18: به‌خواست کارفرما ۱۵ پیکسل پایین‌تر (۹۰ ← ۱۰۵) */
    padding-bottom: 30px;
    /* فاصله دکمه از پایین صفحه (همان اندازه بالا) */
    box-sizing: border-box;
    /* جلوگیری از بهم ریختن سایز */
    /* v100 — پنجرهٔ امن: تا آماده‌شدن اولین فریم (یا در بدترین حالت، شکست کامل
       دانلود فریم‌ها) هیرو هرگز سفید/خالی نمی‌ماند؛ گرادیان زغالیِ برند زیر
       عکس است و به‌محض رسم اولین فریم کاملاً پوشیده می‌شود. تُن تیره تا
       شعار سفید و دکمه‌های شیشه‌ای همان‌طور که طراحی شده‌اند خوانا بمانند.
       v2 — گرادیان گردوییِ قدیمی به زغالیِ تم برند (charcoal #0b0b0d) تغییر کرد
       تا با تم تیرهٔ لوکس سایت و حاشیهٔ تیرهٔ دور تصویرِ «contain» موبایل هم‌خوان باشد. */
    background: linear-gradient(165deg, #191920 0%, #0b0b0d 55%, #060607 100%);
}

/* v2 — اسکریم خوانایی: بومِ ویدیو کرم‌رنگ است؛ یک گرادیان زغالیِ ملایم بالا و
   پایین، شعار سفید و دکمه‌های شیشه‌ای را بدون کدرشدنِ خودِ نقاشی خوانا نگه
   می‌دارد. ::after بعد از تگ عکس نقاشی می‌شود (هم‌سطح z-index:1) و متن‌ها
   (z-index:2) همیشه بالای آن هستند. روی موبایل فقط نوارهای خالیِ بالا/پایین
   را می‌پوشاند و خودِ نقاشی (وسط کادر) دست‌نخورده می‌ماند. */
.hero-sticky::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(11, 11, 13, 0.55) 0%,
        rgba(11, 11, 13, 0.22) 20%,
        rgba(11, 11, 13, 0) 36%,
        rgba(11, 11, 13, 0) 62%,
        rgba(11, 11, 13, 0.22) 78%,
        rgba(11, 11, 13, 0.58) 100%);
}

/* عکس فریم‌ها - تمام صفحه بدون حاشیه */
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* این کلمه عکس را بدون کشیدگی تمام صفحه می‌گیرد */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    /* عکس در لایه پایین */
}

/* کادر متن شعار - بالا */
.hero-text-overlay {
    position: relative;
    z-index: 2;
    /* متن بالای عکس */
    text-align: center;
    color: #fff;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
    /* سایه متن برای خوانایی روی عکس */
    padding: 0 20px;
}

/* شعار: باریک‌تر و لطیف‌تر (وزن Light فونت مربا) */
.hero-text-overlay h1 {
    font-size: 26px;
    font-weight: 300;
    line-height: 1.8;
}

/* کادر دکمه - پایین */
/* v29: دو دکمه هم‌عرض کنار هم (گالری + درباره ما) */
.hero-button-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* استایل دکمه شیشه‌ای (Glassmorphism) */
.btn-glass {
    background: rgba(255, 255, 255, 0.2);
    /* پس‌زمینه نیمه شفاف سفید */
    backdrop-filter: blur(10px);
    /* افکت بلور شیشه ای - مهم */
    -webkit-backdrop-filter: blur(10px);
    /* برای مرورگر سافاری */
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* حاشیه نیمه شفاف */
    color: #fff;
    /* v43: ~۱۵٪ کوتاه‌تر (۱۲→۸ عمودی)؛ رنگ/شفافیت/بلور/گردی عیناً قبل */
    padding: 8px 26px;
    text-decoration: none;
    border-radius: 14px;
    /* v29: گردی کمتر (قبلا 50px کاملا گرد بود) */
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* سایه ملایم زیر دکمه */
    transition: all 0.3s ease;
    display: inline-block;
    /* v29: هر دو دکمه دقیقا هم‌عرض (عرض پهن‌ترین متن + padding) */
    min-width: 158px;
    box-sizing: border-box;
    text-align: center;
}

/* وقتی موس میره روی دکمه */
.btn-glass:hover {
    background: rgba(255, 255, 255, 0.4);
    /* کم‌کم شفاف‌تر */
    border: 1px solid rgba(255, 255, 255, 0.8);
    transform: translateY(-3px);
    /* کمی بالا می‌آید */
}

/* v42 — خواست کارفرما: گردشدگی دو گوشه‌ی قطری مثل نمونه‌ی فرستاده‌شده.
   شماره‌گذاری گوشه‌ها در جهت عقربه‌های ساعت از بالا-چپ:
   ۱=بالا-چپ، ۲=بالا-راست، ۳=پایین-راست، ۴=پایین-چپ
   گالری: گوشه‌های ۲ و ۴ (بالا-راست + پایین-چپ) | درباره ما: گوشه‌های ۱ و ۳ (بالا-چپ + پایین-راست) */
/* شماره‌گذاری گوشه‌ها مثل ساعت: ۱=بالا-راست، ۲=پایین-راست، ۳=پایین-چپ، ۴=بالا-چپ
   گالری (کارت راست): گوشه ۲و۴ = پایین-راست + بالا-چپ | درباره ما (کارت چپ): گوشه ۱و۳ = بالا-راست + پایین-چپ */
.hero-button-overlay a:first-child {
    border-radius: 28px 0 28px 0; /* گالری */
}

.hero-button-overlay a:last-child {
    border-radius: 0 28px 0 28px; /* درباره ما */
}

/* استایل دکمه‌ها */
.btn {
    background-color: var(--text-color);
    color: var(--white);
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: var(--accent-color);
    transform: translateY(-3px);
    /* وقتی موس میره روش کمی پایین‌تر میاد */
}

/* بخش مزایا (سه ستون) */
/* بخش مزایا (سه ستون) */
.features {
    display: flex;
    justify-content: space-between;
    padding: 80px 10%;
    gap: 30px;
    flex-wrap: wrap;
    /* این دستور باعث می‌شود اگر صفحه موبایل بود، کادرها زیر هم بروند نه روی هم */
}

.feature-box {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    flex: 1 1 300px;
    /* این یعنی هر کادر حداقل ۳۰۰ پیکسل فضا می‌گیرد */
}

.feature-box h3 {
    margin-bottom: 15px;
    color: var(--accent-color);
}

/* پایین صفحه */
footer {
    text-align: center;
    padding: 20px;
    background-color: var(--text-color);
    color: var(--white);
    font-size: 14px;
}

/* استایل دکمه همبرگری - پیش‌فرض در کامپیوتر مخفی است */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 100;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    transition: all 0.3s ease;
}

/* کدهای موبایل و تبلت */
@media (max-width: 768px) {

    /* نمایش دکمه همبرگری در موبایل */
    .hamburger {
        display: flex;
    }

    /* مخفی کردن منوی افقی در موبایل */
    .nav-links {
        position: absolute;
        top: 100%;
        right: 0;
        background-color: var(--white);
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 20px 0;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        z-index: 999;
        display: flex;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* تنظیمات بخش هیرو برای موبایل */
    .hero-sticky {
        padding-top: 85px;
        /* v18: ۱۵ پیکسل پایین‌تر (۷۰ ← ۸۵) چون بالای متن روی ناوبر سفید می‌افتاد */
        padding-bottom: 70px;
        background-color: #0b0b0d;
        /* v2: هم‌رنگ تم زغالی برند — دور کادرِ «contain» نقاشی دیده می‌شود */
    }

    /* v2 — درخواست کارفرما: در موبایل «کل تصویر» بدون برش دیده شود.
       فریم‌های موبایل اکنون تمام کادر افقی ویدیو هستند (نه برش عمودی قبلی)،
       پس contain کل نقاشی را داخل ویوپورت جا می‌دهد؛ نوارهای بالا/پایین با
       پس‌زمینهٔ زغالی پر می‌شوند و اسکریمِ ::after فقط روی همان نوارها اثر دارد. */
    .hero-img {
        object-fit: contain;
    }

    /* شعار در موبایل: کوچکتر و باریک‌تر (بیشترِ مشتری‌ها با موبایل می‌بینند) */
    .hero-text-overlay h1 {
        font-size: 20px;
        font-weight: 300;
        line-height: 1.9;
    }

    .hero-text-overlay p {
        font-size: 15px;
        font-weight: 300;
    }

    /* v15: کوچک‌سازی ۱۵٪ حذف شد — کارفرما حاشیه‌ی خالی دو طرف را نپسندید.
       عکس دوباره تمام‌صفحه (cover) نمایش داده می‌شود. */
}

/* <--- این آکولاد بسته شدن @media است و نباید جا بیفتد */
.hero-text-overlay p {
    font-size: 16px;
}

/* استایل پنل مدیریت (legacy v1) — v19: حذف شد!
   قاعده‌ی «#product-form button» با مشخصیت ID از admin.css قوی‌تر بود و همه‌ی
   دکمه‌های فرم — از جمله تب‌های زبان (فا/EN/ع) و دکمه ترجمه خودکار — را سیاه
   و تمام‌عرض می‌کرد؛ علت اصلی «پنل مدیریت به هم ریخته» در اسکرین‌شات کارفرما.
   استایل کامل فرم محصول اکنون فقط در css/admin.css تعریف می‌شود. */

/* ============================================================
   پوینتر سفارشی لوکس Peace of Art
   پیکان قهوه‌ای برند در کل سایت (از v77 شامل بخش بزرگنمایی گالری)
   PNG برای سازگاری همه مرورگرها + SVG برای وضوح در نمایشگرهای Retina
   (روی دستگاه‌های لمسی نشانگر ماوسی اصلاً نمایش داده نمی‌شود؛ بی‌ضرر)
   ============================================================ */
body,
a,
button,
label,
select,
summary,
.hamburger,
.btn-glass,
.btn,
.filter-btn,
.zoom-icon,
.contact-card,
.admin-tab,
.icon-btn,
[role="button"] {
    cursor: url('/icons/cursor-arrow.png') 2 2, url('/icons/cursor-arrow.svg') 2 2, auto !important;
}

/* در فیلدهای متنی، نشانگر متنی حفظ شود */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
    cursor: text !important;
}

/* v77 — پوینتر بزرگنمایی گالری با پوینتر استاندارد سایت یکسان شد
   (درخواست کارفرما: آیکون موس همه‌جا یک شکل باشد؛ پوینتر جداگانهٔ
   کشیدن/درگ حذف شد — فایل‌های cursor-drag روی دیسک می‌مانند ولی بلااستفاده‌اند) */
.lightbox-image-container,
.lightbox-image-container img {
    cursor: url('/icons/cursor-arrow.png') 2 2, url('/icons/cursor-arrow.svg') 2 2, auto !important;
}

/* ============================================================
   v16 — سیستم سه‌زبانه (فارسی / عربی / انگلیسی)
   ============================================================ */

/* دکمه‌های انتخاب زبان در منو (فا | ع | EN) */
.lang-item {
    display: flex;
    gap: 5px;
    align-items: center;
    list-style: none;
}
.lang-btn {
    background: transparent;
    border: 1px solid rgba(184, 147, 74, 0.35);
    color: #b8934a;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.7;
    cursor: pointer;
    transition: all 0.25s ease;
}
.lang-btn:hover {
    border-color: #b8934a;
    background: rgba(184, 147, 74, 0.08);
}
.lang-btn.active {
    background: #b8934a;
    border-color: #b8934a;
    color: #FFFDF8;
}

/* فونت لاتین تمیز برای حالت انگلیسی (Pinar برای فارسی/عربی می‌ماند) */
html[lang="en"] body,
html[lang="en"] input,
html[lang="en"] textarea,
html[lang="en"] button {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
}

/* تنظیمات جهت چپ‌به‌راست (انگلیسی) — بقیه چیدمان‌ها با dir خودکار برمی‌گردند */
[dir="ltr"] .product-info {
    text-align: left;
}

/* ============================================================
   v18 — بنر پیشنهاد زبان (تشخیص زبان مرورگر)
   وقتی زبان گوشی عربی یا انگلیسی است و کاربر هنوز زبان را انتخاب نکرده،
   یک پیشنهاد کوچک و برند‌دار پایین صفحه ظاهر می‌شود؛ بدون اجبار.
   ============================================================ */
.mta-lang-suggest {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #2e1c0e;
    /* قهوه‌ای خیلی تیره برند */
    color: #FFFDF8;
    padding: 9px 10px 9px 16px;
    border: 1px solid rgba(210, 162, 92, 0.35);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(30, 18, 8, 0.4);
    font-size: 14px;
    max-width: calc(100vw - 24px);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(14px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

.mta-lang-suggest.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mta-lang-suggest .mls-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mta-lang-suggest .mls-yes {
    background: #D2A25C;
    /* طلایی برند */
    color: #2e1c0e;
    border: none;
    border-radius: 999px;
    padding: 6px 15px;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s ease;
}

.mta-lang-suggest .mls-yes:hover {
    background: #e5b876;
}

.mta-lang-suggest .mls-no {
    background: transparent;
    color: rgba(255, 253, 248, 0.75);
    border: none;
    font-size: 22px;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
}

.mta-lang-suggest .mls-no:hover {
    color: #fff;
}

@media (max-width: 480px) {
    .mta-lang-suggest {
        font-size: 13px;
        gap: 7px;
        padding: 8px 8px 8px 13px;
    }

    .mta-lang-suggest .mls-yes {
        padding: 5px 12px;
        font-size: 12px;
    }
}
/* ============================================================
   v27 — دکمه شناور تماس + منوی بازشو (خواست کارفرما)
   دکمه اصلی (fab-main) دقیقا همان استایل قبلی دکمه واتس‌اپ را دارد:
   • پس‌زمینه کرم چوبی روشن (#F5E6D3) + آیکون قهوه‌ای تماس
   • هاور: کمی بالا آمدن (translateY -10px مثل کارت‌ها) + نوار نازک
     قهوه‌ای دور دکمه (border-color قهوه‌ای) + سایه عمیق‌تر
   با کلیک/لمس، منوی دو آیتمی (واتس‌اپ / روبیکا) به‌صورت نرم و
   پلکانی بالا باز می‌شود؛ بستن با کلیک بیرون یا Esc (js/fab.js)
   ============================================================ */
.contact-fab {
    position: fixed;
    /* v43: ~۱۰ پیکسل پایین‌تر (خواست کارفرما؛ قبلا ۲۰px) */
    bottom: 10px;
    left: 20px;
    z-index: 900;
    /* v71 — محو/پیدایش نرم هنگام باز/بسته شدن منوی کاتالوگ */
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

/* v71 — منوی کاتالوگ باز است؟ دکمهٔ شناور تماس محو می‌شود تا روی
   ردیف‌های منو (و شمارنده‌های کنار نام دسته‌ها) نیفتد — گزارش کارفرما:
   روی موبایل دکمه روی آخرین دسته‌ها می‌افتاد و خواندن سخت بود.
   کلاس از js/gallery.js می‌آید (باز/بسته شدن منوی کاتالوگ).
   visibility با تأخیرِ هم‌اندازهٔ fade عوض می‌شود تا بعد از محو شدن
   کامل، از Focus/تپ هم خارج باشد؛ در بسته شدن فوری برمی‌گردد. */
body.catalog-open .contact-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

/* v36 — حالت بزرگنمایی محصول/پروژه: دکمه شناور بالای لایه بزرگنمایی
   (z-index 9999) بیاید تا مشتری بتواند از همان نمای بزرگ‌شده اسکرین‌شات
   بگیرد و با واتس‌اپ/روبیکا بفرستد (کلاس از js/fab.js می‌آید) */
body.lb-open .contact-fab {
    z-index: 10001;
}

.fab-main {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5E6D3;
    border: 1px solid rgba(184, 147, 74, 0.18);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    cursor: pointer;
}

.fab-main img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.fab-main:hover,
.fab-main:focus-visible,
.contact-fab.open .fab-main {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
    outline: none;
}

.fab-main:active {
    transform: translateY(-10px) scale(0.96);
}

/* منوی دو آیتمی — بالای دکمه، نرم و پلکانی */
.fab-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* v28 — هر دو باکس (واتس‌اپ/روبیکا) دقیقا یک عرض داشته باشند:
       منو به عرض پهن‌ترین آیتم درمی‌آید و هر دو آیتم تمام‌عرض آن کشیده می‌شوند
       (قبلا flex-start بود و باکس روبیکا کوتاه‌تر دیده می‌شد — گزارش کارفرما) */
    align-items: stretch;
    width: max-content;
    max-width: calc(100vw - 40px);
    pointer-events: none;
}

.fab-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 14px 9px 10px;
    background: #F5E6D3;
    border: 1px solid rgba(184, 147, 74, 0.18);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    opacity: 0;
    transform: translateY(14px) scale(0.9);
    transition: all 0.28s ease;
    -webkit-tap-highlight-color: transparent;
}

.fab-item img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

.fab-item span {
    color: #6B4A2B;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.fab-item:hover,
.fab-item:focus-visible {
    transform: translateY(-4px);
    border-color: var(--accent-color);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    outline: none;
}

/* حالت باز: ورود پلکانی آیتم‌ها */
.contact-fab.open .fab-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.contact-fab.open .fab-item:nth-child(1) { transition-delay: 0.05s; }
.contact-fab.open .fab-item:nth-child(2) { transition-delay: 0.12s; }

@media (max-width: 480px) {
    .contact-fab {
        /* v43: ~۱۰ پیکسل پایین‌تر در موبایل هم (قبلا ۱۶px) */
        bottom: 6px;
        left: 16px;
    }

    .fab-main {
        width: 54px;
        height: 54px;
    }

    .fab-main img {
        width: 30px;
        height: 30px;
    }

    .fab-item span {
        font-size: 13px;
    }
}

/* ============================================================
   v52 — حذف فلش آبی لمس (خواست کارفرما):
   در موبایل با زدن «چوب نما/درباره ما» و دکمه همبرگر، لحظه‌ای رنگ
   آبی کمرنگ دیده می‌شد (tap highlight پیش‌فرض اندروید/کروم).
   + جلوگیری از انتخاب ناخواسته متن هنگام ضربه‌های سریع منو.
   ============================================================ */
* {
    -webkit-tap-highlight-color: transparent;
}

.nav-links a,
.hamburger,
.lang-btn,
.btn-glass,
.catalog-toggle,
.catalog-item,
.fab-main,
.fab-item {
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* ============================================================
   v98 — بازخورد کارفرما: دکمه‌های «کاتالوگ» و «پروژه ها» صفحه اصلی
   فونت باریک‌تر (Medium 500 از خانوادهٔ Pinar به‌جای SemiBold bold)
   + رنگ متن قهوه‌ایِ تم. چون قهوه‌ای روی شیشهٔ ۲۰٪ سفیدِ روی عکسِ تیره
   خوانا نیست، شیشه کرم‌تر و مات‌تر شد (همان کرم #FDF8F0 سایت) — نتیجه:
   متن قهوه‌ای کاملاً خوانا با همان گردی/اندازه/چیدمان قبلی.
   ============================================================ */
.hero-button-overlay .btn-glass {
    color: var(--accent-color);
    font-weight: 500;
    background: rgba(253, 248, 240, 0.82);
    border-color: rgba(184, 147, 74, 0.35);
}

.hero-button-overlay .btn-glass:hover {
    color: #6f4620;
    background: rgba(253, 248, 240, 0.94);
    border-color: rgba(184, 147, 74, 0.6);
}

/* ============================================================
   v1 — Peace of Art: لوگوی امضایی + متن مخفی صفحه‌خوان
   ============================================================ */
.logo-signature {
    width: 150px;
    height: 52px;
    object-fit: contain;
    margin-left: 0;
    flex-shrink: 0;
}

.mta-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   v1 — Peace of Art: هیروی صفحه اصلی تیره است (نقاشی آبستره برند)؛
   پس از اسکرول، ناوبرِ صفحه اصلی تیره می‌ماند و متن‌ها روشن می‌شوند
   تا کنتراست روی نقاشی حفظ شود. صفحات داخلی مثل قبل سفید می‌مانند.
   ============================================================ */
body.home header.scrolled {
    background-color: rgba(11, 11, 13, 0.96);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

body.home header.scrolled .nav-links a,
body.home header.scrolled .logo h3 {
    color: #f4efe6;
}

body.home header.scrolled .hamburger span {
    background-color: #f4efe6;
}