/* =====================================================================
   store.pdp.css — صفحه‌ی محصول، عیناً از فایل طراحی دسکتاپ.
   هر چه استاتیک بود درون‌خطی در Product.cshtml نشسته؛ اینجا فقط
   چیزهایی است که به حالت (تب فعال، اسلاید جاری، نوار چسبان) یا
   media query نیاز دارند.
   ===================================================================== */

.pdp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
@media (max-width: 1119px) {
    .pdp-grid { grid-template-columns: 1fr; gap: 24px; }
    .pdp-buy { position: static !important; }
    .pdp-thumbs { display: none !important; }
}

/* ── اسلایدر گالری: scroll-snap؛ بدون JS هم با بندانگشتی‌ها کار می‌کند ── */
.pdp-track {
    display: flex; height: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none;
}
.pdp-track::-webkit-scrollbar { display: none; }
.pdp-track > * { flex: 0 0 100%; scroll-snap-align: start; height: 100%; min-width: 100%; }

.pdp-thumb { border: 1px solid var(--bd2); transition: border-color .2s, transform .2s; }
.pdp-thumb[aria-current="true"] { border: 2px solid var(--brand); }

/* ── انتخاب رنگ ────────────────────────────────────────────────────
   ⚠️ پیش‌تر همه‌ی اندازه‌ها inline بودند (۴۴ ظرف / ۳۶ دایره / گپ ۱۴) و
   روی موبایل یک ردیف رنگ نصفِ نخستین نمایش را می‌گرفت. حالا دایره ۲۸
   است ولی سطح لمسیِ ۴۲ حفظ شده: کوچک‌تر دیده می‌شود بدون اینکه زدنش
   سخت‌تر شود. */
/* ── رنگ: دایره‌های کوچک (حالت اول) — بازخورد مالک ─────────────────── */
.pdp-opt { margin-bottom: 18px; }
.pdp-opt__label { margin-bottom: 10px; }
.pdp-opt--color { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px dashed var(--bd2); }
.pdp-opt--color .pdp-opt__label { margin-bottom: 0 !important; }
.pdp-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.pdp-swatch {
    width: 32px; height: 32px; border: 0; background: transparent; padding: 0;
    display: flex; align-items: center; justify-content: center;
    position: relative; text-decoration: none; -webkit-tap-highlight-color: transparent;
    opacity: .55; transition: opacity .18s, transform .18s;
}
.pdp-swatch:hover { opacity: 1; text-decoration: none; }
.pdp-swatch:active { transform: scale(.92); }
.pdp-swatch__dot { width: 20px; height: 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); outline: none !important; transition: box-shadow .18s; }
.pdp-swatch[aria-pressed="true"] { opacity: 1; }
.pdp-swatch[aria-pressed="true"] .pdp-swatch__dot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 0 0 2px var(--surf), 0 0 0 3.5px var(--brand); }
.pdp-swatch--out .pdp-swatch__dot { opacity: .5; }
.pdp-swatch__bar { position: absolute; width: 24px; height: 1.5px; background: var(--n400); transform: rotate(-45deg); }
/* S3: رنگ ناموجود ریزتر و خاکستری (سطح لمسی ۳۲ می‌ماند)؛ بیش از ۵ تا پشت
   «رنگ‌های دیگر (N)» جمع می‌شوند — <details> بدون JS. */
.pdp-swatch--out { opacity: .45; }
.pdp-swatch--out .pdp-swatch__dot { width: 14px; height: 14px; filter: saturate(.35); opacity: .7; }
.pdp-swatch--out .pdp-swatch__bar { width: 18px; height: 1px; }
.pdp-swatch--out[aria-pressed="true"] { opacity: 1; }
.pdp-swatches__more { flex: 0 0 auto; margin: 0; }
.pdp-swatches__more[open] { flex-basis: 100%; }
.pdp-swatches__toggle {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    height: 32px; padding: 0 10px; border: 1px dashed var(--bd2); color: var(--tx2); font-size: 12px; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.pdp-swatches__toggle::-webkit-details-marker { display: none; }
.pdp-swatches__toggle:hover { color: var(--tx); border-color: var(--n400); }
.pdp-swatches__toggle svg { transition: transform .18s; }
.pdp-swatches__more[open] .pdp-swatches__toggle svg { transform: rotate(180deg); }
.pdp-swatches__out { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pdp-sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-size {
    position: relative; min-width: 56px; height: 44px; padding: 0 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--n300); border-radius: 10px; background: var(--surf); color: var(--tx2);
    font-size: 14px; font-weight: 500; text-decoration: none; direction: ltr;
    transition: border-color .15s, color .15s;
}
.pdp-size:hover { border-color: var(--tx); color: var(--tx); text-decoration: none; }
.pdp-size[aria-pressed="true"] { border: 2px solid var(--tx); color: var(--tx); font-weight: 700; padding: 0 15px; }
.pdp-size[aria-pressed="true"]::after {
    content: ""; width: 14px; height: 14px; flex: none;
    background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pdp-size--out { border-style: dashed; border-color: var(--n300); background: var(--n50); color: var(--n400); cursor: not-allowed; }
.pdp-sizelink { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13.5px; color: var(--brand7); font-weight: 700; text-decoration: none; }
.pdp-sizelink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── امتیاز و قیمت ───────────────────────────────────────────────── */
.pdp-rate {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
    padding: 5px 10px; background: var(--surf2); color: var(--tx2);
    font-size: 12.5px; text-decoration: none;
}
.pdp-rate b { color: var(--tx); font-weight: 700; }
.pdp-rate:hover { color: var(--brand); text-decoration: none; }
.pdp-price { font-size: 28px; font-weight: 700; margin-bottom: 18px; letter-spacing: -.3px; }
.pdp-price > span:last-child { font-size: 13px !important; font-weight: 400; letter-spacing: 0; }

/* ── مزیت‌های خرید: دو کارت کوچکِ هم‌ردیف به‌جای کادر رنگی بزرگ ────── */
.pdp-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.pdp-perk {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 10px 12px; border: 1px solid var(--bd); background: var(--surf);
}
.pdp-perk--wide { grid-column: 1 / -1; }
.pdp-perk__ico {
    width: 32px; height: 32px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    background: var(--brand05); color: var(--brand7); border-radius: 999px;
}
.pdp-perk__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.pdp-perk__txt b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pdp-perk__txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-perk__txt small { font-size: 11px; color: var(--tx2); }
.pdp-sku { margin-top: 8px; font-size: 11.5px; color: var(--mut); }

/* ── تب‌ها: بدون JS همه‌ی بخش‌ها پشت هم دیده می‌شوند ─────────────── */
.pdp-tab {
    border: 0; border-bottom: 2px solid transparent; background: transparent;
    cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 400;
    color: var(--tx2); padding: 14px 0; margin-bottom: -1px; text-decoration: none;
}
.pdp-tab[aria-selected="true"] { border-bottom-color: var(--brand); font-weight: 500; color: var(--tx); }
.pdp-tab:hover { color: var(--tx); text-decoration: none; }

/* ── نوار خرید چسبان بالای صفحه (دسکتاپ، با JS دیده می‌شود) ───────── */
.pdp-buybar {
    position: fixed; top: 0; inset-inline: 0; z-index: 70;
    display: none; align-items: center; gap: 14px; padding: 10px 40px;
    background: var(--surf); border-bottom: 1px solid var(--bd);
    box-shadow: rgba(24, 20, 14, .08) 0 6px 18px;
    animation: fadeIn .25s ease both;
}
.pdp-buybar.is-on { display: flex; }
@media (max-width: 1119px) { .pdp-buybar { display: none !important; } }

/* ── بازطراحی جمع‌وجورِ ستون خرید (بازخورد مالک: «جمع‌وجورتر، یوزرفرندلی‌تر، شیک‌تر») ── */
.pdp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pdp-head .pdp-rate { margin: 4px 0 0; flex: 0 0 auto; padding: 4px 8px; font-size: 12px; gap: 5px; }
.pdp-pricerow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.pdp-pricerow .pdp-price { margin: 0; font-size: 26px; }
.pdp-salerow { display: flex; align-items: center; gap: 8px; }
.pdp-salerow[hidden] { display: none; }
.pdp-opts { border: 1px solid var(--bd2); background: var(--surf); padding: 14px 16px 16px; margin-bottom: 12px; }
.pdp-opts .pdp-opt { margin-bottom: 0; }

.pdp-opts .pdp-opt__label { margin-bottom: 8px; }



.pdp-stockrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 12px; }
.pdp-tryon:hover { background: var(--brand1) !important; color: var(--brand9) !important; text-decoration: none; }
.pdp-buyrow__btn:hover { background: #1b5449 !important; }
.pdp-buyrow__wish:hover { border-color: var(--tx) !important; color: var(--tx) !important; }
.digify-slot--pdp { margin-top: 12px; }
/* مزیت‌ها: یک نوار باریک بدون قاب به‌جای دو کارت */
.pdp-perks--strip { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; padding: 12px 0 0; border-top: 1px solid var(--bd); }
.pdp-perks--strip .pdp-perk { padding: 0; border: 0; background: transparent; gap: 6px; font-size: 12px; color: var(--tx2); }
.pdp-perks--strip .pdp-perk svg { color: var(--brand7); flex: 0 0 auto; }
.pdp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; font-size: 11.5px; color: var(--mut); }
.pdp-meta .pdp-sku { margin: 0; }
.pdp-meta__sep { width: 1px; height: 12px; background: var(--bd2); }
.pdp-cats { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pdp-cats a { color: var(--tx2); text-decoration: none; padding: 2px 8px; border: 1px solid var(--bd2); font-size: 11.5px; }
.pdp-cats a:hover { border-color: var(--brand3); color: var(--brand7); }
@media (max-width: 1119px) {
  .pdp-head { flex-direction: column; gap: 6px; }
  .pdp-opts { padding: 12px 14px 14px; }
}

/* ── نظرها: فرم خوانا + تصاویر خریداران ── */
.rv-form { background: var(--n50); }
.rv-form input:not([type=radio]):not([type=file]), .rv-form textarea, .rv-form select {
  background: var(--n0) !important; border: 1px solid var(--n300) !important; }
.rv-form input:not([type=radio]):not([type=file]):focus, .rv-form textarea:focus, .rv-form select:focus {
  outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand05); }
.rv-form label[for^="rate-"], .rv-form label[for^="fit-"] { background: var(--n0); }
.rv-upload { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; background: var(--n0);
  border: 1px dashed var(--n300); color: var(--tx2); font-size: 13px; cursor: pointer; }
.rv-upload:hover { border-color: var(--brand); color: var(--brand); }
.rv-prev { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--bd); }
.rv-strip { margin-bottom: 18px; }
.rv-strip__title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.rv-strip__title span { color: var(--mut); font-weight: 400; }
.rv-strip__row { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-ph { display: block; width: 84px; height: 84px; overflow: hidden; border: 1px solid var(--bd); background: var(--n50); }
.rv-ph--sm { width: 64px; height: 64px; }
.rv-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.rv-ph:hover img { transform: scale(1.05); }
.rv-lightbox { border: 0; padding: 0; max-width: min(92vw, 720px); background: #000; }
.rv-lightbox::backdrop { background: rgba(0,0,0,.75); }
.rv-lightbox img { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; }
.rv-lightbox__cap { color: #fff; font-size: 12.5px; padding: 10px 14px; }
.rv-lightbox__x { position: absolute; top: 6px; inset-inline-end: 8px; width: 34px; height: 34px; border: 0; background: rgba(0,0,0,.5);
  color: #fff; font-size: 22px; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* سربرگ سبز بالای عنوان: برند / دسته */
.pdp-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; font-size: 13px; font-weight: 500; line-height: 1.8; }
.pdp-kicker a { color: var(--brand); text-decoration: none; }
.pdp-kicker a:hover { color: var(--brand7, var(--brand)); text-decoration: underline; text-underline-offset: 3px; }
.pdp-kicker span { color: var(--n300, #bbb); }

.pdp-opts .pdp-opt--color { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--bd2); }

/* ── فرم ثبت نظر (بازطراحی) ── */
.rv-form__head { margin-bottom: 18px; }
.rv-form__sub { font-size: 12.5px; color: var(--tx2); margin-top: 3px; }
.rv-f { display: flex; flex-direction: column; gap: 18px; }
.rv-f__block { border: 0; padding: 0; margin: 0; min-width: 0; }
.rv-f__lbl { display: block; padding: 0; font-size: 13px; font-weight: 600; color: var(--tx); margin-bottom: 8px; }
.rv-f__req { color: var(--dang); }
.rv-f__opt { color: var(--mut); font-weight: 400; font-size: 12px; }
.rv-f__hint { display: block; font-size: 11.5px; color: var(--mut); margin-top: 6px; }
.rv-in { width: 100%; height: 46px; border: 1px solid var(--n300) !important; background: var(--n0) !important; padding: 0 12px; font-family: inherit; font-size: 13.5px; color: var(--tx); box-sizing: border-box; }
.rv-in--ta { height: 110px; padding: 10px 12px; resize: vertical; line-height: 1.9; }
.rv-in::placeholder { color: var(--n400, #9a9a9a); }
.rv-rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-rate__txt { font-size: 13px; color: var(--tx2); min-width: 90px; }
/* ستاره‌ها: DOM ۵→۱، ردیف LTR ⇒ ۱ سمت راست؛ checked ~ label = ستاره‌های کوچک‌ترِ سمت راست */
.rv-stars { display: inline-flex; direction: ltr; gap: 2px; }
.rv-stars label { width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; color: var(--n300); -webkit-tap-highlight-color: transparent; transition: transform .12s; }
.rv-stars label svg { width: 30px; height: 30px; fill: currentColor; }
.rv-stars label:hover { transform: scale(1.12); }
.rv-stars input:checked + label, .rv-stars input:checked ~ label { color: var(--gold); }
.rv-stars:hover label { color: var(--n300); }
.rv-stars label:hover, .rv-stars label:hover ~ label { color: var(--gold); }
.rv-stars input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
.rv-stars--sm label { width: 28px; height: 28px; }
.rv-stars--sm label svg { width: 21px; height: 21px; }
.rv-seg { display: inline-flex; border: 1px solid var(--n300); background: var(--n0); max-width: 100%; }
.rv-seg label { padding: 0 16px; height: 42px; display: inline-flex; align-items: center; font-size: 13px; color: var(--tx2); cursor: pointer; border-inline-end: 1px solid var(--n300); white-space: nowrap; }
.rv-seg label:last-child { border-inline-end: 0; }
.rv-seg input:checked + label { background: var(--brand); color: #fff; }
.rv-seg input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: -2px; }
.rv-mini { display: flex; flex-direction: column; gap: 6px; }
.rv-mini__row { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 6px 0; border-bottom: 1px dashed var(--bd2); }
.rv-mini__row:last-child { border-bottom: 0; }
.rv-mini__lbl { font-size: 13px; color: var(--tx2); flex: 0 0 110px; }
.rv-upload--box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: auto; width: 100%; padding: 18px 16px; box-sizing: border-box; text-align: center; }
.rv-upload--box small { font-size: 11.5px; color: var(--mut); }
.rv-f__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--bd); }
.rv-f__foot .rv-f__hint { margin: 0; }
.rv-f__btn { height: 48px; padding: 0 28px; border: 0; background: var(--brand); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rv-f__btn:hover { background: var(--brand7, var(--brand)); }
@media (max-width: 719px) {
  .rv-form { padding: 16px !important; }
  .rv-seg { display: flex; }
  .rv-seg label { flex: 1; justify-content: center; padding: 0 8px; font-size: 12.5px; }
  .rv-f__foot { flex-direction: column-reverse; align-items: stretch; }
  .rv-f__btn { width: 100%; }
  .rv-rate__txt { width: 100%; min-width: 0; }
}