/* =========================================================================== فست‌کارت — نمای سریعِ محصول. فاز ۷۰ =========================================================================== ظرفش `layout/modals.html` است و رفتارش `_shared/js/quick-view.js`. اینجا فقط ظاهر است. ── چرا این فایل آخرین قالب است که ساخته شد ───────────────────────── فاز ۶۷ کشف کرد که نمای سریع در **هر چهار قالب** مرده بود: ویو، قالب، پنجره و جاوااسکریپتش وجود داشتند و هیچ فایلی راه‌اندازش را نمی‌نوشت. همان فاز ماژولِ مشترک و `` را ساخت و کالامارکت را وصل کرد؛ فاز ۶۸ ولمارت را و فاز ۶۹ بیگ‌دیل را. **فست‌کارت جا ماند** — و به دلیلی که در نگاهِ اول وارونه به نظر می‌رسد: تنها قالبی بود که نسخهٔ **خودش** را داشت. یک `#cartmodal`ِ بوت‌استرپی در `layout/modals.html`، یک `products/modal.html`ِ ۱۳۷ خطی، و دو دستگیره داخلِ بستهٔ فشرده‌شدهٔ `custom-script.js`. کار می‌کرد، پس کسی سراغش نرفت — و در همان حال، «افزودن به سبد» از داخلِ این پنجره در سه قالبِ دیگر **هیچ کاری نمی‌کرد**، چون تنها گوش‌کنندهٔ آن دکمه همان بسته بود. فاز ۷۰ هر سه را برداشت و فست‌کارت هم به قراردادِ مشترک آمد. ── دو خانوادهٔ نامِ کلاس ───────────────────────────────────────────── `hs-qv-dialog*` **قاب**. `layout/modals.html`ِ همین قالب. `qv*` **محتوا**. نشانه‌گذاری‌اش مشترک است (`_shared/product_quick_view.html`)، چون تصویر و نام و مشخصات را مدل تعیین می‌کند. شکلشان اینجاست. ── چرا `` استایلِ کمی می‌خواهد ────────────────────────────── قاب، پس‌زمینهٔ تیره، گرفتنِ فوکوس و بستن با Esc را خودِ مرورگر می‌دهد. آنچه نمی‌دهد سه چیز است: عرضِ بیشینه، حذفِ حاشیهٔ پیش‌فرض، و اسکرول وقتی محتوا از صفحه بلندتر است. =========================================================================== */ .hs-qv-dialog { width: min(920px, 94vw); max-height: 90vh; overflow-y: auto; padding: var(--ds-space-4, 1.5rem); border: 0; border-radius: var(--theme-radius, 12px); background: var(--theme-surface, #fff); color: var(--theme-ink, #222); box-shadow: var(--theme-shadow-lg, 0 20px 50px rgb(0 0 0 / 18%)); /* جهت را باید صریح گفت: `` در ریشهٔ لایهٔ بالا رندر می‌شود و `dir` را از `` می‌گیرد، ولی مرورگرها در این یکی هم‌نظر نیستند. */ direction: rtl; } .hs-qv-dialog::backdrop { background: rgb(0 0 0 / 50%); } .hs-qv-dialog__close { position: absolute; inset-block-start: var(--ds-space-2, 8px); inset-inline-end: var(--ds-space-2, 8px); min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--theme-ink-muted, #777); font-size: 1.8rem; line-height: 1; cursor: pointer; } .hs-qv-dialog__close:hover { background: var(--theme-tint, #f5f7fa); } /* --------------------------------------------------------------------------- خودِ محتوا — `_shared/product_quick_view.html` --------------------------------------------------------------------------- دو ستون، تصویر سمتِ راست. سهمِ تصویر در این قالب بیشتر از کالامارکت است (۵/۱۲ در برابر ۴/۱۲): فست‌کارت قالبِ روشن و بازی است و تصویرِ بزرگ‌تر همان تصمیمی است که صفحهٔ محصولش را دو ستونه کرد. --------------------------------------------------------------------------- */ .qv { display: grid; grid-template-columns: 5fr 7fr; gap: var(--ds-space-4, 1.5rem); align-items: start; } @media (max-width: 767px) { .qv { grid-template-columns: minmax(0, 1fr); } } .qv__media { min-width: 0; } .qv__image { width: 100%; height: auto; border-radius: var(--theme-radius, 12px); background: var(--theme-tint, #f5f7fa); } .qv__name { font-family: var(--theme-font, sans-serif); font-size: var(--ds-text-xl, 1.4rem); line-height: var(--ds-leading-tight, 1.25); margin-block: 0 var(--ds-space-2, 8px); } .qv__overview { color: var(--theme-ink-muted, #777); line-height: var(--ds-leading-normal, 1.75); margin-block: 0 var(--ds-space-3, 1rem); } /* --------------------------------------------------------------------------- مشخصات و قیمت --------------------------------------------------------------------------- */ .qv__specs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--ds-space-3, 1rem); margin-block: 0 var(--ds-space-3, 1rem); font-size: var(--ds-text-sm, 0.9rem); } .qv__specs dt { color: var(--theme-ink-muted, #777); } .qv__specs dd { margin: 0; } .qv__specs--price { padding-block-start: var(--ds-space-2, 8px); border-block-start: 1px solid var(--theme-line, #e8ecf1); } .qv__sku { direction: ltr; text-align: end; font-family: var(--ds-font-mono, monospace); font-size: var(--ds-text-xs, 0.8rem); } /* قیمتِ پیش از تخفیف: خط‌خورده و کم‌رنگ، تا عددِ اصلی جلو بیاید. */ .qv__was { text-decoration: line-through; color: var(--theme-ink-muted, #777); } .qv__total-label, .qv__total { font-size: var(--ds-text-lg, 1.125rem); font-weight: 700; } .qv__total { color: var(--theme-accent, #3dcfff); } /* --------------------------------------------------------------------------- ردیفِ خرید --------------------------------------------------------------------------- */ .qv__buy { display: flex; align-items: center; gap: var(--ds-space-3, 1rem); flex-wrap: wrap; padding-block-start: var(--ds-space-3, 1rem); border-block-start: 1px solid var(--theme-line, #e8ecf1); } .qv__qtylabel { display: block; font-size: var(--ds-text-xs, 0.8rem); color: var(--theme-ink-muted, #777); margin-block-end: 4px; } .qv .quantity { position: relative; flex: none; } .qv .quantity input { width: 96px; min-height: 44px; padding-inline: var(--ds-space-2, 8px) 28px; border: 1px solid var(--theme-line, #e8ecf1); border-radius: var(--theme-radius, 12px); font: inherit; text-align: center; /* پیکانِ پیش‌فرضِ مرورگر با دکمه‌های خودمان دو کنترل روی یک میدان می‌شود. */ appearance: textfield; } .qv .quantity input::-webkit-outer-spin-button, .qv .quantity input::-webkit-inner-spin-button { appearance: none; margin: 0; } .qv .quantity-nav { position: absolute; inset-block-end: 4px; inset-inline-end: 4px; display: flex; flex-direction: column; } .qv .quantity-button { width: 22px; height: 18px; border: 0; background: transparent; color: var(--theme-ink-muted, #777); font-size: var(--ds-text-xs, 0.8rem); line-height: 1; cursor: pointer; } .qv__add { flex: 1; min-width: 180px; min-height: 44px; border: 0; border-radius: var(--theme-radius, 12px); background: var(--theme-accent, #3dcfff); color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .qv__add:hover { background: var(--theme-accent-strong, #2bb8e6); } /* موقعِ فرستادنِ درخواست خاموش می‌شود — `quick-view.js` `disabled` را می‌گذارد تا دو کلیکِ سریع دو بار به سبد اضافه نکند. */ .qv__add:disabled { opacity: 0.6; cursor: wait; } .qv__soldout { padding: var(--ds-space-3, 1rem); border-radius: var(--theme-radius, 12px); background: var(--theme-tint, #f5f7fa); color: var(--theme-ink-muted, #777); text-align: center; }