/* ============================================================
   تاس بریز — کارت محصول و کارت دسته‌بندی
   روی قالب Loop Item المنتور (.e-loop-item) سوار می‌شود.
   استفاده: فروشگاه، صفحه‌ی اصلی، دسته‌بندی‌ها
   ------------------------------------------------------------
   نکته‌ی مهم برای ویرایش‌های بعدی:
   قانون پایه‌ی دکمه سلکتورِ سه‌کلاسه دارد
   (.elementor-widget-woocommerce-product-add-to-cart .button).
   هر بازنویسی — مخصوصاً داخل مدیا-کوئری — باید همین سلکتور را
   هم در لیست داشته باشد، وگرنه با اینکه !important دارد، به‌خاطر
   خاص‌بودنِ کمتر می‌بازد و بی‌اثر می‌ماند.
   ============================================================ */

.e-loop-item {
  --w:        #722F37;
  --w-deep:   #4E1F26;
  --w-tint:   #FBF4F5;
  --cream:    #FDFBF8;
  --ink:      #1A1A1A;
  --ink-3:    #8C867D;
  --line:     #EFE7DA;

  font-family: 'Vazirmatn', 'YekanBakh', Tahoma, sans-serif;
  font-feature-settings: 'ss01', 'tnum';
}

/* ── بدنه‌ی کارت ─────────────────────────────────────────────
   background-color، نه شورت‌هندِ background: شورت‌هند
   background-image را ریست می‌کند و کارت‌های دسته‌بندی که
   تصویرشان background-image روی خود کانتینر است سفید می‌شوند. */
.e-loop-item > .elementor-element {
  position: relative;
  height: 100%;
  background-color: rgba(255,255,255,.82) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(26,26,26,.03),
    0 10px 28px -16px rgba(26,26,26,.16);
  transition: transform .26s cubic-bezier(.32,.72,0,1),
              box-shadow .26s ease,
              border-color .26s ease;
}
@media (hover: hover) and (pointer: fine) {
  .e-loop-item > .elementor-element:hover {
    transform: translateY(-4px);
    border-color: rgba(114,47,55,.22) !important;
    box-shadow:
      0 2px 4px rgba(26,26,26,.04),
      0 20px 40px -18px rgba(114,47,55,.32);
  }
}

/* ── تصویر محصول ───────────────────────────────────────────
   سقف ارتفاع لازم است: با aspect-ratio تنها، روی کارت ۳۷۲
   پیکسلیِ صفحه‌ی اصلی تصویر ۳۶۰ پیکسل می‌شد و کارت ۶۱۲ پیکسل. */
.e-loop-item .elementor-widget-theme-post-featured-image {
  overflow: hidden;
  background-color: var(--cream);
}
.e-loop-item .elementor-widget-theme-post-featured-image img {
  width: 100%;
  max-height: 180px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 6px;
  transition: transform .35s cubic-bezier(.32,.72,0,1);
}
@media (hover: hover) and (pointer: fine) {
  .e-loop-item:hover .elementor-widget-theme-post-featured-image img { transform: scale(1.05); }
}

/* ── عنوان: دقیقاً دو خط، بقیه با «…» ──────────────────────
   دو سه کلمه‌ی اول اسم محصول مهم است؛ بقیه بیشتر برای جستجوست.
   min و max برابرند تا کارت‌ها هم‌قد بمانند.                 */
.e-loop-item .elementor-widget-woocommerce-product-title,
.e-loop-item .elementor-widget-woocommerce-product-title * {
  font-family: inherit !important;
}
.e-loop-item .elementor-widget-woocommerce-product-title h1,
.e-loop-item .elementor-widget-woocommerce-product-title h2,
.e-loop-item .elementor-widget-woocommerce-product-title h3,
.e-loop-item .elementor-widget-woocommerce-product-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.75 !important;
  color: var(--ink) !important;
  min-height: 3.5em;
  max-height: 3.5em;
  text-decoration: none;
  transition: color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .e-loop-item:hover .elementor-widget-woocommerce-product-title a { color: var(--w) !important; }
}

/* ── قیمت ───────────────────────────────────────────────────
   flex برای جابه‌جایی ترتیب (قیمت جدید اول). nowrap روی خودِ
   مبلغ لازم است وگرنه «۷۴۰.۰۰۰ تومان» وسط کلمه می‌شکند.     */
.e-loop-item .elementor-widget-woocommerce-product-price .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  font-family: inherit;
}
/* nowrap روی همه‌ی لایه‌ها لازم است: مبلغ داخل bdiهای تو در تو
   می‌آید و اگر فقط روی .price باشد، «تومان» باز هم به خط بعد
   می‌افتد. */
.e-loop-item .price .woocommerce-Price-amount,
.e-loop-item .price bdi,
.e-loop-item .price del,
.e-loop-item .price ins,
.e-loop-item .price .woocommerce-Price-currencySymbol {
  white-space: nowrap;
  word-break: keep-all;
}

.e-loop-item .price del {
  order: 2;
  font-size: 11.5px !important;
  color: var(--ink-3) !important;
  text-decoration: line-through;
  opacity: 1;
}
.e-loop-item .price ins,
.e-loop-item .price ins bdi,
.e-loop-item .price > .woocommerce-Price-amount,
.e-loop-item .price > .woocommerce-Price-amount bdi {
  background: none;
  text-decoration: none;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}

/* نشان درصد تخفیف — از فیلتر PHP در tasberiz-storefront.php */
.tb-off {
  order: 3;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: var(--w);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}

/* ── متن اقساط (شورت‌کد) ────────────────────────────────── */
.e-loop-item .elementor-widget-shortcode {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  line-height: 1.8;
}

/* ── دکمه‌ی افزودن به سبد ───────────────────────────────────
   رنگ زرد #FFE500 از رنگ سراسری المنتور می‌آید.
   .elementor-button عمداً در این لیست نیست — دکمه‌ی «نمایش همه»
   کارت‌های دسته‌بندی هم همان کلاس را دارد و تمام‌عرض می‌شد.  */
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart .button,
.e-loop-item a.add_to_cart_button,
.e-loop-item button.add_to_cart_button,
.e-loop-item .cart button,
.e-loop-item .cart .button {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin-inline: auto !important;
  padding: 11px 12px !important;
  border: none !important;
  border-radius: 11px !important;
  background-color: var(--w) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.8 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(114,47,55,.8);
  transition: background-color .2s, transform .12s;
}
@media (hover: hover) and (pointer: fine) {
  .e-loop-item .elementor-widget-woocommerce-product-add-to-cart .button:hover,
  .e-loop-item a.add_to_cart_button:hover,
  .e-loop-item button.add_to_cart_button:hover,
  .e-loop-item .cart button:hover,
  .e-loop-item .cart .button:hover { background-color: var(--w-deep) !important; }
}
.e-loop-item .add_to_cart_button:active { transform: translateY(1px); }

.e-loop-item form.cart,
.e-loop-item .cart.e-loop-add-to-cart-form { width: 100%; text-align: center !important; }

.e-loop-item .added_to_cart {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--w);
  text-align: center;
  text-decoration: none;
}
.e-loop-item .add_to_cart_button.loading { opacity: .65; }

/* ── کارت دسته‌بندی: دکمه‌ی کوچکِ پایین-راست ───────────────── */
.e-loop-item .elementor-widget-button .elementor-button,
.e-loop-item a.elementor-button {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background-color: var(--w) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.8 !important;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(114,47,55,.75);
}
/* دکمه در گوشه‌ی پایین-راستِ کارت، با موقعیت مطلق.
   با جریان عادیِ flex، جای دکمه به قدِ بقیه‌ی ویجت‌ها بستگی
   داشت: روی موبایل که بنر کوتاه می‌شود، درست زیر عنوانِ
   داخلِ تصویر می‌افتاد. حالا همیشه گوشه است.
   inset-inline-end در RTL یعنی سمت چپ، پس start می‌خواهیم. */
.e-loop-item .elementor-widget-button {
  position: absolute;
  inset-block-end: 22px;
  inset-inline-start: 26px;
  z-index: 3;
  margin: 0;
  width: auto !important;
}

/* ════════════════════ موبایل ════════════════════
   اندازه‌گیری با canvas روی Vazirmatn وزن ۷۰۰:
   «افزودن به سبد خرید» در ۱۱px = ۸۸px عرض.
   عرض داخلی دکمه روی کارت ~۱۵۵ پیکسلی ≈ ۱۳۹px،
   پس با پدینگ ۸px×۲ یک‌خطی جا می‌شود.              */
@media (max-width: 720px) {
  .e-loop-item > .elementor-element { border-radius: 14px !important; }

  .e-loop-item .elementor-widget-theme-post-featured-image img {
    max-height: 105px;
    padding: 3px;
  }

  .e-loop-item .elementor-widget-woocommerce-product-title h1,
  .e-loop-item .elementor-widget-woocommerce-product-title h2,
  .e-loop-item .elementor-widget-woocommerce-product-title h3,
  .e-loop-item .elementor-widget-woocommerce-product-title a {
    font-size: 11.5px !important;
  }

  .e-loop-item .price ins,
  .e-loop-item .price ins bdi,
  .e-loop-item .price > .woocommerce-Price-amount,
  .e-loop-item .price > .woocommerce-Price-amount bdi { font-size: 12.5px !important; }
  .e-loop-item .price del { font-size: 10.5px !important; }
  .tb-off { font-size: 9.5px; padding: 2px 6px; }
  .e-loop-item .elementor-widget-shortcode { font-size: 10px !important; }

  .e-loop-item .elementor-widget-woocommerce-product-add-to-cart .button,
  .e-loop-item a.add_to_cart_button,
  .e-loop-item button.add_to_cart_button,
  .e-loop-item .cart button,
  .e-loop-item .cart .button {
    padding: 9px 8px !important;
    font-size: 11px !important;
    border-radius: 9px !important;
  }

  .e-loop-item .elementor-widget-button .elementor-button,
  .e-loop-item a.elementor-button {
    padding: 6px 14px !important;
    font-size: 11px !important;
  }
  .e-loop-item .elementor-widget-button {
    inset-block-end: 14px;
    inset-inline-start: 16px;
  }
}

@media (max-width: 400px) {
  .e-loop-item .elementor-widget-theme-post-featured-image img { max-height: 92px; }
  .e-loop-item .elementor-widget-woocommerce-product-title h1,
  .e-loop-item .elementor-widget-woocommerce-product-title h2,
  .e-loop-item .elementor-widget-woocommerce-product-title h3,
  .e-loop-item .elementor-widget-woocommerce-product-title a { font-size: 11px !important; }

  .e-loop-item .elementor-widget-woocommerce-product-add-to-cart .button,
  .e-loop-item a.add_to_cart_button,
  .e-loop-item button.add_to_cart_button,
  .e-loop-item .cart button,
  .e-loop-item .cart .button {
    padding: 8px 6px !important;
    font-size: 10px !important;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .e-loop-item > .elementor-element { background-color: #fff !important; }
}

@media (prefers-reduced-motion: reduce) {
  .e-loop-item > .elementor-element,
  .e-loop-item .elementor-widget-theme-post-featured-image img { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   رفع پرش کاروسل هنگام لود
   ------------------------------------------------------------
   حلقه‌های محصول با Swiper کار می‌کنند. تا وقتی جاوااسکریپت
   Swiper اجرا نشده، ظرف کلاس .swiper دارد ولی .swiper-initialized
   ندارد و اسلایدها به‌صورت گریدِ تمام‌عرض رندر می‌شوند — همان
   کارت غول‌پیکری که وسط صفحه دیده می‌شد.

   این قوانین فقط در همان بازه اعمال می‌شوند و به محض init
   خودبه‌خود کنار می‌روند.
   ════════════════════════════════════════════════════════════ */
.elementor-loop-container.swiper:not(.swiper-initialized) {
  display: flex !important;
  overflow: hidden !important;
  max-height: 480px;
}
.elementor-loop-container.swiper:not(.swiper-initialized) > .swiper-wrapper {
  display: flex !important;
  width: 100%;
  gap: 16px;
}
.elementor-loop-container.swiper:not(.swiper-initialized) .swiper-slide,
.elementor-loop-container.swiper:not(.swiper-initialized) .e-loop-item {
  flex: 0 0 calc(25% - 12px) !important;
  max-width: calc(25% - 12px) !important;
}

@media (max-width: 1024px) {
  .elementor-loop-container.swiper:not(.swiper-initialized) .swiper-slide,
  .elementor-loop-container.swiper:not(.swiper-initialized) .e-loop-item {
    flex: 0 0 calc(33.333% - 11px) !important;
    max-width: calc(33.333% - 11px) !important;
  }
}

@media (max-width: 720px) {
  .elementor-loop-container.swiper:not(.swiper-initialized) { max-height: 340px; }
  .elementor-loop-container.swiper:not(.swiper-initialized) > .swiper-wrapper { gap: 10px; }
  .elementor-loop-container.swiper:not(.swiper-initialized) .swiper-slide,
  .elementor-loop-container.swiper:not(.swiper-initialized) .e-loop-item {
    flex: 0 0 calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   چیدمان کارت به سبک سایت مرجع (bzbzi)
   ------------------------------------------------------------
   ردیف پایین کارت دو ویجت کنار هم دارد: قیمت و افزودن‌به‌سبد.
   در قالب Loop المنتور این دو، خواهرِ هم داخل یک e-con-full
   هستند؛ پس بدون دست‌زدن به قالب، فقط با flex می‌شود کنار هم
   چیدشان: قیمت راست، دکمه‌ی آیکونی چپ.

   :has() لازم است تا فقط همان کانتینری که دکمه دارد ردیف شود،
   نه همه‌ی کانتینرهای کارت. مرورگرهای قدیمی که پشتیبانی نکنند،
   چیدمان قبلی (ستونی) را می‌بینند — یعنی افت زیبایی، نه خرابی.
   ════════════════════════════════════════════════════════════ */
.e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart),
.e-loop-item .e-con:has(> .elementor-widget-woocommerce-product-add-to-cart) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
  width: 100%;
}

/* ── قیمت: بلوک سمت راست ─────────────────────────────────── */
.e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart)
  .elementor-widget-woocommerce-product-price {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}
.e-loop-item .elementor-widget-woocommerce-product-price .price {
  justify-content: flex-start;
  align-items: baseline;
}

/* ── دکمه: مربع آیکونی سمت چپ ────────────────────────────── */
.e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart)
  .elementor-widget-woocommerce-product-add-to-cart {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
}
.e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart) form.cart,
.e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart) .cart.e-loop-add-to-cart-form {
  width: auto !important;
}

.e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart) .elementor-widget-woocommerce-product-add-to-cart .button,
.e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart) a.add_to_cart_button,
.e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart) button.add_to_cart_button,
.e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart) .cart button {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 13px !important;
  /* متن دکمه پنهان می‌شود ولی برای صفحه‌خوان و ووکامرس سر جایش
     می‌ماند — با font-size: 0 نه display: none.              */
  font-size: 0 !important;
  line-height: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}

/* ── قیمت دو ردیفه، مثل مرجع ──────────────────────────────── */
.e-loop-item .elementor-widget-woocommerce-product-price .price {
  flex-wrap: wrap;
  gap: 3px 6px;
}
.e-loop-item .price del  { order: 2; flex: 0 0 auto; }
.e-loop-item .tb-off     { order: 1; }
.e-loop-item .price ins,
.e-loop-item .price > .woocommerce-Price-amount { order: 3; flex: 1 0 100%; }

@media (max-width: 720px) {
  .e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart) { gap: 6px; }
  .e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart) .elementor-widget-woocommerce-product-add-to-cart .button,
  .e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart) a.add_to_cart_button,
  .e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart) button.add_to_cart_button,
  .e-loop-item .e-con-full:has(> .elementor-widget-woocommerce-product-add-to-cart) .cart button {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    background-size: 17px 17px !important;
  }
}