/* ============================================================
   XEROUR — PRODUCT DETAIL PAGE
============================================================ */

.product-page{
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) 32px 100px;
}

/* ---------------- Hero: gallery + info ---------------- */
.product-hero{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}

.product-gallery__main{
  position:relative;
  width:100%;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(124,92,255,0.25), rgba(11,16,23,0.7));
  border: 1px solid var(--border);
}
.product-gallery__main img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.product-gallery__fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; font-size:4rem;
  color: rgba(255,255,255,0.5);
}

.product-gallery__thumbs{
  display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;
}
.product-gallery__thumb{
  width:72px; height:54px; border-radius:8px; overflow:hidden;
  border: 2px solid var(--border); background:none; padding:0; cursor:pointer;
  transition: border-color .2s ease;
}
.product-gallery__thumb.is-active,
.product-gallery__thumb:hover{ border-color: var(--accent); }
.product-gallery__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.product-info__category{
  display:inline-block;
  font-size: 0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--accent); font-weight:700; margin-bottom:14px;
}
.product-info__title{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height:1.1; margin-bottom:14px;
}
.product-info__tagline{
  color: var(--text-soft); font-size:1.05rem; line-height:1.6; margin-bottom:14px;
}
.product-info__seller{
  color: var(--text-soft); font-size:0.85rem; margin-bottom:26px;
}
.product-info__seller strong{ color: var(--text); }

.product-info__price{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.product-info__price .price-now{ font-family: var(--font-display); font-weight:800; font-size:2rem; }
.product-info__price .price-was{ font-size:1.1rem; color: var(--text-soft); text-decoration:line-through; }
.product-info__price .price-free{ font-family: var(--font-display); font-weight:800; font-size:2rem; color:#5CFFB0; }
.product-info__install-note{ font-size:0.85rem; color: var(--text-soft); margin-bottom:20px; }

.product-info__actions{ display:flex; gap:14px; flex-wrap:wrap; margin: 20px 0 26px; }

.product-info__trust{ display:flex; flex-wrap:wrap; gap:10px; }
.product-info__trust span{
  padding: 8px 16px; border-radius:999px; border:1px solid var(--border);
  background: var(--card); font-size:0.78rem; color: var(--text-soft);
}

/* ---------------- Description / features / tech ---------------- */
.product-details{ display:flex; flex-direction:column; gap:48px; margin-bottom:60px; }
.product-block h2{
  font-family: var(--font-display); font-weight:700; font-size:1.4rem; margin-bottom:18px;
}
.product-block__prose{ color: var(--text-soft); line-height:1.75; max-width:760px; }

.product-features{ list-style:none; display:grid; grid-template-columns: 1fr 1fr; gap:12px 24px; max-width:760px; }
.product-features li{ display:flex; align-items:flex-start; gap:10px; color: var(--text-soft); font-size:0.95rem; }
.product-features__check{
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  background: rgba(92,255,176,0.15); color:#5CFFB0;
  display:flex; align-items:center; justify-content:center; font-size:0.7rem; margin-top:2px;
}

/* ---------------- CTA ---------------- */
.product-cta{
  text-align:center;
  padding: 60px 32px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.product-cta h2{ font-family: var(--font-display); font-weight:800; font-size:1.8rem; margin-bottom:10px; }
.product-cta p{ color: var(--text-soft); margin-bottom:24px; max-width:480px; margin-left:auto; margin-right:auto; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px){
  .product-hero{ grid-template-columns: 1fr; gap:36px; }
  .product-features{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .product-page{ padding: calc(var(--nav-h) + 24px) 20px 70px; }
  .product-info__actions{ flex-direction:column; }
  .product-info__actions .btn{ width:100%; justify-content:center; }
}