sina38030/index.html

## index.html
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vazir-font/26.0.0/font-face.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
  <title>جزئیات محصول</title>
</head>

<body>

  <div id="overlay" class="overlay hidden"></div>

  <section id="productModal" class="modal hidden">
    <header class="top-bar">
      <button id="closeModal" class="icon-btn close-btn">&times;</button>
      <div class="left-btns">
        <button id="shareBtn" class="icon-btn"><i class="fa-solid fa-share-nodes"></i></button>
        <button id="favBtn"   class="icon-btn"><i class="fa-regular fa-heart"></i></button>
      </div>
    </header>

    <div id="imageSlider" class="image-slider">
      <div class="slide"><img src="https://picsum.photos/600/600?1" alt draggable="false"></div>
      <div class="slide"><img src="https://picsum.photos/600/600?2" alt draggable="false"></div>
      <div class="slide"><img src="https://picsum.photos/600/600?3" alt draggable="false"></div>
      <div class="slide"><img src="https://picsum.photos/600/600?4" alt draggable="false"></div>
      <div class="slide"><img src="https://picsum.photos/600/600?5" alt draggable="false"></div>
    </div>

    <div class="slide-index" id="slideIdx"><span id="curSlide">۱</span>/<span id="totSlide">۵</span></div>

    <article class="product-body">
      <h1 class="title">پرتقال تامسون درجه&nbsp;۱</h1>

      <div class="meta">
        <span class="weight">۱ کیلوگرم + ۱۰۰ گرم</span>
        <span class="rating"><i class="fa-solid fa-star"></i> ۴٫۶ <small>(۲۵۰۰+ فروش)</small></span>
      </div>

      <div class="pricing">
        <div class="price-row"><span>خرید به‌تنهایی:</span><span class="price">۶۰٬۰۰۰ تومان</span></div>
        <div class="price-row"><span>خرید با ۱ دوست:</span><span class="price">۲۸٬۰۰۰ تومان</span></div>
        <div class="price-row extra hidden"><span>خرید با ۲ دوست:</span><span class="price">۲۵٬۰۰۰ تومان</span></div>
        <div class="price-row extra hidden"><span>خرید با ۳ دوست:</span><span class="price">۲۲٬۰۰۰ تومان</span></div>

        <div id="priceToggle" class="price-row toggler">
          <span>خرید با ۴ دوست:</span>
          <span class="price free">رایگان!</span>
          <span class="arrow"><i class="fa-solid fa-chevron-down"></i></span>
        </div>
      </div>

      <div class="friend-box">
        <span class="friend-label">قیمت برای دوستانت</span>
        <span class="friend-price">۲۸٬۰۰۰</span>
      </div>
    </article>
  </section>

  <footer id="actionBar" class="action-bar">
    <div id="cartIcon" class="cart-icon">
      <i class="fa-solid fa-basket-shopping"></i>
      <span id="cartBadge" class="badge hidden">۰</span>
    </div>

    <button id="addToCart" class="primary-btn flex-grow">افزودن به سبد</button>

    <div id="qtyWrap" class="qty-wrap hidden flex-grow">
      <button id="minus" class="qty-btn">−</button>
      <span id="qtyTxt">۱</span>
      <button id="plus" class="qty-btn">+</button>
    </div>

    <button id="viewCart" class="outline-btn hidden">
      <i class="fa-solid fa-basket-shopping"></i>
      دیدن سبد
      <span id="viewBadge" class="badge hidden">۰</span>
    </button>
  </footer>

  <section id="shareSheet" class="share-sheet">
    <button id="closeShare" class="icon-btn share-close">&times;</button>
    <a id="tgShare" class="share-item" target="_blank"><i class="fa-brands fa-telegram"></i> تلگرام</a>
    <a id="waShare" class="share-item" target="_blank"><i class="fa-brands fa-whatsapp"></i> واتساپ</a>
    <a id="igShare" class="share-item" target="_blank"><i class="fa-brands fa-instagram"></i> اینستاگرام</a>
  </section>

  <section id="lightbox" class="lightbox hidden">
    <button id="lightPrev" class="icon-btn nav-btn"><i class="fa-solid fa-angle-right"></i></button>
    <img id="lightImg" alt draggable="false">
    <button id="lightNext" class="icon-btn nav-btn"><i class="fa-solid fa-angle-left"></i></button>
    <button id="closeLightbox" class="icon-btn close-lightbox">&times;</button>
  </section>

  <script src="script.js"></script>
</body>
</html>

## leader-pp8.markdown

      
    Raw
  

              leader-pp8.markdown
            
          
    Leader pp8

A Pen by Sina S on CodePen.
License.

  
## script.js
/* تبدیل اعداد به فارسی */
const fa=['۰','۱','۲','۳','۴','۵','۶','۷','۸','۹'];
const toFa=n=>n.toString().replace(/\d/g,d=>fa[d]);

/* انتخابگر کوتاه */
const $ = s=>document.querySelector(s);
const $$= s=>document.querySelectorAll(s);

/* عناصر اصلی */
const overlay   = $('#overlay');
const modal     = $('#productModal');
const actionBar = $('#actionBar');

/* نمایش اولیه (دمو) */
overlay.classList.remove('hidden');
modal  .classList.remove('hidden');

/* === اسلایدر === */
const slider=$('#imageSlider');
const slides=$$('#imageSlider .slide');
const curTxt=$('#curSlide');
const totTxt=$('#totSlide');
totTxt.textContent=toFa(slides.length);
let idx=0;
function updateIdx(){idx=Math.round(slider.scrollLeft/slider.offsetWidth);curTxt.textContent=toFa(idx+1);}
slider.addEventListener('scroll',()=>requestAnimationFrame(updateIdx));
updateIdx();

/* جلوگیری از drag و همچنین جلوگیری از pan عمودی روی اسلایدر */
$$('img').forEach(img=>img.addEventListener('dragstart',e=>e.preventDefault()));
let sX=0,sY=0;
slider.addEventListener('touchstart',e=>{sX=e.touches[0].clientX;sY=e.touches[0].clientY;},{passive:true});
slider.addEventListener('touchmove',e=>{
  const dX=e.touches[0].clientX-sX;
  const dY=e.touches[0].clientY-sY;
  if(Math.abs(dY)>Math.abs(dX)) e.preventDefault();   /* خنثی کردنِ حرکت عمودی */
},{passive:false});

/* === قیمت‌های بیشتر === */
$('#priceToggle').addEventListener('click',e=>{
  $$('.extra').forEach(el=>el.classList.toggle('hidden'));
  e.currentTarget.classList.toggle('open');
});

/* === قلب توخالی/پُر === */
$('#favBtn').addEventListener('click',e=>{
  const ic=e.currentTarget.querySelector('i');
  ic.classList.toggle('fa-regular');
  ic.classList.toggle('fa-solid');
});

/* === اشتراک === */
const shareSheet=$('#shareSheet');
const toggleShare =()=>shareSheet.classList.toggle('show');
$('#shareBtn').addEventListener('click',toggleShare);
$('#closeShare').addEventListener('click',toggleShare);
overlay.addEventListener('click',()=>shareSheet.classList.remove('show'));
const url=encodeURIComponent(location.href);
$('#tgShare').href=`https://t.me/share/url?url=${url}`;
$('#waShare').href=`https://wa.me/?text=${url}`;
$('#igShare').href=`https://www.instagram.com/?url=${url}`;

/* === افزودن به سبد === */
let qty=0;
const addBtn =$('#addToCart');
const qtyWrap=$('#qtyWrap');
const viewBtn=$('#viewCart');
const qtyTxt=$('#qtyTxt');
const cartBadge=$('#cartBadge');
const viewBadge=$('#viewBadge');
const refreshBadges=()=>{
  cartBadge.textContent=viewBadge.textContent=toFa(qty);
  cartBadge.classList.toggle('hidden',qty===0);
  viewBadge.classList.toggle('hidden',qty===0);
};
addBtn.addEventListener('click',()=>{
  qty=1;
  addBtn.classList.add('hidden');
  $('#cartIcon').classList.add('hidden');
  qtyWrap.classList.remove('hidden');
  viewBtn.classList.remove('hidden');
  qtyTxt.textContent=toFa(qty);
  refreshBadges();
});
$('#plus').addEventListener('click',()=>{qty++;qtyTxt.textContent=toFa(qty);refreshBadges();});
$('#minus').addEventListener('click',()=>{
  if(qty>1){qty--;qtyTxt.textContent=toFa(qty);refreshBadges();}
  else{
    qty=0;
    qtyWrap.classList.add('hidden');
    viewBtn.classList.add('hidden');
    addBtn.classList.remove('hidden');
    $('#cartIcon').classList.remove('hidden');
    refreshBadges();
  }
});
$('#cartIcon').addEventListener('click',()=>alert('نمایش سبد (دمو)'));

/* === لایت‌باکس === */
const lightbox=$('#lightbox');
const lightImg=$('#lightImg');
const openLight=i=>{
  idx=i;
  lightImg.src=slides[i].querySelector('img').src;
  lightbox.classList.remove('hidden');
};
slides.forEach((sl,i)=>sl.querySelector('img').addEventListener('click',()=>openLight(i)));
const nav=d=>openLight((idx+d+slides.length)%slides.length);
$('#lightPrev').addEventListener('click',()=>nav(-1));
$('#lightNext').addEventListener('click',()=>nav(1));
$('#closeLightbox').addEventListener('click',()=>lightbox.classList.add('hidden'));
/* درگ برای ناوبری در لایت‌باکس */
let startX=0,isDown=false;
lightbox.addEventListener('pointerdown',e=>{isDown=true;startX=e.clientX;});
lightbox.addEventListener('pointerup',e=>{
  if(!isDown)return;
  const diff=e.clientX-startX;
  if(Math.abs(diff)>60)nav(diff<0?1:-1);
  isDown=false;
});
lightbox.addEventListener('pointerleave',()=>isDown=false);

/* === بستن کل پاپ‌-آپ === */
$('#closeModal').addEventListener('click',()=>{
  [modal,overlay,actionBar].forEach(el=>el.classList.add('hidden'));
  shareSheet.classList.remove('show');
});

## style.css
/* پایه */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:'Vazir',sans-serif;background:#f2f2f2}
body{font-feature-settings:"ss01"}
.hidden{display:none!important}

/* لایهٔ تاریک */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:30}

/* پاپ‌-آپ */
.modal{position:fixed;top:5%;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;overflow-y:auto;direction:rtl;z-index:40}
.product-body{padding:16px 16px 120px}

/* نوار بالا */
.top-bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;z-index:2}
.icon-btn{width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.85);display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:22px}
.close-btn{font-size:26px}
.left-btns{display:flex;gap:8px}
.icon-btn .fa-solid.fa-heart{color:#e50063}

/* اسلایدر */
.image-slider{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;height:50vh;user-select:none;touch-action:pan-x;overscroll-behavior:contain}
.image-slider::-webkit-scrollbar{display:none}
.slide{min-width:100%;scroll-snap-align:start;flex-shrink:0}
.slide img{width:100%;height:100%;object-fit:cover;border-radius:16px 16px 0 0;-webkit-user-drag:none;user-drag:none;touch-action:pan-x}
.slide-index{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#fff;font-size:14px;text-shadow:0 0 4px #000}

/* تیتر و متا */
.title{font-size:18px;margin-bottom:8px}
.meta{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;color:#666;margin-bottom:16px}
.meta i{color:#ffb700;margin-left:4px}
.meta small{font-size:12px;color:#999}

/* قیمت‌ها */
.pricing{font-size:15px;line-height:2}
.price-row{display:flex;align-items:center;gap:4px}
.price-row span:first-child{flex:1}
.price{font-weight:600}
.free{color:#e50063}
.arrow i{transition:.3s}
.toggler.open .arrow i{transform:rotate(180deg)}

/* باکس دوستان */
.friend-box{margin:20px 0;padding:2px;background:#e6e6e6;border-radius:10px;display:inline-flex;align-items:center;gap:8px}
.friend-label{font-size:13px;color:#666}
.friend-price{background:#fff;padding:8px 16px;border-radius:8px;font-weight:600}

/* نوار پایین */
.action-bar{position:fixed;bottom:0;left:0;right:0;height:72px;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-top:1px solid #eee;z-index:50;flex-direction:row-reverse}
.flex-grow{flex:1}
.primary-btn,.outline-btn{flex:1;padding:12px;border-radius:10px;font-size:15px;cursor:pointer;border:none}
.primary-btn{background:#e50063;color:#fff}
.outline-btn{background:#fff;border:1px solid #e50063;color:#e50063;position:relative}
.outline-btn .badge{top:-6px;right:-6px}

/* آیکون کوچک سبد */
.cart-icon{width:44px;height:44px;border:1px solid #e50063;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#e50063;position:relative;cursor:pointer}
.badge{position:absolute;top:-6px;right:-6px;background:#e50063;color:#fff;font-size:10px;min-width:18px;height:18px;line-height:18px;border-radius:50%;text-align:center}

/* کنترل تعداد */
.qty-wrap{display:flex;align-items:center;gap:12px}
.qty-btn{width:36px;height:36px;border:none;border-radius:8px;background:#e50063;color:#fff;font-size:24px;cursor:pointer}
.qty-wrap span{min-width:24px;text-align:center;font-weight:600;font-size:16px}

/* شیت اشتراک */
.share-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;padding:32px 24px 16px;display:flex;justify-content:space-around;gap:12px;box-shadow:0 -4px 16px rgba(0,0,0,.1);transform:translateY(120%);transition:.3s transform;z-index:60}
.share-sheet.show{transform:translateY(0)}
.share-item{flex:1;padding:12px 0;border:none;border-radius:12px;background:#f5f5f5;font-weight:600;text-align:center;cursor:pointer}
.share-item i{margin-left:6px}
.share-close{position:absolute;top:-28px;right:20px;width:40px;height:40px;font-size:28px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* لایت‌باکس */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;gap:24px;z-index:65;user-select:none}
.lightbox img{max-width:90%;max-height:85%;border-radius:12px}
.nav-btn{font-size:28px;color:#fff;background:none;border:none;cursor:pointer}
.close-lightbox{position:absolute;top:20px;right:20px;font-size:28px;color:#fff;background:none;border:none;cursor:pointer}
	<!DOCTYPE html>
	<html lang="fa" dir="rtl">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/vazir-font/26.0.0/font-face.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
	<link href="styles.css" rel="stylesheet">
	<title>جزئیات محصول</title>
	</head>

	<body>

	<div id="overlay" class="overlay hidden"></div>

	<section id="productModal" class="modal hidden">
	<header class="top-bar">
	<button id="closeModal" class="icon-btn close-btn">×</button>
	<div class="left-btns">
	<button id="shareBtn" class="icon-btn"><i class="fa-solid fa-share-nodes"></i></button>
	<button id="favBtn" class="icon-btn"><i class="fa-regular fa-heart"></i></button>
	</div>
	</header>

	<div id="imageSlider" class="image-slider">
	<div class="slide"><img src="https://picsum.photos/600/600?1" alt draggable="false"></div>
	<div class="slide"><img src="https://picsum.photos/600/600?2" alt draggable="false"></div>
	<div class="slide"><img src="https://picsum.photos/600/600?3" alt draggable="false"></div>
	<div class="slide"><img src="https://picsum.photos/600/600?4" alt draggable="false"></div>
	<div class="slide"><img src="https://picsum.photos/600/600?5" alt draggable="false"></div>
	</div>

	<div class="slide-index" id="slideIdx"><span id="curSlide">۱</span>/<span id="totSlide">۵</span></div>

	<article class="product-body">
	<h1 class="title">پرتقال تامسون درجه ۱</h1>

	<div class="meta">
	<span class="weight">۱ کیلوگرم + ۱۰۰ گرم</span>
	<span class="rating"><i class="fa-solid fa-star"></i> ۴٫۶ <small>(۲۵۰۰+ فروش)</small></span>
	</div>

	<div class="pricing">
	<div class="price-row"><span>خرید به‌تنهایی:</span><span class="price">۶۰٬۰۰۰ تومان</span></div>
	<div class="price-row"><span>خرید با ۱ دوست:</span><span class="price">۲۸٬۰۰۰ تومان</span></div>
	<div class="price-row extra hidden"><span>خرید با ۲ دوست:</span><span class="price">۲۵٬۰۰۰ تومان</span></div>
	<div class="price-row extra hidden"><span>خرید با ۳ دوست:</span><span class="price">۲۲٬۰۰۰ تومان</span></div>

	<div id="priceToggle" class="price-row toggler">
	<span>خرید با ۴ دوست:</span>
	<span class="price free">رایگان!</span>
	<span class="arrow"><i class="fa-solid fa-chevron-down"></i></span>
	</div>
	</div>

	<div class="friend-box">
	<span class="friend-label">قیمت برای دوستانت</span>
	<span class="friend-price">۲۸٬۰۰۰</span>
	</div>
	</article>
	</section>

	<footer id="actionBar" class="action-bar">
	<div id="cartIcon" class="cart-icon">
	<i class="fa-solid fa-basket-shopping"></i>
	<span id="cartBadge" class="badge hidden">۰</span>
	</div>

	<button id="addToCart" class="primary-btn flex-grow">افزودن به سبد</button>

	<div id="qtyWrap" class="qty-wrap hidden flex-grow">
	<button id="minus" class="qty-btn">−</button>
	<span id="qtyTxt">۱</span>
	<button id="plus" class="qty-btn">+</button>
	</div>

	<button id="viewCart" class="outline-btn hidden">
	<i class="fa-solid fa-basket-shopping"></i>
	دیدن سبد
	<span id="viewBadge" class="badge hidden">۰</span>
	</button>
	</footer>

	<section id="shareSheet" class="share-sheet">
	<button id="closeShare" class="icon-btn share-close">×</button>
	<a id="tgShare" class="share-item" target="_blank"><i class="fa-brands fa-telegram"></i> تلگرام</a>
	<a id="waShare" class="share-item" target="_blank"><i class="fa-brands fa-whatsapp"></i> واتساپ</a>
	<a id="igShare" class="share-item" target="_blank"><i class="fa-brands fa-instagram"></i> اینستاگرام</a>
	</section>

	<section id="lightbox" class="lightbox hidden">
	<button id="lightPrev" class="icon-btn nav-btn"><i class="fa-solid fa-angle-right"></i></button>
	<img id="lightImg" alt draggable="false">
	<button id="lightNext" class="icon-btn nav-btn"><i class="fa-solid fa-angle-left"></i></button>
	<button id="closeLightbox" class="icon-btn close-lightbox">×</button>
	</section>

	<script src="script.js"></script>
	</body>
	</html>
	/* تبدیل اعداد به فارسی */
	const fa=['۰','۱','۲','۳','۴','۵','۶','۷','۸','۹'];
	const toFa=n=>n.toString().replace(/\d/g,d=>fa[d]);

	/* انتخابگر کوتاه */
	const $ = s=>document.querySelector(s);
	const $$= s=>document.querySelectorAll(s);

	/* عناصر اصلی */
	const overlay = $('#overlay');
	const modal = $('#productModal');
	const actionBar = $('#actionBar');

	/* نمایش اولیه (دمو) */
	overlay.classList.remove('hidden');
	modal .classList.remove('hidden');

	/* === اسلایدر === */
	const slider=$('#imageSlider');
	const slides=$$('#imageSlider .slide');
	const curTxt=$('#curSlide');
	const totTxt=$('#totSlide');
	totTxt.textContent=toFa(slides.length);
	let idx=0;
	function updateIdx(){idx=Math.round(slider.scrollLeft/slider.offsetWidth);curTxt.textContent=toFa(idx+1);}
	slider.addEventListener('scroll',()=>requestAnimationFrame(updateIdx));
	updateIdx();

	/* جلوگیری از drag و همچنین جلوگیری از pan عمودی روی اسلایدر */
	$$('img').forEach(img=>img.addEventListener('dragstart',e=>e.preventDefault()));
	let sX=0,sY=0;
	slider.addEventListener('touchstart',e=>{sX=e.touches[0].clientX;sY=e.touches[0].clientY;},{passive:true});
	slider.addEventListener('touchmove',e=>{
	const dX=e.touches[0].clientX-sX;
	const dY=e.touches[0].clientY-sY;
	if(Math.abs(dY)>Math.abs(dX)) e.preventDefault(); /* خنثی کردنِ حرکت عمودی */
	},{passive:false});

	/* === قیمت‌های بیشتر === */
	$('#priceToggle').addEventListener('click',e=>{
	$$('.extra').forEach(el=>el.classList.toggle('hidden'));
	e.currentTarget.classList.toggle('open');
	});

	/* === قلب توخالی/پُر === */
	$('#favBtn').addEventListener('click',e=>{
	const ic=e.currentTarget.querySelector('i');
	ic.classList.toggle('fa-regular');
	ic.classList.toggle('fa-solid');
	});

	/* === اشتراک === */
	const shareSheet=$('#shareSheet');
	const toggleShare =()=>shareSheet.classList.toggle('show');
	$('#shareBtn').addEventListener('click',toggleShare);
	$('#closeShare').addEventListener('click',toggleShare);
	overlay.addEventListener('click',()=>shareSheet.classList.remove('show'));
	const url=encodeURIComponent(location.href);
	$('#tgShare').href=`https://t.me/share/url?url=${url}`;
	$('#waShare').href=`https://wa.me/?text=${url}`;
	$('#igShare').href=`https://www.instagram.com/?url=${url}`;

	/* === افزودن به سبد === */
	let qty=0;
	const addBtn =$('#addToCart');
	const qtyWrap=$('#qtyWrap');
	const viewBtn=$('#viewCart');
	const qtyTxt=$('#qtyTxt');
	const cartBadge=$('#cartBadge');
	const viewBadge=$('#viewBadge');
	const refreshBadges=()=>{
	cartBadge.textContent=viewBadge.textContent=toFa(qty);
	cartBadge.classList.toggle('hidden',qty===0);
	viewBadge.classList.toggle('hidden',qty===0);
	};
	addBtn.addEventListener('click',()=>{
	qty=1;
	addBtn.classList.add('hidden');
	$('#cartIcon').classList.add('hidden');
	qtyWrap.classList.remove('hidden');
	viewBtn.classList.remove('hidden');
	qtyTxt.textContent=toFa(qty);
	refreshBadges();
	});
	$('#plus').addEventListener('click',()=>{qty++;qtyTxt.textContent=toFa(qty);refreshBadges();});
	$('#minus').addEventListener('click',()=>{
	if(qty>1){qty--;qtyTxt.textContent=toFa(qty);refreshBadges();}
	else{
	qty=0;
	qtyWrap.classList.add('hidden');
	viewBtn.classList.add('hidden');
	addBtn.classList.remove('hidden');
	$('#cartIcon').classList.remove('hidden');
	refreshBadges();
	}
	});
	$('#cartIcon').addEventListener('click',()=>alert('نمایش سبد (دمو)'));

	/* === لایت‌باکس === */
	const lightbox=$('#lightbox');
	const lightImg=$('#lightImg');
	const openLight=i=>{
	idx=i;
	lightImg.src=slides[i].querySelector('img').src;
	lightbox.classList.remove('hidden');
	};
	slides.forEach((sl,i)=>sl.querySelector('img').addEventListener('click',()=>openLight(i)));
	const nav=d=>openLight((idx+d+slides.length)%slides.length);
	$('#lightPrev').addEventListener('click',()=>nav(-1));
	$('#lightNext').addEventListener('click',()=>nav(1));
	$('#closeLightbox').addEventListener('click',()=>lightbox.classList.add('hidden'));
	/* درگ برای ناوبری در لایت‌باکس */
	let startX=0,isDown=false;
	lightbox.addEventListener('pointerdown',e=>{isDown=true;startX=e.clientX;});
	lightbox.addEventListener('pointerup',e=>{
	if(!isDown)return;
	const diff=e.clientX-startX;
	if(Math.abs(diff)>60)nav(diff<0?1:-1);
	isDown=false;
	});
	lightbox.addEventListener('pointerleave',()=>isDown=false);

	/* === بستن کل پاپ‌-آپ === */
	$('#closeModal').addEventListener('click',()=>{
	[modal,overlay,actionBar].forEach(el=>el.classList.add('hidden'));
	shareSheet.classList.remove('show');
	});
	/* پایه */
	*{margin:0;padding:0;box-sizing:border-box}
	html,body{height:100%;font-family:'Vazir',sans-serif;background:#f2f2f2}
	body{font-feature-settings:"ss01"}
	.hidden{display:none!important}

	/* لایهٔ تاریک */
	.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:30}

	/* پاپ‌-آپ */
	.modal{position:fixed;top:5%;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;overflow-y:auto;direction:rtl;z-index:40}
	.product-body{padding:16px 16px 120px}

	/* نوار بالا */
	.top-bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;z-index:2}
	.icon-btn{width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.85);display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:22px}
	.close-btn{font-size:26px}
	.left-btns{display:flex;gap:8px}
	.icon-btn .fa-solid.fa-heart{color:#e50063}

	/* اسلایدر */
	.image-slider{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;height:50vh;user-select:none;touch-action:pan-x;overscroll-behavior:contain}
	.image-slider::-webkit-scrollbar{display:none}
	.slide{min-width:100%;scroll-snap-align:start;flex-shrink:0}
	.slide img{width:100%;height:100%;object-fit:cover;border-radius:16px 16px 0 0;-webkit-user-drag:none;user-drag:none;touch-action:pan-x}
	.slide-index{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#fff;font-size:14px;text-shadow:0 0 4px #000}

	/* تیتر و متا */
	.title{font-size:18px;margin-bottom:8px}
	.meta{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;color:#666;margin-bottom:16px}
	.meta i{color:#ffb700;margin-left:4px}
	.meta small{font-size:12px;color:#999}

	/* قیمت‌ها */
	.pricing{font-size:15px;line-height:2}
	.price-row{display:flex;align-items:center;gap:4px}
	.price-row span:first-child{flex:1}
	.price{font-weight:600}
	.free{color:#e50063}
	.arrow i{transition:.3s}
	.toggler.open .arrow i{transform:rotate(180deg)}

	/* باکس دوستان */
	.friend-box{margin:20px 0;padding:2px;background:#e6e6e6;border-radius:10px;display:inline-flex;align-items:center;gap:8px}
	.friend-label{font-size:13px;color:#666}
	.friend-price{background:#fff;padding:8px 16px;border-radius:8px;font-weight:600}

	/* نوار پایین */
	.action-bar{position:fixed;bottom:0;left:0;right:0;height:72px;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-top:1px solid #eee;z-index:50;flex-direction:row-reverse}
	.flex-grow{flex:1}
	.primary-btn,.outline-btn{flex:1;padding:12px;border-radius:10px;font-size:15px;cursor:pointer;border:none}
	.primary-btn{background:#e50063;color:#fff}
	.outline-btn{background:#fff;border:1px solid #e50063;color:#e50063;position:relative}
	.outline-btn .badge{top:-6px;right:-6px}

	/* آیکون کوچک سبد */
	.cart-icon{width:44px;height:44px;border:1px solid #e50063;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#e50063;position:relative;cursor:pointer}
	.badge{position:absolute;top:-6px;right:-6px;background:#e50063;color:#fff;font-size:10px;min-width:18px;height:18px;line-height:18px;border-radius:50%;text-align:center}

	/* کنترل تعداد */
	.qty-wrap{display:flex;align-items:center;gap:12px}
	.qty-btn{width:36px;height:36px;border:none;border-radius:8px;background:#e50063;color:#fff;font-size:24px;cursor:pointer}
	.qty-wrap span{min-width:24px;text-align:center;font-weight:600;font-size:16px}

	/* شیت اشتراک */
	.share-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;padding:32px 24px 16px;display:flex;justify-content:space-around;gap:12px;box-shadow:0 -4px 16px rgba(0,0,0,.1);transform:translateY(120%);transition:.3s transform;z-index:60}
	.share-sheet.show{transform:translateY(0)}
	.share-item{flex:1;padding:12px 0;border:none;border-radius:12px;background:#f5f5f5;font-weight:600;text-align:center;cursor:pointer}
	.share-item i{margin-left:6px}
	.share-close{position:absolute;top:-28px;right:20px;width:40px;height:40px;font-size:28px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}

	/* لایت‌باکس */
	.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;gap:24px;z-index:65;user-select:none}
	.lightbox img{max-width:90%;max-height:85%;border-radius:12px}
	.nav-btn{font-size:28px;color:#fff;background:none;border:none;cursor:pointer}
	.close-lightbox{position:absolute;top:20px;right:20px;font-size:28px;color:#fff;background:none;border:none;cursor:pointer}