/* ============================================================
   PRODUCT DETAIL PAGES — JOPEX
   Loads on top of style.css (shares :root tokens, nav, footer)
   ============================================================ */

.pp-main{padding-top:74px}

/* breadcrumb */
.pp-crumb{max-width:1180px;margin:0 auto;padding:1.6rem 2rem 0;font-size:0.82rem;color:var(--gray)}
.pp-crumb a{color:var(--gray);text-decoration:none;transition:color .2s}
.pp-crumb a:hover{color:var(--cyan)}
.pp-crumb span{color:rgba(255,255,255,0.85)}

/* ── HERO ── */
.pp-hero{max-width:1180px;margin:0 auto;padding:2.2rem 2rem 3rem;display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.pp-badge{display:inline-flex;align-items:center;gap:8px;font-size:0.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan);background:rgba(0,200,232,0.08);border:1px solid rgba(0,200,232,0.3);padding:7px 14px;border-radius:100px;margin-bottom:1.4rem}
.pp-title{font-size:clamp(2.4rem,4.5vw,3.6rem);font-weight:800;letter-spacing:-0.03em;color:#fff;line-height:1.05;margin-bottom:1.1rem}
.pp-title .hl{background:linear-gradient(135deg,var(--cyan),var(--blue2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pp-lead{font-size:1.06rem;color:var(--gray);line-height:1.7;max-width:34em;margin-bottom:1.8rem}
.pp-meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-bottom:2rem}
.pp-meta div{font-size:0.82rem;color:var(--gray)}
.pp-meta strong{display:block;color:#fff;font-size:0.96rem;font-weight:700;margin-top:2px}
.pp-cta{display:flex;gap:0.9rem;flex-wrap:wrap}
.pp-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:11px;font-weight:700;font-size:0.95rem;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.pp-btn-p{background:linear-gradient(135deg,var(--blue2),var(--cyan));color:#fff;box-shadow:0 10px 28px rgba(0,150,200,0.3)}
.pp-btn-p:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,150,200,0.42)}
.pp-btn-o{background:rgba(255,255,255,0.04);color:#e8f0fb;border:1px solid rgba(255,255,255,0.14)}
.pp-btn-o:hover{border-color:rgba(0,200,232,0.5);background:rgba(255,255,255,0.07)}

/* hero showcase image */
.pp-shot{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,#0a1628 0%,#13315f 100%);border:1px solid rgba(255,255,255,0.07);display:flex;align-items:center;justify-content:center}
.pp-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-shot .ph{font-size:0.8rem;letter-spacing:2px;color:rgba(255,255,255,0.22);text-transform:uppercase;font-weight:700}

/* ── SECTIONS ── */
.pp-section{max-width:1180px;margin:0 auto;padding:3.2rem 2rem}
.pp-h{font-size:1.9rem;font-weight:800;color:#fff;letter-spacing:-0.02em;margin-bottom:0.8rem}
.pp-sub{font-size:0.98rem;color:var(--gray);line-height:1.75;max-width:60ch;margin-bottom:2.4rem}

/* feature grid */
.pp-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.pp-feat{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:1.6rem;transition:border-color .3s,transform .3s}
.pp-feat:hover{border-color:rgba(0,200,232,0.3);transform:translateY(-3px)}
.pp-feat-ic{width:42px;height:42px;border-radius:11px;background:rgba(0,200,232,0.1);border:1px solid rgba(0,200,232,0.25);display:grid;place-items:center;margin-bottom:1rem;font-size:1.2rem}
.pp-feat h4{font-size:1.02rem;font-weight:700;color:#fff;margin-bottom:0.45rem}
.pp-feat p{font-size:0.86rem;color:var(--gray);line-height:1.6}

/* gallery */
.pp-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;max-width:980px;margin:0 auto}
.pp-gallery figure{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:9/19;background:linear-gradient(135deg,#0a1628,#13315f);border:1px solid rgba(255,255,255,0.09);display:flex;align-items:center;justify-content:center;box-shadow:0 20px 46px rgba(0,0,0,0.35)}
.pp-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.pp-gallery .ph{font-size:0.72rem;letter-spacing:1.5px;color:rgba(255,255,255,0.22);text-transform:uppercase;font-weight:700;text-align:center;padding:0 1rem}

/* CTA band */
.pp-band{background:linear-gradient(135deg,#0a1628,#0a2040);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.pp-band-in{max-width:1180px;margin:0 auto;padding:3.4rem 2rem;text-align:center}
.pp-band h3{font-size:1.8rem;font-weight:800;color:#fff;margin-bottom:0.7rem}
.pp-band p{color:var(--gray);margin-bottom:1.8rem}

@media(max-width:860px){
  .pp-hero{grid-template-columns:1fr;gap:2rem}
  .pp-features,.pp-gallery{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .pp-features,.pp-gallery{grid-template-columns:1fr}
  .pp-section{padding:2.4rem 1.2rem}
  .pp-hero{padding:1.6rem 1.2rem 2.4rem}
}

/* product logo panel (detail-page hero showcase) */
.pp-shot.logo{background:radial-gradient(circle at 50% 38%,#ffffff,#e4ebf5);display:grid;place-items:center;padding:2.4rem}
.pp-shot.logo img{position:static;inset:auto;width:auto;height:auto;max-width:80%;max-height:80%;object-fit:contain;filter:drop-shadow(0 10px 26px rgba(0,0,0,.18))}