/*
Theme Name: Digiland Child
Theme URI: https://mahdisweb.net/product/digiland
Description: چایلد تم قالب دیجی‌لند - سفارشی‌سازی‌شده برای هماهنگی با هویت بصری برند ویتراسل
Author: Mahdisweb
Author URI: http://www.mahdisweb.net
Template: mweb-digiland-pro
Version: 1.2.0
Text Domain: mweb
*/

/* ==========================================================================
   یکپارچه‌سازی رنگ برند ویتراسل
   --------------------------------------------------------------------------
   قالب اصلی (mweb-digiland-pro) رنگ‌های سایت را از طریق متغیرهای CSS در
   :root کنترل می‌کند (--maincolor، --cartcolor و ...). این مقادیر باید از
   پنل «دیجی‌لند ← تنظیمات ظاهری ← رنگ‌بندی» پر شوند، اما در حال حاضر همه‌ی
   آن فیلدها خالی هستند و در نتیجه سایت به رنگ‌های پیش‌فرض دموی «دیجی‌لند»
   (آبی/سبز/قرمز) برمی‌گردد.

   این بلوک با اولویت بالاتر (چون فایل چایلدتم بعد از فایل تم اصلی لود
   می‌شود) همان متغیرها را به پالت رسمی برند ویتراسل بازتعریف می‌کند، بدون
   نیاز به هیچ تغییری در دیتابیس. اگر بعداً مقادیر را در پیشخوان هم پر
   کنید مشکلی پیش نمی‌آید — این بلوک همچنان به‌عنوان تضمین یکپارچگی برند
   باقی می‌ماند.

   منبع رنگ‌ها: فایل رسمی لوگوی برند (logo.svg) که مستقیماً از آن استخراج
   شده — یعنی این رنگ‌ها دیگر تخمینی نیستند:
     - بنفش اصلی برند:  #6B25F2
     - رنگ متن/جوهر:    #14033D
   (نسخه‌ی قبلی این فایل از رنگ نزدیک #7C3AED استفاده می‌کرد که تقریب
   خود صفحه محصول بود، نه رنگ دقیق فایل منبع لوگو.)
   ========================================================================== */

:root {
  /* رنگ اصلی برند (بنفش) — دکمه‌های اصلی، تب فعال، لینک‌های برجسته، سربرگ */
  --maincolor: #6B25F2 !important;

  /* رنگ فرعی — برای برچسب/تخفیف همچنان قابل تفکیک نگه داشته شده */
  --secondcolor: #EE273A;

  /* پس‌زمینه عمومی سایت */
  --bgcolor: #F3F0FB;

  /* رنگ متن/آیکون سربرگ روی زمینه روشن */
  --headcolor: #ffffff;

  /* فوتر — دقیقاً همان رنگ جوهری/تیره‌ی فایل لوگو */
  --footcolor: #14033D !important;
  --foottxcolor: #ffffff;

  /* دکمه «افزودن به سبد خرید» و آیکون سبد خرید هدر — قبلاً سبز پیش‌فرض بود */
  --cartcolor: #6B25F2 !important;
  --headcartcolor: #6B25F2 !important;

  /* پس‌زمینه بخش پیشنهادها/آفرها */
  --offbgcolor: #480BBE;

  /* رنگ کمکی صفحه محصول — جایگزین فیروزه‌ای که خارج از خانواده برند بود */
  --vs-accent: #A855F7;
}

/* پالت اختصاصی صفحه محصول را از حالت «فقط چند صفحه محدود» به کل سایت تعمیم می‌دهیم
   تا هر بخشی از قالب که از این توکن‌ها استفاده کند هم با برند هماهنگ بماند. */
:root,
.vs-product-template,
.vs-product-hero,
.vs-product-details {
  --vs-primary: #6B25F2;
  --vs-primary-dark: #480BBE;
  --vs-accent: #A855F7;
  --vs-surface: #ffffff;
  --vs-page: #F7F7FB;
  --vs-text: #14033D;
  --vs-muted: #6F6A7E;
  --vs-border: #E9E5F2;
  --vs-radius: 16px;
}

/* ---- هدر و نوار ابزار موبایل (این‌ها از طریق فیلدهای جدا کنترل می‌شوند، نه --maincolor) ---- */
.head_mobile {
  background-color: #14033D !important;
}
.head_mobile .hs_icon {
  color: #ffffff !important;
}
.toolbar_mobile:before,
.toolbar_mobile:after {
  background-color: #6B25F2 !important;
}
.sticky_toolbar_footer.mfoot_2 svg,
.sticky_toolbar_footer.mfoot_1 svg {
  fill: #6B25F2 !important;
}
.toolbar_item {
  color: #14033D;
}

/* ---- اصلاح ناهماهنگی رنگ بردکرامب/لینک‌های مسیر ----
   در بررسی مشخص شد رنگ پیش‌فرض تم برای بردکرامب خاکستری (#555) است اما در
   عمل آبی نمایش داده می‌شود (احتمالاً به‌خاطر یک استایل مرورگر پیش‌فرض یا
   افزونه‌ی دیگر که بعد از CSS تم لود می‌شود). این قانون با اولویت بالا رنگ
   را ثابت و هماهنگ با برند می‌کند. */
.woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb a,
.woocommerce #content .woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb a,
.breadcrumb a,
.breadcrumbs a {
  color: #14033D !important;
  text-decoration: none !important;
}
.woocommerce-breadcrumb a:hover,
.breadcrumb a:hover,
.breadcrumbs a:hover {
  color: #6B25F2 !important;
}

/* ---- دکمه‌های عمومی/پیشنهادی که مستقیم رنگ سبز/قرمز دارند (نه از طریق متغیر) ---- */
.woocommerce .product .cart .single_add_to_cart_button.disabled {
  background-color: #B9AEDB;
}

/* حالت hover دکمه افزودن به سبد خرید هماهنگ با نسخه تیره‌تر برند */
.woocommerce .entry-summary .cart .single_add_to_cart_button:hover {
  background-color: var(--vs-primary-dark, #480BBE) !important;
}

/* ---- لوگو ----
   اندازه‌ی لوگو از طریق قانون موجود در تم اصلی (.logo img{max-height:80px})
   به‌صورت خودکار و واکنش‌گرا کنترل می‌شود؛ نیازی به قانون اضافه نیست. */


/* ==========================================================================
   بازطراحی کارت محصول (Product Card) — فاز ۱ ریدیزاین بر اساس رفرنس‌های PDF
   --------------------------------------------------------------------------
   کارت گردشده و سایه‌دار، تصویر مربعی با پس‌زمینه‌ی روشن برند، آیکون‌های
   علاقه‌مندی/مقایسه شناور روی گوشه‌ی تصویر (جابه‌جایی DOM سبک در functions.php)،
   برچسب درصد تخفیف خودکار (فقط وقتی محصول قیمت ویژه داشته باشد)، عنوان
   دو خطی و قیمت برجسته با رنگ برند. مارک‌آپ/دیتای محصول تغییر نکرده،
   فقط نمایش با CSS و یک اسکریپت کوچک بازآرایی شده است.
   ========================================================================== */

.products .product { padding: 6px !important; }

.products .product .item-area {
  display: flex !important;
  flex-direction: column !important;
  background: var(--vs-surface, #fff) !important;
  border: 1px solid var(--vs-border, #E9E5F2) !important;
  border-radius: var(--vs-radius, 16px) !important;
  padding: 0 0 14px !important;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.products .product .item-area:hover {
  box-shadow: 0 12px 28px rgba(20, 3, 61, 0.12);
  border-color: var(--vs-primary, #6B25F2);
  transform: translateY(-3px);
}

.products .product .product-image-area {
  position: relative !important;
  aspect-ratio: 1 / 1;
  background: var(--vs-surface, #fff) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 !important;
}
.products .product .product-image-area .product-image {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.products .product .product-image-area img {
  width: 76% !important; height: 76% !important;
  object-fit: contain;
  transition: transform .35s ease;
}
.products .product .item-area:hover .product-image-area img { transform: scale(1.06); }

.products .product .product-detail-area {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 0 !important;
  flex: 1;
}

.products .product .product-name {
  order: 1;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--vs-text, #14033D);
  margin: 4px 0 6px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;
}
.products .product .product-name a { color: inherit; }

.products .product .price {
  order: 2;
  margin: 4px 0 10px !important;
  font-size: 15px;
  font-weight: 800;
  color: var(--vs-primary, #6B25F2);
}
.products .product .price del {
  color: #9A93AE;
  font-weight: 400;
  font-size: 12px;
  opacity: .85;
  margin-inline-start: 6px;
}
.products .product .price del .woocommerce-Price-amount { color: inherit; }
.products .product .price ins { text-decoration: none; color: var(--secondcolor, #EE273A); }

.products .product .actions { order: 3; margin-top: 2px; }
.products .product .add-to-links {
  display: flex; justify-content: flex-start; align-items: center;
  gap: 8px; list-style: none; margin: 0; padding: 0;
}
.products .product .add-to-links > li:empty { display: none; }

/* آیکون‌های علاقه‌مندی/مقایسه: شناور روی گوشه‌ی بالا-راست تصویر */
.products .product .add_to_wishlist_wrap,
.products .product .compare-button {
  position: absolute;
  z-index: 2;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20,3,61,.15);
  display: flex; align-items: center; justify-content: center;
  margin: 0 !important;
}
.products .product .add_to_wishlist_wrap { top: 10px; right: 10px; }
.products .product .compare-button { top: 50px; right: 10px; }
.products .product .add_to_wishlist_wrap a,
.products .product .compare-button a {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.products .product .add_to_wishlist_wrap svg,
.products .product .compare-button svg { width: 15px; height: 15px; fill: var(--vs-text, #14033D); }
.products .product .add_to_wishlist_wrap:hover svg,
.products .product .compare-button:hover svg { fill: var(--vs-primary, #6B25F2); }

/* دکمه‌ی سبد خرید */
.products .product .add-to-cart-wrap a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--vs-primary, #6B25F2) !important;
  box-shadow: 0 4px 12px rgba(107,37,242,.3);
  display: flex; align-items: center; justify-content: center;
}
.products .product .add-to-cart-wrap svg { width: 15px; height: 15px; fill: #fff !important; }

/* برچسب درصد تخفیف (توسط اسکریپت اضافه می‌شود، فقط وقتی محصول تخفیف داشته باشد) */
.vs-discount-badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  background: var(--secondcolor, #EE273A);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 20px;
  line-height: 1.4;
  pointer-events: none;
}

@media (max-width: 480px) {
  .products .product .add_to_wishlist_wrap,
  .products .product .compare-button { width: 26px; height: 26px; }
  .products .product .compare-button { top: 42px; }
  .vs-discount-badge { font-size: 10px; padding: 3px 7px; }
}


/* بج ارسال سریع (فاز ۱-ب) */
.products .product .product-image-area::after {
  content: "ارسال سریع";
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  background: #fff;
  color: var(--vs-text, #14033D);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(20,3,61,.15);
  pointer-events: none;
}
@media (max-width: 480px) {
  .products .product .product-image-area::after { font-size: 9px; padding: 3px 7px; }
}


/* محصولات ناموجود (فاز ۱-ج) */
.products .product .null_price {
  order: 2;
  margin: 4px 0 10px !important;
  min-height: 22px;
}
.products .product .null_price:empty::after {
  content: "ناموجود";
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--vs-muted, #6F6A7E);
  background: var(--vs-page, #F7F7FB);
  padding: 4px 12px;
  border-radius: 20px;
}
.products .product.outofstock .add-to-cart-wrap a {
  background: #C9C4DA !important;
  box-shadow: none !important;
}
.products .product.outofstock .add-to-cart-wrap svg {
  fill: #7A7488 !important;
}


/* چینش سه‌تایی کارت‌ها در دسکتاپ (فاز ۲) */
@media (min-width: 992px) {
  .products .product.col-lg-3 {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
}