#fw-section-footer {
--font-heading-scale: 1.3;
--font-body-scale: 1.02;
}
#fw-section-footer {
--color-primary: #00beff;
--color-primary-rgb: 0, 190, 255;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #454545;
--color-on-background-rgb: 69, 69, 69;
--color-product-image-background: #454545;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
/* =========================================
    VOXEL FOOTER (SURGICAL FIX)
   ========================================= */

/* 1. TARGET ONLY THE MAIN FOOTER CONTAINER */
/* We use 'footer' and the specific ID to avoid affecting inner divs */
footer, #section-footer {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    position: relative !important;
    border-top: none !important; /* We use the animated bar instead */
    color: #475569 !important;
}

/* 2. SINGLE FLUID BAR (Applied ONLY to the main footer) */
footer::before, #section-footer::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, #38BDF8, #2563EB, #38BDF8) !important;
    background-size: 200% 100% !important;
    animation: footer-scan 6s linear infinite !important;
    z-index: 10 !important;
    display: block !important;
}
@keyframes footer-scan { 
    0% { background-position: 100% 0; } 
    100% { background-position: -100% 0; } 
}

/* 3. FIX THE TEXT COLORS (Without breaking layout) */
/* Targets all links and text inside the footer */
footer a, #section-footer a,
footer p, #section-footer p,
footer li, #section-footer li,
footer span, #section-footer span,
.footer-nav-item, .footer-link {
    color: #475569 !important; /* Slate Blue */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

/* 4. HOVER EFFECTS */
footer a:hover, #section-footer a:hover {
    color: #38BDF8 !important; /* Voxel Sky Blue */
}

/* 5. FIX HEADINGS */
footer h1, footer h2, footer h3, footer h4, 
#section-footer h4, .footer-heading {
    color: #0F172A !important; /* Dark Void Blue */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* 6. CLEAN UP ICONS */
.social-icon svg, .icon svg {
    fill: #475569 !important;
}
.social-icon:hover svg, .icon:hover svg {
    fill: #38BDF8 !important;
}
}

#fw-section-header {

/* VOXEL HEADER (Compact / Sky Theme / Soft) */

/* 1. HIDE CART */
a[href*="/cart"], 
.header-cart-btn, 
.cart-icon, 
.icon-cart { 
    display: none !important; 
}

/* 2. HEADER CONTAINER (Soft Glass) */
.header-wrapper, header, .site-header, #section-header {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(186, 230, 253, 0.2) !important; /* Very faint blue border */
    box-shadow: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

/* 3. NAVIGATION LINKS (Tighter & Tinted) */
.header-nav a, nav a, .nav-item a {
    /* Native Apple Font */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    
    font-weight: 500 !important; 
    text-transform: none !important; 
    font-size: 15px !important; 
    letter-spacing: -0.01em !important; 
    
    /* THE COLOR FIX: Cool Slate Blue (Not harsh black/grey) */
    color: #475569 !important; 
    
    text-decoration: none !important;
    
    /* THE SPACING FIX: Tighter gap (12px each side) */
    margin-left: 12px !important;
    margin-right: 12px !important;
    
    transition: color 0.2s ease !important;
}

/* Hover State (Voxel Sky Blue) */
.header-nav a:hover, nav a:hover {
    color: #38BDF8 !important; 
}
}