/* ==========================================================================
   «تک‌محصول» — موبایل (عرض مرجع ۳۶۰). فقط سکشن؛ نویگیشن بار پایین و فوتر سایت جدا هستند.
   اندازه‌ها از روی طرح اندازه‌گیری شده:
   ناحیهٔ تصویر ۲۵۹ (آبی) — برگهٔ سفید با گوشهٔ ۳۰ که ۳۰px روی تصویر می‌رود — نقطه‌ها ۸ با فاصلهٔ ۶
   دکمهٔ برگشت ۴۰×۴۰ — کشویی ۸۸×۲۸ (ردیف‌ها با فاصلهٔ ۲۰) — شمارنده ۲۴ — دکمهٔ افزودن ۳۲۰×۴۰
   تب‌ها با فاصلهٔ ۱۶ و خط ۱px (فعال ۲px) — ردیف جدول ۴۴
   تنظیم‌ها:  .bpp{ --bpp-nav:120px }  (جای نویگیشن بار پایین)
   ========================================================================== */
.bpp{
  --bpp-bg:#dce9ef; --bpp-hero:#96bcd1; --bpp-dark:#2c5164; --bpp-accent:#3f728d; --bpp-ink:#1e3845;
  --bpp-price:#060e11; --bpp-btn:#72a5c0; --bpp-glyph:#496f84; --bpp-line:#b8d2df; --bpp-tabline:#cbccce;
  --bpp-gray:#636466; --bpp-label:#4e8faf; --bpp-value:#1e3944; --bpp-light:#edf4f7; --bpp-error:#c0392b;
  --bpp-nav:120px;
  --bpp-font:'Peyda','Peyda FaNum','PeydaWeb','IRANSansX',Tahoma,sans-serif;

  position:relative; box-sizing:border-box; direction:rtl; text-align:right; overflow:hidden;
  background:var(--bpp-bg); color:var(--bpp-ink);
  padding-bottom:calc(var(--bpp-nav) + env(safe-area-inset-bottom,0px));
  font-family:var(--bpp-font); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.bpp *,.bpp *::before,.bpp *::after{box-sizing:border-box}
.bpp img{max-width:none; border:0}
.bpp [hidden]{display:none!important}
.bpp h1,.bpp p{margin:0; padding:0}
.bpp a{text-decoration:none}
.bpp button,.bpp select{font-family:inherit; margin:0; box-shadow:none; text-transform:none; letter-spacing:0; -webkit-tap-highlight-color:transparent}
.bpp .bp-i{display:block; flex:none; width:24px; height:24px}

.bpp.bpp-bleed{width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw)}
html:has(.bpp.bpp-bleed){overflow-x:clip}

/* ---------- گالری ---------- */
.bpp .bpp-gallery{position:relative; height:259px; background:var(--bpp-hero)}
.bpp .bpp-track{
  display:flex; height:229px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; outline-offset:-3px;
}
.bpp .bpp-track::-webkit-scrollbar{display:none}
.bpp .bpp-slide{flex:0 0 100%; height:100%; padding:12px 20px 30px; scroll-snap-align:center; scroll-snap-stop:always}
.bpp .bpp-img{display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none}

/* کپسول روشن پشت نقطه‌ها (طرح: ۷۲×۱۶ در y=229) */
.bpp .bpp-dots{position:absolute; left:50%; bottom:46px; display:flex; direction:ltr; gap:6px; padding:4px; border-radius:8px; background:var(--bpp-bg); transform:translateX(-50%); z-index:3}
.bpp .bpp-dot{position:relative; width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#79abc2; cursor:pointer; transition:background-color .2s}
.bpp .bpp-dot::after{content:''; position:absolute; inset:-9px -3px}
.bpp .bpp-dot.is-active{background:#0f1c22}
.bpp .bpp-dot:focus-visible{outline:2px solid var(--bpp-dark); outline-offset:3px}

.bpp .bpp-back{
  position:absolute; right:20px; top:calc(17px + env(safe-area-inset-top,0px)); z-index:4;
  display:grid; place-items:center; width:40px; height:40px; border-radius:10px;
  background:var(--bpp-light); color:#1f3946; transition:transform .1s,background-color .15s;
}
.bpp .bpp-back .bp-i{stroke-width:2}
.bpp .bpp-back:active{transform:scale(.94); background:#dfeaee}
.bpp .bpp-back:focus-visible{outline:2px solid var(--bpp-dark); outline-offset:2px}

/* ---------- برگهٔ محتوا ---------- */
.bpp .bpp-sheet{position:relative; z-index:2; margin-top:-30px; padding:21px 20px 0; border-radius:30px 30px 0 0; background:var(--bpp-bg)}
.bpp .bpp-title{margin-bottom:25px; font-size:24px; line-height:36px; font-weight:600; color:var(--bpp-ink)}

/* ---------- کشویی‌ها (رنگ / ابعاد) ---------- */
.bpp .bpp-opts{display:flex; flex-direction:column; gap:20px}
.bpp .bpp-opt{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:28px}
.bpp .bpp-opt-label{font-size:16px; line-height:28px; font-weight:500; color:var(--bpp-ink)}
.bpp .bpp-select{position:relative; display:block; min-width:88px; max-width:62%}
.bpp .bpp-select select{
  display:block; width:100%; height:28px; padding:0 12px 0 28px; border:1px solid var(--bpp-accent); border-radius:6px;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%233f728d' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat left 10px center;
  color:var(--bpp-accent); font-size:10px; line-height:26px; text-align:right; text-overflow:ellipsis; cursor:pointer;
  -webkit-appearance:none; appearance:none; transition:border-color .15s,box-shadow .15s;
}
.bpp .bpp-select select:focus-visible{outline:0; box-shadow:0 0 0 2px rgba(63,114,141,.35)}
.bpp .bpp-select select.is-invalid{border-color:var(--bpp-error); animation:bpp-shake .35s}
.bpp .bpp-select select option{font-size:14px; color:#1e3845}
.bpp .bpp-select select option:disabled{color:#9aa7ad}
@keyframes bpp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* ---------- تعداد + قیمت ---------- */
.bpp .bpp-buy{display:flex; align-items:center; justify-content:space-between; min-height:24px}
.bpp .bpp-opts + .bpp-buy{margin-top:59px}
.bpp .bpp-qty{display:flex; direction:ltr; align-items:center; flex:none}
.bpp .bpp-minus,.bpp .bpp-plus{
  position:relative; flex:none; width:24px; height:24px; padding:0; border:0; border-radius:4px;
  background:var(--bpp-btn); color:var(--bpp-glyph); cursor:pointer; transition:background-color .15s,transform .1s,opacity .15s;
}
.bpp .bpp-minus:active,.bpp .bpp-plus:active{transform:scale(.92)}
.bpp .bpp-minus[aria-disabled=true],.bpp .bpp-plus[aria-disabled=true]{cursor:not-allowed}
.bpp .bpp-plus[aria-disabled=true]{opacity:.55}
.bpp .bpp-minus::before,.bpp .bpp-plus::before,.bpp .bpp-plus::after{
  content:''; position:absolute; left:50%; top:50%; width:10px; height:2px; margin:-1px 0 0 -5px; border-radius:1px; background:currentColor;
}
.bpp .bpp-plus::after{transform:rotate(90deg)}
.bpp .bpp-minus:focus-visible,.bpp .bpp-plus:focus-visible{outline:2px solid var(--bpp-dark); outline-offset:2px}
.bpp .bpp-qty-n{width:38px; text-align:center; font-size:14px; line-height:24px; color:var(--bpp-price); user-select:none}

.bpp .bpp-price{display:flex; flex-direction:column; align-items:flex-start; font-size:20px; line-height:24px; font-weight:600; color:var(--bpp-price); white-space:nowrap}
.bpp .bpp-old{font-size:11px; line-height:14px; font-weight:400; color:var(--bpp-gray); text-decoration:line-through}

/* ---------- دکمهٔ افزودن به سبد ---------- */
.bpp .bpp-add{
  position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:40px; margin-top:19px; padding:0;
  border:0; border-radius:4px; background:var(--bpp-dark); color:var(--bpp-light);
  font-size:12px; line-height:1; cursor:pointer; overflow:hidden; transition:background-color .2s,opacity .2s;
}
.bpp .bpp-add:active{background:#244152}
.bpp .bpp-add:focus-visible{outline:2px solid var(--bpp-dark); outline-offset:3px}
.bpp .bpp-add-ok{position:absolute; inset:0; display:grid; place-items:center; background:#2f7d57; color:#fff; opacity:0; transform:translateY(100%); transition:opacity .2s,transform .25s}
.bpp .bpp-add.is-added .bpp-add-ok{opacity:1; transform:none}
.bpp .bpp-add.is-oos{background:#8da4b1; cursor:not-allowed}
.bpp .bpp-add[aria-disabled=true]:not(.is-oos){opacity:.6}

.bpp .barman-cart-msg{margin:8px 0 0; font-size:12px; line-height:20px; text-align:center}
.bpp .barman-cart-msg:empty{display:none}

/* ---------- تب‌ها ---------- */
.bpp .bpp-tabs{display:flex; gap:16px; margin-top:50px; border-bottom:1px solid var(--bpp-tabline)}
.bpp .bpp-tab{
  flex:1 1 0; min-width:0; height:36px; margin-bottom:-1px; padding:0 4px; border:0; background:transparent; cursor:pointer;
  font-size:14px; line-height:35px; font-weight:500; color:var(--bpp-gray); text-align:center; white-space:nowrap; transition:color .15s;
}
.bpp .bpp-tab.is-active{color:var(--bpp-accent); box-shadow:inset 0 -2px 0 var(--bpp-accent)}
.bpp .bpp-tab:focus-visible{outline:2px solid var(--bpp-accent); outline-offset:-2px; border-radius:4px}

/* ---------- توضیحات ---------- */
.bpp .bpp-desc{margin-top:27px; font-size:14px; line-height:24px; color:var(--bpp-accent); overflow-wrap:anywhere}
.bpp .bpp-desc p{margin:0 0 12px}
.bpp .bpp-desc p:last-child{margin-bottom:0}
.bpp .bpp-desc img{max-width:100%; height:auto; border-radius:8px}
.bpp .bpp-desc a{color:var(--bpp-dark); text-decoration:underline}
.bpp .bpp-desc ul,.bpp .bpp-desc ol{margin:0 0 12px; padding-inline-start:20px}
.bpp .bpp-empty{font-size:14px; line-height:24px; color:var(--bpp-gray)}

/* ---------- جدول مشخصات: برچسب راست (آبی) | مقدار وسطِ ستون چپ ---------- */
.bpp .bpp-specs{margin-top:12px}
.bpp .bpp-table{display:block; width:100%; margin:0; border:0; border-collapse:collapse}
.bpp .bpp-table tbody{display:block}
.bpp .bpp-table tr{display:grid; grid-template-columns:43% 1fr; align-items:center; min-height:44px; border-bottom:1px solid var(--bpp-line)}
.bpp .bpp-table th,.bpp .bpp-table td{display:block; margin:0; padding:0; border:0; background:transparent; font-size:12px; line-height:20px}
.bpp .bpp-table th{padding-right:20px; text-align:right; font-weight:400; color:var(--bpp-label)}
.bpp .bpp-table td{padding:0 8px; text-align:center; font-weight:500; color:var(--bpp-value); overflow-wrap:anywhere}

/* ---------- تبلت: پس‌زمینهٔ آبی تمام‌عرض می‌ماند؛ ترک گالری و برگه وسط‌چین ---------- */
@media (min-width:600px){
  .bpp .bpp-track,.bpp .bpp-sheet{max-width:560px; margin-inline:auto}
  .bpp .bpp-sheet{margin-top:-30px}
  .bpp .bpp-back{right:max(20px,calc((100% - 560px) / 2 + 20px))}
}
@media (prefers-reduced-motion:reduce){
  .bpp .bpp-select select.is-invalid{animation:none}
  .bpp .bpp-add-ok,.bpp .bpp-dot{transition:none}
}
/* desktop="0": فقط موبایل */
@media (min-width:768px){ .bpp.bpp-only-mobile{display:none} }