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

  position:relative; box-sizing:border-box; direction:rtl; text-align:right;
  padding:80px clamp(20px,5vw,80px) 120px; background:var(--bpd-bg); color:var(--bpd-ink);
  font-family:var(--bpd-font); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.bpd *,.bpd *::before,.bpd *::after{box-sizing:border-box}
.bpd img{max-width:none; border:0}
.bpd [hidden]{display:none!important}
.bpd h1,.bpd p{margin:0; padding:0}
.bpd a{text-decoration:none}
.bpd button,.bpd select{font-family:inherit; margin:0; box-shadow:none; text-transform:none; letter-spacing:0; -webkit-tap-highlight-color:transparent}

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

.bpd .bpd-wrap{max-width:1440px; margin:0 auto}

/* ---------- بخش بالا: تصویر راست | مشخصات چپ ---------- */
.bpd .bpd-top{display:grid; grid-template-columns:464px minmax(0,1fr); column-gap:161px; align-items:start}

/* ---------- گالری ---------- */
.bpd .bpd-stage{position:relative; width:100%; height:365px; border-radius:14px; background:var(--bpd-hero); overflow:hidden}
.bpd .bpd-slide{position:absolute; inset:0; padding:48px 46px; opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s}
.bpd .bpd-slide.is-active{opacity:1; visibility:visible}
.bpd .bpd-img{display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none}

.bpd .bpd-strip{position:relative; margin-top:63px; padding-inline:47px}
.bpd .bpd-thumbs{
  --bpd-tg:26px;
  display:flex; gap:var(--bpd-tg); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain;
}
.bpd .bpd-thumbs::-webkit-scrollbar{display:none}
.bpd .bpd-thumb{
  flex:0 0 calc((100% - 2 * var(--bpd-tg)) / 3); height:95px; padding:10px 18px; border:0; border-radius:10px;
  background:var(--bpd-thumb); cursor:pointer; scroll-snap-align:start; transition:opacity .15s,transform .1s;
}
.bpd .bpd-thumb:hover{opacity:.85}
.bpd .bpd-thumb:active{transform:scale(.97)}
.bpd .bpd-thumb:focus-visible{outline:2px solid var(--bpd-dark); outline-offset:2px}
.bpd .bpd-thumb-img{display:block; width:100%; height:100%; object-fit:contain; pointer-events:none}

.bpd .bpd-arrow{
  position:absolute; top:50%; width:20px; height:40px; margin-top:-20px; padding:0; border:0; background:transparent;
  color:var(--bpd-dark); cursor:pointer; display:grid; place-items:center; transition:opacity .15s;
}
.bpd .bpd-arrow svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.bpd .bpd-arrow--prev{right:0}
.bpd .bpd-arrow--next{left:0}
.bpd .bpd-arrow[aria-disabled=true]{opacity:.35; cursor:default}
.bpd .bpd-arrow:focus-visible{outline:2px solid var(--bpd-dark); outline-offset:0; border-radius:4px}

/* ---------- عنوان و توضیح کوتاه ---------- */
.bpd .bpd-title{font-size:40px; line-height:54px; font-weight:600; color:var(--bpd-ink)}
.bpd .bpd-short{margin-top:36px; font-size:24px; line-height:36px; color:var(--bpd-accent)}

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

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

.bpd .bpd-price{display:flex; flex-direction:column; align-items:flex-start; font-size:24px; line-height:36px; font-weight:500; color:var(--bpd-price); white-space:nowrap}
.bpd .bpd-old{font-size:16px; line-height:22px; font-weight:400; color:var(--bpd-gray); text-decoration:line-through}

/* ---------- دکمهٔ افزودن به سبد ---------- */
.bpd .bpd-add{
  position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:44px; margin-top:27px; padding:0;
  border:0; border-radius:6px; background:var(--bpd-dark); color:var(--bpd-light);
  font-size:20px; line-height:1; cursor:pointer; overflow:hidden; transition:background-color .2s,opacity .2s;
}
.bpd .bpd-add:hover{background:#244152}
.bpd .bpd-add:active{background:#1d3644}
.bpd .bpd-add:focus-visible{outline:2px solid var(--bpd-dark); outline-offset:3px}
.bpd .bpd-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}
.bpd .bpd-add.is-added .bpd-add-ok{opacity:1; transform:none}
.bpd .bpd-add.is-oos{background:#8da4b1; cursor:not-allowed}
.bpd .bpd-add[aria-disabled=true]:not(.is-oos){opacity:.6}

.bpd .barman-cart-msg{margin:12px 0 0; font-size:14px; line-height:24px; text-align:center}
.bpd .barman-cart-msg:empty{display:none}

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

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

/* ---------- جدول مشخصات: ستون‌ها هم‌عرض تب‌ها (برچسب زیر تب اول | مقدار زیر تب دوم)، وسط‌چین ---------- */
.bpd .bpd-specs{margin-top:15px}
.bpd .bpd-table{display:block; width:100%; margin:0; border:0; border-collapse:collapse}
.bpd .bpd-table tbody{display:block}
.bpd .bpd-table tr{display:grid; grid-template-columns:var(--bpd-tab) var(--bpd-tab); column-gap:var(--bpd-tabgap); align-items:center; min-height:80px; border-bottom:1px solid var(--bpd-line)}
.bpd .bpd-table th,.bpd .bpd-table td{display:block; margin:0; padding:0 8px; border:0; background:transparent; font-size:24px; line-height:36px; text-align:center}
.bpd .bpd-table th{font-weight:400; color:var(--bpd-label)}
.bpd .bpd-table td{font-weight:600; color:var(--bpd-value); overflow-wrap:anywhere}

/* ---------- تبلت: دو ستون جمع‌وجورتر ---------- */
@media (max-width:1100px){
  .bpd{--bpd-tab:calc(50% - 12px); --bpd-tabgap:24px}
  .bpd .bpd-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px}
  .bpd .bpd-stage{height:auto; aspect-ratio:464 / 365}
  .bpd .bpd-strip{padding-inline:32px}
  .bpd .bpd-thumbs{--bpd-tg:14px}
  .bpd .bpd-thumb{height:auto; aspect-ratio:106 / 95; padding:8px 12px}
  .bpd .bpd-title{font-size:32px; line-height:44px}
  .bpd .bpd-short{margin-top:20px; font-size:20px; line-height:32px}
  .bpd .bpd-opts{margin-top:40px; gap:20px}
  .bpd .bpd-opts + .bpd-buy{margin-top:40px}
  .bpd .bpd-opt-label{font-size:20px}
  .bpd .bpd-select{width:150px}
  .bpd .bpd-select select{font-size:20px}
  .bpd .bpd-tabs{margin-top:64px}
  .bpd .bpd-tab{font-size:22px}
  .bpd .bpd-desc,.bpd .bpd-empty{font-size:20px; line-height:32px}
  .bpd .bpd-table th,.bpd .bpd-table td{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .bpd .bpd-select select.is-invalid{animation:none}
  .bpd .bpd-add-ok,.bpd .bpd-slide{transition:none}
}
/* mobile="0": فقط دسکتاپ/تبلت (≥۷۶۸) — کنار [barman_mobile_product desktop="0"] در یک صفحه */
@media (max-width:767px){ .bpd.bpd-hide-m{display:none} }