/* ==========================================================================
   FAQ page — premium theme + unique sections (loads product_page_base.css).
   Slate + sky/indigo accent. Unique: jump-nav chips, section split (image +
   accordion). Scoped under .pdp-page.theme-faq. Reuses .pdp-faq accordion.
   ========================================================================== */

.pdp-page.theme-faq {
    --pdp-bg: #0a0f1a;
    --pdp-bg2: #0e1626;
    --pdp-ink: #eaf0fb;
    --pdp-muted: #97a6c2;
    --pdp-accent: #38bdf8;
    --pdp-accent2: #818cf8;
    --pdp-accent-ink: #06122a;
    --pdp-line: rgba(255,255,255,.08);
    --pdp-card: rgba(255,255,255,.035);
    --pdp-glass: rgba(14,22,38,.6);
    --pdp-alt-mid: #0d1628;
    --pdp-hero-bg:
        radial-gradient(90% 70% at 80% 10%, rgba(56,189,248,.16), transparent 55%),
        radial-gradient(70% 60% at 12% 95%, rgba(129,140,248,.10), transparent 55%),
        linear-gradient(180deg, var(--pdp-bg2), var(--pdp-bg));
}
.theme-faq .abt-hero-inner { display: block; max-width: 820px; }
.theme-faq .faq-glow { position: absolute; z-index: -1; width: 60vmax; height: 60vmax; right: -12vmax; top: -20vmax; background: radial-gradient(circle, rgba(56,189,248,.16), transparent 62%); filter: blur(8px); animation: faq-pulse 9s ease-in-out infinite; }
@keyframes faq-pulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
.theme-faq .faq-hero-lead { color: var(--pdp-muted); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.55; max-width: 52ch; margin: 20px 0 0; }

/* jump nav */
.theme-faq .faq-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--pdp-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pdp-line); }
.theme-faq .faq-nav-inner { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 0; width: min(92vw,1180px); margin-inline: auto; }
.theme-faq .faq-nav a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--pdp-line); background: var(--pdp-card); color: var(--pdp-muted); font-size: .86rem; font-weight: 600; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.theme-faq .faq-nav a:hover { color: var(--pdp-accent); border-color: color-mix(in srgb, var(--pdp-accent) 45%, transparent); }

/* section split */
.theme-faq .faq-sec { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
.theme-faq .faq-sec.img-left .faq-sec-media { order: -1; }
.theme-faq .faq-sec-media { position: sticky; top: 90px; border-radius: 24px; overflow: hidden; border: 1px solid var(--pdp-line); aspect-ratio: 1; background: var(--pdp-card); }
.theme-faq .faq-sec-media img { width: 100%; height: 100%; object-fit: cover; }
.theme-faq .faq-sec-media.fit-contain img { object-fit: contain; padding: 22px; }
.theme-faq .faq-sec h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; margin: 0 0 20px; letter-spacing: -.01em; }
.theme-faq .faq-standalone { max-width: 880px; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) { .theme-faq .faq-glow { animation: none !important; } }
@media (max-width: 900px) {
    .theme-faq .faq-sec { grid-template-columns: 1fr; gap: 26px; }
    .theme-faq .faq-sec-media { position: static; aspect-ratio: 16/10; order: -1; }
}