/* ==========================================================================
   fastkart — زبانِ طراحی: روشن و بازِ فروشگاهی
   فاز ۵۲.۶ · D44
   ==========================================================================

   این فایل تنظیماتِ قالب را به ظاهرِ صفحه وصل می‌کند. مقدارها از
   `<style id="theme-tokens">` می‌آیند که `apps/appearance/design.py`
   می‌سازدش، و آن هم از تنظیماتی که فروشنده در پنل ذخیره کرده.

   ── چرا فایلِ fastkart تقریباً فقط نگاشت است ─────────────────────────

   استایلِ خودِ fastkart از قبل روی `--theme-color` نوشته شده — ۳۱۲ بار در
   `minified-style.css`. پس برای اینکه «رنگ اصلی» در پنل واقعاً کلِ قالب را
   رنگ کند، لازم نیست چیزی بازنویسی شود؛ کافی است متغیرِ قدیمیِ قالب از
   نشانهٔ جدید تغذیه شود. همین چند خط، تمامِ آن ۳۱۲ جا را زنده می‌کند.

   این خوش‌شانسی fastkart است، نه الگوی بقیه: سه قالبِ دیگر رنگ را در
   CSS خام نوشته‌اند و فایلِ طراحی‌شان باید صریح بازنویسی کند.

   ── ترتیب بارگذاری، که این فایل به آن تکیه دارد ─────────────────────

   `layout/master.html` این را **بعد از** `minified-style.css` و درست پیش
   از `</head>` لینک می‌کند، و بلوکِ نشانه‌ها بلافاصله بعد از آن می‌آید.
   با ویژگیِ برابر، آخری برنده است. اگر کسی این لینک را بالاتر ببرد،
   نگاشت‌های زیر بی‌اثر می‌شوند و هیچ خطایی هم دیده نمی‌شود.
   ========================================================================== */

:root {
    /* متغیرهای تاریخیِ قالب، از نشانه‌های تنظیمات تغذیه می‌شوند. */
    --theme-color: var(--theme-accent);
    --theme-color-rgb: var(--theme-accent-rgb);
    --theme-color1: var(--theme-accent-strong);
}

/* --------------------------------------------------------------------------
   گردیِ گوشه‌ها — بارزترین تفاوتِ ارزانِ میانِ چهار قالب
   -------------------------------------------------------------------------- */

.btn,
.btn-solid,
.btn-outline,
.theme-form input,
.theme-form select,
.theme-form textarea,
.form-control,
.product-box,
.product-box-3,
.category-box,
.banner-contain,
.card {
    border-radius: var(--theme-radius);
}

.badge,
.label,
.tag,
.offer-badge {
    border-radius: var(--theme-radius-sm);
}

/* --------------------------------------------------------------------------
   قلمِ عنوان‌ها
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.section-title,
.product-title {
    font-family: var(--theme-font);
}

/* --------------------------------------------------------------------------
   تعدادِ ستون‌های شبکهٔ محصولات
   --------------------------------------------------------------------------

   تنها جایی که یک عددِ تنظیمات مستقیم به چیدمان می‌رسد. زیرِ ۹۹۲px عمداً
   نادیده گرفته می‌شود: «شش ستون» انتخابی دربارهٔ دسکتاپ است و روی موبایل
   شش ستون یعنی هیچ.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .product-grid-tokenised {
        display: grid;
        grid-template-columns: repeat(var(--theme-columns), minmax(0, 1fr));
        gap: var(--theme-gap);
    }
}

/* --------------------------------------------------------------------------
   فاصله‌گذاری
   -------------------------------------------------------------------------- */

.section-t-space {
    padding-top: var(--theme-gap-lg);
}

.section-b-space {
    padding-bottom: var(--theme-gap-lg);
}

/* ---------------------------------------------------------------------------
   نوارِ افقیِ بخش‌های صفحهٔ اصلی — فاز ۵۸، برداشته‌شده در فاز ۵۸.۳

   `.home-band-slider` اینجا بود و حالا `.hs-rail` در
   `static/frontend/_shared/css/home-sections.css` است.

   دلیلِ جابه‌جایی یک اشکالِ واقعی بود و نه مرتب‌سازی: سه قالبِ دیگر
   partialهای صفحهٔ اصلی را از fastkart ارث می‌برند ولی این فایل را
   لینک نمی‌کنند، پس همان markup را با **هیچ** CSSای رندر می‌کردند —
   نوارِ محصولِ کالامارکت یک ستونِ عمودیِ تمام‌عرض بود.

   قالبی که نوارِ افقیِ متفاوتی بخواهد، همین‌جا `.hs-rail` را بازنویسی
   می‌کند؛ که همان کاری است که یک لایهٔ مشترک باید اجازه بدهد.
   --------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   کارتِ محصول در نوارهای صفحهٔ اصلی — فاز ۷۵
   --------------------------------------------------------------------------

   دو چیزِ کوچک که با هم یک ردیفِ مرتب می‌سازند:

   ── قیمتِ خط‌خورده فاصله می‌خواهد ───────────────────────────────────

   `minified-style.css` برای
   `[dir="rtl"] .product-box-4 .product-detail .price del`
   می‌نویسد `margin-left: unset; margin-right: 10px`. انتخابگرِ اینجا
   به همان بلندی است و نه کوتاه‌تر، چون قاعدهٔ کوتاه‌تر — هرچند
   بعدتر بارگذاری می‌شود — از آن یکی ضعیف‌تر است و بی‌اثر می‌ماند؛
   و `!important` برای یک فاصلهٔ هشت‌پیکسلی، بدهی‌ای است که فردا
   کسی نمی‌تواند بازش کند. ولی `.price` یک
   فلکس است و در راست‌به‌چپ قیمتِ قدیمی **اولین** عضو است؛ پس آن ۱۰
   پیکسل به لبهٔ بیرونیِ کارت می‌رود و بینِ دو عدد هیچ فاصله‌ای
   نمی‌ماند: «۲,۸۷۳,۵۰۰۳,۹۹۱,۰۰۰». فاصله باید سمتِ **پایانِ** خط
   باشد، همان‌جا که عددِ بعدی می‌آید.

   ── و کارت باید قدِ سلولش را بگیرد ─────────────────────────────────

   `home-sections.css` به فرزندِ شبکه `height: 100%` می‌دهد. بدونِ
   ستونی‌کردنِ خودِ کارت، آن ارتفاع به تصویر می‌رسد و زیرِ عکس یک
   فاصلهٔ خالی باز می‌شود. با این دو خط، فضای اضافی به بخشِ مشخصات
   می‌رسد و دکمه‌ها روی یک خط می‌نشینند. */

.product-box-4 .product-detail .price .ds-price__was,
[dir="rtl"] .product-box-4 .product-detail .price .ds-price__was {
    margin-inline-start: 0;
    margin-inline-end: var(--ds-space-2, 8px);
}

.hs-grid > .product-box-4,
.hs-rail > * > .product-box-4 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hs-grid > .product-box-4 > .product-detail,
.hs-rail > * > .product-box-4 > .product-detail {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* دکمهٔ سبد ته کارت، هرچقدر نامِ کالا بلند باشد. */
.hs-grid > .product-box-4 .add-to-cart-box,
.hs-rail > * > .product-box-4 .add-to-cart-box {
    margin-block-start: auto;
}

/* دو قیمت در کارتِ باریک، دو خط می‌شوند — فاز ۷۵.
 *
 * `.price` یک فلکسِ بدونِ `wrap` است. در ستونِ باریکِ کنارِ بنر — جایی
 * که کارت حدودِ ۱۳۰ پیکسل عرض دارد — «۲,۵۵۷,۴۰۰ تومان» به‌علاوهٔ قیمتِ
 * خط‌خورده از کارت بیرون می‌زد، و آن بیرون‌زدگی تا خودِ سند بالا
 * می‌رفت: صفحه در عرضِ ۹۰۰ پیکسل اسکرولِ افقی می‌گرفت.
 *
 * شکستنِ خط بینِ دو عدد است و نه داخلشان: `.ds-price__now` هنوز
 * `nowrap` است، چون عددی که وسطش بشکند خوانده نمی‌شود. */
.product-box-4 .price {
    flex-wrap: wrap;
    row-gap: 2px;
}