/* ============================================================
   کارت محصول «ویترین شیشه‌ای» — ۲۰۲۶-۱۰-۱۸ (Claude Code)
   فایل جدا و بعد از style.css لود می‌شود: هیچ خطی از style.css (و
   PROTECTED ZONE) ویرایش نشده؛ همهٔ قانون‌ها با سلکتور .vitrine-card
   (specificity بالاتر) برنده می‌شوند. مارک‌آپ: cart.js/productVitrineCardHtml،
   رفتار: js/vitrine-cards.js. فونت دست نخورده (ارث از body / --font-main).
   اندازه‌ها نسبت به عرض خود کارت (container query، cqw + clamp)؛ مقدار px
   قبل از هر clamp، fallback مرورگر بدون container query است.
   ============================================================ */

.product-card-wrap.vitrine-card {
  --vt-gold: #d8b46a;
  --vt-gold-soft: rgba(216, 180, 106, 0.45);
  --vt-navy: #0d283d;
  --vt-navy-2: #1b3a52;
  --vt-red: var(--nx-sale-red, #e23a3a);
  --vt-base: #f4f6f9;
  /* نوار نقطه‌ها (پایین ناحیهٔ عکس): فاصلهٔ پایین + قطر نقطه + ۲px */
  --vt-dots-band: 10px;
  --vt-dots-band: calc(clamp(3px, 2cqw, 8px) + clamp(4px, 2.4cqw, 7px) + 2px);
  container-type: inline-size;
  container-name: vitrine;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vitrine-card .vitrine-link { display: block; color: inherit; text-decoration: none; }

/* ---------- ۱. جعبهٔ شیشه‌ای ---------- */
.vitrine-card .vitrine-box {
  position: relative;
  aspect-ratio: 1 / 1.25;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  /* رنگ پایهٔ یکدست؛ گرادیان شعاعی (سفید بالا ← خاکستری آبی لبه‌ها) روی
     .vitrine-glass می‌آید تا بالای اسلایدها هم باشد. علت: mix-blend-mode از
     داخل اسکرولر اسلایدر (لایهٔ ایزوله در کروم) به پس‌زمینهٔ جعبه نمی‌رسد،
     پس هر اسلاید همین رنگ پایه را دارد و multiply روی آن انجام می‌شود. */
  background: var(--vt-base);
  border: 1px solid var(--vt-gold);
  box-shadow:
    0 1px 2px rgba(13, 40, 61, 0.10),
    0 8px 20px rgba(13, 40, 61, 0.14);
}

/* ---------- ۲. پلاک بالا ---------- */
.vitrine-card .vitrine-plaque {
  position: absolute;
  z-index: 4;
  top: 5px;
  top: clamp(4px, 2.6cqw, 9px);
  inset-inline: 8px;
  inset-inline: clamp(6px, 5cqw, 18px);
  height: 17px;
  height: clamp(15px, 8.2cqw, 26px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-inline: 7px;
  padding-inline: clamp(5px, 3.4cqw, 12px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px) saturate(1.3);
  backdrop-filter: blur(6px) saturate(1.3);
  border: 1px solid rgba(216, 180, 106, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 4px rgba(13, 40, 61, 0.08);
}
.vitrine-card .vitrine-brand {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--vt-navy);
  font-weight: 800;
  font-size: 10px;
  font-size: clamp(8px, 4.2cqw, 13px);
  line-height: 1.15;
  /* فاصلهٔ حروف فقط برای نام لاتین برند؛ نام فارسی (is-fa) هرگز */
  letter-spacing: 0.22em;
}
.vitrine-card .vitrine-brand.is-long { letter-spacing: 0.1em; }
.vitrine-card .vitrine-brand.is-xlong { letter-spacing: 0.02em; font-size: clamp(7px, 3.6cqw, 12px); }
.vitrine-card .vitrine-brand.is-fa { letter-spacing: normal; }
.vitrine-card .vitrine-star {
  flex: 0 0 auto;
  color: var(--vt-gold);
  font-size: 11px;
  font-size: clamp(9px, 5cqw, 16px);
  line-height: 1;
}

/* ---------- ۶. برچسب تخفیف روی شیشه، زیر پلاک ---------- */
.vitrine-card .vitrine-sale-badge {
  position: absolute;
  z-index: 4;
  top: 26px;
  top: clamp(22px, 14cqw, 42px);
  inset-inline-start: 10px;
  inset-inline-start: clamp(8px, 6cqw, 20px);
  padding: 3px 7px;
  padding: clamp(2px, 1.2cqw, 4px) clamp(5px, 3cqw, 10px);
  border-radius: 999px;
  background: var(--vt-red);
  color: #fff;
  font-weight: 800;
  font-size: 10px;
  font-size: clamp(9px, 4.6cqw, 14px);
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(226, 58, 58, 0.35);
}

/* ---------- ۳. صحنهٔ عکس (اسلایدر فعلی، داخل شیشه) ---------- */
.vitrine-card .vitrine-stage {
  position: absolute;
  z-index: 1;
  /* از درست زیر پلاک تا بالای پایه؛ نقطه‌ها داخل همین ناحیه‌اند (--vt-dots-band) */
  top: 13%;
  top: calc(clamp(4px, 2.6cqw, 9px) + clamp(15px, 8.2cqw, 26px) + 2px);
  bottom: 14%;
  inset-inline: 0;
}
.product-card-wrap.vitrine-card .vitrine-box .card-carousel,
.product-card-wrap.vitrine-card:hover .vitrine-box .card-carousel {
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.product-card-wrap.vitrine-card .vitrine-box .card-carousel-track {
  /* عکس‌ها تا درست بالای نقطه‌ها؛ کارت تک‌عکس نقطه ندارد و تمام ناحیه را می‌گیرد */
  height: calc(100% - var(--vt-dots-band));
  border-radius: 0;
  overscroll-behavior-x: contain;
}
.product-card-wrap.vitrine-card .vitrine-box .card-carousel:not(:has(.card-carousel-dots)) .card-carousel-track {
  height: 100%;
}
.vitrine-card .vitrine-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: var(--vt-base);
}
.product-card-wrap.vitrine-card .vitrine-box .vitrine-slide img,
.product-card-wrap.vitrine-card:hover .vitrine-box .vitrine-slide img {
  display: block;
  position: absolute;
  z-index: 1;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  /* قانون قدیمی «.card-carousel-track img { scroll-snap-align: start }» این‌جا
     هم می‌گیرد؛ عکس حالا داخل اسلاید است و نباید نقطهٔ snap جدا بسازد
     (وگرنه ورق زدن لمسی وسط راه می‌ایستاد). */
  scroll-snap-align: none;
  flex: none;
}
/* پیش‌فرض (قبل از تحلیل، یا خطا/تایم‌اوت): contain، وسط — عکس هرگز مخفی نیست */
.vitrine-card .vt-frame {
  position: absolute;
  inset: 0;
}
.product-card-wrap.vitrine-card .vitrine-box .vitrine-slide img,
.product-card-wrap.vitrine-card:hover .vitrine-box .vitrine-slide img {
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  /* زوم نرم بعد از تحلیل: js فقط translate/scale را می‌گذارد */
  transform-origin: 0 0;
  transition: translate 0.45s cubic-bezier(0.22, 0.7, 0.2, 1), scale 0.45s cubic-bezier(0.22, 0.7, 0.2, 1);
}
/* ۴الف) پس‌زمینهٔ سفید/روشن ⇒ معلق، بدون پس‌زمینه */
.product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-float img {
  /* --vt-lift را js برای هر عکس از رنگ لبه‌اش می‌گذارد (۱ = سفید خالص) */
  filter: brightness(var(--vt-lift, 1));
  mix-blend-mode: multiply;
  /* لبه‌های عکس نرم محو می‌شوند تا اگر پس‌زمینه کاملاً یکدست نبود
     (استودیوی خاکستری با سایه‌روشن)، لبهٔ مستطیلی تیزی دیده نشود. */
  -webkit-mask-image: radial-gradient(closest-side, #000 88%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 88%, transparent 100%);
}
/* کادر محصول پیدا شد (js: zoomOnBbox) ⇒ ماسک نرم دور خود محصول */
.product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-float.has-bbox img {
  -webkit-mask-image: radial-gradient(ellipse var(--vt-rx) var(--vt-ry) at var(--vt-mx) var(--vt-my), #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--vt-rx) var(--vt-ry) at var(--vt-mx) var(--vt-my), #000 78%, transparent 100%);
}
.vitrine-card .vitrine-slide.is-float::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 22%;
  right: 22%;
  bottom: 3%;
  height: 5%;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13, 40, 61, 0.30), rgba(13, 40, 61, 0));
}
/* ۴ب) عکس مدل‌دار / پس‌زمینهٔ خاکستری یا تیره ⇒ قاب ~۸۸٪ عرض؛ js داخلش روی محصول زوم می‌کند */
.product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-frame .vt-frame {
  inset: auto;
  top: 3%;
  left: 6%;
  width: 88%;
  height: 94%;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  /* حاشیهٔ سفید باریک همیشه (حتی عکس تیره)؛ حلقهٔ نازک سرمه‌ای لبهٔ بیرونی را روی زمینهٔ روشن هم دیدنی می‌کند */
  border: 2px solid #fff;
  border: clamp(2px, 0.9cqw, 3px) solid #fff;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 40, 61, 0.14), 0 2px 4px rgba(13, 40, 61, 0.18), 0 8px 16px rgba(13, 40, 61, 0.20);
}
.product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-frame img {
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* زوم روی محصول داخل قاب: خود عکس به اندازهٔ مستطیل cover (js: --vt-fl/ft/fw/fh) */
.product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-frame.has-zoom img {
  inset: auto;
  left: var(--vt-fl);
  top: var(--vt-ft);
  width: var(--vt-fw);
  height: var(--vt-fh);
  object-fit: fill;
}

/* نقطه‌ها درست بالای پایه؛ فعال طلایی و کشیده */
.product-card-wrap.vitrine-card .vitrine-box .card-carousel-dots {
  bottom: 4px;
  bottom: clamp(3px, 2cqw, 8px);
  gap: 3px;
  gap: clamp(2px, 1.2cqw, 5px);
  padding-inline: 8%;
  flex-wrap: nowrap;
  overflow: hidden;
  z-index: 3;
}
.product-card-wrap.vitrine-card .vitrine-box .card-carousel-dot {
  flex: 0 1 auto;
  min-width: 2px;
  width: 5px;
  height: 5px;
  width: clamp(4px, 2.4cqw, 7px);
  height: clamp(4px, 2.4cqw, 7px);
  border-radius: 999px;
  background: rgba(13, 40, 61, 0.28);
  box-shadow: none;
}
.product-card-wrap.vitrine-card .vitrine-box .card-carousel-dot.is-active {
  width: 14px;
  width: clamp(10px, 6.5cqw, 20px);
  background: var(--vt-gold);
}
.product-card-wrap.vitrine-card .vitrine-box .is-many .card-carousel-dot { width: clamp(3px, 1.8cqw, 6px); height: clamp(3px, 1.8cqw, 6px); }
.product-card-wrap.vitrine-card .vitrine-box .is-many .card-carousel-dot.is-active { width: clamp(8px, 4.8cqw, 16px); }
.product-card-wrap.vitrine-card .vitrine-box .is-dense { gap: 1.5px; gap: clamp(1px, 0.7cqw, 3px); }
.product-card-wrap.vitrine-card .vitrine-box .is-dense .card-carousel-dot { width: clamp(2px, 1.3cqw, 5px); height: clamp(2px, 1.3cqw, 5px); }
.product-card-wrap.vitrine-card .vitrine-box .is-dense .card-carousel-dot.is-active { width: clamp(6px, 3.6cqw, 12px); }

/* ---------- لبهٔ شیشه (باریک) و نقطه‌های طلایی گوشه؛ بدون نوار نور و بدون انعکاس ---------- */
.vitrine-card .vitrine-glass {
  position: absolute;
  z-index: 2;
  inset: 0 0 14% 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  --vt-dot: radial-gradient(circle, var(--vt-gold) 0 1.1px, transparent 1.7px);
  background:
    var(--vt-dot) top 3px left 3px / 6px 6px no-repeat,
    var(--vt-dot) top 3px right 3px / 6px 6px no-repeat,
    var(--vt-dot) bottom 3px left 3px / 6px 6px no-repeat,
    var(--vt-dot) bottom 3px right 3px / 6px 6px no-repeat,
    radial-gradient(125% 100% at 50% 4%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0) 34%,
      rgba(160, 178, 200, 0) 58%,
      rgba(160, 178, 200, 0.42) 100%);
}

/* حرکت آرام بالا و پایین (۴ ثانیه، ۴px) — فقط کارت داخل صفحه (js: is-inview) */
.vitrine-card.is-inview .vitrine-slide.is-float img {
  animation: vitrine-float 4s ease-in-out infinite;
}
.vitrine-card .vitrine-slide.is-float.has-bbox::after {
  top: min(var(--vt-shadow-top), 95%);
  bottom: auto;
  left: 0;
  right: 0;
  width: var(--vt-shadow-w);
  height: 4%;
}
.vitrine-card.is-inview .vitrine-slide.is-float::after {
  animation: vitrine-float-shadow 4s ease-in-out infinite;
}
@keyframes vitrine-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-4px / var(--vt-s, 1))); }
}
@keyframes vitrine-float-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.9); opacity: 0.75; }
}

/* ---------- ۵. پایه ---------- */
.vitrine-card .vitrine-plinth {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 0;
  height: 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 6px;
  background: linear-gradient(180deg, var(--vt-navy-2) 0%, var(--vt-navy) 70%, #081b2a 100%);
  border-top: 1px solid var(--vt-gold-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.product-card-wrap.vitrine-card .vitrine-plinth .product-price,
.product-grid .product-card-wrap.vitrine-card .vitrine-plinth .product-price {
  margin: 0;
  color: #e6c77a;
  font-weight: 800;
  font-size: 13px;
  font-size: clamp(10px, 6cqw, 18px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

/* برند روی پایه: فقط در «ویترین جمع‌وجور» دیده می‌شود (پایین، ببینید) */
.vitrine-card .vitrine-brand-base { display: none; }

/* ---------- ۷. زیر جعبه: اسم، تخفیف، رنگ، امتیاز ---------- */
.product-card-wrap.vitrine-card .vitrine-info {
  padding: 9px 2px 0;
  padding: clamp(6px, 4cqw, 12px) clamp(1px, 1cqw, 4px) 0;
}
.product-card-wrap.vitrine-card .vitrine-info .product-name,
.product-grid .product-card-wrap.vitrine-card .vitrine-info .product-name {
  margin-bottom: 4px;
  font-size: 13px;
  font-size: clamp(11.5px, 6.2cqw, 15px);
  line-height: 1.6;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.product-card-wrap.vitrine-card .vitrine-compare-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-bottom: 4px;
}
.product-card-wrap.vitrine-card .vitrine-compare-row .product-compare-price {
  font-size: clamp(10.5px, 5cqw, 13px);
}
.product-card-wrap.vitrine-card .vitrine-compare-row .discount-badge {
  color: var(--vt-red);
  font-size: clamp(10.5px, 5cqw, 13px);
  font-weight: 800;
}
.product-card-wrap.vitrine-card .card-color-dots { margin: 2px 0 4px; }

/* ردیف پایین: قلب یک طرف، سبد طرف دیگر — بیرون از شیشه */
.product-card-wrap.vitrine-card .vitrine-actions {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-card-wrap.vitrine-card .vitrine-actions .fav-btn,
.product-card-wrap.vitrine-card .vitrine-actions .cart-add-btn {
  position: static;
  inset: auto;
  top: auto;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

/* ---------- نمای «تکی» موبایل: کارت پهن، ویترین وسط با حداکثر عرض ---------- */
@media (max-width: 899px) {
  .product-grid.view-list .product-card-wrap.vitrine-card .vitrine-box {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
  }
}

/* کارت در صفحه‌های بزرگ: حرکت hover قبلی (translateY) می‌ماند؛ فقط سایه پررنگ‌تر */
@media (hover: hover) {
  .product-card-wrap.vitrine-card:hover .vitrine-box {
    box-shadow: 0 2px 4px rgba(13, 40, 61, 0.12), 0 14px 30px rgba(13, 40, 61, 0.18);
  }
}

/* ============================================================
   «ویترین جمع‌وجور» — نمای دوستونهٔ موبایل و چندستونهٔ لپ‌تاپ (۲۰۲۶-۱۰-۱۸)
   نمای «تکی» موبایل (.view-list زیر ۹۰۰px) دست نمی‌خورد. همین قانون‌ها برای دو
   شرط تکرار شده‌اند: (الف) ≥۹۰۰px همه، (ب) <۹۰۰px هر گریدی که view-list نیست.
   پلاک برند حذف؛ برند روی پایه؛ پایه ~۱۲٪؛ لبه‌ها ۲–۳px؛ جعبه ۱:۱٫۳.
   ============================================================ */
@media (min-width: 900px) {
  /* ============================================================
     «ویترین جمع‌وجور» — نمای دوستونهٔ موبایل و چندستونهٔ لپ‌تاپ (۲۰۲۶-۱۰-۱۸)
     نمای «تکی» موبایل (.view-list زیر ۹۰۰px) دست نمی‌خورد. همین قانون‌ها برای دو
     شرط تکرار شده‌اند: (الف) ≥۹۰۰px همه، (ب) <۹۰۰px هر گریدی که view-list نیست.
     پلاک برند حذف؛ برند روی پایه؛ پایه ~۱۲٪؛ لبه‌ها ۲–۳px؛ جعبه ۱:۱٫۳.
     ============================================================ */
  .product-grid .product-card-wrap.vitrine-card .vitrine-box { aspect-ratio: 1 / 1.3; }
  .product-grid .product-card-wrap.vitrine-card .vitrine-plaque { display: none; }
  .product-grid .product-card-wrap.vitrine-card .vitrine-sale-badge {
    top: 5px;
    top: clamp(4px, 2.4cqw, 9px);
    inset-inline-start: 5px;
    inset-inline-start: clamp(4px, 2.6cqw, 10px);
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-stage { top: 3px; bottom: 12%; }
  .product-grid .product-card-wrap.vitrine-card .vitrine-glass {
    inset: 0 0 12% 0;
    /* بدون پلاک، هایلایت سفید بالای شیشه روی محصول می‌افتد ⇒ کم‌رنگ‌تر */
    background:
      var(--vt-dot) top 3px left 3px / 6px 6px no-repeat,
      var(--vt-dot) top 3px right 3px / 6px 6px no-repeat,
      var(--vt-dot) bottom 3px left 3px / 6px 6px no-repeat,
      var(--vt-dot) bottom 3px right 3px / 6px 6px no-repeat,
      radial-gradient(125% 100% at 50% 4%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 34%, rgba(160, 178, 200, 0) 58%, rgba(160, 178, 200, 0.32) 100%);
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth {
    height: 12%;
    flex-direction: column;
    gap: 1px;
    padding-inline: 4px;
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-brand-base {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: rgba(230, 199, 122, 0.78);
    font-weight: 700;
    font-size: 7px;
    font-size: clamp(6.5px, 3.3cqw, 10px);
    line-height: 1.1;
    letter-spacing: 0.24em;
    text-align: center;
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-brand-base.is-long { letter-spacing: 0.12em; }
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-brand-base.is-xlong { letter-spacing: 0.03em; }
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-brand-base.is-fa { letter-spacing: normal; }
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth .product-price {
    font-size: 11px;
    font-size: clamp(9.5px, 5.4cqw, 15px);
    line-height: 1.15;
  }
}
@media (max-width: 899px) {
  /* ============================================================
     «ویترین جمع‌وجور» — نمای دوستونهٔ موبایل و چندستونهٔ لپ‌تاپ (۲۰۲۶-۱۰-۱۸)
     نمای «تکی» موبایل (.view-list زیر ۹۰۰px) دست نمی‌خورد. همین قانون‌ها برای دو
     شرط تکرار شده‌اند: (الف) ≥۹۰۰px همه، (ب) <۹۰۰px هر گریدی که view-list نیست.
     پلاک برند حذف؛ برند روی پایه؛ پایه ~۱۲٪؛ لبه‌ها ۲–۳px؛ جعبه ۱:۱٫۳.
     ============================================================ */
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-box { aspect-ratio: 1 / 1.3; }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plaque { display: none; }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-sale-badge {
    top: 5px;
    top: clamp(4px, 2.4cqw, 9px);
    inset-inline-start: 5px;
    inset-inline-start: clamp(4px, 2.6cqw, 10px);
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-stage { top: 3px; bottom: 12%; }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-glass {
    inset: 0 0 12% 0;
    /* بدون پلاک، هایلایت سفید بالای شیشه روی محصول می‌افتد ⇒ کم‌رنگ‌تر */
    background:
      var(--vt-dot) top 3px left 3px / 6px 6px no-repeat,
      var(--vt-dot) top 3px right 3px / 6px 6px no-repeat,
      var(--vt-dot) bottom 3px left 3px / 6px 6px no-repeat,
      var(--vt-dot) bottom 3px right 3px / 6px 6px no-repeat,
      radial-gradient(125% 100% at 50% 4%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 34%, rgba(160, 178, 200, 0) 58%, rgba(160, 178, 200, 0.32) 100%);
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth {
    height: 12%;
    flex-direction: column;
    gap: 1px;
    padding-inline: 4px;
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-brand-base {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: rgba(230, 199, 122, 0.78);
    font-weight: 700;
    font-size: 7px;
    font-size: clamp(6.5px, 3.3cqw, 10px);
    line-height: 1.1;
    letter-spacing: 0.24em;
    text-align: center;
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-brand-base.is-long { letter-spacing: 0.12em; }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-brand-base.is-xlong { letter-spacing: 0.03em; }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-brand-base.is-fa { letter-spacing: normal; }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth .product-price {
    font-size: 11px;
    font-size: clamp(9.5px, 5.4cqw, 15px);
    line-height: 1.15;
  }
  /* فاصلهٔ بین کارت‌ها ~۱۰px */
  .product-grid.view-grid { gap: 10px; }
}
@media (max-width: 700px) {
  /* padding کارت بیرونی (نئومورفیک style.css: 9px 9px 12px) نصف */
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card { padding: 4.5px 4.5px 6px; }
}

/* ---------- ۹. کاهش حرکت: بدون حرکت معلق و بدون انیمیشن زوم ---------- */
@media (prefers-reduced-motion: reduce) {
  .vitrine-card.is-inview .vitrine-slide.is-float img,
  .vitrine-card.is-inview .vitrine-slide.is-float::after {
    animation: none;
  }
  .product-card-wrap.vitrine-card .vitrine-box .vitrine-slide img { transition: none; }
}

/* ============================================================
   «ویترین تمام‌قاب» — نمای دوستونه و چندستونه (۲۰۲۶-۱۰-۲۱، Claude Code)
   بعد از «ویترین جمع‌وجور» می‌آید و فقط آن را تکمیل می‌کند؛ نمای «تکی» موبایل
   و صفحهٔ محصول دست نمی‌خورند. ناحیهٔ زیر کارت (اسم، تخفیف متنی، رنگ‌ها،
   ردیف دکمه‌ها) حذف می‌شود: قلب روی شیشه، سبد روی پایه، قیمت قبلی روی پایه.
   همان قانون‌ها دو بار (≥۹۰۰px همه؛ <۹۰۰px غیر view-list) مثل بخش قبل.
   ============================================================ */
.vitrine-card .vitrine-compare-base { display: none; }
@media (min-width: 900px) {
  /* کارت = فقط ویترین: بدون سطح/سایه/padding نئومورفیک بیرونی (حاشیهٔ قرمز روی همین wrap می‌ماند) */
  .product-grid .product-card-wrap.vitrine-card {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 16px;
    --vt-plinth: 14%;
    --vt-plinth: 22.5cqw;
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-box { aspect-ratio: 1 / 1.5; }
  .product-grid .product-card-wrap.vitrine-card .vitrine-stage { bottom: var(--vt-plinth); }
  .product-grid .product-card-wrap.vitrine-card .vitrine-glass { inset: 0 0 var(--vt-plinth) 0; }
  /* برچسب تخفیف: گوشهٔ بالا-راست (شروع خط در RTL) مثل قبل */
  /* پایه: برند، قیمت قبلی خط‌خورده (فقط تخفیف ≥۵٪)، قیمت؛ سمت چپ جای دکمهٔ سبد */
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth {
    height: var(--vt-plinth);
    gap: 1px;
    padding-inline: 6px;
    padding-left: 38px;
    padding-left: clamp(34px, 21cqw, 46px);
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-brand-base {
    color: #e6c77a;
    font-size: 7.5px;
    font-size: clamp(7px, 3.9cqw, 11px);
    line-height: 1.2;
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-compare-base {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: rgba(244, 246, 249, 0.78);
    font-weight: 600;
    font-size: 9px;
    font-size: clamp(8.5px, 4.6cqw, 12.5px);
    line-height: 1.2;
    text-decoration: line-through;
    text-decoration-color: rgba(244, 246, 249, 0.75);
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth .product-price.is-tight,
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-compare-base.is-tight { font-size: clamp(8px, 4.6cqw, 13px); }
  .product-grid .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-compare-base.is-tight { font-size: clamp(7.5px, 4cqw, 11px); }

  /* اسم، تخفیف متنی، نقطه‌های رنگ و امتیاز زیر کارت: از دید پنهان، در DOM (صفحه‌خوان/جستجو) */
  .product-grid .product-card-wrap.vitrine-card .vitrine-info {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* دکمه‌ها روی ویترین: لایهٔ هم‌اندازهٔ جعبه که خودش کلیک نمی‌گیرد */
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions {
    position: absolute;
    inset: 0;
    z-index: 6;
    margin: 0;
    padding: 0;
    display: block;
    pointer-events: none;
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions .fav-btn,
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions .cart-add-btn {
    position: absolute;
    inset: auto;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    background: transparent !important;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    touch-action: manipulation;
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions .fav-btn::before,
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions .cart-add-btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: auto;
    width: 28px;
    height: 28px;
    width: clamp(24px, 14.5cqw, 34px);
    height: clamp(24px, 14.5cqw, 34px);
    border-radius: 50%;
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions .fav-btn,
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions .cart-add-btn { isolation: isolate; }
  /* قلب: گوشهٔ بالا-چپ شیشه، دایرهٔ کوچک مات (بدون backdrop-filter برای اسکرول روان) */
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions .fav-btn {
    top: 0;
    left: 0;
    color: var(--vt-navy);
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions .fav-btn::before {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--vt-gold-soft);
    box-shadow: 0 1px 3px rgba(13, 40, 61, 0.16);
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions .fav-btn.is-favorited { color: #e0455a; }
  /* سبد: روی پایه، کنار قیمت، آیکون طلایی */
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions .cart-add-btn {
    left: 0;
    left: clamp(0px, 1cqw, 4px);
    bottom: calc((var(--vt-plinth) - 40px) / 2);
    color: #e6c77a;
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions .cart-add-btn::before {
    border: 1px solid rgba(216, 180, 106, 0.55);
    background: rgba(255, 255, 255, 0.04);
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-actions svg {
    width: 15px;
    height: 15px;
    width: clamp(13px, 8cqw, 19px);
    height: clamp(13px, 8cqw, 19px);
  }

  /* قاب عکس مدل‌دار: js اندازهٔ قاب را هم‌نسبت خود عکس می‌گذارد ⇒ هیچ بخشی از عکس بریده نمی‌شود */
  .product-grid .product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-frame .vt-frame {
    left: var(--vt-frame-l, 6%);
    top: var(--vt-frame-t, 3%);
    width: var(--vt-frame-w, 88%);
    height: var(--vt-frame-h, 94%);
  }
  .product-grid .product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-frame img { object-fit: contain; }
}
@media (max-width: 899px) {
  /* کارت = فقط ویترین: بدون سطح/سایه/padding نئومورفیک بیرونی (حاشیهٔ قرمز روی همین wrap می‌ماند) */
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 16px;
    --vt-plinth: 14%;
    --vt-plinth: 22.5cqw;
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-box { aspect-ratio: 1 / 1.5; }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-stage { bottom: var(--vt-plinth); }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-glass { inset: 0 0 var(--vt-plinth) 0; }
  /* برچسب تخفیف: گوشهٔ بالا-راست (شروع خط در RTL) مثل قبل */
  /* پایه: برند، قیمت قبلی خط‌خورده (فقط تخفیف ≥۵٪)، قیمت؛ سمت چپ جای دکمهٔ سبد */
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth {
    height: var(--vt-plinth);
    gap: 1px;
    padding-inline: 6px;
    padding-left: 38px;
    padding-left: clamp(34px, 21cqw, 46px);
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-brand-base {
    color: #e6c77a;
    font-size: 7.5px;
    font-size: clamp(7px, 3.9cqw, 11px);
    line-height: 1.2;
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-compare-base {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: rgba(244, 246, 249, 0.78);
    font-weight: 600;
    font-size: 9px;
    font-size: clamp(8.5px, 4.6cqw, 12.5px);
    line-height: 1.2;
    text-decoration: line-through;
    text-decoration-color: rgba(244, 246, 249, 0.75);
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth .product-price.is-tight,
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-compare-base.is-tight { font-size: clamp(8px, 4.6cqw, 13px); }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-plinth .vitrine-compare-base.is-tight { font-size: clamp(7.5px, 4cqw, 11px); }

  /* اسم، تخفیف متنی، نقطه‌های رنگ و امتیاز زیر کارت: از دید پنهان، در DOM (صفحه‌خوان/جستجو) */
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-info {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* دکمه‌ها روی ویترین: لایهٔ هم‌اندازهٔ جعبه که خودش کلیک نمی‌گیرد */
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions {
    position: absolute;
    inset: 0;
    z-index: 6;
    margin: 0;
    padding: 0;
    display: block;
    pointer-events: none;
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions .fav-btn,
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions .cart-add-btn {
    position: absolute;
    inset: auto;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    background: transparent !important;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    touch-action: manipulation;
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions .fav-btn::before,
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions .cart-add-btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: auto;
    width: 28px;
    height: 28px;
    width: clamp(24px, 14.5cqw, 34px);
    height: clamp(24px, 14.5cqw, 34px);
    border-radius: 50%;
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions .fav-btn,
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions .cart-add-btn { isolation: isolate; }
  /* قلب: گوشهٔ بالا-چپ شیشه، دایرهٔ کوچک مات (بدون backdrop-filter برای اسکرول روان) */
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions .fav-btn {
    top: 0;
    left: 0;
    color: var(--vt-navy);
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions .fav-btn::before {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--vt-gold-soft);
    box-shadow: 0 1px 3px rgba(13, 40, 61, 0.16);
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions .fav-btn.is-favorited { color: #e0455a; }
  /* سبد: روی پایه، کنار قیمت، آیکون طلایی */
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions .cart-add-btn {
    left: 0;
    left: clamp(0px, 1cqw, 4px);
    bottom: calc((var(--vt-plinth) - 40px) / 2);
    color: #e6c77a;
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions .cart-add-btn::before {
    border: 1px solid rgba(216, 180, 106, 0.55);
    background: rgba(255, 255, 255, 0.04);
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-actions svg {
    width: 15px;
    height: 15px;
    width: clamp(13px, 8cqw, 19px);
    height: clamp(13px, 8cqw, 19px);
  }

  /* قاب عکس مدل‌دار: js اندازهٔ قاب را هم‌نسبت خود عکس می‌گذارد ⇒ هیچ بخشی از عکس بریده نمی‌شود */
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-frame .vt-frame {
    left: var(--vt-frame-l, 6%);
    top: var(--vt-frame-t, 3%);
    width: var(--vt-frame-w, 88%);
    height: var(--vt-frame-h, 94%);
  }
  .product-grid:not(.view-list) .product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-frame img { object-fit: contain; }
}

/* ============================================================
   سرعت و اسکرول روان (۲۰۲۶-۱۰-۲۱، Claude Code) — فقط گریدهای محصول
   (کارت ویترینی هیرو صفحهٔ اصلی .sh-vcard بیرون از .product-grid است و دست نمی‌خورد).
   ============================================================ */
/* اسلایدهایی که هنوز بارگذاری نشده‌اند (data-src) آیکون عکس خراب نشان ندهند */
.vitrine-card .vitrine-slide img:not([src]) { visibility: hidden; }
/* محصول ثابت: بدون حرکت شناور دائمی (همهٔ نماها، شامل تکی) */
.product-grid .vitrine-card.is-inview .vitrine-slide.is-float img,
.product-grid .vitrine-card.is-inview .vitrine-slide.is-float::after { animation: none; }
/* سایهٔ تک‌لایه به‌جای چندلایه؛ بدون backdrop-filter (پرهزینه در Safari آیفون) */
.product-grid .product-card-wrap.vitrine-card .vitrine-box {
  box-shadow: 0 6px 16px rgba(13, 40, 61, 0.15);
  contain: paint;
}
@media (hover: hover) {
  .product-grid .product-card-wrap.vitrine-card:hover .vitrine-box { box-shadow: 0 12px 26px rgba(13, 40, 61, 0.2); }
}
.product-grid .product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-frame .vt-frame {
  box-shadow: 0 0 0 1px rgba(13, 40, 61, 0.14), 0 4px 10px rgba(13, 40, 61, 0.2);
}
.product-grid .vitrine-card .vitrine-plaque {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.82);
}
.product-grid .product-card-wrap.vitrine-card .fav-btn,
.product-grid .product-card-wrap.vitrine-card .cart-add-btn {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ============================================================
   کادر امن در نمای «تکی» هم (۲۰۲۶-۱۰-۲۱ ب، Claude Code): قاب عکس مدل‌دار هم‌نسبت
   خود عکس (contain) در همهٔ نماهای گرید؛ js همان زوم ۹۴٪ و کادر امن را می‌دهد.
   هیروی صفحهٔ اصلی (.sh-vcard بیرون از .product-grid) دست نمی‌خورد.
   ============================================================ */
.product-grid .product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-frame .vt-frame {
  left: var(--vt-frame-l, 6%);
  top: var(--vt-frame-t, 3%);
  width: var(--vt-frame-w, 88%);
  height: var(--vt-frame-h, 94%);
}
.product-grid .product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-frame img { object-fit: contain; }

/* ============================================================
   بدون مستطیل روشن در کارت‌ها (۲۰۲۶-۱۰-۲۱ ب، Claude Code) — همهٔ نماهای گرید
   ماسک مستطیلِ نرم: کادر امن محصول (js: --vt-mk-*، +۱٫۵٪) کاملاً مات، بیرونش ۷٪ محو
   ⇒ لبهٔ کاشی خاکستری/سفید داخل خود عکس دیده نمی‌شود؛ محصول هیچ‌جا محو یا بریده نمی‌شود.
   هیروی صفحهٔ اصلی (.sh-vcard) همان ماسک بیضی قبلی را دارد.
   ============================================================ */
.product-grid .product-card-wrap.vitrine-card .vitrine-box .vitrine-slide.is-float.has-bbox img {
  -webkit-mask-image:
    linear-gradient(to right, transparent calc(var(--vt-mk-x0) - var(--vt-mk-fx)), #000 var(--vt-mk-x0), #000 var(--vt-mk-x1), transparent calc(var(--vt-mk-x1) + var(--vt-mk-fx))),
    linear-gradient(to bottom, transparent calc(var(--vt-mk-y0) - var(--vt-mk-fy)), #000 var(--vt-mk-y0), #000 var(--vt-mk-y1), transparent calc(var(--vt-mk-y1) + var(--vt-mk-fy)));
  mask-image:
    linear-gradient(to right, transparent calc(var(--vt-mk-x0) - var(--vt-mk-fx)), #000 var(--vt-mk-x0), #000 var(--vt-mk-x1), transparent calc(var(--vt-mk-x1) + var(--vt-mk-fx))),
    linear-gradient(to bottom, transparent calc(var(--vt-mk-y0) - var(--vt-mk-fy)), #000 var(--vt-mk-y0), #000 var(--vt-mk-y1), transparent calc(var(--vt-mk-y1) + var(--vt-mk-fy)));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}