/* Shared Tron palette for store/instructors and button styles for all three pages. */
.store-page, .instructors-page {
    --cyber-red: #ff2929;
    --cyber-red-text: #ff5c58;
    --cyber-bg: #090c11;
    --cyber-panel: #101620;
    --cyber-text: #eef1f4;
    --cyber-muted: #a2adba;
    --cyber-line: #b8d0e029;
    --neon-red-glow: 0 0 2px #ff8b8566, 0 0 10px #ff24247a, 0 0 24px #ff08083d;
    --neon-red-heading: 0 0 3px #ff666680, 0 0 16px #ff101078, 0 0 38px #ff08084d, 0 0 64px #d800002e;
    --neon-red-paper: 0 0 3px #ff24243d, 0 0 12px #ff080826;
    background: var(--cyber-bg);
    color: var(--cyber-text);
    font-family: Inter, Prompt, sans-serif;
}
.store-page {
    --store-red: var(--cyber-red-text);
    --store-bg: var(--cyber-bg);
    --store-panel: var(--cyber-panel);
    --store-text: var(--cyber-text);
    --store-muted: var(--cyber-muted);
    --store-line: var(--cyber-line);
}
.instructors-page {
    --color-primary: 255 41 41;
    --color-dark: 9 12 17;
    --color-card: 16 22 32;
    --color-accent: 255 92 88;
    --instructor-red: var(--cyber-red);
    --instructor-text: var(--cyber-text);
    --instructor-muted: var(--cyber-muted);
    --instructor-line: var(--cyber-line);
    --instructor-glow: var(--neon-red-glow);
}
:is(.store-page, .instructors-page) .glass { background: #090d14ee; backdrop-filter: blur(16px); }
:is(.store-page, .instructors-page) nav { border-bottom-color: #ff303030; box-shadow: 0 8px 28px #00000026; }
:is(.store-page, .instructors-page) nav a.text-primary > span:last-child { color: var(--cyber-red); text-shadow: var(--neon-red-glow); }
:is(.store-page, .instructors-page) nav a.text-primary:not([href="/index.php"]),
.store-page nav a[href="/store/"], .instructors-page nav a[href="/instructor/"] { color: var(--cyber-red-text); text-shadow: var(--neon-red-glow); }
:is(.store-page, .instructors-page) :focus-visible { outline-color: var(--cyber-red-text); }

/* Static grids and circuit edges stay behind the reading and click areas. */
.store-hero, .instructor-hero { position: relative; isolation: isolate; }
.store-hero::before, .instructor-hero::before { content: ''; position: absolute; inset: 90px 0 24px 26%; z-index: -1; pointer-events: none; background-image: linear-gradient(#ff45450c 1px, transparent 1px), linear-gradient(90deg, #7bbbd00a 1px, transparent 1px), radial-gradient(ellipse at 70% 40%, #a00e1917, transparent 65%); background-size: 64px 64px, 64px 64px, 100% 100%; mask-image: linear-gradient(90deg, transparent, black 30%, black 80%, transparent); }
.store-eyebrow, .instructor-eyebrow { color: var(--cyber-red-text); text-shadow: var(--neon-red-glow); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.store-eyebrow > span, .instructor-dot { background: var(--cyber-red); box-shadow: 0 0 6px #ff292999, 0 0 16px #ff080852; }
.store-neon, .instructor-intro h1 span { color: var(--cyber-red); text-shadow: var(--neon-red-heading); }
.hero-formats i { color: #bbc7d8; }
.hero-free-link i, .collection-intro h2 > span, .showcase-caption > span { color: var(--cyber-red-text); text-shadow: var(--neon-red-glow); }
.showcase-grid { border-radius: 0; background: radial-gradient(ellipse at center, #b4161626, transparent 67%), linear-gradient(#ff45450f 1px, transparent 1px), linear-gradient(90deg, #7bbbd00c 1px, transparent 1px); background-size: 100% 100%, 48px 48px, 48px 48px; }
.showcase-word { -webkit-text-stroke-color: #a9c5e323; }
.hero-showcase::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .65; background: linear-gradient(#ff5c58, #ff5c58) left top / 22px 1px no-repeat, linear-gradient(#ff5c58, #ff5c58) left top / 1px 22px no-repeat, linear-gradient(#ff5c58, #ff5c58) right bottom / 22px 1px no-repeat, linear-gradient(#ff5c58, #ff5c58) right bottom / 1px 22px no-repeat; }
.showcase-stamp { color: var(--cyber-red-text); border-color: #ff444466; text-shadow: var(--neon-red-glow); box-shadow: 0 0 18px #ff242410; }
.showcase-caption { color: #a2b1c5; }
.showcase-center > span { background: #cd101c; box-shadow: inset 0 0 0 1px #ff535399, 0 0 20px #ff161620; }
.collection-intro > span, .section-format, .catalog-heading h2 > span { color: #8d9eb6; }
.collection-intro > span, .section-format, .credential-strip > p { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Store controls retain clear selected states and readable prices. */
.catalog-toolbar { background: #090d14f5; border-color: var(--cyber-line); }
.catalog-filters button { border-radius: 4px; }
.catalog-filters button[aria-pressed="true"] { color: #ff8b85; background: #ff29291a; border-color: #ff4c4c73; text-shadow: var(--neon-red-glow); box-shadow: inset 0 -1px #ff292966; }
.catalog-filters button[aria-pressed="true"] span { color: #ffb1ac; text-shadow: var(--neon-red-glow); }
.book-card, .course-card { position: relative; border-radius: 6px; }
.book-card:hover, .book-card:focus-within, .course-card:hover, .course-card:focus-within { border-color: #ff4c4c73; box-shadow: 0 12px 32px #0004, 0 0 24px #ff242410; }
.book-card::before, .course-card::before, .certificate-card::before, .instructor-specialties::before { content: ''; position: absolute; z-index: 2; left: 0; top: -1px; width: 44px; height: 1px; background: var(--cyber-red); box-shadow: 0 0 7px #ff303080, 0 0 15px #ff101035; pointer-events: none; }
.book-art { border-radius: 5px 5px 0 0; background: radial-gradient(ellipse at 50% 90%, color-mix(in srgb, var(--cover-accent) 20%, #101620), #111c2b 82%); }
.product-badge:not(.badge-free), .course-tags span:first-child, .store-page summary i, .order-step-number, .checkout-note i { color: var(--cyber-red-text); text-shadow: var(--neon-red-glow); }
.product-badge:not(.badge-free) { background: #220e18eb; border: 1px solid #ff535336; }
.product-details summary { color: #bdc9d9; }
.product-price del { color: #929fb1; }
.cover-preview { background: #0b121eed; border-color: #92b8d13b; }
.store-page .button-buy, .instructor-button { background: #cd101c; border-color: #ff535399; box-shadow: 0 0 20px #ff161620; }
.store-page .button-buy:hover, .instructor-button:hover { background: #e21825; box-shadow: 0 0 26px #ff16163d; }
.store-button, .instructor-button { border-radius: 4px; }
.course-art { background: radial-gradient(ellipse at 50% 55%, #a01a293b, #111725 75%); }
.lab-symbol, .lab-title span { color: var(--cyber-red-text); text-shadow: var(--neon-red-glow); }
.lab-title span { text-shadow: var(--neon-red-heading); }
.lab-top, .lab-bottom, .lab-tags span { color: #b8a1b1; }
.order-guide-panel { border-radius: 5px; background: #0e141e; }
.support-link:hover { color: var(--cyber-red-text); text-shadow: var(--neon-red-glow); }
.product-modal { background: var(--cyber-panel); border-color: #ff444454; border-radius: 6px; box-shadow: 0 0 44px #ff161610; }
.product-modal::backdrop { background: #050911ed; }
.preview-art { background: radial-gradient(ellipse at 50% 70%, #9b172b33, #111a28); }
.preview-close { background: #0b121eed; border-color: #a8c0da40; }
.preview-close:hover { background: #321521; border-color: #ff5c5880; }

/* Instructor credentials keep original logo colors on a clean, light surface. */
.instructor-specialties { position: relative; padding-inline: 24px; border: 1px solid #9ebcda2b; border-radius: 4px; background: linear-gradient(135deg, #121c2b, #0d121b); }
.instructor-specialties > div { border-color: var(--cyber-line); }
.instructor-specialties > div:last-child { border-bottom: 0; }
.instructor-specialties span { color: var(--cyber-red-text); text-shadow: var(--neon-red-glow); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.credential-strip { border-color: var(--cyber-line); }
.credential-tags span { color: #c4d0e1; background: #a6c1e307; border-color: #a8c0da2e; border-radius: 3px; }
.credentials-section { scroll-margin-top: 76px; }
.certificate-card { position: relative; background: var(--cyber-panel); border-radius: 6px; transition: border-color .2s, box-shadow .2s; }
.certificate-card:hover { border-color: #ff4c4c6b; box-shadow: 0 0 24px #ff24240d; }
.certificate-logo { background: var(--cyber-text); border-bottom: 1px solid #a8c0da24; }
.certificate-category { color: var(--cyber-red-text); text-shadow: var(--neon-red-glow); }
.instructor-contact { background: var(--cyber-text); color: #202d40; border-top: 1px solid #ff292929; }
.instructor-contact .instructor-eyebrow { color: #b52d26; text-shadow: var(--neon-red-paper); }
.instructor-contact p:not(.instructor-eyebrow), .instructor-contact .instructor-text-link { color: #536277; }
.instructor-contact .instructor-text-link:hover { color: #b52d26; text-shadow: var(--neon-red-paper); }
:is(.store-page, .instructors-page) footer { border-color: var(--cyber-line); }

/* Neutral buttons light up red on hover or keyboard focus. */
:is(.home-page, .store-page, .instructors-page) {
    --cyber-button-bg: #141c28;
    --cyber-button-hover: #850b14;
    --cyber-button-border: #8294ad66;
    --cyber-button-glow: none;
}
.home-page .home-button, .store-page .store-button, .instructors-page .instructor-button,
:is(.home-page, .store-page, .instructors-page) nav a.text-primary[href="/index.php#contact"],
.home-page .gallery-toolbar button, .home-page .gallery-controls button, .store-page .preview-close {
    color: #fff3f2;
    background: var(--cyber-button-bg);
    border-color: var(--cyber-button-border);
    box-shadow: var(--cyber-button-glow);
    text-shadow: none;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.home-page .home-button:is(:hover, :focus-visible), .store-page .store-button:is(:hover, :focus-visible), .instructors-page .instructor-button:is(:hover, :focus-visible),
:is(.home-page, .store-page, .instructors-page) nav a.text-primary[href="/index.php#contact"]:is(:hover, :focus-visible),
.home-page .gallery-toolbar button:is(:hover, :focus-visible), .home-page .gallery-controls button:is(:hover, :focus-visible), .store-page .preview-close:is(:hover, :focus-visible) {
    color: white;
    background: var(--cyber-button-hover);
    border-color: #ff6972;
    box-shadow: inset 0 1px 0 #ffb3b326, 0 0 12px #ff252547, 0 0 30px #ff101040;
}
.home-page .home-button:is(:hover, :focus-visible):active, .store-page .store-button:is(:hover, :focus-visible):active, .instructors-page .instructor-button:is(:hover, :focus-visible):active {
    background: #650810;
    box-shadow: inset 0 2px 5px #28010780, 0 0 14px #ff10102e;
}
.store-page .catalog-filters button { color: #bcc7d8; background: #101822; border-color: #60728c52; box-shadow: none; }
.store-page .catalog-filters button[aria-pressed="true"] { color: #f3f6fa; background: #263242; border-color: #93a6bf; box-shadow: none; text-shadow: none; }
.store-page .catalog-filters button[aria-pressed="true"] span { color: inherit; text-shadow: none; }
.store-page .catalog-filters button:is(:hover, :focus-visible) { color: white; background: var(--cyber-button-hover); border-color: #ff6972; box-shadow: 0 0 12px #ff252547, 0 0 26px #ff101040; text-shadow: none; }
:is(.home-page, .store-page, .instructors-page) #mobileMenuToggle { width: 32px; height: 32px; color: #f3f6fa; background: var(--cyber-button-bg); border: 1px solid var(--cyber-button-border); border-radius: 4px; box-shadow: none; }
:is(.home-page, .store-page, .instructors-page) #mobileMenuToggle:is(:hover, :focus-visible) { background: var(--cyber-button-hover); border-color: #ff6972; box-shadow: 0 0 12px #ff252547, 0 0 26px #ff101040; }
.home-page .photo-expand, .store-page .cover-preview { color: #f3f6fa; background: #141c28e6; border-color: #8294ad66; box-shadow: none; }
.home-page .photo-button:is(:hover, :focus-visible) .photo-expand, .store-page .book-art:is(:hover, :focus-visible) .cover-preview { background: #850b14e6; border-color: #ff6972; box-shadow: 0 0 15px #ff101040; }

@media (max-width: 767px) {
    .store-hero::before, .instructor-hero::before { inset: 85px 0 24px; background-size: 48px 48px, 48px 48px, 100% 100%; opacity: .7; }
    .hero-showcase::before { inset: 8px 0 4px; }
    .instructor-specialties { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .store-page *, .store-page *::before, .store-page *::after,
    .instructors-page *, .instructors-page *::before, .instructors-page *::after { transition: none !important; animation: none !important; }
}