:root {
    /* Royal Amethyst — page & content theme (nav vars unchanged below) */
    --ccf-blue: #7c3aed;
    --ccf-orange: #a78bfa;
    --ccf-violet-900: #1e1b4b;
    --ccf-violet-800: #312e81;
    --ccf-violet-700: #4c1d95;
    --ccf-violet-600: #6d28d9;
    --ccf-violet-500: #8b5cf6;
    --ccf-accent: #c4b5fd;
    --ccf-gradient: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #a78bfa 100%);
    --ccf-navy-gradient: linear-gradient(
        165deg,
        #1e1b4b 0%,
        #312e81 22%,
        #4c1d95 48%,
        #6d28d9 72%,
        #1e1b4b 100%
    );
    /* Navigation — Royal Amethyst */
    --ccf-nav-bg: linear-gradient(
        135deg,
        rgba(30, 27, 75, 0.98) 0%,
        rgba(76, 29, 149, 0.97) 45%,
        rgba(109, 40, 217, 0.96) 100%
    );
    --ccf-nav-border: rgba(196, 181, 253, 0.35);
    --ccf-nav-glow: 0 8px 32px rgba(30, 27, 75, 0.55), 0 0 48px rgba(124, 58, 237, 0.2);
    --ccf-nav-text: rgba(237, 233, 254, 0.88);
    --ccf-nav-text-hover: #ffffff;
    --ccf-nav-active: #ddd6fe;
    --ccf-nav-dropdown-bg: rgba(49, 46, 129, 0.98);
    --ccf-nav-highlight: #c4b5fd;
    --ccf-surface: rgba(255, 255, 255, 0.94);
    --ccf-surface-tint: rgba(237, 233, 254, 0.55);
}

html {
    scroll-behavior: smooth;
    min-height: 100%;
    background: var(--ccf-navy-gradient);
    background-attachment: fixed;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    background-color: transparent !important;
    background-image: none !important;
    color: #1e1b4b;
}

body.bg-gray-50,
body.bg-gray-100,
body.bg-slate-50,
body.bg-white,
body.app-gradient-bg,
body.store-shell,
body.store-member-panel {
    background-color: transparent !important;
    background-image: none !important;
}

.app-gradient-bg,
.store-shell,
.store-member-panel {
    background: transparent !important;
}

@media print {
    html,
    body {
        background: #fff !important;
        background-image: none !important;
    }
}

/* ─── Animated Navigation System ─── */
.ccf-nav-bar,
nav.bg-white.shadow-sm,
nav.bg-white.shadow-lg,
header.store-header,
header[class*="bg-gradient-to-r"],
.landing-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ccf-nav-bg) !important;
    border-bottom: 1px solid var(--ccf-nav-border) !important;
    box-shadow: var(--ccf-nav-glow) !important;
    backdrop-filter: blur(16px);
    animation: navSlideDown 0.55s ease-out both;
}

.ccf-nav-bar::after,
nav.bg-white.shadow-sm.border-b::after,
header.store-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(167, 139, 250, 0.15) 20%,
        rgba(196, 181, 253, 0.9) 50%,
        rgba(167, 139, 250, 0.15) 80%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: navShimmer 4s linear infinite;
    pointer-events: none;
}

.ccf-nav-bar.ccf-nav-scrolled {
    box-shadow: 0 12px 40px rgba(30, 27, 75, 0.65), 0 0 60px rgba(124, 58, 237, 0.22) !important;
}

.ccf-nav-bar .ccf-nav-brand,
nav.bg-white .text-xl.font-bold,
nav.bg-white .text-lg.font-bold,
header.store-header h1 {
    color: #fff !important;
    text-shadow: 0 0 24px rgba(196, 181, 253, 0.35);
}

.ccf-nav-bar .ccf-nav-brand-sub,
header.store-header .text-blue-100,
header.store-header .text-xs {
    color: rgba(221, 214, 254, 0.9) !important;
}

/* Nav links — animated underline */
.ccf-nav-link,
nav.bg-white.shadow-sm a[class*="px-1"],
nav.bg-white.shadow-sm a[class*="py-2"],
header.store-header nav a,
.landing-header nav a {
    position: relative;
    color: var(--ccf-nav-text) !important;
    transition: color 0.25s ease, transform 0.25s ease;
}

.ccf-nav-link::after,
nav.bg-white.shadow-sm a[class*="px-1"]::after,
nav.bg-white.shadow-sm a[class*="py-2"]::after,
header.store-header nav a::after {
    content: '';
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.15rem;
    height: 2px;
    background: linear-gradient(90deg, var(--ccf-accent), #a78bfa);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.65);
}

.ccf-nav-link:hover,
nav.bg-white.shadow-sm a:hover,
header.store-header nav a:hover,
.landing-header nav a:hover {
    color: var(--ccf-nav-text-hover) !important;
    transform: translateY(-1px);
}

.ccf-nav-link:hover::after,
nav.bg-white.shadow-sm a:hover::after,
header.store-header nav a:hover::after {
    transform: scaleX(1);
}

.ccf-nav-link.active,
nav.bg-white.shadow-sm a.text-ccf-blue,
nav.bg-white.shadow-sm a.border-ccf-blue,
nav.bg-white.shadow-sm a.text-ccf-orange {
    color: var(--ccf-nav-active) !important;
}

.ccf-nav-link.active::after,
nav.bg-white.shadow-sm a.text-ccf-blue::after,
nav.bg-white.shadow-sm a.border-b-2::after {
    transform: scaleX(1);
}

/* Nav text overrides for dark bar */
nav.bg-white .text-gray-900,
nav.bg-white .text-gray-700,
nav.bg-white .text-gray-500,
nav.bg-white .text-gray-400,
nav.bg-white button span.text-gray-700 {
    color: var(--ccf-nav-text) !important;
}

nav.bg-white .mobile-menu-button:hover,
nav.bg-white button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.ccf-nav-link.ccf-nav-highlight {
    color: var(--ccf-nav-highlight) !important;
}

.ccf-nav-link.ccf-nav-highlight:hover {
    color: #fff !important;
}

/* Logo — amethyst gradient */
.ccf-nav-logo {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 50%, #c4b5fd 100%) !important;
}

.ccf-nav-logo,
nav.bg-white .h-8.w-8,
header.store-header .w-10,
header.store-header .w-11 {
    animation: logoPulse 3s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.45);
}

/* Dropdown menus */
.ccf-nav-dropdown,
nav.bg-white .dropdown-panel,
nav.bg-white .group-hover\:visible,
nav.bg-white [class*="rounded-xl shadow-xl"],
.ccf-nav-bar .dropdown-panel {
    background: var(--ccf-nav-dropdown-bg) !important;
    border: 1px solid rgba(196, 181, 253, 0.28) !important;
    backdrop-filter: blur(12px);
    animation: dropdownPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    box-shadow: 0 16px 40px rgba(30, 27, 75, 0.45) !important;
}

.ccf-nav-dropdown a,
nav.bg-white .dropdown-panel a,
nav.bg-white [class*="rounded-xl"] a.block,
.ccf-nav-sub-link {
    color: var(--ccf-nav-text) !important;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.ccf-nav-dropdown a:hover,
nav.bg-white .dropdown-panel a:hover,
.ccf-nav-sub-link:hover {
    background: rgba(167, 139, 250, 0.18) !important;
    color: #fff !important;
    padding-left: 1.35rem !important;
}

.ccf-nav-dropdown a.text-ccf-blue,
nav.bg-white .dropdown-panel a.bg-blue-50,
.ccf-nav-sub-active {
    background: rgba(124, 58, 237, 0.35) !important;
    color: var(--ccf-nav-active) !important;
    font-weight: 600;
}

.ccf-nav-divider {
    border-color: rgba(196, 181, 253, 0.2) !important;
}

/* Mobile menu */
#mobile-menu,
nav.bg-white #mobile-menu,
.ccf-nav-bar #mobile-menu {
    background: rgba(30, 27, 75, 0.98) !important;
    border-top: 1px solid var(--ccf-nav-border) !important;
}

#mobile-menu a {
    color: var(--ccf-nav-text) !important;
    border-radius: 0.5rem;
    transition: background 0.2s ease, color 0.2s ease;
}

#mobile-menu a:hover {
    background: rgba(167, 139, 250, 0.18) !important;
    color: #fff !important;
}

.ccf-nav-bar .mobile-menu-button {
    color: var(--ccf-nav-text) !important;
}

.ccf-nav-bar .mobile-menu-button:hover {
    background: rgba(167, 139, 250, 0.15) !important;
    color: #fff !important;
}

/* Profile button in nav */
.ccf-nav-bar .ccf-nav-profile span {
    color: var(--ccf-nav-text) !important;
}

.ccf-nav-bar .ccf-nav-profile:focus {
    --tw-ring-color: rgba(167, 139, 250, 0.6);
}

/* Store / admin header buttons on nav */
header.store-header a.bg-white,
header[class*="bg-gradient"] a.bg-white,
.ccf-nav-bar .ccf-nav-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

header.store-header a.bg-white:hover,
.ccf-nav-bar .ccf-nav-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(167, 139, 250, 0.35);
}

/* Content cards on amethyst background */
.bg-white.rounded-xl,
.bg-white.rounded-lg,
.bg-white.p-6,
.ccf-card,
.store-card,
.glass-card {
    background: var(--ccf-surface) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(196, 181, 253, 0.45);
    box-shadow: 0 8px 32px rgba(76, 29, 149, 0.12);
}

/* Animations */
@keyframes navSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes navShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes logoPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(167, 139, 250, 0.35); }
    50% { box-shadow: 0 0 28px rgba(196, 181, 253, 0.65); }
}

@keyframes dropdownPop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn 0.45s ease-out both; }
.fade-in-up { animation: fadeInUp 0.55s ease-out both; }
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }

.card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(76, 29, 149, 0.22);
    border-color: rgba(167, 139, 250, 0.5);
}

.glass-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.btn-primary {
    background: var(--ccf-gradient);
    color: #fff;
    border-radius: 0.75rem;
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 10px 25px rgba(76, 29, 149, 0.35);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.45);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.95);
    color: #4c1d95;
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 0.75rem;
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    border-color: #8b5cf6;
    background: #faf5ff;
}

.nav-link-active {
    color: var(--ccf-nav-active) !important;
}

.dropdown-panel {
    transform: translateY(8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.group:hover .dropdown-panel {
    transform: translateY(0);
}

.gallery-grid-item { overflow: hidden; border-radius: 1rem; position: relative; }
.gallery-grid-item img { transition: transform 0.45s ease; }
.gallery-grid-item:hover img { transform: scale(1.06); }

.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(30, 27, 75, 0.94);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.gallery-lightbox.active { display: flex; animation: fadeIn 0.25s ease; }

.view-toggle-btn.active { background: #4c1d95; color: #fff; }

.album-tree-item:hover,
.album-tree-item.active { background: rgba(167, 139, 250, 0.18); color: #4c1d95; }

.page-header {
    background: var(--ccf-gradient);
    border-radius: 1.25rem;
    color: #fff;
    padding: 1.75rem 2rem;
    box-shadow: 0 20px 45px rgba(76, 29, 149, 0.35);
}

.stat-pill {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
}

/* Stagger nav items on load */
.ccf-nav-bar .hidden.md\:flex > *,
nav.bg-white .hidden.md\:flex > * {
    animation: fadeInUp 0.5s ease-out both;
}

.ccf-nav-bar .hidden.md\:flex > *:nth-child(1) { animation-delay: 0.05s; }
.ccf-nav-bar .hidden.md\:flex > *:nth-child(2) { animation-delay: 0.1s; }
.ccf-nav-bar .hidden.md\:flex > *:nth-child(3) { animation-delay: 0.15s; }
.ccf-nav-bar .hidden.md\:flex > *:nth-child(4) { animation-delay: 0.2s; }
.ccf-nav-bar .hidden.md\:flex > *:nth-child(5) { animation-delay: 0.25s; }
.ccf-nav-bar .hidden.md\:flex > *:nth-child(6) { animation-delay: 0.3s; }
.ccf-nav-bar .hidden.md\:flex > *:nth-child(7) { animation-delay: 0.35s; }
.ccf-nav-bar .hidden.md\:flex > *:nth-child(8) { animation-delay: 0.4s; }

/* ─── Public landing page header ─── */
.landing-header .landing-brand-title {
    color: #fff !important;
    text-shadow: 0 0 20px rgba(196, 181, 253, 0.3);
}

.landing-header .landing-brand-sub {
    color: rgba(221, 214, 254, 0.85) !important;
}

.landing-header nav a.landing-nav-link {
    color: var(--ccf-nav-text) !important;
}

.landing-header nav a.landing-nav-link:hover {
    color: #fff !important;
}

.landing-header nav a.landing-nav-store {
    color: var(--ccf-nav-highlight) !important;
    font-weight: 600;
}

.landing-header nav a.landing-nav-store:hover {
    color: #fff !important;
}

.landing-header .landing-login-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(196, 181, 253, 0.4);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-header .landing-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(167, 139, 250, 0.45);
}

.landing-header .landing-mobile-toggle {
    color: var(--ccf-nav-text) !important;
}

.landing-header #mobileMenu {
    background: rgba(30, 27, 75, 0.98) !important;
    border-top: 1px solid var(--ccf-nav-border) !important;
}

.landing-header #mobileMenu a {
    color: var(--ccf-nav-text) !important;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.landing-header #mobileMenu a:hover {
    background: rgba(167, 139, 250, 0.15) !important;
    color: #fff !important;
}

.landing-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 40%, #7c3aed 75%, #6d28d9 100%) !important;
}

.landing-hero-accent {
    color: #c4b5fd !important;
}

.landing-hero-muted {
    color: rgba(221, 214, 254, 0.9) !important;
}

.landing-btn-primary {
    background: #fff !important;
    color: #4c1d95 !important;
}

.landing-btn-primary:hover {
    background: #f5f3ff !important;
}

.landing-btn-secondary {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.landing-cta-section {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #a78bfa 100%) !important;
}

.landing-footer {
    background: linear-gradient(180deg, #1e1b4b 0%, #0f0a2e 100%) !important;
}

.ccf-news-ticker {
    display: flex;
    align-items: stretch;
    background: linear-gradient(90deg, #312e81 0%, #4c1d95 50%, #6d28d9 100%);
    color: #ede9fe;
    overflow: hidden;
    min-height: 36px;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(196, 181, 253, 0.25);
}

.ccf-news-ticker-label {
    flex-shrink: 0;
    padding: 0 14px;
    background: rgba(15, 10, 46, 0.45);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
}

.ccf-news-ticker-track {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.ccf-news-ticker-content {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
    animation: ccf-ticker-scroll 45s linear infinite;
}

.ccf-news-ticker-content span {
    padding-right: 4rem;
}

@keyframes ccf-ticker-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccf-news-ticker-content {
        animation: none;
    }
}

.landing-service-card-violet {
    background: linear-gradient(135deg, rgba(237, 233, 254, 0.95) 0%, rgba(221, 214, 254, 0.85) 100%) !important;
    border: 1px solid rgba(167, 139, 250, 0.35);
}

/* Back to top — site-wide */
.back-to-top {
    position: fixed;
    bottom: 1.35rem;
    right: 1.35rem;
    z-index: 45;
    width: 2.85rem;
    height: 2.85rem;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(76, 29, 149, 0.38);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.back-to-top i,
.back-to-top-icon {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    display: inline-block;
    pointer-events: none;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(76, 29, 149, 0.48);
}

.back-to-top:focus-visible {
    outline: 2px solid #c4b5fd;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 2.6rem;
        height: 2.6rem;
    }
}