#fw-section-featured-collection-ee40ca91-185a-48d9-bb4d-3db3e429d740 {

/* --- 1. THE GRID SYSTEM (6-Across Calibration) --- */
.grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* Force 6 columns on desktop */
.grid__column--3\@md, .grid__column--4\@md {
    flex: 0 0 16.66% !important;
    max-width: 16.66% !important;
    width: 16.66% !important;
    min-width: 130px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* --- 2. THE GEOMETRY (Portrait Aspect Ratio) --- */
.tile__image, .image, .image--background-color {
    width: 100% !important;
    aspect-ratio: 720 / 1027 !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: #0f172a !important; 
    border: 1px solid #1e293b !important;
    transition: all 0.3s ease !important;
}

/* Image Layering */
.image__object {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important; /* Sitting behind the badge */
}

.tile__image img, .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* --- 3. THE HUD LAYER (Badge Recovery) --- */
/* We target the exact class from your HTML snippet */
.image__badges {
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    z-index: 99 !important; /* Top Layer */
    pointer-events: none !important;
    display: block !important;
}

.badge {
    background-color: #ff77ff !important; /* Bathyal Pink */
    color: #0b0f14 !important;
    font-size: 0.55rem !important; /* Small for 6-across layout */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap !important;
}

/* --- 4. TEXT & INTERACTION --- */
.tile__heading {
    font-size: 0.65rem !important;
    margin-top: 12px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #f8fafc !important;
    height: 40px !important;
    overflow: hidden !important;
}

.tile__price {
    font-size: 0.75rem !important;
    color: #38bdf8 !important;
    text-align: center !important;
    display: block !important;
    font-weight: 800 !important;
}

/* interaction Glow */
.product-tile:hover .tile__image {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.3) !important;
}

/* --- 5. MOBILE (2-Across) --- */
@media (max-width: 768px) {
    .grid__column--3\@md, .grid__column--4\@md {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .badge { font-size: 0.65rem !important; }
}
}
#fw-section-featured-collection-310d931f-75c7-4e1f-b0c1-081402354718 {

/* --- 1. THE GRID SYSTEM (6-Across Calibration) --- */
.grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* Force 6 columns on desktop */
.grid__column--3\@md, .grid__column--4\@md {
    flex: 0 0 16.66% !important;
    max-width: 16.66% !important;
    width: 16.66% !important;
    min-width: 130px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* --- 2. THE GEOMETRY (Portrait Aspect Ratio) --- */
.tile__image, .image, .image--background-color {
    width: 100% !important;
    aspect-ratio: 720 / 1027 !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: #0f172a !important; 
    border: 1px solid #1e293b !important;
    transition: all 0.3s ease !important;
}

/* Image Layering */
.image__object {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important; /* Sitting behind the badge */
}

.tile__image img, .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* --- 3. THE HUD LAYER (Badge Recovery) --- */
/* We target the exact class from your HTML snippet */
.image__badges {
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    z-index: 99 !important; /* Top Layer */
    pointer-events: none !important;
    display: block !important;
}

.badge {
    background-color: #ff77ff !important; /* Bathyal Pink */
    color: #0b0f14 !important;
    font-size: 0.55rem !important; /* Small for 6-across layout */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap !important;
}

/* --- 4. TEXT & INTERACTION --- */
.tile__heading {
    font-size: 0.65rem !important;
    margin-top: 12px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #f8fafc !important;
    height: 40px !important;
    overflow: hidden !important;
}

.tile__price {
    font-size: 0.75rem !important;
    color: #38bdf8 !important;
    text-align: center !important;
    display: block !important;
    font-weight: 800 !important;
}

/* interaction Glow */
.product-tile:hover .tile__image {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.3) !important;
}

/* --- 5. MOBILE (2-Across) --- */
@media (max-width: 768px) {
    .grid__column--3\@md, .grid__column--4\@md {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .badge { font-size: 0.65rem !important; }
}
}


#fw-section-donations-87735ef0-acd8-4401-8f72-7f586a33668d {

/* --- 1. THE DOSSIER FRAME (Preserving the Look) --- */
.donations {
    background-color: #0b0f14 !important;
    border: 1px solid #1e293b !important;
    border-radius: 12px !important;
}

/* --- 2. THE LEFT COLUMN: TEXT FORMATTING --- */
/* This specifically applies your "Dossier" text styles to the Narrative */
.donations__info {
    text-align: left !important;
}

.donations__heading {
    font-family: 'Inter', sans-serif !important;
    color: #38bdf8 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
}

/* The cool blue line from the About Page */
.donations__heading::before {
    content: "";
    width: 20px;
    height: 1px;
    background: #38bdf8;
    margin-right: 15px;
}

.donations__text p {
    line-height: 1.8 !important;
    color: #cbd5e1 !important;
    font-size: 1rem !important;
    margin-top: 20px !important;
}

/* --- 3. THE SMART SQUISH-FIX (Mobile Only) --- */
@media (max-width: 768px) {
    /* Instead of forcing a stack, we just stop the columns from being tiny */
    .donations__inner {
        display: block !important; /* Forces a clean top-to-bottom flow */
        padding: 40px 20px !important;
    }

    .donations__info {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 40px !important;
        padding-right: 0 !important;
    }

    .donations__form-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Keeps the heading looking like a dossier entry on mobile */
    .donations__heading {
        font-size: 1rem !important;
    }
}

/* --- 4. BUTTON & INPUT INTEGRITY --- */
.button--primary {
    background-color: #ff77ff !important;
    color: #0b0f14 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.input-field__input {
    background: #070a0e !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
}
}

#fw-section-featured-collection-d74c831e-12d7-44bd-aff4-d3a5699a9147 {

/* --- 1. THE GRID SYSTEM (6-Across Calibration) --- */
.grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* Force 6 columns on desktop */
.grid__column--3\@md, .grid__column--4\@md {
    flex: 0 0 16.66% !important;
    max-width: 16.66% !important;
    width: 16.66% !important;
    min-width: 130px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* --- 2. THE GEOMETRY (Portrait Aspect Ratio) --- */
.tile__image, .image, .image--background-color {
    width: 100% !important;
    aspect-ratio: 720 / 1027 !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: #0f172a !important; 
    border: 1px solid #1e293b !important;
    transition: all 0.3s ease !important;
}

/* Image Layering */
.image__object {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important; /* Sitting behind the badge */
}

.tile__image img, .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* --- 3. THE HUD LAYER (Badge Recovery) --- */
/* We target the exact class from your HTML snippet */
.image__badges {
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    z-index: 99 !important; /* Top Layer */
    pointer-events: none !important;
    display: block !important;
}

.badge {
    background-color: #ff77ff !important; /* Bathyal Pink */
    color: #0b0f14 !important;
    font-size: 0.55rem !important; /* Small for 6-across layout */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap !important;
}

/* --- 4. TEXT & INTERACTION --- */
.tile__heading {
    font-size: 0.65rem !important;
    margin-top: 12px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #f8fafc !important;
    height: 40px !important;
    overflow: hidden !important;
}

.tile__price {
    font-size: 0.75rem !important;
    color: #38bdf8 !important;
    text-align: center !important;
    display: block !important;
    font-weight: 800 !important;
}

/* interaction Glow */
.product-tile:hover .tile__image {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.3) !important;
}

/* --- 5. MOBILE (2-Across) --- */
@media (max-width: 768px) {
    .grid__column--3\@md, .grid__column--4\@md {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .badge { font-size: 0.65rem !important; }
}
}










#fw-section-featured-collection-9f5daa62-9b09-4e7c-8fbf-5bc3588815fc {

/* --- 1. THE GRID SYSTEM (6-Across Calibration) --- */
.grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* Force 6 columns on desktop */
.grid__column--3\@md, .grid__column--4\@md {
    flex: 0 0 16.66% !important;
    max-width: 16.66% !important;
    width: 16.66% !important;
    min-width: 130px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* --- 2. THE GEOMETRY (Portrait Aspect Ratio) --- */
.tile__image, .image, .image--background-color {
    width: 100% !important;
    aspect-ratio: 720 / 1027 !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: #0f172a !important; 
    border: 1px solid #1e293b !important;
    transition: all 0.3s ease !important;
}

/* Image Layering */
.image__object {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important; /* Sitting behind the badge */
}

.tile__image img, .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* --- 3. THE HUD LAYER (Badge Recovery) --- */
/* We target the exact class from your HTML snippet */
.image__badges {
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    z-index: 99 !important; /* Top Layer */
    pointer-events: none !important;
    display: block !important;
}

.badge {
    background-color: #ff77ff !important; /* Bathyal Pink */
    color: #0b0f14 !important;
    font-size: 0.55rem !important; /* Small for 6-across layout */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap !important;
}

/* --- 4. TEXT & INTERACTION --- */
.tile__heading {
    font-size: 0.65rem !important;
    margin-top: 12px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #f8fafc !important;
    height: 40px !important;
    overflow: hidden !important;
}

.tile__price {
    font-size: 0.75rem !important;
    color: #38bdf8 !important;
    text-align: center !important;
    display: block !important;
    font-weight: 800 !important;
}

/* interaction Glow */
.product-tile:hover .tile__image {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.3) !important;
}

/* --- 5. MOBILE (2-Across) --- */
@media (max-width: 768px) {
    .grid__column--3\@md, .grid__column--4\@md {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .badge { font-size: 0.65rem !important; }
}
}










#fw-section-featured-collection-1765151576 {

/* --- 1. THE GRID SYSTEM (6-Across Calibration) --- */
.grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* Force 6 columns on desktop */
.grid__column--3\@md, .grid__column--4\@md {
    flex: 0 0 16.66% !important;
    max-width: 16.66% !important;
    width: 16.66% !important;
    min-width: 130px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* --- 2. THE GEOMETRY (Portrait Aspect Ratio) --- */
.tile__image, .image, .image--background-color {
    width: 100% !important;
    aspect-ratio: 720 / 1027 !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: #0f172a !important; 
    border: 1px solid #1e293b !important;
    transition: all 0.3s ease !important;
}

/* Image Layering */
.image__object {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important; /* Sitting behind the badge */
}

.tile__image img, .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* --- 3. THE HUD LAYER (Badge Recovery) --- */
/* We target the exact class from your HTML snippet */
.image__badges {
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    z-index: 99 !important; /* Top Layer */
    pointer-events: none !important;
    display: block !important;
}

.badge {
    background-color: #ff77ff !important; /* Bathyal Pink */
    color: #0b0f14 !important;
    font-size: 0.55rem !important; /* Small for 6-across layout */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap !important;
}

/* --- 4. TEXT & INTERACTION --- */
.tile__heading {
    font-size: 0.65rem !important;
    margin-top: 12px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #f8fafc !important;
    height: 40px !important;
    overflow: hidden !important;
}

.tile__price {
    font-size: 0.75rem !important;
    color: #38bdf8 !important;
    text-align: center !important;
    display: block !important;
    font-weight: 800 !important;
}

/* interaction Glow */
.product-tile:hover .tile__image {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.3) !important;
}

/* --- 5. MOBILE (2-Across) --- */
@media (max-width: 768px) {
    .grid__column--3\@md, .grid__column--4\@md {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .badge { font-size: 0.65rem !important; }
}
}





#fw-section-header {
--color-primary: #df53ce;
--color-primary-rgb: 223, 83, 206;
--color-background: #16162D;
--color-background-rgb: 22, 22, 45;
--color-on-background: #5bdadf;
--color-on-background-rgb: 91, 218, 223;
--color-on-primary: #FFFFFF;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #5bdadf;
--color-background-brightness: 25;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #16162D;
--primary-btn-text: #5bdadf;
--primary-btn-border-color: #df53ce;
--secondary-btn-bg: transparent;
--secondary-btn-text: #5bdadf;
--secondary-btn-border-color: #5bdadf;
/* 1. THE REVERSE MASK */
/* If the custom HUD (bathyal-master-nav) is present, hide the native nav */
/* This includes the desktop container and the mobile hamburger/icon */
:has(.bathyal-master-nav) .header__nav-container, 
:has(.bathyal-master-nav) .header__mobile-menu {
    display: none !important;
}

/* 2. THE GLOBAL SKIN (Applies to Checkout/Cart/All Collections) */
.header {
    background: #0b0f14 !important;
    border-bottom: 1px solid #1e293b !important;
    position: relative;
}

/* Style the native links for desktop fallback */
.header__link {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

/* Style the Hamburger Icon to match Bathyal Blue */
.header__mobile-menu svg, 
.header__icon svg {
    color: #38bdf8 !important; /* Bathyal Blue */
}

/* 3. THE SCAN LINE (Visible on all pages) */
.header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #38bdf8, transparent);
    animation: global-scan 6s linear infinite;
    opacity: 0.3;
}
@keyframes global-scan { 0% { left: -20%; } 100% { left: 120%; } }
}