#fw-section-header {
--color-primary: #ffffff;
--color-primary-rgb: 255, 255, 255;
--color-background: #f6a38b;
--color-background-rgb: 246, 163, 139;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 185;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #ffffff;
--primary-btn-text: #000000;
--primary-btn-border-color: #000000;
--secondary-btn-bg: transparent;
--secondary-btn-text: #000000;
--secondary-btn-border-color: #000000;
/* 1. Make the header fixed and transparent */
header, .header, .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.0) !important; /* Semi-transparent black */
    backdrop-filter: blur(10px); /* Adds a modern frosted glass effect */
    border-bottom: none !important;
    display: flex !important;
    align-items: center;
    padding: 10px 20px;
}

/* 2. Move Social Icons to the far left */
/* Note: This targets common Fourthwall social icon containers */
.header__socials, .social-icons, [class*="social"] {
    order: -1 !important; /* Moves them to the start of the header */
    margin-right: auto !important; /* Pushes everything else to the right */
    display: flex !important;
    gap: 15px;
}

/* 3. Adjust logo/nav spacing */
.header__logo, .site-header__logo {
    margin-left: 20px;
    margin-right: 20px;
}

/* 4. Fix page content overlap */
main {
    margin-top: 0 !important; /* Keeps the hero image sitting behind the transparent header */
}
/* This forces the logo to the exact middle of the header */
.header__logo, .site-header__logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important; /* Perfectly centers it vertically and horizontally */
    margin: 0 !important;
}

/* Ensures the clickable area is the right size */
.header__logo a {
    display: flex;
    align-items: center;
    justify-content: center;
}
}