/* Webrra Store — Elementor widgets (اسلایدر محصول، لوپ گرید، باکس مقالات)
   کارت محصول استایل خودش را از product-cards.css می‌گیرد؛ اینجا فقط چیدمان است. */

.webrra-store,
.webrra-store *,
.webrra-store *::before,
.webrra-store *::after {
  box-sizing: border-box;
}

.webrra-store {
  width: 100%;
  max-width: 100%;
}

.webrra-store .added_to_cart {
  display: none !important;
}

/* ---------------- اسلایدر ---------------- */
.webrra-store-slider {
  --wss-per: 4;
  --wss-gap: 12px;
  --wss-pad-x: 10px;
  --wss-offset: 0px;
  position: relative;
  width: 100%;
  max-width: 100%;
}

.webrra-store-stage {
  position: relative;
}

/* padding عمودی سخاوتمند = فضای امن کامل برای سایهٔ هاور (0 15px 34px) تا هیچ بریدگی‌ای نماند.
   padding افقی کوچک‌تر از gap است تا کارت بعدی پیدا نشود ولی سایهٔ لبه هم جا شود. */
.webrra-store-viewport {
  overflow: hidden;
  width: 100%;
  padding: 36px var(--wss-pad-x) 48px;
  padding-inline-start: calc(var(--wss-pad-x) + var(--wss-offset));
}

.webrra-store-track {
  display: flex;
  gap: var(--wss-gap);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* عرض هر اسلاید بر اساس «تعداد در نمایش» تنظیم می‌شود تا روی هر دیوایس
   دقیقاً همان تعداد جا شود (کارت داخلش کامل پر می‌کند). */
.webrra-store-slide {
  flex: 0 0 calc((100% - (var(--wss-per) - 1) * var(--wss-gap)) / var(--wss-per));
  max-width: calc((100% - (var(--wss-per) - 1) * var(--wss-gap)) / var(--wss-per));
  min-width: 0;
}

/* کارت محصول داخل ویجت‌ها ستون را کامل پر می‌کند (طرح کارت بدون تغییر می‌ماند). */
.webrra-store .webrra-product-card {
  max-width: none;
  width: 100%;
}

/* فلش‌ها — عمودی روی مرکز کارت با ۵۰٪ (خودش با ارتفاع کارت تطبیق می‌یابد) */
.webrra-store-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(0, 113, 227, .16);
  border-radius: 50%;
  color: #0071e3;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 113, 227, .16);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, opacity .2s ease, color .2s ease;
}

.webrra-store-arrow:hover {
  background: #0071e3;
  color: #fff;
  box-shadow: 0 12px 26px rgba(0, 113, 227, .28);
}

.webrra-store-arrow svg {
  width: 22px;
  height: 22px;
}

.webrra-store-arrow.is-prev {
  right: 2px;
}

.webrra-store-arrow.is-next {
  left: 2px;
}

.webrra-store-arrow[disabled] {
  opacity: .32;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

/* نقطه‌ها */
.webrra-store-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
}

.webrra-store-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c7d6ea;
  cursor: pointer;
  transition: width .22s ease, background .22s ease;
}

.webrra-store-dots button.is-active {
  width: 22px;
  border-radius: 6px;
  background: #0071e3;
}

/* ---------------- گرید محصول ---------------- */
.webrra-store-grid {
  --wsg-cols: 4;
  --wsg-gap: 12px;
  --wsg-offset: 0px;
  display: grid;
  grid-template-columns: repeat(var(--wsg-cols), minmax(0, 1fr));
  gap: var(--wsg-gap);
  justify-content: stretch;
  align-items: stretch;
  padding-inline-start: var(--wsg-offset);
  padding-block: 4px;
}

/* ---------------- پیام خالی ---------------- */
.webrra-store-empty {
  padding: 16px 18px;
  border: 1px dashed #cfe0f5;
  border-radius: 12px;
  background: #f6faff;
  color: #5a6b86;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 480px) {
  .webrra-store-arrow {
    width: 38px;
    height: 38px;
  }

  .webrra-store-arrow svg {
    width: 19px;
    height: 19px;
  }
}

/* ===================================================================
   باکس مقالات — استایل کارت مقاله با برچسب دستهٔ رنگی (مثل نمونهٔ ارسالی)
   =================================================================== */
.webrra-posts-grid {
  --wpg-cols: 3;
  --wpg-gap: 24px;
  --wpg-offset: 0px;
  --wpg-radius: 16px;
  display: grid;
  grid-template-columns: repeat(var(--wpg-cols), minmax(0, 1fr));
  gap: var(--wpg-gap);
  padding-inline-start: var(--wpg-offset);
  align-items: stretch;
}

.webrra-post-card {
  --accent: #ed3636;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e6ebf2;
  border-radius: var(--wpg-radius);
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.webrra-post-card:hover {
  border-color: var(--accent);
  box-shadow: 0 14px 30px rgba(16, 35, 71, .08);
  transform: translateY(-3px);
}

.webrra-post-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 768 / 487;
  background: #f1f5fb;
}

.webrra-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.webrra-post-card:hover .webrra-post-media img {
  transform: scale(1.07);
}

.webrra-post-cat {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 3;
  pointer-events: none;
  padding: 5px 12px;
  border-radius: 8px;
  color: #fff;
  background: var(--accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.7;
}

.webrra-post-body {
  padding: 14px 16px 18px;
}

.webrra-post-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  font-weight: 800;
}

.webrra-post-title a {
  color: #12203a;
  text-decoration: none;
  transition: color .2s ease;
}

.webrra-post-card:hover .webrra-post-title a {
  color: var(--accent);
}

/* لینک کششی: کل کارت با لینک عنوان قابل کلیک می‌شود (بدون تودرتویی لینک) */
.webrra-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

@media (max-width: 1024px) {
  .webrra-posts-grid { --wpg-cols: 2; }
}

@media (max-width: 600px) {
  .webrra-posts-grid { --wpg-cols: 1; }
}

/* ===================================================================
   باکس مقالات بنتو — مقالهٔ شاخص + لیست کناری (حرفه‌ای و ریسپانسیو)
   =================================================================== */
.webrra-blogbento {
  --wbb-accent: #2485e5;
  --wbb-radius: 18px;
  --wbb-gap: 20px;
  width: 100%;
}

.webrra-bento-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.webrra-bento-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #12203a;
  font-size: 18px;
  font-weight: 800;
}

.webrra-bento-head-right svg {
  width: 22px;
  height: 22px;
  color: var(--wbb-accent);
}

.webrra-bento-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wbb-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s ease;
}

.webrra-bento-more svg { width: 16px; height: 16px; }
.webrra-bento-more:hover { opacity: .78; }

.webrra-bento-row {
  --wbb-feature: 1.2fr;
  display: grid;
  grid-template-columns: minmax(0, var(--wbb-feature)) minmax(0, 1fr);
  gap: var(--wbb-gap);
  align-items: stretch;
}

.webrra-bento-row.is-single {
  grid-template-columns: minmax(0, 1fr);
}

/* مقالهٔ شاخص */
.webrra-bento-feature {
  position: relative;
  display: block;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--wbb-radius);
  background: #0d1b30;
  text-decoration: none;
}

.webrra-bento-feature-img {
  position: absolute;
  inset: 0;
  display: block;
}

.webrra-bento-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.webrra-bento-feature:hover .webrra-bento-feature-img img {
  transform: scale(1.05);
}

.webrra-bento-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 14, 28, .92) 0%, rgba(6, 14, 28, .5) 42%, rgba(6, 14, 28, 0) 74%);
}

.webrra-bento-feature-over {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
}

.webrra-bento-feature-over h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 800;
  line-height: 1.7;
}

/* لیست کناری */
.webrra-bento-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.webrra-bento-item {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  padding: 10px;
  border: 1px solid #e9eef5;
  border-radius: var(--wbb-radius);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.webrra-bento-item:hover {
  border-color: var(--wbb-accent);
  box-shadow: 0 10px 24px rgba(16, 35, 71, .07);
}

.webrra-bento-item-img {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--wbb-radius) - 6px);
  aspect-ratio: 4 / 3;
  background: #f1f5fb;
}

.webrra-bento-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.webrra-bento-item:hover .webrra-bento-item-img img {
  transform: scale(1.06);
}

.webrra-bento-item-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.webrra-bento-item-body h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  font-weight: 800;
}

.webrra-bento-item-body h4 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #12203a;
  text-decoration: none;
  transition: color .2s ease;
}

.webrra-bento-item:hover .webrra-bento-item-body h4 a {
  color: var(--wbb-accent);
}

.webrra-bento-item-body p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #6a7893;
  font-size: 12px;
  line-height: 1.9;
}

/* زمان مطالعه روی تصویر آیتم لیست */
.webrra-bento-time {
  position: absolute;
  bottom: 8px;
  inset-inline-start: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  color: #fff;
  background: var(--wbb-accent);
  font-size: 11px;
  font-weight: 800;
}

.webrra-bento-time svg { width: 13px; height: 13px; }
.webrra-bento-time em { font-style: normal; }

/* متادیتا */
.webrra-bento-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.webrra-bento-mi {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6a7893;
  font-size: 12px;
  font-weight: 600;
}

.webrra-bento-mi svg { width: 15px; height: 15px; }
.webrra-bento-meta.is-light .webrra-bento-mi { color: rgba(255, 255, 255, .92); }

.webrra-bento-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.webrra-bento-more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: var(--wbb-accent);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.webrra-bento-more-link svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .webrra-bento-row { grid-template-columns: minmax(0, 1fr); }
  .webrra-bento-feature { min-height: 260px; }
}

@media (max-width: 480px) {
  .webrra-bento-item { grid-template-columns: 96px 1fr; }
  .webrra-bento-feature-over { padding: 16px; }
}

/* ===================================================================
   پیشنهاد شگفت‌انگیز — اسلایدر تک‌محصولی + تایمر + نوار فروش + بندانگشتی
   =================================================================== */
.webrra-amazing {
  --wam-accent: #ef3e56;
  --wam-accent2: #ff7a45;
  --wam-radius: 18px;
}

.webrra-amazing-head {
  margin-bottom: 14px;
}

.webrra-amazing-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 16px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--wam-accent), var(--wam-accent2));
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(239, 62, 86, .22);
}

.webrra-amazing-title svg { width: 20px; height: 20px; color: #fff; }
.webrra-amazing-title a,
.webrra-amazing-title span { color: #fff; text-decoration: none; }

.webrra-amazing-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid #eef2f8;
  border-radius: var(--wam-radius);
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 35, 71, .05);
}

/* اسلایدر اصلی */
.webrra-amazing-main {
  position: relative;
  min-width: 0;
}

.webrra-amazing-viewport {
  overflow: hidden;
  width: 100%;
  padding: 6px;
}

.webrra-amazing-track {
  display: flex;
  will-change: transform;
}

.webrra-amazing-slide {
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: center;
}

/* رسانه */
.webrra-amazing-media {
  position: relative;
}

.webrra-amazing-image {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

.webrra-amazing-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: opacity .4s ease, transform .5s ease;
}

.webrra-amazing-image .wam-img-2 { opacity: 0; }
.webrra-amazing-media:hover .wam-img-2 { opacity: 1; }
.webrra-amazing-media:hover .wam-img-1 { opacity: 0; }

.webrra-amazing-off {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--wam-accent), var(--wam-accent2));
  font-size: 12px;
  font-weight: 800;
}

.webrra-amazing-media .webrra-card-favorite { z-index: 3; }

/* تایمر */
.webrra-amazing-timer {
  position: absolute;
  inset-inline: 0;
  bottom: 8px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 6px;
  direction: ltr;
}

.webrra-amazing-tbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 5px 4px;
  border-radius: 10px;
  color: #fff;
  background: rgba(16, 24, 40, .82);
  backdrop-filter: blur(3px);
}

.webrra-amazing-tbox span { font-size: 15px; font-weight: 800; line-height: 1.2; }
.webrra-amazing-tbox em { font-style: normal; font-size: 10px; opacity: .85; }
.webrra-amazing-timer.is-ended { opacity: .5; }

/* اطلاعات */
.webrra-amazing-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.webrra-amazing-name { margin: 0; font-size: 16px; line-height: 1.85; font-weight: 800; }
.webrra-amazing-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #12203a;
  text-decoration: none;
}
.webrra-amazing-name a:hover { color: var(--wam-accent); }

.webrra-amazing-features { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.webrra-amazing-features li { display: flex; align-items: flex-start; gap: 7px; color: #5a6b86; font-size: 12.5px; line-height: 1.8; }
.webrra-amazing-features li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--wam-accent);
}

.webrra-amazing-price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.webrra-amazing-badge {
  padding: 3px 10px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--wam-accent), var(--wam-accent2));
  font-size: 12px;
  font-weight: 800;
}
.webrra-amazing-price-val { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 800; }
.webrra-amazing-price-val del { color: #9aa7bd; font-weight: 600; }
.webrra-amazing-price-val ins { text-decoration: none; color: var(--wam-accent); }
.webrra-amazing-price-val .amount { color: #12203a; font-size: 17px; }
.webrra-amazing-price-val ins .amount { color: var(--wam-accent); }
.webrra-amazing-price-val .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* نوار فروش */
.webrra-amazing-sale { display: flex; flex-direction: column; gap: 6px; }
.webrra-amazing-sale-bar { height: 8px; border-radius: 999px; background: #edf1f7; overflow: hidden; }
.webrra-amazing-sale-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wam-accent), var(--wam-accent2));
}
.webrra-amazing-sale-stat { display: flex; justify-content: space-between; gap: 10px; color: #6a7893; font-size: 12px; font-weight: 700; }

/* دکمهٔ خرید (بر پایهٔ دکمهٔ کارت، با رنگ تأکید) */
.webrra-amazing .webrra-amazing-cart {
  width: 100%;
  justify-content: center;
  background: linear-gradient(135deg, var(--wam-accent), var(--wam-accent2)) !important;
  border: 0;
}

/* فلش‌ها */
.webrra-amazing-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.webrra-amazing-arrow.is-prev { right: -6px; }
.webrra-amazing-arrow.is-next { left: -6px; }

/* بندانگشتی */
.webrra-amazing-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 420px;
  padding: 2px;
  scrollbar-width: thin;
}
.webrra-amazing-thumb {
  flex: 0 0 auto;
  padding: 4px;
  border: 2px solid #e7edf5;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease;
}
.webrra-amazing-thumb img { display: block; width: 100%; height: auto; border-radius: 8px; }
.webrra-amazing-thumb.is-active { border-color: var(--wam-accent); }

@media (max-width: 992px) {
  .webrra-amazing-body { grid-template-columns: minmax(0, 1fr); }
  .webrra-amazing-thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    order: 2;
  }
  .webrra-amazing-thumb { width: 78px; }
}

@media (max-width: 620px) {
  .webrra-amazing-slide { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .webrra-amazing-tbox { min-width: 40px; }
}

/* ===================================================================
   شگفت‌انگیز عمودی — لیست خودچرخان با تم آبی
   =================================================================== */
.webrra-special {
  --wsv-accent: #0071e3;
  --wsv-accent2: #38a1ff;
  --wsv-radius: 16px;
  width: 100%;
}

.webrra-special-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 16px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--wsv-accent), var(--wsv-accent2));
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0, 113, 227, .22);
}
.webrra-special-head a,
.webrra-special-head span { color: #fff; text-decoration: none; }
.webrra-special-head-badge { display: inline-flex; }
.webrra-special-head-badge svg { width: 18px; height: 18px; }

.webrra-special-slider { --wsv-per: 3; width: 100%; }
.webrra-special-viewport { overflow: hidden; }
.webrra-special-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  will-change: transform;
}

.webrra-special-slide {
  --wsv-h: 182px;
  flex: 0 0 auto;
  height: var(--wsv-h);
}

.webrra-special-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px;
  gap: 14px;
  height: 100%;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #e2edfb;
  border-radius: var(--wsv-radius);
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 113, 227, .06);
}

.webrra-special-detail {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.webrra-special-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--wsv-accent), var(--wsv-accent2));
  font-size: 11px;
  font-weight: 800;
}
.webrra-special-badge svg { width: 13px; height: 13px; }

.webrra-special-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #12203a;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.85;
  text-decoration: none;
}
.webrra-special-title:hover { color: var(--wsv-accent); }

.webrra-special-price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.webrra-special-price-old { display: inline-flex; align-items: center; gap: 7px; }
.webrra-special-price-old .old { color: #9aa7bd; text-decoration: line-through; font-size: 12.5px; }
.webrra-special-price-old .off {
  padding: 2px 8px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, var(--wsv-accent), var(--wsv-accent2));
  font-size: 11px;
  font-weight: 800;
}
.webrra-special-price-now { font-size: 15px; font-weight: 800; color: var(--wsv-accent); }
.webrra-special-price-now .amount { color: var(--wsv-accent); }

/* تایمر */
.webrra-special-timer { margin-top: auto; }
.webrra-special-timer-title { margin-bottom: 5px; color: #6a7893; font-size: 10.5px; font-weight: 700; }
.webrra-special-timer-row { display: inline-flex; align-items: center; gap: 5px; direction: ltr; }
.webrra-special-tbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
  padding: 4px 3px;
  border-radius: 8px;
  color: #fff;
  background: var(--wsv-accent);
}
.webrra-special-tbox span { font-size: 13px; font-weight: 800; line-height: 1.15; }
.webrra-special-tbox em { font-style: normal; font-size: 9px; opacity: .85; }

/* تصویر + موجودی */
.webrra-special-image {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}
.webrra-special-image > img {
  width: 100%;
  height: auto;
  max-height: 118px;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}
.webrra-special-pay {
  position: absolute;
  top: 4px;
  inset-inline-start: 4px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 8px;
  color: #fff;
  background: var(--wsv-accent);
  font-size: 10px;
  font-weight: 800;
}

.webrra-special-stock { margin-top: 8px; }
.webrra-special-stock-num { display: block; text-align: center; color: var(--wsv-accent); font-size: 13px; font-weight: 800; }
.webrra-special-stock-num small { color: #6a7893; font-size: 10px; font-weight: 700; }
.webrra-special-stock-bar { height: 6px; margin: 5px 0; border-radius: 999px; background: #e9f1fd; overflow: hidden; }
.webrra-special-stock-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--wsv-accent), var(--wsv-accent2)); }
.webrra-special-stock-labels { display: flex; justify-content: space-between; color: #6a7893; font-size: 9.5px; font-weight: 700; }

@media (max-width: 600px) {
  .webrra-special-card { grid-template-columns: minmax(0, 1fr) 104px; padding: 12px; }
  .webrra-special-image > img { max-height: 96px; }
  .webrra-special-tbox { min-width: 30px; }
}

/* ===================================================================
   پیشنهاد لحظه‌ای — تک‌کارت مدرن و کرو با نوار پیشرفت
   =================================================================== */
.webrra-instant {
  --win-accent: #e80645;
  --win-accent2: #ff5470;
  --win-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.webrra-instant-card {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin-top: 14px;
  padding: 26px 16px 16px;
  border: 1px solid #eef1f6;
  border-radius: var(--win-radius);
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 35, 71, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.webrra-instant-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(16, 35, 71, .12);
}

.webrra-instant-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--win-accent), var(--win-accent2));
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(232, 6, 69, .26);
}
.webrra-instant-badge svg { width: 15px; height: 15px; }

.webrra-instant-stage { position: relative; }

.webrra-instant-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  transition: opacity .45s ease;
}
.webrra-instant-slide:first-child { position: relative; }
.webrra-instant-slide.is-active { opacity: 1; pointer-events: auto; }

.webrra-instant-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.webrra-instant-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .4s ease, transform .5s ease;
}
.webrra-instant-media .win-img-2 { opacity: 0; }
.webrra-instant-media:hover .win-img-2 { opacity: 1; }
.webrra-instant-media:hover .win-img-1 { opacity: 0; }

.webrra-instant-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.6em;
  color: #12203a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.85;
  text-align: center;
}

.webrra-instant-price {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.webrra-instant-old { color: #9aa7bd; text-decoration: line-through; font-size: 12.5px; }
.webrra-instant-new { color: #12203a; font-size: 15px; font-weight: 800; }
.webrra-instant-new .amount { color: #12203a; }
.webrra-instant-off {
  padding: 3px 9px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--win-accent), var(--win-accent2));
  font-size: 12px;
  font-weight: 800;
}

.webrra-instant-progress {
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: #eef1f6;
  overflow: hidden;
}
.webrra-instant-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--win-accent), var(--win-accent2));
}