/* Product detail pages — shared by every products/*.html.
   Previously inlined in a <style> block on all eleven, which is what pushed
   duplication on new code to 84.6% against Sonar's 3% gate. */

.product-detail { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; }
.product-detail h1 { font-family: var(--cy-font-display, 'Orbitron', monospace); color: var(--cy-neon-cyan, #00f2ff); font-size: 1.8rem; }

/* Category badge. Each page previously repeated the base rule with its own
   colour hardcoded, then overrode it with a .badge.<category> modifier — the
   modifier is more specific, so the base colour never actually rendered.
   One accent custom property collapses both into the modifier below. */
.product-detail .badge {
  --badge-accent: var(--cy-neon-cyan, #00f2ff);
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--badge-accent);
  border-radius: 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--badge-accent);
  margin-bottom: 1rem;
}
.product-detail .badge.tool         { --badge-accent: var(--cy-neon-cyan, #00f2ff); }
.product-detail .badge.game         { --badge-accent: var(--cy-neon-pink, #ff00ff); }
.product-detail .badge.productivity { --badge-accent: #00ff88; }
.product-detail .badge.experiment   { --badge-accent: #ffaa00; }

.product-detail .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 1.5rem; }
.product-detail .tags span { font-size: 0.7rem; padding: 0.2rem 0.5rem; border: 1px solid var(--cy-neon-cyan, #00f2ff); border-radius: 4px; color: var(--cy-neon-cyan, #00f2ff); text-transform: uppercase; }

.product-detail .cta-group { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0; }
.product-detail .cta-group a, .product-detail .cta-group button { padding: 0.5rem 1.25rem; border: 1px solid var(--cy-neon-cyan, #00f2ff); color: var(--cy-neon-cyan, #00f2ff); text-decoration: none; border-radius: 4px; background: transparent; cursor: pointer; font-family: var(--cy-font-mono, 'Share Tech Mono', monospace); font-size: 0.85rem; }
.product-detail .cta-group a:hover, .product-detail .cta-group button:hover { background: var(--cy-neon-cyan, #00f2ff); color: var(--cy-bg, #0a0a0c); }

.product-detail .what-i-learned { background: rgba(0,242,255,0.05); border-left: 3px solid var(--cy-neon-cyan, #00f2ff); padding: 1rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0; }
.product-detail .what-i-learned h3 { margin-top: 0; color: var(--cy-neon-cyan, #00f2ff); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; }

.product-detail .back-link { display: inline-block; margin-bottom: 1rem; color: var(--cy-neon-cyan, #00f2ff); text-decoration: none; font-family: var(--cy-font-mono, 'Share Tech Mono', monospace); font-size: 0.8rem; }
.product-detail .back-link:hover { text-decoration: underline; }

/* Only cyberpunk-ui and neonflux carry a <pre>, only neonflux a .shot, but
   both rules are inert on pages without those elements. */
.product-detail pre { background: var(--cy-bg, #0a0a0c); border: 1px solid rgba(0,242,255,0.2); border-radius: 4px; padding: 1rem; overflow-x: auto; font-family: var(--cy-font-mono, 'Share Tech Mono', monospace); font-size: 0.8rem; color: var(--cy-neon-cyan, #00f2ff); }
.product-detail .shot { width: 100%; height: auto; border: 1px solid rgba(0,242,255,0.25); border-radius: 4px; margin: 1rem 0 1.5rem; }