/* ============================================================
   THEME.CSS - CSS Custom Properties + Light/Dark mode
   ============================================================ */

/* --- LIGHT MODE (default) --- */
:root {
    /* Chrome height — declared here so JS (scroll.js headerOffset) and CSS
       (mobile nav top, body padding) agree instead of relying on fallbacks. */
    --header-h: 72px;

    /* ---- COLOR SYSTEM ----------------------------------------------
       ONE primary brand accent (violet) + ONE secondary accent (cyan).
       Everything else is neutral. No third hue, no neon.
       --------------------------------------------------------------- */
    --accent: #7C3AED;
    --accent-light: #A78BFA;
    --accent-dark: #6D28D9;
    --accent-glow: rgba(124, 58, 237, 0.35);
    --accent-glow-soft: rgba(124, 58, 237, 0.10);
    --accent-gradient: linear-gradient(135deg, #7C3AED, #6D28D9);

    /* Secondary accent — used sparingly: verified badges, progress rails,
       "fresh" zone tint. Never as a large fill. */
    --accent-2: #0891b2;
    --accent-2-light: #22d3ee;
    --accent-2-glow-soft: rgba(8, 145, 178, 0.10);

    /* Semantic states (fixed across themes for recognisability) */
    --ok: #16a34a;
    --ok-soft: rgba(22, 163, 74, 0.10);
    --ok-border: rgba(22, 163, 74, 0.28);
    --heart: #f43f5e;
    --heart-soft: rgba(244, 63, 94, 0.08);
    --heart-border: rgba(244, 63, 94, 0.30);

    /* ---- TYPOGRAPHY SCALE (fluid, clamp-based) ---------------------- */
    --fs-display: clamp(2.6rem, 6.4vw, 5.1rem);   /* hero headline      */
    --fs-h1:      clamp(2.1rem, 4.2vw, 3.1rem);   /* page titles        */
    --fs-h2:      clamp(1.6rem, 2.9vw, 2.35rem);  /* section titles     */
    --fs-h3:      clamp(1.15rem, 1.6vw, 1.4rem);  /* card titles        */
    --fs-body:    clamp(0.95rem, 1.05vw, 1.05rem);
    --fs-meta:    0.78rem;

    /* ---- MOTION TOKENS --------------------------------------------- */
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-theme: 0.4s;

    /* ---- GLASS ------------------------------------------------------ */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-blur: blur(18px) saturate(1.5);

    --bg: #f8f9fc;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #f1f3f9;
    --bg-input: #f4f6fb;
    /* Translucent surface: lets the ambient 3D layer show through
       on big section fills while staying readable (glassy tint) */
    --bg-surface-t: rgba(255, 255, 255, 0.66);

    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --border: #e2e8f0;
    --border-subtle: #f1f5f9;
    --border-accent: rgba(124, 58, 237, 0.2);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.10);
    --shadow-glow: 0 0 30px rgba(124, 58, 237, 0.12);

    --header-bg: rgba(255, 255, 255, 0.85);
    --header-border: rgba(226, 232, 240, 0.8);

    --hero-bg: linear-gradient(135deg, rgba(240, 236, 255, 0.82) 0%, rgba(232, 244, 255, 0.76) 50%, rgba(248, 249, 252, 0.88) 100%);

    --card-hover-shadow: 0 20px 50px rgba(124, 58, 237, 0.12);

    --scrollbar-track: #f1f5f9;
    --scrollbar-thumb: #cbd5e1;
}

/* --- DARK MODE --- */
[data-theme="dark"] {
    --accent-2: #22d3ee;
    --accent-2-light: #67e8f9;
    --accent-2-glow-soft: rgba(34, 211, 238, 0.10);

    --ok: #4ade80;
    --ok-soft: rgba(34, 197, 94, 0.10);
    --ok-border: rgba(34, 197, 94, 0.32);

    --glass-bg: rgba(24, 24, 27, 0.52);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-blur: blur(20px) saturate(1.4);

    --bg: #09090b;
    --bg-surface: #111113;
    --bg-card: #18181b;
    --bg-elevated: #1e1e22;
    --bg-input: #27272a;
    /* Translucent surface (dark): deep-space glass so the ambient
       particle field reads through without hurting contrast */
    --bg-surface-t: rgba(17, 17, 19, 0.62);

    --text: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #52525b;

    --border: rgba(255, 255, 255, 0.06);
    --border-subtle: rgba(255, 255, 255, 0.03);
    --border-accent: rgba(167, 139, 250, 0.25);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 40px rgba(124, 58, 237, 0.20);

    --header-bg: rgba(9, 9, 11, 0.82);
    --header-border: rgba(255, 255, 255, 0.06);

    --hero-bg: linear-gradient(135deg, rgba(10, 10, 15, 0.78) 0%, rgba(15, 10, 26, 0.74) 50%, rgba(9, 9, 11, 0.86) 100%);

    --card-hover-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(124, 58, 237, 0.08);

    --scrollbar-track: #18181b;
    --scrollbar-thumb: #3f3f46;
}

/* ============================================================
   ACCENT PRESETS (public site)
   Applied via html[data-accent="..."] — mirrors the dashboard
   system but uses the public token names (--accent, --accent-light,
   --accent-dark, --accent-glow, --accent-glow-soft, --accent-gradient,
   --accent-2 remains the secondary cyan).
   ============================================================ */

/* Violet (default) */
[data-accent="violet"] {
    --accent: #7C3AED;
    --accent-light: #A78BFA;
    --accent-dark: #6D28D9;
    --accent-glow: rgba(124, 58, 237, 0.35);
    --accent-glow-soft: rgba(124, 58, 237, 0.10);
    --accent-gradient: linear-gradient(135deg, #7C3AED, #6D28D9);
}

/* Blue */
[data-accent="blue"] {
    --accent: #2563EB;
    --accent-light: #60A5FA;
    --accent-dark: #1D4ED8;
    --accent-glow: rgba(37, 99, 235, 0.35);
    --accent-glow-soft: rgba(37, 99, 235, 0.10);
    --accent-gradient: linear-gradient(135deg, #2563EB, #1D4ED8);
}

/* Emerald */
[data-accent="emerald"] {
    --accent: #059669;
    --accent-light: #34D399;
    --accent-dark: #047857;
    --accent-glow: rgba(5, 150, 105, 0.35);
    --accent-glow-soft: rgba(5, 150, 105, 0.10);
    --accent-gradient: linear-gradient(135deg, #059669, #047857);
}

/* Amber */
[data-accent="amber"] {
    --accent: #B45309;
    --accent-light: #FBBF24;
    --accent-dark: #92400E;
    --accent-glow: rgba(180, 83, 9, 0.35);
    --accent-glow-soft: rgba(180, 83, 9, 0.10);
    --accent-gradient: linear-gradient(135deg, #B45309, #92400E);
}

/* Rose */
[data-accent="rose"] {
    --accent: #E11D48;
    --accent-light: #FB7185;
    --accent-dark: #BE123C;
    --accent-glow: rgba(225, 29, 72, 0.35);
    --accent-glow-soft: rgba(225, 29, 72, 0.10);
    --accent-gradient: linear-gradient(135deg, #E11D48, #BE123C);
}

/* Slate */
[data-accent="slate"] {
    --accent: #475569;
    --accent-light: #94A3B8;
    --accent-dark: #334155;
    --accent-glow: rgba(71, 85, 105, 0.35);
    --accent-glow-soft: rgba(71, 85, 105, 0.10);
    --accent-gradient: linear-gradient(135deg, #475569, #334155);
}

/* Purple (rgb(124, 58, 237) = #7C3AED) — the brand color as a selectable accent */
[data-accent="purple"] {
    --accent: #7C3AED;
    --accent-light: #A855F7;
    --accent-dark: #6D28D9;
    --accent-glow: rgba(124, 58, 237, 0.35);
    --accent-glow-soft: rgba(124, 58, 237, 0.10);
    --accent-gradient: linear-gradient(135deg, #7C3AED, #A855F7);
}

/* --- GLOBAL RESET --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* NOTE: `scroll-behavior: smooth` is deliberately NOT set on <html>.
   Lenis drives scrollTop itself; a native smooth-scroll on top of that
   fights the rAF loop and produces rubber-banding. Under
   prefers-reduced-motion Lenis is skipped entirely and scrolling stays
   instant/native, which is what that preference asks for. */
html { max-width: 100%; overflow-x: hidden; }
html, body { max-width: 100%; overflow-x: hidden; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.6;
    padding-top: var(--header-h);
    transition: background-color var(--dur-theme) ease, color var(--dur-theme) ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- TYPE HIERARCHY -------------------------------------------------
   Huge hero -> medium section titles -> readable body -> small metadata.
   Tight tracking on the big sizes is what makes large type feel premium
   rather than merely large.
   ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 800; line-height: 1.15; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.ch-meta { font-size: var(--fs-meta); color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }

a { text-decoration: none; color: inherit; transition: color 0.2s; }
img { max-width: 100%; }
.container { max-width: 1380px; }

/* ---- ACCESSIBILITY: visible keyboard focus everywhere --------------
   Mouse users never see this (:focus-visible), keyboard users always do.
   ------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}
/* Skip link for keyboard/screen-reader users */
.ch-skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 2000;
    background: var(--accent);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 10px 10px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: top 0.2s var(--ease-out-quint);
}
.ch-skip-link:focus { top: 0; color: #fff; }

/* Screen-reader-only text */
.ch-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- GLASS UTILITY ------------------------------------------------- */
.ch-glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    transition: background var(--dur-theme), border-color var(--dur-theme);
}
/* backdrop-filter is expensive; desktop only */
@media (min-width: 768px) {
    .ch-glass {
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
    }
}

/* ============================================================
   AMBIENT 3D BACKGROUND LAYER (bg-scene.js)
   Fixed full-viewport canvas BEHIND all content.
   Stacking: body bg (back) -> .ch-bg-scene (z:0) ->
   main.main-content / footer (z:1) -> header (z:1050).
   The canvas is transparent; the body's --bg color shows
   through it, and particles float above that, below content.
   ============================================================ */
.ch-bg-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;                 /* never intercepts clicks */
    opacity: 1;
    transition: opacity 0.6s ease;        /* crossfades with theme */
}
/* Per-page density flag (set from PHP via data-density):
   text-heavy pages fade the field further back for readability */
.ch-bg-scene[data-density="low"]     { opacity: 0.45; }
.ch-bg-scene[data-density="minimal"] { opacity: 0.3; }
.ch-bg-scene canvas { display: block; }

/* CSS fallback shown when WebGL is skipped (mobile/low-end) */
.ch-bg-canvas-fallback {
    background:
        radial-gradient(640px circle at 12% 18%, var(--accent-glow-soft), transparent 60%),
        radial-gradient(520px circle at 86% 74%, var(--accent-glow-soft), transparent 62%);
}

/* Content sits above the ambient layer */
main.main-content { position: relative; z-index: 1; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Footer above the ambient layer (visual styles live in footer.php) */
.ch-footer { z-index: 1; }

/* ============================================================
   HEADER
   ============================================================ */
.ch-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1050;
    background: var(--header-bg);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--shadow-sm);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.3s ease, height 0.3s ease;
}

/* Shrunk header on scroll */
.ch-header.shrunk {
    box-shadow: var(--shadow-md);
}

.ch-header-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--header-h, 72px);
    transition: height 0.3s ease;
}

.ch-header.shrunk .ch-header-inner {
    height: 60px;
}

.ch-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease;
}
.ch-logo:hover { transform: perspective(600px) rotateY(-5deg) rotateX(2deg); }
.ch-logo img { max-height: 44px; max-width: 90px; width: auto; object-fit: contain; }
.ch-logo span { color: var(--accent); }

/* Nav links */
.ch-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.ch-nav a {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-secondary);
    padding: 9px 14px;
    position: relative;
    border-radius: 10px;
    transition: color 0.25s, background 0.25s;
}
/* Underline draw-in on hover */
.ch-nav a::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 5px;
    height: 2px;
    background: var(--accent);
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ch-nav a:hover::after,
.ch-nav a.active::after {
    transform: scaleX(1);
}
.ch-nav a:hover,
.ch-nav a.active {
    color: var(--accent);
}

.ch-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Icon buttons */
.ch-icon-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 1rem;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.25s;
    cursor: pointer;
}
.ch-icon-btn:hover {
    background: var(--accent-glow-soft);
    color: var(--accent);
    border-color: var(--border-accent);
    transform: translateY(-1px);
}

/* Add store / CTA button */
.ch-addstore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-gradient);
    color: #fff !important;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    transition: transform 0.25s, box-shadow 0.25s;
    border: none;
}
.ch-addstore-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--accent-glow);
}

/* Theme toggle */
.ch-theme-toggle {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.ch-theme-toggle:hover {
    background: var(--accent-glow-soft);
    color: var(--accent);
    border-color: var(--border-accent);
}
.ch-theme-toggle .icon-sun,
.ch-theme-toggle .icon-moon {
    position: absolute;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.ch-theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.ch-theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}
[data-theme="dark"] .ch-theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}
[data-theme="dark"] .ch-theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Mobile toggle */
.ch-mobile-toggle {
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.3rem;
    width: 42px;
    height: 42px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
}
.ch-mobile-toggle:hover { background: var(--bg-elevated); }

/* ============================================================
   SEARCH BAR
   ============================================================ */
.ch-search-bar {
    display: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    transition: background 0.4s ease;
}
.ch-search-bar.open { display: block; }
.ch-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
}
.ch-search-form i.fa-search { color: var(--text-muted); }
.ch-search-form input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 16px;
    background: var(--bg-input);
    color: var(--text);
    font-size: 0.92rem;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.ch-search-form input::placeholder { color: var(--text-muted); }
.ch-search-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow-soft);
    background: var(--bg-card);
}
.ch-search-form button[type="submit"] {
    background: var(--accent-gradient);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 22px;
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.ch-search-form button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px var(--accent-glow);
}
.ch-search-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.ch-search-close:hover {
    color: var(--text);
    background: var(--bg-elevated);
}

/* ============================================================
   MOBILE NAV — full-screen glass panel.
   Kept in the DOM and animated with opacity/clip-path/transform
   instead of display:none so the open/close reads as a motion,
   not a jump. `visibility` (not display) keeps it out of the tab
   order while closed.
   ============================================================ */
.ch-mobile-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    bottom: 0;
    background: var(--bg-surface);
    z-index: 1040;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px 32px;
    /* closed state */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-14px);
    transition:
        opacity 0.34s var(--ease-out-quint),
        transform 0.34s var(--ease-out-quint),
        visibility 0.34s linear,
        background var(--dur-theme) ease;
}
@media (min-width: 768px) {
    .ch-mobile-nav {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
    }
}
.ch-mobile-nav.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.ch-mobile-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 4px;
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -0.01em;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    /* Each row eases in behind the panel — staggered via nth-child below */
    opacity: 0;
    transform: translateX(-18px);
    transition: color 0.2s, opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint);
}
.ch-mobile-nav.open a { opacity: 1; transform: translateX(0); }
.ch-mobile-nav.open a:nth-child(1)  { transition-delay: 0.06s; }
.ch-mobile-nav.open a:nth-child(2)  { transition-delay: 0.10s; }
.ch-mobile-nav.open a:nth-child(3)  { transition-delay: 0.14s; }
.ch-mobile-nav.open a:nth-child(4)  { transition-delay: 0.18s; }
.ch-mobile-nav.open a:nth-child(5)  { transition-delay: 0.22s; }
.ch-mobile-nav.open a:nth-child(6)  { transition-delay: 0.26s; }
.ch-mobile-nav.open a:nth-child(7)  { transition-delay: 0.30s; }
.ch-mobile-nav.open a:nth-child(8)  { transition-delay: 0.34s; }
.ch-mobile-nav.open a:nth-child(n+9){ transition-delay: 0.38s; }
.ch-mobile-nav a i { color: var(--accent); width: 22px; text-align: center; font-size: 0.95rem; }
.ch-mobile-nav a:hover,
.ch-mobile-nav a.active { color: var(--accent); }
.ch-mobile-nav .ch-addstore-btn {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
    padding: 15px 18px;
    border-bottom: none;
    font-size: 0.95rem;
}
.ch-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    top: var(--header-h);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1030;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.34s ease, visibility 0.34s linear;
}
.ch-mobile-nav-backdrop.open { visibility: visible; opacity: 1; }
body.ch-nav-open { overflow: hidden; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .ch-nav { display: none; }
    .ch-mobile-toggle { display: inline-flex; }
    .ch-addstore-btn.ch-desktop-only { display: none; }
    .ch-theme-toggle.ch-desktop-only { display: none; }
}

@media (max-width: 575px) {
    :root { --header-h: 64px; }
    .ch-logo { font-size: 1.2rem; }
    .ch-header-inner { gap: 12px; }
    .ch-search-form { padding: 10px 0; }
    .ch-search-form button[type="submit"] span { display: none; }
    .ch-search-form button[type="submit"] { padding: 10px 14px; }
}

/* ============================================================
   CUSTOM CURSOR (desktop, fine-pointer only)
   Two independent elements: a small solid dot that tracks the
   pointer almost 1:1, and a larger ring that lags behind via JS
   lerp — the lag is what makes it feel weighted rather than
   glued to the mouse. Both are pointer-events:none so they can
   never swallow a click. The native cursor is only hidden once
   interactions.js confirms it is running (body.ch-cursor-on),
   so a JS failure never leaves the user with no cursor at all.
   ============================================================ */
.ch-cursor-dot,
.ch-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    z-index: 9999;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    /* JS writes translate3d() with raw pointer coordinates; the
       half-size negative margin below each element does the centring. */
    transition: opacity 0.25s ease;
    will-change: transform;
}
.ch-cursor-dot {
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: var(--accent);
}
.ch-cursor-ring {
    width: 36px; height: 36px;
    margin: -18px 0 0 -18px;
    border: 1.5px solid var(--accent);
    background: transparent;
    transition: opacity 0.25s ease,
                width 0.3s var(--ease-out-quint),
                height 0.3s var(--ease-out-quint),
                margin 0.3s var(--ease-out-quint),
                background 0.3s var(--ease-out-quint),
                border-color 0.3s var(--ease-out-quint);
}
body.ch-cursor-on .ch-cursor-dot,
body.ch-cursor-on .ch-cursor-ring { opacity: 1; }

/* Hide the OS cursor only while ours is proven live */
@media (hover: hover) and (pointer: fine) {
    body.ch-cursor-on,
    body.ch-cursor-on a,
    body.ch-cursor-on button,
    body.ch-cursor-on .ch-card,
    body.ch-cursor-on [role="button"] { cursor: none; }
    /* Text entry keeps its I-beam — losing it hurts usability */
    body.ch-cursor-on input,
    body.ch-cursor-on textarea,
    body.ch-cursor-on select { cursor: auto; }
}

/* Ring grows and fills softly over interactive targets */
.ch-cursor-ring.is-hover {
    width: 62px; height: 62px;
    margin: -31px 0 0 -31px;
    background: var(--accent-glow-soft);
    border-color: var(--border-accent);
}
/* Pressed state: snaps in, reads as a click acknowledgement */
.ch-cursor-ring.is-down {
    width: 26px; height: 26px;
    margin: -13px 0 0 -13px;
}
/* Over a coupon card the ring carries a label ("View", "Copy"…) */
.ch-cursor-ring.is-label {
    width: 76px; height: 76px;
    margin: -38px 0 0 -38px;
    background: var(--accent);
    border-color: var(--accent);
}
.ch-cursor-ring .ch-cursor-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.ch-cursor-ring.is-label .ch-cursor-label { opacity: 1; }

/* Touch devices never get the custom cursor */
@media (hover: none), (pointer: coarse) {
    .ch-cursor-dot, .ch-cursor-ring { display: none !important; }
}

/* ============================================================
   REDUCED MOTION — global safety net.
   animations.js also early-returns under this preference, but CSS
   transitions/animations declared here are not under its control,
   so they are neutralised at the stylesheet level too. Anything
   that is a *state change* rather than decoration (opacity of the
   mobile nav, visibility) is deliberately left working, because
   removing it would make those components unusable.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* Keep these usable: they are UI state, not ornament */
    .ch-mobile-nav,
    .ch-mobile-nav a,
    .ch-mobile-nav-backdrop,
    .ch-skip-link {
        transition-duration: 0.15s !important;
    }
    .ch-mobile-nav a { transform: none !important; }
    .ch-mobile-nav.open a { transition-delay: 0s !important; }
    /* The ambient WebGL field renders a single static frame under
       reduced motion (handled in bg-scene.js); fade it further back
       so a still, high-contrast page is what remains. */
    .ch-bg-scene { opacity: 0.28; }
    .ch-cursor-dot, .ch-cursor-ring { display: none !important; }
}