/* ═══════════════════════════════════════════════════════
   Zovino — purchase.css
   چیدمان «گرید کارت کمیتی» صفحه محصول
═══════════════════════════════════════════════════════ */

#zv-pp, #zv-pp *{ box-sizing: border-box; }
#zv-pp{
  --blue:#2563EB; --blue-l:#60A5FA; --blue-d:#1D4ED8;
  --navy:#0F172A; --white:#FFFFFF; --slate:#F8FAFC;
  --ink:#0F172A; --sub:#64748B; --muted:#94A3B8;
  --border: rgba(15,23,42,.08);
  --radius: 18px;
  --ff: 'Vazirmatn', sans-serif;

  direction: rtl;
  font-family: var(--ff);
  background: #FFFFFF;
  padding: 28px 0 56px;

  /* سرتاسری (full-bleed) */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  box-sizing: border-box;
}

#zv-pp a{ text-decoration: none; color: inherit; }
#zv-pp .zv-pp-con{ max-width: 1200px; margin: 0 auto; padding: 0 20px; padding-bottom: 12px; }
#zv-pp .zv-psec-slider{
  margin-top: 28px;
}
#zv-pp .zv-glass{
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 8px 30px rgba(15,23,42,.06);
}

/* --- بردکرامب --- */
.zv-pp-breadcrumb{ font-size: 12.5px; color: var(--sub); margin-bottom: 18px; }
.zv-pp-breadcrumb a:hover{ color: var(--blue); }

/* --- چیدمان دو ستونه (راست=اصلی، چپ=Sticky) --- */
.zv-pp-layout{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 26px;
  align-items: start;
}

.zv-pp-title{ font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 20px; }

/* --- گرید کارت‌های بسته --- */
.zv-pp-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.zv-pp-card{
  position: relative;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.zv-pp-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15,23,42,.08); }
.zv-pp-card.is-selected{
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.zv-pp-card-img{
  width: 56px; height: 56px; margin: 0 auto 10px;
  border-radius: 12px; overflow: hidden; background: var(--slate);
  position: relative;
}
.zv-pp-card-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* درصد تخفیف — گوشه چپ بالای کارت (نه داخل عکس) */
.zv-pp-card-discount{
  position: absolute;
  top: 8px;
  left: 8px; /* سمت چپ کارت */
  right: auto;
  z-index: 3;
  background: #DC2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  line-height: 1.3;
  box-shadow: 0 2px 8px rgba(220,38,38,.35);
  white-space: nowrap;
  pointer-events: none;
}

/* کارت ناموجود */
.zv-pp-card.is-out-of-stock{
  opacity: .55;
  pointer-events: none;
  filter: grayscale(.35);
}
.zv-pp-card.is-out-of-stock:hover{
  transform: none;
  box-shadow: none;
}
.zv-pp-oos-label{
  display: inline-block;
  width: 100%;
  padding: 8px 0;
  border-radius: 10px;
  background: rgba(148,163,184,.18);
  color: #64748b;
  font-weight: 800;
  font-size: 13px;
}

.zv-pp-card-amount{
  font-size: 24px; font-weight: 900; color: var(--ink);
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-bottom: 6px;
}
.zv-pp-card-amount.is-multi{
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  line-height: 1.35;
}
.zv-pp-card-attr{
  display: block;
  font-weight: 800;
  color: var(--ink);
}
.zv-pp-card-attr + .zv-pp-card-attr{
  font-size: 13px;
  font-weight: 700;
  color: var(--sub);
}
.zv-pp-card-unit{ font-size: 13px; font-weight: 700; color: var(--sub); }
.zv-pp-card-price{ font-size: 13px; color: var(--blue); font-weight: 700; margin-bottom: 16px; }

.zv-pp-card-price-sale{
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.zv-pp-card-price-sale del{ color: var(--sub); font-weight: 400; font-size: 11.5px; opacity: .8; }
.zv-pp-card-price-sale ins{ color: #DC2626; font-weight: 800; font-size: 13.5px; text-decoration: none; }

.zv-pp-card-action{ min-height: 32px; display: flex; align-items: center; justify-content: center; }

.zv-pp-buy-btn{
  width: 100%; border: none; cursor: pointer; padding: 8px 0;
  border-radius: 10px; background: rgba(37,99,235,.1); color: var(--blue);
  font-weight: 800; font-size: 13.5px; font-family: var(--ff);
  transition: background .2s, color .2s;
}
.zv-pp-buy-btn:hover{ background: var(--blue); color: #fff; }

.zv-pp-card-qty{
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
/* ⚠️ چون بالا display:flex مستقیم روی کلاس ست شده، اتریبیوت HTML
   «hidden» رو خنثی می‌کرد (این یه گیر رایج CSS/HTML‌ه: قانون display
   روی کلاس، بر قانون پیش‌فرض مرورگر برای [hidden] اولویت داره).
   همین باعث می‌شد دکمه «خرید» و کنترل +/- هم‌زمان دیده بشن. */
.zv-pp-card-qty[hidden]{ display: none !important; }
.zv-pp-buy-btn[hidden]{ display: none !important; }
.zv-pp-qty-btn{
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--slate); color: var(--ink); font-size: 17px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
  line-height: 1;
}
.zv-pp-qty-btn:hover{ background: var(--blue); color: #fff; border-color: var(--blue); }
.zv-pp-qty-value{ min-width: 22px; font-size: 15px; font-weight: 800; color: var(--ink); }

/* --- ستون کناری (چپ، Sticky) --- */
.zv-pp-sidebar{ position: sticky; top: 90px; }
.zv-pp-sidebar-inner{
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.zv-pp-info{ display: flex; align-items: flex-start; gap: 10px; }
.zv-pp-thumb{ width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--white); }
.zv-pp-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.zv-pp-info-text{ flex: 1; min-width: 0; }
.zv-pp-info-title{ font-size: 13.5px; font-weight: 800; color: var(--ink); margin: 0 0 4px; line-height: 1.5; }

.zv-pp-rating{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.zv-pp-rating-stars{ color: #FBBF24; letter-spacing: 1px; }
.zv-pp-rating-count{ color: var(--sub); }

.zv-pp-short-desc{ font-size: 12.5px; line-height: 1.9; color: var(--sub); margin: 0; }

/* --- آیکون‌های جمع‌وجور علاقه‌مندی/اشتراک‌گذاری (بدون متن، کنار عکس محصول) --- */
.zv-pp-mini-actions{ display: flex; gap: 6px; flex-shrink: 0; }
.zv-pp-mini-btn{
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border);
  background: rgba(255,255,255,.6); color: var(--sub);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, color .2s;
}
.zv-pp-mini-btn:hover{ background: var(--white); color: var(--ink); }
.zv-pp-wishlist.is-active{ color: #DC2626; border-color: rgba(220,38,38,.3); background: rgba(220,38,38,.06); }
.zv-pp-wishlist.is-active svg{ fill: #DC2626; }

.zv-pp-share{ position: relative; }
.zv-pp-share.is-copied::after{
  content: 'لینک کپی شد!';
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; z-index: 10;
}

/* --- فیلدهای سفارشی: فاصله هماهنگ داخل سایدبار --- */
.zv-pp-sidebar .zv-custom-fields{ margin: 0; padding: 16px; }

/* --- خلاصه سفارش --- */
.zv-pp-summary{
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.zv-pp-summary-title{ font-size: 14px; font-weight: 800; color: var(--ink); margin: 0; }

.zv-pp-summary-total{ display: flex; align-items: baseline; gap: 8px; }
.zv-pp-summary-total-num{ font-size: 30px; font-weight: 900; color: var(--blue); }
.zv-pp-summary-total-unit{ font-size: 13px; font-weight: 700; color: var(--sub); }

.zv-pp-summary-items{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 160px; overflow-y: auto; }
.zv-pp-summary-items li{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--ink); background: rgba(255,255,255,.5);
  padding: 8px 10px; border-radius: 10px;
}
.zv-pp-summary-items li span:last-child{ color: var(--blue); font-weight: 700; }
.zv-pp-summary-empty{ color: var(--sub) !important; justify-content: center !important; background: transparent !important; }

.zv-pp-summary-price-row{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px; color: var(--ink); font-weight: 700;
}
.zv-pp-summary-price-row strong{ font-size: 17px; color: var(--ink); }

.zv-pp-summary-error{ margin: 0; font-size: 12px; color: #DC2626; font-weight: 700; text-align: center; }

.zv-pp-checkout-btn{
  width: 100%; border: none; cursor: pointer; padding: 14px;
  border-radius: 12px; background: linear-gradient(135deg, var(--blue), var(--blue-l));
  color: #fff; font-weight: 800; font-size: 14.5px; font-family: var(--ff);
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.zv-pp-checkout-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,99,235,.3); }
.zv-pp-checkout-btn.is-loading{ opacity: .7; pointer-events: none; }

/* باکس موفقیت بعد از افزودن به سبد (بدون ریدایرکت) */
.zv-pp-cart-success{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.35);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  animation: zv-pp-fade-in .25s ease;
}
@keyframes zv-pp-fade-in{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: none; }
}
.zv-pp-cart-success-msg{
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #047857;
  text-align: center;
}
.zv-pp-cart-success-btn{
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 10px;
  background: #059669;
  color: #fff !important;
  font-weight: 800;
  font-size: 13.5px;
  font-family: var(--ff);
  transition: background .2s, transform .2s;
}
.zv-pp-cart-success-btn:hover{
  background: #047857;
  transform: translateY(-1px);
}

/* --- نوار پایین موبایل: فقط روی موبایل/تبلت و فقط وقتی بسته انتخاب شده --- */
.zv-pp-mobile-bar{
  display: none !important; /* پیش‌فرض: مخفی در همه سایزها */
  position: fixed; inset-inline-start: 0; inset-inline-end: 0;
  bottom: 62px; /* بالای منوبار موبایل (#zv-mnav ≈ 62px) */
  z-index: 490;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  align-items: center; justify-content: space-between; gap: 14px;
  box-shadow: 0 -8px 24px rgba(15,23,42,.08);
}

/* فقط در عرض موبایل/تبلت و وقتی is-visible باشه نمایش بده */
@media (max-width: 992px){
  .zv-pp-mobile-bar.is-visible{ display: flex !important; }
}

.zv-pp-mobile-bar-info{ display: flex; flex-direction: column; gap: 2px; }
.zv-pp-mobile-bar-units{ font-size: 12px; font-weight: 700; color: var(--sub); }
.zv-pp-mobile-bar-price{ font-size: 15px; font-weight: 900; color: var(--ink); }

.zv-pp-mobile-bar-btn{
  border: none; cursor: pointer; padding: 12px 26px; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--blue-l));
  color: #fff; font-weight: 800; font-size: 13.5px; font-family: var(--ff);
  flex-shrink: 0;
}

/* --- ریسپانسیو --- */
@media (max-width: 992px){
  .zv-pp-layout{ grid-template-columns: 1fr; }
  .zv-pp-sidebar{ position: static; }
  .zv-pp-grid{ grid-template-columns: repeat(2, 1fr); }
  #zv-pp{ padding-bottom: 90px; } /* جا برای نوار پایین موبایل */
}
@media (max-width: 480px){
  .zv-pp-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .zv-pp-card{ padding: 14px 10px; }
  .zv-pp-card-amount{ font-size: 19px; }
}


/* وقتی کیبورد باز است منوبار مخفی است → نوار خرید بچسبد به پایین */
@media (max-width: 900px) {
  body.zv-keyboard-open .zv-pp-mobile-bar {
    bottom: 0 !important;
  }
}