/* ============================================================
   CodingInABox — product pages (products.html, product-detail.html,
   products/*.html) page-specific styles.
   Shared rules (.glass-nav, .cta-cyber, .dark-glass, .neon-text-*,
   .nav-dropdown*, .logo-animated, .cyber-grid, .circuit-overlay,
   .mono-font) live in /lms/lms.css — do not re-declare them here.
   ============================================================ */

:root {
    --neon-green: #39FF14;
}

/* Product pages previously set overflow-x hidden via an inline
   @layer base body rule; keep it (glow/shimmer effects overhang). */
body {
    overflow-x: hidden;
}

/* ── Holographic shimmer on product imagery (detail + kit pages) ── */
.holographic-shim {
    position: relative;
    overflow: hidden;
}

.holographic-shim::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 0%, rgba(0, 240, 255, 0.1) 45%, rgba(255, 0, 229, 0.1) 50%, rgba(0, 240, 255, 0.1) 55%, transparent 100%);
    transform: rotate(25deg);
    pointer-events: none;
}

/* ── Gallery thumbnail active state (toggled by inline gallery JS —
      class name must stay exactly ".thumb-active") ── */
.thumb-active {
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

/* ── products.html catalog utilities ── */
.glass-card {
    background: rgba(10, 22, 40, 0.8);
    backdrop-filter: blur(16px);
    border: 1px solid #00F0FF33;
}

.glass-card:hover {
    border-color: #00F0FF;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.text-glow-cyan {
    text-shadow: 0 0 10px #00F0FF, 0 0 20px #00F0FF66;
}

.text-glow-magenta {
    text-shadow: 0 0 10px #FF00E5, 0 0 20px #FF00E566;
}

.text-cyan-neon\/40,
.text-cyan-neon\/50 {
    color: rgba(0, 240, 255, 0.82) !important;
}

.neon-border-glow {
    box-shadow: 0 0 5px #00F0FF, inset 0 0 5px #00F0FF;
}

.circuit-pattern {
    background-image: radial-gradient(#00F0FF 0.5px, transparent 0.5px), radial-gradient(#00F0FF 0.5px, #050B1A 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    opacity: 0.1;
}

.hologram-shimmer {
    position: relative;
    overflow: hidden;
}

.hologram-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg,
            transparent 0%,
            rgba(0, 240, 255, 0.1) 40%,
            rgba(255, 0, 229, 0.1) 50%,
            rgba(0, 240, 255, 0.1) 60%,
            transparent 100%);
    pointer-events: none;
}

.grid-bg {
    background-image:
        linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}