/* ===================================================================
   Ptekno - Halaman Detail Produk
   Memakai token warna global (--volt, --volt2) dari app.css.
   =================================================================== */

:root{
  --pdp-ink:#0A0E1A;
  --pdp-line:#E8ECF4;
  --pdp-flash:#F59E0B;
  --pdp-sale:#E11D48;
  --pdp-stock:#16A34A;
}

/* ---------- Tab navigasi dalam halaman ---------- */
.pdp-tabbar{
  position:sticky; top:64px; z-index:30;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--pdp-line);
  margin:0 -1rem; padding:0 1rem;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.pdp-tabbar.is-stuck{ opacity:1; transform:none; pointer-events:auto; }
.pdp-tabbar-title{ font-weight:700; color:var(--pdp-ink); font-size:.9rem; margin-right:auto; max-width:40%; }
.pdp-tab{
  flex:0 0 auto; padding:.85rem .25rem; margin:0 .6rem; font-size:.875rem; font-weight:600;
  color:#64748B; border-bottom:2px solid transparent; white-space:nowrap; transition:color .2s, border-color .2s;
}
.pdp-tab:hover{ color:var(--pdp-ink); }
.pdp-tab.active{ color:var(--volt); border-bottom-color:var(--volt); }

/* ---------- Galeri ---------- */
.pdp-stage{
  position:relative; border-radius:1rem; overflow:hidden; background:#fff;
  border:1px solid var(--pdp-line); aspect-ratio:1/1; display:grid; place-items:center;
}
.pdp-stage-media{ width:100%; height:100%; object-fit:cover; display:block; }
svg.pdp-stage-media{ padding:14%; background:#F4F6FB; }
.pdp-stage video.pdp-stage-media{ background:#000; object-fit:contain; }
.pdp-zoom-btn{
  position:absolute; right:.6rem; bottom:.6rem; width:34px; height:34px; border-radius:.6rem;
  background:rgba(10,14,26,.65); color:#fff; display:grid; place-items:center; opacity:0; transition:opacity .2s;
}
.pdp-stage:hover .pdp-zoom-btn{ opacity:1; }
.pdp-zoom-btn svg{ width:18px; height:18px; fill:currentColor; }

.pdp-thumb-rail{ display:flex; gap:.5rem; margin-top:.75rem; overflow-x:auto; padding-bottom:.25rem; }
.pdp-thumb{
  position:relative; flex:0 0 auto; width:60px; height:60px; border-radius:.6rem; overflow:hidden;
  border:2px solid var(--pdp-line); background:#F4F6FB; cursor:pointer; transition:border-color .2s, transform .2s;
}
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumb:hover{ transform:translateY(-2px); }
.pdp-thumb.active{ border-color:var(--volt); }
.pdp-thumb-play{
  position:absolute; inset:0; display:grid; place-items:center; background:rgba(10,14,26,.35); color:#fff;
}
.pdp-thumb-play svg{ width:22px; height:22px; fill:currentColor; }

/* ---------- Varian ---------- */
.pdp-variant{
  display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .8rem; border-radius:.6rem;
  border:1.5px solid var(--pdp-line); background:#fff; font-size:.85rem; font-weight:600; color:#334155;
  cursor:pointer; transition:border-color .2s, background .2s, color .2s;
}
.pdp-variant:hover{ border-color:#C7CDDB; }
.pdp-variant.selected{ border-color:var(--volt); background:rgba(79,70,229,.06); color:var(--volt); }
.pdp-variant.is-out{ opacity:.45; cursor:not-allowed; text-decoration:line-through; }
.pdp-swatch{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.12); background:#cbd5e1; }

/* ---------- Info produk ---------- */
.pdp-info{ border:1px solid var(--pdp-line); border-radius:.8rem; overflow:hidden; }
.pdp-info-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem .9rem; font-size:.85rem; }
.pdp-info-row + .pdp-info-row{ border-top:1px solid var(--pdp-line); }
.pdp-info-row span{ color:#64748B; }
.pdp-info-row b{ color:var(--pdp-ink); font-weight:600; text-align:right; }

/* ---------- Deskripsi ---------- */
.pdp-desc{ white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; }
.pdp-desc.expanded{ -webkit-line-clamp:unset; }
.pdp-readmore{ margin-top:.4rem; font-size:.85rem; font-weight:600; color:var(--volt); }
.pdp-readmore:hover{ text-decoration:underline; }

/* ---------- Kotak beli ---------- */
/* Latar slate-50 agar tampil sebagai sub-section di dalam kartu putih besar. */
.pdp-buybox{ border:1px solid var(--pdp-line); border-radius:1rem; padding:1.1rem; background:#F8FAFC; }
.pdp-buybox-thumb{ width:48px; height:48px; border-radius:.55rem; overflow:hidden; flex:0 0 auto; background:#F4F6FB; border:1px solid var(--pdp-line); }
.pdp-buybox-thumb img, .pdp-buybox-thumb svg{ width:100%; height:100%; object-fit:cover; }
.pdp-qty{ display:inline-flex; align-items:center; border:1.5px solid var(--pdp-line); border-radius:.6rem; overflow:hidden; }
.pdp-qty-btn{ width:34px; height:36px; display:grid; place-items:center; color:#475569; font-size:1.1rem; background:#fff; transition:background .15s; }
.pdp-qty-btn:hover{ background:#F4F6FB; }
.pdp-qty-btn:disabled{ opacity:.4; cursor:not-allowed; }
.pdp-qty-input{ width:46px; height:36px; text-align:center; border:0; border-left:1.5px solid var(--pdp-line); border-right:1.5px solid var(--pdp-line); font-variant-numeric:tabular-nums; font-weight:600; color:var(--pdp-ink); outline:none; }
.pdp-btn-primary, .pdp-btn-ghost{
  width:100%; height:44px; border-radius:.7rem; font-weight:700; font-size:.9rem; display:flex; align-items:center; justify-content:center; gap:.5rem; transition:opacity .2s, background .2s, color .2s;
}
.pdp-btn-primary{ background:linear-gradient(110deg,#4F46E5,#6366F1 45%,#06B6D4); color:#fff; }
.pdp-btn-primary:hover{ opacity:.94; }
.pdp-btn-primary:disabled{ background:#CBD5E1; cursor:not-allowed; }
.pdp-btn-ghost{ background:#fff; color:var(--volt); border:1.5px solid var(--volt); }
.pdp-btn-ghost:hover{ background:rgba(79,70,229,.06); }
.pdp-btn-ghost:disabled{ color:#94A3B8; border-color:#CBD5E1; cursor:not-allowed; }
.pdp-buybox-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--pdp-line); }
.pdp-buybox-actions button{ display:inline-flex; flex-direction:column; align-items:center; gap:.2rem; font-size:.72rem; color:#64748B; font-weight:500; transition:color .2s; }
.pdp-buybox-actions button:hover{ color:var(--volt); }
.pdp-buybox-actions button svg{ width:20px; height:20px; }
.pdp-buybox-actions .heart svg{ fill:none; stroke:currentColor; }
.pdp-buybox-actions .heart.on svg{ fill:var(--pdp-sale); stroke:var(--pdp-sale); }

/* ---------- Ringkasan ulasan ---------- */
/* Latar slate-50 (sebelumnya gradient krem) agar konsisten sebagai sub-section. */
.pdp-rv-summary{ display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center; border:1px solid var(--pdp-line); border-radius:1rem; padding:1.2rem 1.4rem; background:#F8FAFC; }
.pdp-rv-score{ padding-right:1.4rem; border-right:1px solid var(--pdp-line); }
.pdp-rv-bars{ display:flex; flex-direction:column; gap:.4rem; }
.pdp-bar-row{ display:grid; grid-template-columns:34px 1fr 32px; align-items:center; gap:.6rem; }
.pdp-bar-star{ display:inline-flex; align-items:center; gap:2px; font-size:.78rem; color:#64748B; font-variant-numeric:tabular-nums; }
.pdp-bar{ height:7px; border-radius:99px; background:#EEF1F6; overflow:hidden; }
.pdp-bar-fill{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#16A34A,#22C55E); transition:width .7s cubic-bezier(.2,.7,.2,1); }
.pdp-bar-count{ font-size:.78rem; color:#94A3B8; text-align:right; font-variant-numeric:tabular-nums; }

@media (max-width:520px){
  .pdp-rv-summary{ grid-template-columns:1fr; gap:1rem; }
  .pdp-rv-score{ border-right:0; border-bottom:1px solid var(--pdp-line); padding-right:0; padding-bottom:1rem; }
}

/* ---------- Foto & video pembeli ---------- */
.pdp-media-grid{ display:flex; gap:.6rem; flex-wrap:wrap; }
.pdp-media-cell{ position:relative; width:84px; height:84px; border-radius:.7rem; overflow:hidden; background:#F4F6FB; border:1px solid var(--pdp-line); cursor:pointer; }
.pdp-media-cell img{ width:100%; height:100%; object-fit:cover; }
.pdp-media-cell.is-video{ display:grid; place-items:center; color:#fff; background:#1E293B; }
.pdp-media-cell.is-video svg{ width:26px; height:26px; fill:currentColor; }
.pdp-media-more{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(10,14,26,.6); color:#fff; font-weight:700; font-size:1.1rem; }

/* ---------- Filter ulasan ---------- */
/* Latar slate-50 ditambahkan agar tampil sebagai sub-section (sebelumnya transparan). */
.pdp-filter{ border:1px solid var(--pdp-line); border-radius:.9rem; padding:1rem; height:max-content; background:#F8FAFC; }
.pdp-filter-group{ padding:.6rem 0; border-bottom:1px solid var(--pdp-line); }
.pdp-filter-group:last-of-type{ border-bottom:0; }
.pdp-filter-title{ font-size:.8rem; font-weight:700; color:var(--pdp-ink); margin-bottom:.4rem; }
.pdp-check{ display:flex; align-items:center; gap:.55rem; padding:.3rem 0; font-size:.85rem; color:#475569; cursor:pointer; }
.pdp-check input{ width:16px; height:16px; accent-color:#4F46E5; border-radius:4px; }
.pdp-filter-reset{ margin-top:.7rem; font-size:.82rem; font-weight:600; color:var(--volt); }
.pdp-filter-reset:hover{ text-decoration:underline; }

.pdp-sort{ display:inline-flex; align-items:center; gap:.5rem; }
.pdp-select{ border:1.5px solid var(--pdp-line); border-radius:.55rem; padding:.4rem 1.8rem .4rem .7rem; font-size:.85rem; font-weight:600; color:var(--pdp-ink); background:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; -webkit-appearance:none; appearance:none; cursor:pointer; }

.pdp-review-list{ display:flex; flex-direction:column; }
.pdp-loadmore{ padding:.65rem 1.6rem; border-radius:.7rem; border:1.5px solid var(--pdp-line); font-size:.85rem; font-weight:600; color:#475569; transition:border-color .2s, color .2s; }
.pdp-loadmore:hover{ border-color:var(--volt); color:var(--volt); }
.pdp-loadmore.is-loading{ opacity:.6; pointer-events:none; }

/* ---------- Bilah aksi bawah (mobile) ---------- */
.pdp-bottombar{
  position:fixed; left:0; right:0; bottom:0; z-index:35; display:flex; align-items:center; gap:.6rem;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom,0)); background:#fff; border-top:1px solid var(--pdp-line);
  box-shadow:0 -8px 24px -18px rgba(15,23,42,.4);
}
.pdp-bottombar-icon{ width:46px; height:46px; flex:0 0 auto; border-radius:.7rem; border:1.5px solid var(--pdp-line); display:grid; place-items:center; color:#475569; }
.pdp-bottombar-icon svg{ width:22px; height:22px; }
.pdp-bottombar-cart, .pdp-bottombar-buy{ flex:1; height:46px; border-radius:.7rem; font-weight:700; font-size:.88rem; }
.pdp-bottombar-cart{ background:rgba(79,70,229,.1); color:var(--volt); }
.pdp-bottombar-buy{ background:linear-gradient(110deg,#4F46E5,#06B6D4); color:#fff; }
.pdp-bottombar-cart:disabled, .pdp-bottombar-buy:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Lightbox (dibuat oleh product.js) ---------- */
.pdp-lightbox{ position:fixed; inset:0; z-index:80; background:rgba(10,14,26,.92); display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; transition:opacity .2s; }
.pdp-lightbox.show{ opacity:1; }
.pdp-lightbox img, .pdp-lightbox video{ max-width:100%; max-height:90vh; border-radius:.6rem; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
.pdp-lightbox-close{ position:absolute; top:1rem; right:1rem; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; font-size:1.4rem; }

/* ===================================================================
   Kartu ulasan (dipakai produk/_review.php & _review_empty.php)
   =================================================================== */
.rv-item{ padding:1.1rem 0; border-bottom:1px solid var(--pdp-line); }
.rv-item:first-child{ padding-top:0; }
.rv-avatar{
  width:40px; height:40px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:.85rem; color:var(--volt); background:rgba(79,70,229,.1);
}
.rv-stars{ display:inline-flex; gap:1px; }
.rv-stars svg{ width:15px; height:15px; }
.rv-stars svg.on{ fill:var(--pdp-flash); }
.rv-stars svg.off{ fill:#E2E8F0; }
.rv-thumbs{ display:flex; gap:.4rem; margin-top:.6rem; flex-wrap:wrap; }
.rv-thumb{ position:relative; width:60px; height:60px; border-radius:.5rem; overflow:hidden; background:#F4F6FB; border:1px solid var(--pdp-line); cursor:pointer; }
.rv-thumb img{ width:100%; height:100%; object-fit:cover; }
.rv-thumb.is-video{ display:grid; place-items:center; color:#fff; background:#1E293B; }
.rv-thumb.is-video svg{ width:22px; height:22px; fill:currentColor; }
.rv-helpful{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.7rem; font-size:.8rem; color:#64748B; padding:.35rem .7rem; border:1px solid var(--pdp-line); border-radius:99px; transition:border-color .2s, color .2s; }
.rv-helpful:hover{ border-color:var(--volt); color:var(--volt); }
.rv-helpful.voted{ border-color:var(--volt); color:var(--volt); background:rgba(79,70,229,.06); }
.rv-helpful svg{ width:15px; height:15px; fill:currentColor; }
.rv-empty{ text-align:center; padding:2.5rem 1rem; color:#94A3B8; }
.rv-empty svg{ width:42px; height:42px; margin:0 auto .6rem; fill:none; stroke:#CBD5E1; stroke-width:1.6; }

@media (prefers-reduced-motion: reduce){
  .pdp-bar-fill{ transition:none; }
  .pdp-tabbar{ transition:none; }
}