/* ===================================================================
   Car Audio theme - Premium car audio cabin
   Version: 1.0.3
   Author: Reveloni
   For: CMS 6.0.2+

   Premium car audio / cabin interior: carbon fiber, dark
   brushed trim, and scheme-colored ambient lighting that
   flows through the header like an in-car LED strip.
   Motion: flowing ambient strip, pulsing subwoofer cone,
   playing EQ bars, dashboard gauge needle.
   Continuous decorative animations run only when the CMS
   panel has animations enabled, and respect reduced motion.

   Changelog:
     1.0.3 - Brought up to the 7.0.1 bundled-theme standard: gallery and panel
             grids switched to auto-fit (the v4.0.2 lesson - the older fill
             mode leaves ghost columns, so a few photos huddle small instead
             of filling the row), print styles added, head extras moved from
             fonts.html to head.html, and this header's version aligned with
             theme.json, where it had drifted at 1.0.0.
   =================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Scheme colors (--primary, --secondary, --accent, --footer-bg,
       --animation-offset) are injected inline by the engine. */
    --text: #1b1d21;
    --text-light: #5c6168;
    --bg: #f7f8fa;
    --bg-light: #eceef1;
    --border: #d6d9de;

    /* Cabin neutrals */
    --panel: #ffffff;
    --panel-deep: #0d0f12;          /* dashboard black, both modes */
    --carbon-a: rgba(0, 0, 0, 0.5);
    --carbon-b: rgba(255, 255, 255, 0.04);
    --trim: rgba(27, 29, 33, 0.14);

    /* Scheme-derived ambient light */
    --ambient: var(--accent);
    --ambient-glow: color-mix(in srgb, var(--accent) 50%, transparent);
    --ambient-soft: color-mix(in srgb, var(--accent) 24%, transparent);
    --ambient-faint: color-mix(in srgb, var(--accent) 11%, transparent);
    --primary-soft: color-mix(in srgb, var(--primary) 12%, transparent);
}

[data-theme="dark"] {
    --text: #e7e9ed;
    --text-light: #989ea7;
    --bg: #101216;
    --bg-light: #0a0c0f;
    --border: #272b32;

    --panel: #15181d;
    --panel-deep: #08090b;
    --carbon-a: rgba(0, 0, 0, 0.65);
    --carbon-b: rgba(255, 255, 255, 0.05);
    --trim: rgba(231, 233, 237, 0.1);

    --ambient-glow: color-mix(in srgb, var(--accent) 62%, transparent);
    --ambient-soft: color-mix(in srgb, var(--accent) 30%, transparent);
    --ambient-faint: color-mix(in srgb, var(--accent) 14%, transparent);
    --primary-soft: color-mix(in srgb, var(--primary) 18%, transparent);
}

body {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg-light);
    transition: background 0.3s, color 0.3s;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4 {
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ---------- Scroll animations (panel-controlled) ---------- */
.animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

body.js-ready[data-animations-enabled="true"] .animate-on-scroll {
    opacity: 0;
    transform: translateY(var(--animation-offset, 30px));
}

body.js-ready[data-animations-enabled="true"] .animate-on-scroll.animated,
.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Decorative keyframes ---------- */
@keyframes ca-ambient-flow {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

@keyframes ca-cone-pulse {
    0%, 100% { transform: scale(1); }
    18%      { transform: scale(1.045); }
    36%      { transform: scale(1.01); }
    54%      { transform: scale(1.035); }
    72%      { transform: scale(1); }
}

@keyframes ca-eq-play {
    0%, 100% { transform: scaleY(0.72); }
    25%      { transform: scaleY(1); }
    55%      { transform: scaleY(0.82); }
    80%      { transform: scaleY(0.95); }
}

@keyframes ca-needle-idle {
    0%, 100% { transform: rotate(18deg); }
    50%      { transform: rotate(24deg); }
}

/* ---------- Dark mode toggle: start/stop button ---------- */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.12), transparent 55%),
        radial-gradient(circle, #1a1d22 0 62%, #101216 62% 100%);
    border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: 50%;
    color: #e7e9ed;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.4),
        0 0 0 4px rgba(0, 0, 0, 0.15),
        0 0 18px var(--ambient-soft);
    z-index: 1000;
    transition: transform 0.25s, box-shadow 0.3s, border-color 0.3s;
}

.dark-mode-toggle:hover {
    transform: scale(1.07);
    border-color: var(--accent);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45),
        0 0 0 4px rgba(0, 0, 0, 0.15),
        0 0 26px var(--ambient-glow);
}

/* ---------- Header: dashboard with ambient strip ---------- */
header {
    background:
        repeating-linear-gradient(45deg,
            var(--carbon-a) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(-45deg,
            var(--carbon-b) 0 2px, transparent 2px 4px),
        linear-gradient(180deg, #14171c, #0d0f12);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.4);
}

/* Ambient LED strip flowing along the lower edge */
header::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg,
        var(--primary), var(--accent), var(--secondary),
        var(--accent), var(--primary));
    background-size: 200% 100%;
    box-shadow: 0 0 12px var(--ambient-glow), 0 2px 16px var(--ambient-soft);
}

body[data-animations-enabled="true"] header::after {
    animation: ca-ambient-flow 9s linear infinite;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-container img {
    height: 80px;
    width: auto;
}

.logo-container a {
    transition: opacity 0.3s;
}

.logo-container a:hover {
    opacity: 0.85;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f1f3f6;
    text-shadow: 0 0 18px var(--ambient-soft);
}

/* ---------- Breadcrumbs: trip computer line ---------- */
.breadcrumbs {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
    padding: 0.8rem 0;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.breadcrumbs a {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.breadcrumbs span {
    color: var(--text-light);
    margin: 0 0.5rem;
}

/* ---------- Navigation: console buttons ---------- */
nav ul {
    display: flex;
    list-style: none;
    gap: 1.7rem;
    align-items: center;
}

nav a {
    color: #c9cdd4;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35rem 0.1rem;
    border-bottom: 2px solid transparent;
    transition: color 0.25s, border-color 0.25s, text-shadow 0.25s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

nav a:hover {
    color: #ffffff;
    text-shadow: 0 0 14px var(--ambient-glow);
}

nav a.active {
    color: #ffffff;
    border-bottom-color: var(--accent);
    text-shadow: 0 0 14px var(--ambient-glow);
}

/* ---------- Hamburger & dropdown ---------- */
.hamburger-menu {
    position: relative;
}

.hamburger-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    font-size: 1.35rem;
    cursor: pointer;
    color: #e7e9ed;
    padding: 0.45rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.hamburger-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 14px var(--ambient-soft);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 20px var(--ambient-faint);
    min-width: 250px;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    margin-top: 0.5rem;
    z-index: 1000;
}

.dropdown-menu.active {
    display: block;
}

.dropdown-menu ul {
    display: block;
    padding: 0.5rem 0;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--text);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.03em;
    border-left: 3px solid transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.dropdown-menu a:hover {
    background: var(--bg-light);
    color: var(--primary);
    border-left-color: var(--accent);
}

.dropdown-submenu {
    padding-left: 2rem;
    font-size: 0.9rem;
}

.dropdown-submenu a {
    padding: 0.5rem 1.5rem;
}

.dropdown-subsubmenu {
    padding-left: 3rem;
    font-size: 0.85rem;
}

.dropdown-subsubmenu a {
    padding: 0.4rem 1.5rem;
}

/* ---------- Hero: speaker panel with subwoofer ring ---------- */
.hero {
    position: relative;
    background:
        repeating-linear-gradient(45deg,
            rgba(0, 0, 0, 0.45) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 4px),
        radial-gradient(ellipse at 18% 0%, var(--primary-soft), transparent 55%),
        linear-gradient(180deg, #13161b, var(--panel-deep));
    color: #f1f3f6;
    padding: 4.5rem 0 5rem;
    text-align: center;
    overflow: hidden;
}

/* Subwoofer cone in the corner, breathing with the music */
.hero::before {
    content: '';
    position: absolute;
    right: -110px;
    top: 50%;
    margin-top: -190px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            color-mix(in srgb, var(--accent) 55%, transparent) 0 9%,
            transparent 9% 14%,
            rgba(255, 255, 255, 0.07) 14% 15%,
            transparent 15% 30%,
            rgba(255, 255, 255, 0.07) 30% 31%,
            transparent 31% 46%,
            rgba(255, 255, 255, 0.09) 46% 47%,
            transparent 47% 60%,
            color-mix(in srgb, var(--accent) 35%, transparent) 60% 61.5%,
            transparent 61.5% 76%,
            rgba(255, 255, 255, 0.1) 76% 77.5%,
            transparent 77.5%);
    box-shadow: 0 0 50px var(--ambient-faint);
    pointer-events: none;
}

body[data-animations-enabled="true"] .hero::before {
    animation: ca-cone-pulse 2.6s ease-in-out infinite;
}

.hero h1 {
    position: relative;
    font-size: 3.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-shadow: 0 0 28px var(--ambient-soft);
}

.hero p {
    position: relative;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #c9cdd4;
}

/* ---------- Content panel ---------- */
.content-section {
    background: var(--panel);
    margin: 2rem auto;
    padding: 3rem;
    border: 1px solid var(--trim);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.content-section div {
    color: inherit;
}

.content-section ul,
.content-section ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

.content-section ul {
    list-style-type: disc;
}

.content-section ol {
    list-style-type: decimal;
}

.content-section li {
    margin: 0.35rem 0;
    line-height: 1.65;
}

/* ---------- Sections / page cards ---------- */
.onepage-sections {
    margin: 4rem auto;
}

.subpages-sections {
    margin: 2rem auto 4rem;
}

.page-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.page-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--trim);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    display: flex;
    flex-direction: column;
}

/* Ambient edge lights up on hover, like door trim */
.page-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--trim));
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.14),
        0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
        0 0 26px var(--ambient-soft);
}

.page-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top center;
    background: var(--bg-light);
}

.page-card-placeholder {
    background:
        repeating-linear-gradient(45deg,
            rgba(0, 0, 0, 0.4) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 4px),
        var(--panel-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    opacity: 1;
}

.page-card-placeholder span {
    opacity: 0.4;
}

.page-card picture {
    display: block;
    width: 100%;
    height: 200px;
}

.page-card picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.page-card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.page-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 1rem;
    padding-left: 0.95rem;
    position: relative;
}

/* Ambient pipe along the title */
.page-card-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), var(--primary));
    box-shadow: 0 0 9px var(--ambient-soft);
}

.page-card-excerpt {
    color: var(--text-light);
    line-height: 1.65;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.page-card-link {
    display: inline-block;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-size: 0.95rem;
    transition: color 0.3s, text-shadow 0.3s;
}

.page-card-link:hover {
    color: var(--accent);
    text-shadow: 0 0 14px var(--ambient-glow);
}

.page-card-link::after {
    content: ' →';
}

/* ---------- Gallery ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem auto;
    justify-content: center;
    max-width: 100%;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--trim);
    cursor: pointer;
    aspect-ratio: 4/3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.35s, filter 0.35s;
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: contrast(1.05) brightness(1.05);
}

/* ---------- Lightbox ---------- */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(5, 6, 8, 0.93);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 10px;
    box-shadow: 0 0 44px var(--ambient-faint);
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}

.lightbox-counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    margin-top: 1rem;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: white;
    font-size: 2rem;
    padding: 1rem;
    cursor: pointer;
    border-radius: 8px;
    z-index: 2001;
    transition: background 0.25s, box-shadow 0.25s;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 16px var(--ambient-soft);
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

/* ---------- CTA: ignition button ---------- */
.cta-button {
    display: inline-block;
    padding: 1rem 2.8rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 86%, white),
        var(--primary));
    color: white;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--primary) 70%, black);
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 2rem 0;
    transition: transform 0.25s, box-shadow 0.3s, background 0.3s;
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--primary) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.cta-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--secondary) 86%, white),
        var(--secondary));
    border-color: color-mix(in srgb, var(--secondary) 70%, black);
    box-shadow:
        0 8px 22px color-mix(in srgb, var(--secondary) 50%, transparent),
        0 0 22px var(--ambient-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ---------- Contact form ---------- */
.contact-form {
    background: var(--bg-light);
    border: 1px solid var(--trim);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
}

.contact-form h2 {
    color: var(--primary);
    letter-spacing: 0.06em;
    margin-bottom: 1.5rem;
}

/* ---------- Testimonials ---------- */
.testimonials-section {
    background: var(--bg-light);
    border: 1px solid var(--trim);
    padding: 3rem 0;
    margin: 2rem 0;
    border-radius: 12px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.testimonial-card {
    background: var(--panel);
    padding: 2rem;
    border: 1px solid var(--trim);
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.testimonial-rating {
    color: var(--accent);
    text-shadow: 0 0 10px var(--ambient-soft);
    font-size: 1.4rem;
    letter-spacing: 0.16em;
    margin-bottom: 1rem;
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.testimonial-author {
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary);
}

/* ---------- Price tag: head-unit display ---------- */
.price-tag {
    display: inline-block;
    background: var(--panel-deep);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    padding: 0.55rem 1.6rem;
    border-radius: 9px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    margin: 1rem 0;
    text-shadow: 0 0 12px var(--ambient-glow);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55), 0 0 16px var(--ambient-faint);
}

/* ---------- Footer: trunk install panel ---------- */
footer {
    background-color: var(--footer-bg, var(--panel-deep));
    background-image:
        repeating-linear-gradient(45deg,
            rgba(0, 0, 0, 0.3) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 4px);
    color: #edeff3;
    padding: 2rem 0 0.75rem;
    margin-top: 3rem;
    position: relative;
}

/* Ambient strip at the footer top edge */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent, var(--accent) 50%, transparent);
    box-shadow: 0 0 12px var(--ambient-soft);
    opacity: 0.85;
}

[data-theme="dark"] footer {
    background-color: var(--footer-bg, #07080a);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.footer-section h3 {
    color: var(--accent);
    text-shadow: 0 0 10px var(--ambient-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.footer-section p {
    margin: 0.5rem 0;
    opacity: 0.9;
}

.footer-menu {
    list-style: none;
}

.footer-menu li {
    margin: 0.5rem 0;
}

.footer-menu a {
    color: #edeff3;
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
}

.footer-menu a:hover {
    color: var(--accent);
    text-shadow: 0 0 12px var(--ambient-soft);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    background: var(--primary);
    border-radius: 8px;
    transition: background 0.3s, box-shadow 0.3s;
}

.social-links a:hover {
    background: var(--secondary);
    box-shadow: 0 0 14px var(--ambient-soft);
}

.copyright {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.7;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
}

/* ---------- Admin panel ---------- */
.admin-panel {
    background: var(--panel);
    margin: 2rem auto;
    padding: 2rem;
    border: 1px solid var(--trim);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}

.tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}

.tab {
    padding: 1rem 2rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-light);
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}

.tab.active {
    color: var(--primary);
    border-bottom-color: var(--accent);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ---------- Gallery admin ---------- */
.gallery-admin {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.gallery-admin-item {
    position: relative;
    aspect-ratio: 1;
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: move;
}

.gallery-admin-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-admin-item .delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-admin-item.dragging {
    opacity: 0.5;
}

/* ---------- Forms ---------- */
.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
    background: var(--bg);
    color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

textarea {
    min-height: 200px;
    resize: vertical;
}

.btn {
    padding: 0.75rem 2rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 86%, white),
        var(--primary));
    color: white;
    border: 1px solid color-mix(in srgb, var(--primary) 70%, black);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn:hover {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--secondary) 86%, white),
        var(--secondary));
    border-color: color-mix(in srgb, var(--secondary) 70%, black);
    box-shadow: 0 0 14px var(--ambient-faint),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-danger {
    background: linear-gradient(180deg, #f25555, #ef4444);
    border-color: #b32020;
}

.btn-danger:hover {
    background: linear-gradient(180deg, #e23b3b, #dc2626);
    border-color: #951d1d;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* ---------- Login ---------- */
.login-container {
    max-width: 400px;
    margin: 4rem auto;
    padding: 2rem;
    background: var(--panel);
    border: 1px solid var(--trim);
    border-top: 3px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.login-container h1 {
    text-align: center;
    color: var(--primary);
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
}

.error {
    background: #fee;
    color: #c00;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.success {
    background: #efe;
    color: #080;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* ---------- Pages list ---------- */
.pages-list {
    display: grid;
    gap: 1rem;
}

.page-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.page-info h3 {
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.page-actions {
    display: flex;
    gap: 0.5rem;
}

.theme-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.theme-option {
    padding: 1rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s;
}

.theme-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.theme-option.selected {
    border-color: var(--primary);
    background: var(--bg-light);
    box-shadow: 0 0 12px var(--ambient-faint);
}

.color-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
}

.testimonial-item {
    background: var(--bg-light);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero {
        padding: 3rem 0 4rem;
    }

    .hero::before {
        right: -180px;
        opacity: 0.5;
    }

    .content-section {
        padding: 1.5rem;
    }

    .tabs {
        flex-wrap: wrap;
    }

    .page-item {
        flex-direction: column;
        gap: 1rem;
    }

    .dark-mode-toggle {
        bottom: 10px;
        right: 10px;
    }

    .dropdown-menu {
        max-height: 70vh;
    }
}

/* ---------- WYSIWYG editor ---------- */
.editor-toolbar {
    background: var(--bg-light);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.editor-toolbar button {
    background: var(--bg);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    color: var(--text);
}

.editor-toolbar button:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-1px);
}

.editor-toolbar button strong,
.editor-toolbar button em,
.editor-toolbar button u {
    pointer-events: none;
}

.toolbar-separator {
    color: var(--text-light);
    margin: 0 0.25rem;
}

.wysiwyg-editor {
    min-height: 300px;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0 0 8px 8px;
    background: var(--bg);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    overflow-y: auto;
    max-height: 600px;
}

.wysiwyg-editor:focus {
    outline: none;
    border-color: var(--primary);
}

.wysiwyg-editor h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 1rem 0;
}

.wysiwyg-editor h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0.75rem 0;
}

.wysiwyg-editor p {
    margin: 0.5rem 0;
}

.wysiwyg-editor ul,
.wysiwyg-editor ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.wysiwyg-editor ul {
    list-style-type: disc;
}

.wysiwyg-editor ol {
    list-style-type: decimal;
}

.wysiwyg-editor li {
    margin: 0.25rem 0;
}

.wysiwyg-editor strong {
    font-weight: 700;
}

.wysiwyg-editor em {
    font-style: italic;
}

.wysiwyg-editor u {
    text-decoration: underline;
}

/* ============================================================
   PLACEHOLDER COMPOSITIONS — car audio gear on carbon,
   lit and animated in scheme colors.
   ============================================================ */
.page-card-placeholder {
    position: relative;
    overflow: hidden;
}

.page-card-placeholder span { display: none; }

.page-card-placeholder::before,
.page-card-placeholder::after {
    content: '';
    position: absolute;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    opacity: 1;
    width: auto;
    height: auto;
    inset: auto;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.5s ease;
}

/* Composition 1: subwoofer — pulsing cone */
.page-card-placeholder::before {
    width: 170px;
    height: 170px;
    left: 50%;
    top: 50%;
    margin: -85px 0 0 -85px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            color-mix(in srgb, var(--accent) 60%, transparent) 0 11%,
            transparent 11% 17%,
            rgba(255, 255, 255, 0.1) 17% 18.5%,
            transparent 18.5% 36%,
            rgba(255, 255, 255, 0.1) 36% 37.5%,
            transparent 37.5% 56%,
            color-mix(in srgb, var(--accent) 40%, transparent) 56% 58%,
            transparent 58% 76%,
            rgba(255, 255, 255, 0.12) 76% 78%,
            transparent 78%);
    box-shadow: 0 0 34px var(--ambient-faint);
}

body[data-animations-enabled="true"] .page-card-placeholder::before {
    animation: ca-cone-pulse 2.4s ease-in-out infinite;
}

.page-card-placeholder::after {
    left: 12%;
    right: 12%;
    bottom: 11%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent, var(--accent), transparent);
    box-shadow: 0 0 12px var(--ambient-glow);
}

/* Composition 2: equalizer — playing bars */
.page-card:nth-child(2n) .page-card-placeholder::before {
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: repeating-linear-gradient(90deg,
        var(--accent) 0 9px,
        transparent 9px 23px,
        var(--primary) 23px 32px,
        transparent 32px 46px);
    -webkit-mask-image: linear-gradient(180deg,
        transparent 22%, rgba(0, 0, 0, 0.4) 45%, black 100%);
    mask-image: linear-gradient(180deg,
        transparent 22%, rgba(0, 0, 0, 0.4) 45%, black 100%);
    box-shadow: none;
    opacity: 0.85;
    transform-origin: bottom center;
}

body[data-animations-enabled="true"] .page-card:nth-child(2n) .page-card-placeholder::before {
    animation: ca-eq-play 1.7s ease-in-out infinite;
}

.page-card:nth-child(2n) .page-card-placeholder::after {
    left: 8%;
    right: 8%;
    bottom: 16%;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--ambient-glow);
    opacity: 0.9;
}

/* Composition 3: dashboard gauge — scale + live needle */
.page-card:nth-child(3n) .page-card-placeholder::before {
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 50% 92%,
            transparent 0 37%,
            rgba(255, 255, 255, 0.16) 37% 38%,
            transparent 38% 47%,
            color-mix(in srgb, var(--primary) 70%, transparent) 47% 48.4%,
            transparent 48.4% 57%,
            color-mix(in srgb, var(--accent) 80%, transparent) 57% 58.6%,
            transparent 58.6%),
        conic-gradient(from -62deg at 50% 92%,
            transparent 0deg,
            var(--ambient-faint) 92deg,
            color-mix(in srgb, var(--accent) 28%, transparent) 118deg,
            transparent 126deg);
    box-shadow: none;
    opacity: 0.95;
}

body[data-animations-enabled="true"] .page-card:nth-child(3n) .page-card-placeholder::before {
    animation: none;
}

.page-card:nth-child(3n) .page-card-placeholder::after {
    width: 3px;
    height: 44%;
    left: 50%;
    bottom: 8%;
    top: auto;
    right: auto;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent));
    box-shadow: 0 0 10px var(--ambient-glow);
    transform: rotate(18deg);
    transform-origin: bottom center;
    border-radius: 2px;
}

body[data-animations-enabled="true"] .page-card:nth-child(3n) .page-card-placeholder::after {
    animation: ca-needle-idle 3.2s ease-in-out infinite;
}

/* Hover: bass hit, EQ jumps, needle revs */
.page-card:hover .page-card-placeholder::before {
    transform: scale(1.06);
}

.page-card:nth-child(2n):hover .page-card-placeholder::before {
    transform: scaleY(1.06);
}

.page-card:nth-child(3n):hover .page-card-placeholder::before {
    transform: none;
}

.page-card:hover .page-card-placeholder::after {
    transform: scaleX(1.06);
}

.page-card:nth-child(3n):hover .page-card-placeholder::after {
    transform: rotate(64deg);
    animation: none;
}

/* ---------- Reduced motion: stop all decorative animation ---------- */
@media (prefers-reduced-motion: reduce) {
    header::after,
    .hero::before,
    .page-card-placeholder::before,
    .page-card-placeholder::after {
        animation: none !important;
        transition: none !important;
    }

    .dark-mode-toggle,
    .dark-mode-toggle:hover {
        transition: none;
        transform: none;
    }
}

/* ---------- Keyboard focus (accessibility) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===== Audio toggle: subwoofer (overrides engine emoji) ===== */
.dark-mode-toggle { font-size: 0; color: transparent; overflow: hidden; }
.dark-mode-toggle::before {
    content: ''; position: absolute; inset: 13px; border-radius: 50%;
    background: radial-gradient(circle,
        var(--accent) 0 24%, transparent 26% 34%,
        color-mix(in srgb, var(--accent) 35%, transparent) 34% 58%, transparent 60%);
    transition: box-shadow 0.3s; z-index: 1;
}
.dark-mode-toggle::after {
    content: ''; position: absolute; inset: 7px; border-radius: 50%;
    border: 2px solid transparent; transition: border-color 0.3s, box-shadow 0.3s; z-index: 1;
}
[data-theme="dark"] .dark-mode-toggle::after {
    border-color: var(--accent);
    box-shadow: 0 0 16px var(--ambient-glow, var(--accent)), inset 0 0 8px var(--ambient-soft, transparent);
}


/* ==========================================================
   Hero background image (new in 6.3.6.b)
   Photo hero following the standard-edition pattern (classic
   as the reference), interpreted for this theme. Every rule is
   scoped to .hero--has-bg - without an uploaded image the theme
   renders exactly as before (zero visual change).
   The contrast overlay lives on .hero-bg-media::after (inside
   the picture layer at z:-2), so the theme's signature hero
   decorations stay visible ABOVE the photo.
   ========================================================== */
.hero--has-bg .hero-bg-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;               /* above the img, still under the theme decorations */
    pointer-events: none;
}

/* four overlay strengths - theme interpretation */
.hero--overlay-none .hero-bg-media::after   { background: linear-gradient(180deg, transparent 0%, rgba(8, 10, 14, 0.18) 100%); }
.hero--overlay-light .hero-bg-media::after  { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 16%, rgba(10, 12, 16, 0.22)) 0%, rgba(8, 10, 14, 0.40) 100%); }
.hero--overlay-medium .hero-bg-media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 26%, rgba(10, 12, 16, 0.30)) 0%, rgba(8, 10, 14, 0.62) 100%); }
.hero--overlay-strong .hero-bg-media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 34%, rgba(10, 12, 16, 0.40)) 0%, rgba(8, 10, 14, 0.74) 100%); }

/* this theme's ::after is unused - mute the engine's generic overlay
   (the interpretation above replaces it) */
.hero--has-bg::after { background: none; }

/* readable type on photos */
.hero--has-bg h1 {
    color: #fff;
    text-shadow: 0 0 28px var(--ambient-soft), 0 2px 14px rgba(0, 0, 0, 0.55);
}
.hero--has-bg p {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* speaker cone reads better against photos with a soft halo */
.hero--has-bg::before { filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.45)); }

/* === PRINT === */
@media print {
    body { background: #fff; color: #000; }
    header, footer, .dark-mode-toggle, .hamburger-btn, .hamburger-menu, .lightbox { display: none !important; }
    .hero {
        margin: 0;
        padding: 1.5rem 0;
        background: none;
        color: #000;
    }
    .hero h1 { color: #000; text-shadow: none; }
    .content-section,
    .page-card,
    .testimonial-card {
        background: #fff;
        color: #000;
        border: 1px solid #ccc;
        box-shadow: none;
    }
    /* scroll-reveal must never hide content on paper */
    .animate-on-scroll { opacity: 1 !important; transform: none !important; }
}