/* ============================================================
   گنج دانش — استایل صفحه محصول (PDP)
   پایه (هدر، دکمه، اسلایدر، کارت، فوتر، کشو، مودال) از
   /Home_Page/Home_Page.css می‌آید. اینجا فقط چیزهای مخصوص همین صفحه.
   ============================================================ */

/* ============================================================
   ⛔⛔ این دو خط یک باگِ زنده‌ی فروش را بستند (۹ شهریور ۱۴۰۵).

   ویژگیِ `hidden` در HTML فقط `display:none` ی مرورگر را می‌آورد که
   **ویژگیِ ۰،۰،۱** دارد. هر کلاسی که `display` بدهد از آن قوی‌تر است
   و عنصر را **با وجودِ `hidden` نشان می‌دهد**.

   نتیجه‌اش روی این صفحه: `.gd-oos { display:flex }` باعث می‌شد برچسبِ
   «فعلاً ناموجود» **روی هر کالایی** دیده شود — حتی کالایی که موجود
   بود و قیمتش هم کنارش نوشته بود. `.gd-qty` هم همین را داشت.
   جاوااسکریپت درست کار می‌کرد و `hidden` را درست می‌گذاشت؛ ایراد
   فقط ویژگیِ CSS بود — برای همین در هیچ لاگی دیده نمی‌شد.

   ⚠ `!important` این‌جا درست است نه بوی بد: قرار است هر قاعده‌ی
     دیگری را ببرد — همین کاری است که ریست‌های مدرن هم می‌کنند.
   ============================================================ */
[hidden] { display: none !important; }

.gd-pdp { background: var(--gd-bg-soft); }
.gd-pdp main { padding-block-end: 40px; }

/* یک «کارت سفید» عمومی که همه‌ی بلوک‌های این صفحه از آن استفاده می‌کنند */
.gd-pdp__main,
.gd-trust,
.gd-block,
.gd-pdp .gd-section {
    background: var(--gd-bg);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    margin-block-end: 16px;
}

/* ---------- مسیر راهنما ---------- */
.gd-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding-block: 16px;
    font-size: var(--gd-text-xs); color: var(--gd-muted);
}
.gd-crumbs a:hover { color: var(--gd-primary); }
.gd-crumbs i { font-size: var(--gd-text-2xs); opacity: .6; }
.gd-crumbs a:last-of-type { color: var(--gd-ink); font-weight: 600; }

/* ============================================================
   چیدمان اصلی: گالری | اطلاعات | جعبه خرید
   ============================================================ */
.gd-pdp__main {
    display: grid;
    /* ستون‌های کناری سیال‌اند نه ثابت. با عرض ثابت، اگر کانتینر تنگ شود
       ستون وسط له می‌شود (تجربه شد: به ۱۲۲px رسید). clamp کف و سقف دارد،
       پس گالری و جعبه خرید کوچک می‌شوند ولی ستون اطلاعات هیچ‌وقت نمی‌میرد. */
    grid-template-columns:
        clamp(15rem, 26%, 25rem)          /* گالری  240…400 */
        minmax(0, 1fr)                    /* اطلاعات */
        clamp(13rem, 22%, 18.75rem);      /* جعبه خرید 208…300 */
    gap: var(--gd-space-6);
    padding: var(--gd-space-6);
}

/* ---------- گالری ---------- */
/* ⛔ min-width اینجا تزئینی نیست — بدون آن صفحه‌ی محصول روی موبایل
   افقی سرریز می‌کرد (۱۵ شهریور ۱۴۰۵، اندازه‌گیری‌شده روی ۳۷۵ پیکسل).

   کفِ پیش‌فرضِ یک آیتمِ گرید `auto` است، یعنی «به اندازه‌ی محتوایت».
   نوارِ بندانگشتی‌ها با ۶ عکس می‌شود ۶×۶۴ + ۵×۱۰ = ۴۳۴ پیکسل، و چون
   کف `auto` بود، `overflow-x: auto`ی پایین **هیچ‌وقت فعال نمی‌شد**:
   جعبه به‌جای اسکرول شدن، خودش پهن می‌شد و کلِ صفحه را با خود می‌برد.
   با ۹ عکس سرریز به ۳۱۷ پیکسل می‌رسید.

   ⚠ این باگ فقط با ۶ عکس به بالا دیده می‌شد (با ۵ تا ۳۶۰ پیکسل است و
     جا می‌شود) — برای همین روی بیشترِ کالاها پیدا نبود، ولی ۳۷۵ کالای
     منتشرشده گرفتارش بودند. ← Memory/mohaseb365-gallery-thumbs-overflow.md */
.gd-gallery { position: relative; min-width: 0; }
.gd-gallery__rail {
    position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 3;
    display: flex; flex-direction: column; gap: 2px;
}
.gd-gallery__rail .gd-icon-btn { width: 36px; height: 36px; font-size: var(--gd-text-md); color: var(--gd-muted); }
.gd-gallery__rail .gd-icon-btn:hover { color: var(--gd-primary); }
.gd-gallery__rail .is-on { color: #dc2626; }

.gd-gallery__stage {
    position: relative;
    margin: 0;
    aspect-ratio: 1;
    background: var(--gd-bg-soft);
    border-radius: var(--gd-radius);
    overflow: hidden;
}
.gd-gallery__stage img { width: 100%; height: 100%; object-fit: contain; }
.gd-gallery__zoom {
    position: absolute; inset-block-end: 12px; inset-inline-start: 12px;
    width: 36px; height: 36px;
    background: rgba(255, 255, 255, .9); border: 1px solid var(--gd-line); border-radius: 50%;
    color: var(--gd-ink); cursor: pointer;
}
.gd-gallery__zoom:hover { background: #fff; color: var(--gd-primary); }

.gd-gallery__thumbs {
    display: flex; gap: 10px;
    margin-block-start: 12px;
    /* min-width با overflow-x جفت است: بدونِ آن نوار به‌جای اسکرول، پهن می‌شود */
    min-width: 0;
    overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-inline: contain;
}
.gd-gallery__thumbs::-webkit-scrollbar { display: none; }
.gd-thumb {
    flex: 0 0 64px; height: 64px; padding: 4px;
    background: var(--gd-bg); border: 1px solid var(--gd-line); border-radius: 8px;
    cursor: pointer; transition: border-color .18s;
}
.gd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gd-thumb:hover { border-color: var(--gd-primary); }
.gd-thumb.is-active { border-color: var(--gd-primary); box-shadow: 0 0 0 1px var(--gd-primary) inset; }

/* ---------- ستون اطلاعات ---------- */
.gd-pdp__brandline { display: flex; gap: 6px; font-size: var(--gd-text-xs); color: var(--gd-muted); }
.gd-pdp__brandline a:hover { color: var(--gd-primary); }

.gd-pdp__title { margin: 10px 0 6px; font-size: var(--gd-text-xl); line-height: 1.8; }
.gd-pdp__title-en { margin: 0 0 14px; font-size: var(--gd-text-sm); color: var(--gd-muted); direction: ltr; text-align: end; }

.gd-pdp__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
    padding-block-end: 16px; margin-block-end: 16px;
    border-block-end: 1px solid var(--gd-line);
    font-size: var(--gd-text-sm);
}
.gd-rate { display: inline-flex; align-items: center; gap: 6px; color: var(--gd-accent); }
.gd-rate b { color: var(--gd-ink); font-size: var(--gd-text-md); }
.gd-rate small { color: var(--gd-muted); }
.gd-pdp__metalink { color: var(--gd-primary); font-weight: 600; }
.gd-pdp__sku { margin-inline-start: auto; color: var(--gd-muted); font-size: var(--gd-text-xs); }

/* ---------- انتخاب گونه ---------- */
.gd-variants { display: flex; flex-direction: column; gap: 16px; margin-block-end: 20px; }
.gd-variant__label { display: block; margin-block-end: 9px; font-size: var(--gd-text-sm); color: var(--gd-muted); }
.gd-variant__label b { color: var(--gd-ink); font-weight: 600; }
.gd-variant__opts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ⚠ .gd-opt در مودال ثبت‌نام GD_Auth هم هست (برچسب «(اختیاری)»).
   بدون محدود کردن به .gd-variant، آن span قاب دکمه‌ای می‌گرفت. */
.gd-variant .gd-opt {
    padding: 9px 16px;
    background: var(--gd-bg); border: 1px solid var(--gd-line); border-radius: 10px;
    font: inherit; font-size: var(--gd-text-sm); color: var(--gd-ink); cursor: pointer;
    transition: border-color .18s, color .18s, background .18s;
}
.gd-variant .gd-opt:hover { border-color: var(--gd-primary); }
.gd-variant .gd-opt.is-active {
    /* رنگ از توکن، نه سبزِ هاردکدِ دوره‌ی قبلِ برند */
    border-color: var(--gd-primary); color: var(--gd-primary);
    background: var(--gd-primary-soft, #eff6ff); font-weight: 600;
}
.gd-variant .gd-opt.is-disabled {
    color: #c3c8ce; background: var(--gd-bg-soft); cursor: not-allowed;
    text-decoration: line-through; text-decoration-color: #d7dbe0;
}
.gd-variant .gd-opt.is-disabled:hover { border-color: var(--gd-line); }

/* ---------- ویژگی‌های کوتاه ---------- */
.gd-quickspecs { margin: 0 0 10px; padding: 0; list-style: none; }
.gd-quickspecs li {
    display: flex; align-items: baseline; gap: 10px;
    padding-block: 7px;
    font-size: var(--gd-text-sm);
}
.gd-quickspecs li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gd-line); }
.gd-quickspecs span { color: var(--gd-muted); min-width: 110px; }
.gd-quickspecs b { font-weight: 600; }

.gd-link {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0;
    font: inherit; font-size: var(--gd-text-sm); font-weight: 600; color: var(--gd-primary); cursor: pointer;
}
.gd-link i { font-size: var(--gd-text-2xs); }

.gd-note {
    display: flex; gap: 8px;
    margin-block-start: 18px; padding: 12px 14px;
    background: var(--gd-bg-soft); border-radius: 10px;
    font-size: var(--gd-text-xs); color: var(--gd-muted); line-height: 2;
}
.gd-note i { color: var(--gd-accent); margin-block-start: 5px; }

/* ============================================================
   جعبه خرید
   ============================================================ */
.gd-buybox {
    align-self: start; position: sticky; inset-block-start: 148px;
    padding: var(--gd-space-4);
    background: var(--gd-bg-soft);
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius);

    /* ⚠ جعبه خرید یک ستون باریک (۲۰۸…۳۰۰px) است، ولی پله‌های بزرگ توکن
       بر پایه‌ی vw هستند و با عرض *صفحه* بزرگ می‌شوند نه عرض *جعبه*.
       نتیجه: قیمت غول‌پیکر کنار برچسب‌های ریز. اینجا مقیاس را از عرض خود
       جعبه می‌گیریم (cqi) تا تناسب داخلی همیشه حفظ شود. */
    container-type: inline-size;
}

/* مقیاس داخلی جعبه — نسبت‌ها ثابت، اندازه تابع عرض جعبه */
.gd-buybox {
    /* ⚠ کفِ این دو ۱۰ و ۱۱ پیکسل بود و ممیزیِ موبایلِ ۱۴ شهریور ۱۴۰۵
       روی صفحه‌ی محصولِ زنده پنج متنِ زیرِ ۱۲px داد — از جمله خودِ
       «افزودن به سبد خرید». کفِ خواناییِ فارسی ۱۲px است؛ سقف دست‌نخورده
       ماند تا دکمه‌ی بلند هنوز یک‌خطی جا شود. */
    --bb-xs: clamp(.75rem,   3.6cqi, .875rem);   /* 12…14 */
    --bb-sm: clamp(.75rem,   4.2cqi, .8125rem);  /* 12…13 */
    --bb-md: clamp(.75rem,   4.8cqi, .875rem);   /* 12…14 */
    --bb-price: clamp(1rem,  8cqi,   1.375rem);  /* 16…22 */
}
.gd-buybox__seller {
    display: flex; align-items: center; gap: 10px;
    padding-block-end: 14px; margin-block-end: 14px;
    border-block-end: 1px solid var(--gd-line);
}
.gd-buybox__seller i {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    background: #e6f2f1; border-radius: 50%; color: var(--gd-primary);
}
.gd-buybox__seller strong { display: block; font-size: var(--gd-text-sm); }
.gd-buybox__seller small { color: var(--gd-muted); font-size: var(--gd-text-xs); }

.gd-buybox__assure { margin: 0 0 16px; padding: 0; list-style: none; }
.gd-buybox__assure li {
    display: flex; align-items: center; gap: 8px;
    margin-block-end: 9px;
    font-size: var(--gd-text-xs); color: var(--gd-muted);
}
.gd-buybox__assure i { color: var(--gd-primary); font-size: var(--gd-text-sm); }
.gd-buybox__assure .is-low { color: #dc2626; font-weight: 600; }

.gd-buybox__row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 20px; }
.gd-buybox__row del { color: var(--gd-muted); font-size: var(--gd-text-sm); }
.gd-off {
    padding: 2px 8px;
    background: #dc2626; color: #fff;
    border-radius: 999px; font-size: var(--gd-text-2xs); font-weight: 700;
}
.gd-buybox__now { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; margin-block: 4px var(--gd-space-4); }
.gd-buybox__now strong { font-size: var(--bb-price, var(--gd-text-xl)); letter-spacing: -.5px; line-height: 1.3; }
.gd-rial { font-size: var(--gd-text-xs); color: var(--gd-muted); }

/* ---------- تناسب داخلی جعبه خرید ---------- */
.gd-buybox__seller strong          { font-size: var(--bb-md); }
.gd-buybox__seller small           { font-size: var(--bb-xs); }
.gd-buybox__assure li              { font-size: var(--bb-sm); }
.gd-buybox__row del                { font-size: var(--bb-sm); }
.gd-buybox .gd-qty                 { font-size: var(--bb-sm); }
/* دکمه‌ها: متن دوخطی نشود. عبارت بلندی مثل «اطلاع‌رسانی هنگام موجود شدن»
   با فونت کوچک‌تر و پدینگ افقی کمتر در یک خط جا می‌شود. */
.gd-buybox .gd-btn {
    font-size: var(--bb-sm);
    padding-inline: var(--gd-space-3);
    text-align: center; line-height: 1.4;
}
.gd-buybox .gd-btn i               { font-size: var(--bb-xs); }
.gd-buybox__note                   { font-size: var(--bb-xs); }

/* ---------- تعداد ---------- */
.gd-qty { display: flex; align-items: center; justify-content: space-between; margin-block-end: 12px; font-size: var(--gd-text-sm); }
.gd-qty__box {
    display: flex; align-items: center;
    background: var(--gd-bg); border: 1px solid var(--gd-line); border-radius: 10px; overflow: hidden;
}
.gd-qty__box button {
    width: 34px; height: 34px;
    background: none; border: 0;
    color: var(--gd-primary); font-size: var(--gd-text-xs); cursor: pointer;
}
.gd-qty__box button:hover:not([disabled]) { background: var(--gd-bg-soft); }
.gd-qty__box button[disabled] { color: #c3c8ce; cursor: default; }
.gd-qty__box input {
    width: 40px; border: 0; background: none;
    font: inherit; font-weight: 600; text-align: center;
}

.gd-buybox .gd-btn { margin-block-end: 10px; }

/* ---------- کفِ لمسیِ موبایل ----------
   ⚠ ۱۴ شهریور ۱۴۰۵ ممیزیِ موبایل روی همین صفحه ۲۳ هدفِ زیرِ ۴۴px داد.
     دوتایش المانِ خودِ این صفحه بود: دکمه‌های کم/زیادِ تعداد (۳۴×۳۴) و
     دکمه‌ی ذره‌بینِ گالری (۳۶×۳۶). روی دسکتاپ همان اندازه‌ی جمع‌وجور
     می‌ماند — این بلوک فقط جایی می‌نشیند که انگشت اشاره‌گر است. */
@media (max-width: 767px) {
    .gd-qty__box button {
        width: 44px;
        height: 44px;
    }
    .gd-gallery__zoom {
        width: 44px;
        height: 44px;
    }
}
.gd-btn[disabled] { opacity: .5; cursor: not-allowed; }

.gd-buybox__ship { margin: 6px 0 0; padding-block-start: 14px; border-block-start: 1px solid var(--gd-line); list-style: none; }
.gd-buybox__ship li {
    display: flex; gap: 8px;
    margin-block-end: 10px;
    font-size: var(--gd-text-xs); color: var(--gd-muted); line-height: 1.9;
}
.gd-buybox__ship i { margin-block-start: 4px; color: var(--gd-primary); }

/* ============================================================
   نوار اعتماد
   ============================================================ */
.gd-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 22px 24px; }
.gd-trust__item { display: flex; align-items: center; gap: 12px; }
.gd-trust__item i {
    display: grid; place-items: center;
    flex: 0 0 42px; height: 42px;
    background: #e6f2f1; border-radius: 50%;
    color: var(--gd-primary); font-size: var(--gd-text-lg);
}
.gd-trust__item b { display: block; font-size: var(--gd-text-sm); }
.gd-trust__item small { color: var(--gd-muted); font-size: var(--gd-text-xs); }

/* ============================================================
   بلوک‌های محتوایی
   ============================================================ */
.gd-pdp .gd-section { padding: 24px; }
.gd-pdp .gd-section__head { margin-block-end: 20px; }
.gd-pdp .gd-section__head h2 { font-size: var(--gd-text-lg); }

.gd-block { padding: 24px; scroll-margin-top: 150px; }
.gd-block__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gd-block__title { margin: 0 0 18px; font-size: var(--gd-text-lg); }
.gd-block__head .gd-block__title { margin-block-end: 0; }

/* ---------- تب‌ها ---------- */
.gd-tabs {
    position: sticky; inset-block-start: 76px; z-index: 20;
    display: flex; gap: 6px;
    margin-block-end: 16px; padding: 6px;
    background: var(--gd-bg); border: 1px solid var(--gd-line); border-radius: var(--gd-radius);
}
.gd-tabs__link {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: var(--gd-text-md); font-weight: 600; color: var(--gd-muted);
    transition: background .18s, color .18s;
}
.gd-tabs__link:hover { color: var(--gd-ink); }
.gd-tabs__link.is-active { background: #e6f2f1; color: var(--gd-primary); }

/* ---------- متن معرفی ---------- */
.gd-prose { font-size: var(--gd-text-md); line-height: 2.2; color: #374151; }
.gd-prose p { margin: 0 0 16px; }
.gd-prose.is-clamped { max-height: 190px; overflow: hidden; mask-image: linear-gradient(#000 60%, transparent); }

.gd-highlights { margin: 0; padding: 0; list-style: none; }
.gd-highlights li { display: flex; gap: 9px; margin-block-end: 9px; font-size: var(--gd-text-sm); }
.gd-highlights i { margin-block-start: 7px; color: var(--gd-primary); font-size: var(--gd-text-2xs); }

/* ---------- جدول مشخصات ---------- */
.gd-specs__group { margin: 22px 0 10px; font-size: var(--gd-text-md); color: var(--gd-primary); }
.gd-specs { width: 100%; border-collapse: collapse; font-size: var(--gd-text-sm); }
.gd-specs tr { border-block-end: 1px solid var(--gd-line); }
.gd-specs tr:last-child { border: 0; }
/* عرض ستون عنوان نسبی است نه ثابت: با ۱۹۰ پیکسلِ ثابت، روی ستون باریک
   تقریباً تمام جدول را می‌گرفت و مقدارها در یک نوار چند پیکسلی می‌شکستند. */
.gd-specs th {
    width: 32%; min-width: 8rem; max-width: 16rem;
    padding: 12px 0;
    color: var(--gd-muted); font-weight: 400; text-align: start; vertical-align: top;
}
.gd-specs td { padding: 12px 0; line-height: 2; }
.gd-specs tr:nth-child(even) { background: var(--gd-bg-soft); }
.gd-specs th, .gd-specs td { padding-inline: var(--gd-space-3); }

/* ============================================================
   دیدگاه‌ها
   ============================================================ */
.gd-reviews__top {
    display: grid; grid-template-columns: 180px 1fr 1.4fr; gap: 28px;
    padding-block-end: 24px; margin-block-end: 24px;
    border-block-end: 1px solid var(--gd-line);
}
.gd-score { text-align: center; }
.gd-score strong { font-size: var(--gd-text-3xl); line-height: 1; }
.gd-score > span { color: var(--gd-muted); font-size: var(--gd-text-sm); }
.gd-score__stars { margin-block: 10px 6px; color: var(--gd-accent); font-size: var(--gd-text-md); }
.gd-score small { display: block; margin-block-end: 14px; color: var(--gd-muted); font-size: var(--gd-text-xs); }

.gd-bars__row { display: flex; align-items: center; gap: 10px; margin-block-end: 10px; font-size: var(--gd-text-xs); }
.gd-bars__row > span { flex: 0 0 42px; color: var(--gd-muted); }
.gd-bars__row > span i { color: var(--gd-accent); font-size: var(--gd-text-2xs); }
.gd-bars__track { flex: 1; height: 7px; background: var(--gd-line); border-radius: 999px; overflow: hidden; }
.gd-bars__track span { display: block; height: 100%; background: var(--gd-accent); border-radius: 999px; }
.gd-bars__row small { flex: 0 0 34px; color: var(--gd-muted); text-align: end; }

.gd-summary { padding: 16px 18px; background: var(--gd-bg-soft); border-radius: var(--gd-radius); }
.gd-summary h3 { margin: 0 0 10px; font-size: var(--gd-text-md); }
.gd-summary h3 i { color: var(--gd-primary); }
.gd-summary p { margin: 0 0 14px; font-size: var(--gd-text-sm); line-height: 2.1; color: #374151; }
.gd-summary__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gd-summary ul { margin: 0; padding: 0; list-style: none; }
.gd-summary li { display: flex; gap: 7px; margin-block-end: 7px; font-size: var(--gd-text-xs); }
.gd-summary i { font-size: var(--gd-text-2xs); margin-block-start: 6px; }
.gd-pros i { color: #16a34a; }
.gd-cons i { color: #dc2626; }
.gd-summary__foot { display: block; margin-block-start: 12px; color: var(--gd-muted); font-size: var(--gd-text-2xs); }

.gd-reviewlist { margin: 0 0 20px; padding: 0; list-style: none; }
.gd-review { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding-block: 22px; border-block-end: 1px solid var(--gd-line); }
.gd-review__side { font-size: var(--gd-text-xs); color: var(--gd-muted); }
.gd-review__stars { margin-block-end: 8px; color: var(--gd-accent); font-size: var(--gd-text-xs); }
.gd-review__side strong { display: block; margin-block-end: 4px; color: var(--gd-ink); font-size: var(--gd-text-sm); }
.gd-review__side small { display: block; margin-block-end: 3px; }
.gd-review__variant {
    display: inline-flex; align-items: center; gap: 6px;
    margin-block-end: 10px; padding: 3px 10px;
    background: var(--gd-bg-soft); border-radius: 999px;
    font-size: var(--gd-text-2xs); color: var(--gd-muted);
}
.gd-review__body p { margin: 0 0 12px; font-size: var(--gd-text-sm); line-height: 2.1; }
.gd-review__actions { display: flex; gap: 8px; }
.gd-review__actions button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: none; border: 1px solid var(--gd-line); border-radius: 999px;
    font: inherit; font-size: var(--gd-text-xs); color: var(--gd-muted); cursor: pointer;
}
.gd-review__actions button:hover { border-color: var(--gd-primary); color: var(--gd-primary); }

/* ============================================================
   پرسش و پاسخ
   ============================================================ */
.gd-qa { margin: 18px 0 20px; padding: 0; list-style: none; }
.gd-qa__item { padding-block: 18px; border-block-end: 1px solid var(--gd-line); }
.gd-qa__q { margin: 0 0 6px; font-size: var(--gd-text-md); font-weight: 600; }
.gd-qa__q i { color: var(--gd-primary); margin-inline-end: 6px; }
.gd-qa__by { color: var(--gd-muted); font-size: var(--gd-text-xs); }
.gd-qa__a {
    margin-block-start: 12px; padding: 14px 16px;
    /* بی نوار رنگیِ کناری — همان تصمیمِ حقوق و دستمزد (کامیت af7ee05e).
       پس‌زمینه‌ی ملایم و نام پاسخ‌دهنده به رنگ برند، پاسخ را از پرسش جدا می‌کند. */
    background: var(--gd-bg-soft); border-radius: 10px;
}
.gd-qa__a p { margin: 0 0 8px; font-size: var(--gd-text-sm); line-height: 2.1; }
.gd-qa__a small { color: var(--gd-muted); font-size: var(--gd-text-xs); }
.gd-qa__a b { color: var(--gd-primary); }

/* ============================================================
   کارت محصول — افزودن قیمت به کارت صفحه اصلی (.gd-pcard)
   کلاس پایه در Home_Page.css است؛ اینجا فقط قیمت اضافه می‌شود.
   ============================================================ */

/* عرض کارت بر حسب rem، نه px.
   چرا اهمیت دارد: ریشه در ≥۱۲۸۰ روی ۸۰٪ است و کانتینر بر حسب px ثابت
   می‌ماند، پس کارت با زوم/بزرگ‌تر شدن صفحه کوچک‌تر می‌شود و تعداد
   کارت‌های داخل نوار خودبه‌خود کم و زیاد می‌شود — همان رفتار اداپتیو.
   min در ۱۷۰px تا روی موبایل بیش از حد باریک نشود. */
.gd-pdp .gd-pcard { flex: 0 0 max(170px, 14.5rem); }

.gd-pcard__note { font-size: var(--gd-text-2xs); color: var(--gd-primary); }
.gd-pcard__price { display: flex; align-items: center; justify-content: space-between; gap: var(--gd-space-2); }
.gd-pcard__price > div { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-inline-start: auto; }
.gd-pcard__price del { color: var(--gd-muted); font-size: var(--gd-text-2xs); }
.gd-pcard__price strong { font-size: var(--gd-text-md); }

/* ============================================================
   باکس‌های زیر محصول — الگوی دیجی‌کالا
   ------------------------------------------------------------
   هر بخش یک کارت سفید است با یک کارت کوچکِ چسبانِ محصول در کنارش،
   تا موقع خواندن متن بلند یادت نرود کدام کالا را می‌بینی.
   کارت کنار فقط از ۱۰۲۴ واقعی (≡۱۲۸۰ مجازی) به بالا دیده می‌شود؛
   روی موبایل و تبلت جا ندارد و عنوان صفحه کارش را می‌کند.
   ============================================================ */
.gd-block--split { display: block; }
.gd-block__aside { display: none; }

@media (min-width: 1024px) {
    .gd-block--split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(11rem, 18%, 15rem);
        gap: var(--gd-space-6);
        align-items: start;
    }

    /* ⚠ چیدمان صریح، نه ترتیب DOM.
       کارت کوچک در HTML اول می‌آید (چون sticky است و باید بالای بلوک بنشیند)
       پس خودبه‌خود ستون ۱ را می‌گرفت — یعنی ستون minmax(0,1fr) — و متنِ اصلی
       می‌افتاد در ستون باریک. نتیجه: جدول مشخصات در حدود ۱۹۰ پیکسل فشرده
       می‌شد و کنارش یک کارت عکسِ پهن و بی‌قواره می‌ماند.
       با تعیین صریح ستون، ترتیب DOM دیگر روی عرض اثر ندارد. */
    .gd-block__body  { grid-column: 1; min-width: 0; }
    .gd-block__aside { grid-column: 2; display: block; position: sticky; inset-block-start: 148px; }
}

.gd-minicard {
    display: flex; flex-direction: column; align-items: center; gap: var(--gd-space-3);
    padding: var(--gd-space-4);
    background: var(--gd-bg-soft);
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius);
    text-align: center;
}
.gd-minicard img {
    width: 100%; max-width: 7.5rem; aspect-ratio: 1;
    object-fit: contain; background: var(--gd-bg); border-radius: var(--gd-radius-sm);
}
.gd-minicard p {
    margin: 0;
    font-size: var(--gd-text-xs); font-weight: 600; line-height: var(--gd-lh-normal);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- حالت خالی (دیدگاه، پرسش) ---------- */
.gd-empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--gd-space-2);
    padding: var(--gd-space-10) var(--gd-space-4);
    text-align: center; color: var(--gd-muted);
}
.gd-empty i      { font-size: var(--gd-text-3xl); color: var(--gd-line-strong); }
.gd-empty p      { margin: var(--gd-space-2) 0 0; font-size: var(--gd-text-md); font-weight: 600; color: var(--gd-ink); }
.gd-empty small  { font-size: var(--gd-text-xs); }
.gd-empty .gd-btn { margin-block-start: var(--gd-space-4); font-size: var(--gd-text-sm); }

/* ============================================================
   نوار خرید موبایل
   ============================================================ */
.gd-stickybuy {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45;
    display: none; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 16px;
    background: var(--gd-bg); border-block-start: 1px solid var(--gd-line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}
.gd-stickybuy strong { font-size: var(--gd-text-lg); }
.gd-stickybuy .gd-btn { flex: 0 0 auto; }

/* ============================================================
   لایت‌باکس
   ============================================================ */
.gd-lightbox {
    position: fixed; inset: 0; z-index: 80;
    display: grid; place-items: center;
    padding: 40px;
    background: rgba(17, 24, 39, .92);
}
.gd-lightbox[hidden] { display: none; }
.gd-lightbox img { max-width: min(900px, 100%); max-height: 100%; object-fit: contain; }
.gd-lightbox__close { position: absolute; inset-block-start: 20px; inset-inline-start: 20px; color: #fff; font-size: var(--gd-text-xl); }
.gd-lightbox__close:hover { background: rgba(255, 255, 255, .12); }

/* مودال‌هایی که پس‌زمینه‌ی خودشان را دارند (مستقل از overlay مشترک) */
.gd-modal--own { background: rgba(17, 24, 39, .5); }

.gd-modal__box--wide { width: min(720px, 100%); }
#gdChartBox { min-height: 300px; }

/* ============================================================
   ریسپانسیو
   ============================================================ */
/* ⚠ پله‌ها ۰٫۸ برابرِ پله‌های طراحی‌اند، چون `zoom: .8` روی مدیا‌کوئری اثر
   ندارد: ۱۰۲۳px واقعی ≡ ۱۲۷۹ مجازی و ۱۲۸۰px واقعی ≡ ۱۶۰۰ مجازی.
   اگر این جابه‌جایی نباشد، لپ‌تاپ ۱۲۲۹ پیکسلی به‌اشتباه چیدمان تبلت
   می‌گیرد و جعبه خرید از کنار محصول می‌افتد زیرش. */

/* ── تبلت (زیر ۱۰۲۴ واقعی): جعبه خرید می‌رود زیر ── */
@media (max-width: 1023px) {
    .gd-pdp__main { grid-template-columns: minmax(0, 21.25rem) minmax(0, 1fr); }
    .gd-buybox { grid-column: 1 / -1; position: static; }
    .gd-buybox__now { justify-content: flex-start; }
    .gd-buybox__row { justify-content: flex-start; }
    .gd-trust { grid-template-columns: repeat(2, 1fr); }
    .gd-reviews__top { grid-template-columns: 160px 1fr; }
    .gd-summary { grid-column: 1 / -1; }
}

/* ── موبایل: تک‌ستونی ── */
@media (max-width: 767px) {
    /* minmax(0,1fr) و نه 1fr — کفِ `1fr` همان `auto` است و از محتوا پهن می‌شود */
    .gd-pdp__main { grid-template-columns: minmax(0, 1fr); gap: var(--gd-space-5); padding: var(--gd-space-4); }
    .gd-gallery__stage { aspect-ratio: 4 / 3; }
    .gd-pdp__title { font-size: var(--gd-text-lg); }
    .gd-pdp__sku { margin-inline-start: 0; }
    .gd-trust { grid-template-columns: 1fr; gap: 14px; }
    .gd-block, .gd-pdp .gd-section { padding: 18px 16px; }
    .gd-tabs { inset-block-start: 0; overflow-x: auto; scrollbar-width: none; }
    .gd-tabs::-webkit-scrollbar { display: none; }
    .gd-tabs__link { flex: 0 0 auto; padding-inline: 14px; }
    .gd-reviews__top { grid-template-columns: 1fr; gap: 20px; }
    .gd-summary__cols { grid-template-columns: 1fr; }
    .gd-review { grid-template-columns: 1fr; gap: 12px; }
    .gd-specs th { width: 38%; min-width: 6.5rem; }

    /* نوار خرید ثابت پایین + جای خالی برایش */
    .gd-stickybuy { display: flex; }
    .gd-pdp main { padding-block-end: 84px; }
}

/* ── نمایشگر بزرگ (۱۲۸۰ واقعی ≡ ۱۶۰۰ مجازی): گالری و جعبه خرید بازتر ── */
@media (min-width: 1280px) {
    .gd-pdp__main {
        grid-template-columns:
            clamp(20rem, 28%, 28rem)
            minmax(0, 1fr)
            clamp(15rem, 22%, 20rem);
        gap: var(--gd-space-8);
    }
}

/* ============================================================
   کالای ناموجود — برچسب به‌جای قیمت
   ------------------------------------------------------------
   قیمتِ کالایی که دکمه‌ی خریدش کار نمی‌کند گمراه‌کننده است. به‌جایش
   یک برچسب می‌نشیند که خودش دکمه‌ی رفتن به نمودار قیمت است، تا کاربر
   بتواند ببیند این کالا آخرین بار چند بوده و روندش چه شکلی داشته.
   ============================================================ */
.gd-oos {
    display: flex; flex-direction: column; gap: var(--gd-space-2);
    margin-block: var(--gd-space-3) var(--gd-space-4);
    padding: var(--gd-space-3) var(--gd-space-4);
    background: var(--gd-danger-soft, #fef2f2);
    border: 1px solid var(--gd-danger, #dc2626);
    border-radius: var(--gd-radius);
    text-align: center;
    transition: background var(--gd-dur-base, .18s) var(--gd-ease, ease);
}
.gd-oos[href]:hover { background: var(--gd-bg); }
.gd-oos__badge {
    font-size: var(--gd-text-md); font-weight: 700;
    color: var(--gd-danger, #dc2626);
}
.gd-oos__badge i { margin-inline-end: var(--gd-space-1); }
.gd-oos__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--gd-space-2);
    font-size: var(--gd-text-xs); font-weight: 600; color: var(--gd-primary);
}
.gd-oos--plain .gd-oos__cta { color: var(--gd-muted); font-weight: 400; }

/* ============================================================
   نمودار قیمت — بخش ثابت صفحه، بالای دیدگاه‌ها
   ============================================================ */
.gd-chart__legend {
    display: inline-flex; align-items: center; gap: var(--gd-space-2);
    font-size: var(--gd-text-xs); color: var(--gd-muted);
}
.gd-chart__legend i { font-size: 8px; color: var(--gd-primary); }

#gdChartBox { min-height: 300px; margin-block-start: var(--gd-space-4); }
/* ApexCharts متن را چپ‌چین می‌سازد؛ اعداد محور در RTL باید سرجایشان بمانند */
#gdChartBox text { font-family: inherit; }

.gd-chart__facts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gd-space-3);
    margin: var(--gd-space-4) 0 0; padding: 0; list-style: none;
}
.gd-chart__facts li {
    display: flex; flex-direction: column; gap: var(--gd-space-1);
    padding: var(--gd-space-3);
    background: var(--gd-bg-soft); border-radius: var(--gd-radius-sm);
    text-align: center;
}
.gd-chart__facts span { font-size: var(--gd-text-2xs); color: var(--gd-muted); }
.gd-chart__facts b     { font-size: var(--gd-text-md); }
.gd-chart__facts small { font-size: var(--gd-text-2xs); color: var(--gd-muted); font-weight: 400; }

.gd-chart__note {
    display: flex; gap: var(--gd-space-2);
    margin-block-start: var(--gd-space-4);
    font-size: var(--gd-text-xs); color: var(--gd-muted); line-height: 2;
}
.gd-chart__note i { margin-block-start: 5px; color: var(--gd-primary); }

@media (max-width: 640px) {
    .gd-chart__facts { grid-template-columns: 1fr; }
}

/* ---------- فهرست بلند گونه ----------
   کالایی مثل رنگ مولتی‌سرفیس ۹۰ گونه دارد. جمع‌شده ۱۲ تای اول را نشان
   می‌دهد؛ بقیه با دکمه باز می‌شوند. اسکرولر تودرتو عمداً نیست — قاعده‌ی
   اسکرول‌بار سایت فقط یک سطح اسکرولر عمودی را مجاز می‌داند. */
.gd-variant.is-collapsible:not(.is-open) .gd-variant__opts .gd-opt:nth-child(n+13) { display: none; }
.gd-variant .js-opts-toggle { margin-block-start: var(--gd-space-2); }
.gd-variant.is-open .js-opts-toggle i { transform: rotate(180deg); }
.gd-variant .js-opts-toggle i { transition: transform var(--gd-dur-base, .18s) var(--gd-ease, ease); }

/* ============================================================
   انتخابگر رنگ — دایره در خانواده (۲۲ شهریور ۱۴۰۵)
   ------------------------------------------------------------
   Swatch.php از نامِ گونه رنگ می‌سازد. دایره‌ها هم کلاس .gd-opt دارند تا
   منطقِ موجودِ انتخاب (select / render / comboExists) بی‌تغییر کار کند؛
   پس ظاهرِ دکمه‌ی متنی اینجا با انتخابگرِ قوی‌تر (سه کلاس) خنثی می‌شود.
   ============================================================ */
.gd-variant--swatch [hidden] { display: none !important; }

.gd-variant--swatch .gd-sw-picked {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
    margin-block-end: 10px; font-size: var(--gd-text-sm); color: var(--gd-muted);
}
.gd-variant--swatch .gd-sw-picked b { color: var(--gd-ink); font-weight: 700; font-size: var(--gd-text-md); }
.gd-sw-picked__en { direction: ltr; unicode-bidi: isolate; color: var(--gd-muted); font-size: var(--gd-text-xs); }
.gd-sw-picked__no {
    font-size: var(--gd-text-xs); color: var(--gd-muted);
    background: var(--gd-bg-soft); border-radius: var(--gd-radius-sm, 6px); padding: 0 7px;
    font-variant-numeric: tabular-nums;
}
.gd-sw-hue {
    font-size: var(--gd-text-2xs, 11px); font-weight: 600; color: var(--gd-muted);
    border: 1px solid var(--gd-line-strong, #cbd5e1); border-radius: 999px; padding: 0 8px; cursor: help;
}

.gd-sw-fams { display: flex; flex-direction: column; gap: 4px; }
.gd-sw-fam { display: grid; gap: 0; }
@media (min-width: 560px) {
    .gd-sw-fam--named { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 10px; }
}
.gd-sw-fam__name { font-size: var(--gd-text-xs); color: var(--gd-muted); white-space: nowrap; }
.gd-sw-fam__name span { font-variant-numeric: tabular-nums; opacity: .75; }
.gd-sw-row { display: flex; flex-wrap: wrap; gap: 2px; }
.gd-sw-row--text { gap: 6px; padding-block: 4px; }

.gd-variant .gd-opt.gd-sw {
    position: relative;
    /* ⚠ ریشه در ≥۱۲۸۰ روی zoom ۰٫۸ است: ۳۰ پیکسلِ نوشته‌شده روی دسکتاپ ۲۴
       درمی‌آمد (اندازه‌گیری روی سایت زنده، ۲۲ شهریور). ۳۴ ← حدود ۲۷ واقعی. */
    inline-size: 44px; block-size: 44px;
    padding: 0; border: 0; border-radius: 50%;
    background: none;
    display: grid; place-items: center;
    -webkit-tap-highlight-color: transparent;
}
.gd-sw__dot {
    position: relative;
    inline-size: 34px; block-size: 34px; border-radius: 50%;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18),
                inset 0 -4px 7px rgba(0, 0, 0, .12), inset 0 3px 5px rgba(255, 255, 255, .22);
    transition: transform .15s ease, box-shadow .15s ease;
}
.gd-variant .gd-opt.gd-sw:hover .gd-sw__dot { transform: scale(1.08); }
.gd-variant .gd-opt.gd-sw.is-active .gd-sw__dot {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18), 0 0 0 2px var(--gd-bg), 0 0 0 4px var(--gd-primary);
}
/* تیک — رنگش از روشنایی خودِ دایره (سیاه روی روشن، سفید روی تیره) */
.gd-variant .gd-opt.gd-sw.is-active .gd-sw__dot::before {
    content: ""; position: absolute; inset: 0; margin: auto;
    inline-size: 7px; block-size: 12px;
    border: solid var(--tick, #fff); border-width: 0 2.2px 2.2px 0;
    transform: translateY(-1px) rotate(45deg);
}
.gd-variant .gd-opt.gd-sw:focus-visible { outline: 2px solid var(--gd-primary); outline-offset: 1px; }

/* فلزی و صدفی: درخشش با گرادیان روی همان رنگِ پایه */
.gd-sw.is-metal .gd-sw__dot {
    background: linear-gradient(135deg, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 38%,
                rgba(0, 0, 0, .18) 62%, rgba(255, 255, 255, .45) 100%), var(--c);
}
.gd-sw.is-pearl .gd-sw__dot {
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 55%),
                linear-gradient(135deg, rgba(255, 210, 240, .35), rgba(190, 240, 255, .35)), var(--c);
}
/* فلورسنت: هاله‌ی همان رنگ، تا از رنگِ ساده جدا شود */
.gd-sw.is-fluo .gd-sw__dot { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12), 0 0 6px 1px var(--c); }
.gd-variant .gd-opt.gd-sw.is-fluo.is-active .gd-sw__dot {
    box-shadow: 0 0 6px 1px var(--c), 0 0 0 2px var(--gd-bg), 0 0 0 4px var(--gd-primary);
}

/* ناموجود وقتی بقیه موجودند: خط مورب، هنوز قابل انتخاب (قیمت قبلی، «خبرم کن») */
.gd-sw.is-out .gd-sw__dot { opacity: .7; }
.gd-sw.is-out .gd-sw__dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: linear-gradient(135deg, transparent calc(50% - 1.2px), var(--gd-bg) calc(50% - 1.2px),
                var(--gd-bg) calc(50% + 1.2px), transparent calc(50% + 1.2px));
}
/* ناسازگار با حجمِ انتخاب‌شده */
.gd-variant .gd-opt.gd-sw.is-disabled { opacity: .3; cursor: not-allowed; }
.gd-variant .gd-opt.gd-sw.is-disabled .gd-sw__dot { transform: none; }

/* نامِ رنگ روی ماوس و فوکوس صفحه‌کلید؛ روی لمسی خطِ بالا کارش را می‌کند */
.gd-variant .gd-opt.gd-sw::after {
    content: attr(data-tip);
    position: absolute; inset-block-end: calc(100% + 2px); inset-inline-start: 50%;
    translate: 50% 0;
    white-space: nowrap; padding: 3px 9px; border-radius: var(--gd-radius-sm, 6px);
    background: var(--gd-ink); color: var(--gd-bg);
    font-size: var(--gd-text-xs); line-height: 1.7;
    opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 5;
}
.gd-variant .gd-opt.gd-sw:hover::after,
.gd-variant .gd-opt.gd-sw:focus-visible::after { opacity: 1; }
@media (hover: none) { .gd-variant .gd-opt.gd-sw::after { display: none; } }

.gd-sw-search {
    inline-size: 100%; max-inline-size: 22rem;
    margin-block-end: 8px; padding: 8px 12px;
    border: 1px solid var(--gd-line-strong, #cbd5e1); border-radius: var(--gd-radius-sm, 6px);
    background: var(--gd-bg); color: var(--gd-ink); font: inherit; font-size: var(--gd-text-sm);
}
.gd-sw-search:focus { outline: 2px solid var(--gd-primary); outline-offset: 0; border-color: var(--gd-primary); }
.gd-sw-empty { font-size: var(--gd-text-xs); color: var(--gd-muted); margin: 4px 0; }
.gd-sw-note { margin: 8px 0 0; font-size: var(--gd-text-2xs, 11px); color: var(--gd-muted); }

/* رنگِ انتخاب‌شده در جعبه‌ی خرید — گونه‌ها عکسِ خودشان را ندارند، پس عکسِ
   اصلی با انتخاب رنگ عوض نمی‌شود؛ این نمونه جای خالی را پر می‌کند. */
.gd-bb-color {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-block-end: 12px;
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius-sm, 6px); background: var(--gd-bg);
}
.gd-bb-color[hidden] { display: none; }
.gd-bb-color__dot {
    flex: 0 0 auto; inline-size: 28px; block-size: 28px; border-radius: 50%;
    background: var(--c); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18);
}
.gd-bb-color__txt { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.gd-bb-color__txt b { font-size: var(--bb-sm, var(--gd-text-sm)); }
.gd-bb-color__txt small { font-size: var(--bb-xs, var(--gd-text-xs)); color: var(--gd-muted); }

@media (max-width: 767px) {
    .gd-variant .gd-opt.gd-sw { inline-size: 44px; block-size: 44px; }
    .gd-sw__dot { inline-size: 32px; block-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .gd-sw__dot, .gd-variant .gd-opt.gd-sw::after { transition: none; }
}