/* ===========================================================================
   محتوای ادیتور روی فروشگاه — فاز ۷۹
   ===========================================================================

   ── درخواستی که از آن آمد ────────────────────────────────────────────

   «به همه عکس هایی که توی این div با کلاس product-description هستن یه
    border radius بده من دیگه تو فوتوشاپ تک تک گوشه هارو گرد نکنم.»

   ── مرزِ این فایل ────────────────────────────────────────────────────

   اینجا **فقط** ظاهرِ چیزی است که ادیتورِ پنل می‌سازد و ما و قالب
   هیچ‌کدام نشانه‌گذاری‌اش را نمی‌نویسیم: `ck-content`. متنِ توضیحِ
   محصول، بدنهٔ دسته، بدنهٔ برند و متنِ مقاله همه از همین‌جا می‌آیند، و
   در هر چهار قالب.

   همان استثنایی که `address-form.css` هم روی آن ایستاده و
   `docs/27-frontend-architecture.md` می‌گویدش: استایلِ مشترک، جایی که
   تکرارش در چهار قالب یعنی چهار بار اصلاحِ یک چیز.

   ── چرا در `foundation.css` نماند ────────────────────────────────────

   اولین نسخه آنجا نوشته شد و `tests/test_design_system.py` قرمز شد —
   به‌درستی. آن فایل قاعده‌اش این است که **فقط** کلاس‌های `.ds-` را
   استایل کند، چون کنارِ چند هزار خط CSSِ قالب‌های خریداری‌شده می‌نشیند
   و یک انتخابگرِ عنصریِ بی‌گناه، هر چهار قالب را در چهار جا جابه‌جا
   می‌کند.

   `.product-description img` دقیقاً همان است. پس فایلِ خودش را دارد.

   ── چرا `--theme-radius` و نه یک عددِ ثابت ───────────────────────────

   گردیِ گوشه در این پروژه یک تصمیمِ **پنل** است. عددِ ثابت اینجا یعنی
   فروشگاهی که قالبش را تیزگوشه کرده، تصویرهای متنش همچنان گرد
   می‌مانند — یعنی همان ناهماهنگی، فقط جای دیگر.

   کمی بزرگ‌تر از گردیِ پایه (`+2px`): تصویرِ بزرگ در کنارِ دکمهٔ کوچک،
   با گردیِ یکسان تیزتر به نظر می‌رسد.
   =========================================================================== */

.product-description img,
.ck-content img {
    border-radius: calc(var(--theme-radius, 12px) + 2px);
}

/* ادیتور تصویرِ عنوان‌دار را داخلِ `<figure class="image">` می‌گذارد و
   `overflow` آنجاست که گوشهٔ تصویر را می‌بُرد؛ بدونِ این خط، تصویرِ
   عنوان‌دار گوشه‌اش گرد نمی‌شود. */
.product-description figure.image,
.ck-content figure.image {
    border-radius: calc(var(--theme-radius, 12px) + 2px);
    overflow: hidden;
}

/* خودِ عکس دیگر گرد نمی‌شود چون `figure` بُرشش می‌دهد، و دو گردیِ
   تودرتو یک لبهٔ ناصاف می‌سازد. */
.product-description figure.image img,
.ck-content figure.image img {
    border-radius: 0;
}

/* عنوانِ زیرِ تصویر بیرونِ قابِ گرد می‌ماند و نه داخلش. */
.product-description figure.image figcaption,
.ck-content figure.image figcaption {
    border-radius: 0;
}