/* =========================================================================
   EDIUSFA — PRODUCT DETAIL PAGE  ·  لایهٔ صفحه v1.0
   توکن‌ها و اجزا از tokens.css و components.css · هدر فشرده از header.css
   این فایل فقط چیدمان اختصاصی صفحهٔ محصول.
   ========================================================================= */

/* ========================================================================
   ۱) چیدمان بالا-صفحه: گالری + جعبهٔ خرید
   ======================================================================== */
.pdp-main{min-height:60vh}
.pdp-top{
  display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);
  gap:36px;align-items:start;
  padding-block:26px 8px;
}

/* ---- گالری ---- */
.g-main{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-xs);
}
.g-frame{position:relative;display:block;width:100%;cursor:zoom-in;background:var(--surface-muted)}
.g-frame img{aspect-ratio:16/9;width:100%;object-fit:cover}
.g-badges{position:absolute;top:14px;inset-inline-start:14px;display:flex;gap:6px;z-index:2}
.g-wish{
  position:absolute;top:12px;inset-inline-end:12px;z-index:2;
  width:40px;height:40px;border-radius:var(--r-full);
  background:rgba(255,255,255,.94);color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-xs);
  transition:color var(--t-fast),transform var(--t-fast);
}
.g-wish:hover{transform:scale(1.06);color:var(--danger)}
.g-wish[aria-pressed="true"]{color:var(--danger)}
.g-wish[aria-pressed="true"] .icon{fill:currentColor}

/* دکمهٔ تمام‌صفحه روی پیش‌نمایش */
.g-full{
  position:absolute;bottom:12px;inset-inline-end:12px;z-index:2;
  width:38px;height:38px;border-radius:var(--r-sm);
  background:rgba(20,23,28,.72);color:#fff;backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast);
}
.g-full:hover{background:rgba(20,23,28,.9)}
.g-full .icon-sm{width:16px;height:16px;transform:scaleX(-1)}

/* اسلاید ویدیو — جایگاه پیش‌نمایش ویدیویی */
.g-video{
  aspect-ratio:16/9;width:100%;
  background:linear-gradient(150deg,#20242B 0%,#17191D 60%,#131519 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:#AEB4BF;text-align:center;padding:20px;cursor:pointer;
}
.g-video .g-play{
  width:64px;height:64px;border-radius:var(--r-full);
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background var(--t-fast),transform var(--t-fast);
}
.g-video:hover .g-play{background:var(--primary);border-color:var(--primary);transform:scale(1.05)}
.g-video .g-play svg{width:22px;height:22px;margin-inline-start:3px}
.g-video b{color:#fff;font-size:var(--fs-base);font-weight:800}
.g-video span{font-size:var(--fs-xs);color:#8E95A3;max-width:44ch;line-height:1.9}

/* بندانگشتی‌ها */
.g-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.g-thumb{
  position:relative;border:1.5px solid var(--border);border-radius:var(--r-sm);
  overflow:hidden;background:var(--surface-muted);padding:0;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.g-thumb img,.g-thumb .g-vtag{aspect-ratio:16/10;width:100%;object-fit:cover;display:block}
.g-thumb:hover{border-color:var(--border-strong)}
.g-thumb[aria-selected="true"]{border-color:var(--primary);box-shadow:var(--focus-ring)}
.g-thumb .g-vmini{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#20242B,#17191D);color:#fff;
}
.g-thumb .g-vmini svg{width:16px;height:16px}

/* ---- جعبهٔ خرید ---- */
.buy-box{
  position:sticky;top:calc(58px + 20px);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  padding:24px;display:flex;flex-direction:column;gap:14px;
}
.b-toprow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.b-cat{font-size:var(--fs-xs);font-weight:700;color:var(--text-subtle)}
.b-rating{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);color:var(--text-subtle);background:none;border:0;cursor:pointer;
  padding:0;border-radius:4px;
}
.b-rating:hover{color:var(--primary-ink)}
.b-rating b{color:var(--text-muted);font-weight:800}
.pdp-title{font-size:clamp(21px,1.1rem + .9vw,27px);font-weight:900;line-height:1.55;letter-spacing:var(--ls-tight)}
.pdp-lede{font-size:var(--fs-sm);color:var(--text-muted);line-height:2}
.b-chips{display:flex;flex-wrap:wrap;gap:6px}

.b-price{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-block:1px dashed var(--border);padding-block:14px;
}
.b-price .price-wrap{flex-direction:column;align-items:flex-start;gap:2px;display:flex}
.b-price .price{font-size:26px}
.b-price .price-old{font-size:var(--fs-sm)}
.save-badge{
  font-size:var(--fs-2xs);font-weight:800;color:var(--secondary-strong);
  background:var(--secondary-soft);padding:4px 10px;border-radius:var(--r-full);
}
.price-note{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);color:var(--text-subtle)}
.price-note .icon-sm{width:13px;height:13px;color:var(--success)}

.b-actions{display:flex;gap:10px;flex-wrap:wrap}
.b-actions .btn{flex:1;min-width:150px}
.b-secondary{display:flex;gap:8px}
.b-secondary .btn{flex:1}

/* .b-trust → canonical components.css (shared with checkout) */
.b-added{
  display:none;align-items:center;gap:8px;
  background:var(--success-soft);border:1px dashed #BBDCC9;border-radius:var(--r-sm);
  padding:10px 13px;font-size:var(--fs-sm);font-weight:700;color:var(--success);
}
.b-added .icon-sm{width:15px;height:15px}
.b-added a{margin-inline-start:auto;color:var(--success);text-decoration:underline;text-underline-offset:3px}
.buy-box.has-added .b-added{display:flex}

/* ========================================================================
   ۲) بخش‌های ساختاری — تب‌ها
   ======================================================================== */
.pdp-sections{margin-block:34px 0}
.tabs-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-xs);padding:0 26px 30px}
.tabs{margin-inline:-26px;padding-inline:26px}

.tab-panel h3{font-size:var(--fs-lg);font-weight:800;margin-bottom:12px}
.tab-panel h4{font-size:var(--fs-md);font-weight:800;margin-block:18px 8px}
.tab-panel p{font-size:var(--fs-base);color:var(--text-muted);line-height:2.05;margin-bottom:12px;max-width:82ch}
.tab-panel p b{color:var(--text)}
.tab-panel ul.dash{display:flex;flex-direction:column;gap:8px;margin-block:6px 14px}
.tab-panel ul.dash li{
  position:relative;padding-inline-start:18px;
  font-size:var(--fs-base);color:var(--text-muted);line-height:2;
}
.tab-panel ul.dash li::before{
  content:"";position:absolute;inset-inline-start:2px;top:14px;
  width:7px;height:7px;border-radius:2px;background:var(--primary);
}

/* Descriptions pasted from external sources — hygiene layer:
 * hide the empty styled divs (the stray colored strip under the tabs),
 * contain oversized images and honor the WP editor alignment classes. */
.tab-panel > div:empty,
.tab-panel p:empty,
.tab-panel span:empty{display:none}
.tab-panel .tab-empty{
  margin-block:18px 6px;padding:18px 20px;
  border:1px dashed var(--border);border-radius:var(--r-md);
  color:var(--text-muted);font-size:var(--fs-sm);
  text-align:center;max-width:100%;
}
.tab-panel img,.tab-panel video,.tab-panel iframe{max-width:100%;height:auto}
.tab-panel img{border-radius:var(--r-md)}
.tab-panel .aligncenter,.tab-panel div.aligncenter{display:block;margin-inline:auto;float:none}
.tab-panel img.alignleft{float:left;margin:6px 24px 16px 0}
.tab-panel img.alignright{float:right;margin:6px 0 16px 24px}
.tab-panel .wp-caption{max-width:100%}
.tab-panel table{width:100%;border-collapse:collapse;margin-block:10px 16px}
.tab-panel table td,.tab-panel table th{border:1px solid var(--border);padding:8px 12px}
.tab-panel::after{content:"";display:block;clear:both}

/* جدول مشخصات و سازگاری */
.spec-table{width:100%;border-collapse:collapse;margin-top:6px}
.spec-table th,.spec-table td{
  text-align:start;padding:11px 14px;font-size:var(--fs-sm);
  border-bottom:1px solid var(--border);
}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{width:230px;font-weight:700;color:var(--text-subtle);background:var(--surface-muted)}
.spec-table th:first-child{border-inline-end:1px solid var(--border)}
.spec-table th:first-child{border-start-start-radius:var(--r-xs);border-end-start-radius:var(--r-xs)}
.spec-table td{color:var(--text);font-weight:600}
.spec-table td .icon-sm{width:15px;height:15px;vertical-align:-2px}
.spec-table .yes{color:var(--success)}
.spec-table .no{color:var(--danger)}
.spec-table-wrap{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;overflow-x:auto}

/* فایل‌های شامل — لیست دانلود */
.dl-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.dl-total{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface-muted);border-radius:var(--r-sm);
  padding:11px 16px;font-size:var(--fs-sm);font-weight:700;color:var(--text-muted);
}
.dl-total b{color:var(--text)}

/* راهنمای استفاده — گام‌های شماره‌دار */
.howto{counter-reset:how;display:flex;flex-direction:column;gap:0;margin-top:6px}
.howto li{
  counter-increment:how;position:relative;
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px dashed var(--border);
}
.howto li:last-child{border-bottom:0}
.howto li::before{
  content:counter(how,persian);
  width:30px;height:30px;border-radius:var(--r-sm);flex-shrink:0;
  background:var(--primary-soft);color:var(--primary-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;margin-top:2px;
}
.howto b{display:block;font-size:var(--fs-base);font-weight:800;margin-bottom:3px}
.howto p{margin:0;font-size:var(--fs-sm);max-width:none}

/* ========================================================================
   ۳) نظرات کاربران
   ======================================================================== */
.rev-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;margin-bottom:24px}
.rev-sum{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
}
.rev-avg{font-size:44px;font-weight:900;line-height:1;color:var(--text)}
.rev-avg small{font-size:var(--fs-xs);font-weight:600;color:var(--text-subtle)}
.rev-sum .r-stars{font-size:16px}
.rev-count{font-size:var(--fs-xs);color:var(--text-subtle)}
.dist{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:8px}
.dist-row{display:grid;grid-template-columns:30px 1fr 26px;align-items:center;gap:9px;font-size:var(--fs-2xs);color:var(--text-muted)}
.dist-row .track{height:7px;border-radius:var(--r-full);background:var(--surface-muted);overflow:hidden}
.dist-row .track span{display:block;height:100%;border-radius:var(--r-full);background:var(--accent,#E8A33D)}
.dist-row b{font-weight:700;color:var(--text-subtle);text-align:left}

/* فرم نظر */
.rev-form{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px;display:flex;flex-direction:column;gap:13px;
}
.rev-form h3{font-size:var(--fs-md);font-weight:800}
.star-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.star-input input{position:absolute;opacity:0;pointer-events:none}
.star-input label{
  width:30px;height:30px;cursor:pointer;color:var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  transition:color var(--t-fast),transform var(--t-fast);
}
.star-input label svg{width:22px;height:22px;fill:currentColor;stroke:none}
.star-input label:hover{transform:scale(1.12)}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input label:has(input:checked),
.star-input label:has(input:checked) ~ label{color:var(--accent,#E8A33D)}
.star-input label:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.rev-hint{font-size:var(--fs-2xs);color:var(--text-subtle)}
.rev-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* لیست نظرات */
.rev-list{display:flex;flex-direction:column;gap:14px}
.rev-demo-note{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-2xs);color:var(--text-subtle);
  padding:8px 0 2px;
}
.rev-demo-note .icon-sm{width:13px;height:13px;flex-shrink:0}

/* ========================================================================
   ۴) سوالات متداول — آکاردئون
   ======================================================================== */
.faq-list{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.faq-item + .faq-item{border-top:1px solid var(--border)}
.faq-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:15px 20px;text-align:start;
  font-size:var(--fs-base);font-weight:700;color:var(--text);
  transition:background var(--t-fast);
}
.faq-btn:hover{background:var(--surface-muted)}
.faq-btn .chev{width:16px;height:16px;color:var(--text-subtle);transition:transform var(--t-med);flex-shrink:0}
.faq-item.is-open .faq-btn{color:var(--primary-ink)}
.faq-item.is-open .faq-btn .chev{transform:rotate(180deg)}
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-med)}
.faq-item.is-open .faq-panel{grid-template-rows:1fr}
.faq-panel>div{overflow:hidden}
.faq-panel p{padding:0 20px 17px;margin:0;font-size:var(--fs-sm);color:var(--text-muted);line-height:2;max-width:none}

/* ========================================================================
   ۵) محصولات مرتبط — ریل
   ======================================================================== */
.rel-rail{margin-block:44px 0}
.rel-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.rel-head h2{font-size:var(--fs-xl);font-weight:900}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ========================================================================
   ۶) نوار خرید چسبان موبایل
   ======================================================================== */
.pdp-stickybar{
  position:fixed;bottom:0;inset-inline:0;z-index:88;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);box-shadow:0 -6px 24px -12px rgba(27,30,35,.2);
  display:flex;align-items:center;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(105%);visibility:hidden;
  transition:transform var(--t-med),visibility 0s var(--t-med);
}
.pdp-stickybar.is-visible{transform:none;visibility:visible;transition:transform var(--t-med),visibility 0s}
.pdp-stickybar img{width:64px;height:44px;object-fit:cover;border-radius:var(--r-xs);flex-shrink:0}
.ps-meta{flex:1;min-width:0;line-height:1.5}
.ps-meta b{display:block;font-size:var(--fs-xs);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-meta .price{font-size:15px}
.pdp-stickybar .btn{flex-shrink:0}

/* ========================================================================
   ۷) لایت‌باکس
   ======================================================================== */
.lb-backdrop{
  position:fixed;inset:0;z-index:96;background:rgba(19,21,25,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-med),visibility 0s var(--t-med);
  padding:24px;
}
.lb-backdrop.open{opacity:1;visibility:visible;transition:opacity var(--t-med),visibility 0s}
.lb-backdrop img{max-width:min(1080px,94vw);max-height:76vh;object-fit:contain;border-radius:var(--r-md);box-shadow:var(--sh-lg)}
.lb-counter{color:#9AA1AD;font-size:var(--fs-xs);font-weight:700}
.lb-close{
  position:absolute;top:18px;inset-inline-start:18px;
  width:42px;height:42px;border-radius:var(--r-full);
  background:rgba(255,255,255,.1);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast);
}
.lb-close:hover{background:rgba(255,255,255,.22)}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:var(--r-full);
  background:rgba(255,255,255,.1);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast);
}
.lb-nav:hover{background:var(--primary)}
.lb-prev .icon{transform:scaleX(-1)}
.lb-prev{inset-inline-end:20px}
.lb-next{inset-inline-start:20px}
.lb-nav[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none}

/* ========================================================================
   ۸) ریسپانسیو
   ======================================================================== */
@media (max-width:1023px){
  .pdp-top{grid-template-columns:1fr;gap:22px;padding-block:18px 4px}
  .buy-box{position:static}
  .g-thumbs{grid-template-columns:repeat(5,1fr)}
  .rev-top{grid-template-columns:1fr}
  .rel-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(70vw,270px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
  .rel-grid>*{scroll-snap-align:start}
  .tabs-wrap{padding:0 18px 22px}
  .tabs{margin-inline:-18px;padding-inline:18px}
}
/* ========================================================================
   ۹) لایهٔ وضعیت گالری و مکمل‌های نهایی — پیوستِ تکمیلی نسخهٔ نهایی
   ======================================================================== */
/* حالت ویدیو: پیش‌فرض اسلاید تصویر دیده می‌شود؛ با انتخاب بندانگشتی ویدیو
   (کلاس is-video روی .g-main) اسلاید تیرهٔ ویدیو جایگزین می‌شود */
.g-video{display:none}
.g-main.is-video .g-frame{display:none}
.g-main.is-video .g-video{display:flex}
.g-main.is-video .g-full{display:none}
.g-main.is-video{cursor:default}

/* نوار خرید چسبان فقط در تبلت/موبایل معنا دارد */
@media (min-width:1024px){.pdp-stickybar{display:none}}
@media (max-width:1023px){
  body.pdp-bar-open{padding-bottom:74px}
}
.pdp-crumbs{padding-block:18px 0}
.pdp-reviews>h2,.pdp-faq>h2{font-size:var(--fs-xl);font-weight:900;margin-bottom:18px}
.pdp-faq{margin-top:34px}
.pdp-reviews{margin-top:34px}
.rev-form{margin-top:24px}

/* ========================================================================
   ۱۰) فوتر — کپی وفادار از لایهٔ صفحهٔ آرشیو (الگوی مشترک صفحات)
   ======================================================================== */
.site-footer{background:var(--surface-ink);color:#AEB4BF;margin-top:72px}
.footer-top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
  gap:36px;padding-block:56px 44px;
}
.f-brand .brand{display:inline-flex;align-items:center;gap:10px}
.f-brand .brand-mark{
  width:38px;height:38px;border-radius:11px;background:#fff;color:var(--text);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;letter-spacing:-.02em;
}
.f-brand .brand-name{color:#fff;font-size:18px;font-weight:800}
.f-about{font-size:var(--fs-sm);line-height:2;color:#8E95A3;margin-block:16px;max-width:34ch}
.f-social{display:flex;gap:8px}
.f-social a{
  width:40px;height:40px;border-radius:var(--r-sm);
  border:1px solid var(--border-inverse);
  display:flex;align-items:center;justify-content:center;color:#B9BFC9;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.f-social a:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}
.f-col h4{color:#fff;font-size:var(--fs-base);font-weight:800;margin-bottom:16px}
.f-col ul{display:flex;flex-direction:column;gap:9px}
.f-col a{font-size:var(--fs-sm);color:#9AA1AD;transition:color var(--t-fast)}
.f-col a:hover{color:#fff}
.f-bottom{
  border-top:1px solid var(--border-inverse);
  padding-block:20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:var(--fs-xs);color:#7E8593;flex-wrap:wrap;
}
@media (max-width:639px){
  .site-footer{margin-top:52px}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px;padding-block:44px 34px}
  .f-bottom{flex-direction:column;align-items:flex-start}
}

@media (max-width:639px){
  .container{padding-inline:16px}
  .pdp-title{font-size:20px}
  .g-thumbs{gap:7px}
  .g-thumb img,.g-thumb .g-vtag{border-radius:0}
  .b-price .price{font-size:22px}
  .buy-box{padding:18px 16px}
  .b-actions .btn{min-width:100%}
  .b-secondary .btn{min-width:0}
  .spec-table th{width:150px}
  .rev-grid2{grid-template-columns:1fr}
  .lb-prev{inset-inline-end:8px}
  .lb-next{inset-inline-start:8px}
  .rel-head h2{font-size:var(--fs-lg)}
  .howto li{gap:11px}
}

/* ---- MP03: helpful votes on reviews ---- */
.r-helpful{margin-top:10px}
.r-helpful-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-sm,8px);background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:13px;transition:border-color .15s ease,color .15s ease,background .15s ease}
.r-helpful-btn:hover{border-color:var(--primary);color:var(--primary)}
.r-helpful-btn.is-on{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb, var(--primary) 8%, transparent)}
.r-helpful-btn[disabled]{opacity:.5;cursor:not-allowed}
.r-helpful-btn .n{font-weight:600}