/* ===== RepsFinder · product detail (premium black + neon cyan) ===== */
:root{
  --void:#030507; --panel:#0A1017; --panel2:#0D1520;
  --gold:#00E5FF; --gold-bright:#4DF2FF; --gold-deep:#0096C7;
  --chrome:#F8FAFC; --chrome-dim:#A9BAC8;
  --line:rgba(0,229,255,.16);
  --rad:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{background:var(--void);color:var(--chrome);font-family:system-ui,-apple-system,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh}
::selection{background:var(--gold);color:#031016}
a{color:inherit}
img{max-width:100%}

/* ===== shared shell (nav/canvas/footer come from findses.css) ===== */
.wrap{position:relative;z-index:10;max-width:1100px;margin:0 auto;padding:120px clamp(18px,5vw,48px) 60px}
.crumb{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--chrome-dim);margin-bottom:26px}
.crumb a{text-decoration:none;color:var(--chrome-dim)}
.crumb a:hover{color:var(--gold)}
.crumb b{color:var(--gold)}

/* ===== product layout ===== */
.product{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:820px){.product{grid-template-columns:1fr}}

/* ===== gallery: QC photos contained, never enormous ===== */
.gallery{min-width:0}
.gallery .main{position:relative;aspect-ratio:1;width:100%;max-height:560px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#0A1017;display:flex;align-items:center;justify-content:center}
.gallery .main img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumbs button{flex:1 1 62px;aspect-ratio:1;max-width:86px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0A1017;cursor:pointer;padding:0;transition:border-color .3s,transform .3s}
.thumbs button:hover{transform:translateY(-2px)}
.thumbs button.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px -6px rgba(0,229,255,.7)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== info column ===== */
.info .cat{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.info h1{font-family:system-ui,sans-serif;font-weight:900;text-transform:none;font-size:clamp(26px,4vw,42px);line-height:1.04;letter-spacing:-.5px;margin-bottom:12px}
.price{font-weight:800;font-size:clamp(30px,4.4vw,44px);color:var(--gold-bright);margin:6px 0 10px}
.store{font-size:13px;color:var(--chrome-dim);margin-bottom:24px}
.store b{color:var(--chrome)}
.desc{font-weight:300;color:#c4ccd6;line-height:1.75;font-size:15px;margin-bottom:26px;max-width:52ch}
.specs{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.specs li{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8a8a93;display:flex;flex-direction:column;gap:4px}
.specs li b{color:var(--chrome);font-size:13px;letter-spacing:0;text-transform:none}

/* ===== buy block with real agent logos ===== */
.buy h3{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--chrome-dim);margin-bottom:14px}
.agents{display:flex;flex-direction:column;gap:10px}
.agent-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;border-radius:14px;padding:12px 20px;border:1px solid var(--line);background:linear-gradient(165deg,rgba(255,255,255,.03),rgba(15,23,42,.4));transition:transform .3s,border-color .3s,box-shadow .3s}
.agent-btn:hover{transform:translateY(-3px);border-color:rgba(0,229,255,.5);box-shadow:0 18px 40px -18px rgba(0,229,255,.5)}
.agent-btn .l{display:flex;align-items:center;gap:12px;min-width:0}
.agent-btn .alogo{width:38px;height:38px;border-radius:10px;object-fit:cover;flex-shrink:0;border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 14px -4px rgba(0,0,0,.6)}
.agent-btn .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.agent-btn .nm{font-weight:800;text-transform:uppercase;font-size:17px;letter-spacing:.02em}
.agent-btn .bn{font-size:11px;color:var(--chrome-dim)}
.agent-btn .go{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--chrome-dim);white-space:nowrap;flex-shrink:0}
.agent-btn.kako{border-color:rgba(0,229,255,.4);background:linear-gradient(165deg,rgba(0,229,255,.1),rgba(15,23,42,.4))}
.agent-btn.kako:hover{box-shadow:0 18px 40px -18px rgba(0,229,255,.65)}
.agent-btn.kako .dot{background:var(--gold)}
.agent-btn.kako .go{color:var(--gold-bright)}
.agent-btn.usf{border-color:rgba(59,130,246,.45);background:linear-gradient(165deg,rgba(59,130,246,.12),rgba(15,23,42,.4))}
.agent-btn.usf:hover{border-color:rgba(59,130,246,.7);box-shadow:0 18px 40px -18px rgba(59,130,246,.6)}
.agent-btn.usf .dot{background:#60A5FA}
.agent-btn.usf .go{color:#93C5FD}
.agent-btn.lit{border-color:rgba(245,197,24,.4);background:linear-gradient(165deg,rgba(245,197,24,.1),rgba(15,23,42,.4))}
.agent-btn.lit:hover{border-color:rgba(245,197,24,.65);box-shadow:0 18px 40px -18px rgba(245,197,24,.55)}
.agent-btn.lit .dot{background:#F5C518}
.agent-btn.lit .go{color:#FACC15}

/* ===== QC link ===== */
.qc{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-bright);text-decoration:none;border:1px solid rgba(0,229,255,.35);border-radius:30px;padding:9px 16px;transition:all .3s}
.qc:hover{background:rgba(0,229,255,.1);border-color:var(--gold)}
.note{margin-top:22px;font-size:12px;color:#6a6a73;line-height:1.7;max-width:56ch}

/* ===== related ===== */
.related{position:relative;z-index:10;max-width:1100px;margin:0 auto;padding:20px clamp(18px,5vw,48px) 40px}
.related h2{font-family:system-ui,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(22px,4vw,34px);transform:skewX(-5deg);letter-spacing:.01em;margin-bottom:20px}
.related h2 span{color:var(--gold)}
.related .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.related .rcard{text-decoration:none;border:1px solid rgba(0,229,255,.16);border-radius:14px;overflow:hidden;background:linear-gradient(165deg,rgba(255,255,255,.03),rgba(15,23,42,.4));display:block;transition:transform .3s,border-color .3s}
.related .rcard:hover{transform:translateY(-4px);border-color:rgba(0,229,255,.5)}
.related .rcard img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.related .rcard .rmeta{padding:10px 12px}
.related .rcard .rcat{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#00A8C7}
.related .rcard .rtitle{font-size:13px;color:var(--chrome);margin-top:4px;line-height:1.3}
.related .rcard .rprice{font-weight:800;color:var(--gold-bright);margin-top:6px}

@media(max-width:560px){.agents{flex-direction:column}}