/* ============ product.css — تک‌محصول فروشگاه نغمه (Neon 3D) ============
   فقط برای صفحهٔ محصول لود می‌شود. شامل: سایدبارِ فقط-آیکون روی دسکتاپ +
   چیدمان تصویر (راست) / توضیحات (چپ) + بخش‌های پایینی. */

/* ---------- سایدبار فقط-آیکون (مخصوص این صفحه، روی دسکتاپ) ---------- */
.product-page {
  --sidebar-w: 84px;
}

.product-page .nav__text,
.product-page .sidebar__foot {
  display: none;
}

.product-page .brand {
  justify-content: center;
  padding: 8px 0 18px;
}

.product-page .brand img {
  width: 46px !important;
  height: 46px;
  object-fit: contain;
}

.product-page .nav {
  gap: 6px;
}

.product-page .nav__item {
  position: relative;
  justify-content: center;
  padding: 13px 0;
}

.product-page .nav__item span[data-icon],
.product-page .nav__item .nav__ico {
  display: inline-flex;
}

/* تول‌تیپ هاور برای آیتم‌های آیکونی */
.product-page .nav__item::after {
  content: attr(data-title);
  position: absolute;
  inset-inline-end: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) scale(.9);
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(14, 12, 20, .96);
  border: 1px solid rgba(0, 255, 255, .3);
  color: #fff;
  font-size: 0.78rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 14px rgba(0, 255, 255, .2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
}

.product-page .nav__item:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* ---------- تم‌های رنگی (مطابق دستهٔ محصول) ---------- */
.product.cyan   { --neon: #00ffff; --neon-dim: rgba(0, 255, 255, .3); --neon-glow: rgba(0, 255, 255, .15); --neon-rgb: 0, 255, 255; }
.product.pink   { --neon: #ff0080; --neon-dim: rgba(255, 0, 128, .3); --neon-glow: rgba(255, 0, 128, .15); --neon-rgb: 255, 0, 128; }
.product.purple { --neon: #bf00ff; --neon-dim: rgba(191, 0, 255, .3); --neon-glow: rgba(191, 0, 255, .15); --neon-rgb: 191, 0, 255; }
.product.gold   { --neon: #ffd700; --neon-dim: rgba(255, 215, 0, .3); --neon-glow: rgba(255, 215, 0, .15); --neon-rgb: 255, 215, 0; }

/* ---------- چیدمان اصلی: تصویر (راست) + توضیحات (چپ) ---------- */
.product-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 26px;
  align-items: start;
  margin: 10px 0 26px;
}

/* باکس تصویر (ساده، بدون افکت روی تصویر) */
.product-gallery {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--neon-rgb), .2);
  background: rgba(var(--neon-rgb), .04);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}

.product-gallery__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.product-gallery__badge {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--neon);
  border: 1px solid var(--neon-dim);
  background: rgba(var(--neon-rgb), .14);
  backdrop-filter: blur(6px);
}

/* باکس توضیحات */
.product-info {
  position: relative;
  border-radius: 20px;
  padding: 26px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
}

.product-cat {
  font-size: 0.8rem;
  color: var(--neon);
  margin-bottom: 8px;
}
.product-cat i { margin-inline-end: 5px; }

.product-title {
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 0 18px var(--neon-glow);
  margin-bottom: 12px;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, .6);
}
.product-rating .stars { color: #facc15; }

.product-desc-short {
  font-size: 0.92rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 18px;
}

/* اسپک‌ها (از shop.css: .card-specs/.spec استفاده می‌شود) */
.product-info .card-specs { margin-bottom: 20px; }

/* قیمت + خرید */
.product-buybar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px;
  border-radius: 16px;
  background: rgba(var(--neon-rgb), .05);
  border: 1px solid rgba(var(--neon-rgb), .15);
  margin-bottom: 18px;
}

.product-price {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--neon);
  text-shadow: 0 0 22px var(--neon-dim);
  white-space: nowrap;
}
.product-price .price-from { font-size: 0.8rem; color: rgba(255, 255, 255, .45); font-weight: 400; margin-inline-end: 5px; }
.product-price .price-unit { font-size: 0.82rem; color: rgba(255, 255, 255, .5); font-weight: 500; margin-inline-start: 5px; }

.product-buy {
  flex: 1;
  min-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  color: #06060a;
  background: var(--neon);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 24px var(--neon-dim);
  transition: transform .2s ease, box-shadow .25s ease;
}
.product-buy:hover { transform: translateY(-2px); box-shadow: 0 0 34px var(--neon-dim), 0 0 60px var(--neon-glow); }
.product-buy.is-added { background: #39ff14; box-shadow: 0 0 26px rgba(57, 255, 20, .5); }
.product-buy::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transition: inset-inline-start .5s ease;
}
.product-buy:hover::before { inset-inline-start: 100%; }

.product-fav {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(var(--neon-rgb), .3);
  background: rgba(var(--neon-rgb), .06);
  color: rgba(255, 255, 255, .65);
  font-size: 1.05rem;
  cursor: pointer;
  transition: color .2s ease, transform .15s ease, border-color .2s ease;
}
.product-fav:hover { transform: translateY(-2px); color: var(--neon); border-color: var(--neon-dim); }
.product-fav.is-active { color: var(--neon); border-color: var(--neon-dim); }

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.product-tags .pchip {
  font-size: 0.74rem;
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(var(--neon-rgb), .08);
  border: 1px solid rgba(var(--neon-rgb), .18);
  color: rgba(255, 255, 255, .75);
}

/* توضیحات کامل در انتهای باکس چپ */
.product-info__desc {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.product-info__desc h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: #fff;
}
.product-info__desc h3 i { color: var(--neon); }
.product-info__desc p {
  font-size: 0.9rem;
  line-height: 2;
  color: rgba(255, 255, 255, .55);
}

/* ---------- بخش دمو (زیر دو باکس) ---------- */
.product-demo {
  position: relative;
  z-index: 1;
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 22px;
  background: rgba(var(--neon-rgb, 0, 255, 255), .05);
  border: 1px solid rgba(var(--neon-rgb, 0, 255, 255), .18);
  box-shadow: inset 0 0 30px rgba(var(--neon-rgb, 0, 255, 255), .05);
}

.product-demo__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 16px;
  color: #fff;
}
.product-demo__title i { color: var(--neon, #00ffff); filter: drop-shadow(0 0 8px var(--neon-glow, rgba(0, 255, 255, .4))); }

/* --- پلیر دموی ملودی --- */
.demo-player {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(var(--neon-rgb), .2);
}

.demo-player__btn {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: #06060a;
  font-size: 1.15rem;
  background: var(--neon);
  box-shadow: 0 0 22px var(--neon-dim);
  transition: transform .15s ease, box-shadow .25s ease;
}
.demo-player__btn:hover { transform: scale(1.06); box-shadow: 0 0 30px var(--neon-dim); }

.demo-player__main { flex: 1; min-width: 0; }

.demo-player__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 38px;
  margin-bottom: 8px;
}
.demo-player__wave span {
  flex: 1;
  height: 30%;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--neon), rgba(var(--neon-rgb), .3));
  opacity: .55;
}
.demo-player.is-playing .demo-player__wave span { animation: waveBeat 1s ease-in-out infinite; }
.demo-player__wave span:nth-child(odd) { animation-delay: .15s; }
.demo-player__wave span:nth-child(3n) { animation-delay: .3s; }
.demo-player__wave span:nth-child(4n) { animation-delay: .45s; }

@keyframes waveBeat {
  0%, 100% { height: 25%; opacity: .5; }
  50% { height: 95%; opacity: 1; }
}

.demo-player__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, .5);
}
.demo-player__note { color: var(--neon); }

/* --- دموی شعر (بخشی از متن) --- */
.demo-lyrics {
  position: relative;
  padding: 22px 24px;
  border-radius: 14px;
  background:
    linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)),
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(var(--neon-rgb), .06) 36px 37px);
  border: 1px solid rgba(var(--neon-rgb), .2);
  font-size: 1rem;
  line-height: 2.3;
  color: rgba(255, 255, 255, .85);
  white-space: pre-line;
  text-align: center;
}
.demo-lyrics::after {
  content: '… ادامه پس از خرید';
  display: block;
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--neon);
  opacity: .9;
}

/* --- دموی ویدئو --- */
.demo-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--neon-rgb), .2);
  display: grid;
  place-items: center;
  background: #000;
}
.demo-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.demo-video__play {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: #06060a;
  font-size: 1.3rem;
  background: var(--neon);
  box-shadow: 0 0 26px var(--neon-dim);
  transition: transform .15s ease;
}
.demo-video__play:hover { transform: scale(1.08); }

/* ---------- بخش‌های پایینی ---------- */
.product-sections {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  margin-bottom: 10px;
}

.product-box {
  border-radius: 18px;
  padding: 24px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
}

.product-box__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 14px;
  color: #fff;
}
.product-box__title i { color: var(--neon, #00ffff); filter: drop-shadow(0 0 8px var(--neon-glow, rgba(0,255,255,.4))); }

.product-box__text {
  font-size: 0.92rem;
  line-height: 2;
  color: rgba(255, 255, 255, .6);
}

.product-features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.product-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(var(--neon-rgb, 0, 255, 255), .05);
  border: 1px solid rgba(var(--neon-rgb, 0, 255, 255), .1);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, .8);
}
.product-features li i { color: var(--neon, #00ffff); }

/* عنوان بخش مرتبط */
.product-related-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 6px 0 18px;
}
.product-related-title i { color: #00ffff; filter: drop-shadow(0 0 8px rgba(0, 255, 255, .4)); }

/* ---------- نوار بالای صفحه (بردکرامب + سبد) ---------- */
.product-topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 920px) {
  .product-hero { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .product-gallery .glow-orb,
  .product-gallery__scan { animation: none; }
}