/* گالری صفحهٔ محصول: یک قاب تمیز (۲۰۲۶-۱۰-۲۰). فقط صفحهٔ محصول؛ فونت/هدر/لوگو دست‌نخورده.
   قاب داخلی/سایهٔ فرورفته/نوار خاکستری حذف شد؛ پس‌زمینهٔ قاب = رنگ لبهٔ عکس فعال (--gal-bg)،
   نسبت قاب = نسبت عکس فعال (--gal-ar، بین ۳:۴ و ۴:۳). object-fit: cover استفاده نمی‌شود. */
.product-gallery-wrap { padding: 0; }
.product-gallery-wrap .gallery-thumbs { padding: 10px 10px 12px; margin-top: 0; }
.product-gallery {
  aspect-ratio: var(--gal-ar, 3 / 4);
  max-height: 82vh;
  border-radius: 0;
  box-shadow: none;
  background: var(--gal-bg, #fff);
  transition: aspect-ratio .3s ease, background-color .3s ease;
}
.product-gallery .swiper-slide { background: transparent; padding: 0; }
.product-gallery .swiper-slide img,
.product-gallery .swiper-slide video { width: 100%; height: 100%; object-fit: contain; }
/* عکس با نوار یکدستِ داخل فایل: فقط نوار پنهان می‌شود (جعبهٔ هم‌نسبت ناحیهٔ نمایش‌داده‌شده، وسط قاب) */
.product-gallery .swiper-slide.is-trim { display: flex; align-items: center; justify-content: center; }
.product-gallery .gal-crop {
  position: relative; overflow: hidden;
  width: calc(100% * min(1, var(--ar) / var(--gal-ar, 0.75)));
  aspect-ratio: var(--ar);
}
.product-gallery .gal-crop img {
  position: absolute; max-width: none; object-fit: fill;
  width: var(--w); height: var(--h); left: var(--l); top: var(--tp);
}
@media (max-width: 899px) {
  .product-gallery { aspect-ratio: var(--gal-ar, 3 / 4); max-height: 75vh; }
}

/* دسکتاپ (۲۰۲۶-۱۰-۲۴): قاب از روی ارتفاع در دسترس (هدر+نوار دسته‌بندی+حاشیه) اندازه
   می‌گیرد نه از عرض ستون — عرض با aspect-ratio (نسبت واقعی عکس فعال، --gal-ar)
   خودش محاسبه می‌شود، پس همهٔ درصدهای .gal-crop (که نسبت به همین قاب‌اند) هم‌نسبت
   کوچک می‌شوند و هیچ بریدگی تازه‌ای ایجاد نمی‌شود. ردیف thumbnail زیرِ همان ستون
   (fit-content) می‌ماند تا از قاب عریض‌تر نشود و همیشه در صفحهٔ اول دیده شود. */
@media (min-width: 900px) {
  .product-gallery-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    height: calc(100vh - var(--header-h, 89px) - var(--catbar-h, 70px) - 100px);
    min-height: 420px;
    max-height: 680px;
  }
  .product-gallery {
    flex: 1 1 auto;
    min-height: 0;
    width: auto;
    max-width: 100%;
    max-height: none;
  }
  .product-gallery-wrap .gallery-thumbs {
    flex: 0 0 auto;
    width: 100%;
  }
}