/* ==========================================================================
   AraShop — معماری‌های صفحه‌ی تک‌محصول (Product Page Engine)
   ---------------------------------------------------------
   این فایل فقط چیدمان/Grid/Sticky/Responsive صفحه‌ی تک‌محصول را می‌سازد.
   استایل اجزای مشترک (گالری، عنوان، قیمت، موجودی، فرم افزودن به سبد،
   تب‌ها، محصولات مرتبط) در assets/css/shop.css است و اینجا دوباره
   تعریف نمی‌شود — فقط ناحیه‌بندی و نسبت ستون‌ها فرق می‌کند.

   ساختار مشترک (Shared) بین هر ۴ معماری:
     .ara-product-hero
       ├─ .ara-pp-gallery-area    (گالری)
       ├─ .ara-pp-headline-area   (نام، دسته‌بندی، امتیاز)
       ├─ .ara-pp-purchase-area   (پنل خرید — Sticky)
       └─ .ara-pp-body-area       (توضیح کوتاه، مخاطب، ویژگی‌ها)

   نسبت ستون‌ها/تراکم بصری فقط با کلاس ara-layout-* روی ریشه فرق دارد؛
   هیچ‌کدام از ۴ معماری کد یا فایل مستقل ندارند.
   ========================================================================== */

/* =========================================================
   1) عرض صفحه
   ---------------------------------------------------------
   صفحه‌ی تک‌محصول کمی از کانتینر استاندارد سایت عریض‌تر است (حدود ۹۰٪ عرض
   صفحه، ~۵٪ فاصله از هر طرف) تا هم گالری هم پنل خرید فضای بهتری داشته باشند.
   ========================================================= */
.ara-woo-single.ara-container{
  width:90%;
  max-width:1520px;
}
@media (max-width:1023px){
  .ara-woo-single.ara-container{
    width:100%;
    max-width:var(--ara-container);
  }
}

.ara-product-page{ margin-top:var(--ara-s6); min-width:0; }

/* =========================================================
   2) Grid اصلی — چهار ناحیه با Grid Areas
   ---------------------------------------------------------
   موبایل/تبلت: تک‌ستونه با ترتیب واقعیِ UX (نه صرفاً Stack کردن دسکتاپ):
   گالری ← نام/دسته/امتیاز ← خرید (قیمت/موجودی/تنوع/تعداد/دکمه) ← توضیح کوتاه.
   ========================================================= */
.ara-product-hero{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "gallery"
    "headline"
    "purchase"
    "body";
  gap:var(--ara-s5);
  align-items:start;
}
.ara-pp-gallery-area{ grid-area:gallery; min-width:0; }
.ara-pp-headline-area{ grid-area:headline; min-width:0; }
.ara-pp-purchase-area{ grid-area:purchase; min-width:0; }
.ara-pp-body-area{ grid-area:body; min-width:0; }

/* دسکتاپ: دو ستون — نسبت هرکدام بر اساس معماری انتخاب‌شده فرق می‌کند. */
@media (min-width:1024px){
  .ara-product-hero{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:2%;
    row-gap:var(--ara-s6);
    grid-template-areas:
      "gallery   purchase"
      "headline  purchase"
      "body      purchase";
  }

  /* نسبت ستون گالری/محتوا به پنل خرید، به تفکیک هر معماری PDP */
  .ara-layout-physical_standard .ara-product-hero{ grid-template-columns:76% minmax(0,1fr); }
  .ara-layout-physical_conversion .ara-product-hero{ grid-template-columns:70% minmax(0,1fr); }
  .ara-layout-digital_standard .ara-product-hero{ grid-template-columns:72% minmax(0,1fr); }
  .ara-layout-digital_content .ara-product-hero{ grid-template-columns:72% minmax(0,1fr); }

  /* پنل خرید چسبان — فقط تا پایان بخش اصلی محصول (محدوده‌ی خودِ همین Grid)،
     هیچ‌وقت روی هدر/فوتر/تب‌ها/محصولات مرتبط نمی‌افتد چون این‌ها بیرون از
     .ara-product-hero هستند و از نظر CSS ناحیه‌ی این عنصر همان سلول Grid آن است. */
  body:not(.ara-pp-sticky-off) .ara-pp-purchase-area{
    position:sticky;
    top:calc(var(--ara-header-h) + 20px);
  }
}

/* =========================================================
   3) پنل خرید (Purchase Card)
   ========================================================= */
.ara-purchase-card{
  display:flex; flex-direction:column;
  padding:var(--ara-s6);
  border-radius:var(--ara-r-xl);
  background:var(--ara-glass-bg); border:1px solid var(--ara-glass-line-soft);
  box-shadow:var(--ara-e1), inset 0 1px 0 var(--ara-glass-inner);
}
.ara-purchase-card > *:not(:first-child){
  margin-top:var(--ara-s4); padding-top:var(--ara-s4);
  border-top:1px solid var(--ara-glass-line-soft);
}
/* قیمت حالا آخرین آیتم باکس خرید است (نه اولین)، پس دیگر نیازی به حذف
   حاشیه/خط‌جداکننده‌ی بالای آن نیست — طبق قانون :not(:first-child) بالا،
   خودش به‌طور طبیعی یک خط جداکننده از محتوای بالایش می‌گیرد. */

/* =========================================================
   4) سربرگ محصول (نام / دسته‌بندی / امتیاز)
   ========================================================= */
.ara-pp-headline-area .product_title{ margin-top:0; }
.ara-pp-cat-rating{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--ara-s3);
  margin:0 0 var(--ara-s4); font-size:var(--ara-fs-sm); color:var(--ara-ink-soft);
}
.ara-pp-cats a{ color:var(--ara-ink-soft); text-decoration:none; }
.ara-pp-cats a:hover{ color:var(--ara-primary); }
.ara-pp-rating{ display:inline-flex; text-decoration:none; }

/* امتیاز + تعداد خریداران — یک خط ترکیبی داخل پنل خرید (بدون تکرار امتیاز) */
.ara-pp-rating-sales{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:var(--ara-fs-xs); color:var(--ara-ink-mute);
}
.ara-pp-rating-sales-sep{ color:var(--ara-ink-mute); }
.ara-pp-sales-count-text{ color:var(--ara-primary); font-weight:700; }

/* =========================================================
   5) بدنه‌ی محتوا (توضیح کوتاه / مخاطب / ویژگی‌ها)
   ========================================================= */
.ara-pp-value-prop .woocommerce-product-details__short-description{
  padding-bottom:0; margin-bottom:0; border-bottom:0;
}
.ara-pp-section{
  margin-top:var(--ara-s5); padding-top:var(--ara-s5);
  border-top:1px solid var(--ara-glass-line-soft);
}
.ara-pp-section h3{ font-size:var(--ara-fs-lg); font-weight:800; margin:0 0 var(--ara-s3); color:var(--ara-ink); }
.ara-pp-section p{ font-size:var(--ara-fs-sm); color:var(--ara-ink-soft); line-height:1.9; margin:0; }

.ara-pp-features{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:var(--ara-s2) var(--ara-s4);
}
.ara-pp-features li{ display:flex; align-items:center; gap:9px; font-size:var(--ara-fs-sm); color:var(--ara-ink-soft); }
.ara-pp-features svg{ width:18px; height:18px; flex:0 0 auto; color:var(--ara-success); }

/* =========================================================
   6) اطلاعات ارسال / دسترسی دیجیتال / تعداد فروش — داخل پنل خرید
   ========================================================= */
.ara-pp-shipping{
  display:flex; align-items:center; gap:9px;
  font-size:var(--ara-fs-xs); font-weight:600; color:var(--ara-ink-soft);
}
.ara-pp-shipping svg{ width:19px; height:19px; flex:0 0 auto; color:var(--ara-primary); }

.ara-pp-digital-info{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ara-pp-digital-info li{ display:flex; align-items:center; gap:9px; font-size:var(--ara-fs-xs); font-weight:600; color:var(--ara-ink-soft); }
.ara-pp-digital-info svg{ width:19px; height:19px; flex:0 0 auto; color:var(--ara-primary); }

.ara-pp-sales-count{
  display:flex; align-items:center; gap:8px;
  font-size:var(--ara-fs-xs); color:var(--ara-ink-mute);
}
.ara-pp-sales-count svg{ width:17px; height:17px; flex:0 0 auto; color:var(--ara-accent); }

/* =========================================================
   7) نوار خرید چسبان موبایل — حالت ناموجود
   ========================================================= */
.ara-product-stickybar-oos{ font-weight:800; color:var(--ara-danger); font-size:var(--ara-fs-md); }
.ara-product-stickybar [disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }

/* =========================================================
   8) محصولات مرتبط/مشابه — هماهنگ با معماری جدید
   ========================================================= */
.ara-product-page .related.products,
.ara-product-page .upsells.products{
  margin-top:var(--ara-s8); padding-top:0; border-top:0;
}
.ara-product-page .related.products > h2,
.ara-product-page .upsells.products > h2{
  font-size:var(--ara-fs-xl); font-weight:800; margin:0 0 var(--ara-s5); color:var(--ara-ink);
}
/* کارت‌ها هم‌اندازه با ارتفاع کنترل‌شده (grid پایه از shop.css به ارث می‌رسد) */
.ara-product-page .related.products ul.products > li.product,
.ara-product-page .upsells.products ul.products > li.product{ height:100%; }

@media (max-width:767px){
  /* حالت پیش‌فرض: اسکرول افقی — بدون تداخل با نوار خرید چسبان پایین صفحه */
  body.ara-related-mobile-scroll .ara-product-page .related.products ul.products,
  body.ara-related-mobile-scroll .ara-product-page .upsells.products ul.products{
    display:flex!important; grid-template-columns:none;
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:var(--ara-s3); margin:0!important; padding:2px 2px var(--ara-s2)!important;
    scrollbar-width:none;
  }
  body.ara-related-mobile-scroll .ara-product-page .related.products ul.products::-webkit-scrollbar,
  body.ara-related-mobile-scroll .ara-product-page .upsells.products ul.products::-webkit-scrollbar{ display:none; }
  body.ara-related-mobile-scroll .ara-product-page .related.products ul.products > li.product,
  body.ara-related-mobile-scroll .ara-product-page .upsells.products ul.products > li.product{
    flex:0 0 auto; width:64%; scroll-snap-align:start;
  }

  /* حالت جایگزین: شبکه‌ی دوستونه (از تنظیمات پوسته قابل انتخاب) */
  body.ara-related-mobile-grid .ara-product-page .related.products ul.products,
  body.ara-related-mobile-grid .ara-product-page .upsells.products ul.products{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* =========================================================
   9) موبایل — فاصله‌ها و اندازه‌های ظریف‌تر
   ========================================================= */
@media (max-width:767px){
  .ara-product-hero{ gap:var(--ara-s4); }
  .ara-purchase-card{ padding:var(--ara-s4); }
  .ara-pp-cat-rating{ margin-bottom:var(--ara-s3); }
  .ara-pp-section{ margin-top:var(--ara-s4); padding-top:var(--ara-s4); }
}

/* =========================================================
   10) دسترس‌پذیری — فوکوس قابل مشاهده روی عناصر تعاملی پنل خرید
   ========================================================= */
.ara-purchase-card a:focus-visible,
.ara-purchase-card button:focus-visible,
.ara-purchase-card select:focus-visible,
.ara-purchase-card input:focus-visible{
  outline:2px solid var(--ara-primary); outline-offset:2px;
}

/* =========================================================
   11) بازطراحی فاصله‌گذاری/سلسله‌مراتب پنل خرید
   ---------------------------------------------------------
   همه‌ی قوانین این بخش عمداً از shop.css اختصاصی‌تر هستند (پیشوند
   .ara-product-page) تا override کنند بدون این‌که استایل مشترک/عمومی
   shop.css (که در آرشیو/کارت محصول هم استفاده می‌شود) تغییر کند.
   ========================================================= */

/* 11.1) فاصله‌گذاری فشرده‌تر داخل پنل خرید */
.ara-product-page .ara-purchase-card{ padding:var(--ara-s5); gap:0; }
.ara-product-page .ara-purchase-card > *:not(:first-child){
  margin-top:var(--ara-s3); padding-top:var(--ara-s3);
}
.ara-product-page .ara-purchase-card form.cart{ margin-bottom:0; gap:var(--ara-s2); }
.ara-product-page .ara-product-assurance{ margin-top:var(--ara-s3); padding-top:var(--ara-s3); }

/* 11.2) حذف نشان «موجود» — فقط هشدار ناموجودی باقی می‌ماند
   (important عمداً، تا هیچ استایل دیگری آن را برنگرداند.) */
.ara-product-page .stock.in-stock,
.ara-product-page p.stock.in-stock,
.ara-product-page .woocommerce-variation .stock.in-stock{
  display:none !important;
}

/* 11.3) بلوک قیمت: چیده‌شده عمودی — قیمت قبلی کوچک/بالا، قیمت نهایی بزرگ/پررنگ/پایین */
.ara-product-page div.product p.price,
.ara-product-page div.product span.price{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:2px; flex-wrap:nowrap;
}
.ara-product-page div.product p.price del{
  font-size:var(--ara-fs-xs); font-weight:400; color:var(--ara-ink-mute);
  order:1; margin:0;
}
.ara-product-page div.product p.price ins{
  order:2; font-size:var(--ara-fs-2xl); font-weight:800; text-decoration:none;
}

/* 11.4) جابه‌جایی انتخاب‌گر تعداد: زیر بلوک قیمت، بالای دکمه‌ی خرید
   (با تبدیل form.cart به چیدمان عمودی؛ تعداد پیش از دکمه در DOM است) */
.ara-product-page .ara-purchase-card form.cart{
  display:flex; flex-direction:column; align-items:stretch;
}
.ara-product-page .ara-purchase-card form.cart .quantity{ align-self:flex-start; }
.ara-product-page .ara-purchase-card form.cart .single_add_to_cart_button{
  flex:0 0 auto; width:100%;
}

/* 11.5) تایپوگرافی دکمه‌ی خرید — فقط وزن/اندازه‌ی فونت، رنگ/اندازه/padding دکمه دست‌نخورده */
.ara-product-page .ara-purchase-card form.cart .single_add_to_cart_button{
  font-weight:900; font-size:var(--ara-fs-base);
}

/* 11.6) ردیف ضمانت‌ها — چیدمان عمودی (آیکن بالا، متن پایین، هم‌ارتفاع، بدون شکستن خط) */
.ara-product-page .ara-product-assurance{
  grid-template-columns:repeat(3, minmax(0,1fr));
  align-items:stretch;
}
.ara-product-page .ara-product-assurance li{
  flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; gap:6px;
  font-size:10.5px; line-height:1.25; white-space:nowrap;
}
.ara-product-page .ara-product-assurance svg{ width:26px; height:26px; padding:6px; }

/* 11.7) حذف خط «شناسه محصول» فقط از نمایش (در دیتابیس/بک‌اند دست‌نخورده می‌ماند) */
.ara-product-page .product_meta .sku_wrapper{ display:none; }

/* 11.8) حذف دسته‌بندی تکراری — دسته‌بندی فقط کنار عنوان می‌ماند (ara-pp-cat-rating) */
.ara-product-page .product_meta .posted_in{ display:none; }

/* 11.9) قاب تصویر اصلی — ارتفاع ثابت، مستقل از نسبت ابعاد خودِ عکس و از
   عرض ستون، تا اندازه‌ی قاب همیشه یکسان بماند. خودِ عکس با
   object-fit:contain داخلش جا می‌شود، بدون برش/کش‌آمدگی. */
.ara-product-page .ara-product-gallery-wrap{ max-width:460px; margin-inline:auto; }
.ara-product-page .woocommerce-product-gallery__wrapper{ height:420px; }
.ara-product-page .woocommerce-product-gallery__image{
  height:420px; max-height:none; aspect-ratio:auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--ara-glass-bg-soft);
}
.ara-product-page .woocommerce-product-gallery img{
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  object-fit:contain; aspect-ratio:auto;
}
@media (max-width:767px){
  .ara-product-page .woocommerce-product-gallery__wrapper,
  .ara-product-page .woocommerce-product-gallery__image{ height:300px; }
}

/* تصاویر کوچک (Thumbnails) — مربعی و هم‌اندازه، کلیک برای تعویض تصویر اصلی
   همان رفتار پیش‌فرض ووکامرس (flexslider) است، دست‌نخورده؛ فقط مربعی‌شدن
   تصویر داخل آن اضافه شده (اندازه‌ی ردیف از shop.css می‌آید). */
.ara-product-page .flex-control-thumbs img{
  aspect-ratio:1/1; width:100%; height:auto; object-fit:cover;
}

/* 11.11) فونت بزرگ‌تر برای متن تب توضیحات (line-height نسبتی، خودش با فونت هماهنگ می‌ماند) */
.ara-product-page .woocommerce-tabs .panel{
  font-size:var(--ara-fs-md); line-height:1.95;
}

@media (max-width:359px){
  /* گوشی‌های خیلی باریک: کمی تنگ‌تر تا سه ستون بدون شکستن خط جا شوند */
  .ara-product-page .ara-product-assurance li{ font-size:9.5px; gap:4px; }
  .ara-product-page .ara-product-assurance svg{ width:22px; height:22px; padding:5px; }
}