.cs-footer-section {
    display: flex;
    flex-direction: column;   /* ← LABEL ABOVE, SWITCHES BELOW */
    gap: 10px;
    width: 100%;
}

.cs-footer-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gray);
    font-weight: 600;
    padding-left: 4px;
}

.cs-bg-switch-group {
    display: flex;
    flex-direction: column;   /* ← 3 SWITCHES STACKED VERTICALLY */
    gap: 8px;
    width: 100%;
}

.cs-bg-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;              /* ← full width of the group */
    /* ... rest ... */
}

/* =========================================================
   🎨 BACKGROUND MODE STATE RULES — v1.2 COMPLETE
   ---------------------------------------------------------
   These rules override the base pattern animation per mode.
   The base rules (from earlier in this file) provide:

     .cs-afro-bg { opacity: 1; }
     .cs-afro-bg__pattern { opacity: .12; animation: afroPulse ...; }
     .cs-afro-bg__image { opacity: 0; }

   These state rules then override as needed.
========================================================= */

/* ─── AFRO MODE (default) ──────────────────────────────── */
.cs-artist-2027[data-bg-mode="afro"] .cs-afro-bg {
    opacity: 1;
}

.cs-artist-2027[data-bg-mode="afro"] .cs-afro-bg__pattern {
    opacity: .12;
    animation: afroPulse 20s ease-in-out infinite alternate;
}

.cs-artist-2027[data-bg-mode="afro"] .cs-afro-bg__image {
    opacity: 0;
}

/* ─── COLOR MODE (gradient, no pattern) ────────────────── */
.cs-artist-2027[data-bg-mode="color"] .cs-afro-bg {
    opacity: 1;
}

/* 🔑 CRITICAL: must kill BOTH opacity AND animation */
.cs-artist-2027[data-bg-mode="color"] .cs-afro-bg__pattern {
    opacity: 0 !important;
    animation: none !important;
}

.cs-artist-2027[data-bg-mode="color"] .cs-afro-bg__image {
    opacity: 0 !important;
}

/* Soften glows for a cleaner look */
.cs-artist-2027[data-bg-mode="color"] .cs-afro-bg__glow--gold {
    opacity: .4;
}

.cs-artist-2027[data-bg-mode="color"] .cs-afro-bg__glow--purple {
    opacity: .3;
}

/* ─── OFF MODE (solid dark) ────────────────────────────── */
.cs-artist-2027[data-bg-mode="off"] .cs-afro-bg {
    opacity: 0 !important;
}

/* Belt-and-suspenders: hide children too */
.cs-artist-2027[data-bg-mode="off"] .cs-afro-bg__pattern,
.cs-artist-2027[data-bg-mode="off"] .cs-afro-bg__image,
.cs-artist-2027[data-bg-mode="off"] .cs-afro-bg__glow,
.cs-artist-2027[data-bg-mode="off"] .cs-afro-bg__grain {
    opacity: 0 !important;
    animation: none !important;
}

/* ─── IMAGE MODE (custom image) ────────────────────────── */
.cs-artist-2027[data-bg-mode="image"] .cs-afro-bg {
    opacity: 1;
}

.cs-artist-2027[data-bg-mode="image"] .cs-afro-bg__image {
    opacity: .22 !important;
}

.cs-artist-2027[data-bg-mode="image"] .cs-afro-bg__pattern {
    opacity: 0 !important;
    animation: none !important;
}