/* ==========================================================================
   CSS Variables & Reset (Defaults to Luxury Light Mode for Shop)
   ========================================================================== */
:root {
    --bg-color: #ffffff;
    --text-main: #000000;
    --text-muted: #777777;
    --border-color: #dddddd;
    --font-stack: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    overflow-x: hidden;
    font-family: var(--font-stack);
    background-color: var(--bg-color);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Surgical Landing Page Overrides (Only fires on the waitlist template)
   ========================================================================= */
.fate-landing-page {
    --bg-color: #050505;
    --text-main: #ffffff;
    --text-muted: #888888;
    --border-color: #333333;
}

/* Forces the system UI and background dark ONLY when on the landing page template */
html {
    color-scheme: only light;
    background: #ffffff;
}

body {
    background: #ffffff;
}

body.fate-landing-page,
.fate-landing-page #page, 
.fate-landing-page #content, 
.fate-landing-page .site, 
.fate-landing-page .site-content,
.fate-landing-page .site-container {
    background-color: #050505 !important;
    background: #050505 !important;
}

/* ==========================================================================
   Editorial Layout - Mobile First (Vertical Split)
   ========================================================================== */
.editorial-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

.media-half {
    width: 100%;
    height: 42vh; 
    background-color: #ffffff;
    background-size: 250%;
    background-position: 50% 25%;
    background-repeat: no-repeat;
    background-image: url('https://www.fightagainsttheexcuses.com/wp-content/themes/fatev25/assets/images/FATEDayZeroDrop001MockupDraft1E.png'); 
}

.content-half {
    width: 100%;
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;
    padding: 1.5rem 1.25rem 1.5rem 1.25rem; 
    background-color: var(--bg-color);
}

.content-wrapper {
    width: 100%;
    max-width: 450px; 
    text-align: center;
}

/* ==========================================================================
   Luxury Typography - Mobile Compressed Further
   ========================================================================== */
.logo {
    margin-bottom: 1rem; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ensures the container takes up full width on mobile */
}

.logo-img {
    max-width: 150px; 
    height: auto;
    display: block;
    margin: 0 auto !important; /* Overwrites sneaky WordPress theme alignment styles */
}

.headline {
    font-size: 1rem; 
    font-weight: 900; 
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin-bottom: 1.25rem; 
    color: var(--text-main);
}

.text-stack {
    margin-bottom: 1.25rem; 
}

.sub-headline {
    font-size: 0.75rem; 
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.date-highlight {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0.25rem 0;
    letter-spacing: 0.1em;
}

.cta-subtext {
    font-size: 0.6rem; 
    font-weight: 400;
    color: #fff;
    margin-top: 0.85rem; 
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ==========================================================================
   Minimalist Form - Mobile Compressed Further
   ========================================================================== */
.waitlist-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem; 
    width: 100%;
}

.email-input {
    width: 100%;
    padding: 0.5rem 0; 
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-family: var(--font-stack);
    font-size: 0.85rem;
    outline: none;
    border-radius: 0;
    text-align: center;
    transition: border-color 0.3s ease;
}

.email-input::placeholder {
    color: #444444;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

.email-input:focus {
    border-bottom-color: var(--text-main);
}

.submit-btn {
    width: 100%;
    padding: 0.8rem; 
    background: var(--text-main);
    color: var(--bg-color);
    border: 1px solid var(--text-main);
    font-family: var(--font-stack);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.4s ease;
}

.submit-btn:hover {
    background: transparent;
    color: var(--text-main);
}

/* ==========================================================================
   Desktop Layout (50/50 Horizontal Split - Spacious)
   ========================================================================== */
@media (min-width: 1024px) {
    .editorial-layout {
        flex-direction: row;
    }

    .media-half {
        height: 100vh; 
        width: 50vw; 
        background-position: center; 
        background-image: url('https://www.fightagainsttheexcuses.com/wp-content/themes/fatev25/assets/images/FATEDayZeroDrop001MockupDraft1E.png'); 
        
        /* THE ZOOM CONTROL (Desktop) */
        /* 'cover' is usually best here, but you can force a zoom like 120% or 150vh */
        background-size: cover; 
        
        /* THE FOCAL POINT (Desktop) */
        /* You can use percentages to be hyper-specific. 
           50% 50% is dead center. 50% 20% looks slightly higher up. */
        background-position: 50% 25%;
    }

    .content-half {
        height: 100vh;
        width: 50vw;
        padding: 4rem; 
        /* Ensure centering on desktop is restored */
        justify-content: center;
    }

    .content-wrapper {
        max-width: 400px; 
    }

    /* Restore larger typography and margins for desktop */
    .logo { margin-bottom: 2.5rem; width: 100%; }
    .logo-img { max-width: 200px; margin: 0 auto !important; }
    .headline { font-size: 1.15rem; margin-bottom: 2.5rem; }
    .text-stack { margin-bottom: 3rem; }
    .sub-headline { font-size: 0.85rem; }
    .date-highlight { font-size: 0.95rem; margin: 0.5rem 0; }
    .waitlist-form { gap: 1.5rem; }
    .email-input { padding: 0.75rem 0; font-size: 0.9rem; }
    .email-input::placeholder { font-size: 0.8rem; }
    .submit-btn { padding: 1rem; font-size: 0.8rem; }
    .cta-subtext { margin-top: 1.5rem; font-size: 0.7rem; }
}

/* ==========================================================================
   Cinematic Reveal Animations (Pure CSS3)
   ========================================================================== */

/* 1. Define the Keyframes */
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-in-up {
    0% { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* 2. Apply to Elements with Staggered Delays */

/* The image fades in immediately, very smoothly */
.media-half {
    opacity: 0;
    animation: fade-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

/* The logo floats up a fraction of a second later */
.logo {
    opacity: 0;
    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.2s;
}

/* The headline follows */
.headline {
    opacity: 0;
    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.4s;
}

/* The text details follow */
.text-stack {
    opacity: 0;
    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;
}

/* The form reveals itself right as they finish reading the text */
.waitlist-form {
    opacity: 0;
    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.7s;
}

/* The subtle subtext fades in last */
.cta-subtext {
    opacity: 0;
    animation: fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.2s;
}

@media (max-width: 1024px) {
    .email-input {
        font-size: 16px !important; /* Prevents the iOS auto-zoom */
    }
}








/* ==========================================================================
   FATE Single Product Page - Mobile First
   ========================================================================== */
.fate-single-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 0 !important; /* Nuked the gap */
    background-color: var(--bg-color);
}

/* On mobile, hide the thumbnails and just show the main images as a swipeable gallery */
.fate-thumbnails {
    display: none; 
}

.fate-main-images {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fate-main-images::-webkit-scrollbar { display: none; }

.fate-gallery-img {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    object-fit: cover;
    scroll-snap-align: start;
    mix-blend-mode: multiply;
    pointer-events: none; /* KILLS ZOOM */
}

/* --- THE INFO CONSOLE (MOBILE) --- */
.fate-single-info-wrap {
    padding: 2.5rem 1.25rem 4rem 1.25rem;
    color: var(--text-main);
    text-align: left;
}

/* --- STANDARDIZED LUXURY TYPOGRAPHY --- */
.fate-single-title {
    font-size: 1.2rem;
    font-weight: 500;
    text-align: left;
    margin-bottom: 1.25rem;
    letter-spacing: 0.00em;
}

/* Notice how price, details, and text all share the same sleek sizing now */
.fate-single-price,
.fate-accordion summary,
.fate-accordion-content,
.fate-cart-module form {
    font-size: 0.8rem;
    color: var(--text-main);
}

.fate-single-price {
    font-size: 0.8rem;
    font-weight: 400;
    text-align: left;
    margin-bottom: 1.25rem;
    color: var(--text-main); /* Choose: --text-muted or --text-main */
}

/* ==========================================================================
   THE FORMS & PLUGINS (KITH SWATCHES OVERRIDE)
   ========================================================================== */
.fate-cart-module form.cart {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.fate-cart-module div.quantity { display: none !important; }
.fate-cart-module table.variations th.label { display: none; }

/* Kith Swatches Styling (Requires Variation Swatches Plugin) */
.fate-cart-module table.variations { margin-bottom: 0; }
.fate-cart-module .variable-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fate-cart-module .variable-item {
    border: 1px solid var(--border-color) !important;
    background: transparent !important;
    color: var(--text-main) !important;
    padding: 0.75rem 1rem !important;
    min-width: 3.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

.fate-cart-module .variable-item:hover {
    border-color: var(--text-main) !important;
}

.fate-cart-module .variable-item.selected {
    border-color: var(--text-main) !important;
    background: var(--text-main) !important;
    color: var(--bg-color) !important;
}

/* The Add to Cart Button */
.fate-cart-module button.single_add_to_cart_button {
    width: 100% !important;
    background-color: #000000 !important;
    color: #ffffff !important; 
    border: 1px solid #000000 !important;
    padding: 1.1rem !important;
    font-family: var(--font-stack) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    display: block !important;
    margin-top: 1rem;
}

.fate-cart-module button.single_add_to_cart_button:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.fate-cart-module .reset_variations {
    display: block;
    margin-top: 1rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
}

/* ==========================================================================
   THE SEAMLESS ACCORDIONS (NO LINES)
   ========================================================================== */
.fate-accordion-wrapper {
    border: none;
    margin-top: 1rem;
}

.fate-accordion {
    border: none;
    margin-bottom: 0.5rem;
}

.fate-accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    list-style: none; 
}

.fate-accordion summary::-webkit-details-marker { display: none; }

.fate-accordion-icon {
    font-size: 1.2rem;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.fate-accordion[open] .fate-accordion-icon { transform: rotate(45deg); }

.fate-accordion-content {
    padding: 0.5rem 0 1.5rem 0;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ==========================================================================
   THE NUCLEAR STICKY RESET (Targeting WP Theme Wrappers)
   ========================================================================== */
html, body {
    overflow: visible !important; 
    overflow-x: clip !important; /* Keeps the page from horizontal scrolling */
}

/* We specifically removed overflow-x: clip here so edge-to-edge sections can successfully bleed out */
#page, #content, #primary, #main, .site, .site-content {
    overflow: visible !important; 
    overflow-x: visible !important; 
}

/* ==========================================================================
   SWATCHES PLUGIN CLEANUP (Removing the "Sloppy" Plugin Styles)
   ========================================================================== */
.fate-cart-module .variable-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Forces the plugin buttons to look like stark, sharp squares */
.fate-cart-module .variable-item {
    border: 1px solid var(--border-color) !important;
    background-color: transparent !important;
    color: var(--text-main) !important;
    padding: 0 !important;
    width: 3.5rem !important;  /* Keeps it wide enough for '2XL' */
    height: 2.2rem !important; /* Makes it significantly shorter/sleeker */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important; 
    box-shadow: none !important; 
    font-size: 0.75rem !important;
    transition: all 0.2s ease !important;
}

.fate-cart-module .variable-item:hover {
    border-color: var(--text-main) !important;
}

.fate-cart-module .variable-item.selected {
    border-color: var(--text-main) !important;
    background-color: var(--text-main) !important;
    color: var(--bg-color) !important;
}

/* Force the Add to Cart button to stay black, even when disabled */
.fate-cart-module button.single_add_to_cart_button,
.fate-cart-module button.single_add_to_cart_button:disabled,
.fate-cart-module button.single_add_to_cart_button.disabled {
    background-color: #000000 !important;
    color: #ffffff !important;
    opacity: 1 !important; 
    cursor: pointer !important;
}

/* ==========================================================================
   DESKTOP LAYOUT: THE PROPER 3-COLUMN ARCHITECTURE
   ========================================================================== */
@media (min-width: 1024px) {
    .fate-single-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 0 2rem 4rem 2rem !important; /* Nuked the top gap */
        width: 100%;
        max-width: none;
    }
/* ... rest of the block stays the same ... */

    /* -----------------------------------------
       COLUMNS 1 & 2: Thumbnails & Main Images
       ----------------------------------------- */
    .fate-gallery-wrapper {
        width: 60%; /* Takes up 60% of the screen width */
        display: grid;
        /* Col 1 is 45px for smaller thumbnails. Col 2 is the rest of the space. */
        grid-template-columns: 45px 1fr; 
        gap: 2rem; /* Clean breathing room between thumbs and big images */
    }

    .fate-thumbnails {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        position: -webkit-sticky;
        position: sticky;
        top: 8rem; /* Locks the thumbnails on screen */
        height: max-content;
    }

    .fate-thumb-img {
        width: 100%;
        height: auto;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.3s ease;
        mix-blend-mode: multiply;
        border: 1px solid transparent;
    }

    .fate-thumb-img:hover {
        opacity: 1;
        border-color: var(--border-color);
    }

    /* -----------------------------------------
       COLUMN 2: The Main Images
       ----------------------------------------- */
    .fate-main-images {
        display: block; /* Kills the flexbox stretching entirely */
        width: 100%;
    }

    .fate-main-images img {
        display: block;
        width: 100%;
        height: auto !important; /* Forces the image to snap to its natural, tight height */
        margin: 0; /* Zero margin means they stack seamlessly with no gaps */
        padding: 0;
        flex: none !important; /* THIS IS THE CRITICAL FIX: Overrides the mobile carousel rule */
        mix-blend-mode: multiply;
        pointer-events: none;
    }

    /* -----------------------------------------
       COLUMN 3: The Amiri Console
       ----------------------------------------- */
    .fate-single-info-wrap {
        width: 40%; /* Takes up the remaining 40% of the screen */
        display: flex;
        justify-content: center; /* Centers the text block perfectly within this space */
        
        position: -webkit-sticky;
        position: sticky;
        top: 8rem; 
        max-height: calc(100vh - 10rem); 
        overflow-y: auto; /* The independent scroll you wanted */
        padding: 0 1rem; 
        
        scrollbar-width: none; 
    }
    
    .fate-single-info-wrap::-webkit-scrollbar { 
        display: none; 
    }

    .fate-single-info-sticky {
        width: 100%;
        max-width: 380px; /* The Amiri constraint */
        padding-bottom: 4rem; 
    }

    .fate-single-title { 
        font-size: 1.1rem; 
        font-weight: 500;
    }
}



/* ==========================================================================
   FATE CART: Final Button & Icon Purge
   ========================================================================== */

/* 1. Kill the floating basket icon completely */
.xoo-wsc-basket {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. Hide 'View Cart' and 'Continue Shopping' */
/* This targets the buttons based on where they link to, ignoring their fake names */
.xoo-wsc-ft-buttons a[href*="cart"]:not([href*="checkout"]),
.xoo-wsc-ft-buttons a[href*="shop"],
.xoo-wsc-ft-buttons a:nth-child(1):not([href*="checkout"]),
.xoo-wsc-ft-buttons a:nth-child(2):not([href*="checkout"]) {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 3. Force the remaining 'Checkout' button to span full width and look premium */
.xoo-wsc-ft-buttons a.checkout,
.xoo-wsc-chckt-btn {
    width: 100% !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

.xoo-wsc-ft-buttons a.checkout:hover,
.xoo-wsc-chckt-btn:hover {
    background-color: transparent !important;
    color: #000000 !important;
}



/* ==========================================================================
   FATE DYNAMIC CART BADGE
   ========================================================================== */

/* Keeps the badge anchored to the bag icon */
.fate-cart-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The stark, minimal number indicator */
.fate-cart-count {
    position: absolute;
    top: -4px;
    right: -8px;
    background-color: #000000;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    letter-spacing: 0;
    z-index: 2;
    transition: all 0.2s ease;
}

/* Hides the badge completely when the cart is empty */
.fate-cart-empty {
    display: none !important;
    opacity: 0 !important;
}



/* ==========================================================================
   FATE RELATED PRODUCTS: The Edge-to-Edge Amiri Grid
   ========================================================================== */

/* 1. The Full-Bleed White Background & Bottom Padding */
#fate-custom-related-wrapper {
    background-color: #ffffff !important;
    width: 100vw !important; 
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 4rem 0 8rem 0 !important; /* 4rem top space, 8rem heavy bottom breathing room */
    margin-top: 0 !important; 
    clear: both !important;
    overflow-x: hidden !important;
}

/* 2. Constrain the Inner Grid */
.fate-related-inner-bounds {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. The Centered Header */
#fate-custom-related-wrapper h2 {
    font-family: var(--font-stack) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-align: center !important; /* Centered */
    margin-bottom: 3rem !important; /* More space between title and images */
    padding: 0 !important; /* Removed old left padding */
    color: #000000 !important;
    border: none !important;
}

/* 4. The Edge-to-Edge 4-Grid Layout */
#fate-custom-related-wrapper ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2px !important; /* Razor-thin 2px gap between images */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Kill WooCommerce's layout-breaking invisible float-clearers */
#fate-custom-related-wrapper ul.products::before,
#fate-custom-related-wrapper ul.products::after {
    display: none !important;
    content: none !important;
}

/* 5. Strip the Gray Cards & Blend the Images */
#fate-custom-related-wrapper li.product {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#fate-custom-related-wrapper li.product img {
    width: 100% !important;
    height: auto !important;
    mix-blend-mode: multiply !important;
    background: transparent !important;
    margin-bottom: 1rem !important;
    border-radius: 0 !important;
}

/* 6. Razor-Sharp, Aligned Typography */
#fate-custom-related-wrapper .woocommerce-loop-product__title {
    font-family: var(--font-stack) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.25rem !important;
    color: #000000 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: left !important;
    display: block !important;
}

#fate-custom-related-wrapper .price {
    font-family: var(--font-stack) !important;
    font-size: 0.8rem !important;
    color: #666666 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: left !important;
    display: block !important;
}

/* 7. Nuke All Buttons (Select Options, Add to Cart) */
#fate-custom-related-wrapper .button,
#fate-custom-related-wrapper .added_to_cart {
    display: none !important;
}



/* ==========================================================================
   FATE RELATED PRODUCTS: The Hover Flip Animation
   ========================================================================== */

/* Anchor the image container */
#fate-custom-related-wrapper li.product a.woocommerce-LoopProduct-link {
    position: relative !important;
    display: block !important;
}

/* Ensure both images have the multiply blend effect and smooth transitions */
#fate-custom-related-wrapper li.product img {
    width: 100% !important;
    height: auto !important;
    mix-blend-mode: multiply !important;
    background: transparent !important;
    margin-bottom: 1rem !important;
    border-radius: 0 !important;
    transition: opacity 0.4s ease-in-out !important;
}

/* Position the secondary image directly over the main image and hide it */
#fate-custom-related-wrapper li.product img.fate-secondary-hover-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    z-index: 2 !important;
}

/* THE TRIGGER: When hovered, hide the main image and reveal the secondary */
#fate-custom-related-wrapper li.product:hover img:not(.fate-secondary-hover-img) {
    opacity: 0 !important;
}

#fate-custom-related-wrapper li.product:hover img.fate-secondary-hover-img {
    opacity: 1 !important;
}



/* ==========================================================================
   FATE FOOTER — Full-Width Luxury Anchor
   ========================================================================== */

.fate-footer {
    background-color: #000000 !important;
    color: #ffffff !important;

    width: 100vw !important;
    max-width: none !important;

    /* Full-bleed breakout even if WordPress wraps the footer */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 6rem 2rem 2rem 2rem !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

.fate-footer-inner {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Ensure the grid doesn't break from the new positioning */
.fate-footer-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important; 
    gap: 4rem !important;
    margin-bottom: 6rem !important;
}

/* Headers */
.fate-footer-heading {
    font-family: var(--font-stack) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 1.5rem !important;
    color: #ffffff !important;
}

/* Links */
.fate-footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fate-footer-col ul li {
    margin-bottom: 0.75rem !important;
}

.fate-footer-col a {
    font-family: var(--font-stack) !important;
    color: #888888 !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    transition: color 0.3s ease !important;
}

.fate-footer-col a:hover {
    color: #ffffff !important;
}

/* Newsletter Input Design */
.fate-footer-newsletter p {
    font-family: var(--font-stack) !important;
    font-size: 0.85rem !important;
    color: #888888 !important;
    margin-bottom: 2rem !important;
    line-height: 1.5 !important;
    max-width: 80% !important;
}

.fate-newsletter-form {
    display: flex !important;
    border-bottom: 1px solid #ffffff !important;
    padding-bottom: 0.5rem !important;
    max-width: 80% !important;
}

.fate-newsletter-form input {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-family: var(--font-stack) !important;
    font-size: 0.85rem !important;
    width: 100% !important;
    outline: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.fate-newsletter-form input::placeholder {
    color: #666666 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.fate-newsletter-form button {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    padding: 0 0 0 1rem !important;
    line-height: 1 !important;
    transition: transform 0.3s ease !important;
}

.fate-newsletter-form button:hover {
    transform: translateX(5px) !important; /* Luxury micro-interaction */
}

/* Copyright Anchor */
.fate-footer-bottom {
    border-top: 1px solid #222222 !important;
    padding-top: 2rem !important;
    text-align: left !important;
}

.fate-footer-bottom p {
    font-family: var(--font-stack) !important;
    font-size: 0.7rem !important;
    color: #555555 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
}

/* Base Mobile Prep */
@media (max-width: 1024px) {
    .fate-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }
    .fate-newsletter-form, .fate-footer-newsletter p {
        max-width: 100% !important;
    }
}




/* ==========================================================================
   FATE BREADCRUMBS: Seamless White Anchor
   ========================================================================== */
.fate-breadcrumb-wrapper {
    background-color: #ffffff !important;
    width: 100vw !important; 
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important; 
    margin-bottom: 0 !important; 
    
    /* SYMMETRY FIX: 1.5rem bottom padding exactly mirrors the visible top gap */
    padding: 4.5rem 2rem 1.5rem 2rem !important; 
    
    border-bottom: none !important;
    box-sizing: border-box !important;
    z-index: 10;
}

/* Break the text out of the center constraint and lock the typography */
.woocommerce-breadcrumb {
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font-family: var(--font-stack) !important;
    font-size: 0.8rem !important; /* Forces the plain text to match the links */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #888888 !important; /* Keeps the current page text muted */
}

.woocommerce-breadcrumb a {
    color: #888888 !important;
    font-size: 0.8rem !important; 
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

/* Hover effect turns the link stark black */
.woocommerce-breadcrumb a:hover {
    color: #000000 !important; 
}

/* The sleek chevron divider */
.woocommerce-breadcrumb .fate-crumb-divider {
    margin: 0 0.5rem !important;
    color: #cccccc !important;
    font-size: 0.8rem !important;
    font-weight: 300 !important;
}

/* ==========================================================================
   FATE PRODUCT INFO: Smooth Sticky Engine
   ========================================================================== */

.fate-single-info-sticky {
    position: sticky !important;
    position: -webkit-sticky !important; /* Safari support */
    top: 6rem !important; /* The distance from the top of the screen where it locks */
    align-self: flex-start !important;
    padding-bottom: 2rem !important;
    
    /* The Anti-Jank Fix: Forces hardware acceleration */
    will-change: transform !important; 
    transform: translateZ(0) !important; 
}



/* ==========================================================================
   FATE COLLECTION FILTERS (Mobile Drawer / Desktop Inline)
   ========================================================================== */

/* 1. Mobile Header Row Layout */
.fate-shop-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.fate-shop-header-left {
    flex: 1; /* Pushes the Refine button to the right edge */
    display: flex;
    flex-direction: column;
}

/* 2. The Mobile "Refine" Button */
.fate-mobile-filter-toggle {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-stack);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 0;
    margin-top: 0; 
    padding-top: 0.15rem; /* Aligns perfectly with the title text */
    white-space: nowrap; 
}

/* 3. The Slide-Out Drawer (Mobile First) - THIS WAS MISSING! */
.fate-filter-bar {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden off-screen by default */
    width: 100%;
    max-width: 380px; 
    height: 100vh;
    height: 100dvh;
    background-color: var(--bg-color);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    border-left: 1px solid var(--border-color);
}

.fate-filter-bar.is-open {
    right: 0; /* Slides into view when Refine is clicked */
}

/* 4. Mobile Modal Header */
.fate-filter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.fate-filter-close {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    font-weight: 300;
    cursor: pointer;
    color: var(--text-main);
    padding: 0.5rem;
}

/* 5. The Options Layout */
.fate-filter-options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem; /* Tightened the vertical gap slightly to match the smaller text */
}

.fate-filter-btn {
    background: transparent;
    border: none;
    font-family: var(--font-stack);
    font-size: 0.85rem; /* REDUCED: Was 1.2rem, now sharp and precise */
    font-weight: 500; /* Slightly bolder to hold its own at a smaller size */
    color: var(--text-muted);
    text-transform: uppercase; /* Matches the luxury aesthetic of the other menus */
    letter-spacing: 0.05em; /* Added tracking for that high-end architectural feel */
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}

.fate-filter-btn.is-active {
    color: var(--text-main);
}

/* ==========================================================================
   DESKTOP OVERRIDE (Snaps back to inline alignment)
   ========================================================================== */
@media (min-width: 1024px) {
    .fate-shop-header {
        align-items: flex-end; /* Bottom-aligns the title and the filter links */
    }

    .fate-mobile-filter-toggle,
    .fate-filter-modal-header {
        display: none !important; /* Kills the mobile triggers */
    }

    .fate-filter-bar {
        position: static;
        width: auto;
        height: auto;
        max-width: none;
        flex-direction: row;
        padding: 0;
        background: transparent;
        border: none;
        transition: none;
        right: auto;
        z-index: 1;
    }

    .fate-filter-options {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }

    .fate-filter-btn {
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0 0 0.25rem 0;
        border-bottom: 1px solid transparent;
    }

    .fate-filter-btn.is-active {
        border-bottom: 1px solid var(--text-main);
    }
}



/* ==========================================================================
   FATE MOBILE OVERRIDES: Breadcrumbs & Related Products
   ========================================================================== */
@media (max-width: 1024px) {
    
    /* 1. Shrink the Breadcrumb Text */
    .woocommerce-breadcrumb,
    .woocommerce-breadcrumb a {
        font-size: 0.65rem !important; 
    }

    /* 2. Tighten the Chevron Arrows */
    .woocommerce-breadcrumb .fate-crumb-divider {
        margin: 0 0.05rem !important; /* Halves the space around the arrows */
        font-size: 1.00rem !important;
        color: #000 !important;
    }
    
    /* Optional: Slightly reduce mobile padding so it aligns with the images */
    .fate-breadcrumb-wrapper {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

   /* 3. Convert 'You May Also Like' to a 2x2 Grid */
    #fate-custom-related-wrapper ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        
        /* THE FIX: 2.5rem between rows (top-to-bottom) and 2px between columns (side-to-side) */
        gap: 1.5rem 2px !important; 
    }
    
    /* 4. Optimize the Title and Price for the 2x2 mobile boxes */
    #fate-custom-related-wrapper .woocommerce-loop-product__title,
    #fate-custom-related-wrapper .price {
        font-size: 0.7rem !important; /* Slightly smaller to fit the boxes cleanly */
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* 5. Tighten the gap between Accordions and Related Products */
    .fate-single-info-wrap {
        padding-bottom: 1rem !important; /* Slices the bottom padding of the info console */
    }
    
    #fate-custom-related-wrapper {
        padding-top: 2rem !important; /* Halves the top padding of the related section */
    }
    
    /* ==========================================================================
       5. THE MOBILE OVERLAY (Edge-to-Edge Grey)
       ========================================================================== */
    

    /* Pull the product block to the absolute top of the phone screen */
    .site-content, #content, #page {
        padding-top: 0 !important;
    }

    .fate-single-container {
        /* 
           CRITICAL: Update this hex code to perfectly match the grey in your photos. 
           This creates the illusion that the photo stretches to the top of the phone.
        */
        background-color: #f0f0f0!important; 
        
        margin-top: -6rem !important; /* Pulls it entirely under the header */
        
        /* REDUCED from 8rem to 6.5rem: Since the breadcrumbs are gone, we can 
           pull the photo higher to eliminate unnecessary dead space */
        padding-top: 6.5rem !important; 
    }
    
    /* --- THE INFO CONSOLE (MOBILE) --- */
    .fate-single-info-wrap {
        background-color: #ffffff !important; /* Paints the bottom half of the screen stark white */
        padding-bottom: 1rem !important; 
    }

    /* KILLS the breadcrumbs entirely on mobile for a clean, app-like UI */
    .fate-breadcrumb-wrapper {
        display: none !important; 
    }
}




/* ==========================================================================
   HEADER REORGANIZATION: 3-Column Luxury Architecture
   ========================================================================== */

.fate-header-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Force Left and Right columns to take up equal space */
.fate-header-left,
.fate-header-right {
    display: flex;
    align-items: center;
    flex: 1; /* This ensures the logo stays perfectly centered */
    gap: 1.25rem; /* Clean spacing between icons */
}

.fate-header-left {
    justify-content: flex-start;
}

.fate-header-right {
    justify-content: flex-end;
}

/* Anchor the center column */
.fate-header-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 1 auto;
}

/* LOGO SCALING: 
   Adjust max-height to dial in the exact stark, minimalist size you want 
*/
.fate-header-logo img,
.fate-mobile-logo img {
    max-height: 22px !important; 
    width: auto !important;
    display: block;
}

/* Remove any background or borders on the new button layout */
.fate-menu-toggle {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-main);
}

/* ==========================================================================
   HEADER ARCHITECTURE FIX (Edge-to-Edge Luxury Alignment)
   ========================================================================== */

/* 1. Lock the header wrapper to an exact height */
.fate-site-header,
.fate-header-desktop {
    width: 100% !important;
    height: 60px !important; /* Locks the physical height */
    z-index: 9999;
}

/* 2. The Main Inner Flex Grid */
.fate-header-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important; 
    width: 100% !important;
    height: 100% !important; /* Inherits the strict 85px */
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 3. Force the left and right zones to center their own icons */
.fate-header-left,
.fate-header-right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
}

/* 4. Strip invisible theme margins from the icons so they can't sit low */
.fate-icon-link, 
.fate-menu-toggle {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* 5. Desktop: Push wide to the corners */
@media (min-width: 1024px) {
    .fate-header-inner {
        /* ZERO top/bottom padding to fix vertical align, 1.5rem left/right for edge-to-edge */
        padding: 0 0.50rem !important; 
    }
    
    .fate-header-logo img {
        max-height: 30px !important; 
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
        transform: translateY(2px) !important;
    }

    .fate-header-left, 
    .fate-header-right {
        gap: 0.00rem !important; 
    }
}

/* 6. Mobile: Tighten up the grid */
@media (max-width: 1023px) {
    .fate-header-inner {
        /* Fixed the broken rem syntax here */
        padding: 0 0.25rem !important; 
    }
    
    .fate-site-header,
    .fate-header-mobile {
        height: 60px !important;
    }

    .fate-mobile-logo img {
        max-height: 30px !important; 
        width: auto !important;
        margin: 0 auto !important;
    }

    .fate-header-left, 
    .fate-header-right {
        gap: 0.00rem !important; 
    }
}

/* Fix for the floating cart badge */
.fate-cart-count {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================================
   WORDPRESS MENU OVERLAY STYLING (Recreating the Custom Interface)
   ========================================================================== */

.fate-menu-primary ul.fate-wp-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fate-menu-primary ul.fate-wp-menu li {
    display: block !important;
    margin: 0 !important;
}

.fate-menu-primary ul.fate-wp-menu li a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1.25rem 0 !important;
    font-family: var(--font-stack) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-main) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important; /* Subtle separator */
}

/* Rebuilds the luxury right-facing chevron automatically */
.fate-menu-primary ul.fate-wp-menu li a::after {
    content: "›";
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-muted);
    transition: transform 0.3s ease, color 0.3s ease;
}

.fate-menu-primary ul.fate-wp-menu li a:hover::after {
    transform: translateX(5px);
    color: var(--text-main);
}



/* ==========================================================================
   THE AMIRI DRAWER ARCHITECTURE (Left-Slide & Edge-to-Edge Mobile)
   ========================================================================== */

/* 1. THE BACKDROP (Dims the background behind the menu) */
.fate-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* Fixes mobile Safari address bar jump */
    background: rgba(0, 0, 0, 0.5) !important; /* The luxury dim effect */
    z-index: 100000 !important;
    
    /* Hide by default using opacity so JS coordinate animations are ignored */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
    
    /* Nuke any theme-injected coordinates */
    right: auto !important;
    transform: none !important;
}

/* 2. THE DRAWER (The white box that slides) */
.fate-menu-overlay-inner {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 400px !important; /* Desktop width constraint */
    max-width: 85vw !important; /* Prevents overlap on small laptops */
    height: 100% !important;
    background-color: #ffffff !important;
    
    /* Starts completely off-screen to the left */
    transform: translateX(-100%) !important; 
    
    /* Buttery, cinematic glide animation */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; 
    
    padding: 6rem 3rem 3rem 3rem !important; /* Heavy padding, Amiri style */
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 5px 0 25px rgba(0,0,0,0.05) !important;
}

/* 3. THE TRIGGER (When the JS fires the active state) */
/* The backdrop fades in */
.fate-menu-overlay.is-active,
.fate-menu-overlay.is-open,
.fate-menu-overlay.active,
.fate-menu-overlay[aria-hidden="false"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* The drawer glides in */
.fate-menu-overlay.is-active .fate-menu-overlay-inner,
.fate-menu-overlay.is-open .fate-menu-overlay-inner,
.fate-menu-overlay.active .fate-menu-overlay-inner,
.fate-menu-overlay[aria-hidden="false"] .fate-menu-overlay-inner {
    transform: translateX(0) !important; 
}

/* 4. THE CLOSE BUTTON (Drawing the 'X') */
.fate-menu-close {
    position: absolute !important;
    top: 2rem !important; /* Aligns with the padding */
    right: 2rem !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
    padding: 0 !important;
    display: block !important;
}

/* The Lines of the 'X' */
.fate-menu-close span {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important; /* Sleek, luxury thin lines */
    background-color: #000000 !important;
    display: block !important;
    transition: background-color 0.3s ease !important;
}

/* Rotate the two spans to form the cross */
.fate-menu-close span:nth-child(1) {
    transform: rotate(45deg) !important;
}

.fate-menu-close span:nth-child(2) {
    transform: rotate(-45deg) !important;
}

/* Subtle hover fade */
.fate-menu-close:hover span {
    background-color: #888888 !important;
}

/* ==========================================================================
   AMIRI MENU TYPOGRAPHY & SPACING
   ========================================================================== */

/* Strip the old borders and chevrons for a stark, editorial look */
.fate-menu-primary ul.fate-wp-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.75rem !important; /* Generous breathing room */
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fate-menu-primary ul.fate-wp-menu li {
    display: block !important;
    margin: 0 !important;
}

.fate-menu-primary ul.fate-wp-menu li a {
    display: inline-block !important;
    padding: 0 !important;
    border: none !important;
    font-family: var(--font-stack) !important;
    font-size: 0.85rem !important; /* Smaller, sharper font size */
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #000000 !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease !important;
}

/* Hover effect: Subtle luxury fade instead of aggressive color changes */
.fate-menu-primary ul.fate-wp-menu li a:hover {
    opacity: 0.4 !important;
}

/* Kill the chevrons completely */
.fate-menu-primary ul.fate-wp-menu li a::after {
    display: none !important;
}

/* Hide the intro text if your theme is still outputting it */
.fate-menu-intro {
    display: none !important;
}

/* ==========================================================================
   MOBILE EDGE-TO-EDGE OVERRIDE
   ========================================================================== */
@media (max-width: 1023px) {
    .fate-menu-overlay-inner {
        width: 100vw !important; /* Forces Edge-to-Edge */
        max-width: 100vw !important;
        padding: 5rem 1.5rem 3rem 1.5rem !important; 
    }
    
    .fate-menu-primary ul.fate-wp-menu {
        gap: 1.5rem !important;
    }
    
    .fate-menu-primary ul.fate-wp-menu li a {
        font-size: 0.9rem !important; /* Slightly larger touch-targets for mobile */
    }
}


/* ==========================================================================
   HIDE MENU AUXILIARY LINKS
   ========================================================================== */
.fate-menu-auxiliary {
    display: none !important;
}






/* ==========================================================================
   FATE KITH-STYLE SEARCH ARCHITECTURE (Refined Layout)
   ========================================================================== */

.fate-search-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 100005 !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.fate-search-overlay.is-active {
    opacity: 1 !important;
    visibility: visible !important;
}

.fate-search-backdrop {
    flex: 1 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    cursor: pointer !important;
}

.fate-search-top {
    position: relative !important;
    background: #ffffff !important;
    width: 100% !important;
    transform: translateY(-100%) !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    padding-top: 1rem !important; /* Padding for the new logo placement */
}

.fate-search-overlay.is-active .fate-search-top {
    transform: translateY(0) !important;
}

.fate-search-inner {
    padding: 2rem 2rem 4rem 2rem !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* --- THE LOGO STAGE --- */
.fate-search-logo-wrap {
    margin-bottom: 2.5rem !important;
    text-align: center !important;
    width: 100% !important;
}

.fate-search-brand-img {
    max-height: 35px !important; 
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

.fate-search-brand-text {
    font-family: var(--font-stack) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #000000 !important;
}

/* --- THE ABSOLUTE 'X' (Repositioned for Breathing Room) --- */
.fate-search-close {
    position: absolute !important;
    top: 3.5rem !important; /* Pushed down to align better with the logo axis */
    right: 2.5rem !important; /* Pulled slightly in from the absolute edge */
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 10 !important;
}

.fate-search-close span {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background-color: #000000 !important;
    transition: background-color 0.3s ease !important;
}

.fate-search-close span:nth-child(1) { transform: rotate(45deg) !important; }
.fate-search-close span:nth-child(2) { transform: rotate(-45deg) !important; }
.fate-search-close:hover span { background-color: #888888 !important; }

/* --- THE KITH INPUT FIELD --- */
.fate-search-form {
    position: relative !important;
    width: 100% !important;
    max-width: 1200px !important; /* Restricts it from getting comically wide on massive monitors */
    border: 1px solid #000000 !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 !important;
}

.fate-search-field {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    border: none !important;
    background: transparent !important;
    font-family: var(--font-stack) !important;
    font-size: 0.9rem !important;
    color: #000000 !important;
    outline: none !important;
    box-shadow: none !important;
}

.fate-search-field::placeholder {
    color: #888888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* --- RAW SVG SUBMIT FIX --- */
.fate-search-submit {
    background: transparent !important;
    border: none !important;
    padding: 0 1.5rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fate-search-submit svg {
    height: 18px !important;
    width: 18px !important;
    display: block !important;
}

/* Mobile Constraints */
@media (max-width: 1023px) {
    .fate-search-inner {
        padding: 1.5rem 1.25rem 2.5rem 1.25rem !important;
    }
    .fate-search-close {
        top: 2.5rem !important; /* Pushed down from 1.5rem */
        right: 1.5rem !important;
    }
    /* CRITICAL FIX: Forces iOS Safari to stop auto-zooming */
    .fate-search-field {
        font-size: 16px !important;
    }
}



/* ==========================================================================
   FIBOSEARCH LUXURY OVERRIDE (Softened for Plugin Control)
   ========================================================================== */

.fate-fibosearch-wrapper {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* 1. Hide the redundant left-side magnifier so text sits flush */
.fate-fibosearch-wrapper .dgwt-wcas-ico-magnifier,
.fate-fibosearch-wrapper .dgwt-wcas-ico-magnifier-wrap {
    display: none !important;
}

/* 2. Ensure text starts flush left without the icon in the way */
.fate-fibosearch-wrapper .dgwt-wcas-search-input {
    padding-left: 1.5rem !important;
    font-family: var(--font-stack) !important;
    box-shadow: none !important;
    /* Removed background and border locks so your plugin settings work */
}

/* 3. Fix the squished Preloader / Triangle issue */
.fate-fibosearch-wrapper .dgwt-wcas-preloader {
    right: 3.5rem !important; /* Moves the loading spinner away from the submit icon */
}

/* 4. Fix the Autocomplete Dropdown Visibility */
.dgwt-wcas-suggestions-wrapp {
    z-index: 100006 !important; /* Forces it above the dark overlay */
    margin-top: 1px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}

/* 5. Editorial Typography for the Dropdown */
.dgwt-wcas-suggestion {
    font-family: var(--font-stack) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* 1. Hide ONLY the left-side magnifier, keeping the submit button safe */
.fate-fibosearch-wrapper .dgwt-wcas-sf-inner > .dgwt-wcas-ico-magnifier,
.fate-fibosearch-wrapper .dgwt-wcas-sf-inner > .dgwt-wcas-ico-magnifier-wrap {
    display: none !important;
}

/* 2. Format the "SEARCH" text inside the black box */
.fate-fibosearch-wrapper .dgwt-wcas-search-submit {
    color: #ffffff !important; /* Forces the text stark white */
    font-family: var(--font-stack) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* 3. Kill the little left-pointing triangle artifact */
.fate-fibosearch-wrapper .dgwt-wcas-search-submit::before,
.fate-fibosearch-wrapper .dgwt-wcas-search-submit::after {
    display: none !important;
}


/* --- BRING BACK THE PRELOADER --- */
.fate-fibosearch-wrapper .dgwt-wcas-preloader {
    right: 100px !important; /* Pulls the spinner out from under the black SEARCH button */
    z-index: 10 !important;
}



/* ==========================================================================
   FORCE HIDE "SELECT OPTIONS" (Desktop & Mobile Override)
   ========================================================================== */

/* This hides it on all screen sizes */
.fate-shop-container li.product .button,
.fate-shop-container li.product .added_to_cart,
.fate-shop-container .select_options,
.fate-shop-container a.button,
.woocommerce ul.products li.product .button {
    display: none !important;
}

/* This is the safety net for mobile-specific theme overrides */
@media (max-width: 1023px) {
    .fate-shop-container li.product .button,
    .woocommerce ul.products li.product .button {
        display: none !important;
    }
}




/* ==========================================================================
   FATE UNIVERSAL MOBILE-SAFE HEADER SYSTEM
   ========================================================================== */

:root {
    --fate-header-height: 60px;
    --fate-header-glass: rgba(255, 255, 255, 0.86);
    --fate-header-border: rgba(0, 0, 0, 0.06);
    --fate-safe-top: env(safe-area-inset-top, 0px);
}

/* Avoid horizontal scroll without turning the page into a fake scroll container */
html {
    overflow-x: clip;
    background: #ffffff;
    color-scheme: only light;
}

body {
    overflow-x: clip;
    background: #ffffff;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* Header shell: no transform, no filter, no height animation */
.fate-site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(var(--fate-header-height) + var(--fate-safe-top)) !important;
    z-index: 9999 !important;

    background: transparent !important;
    border-bottom: 0 !important;

    transform: none !important;
    backface-visibility: visible !important;
    will-change: auto !important;

    overflow: visible !important;
    isolation: isolate !important;
}

/* The glass layer is separate from the structural header */
.fate-site-header::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--fate-safe-top)) 0 0 0;
    z-index: 0;
    pointer-events: none;

    background-color: rgba(255, 255, 255, 0);
    border-bottom: 1px solid rgba(0, 0, 0, 0);

    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);

    transition:
        background-color 280ms ease,
        border-color 280ms ease;
}

/* Only color changes on scroll. No size, padding, transform, or filter changes. */
.fate-site-header.is-scrolled::before {
    background-color: var(--fate-header-glass);
    border-bottom-color: var(--fate-header-border);
}

/* Keeps the actual header content above the glass layer */
.fate-header-desktop,
.fate-header-mobile,
.fate-header-inner {
    position: relative !important;
    z-index: 1 !important;
}

/* Physical header rows */
.fate-header-desktop,
.fate-header-mobile {
    height: var(--fate-header-height) !important;
}

/* If safe-area exists, keep the visible row below it */
.fate-header-inner {
    height: var(--fate-header-height) !important;
    min-height: var(--fate-header-height) !important;
    padding-top: var(--fate-safe-top) !important;
    box-sizing: content-box !important;
}

/* Non-overlapping breakpoints */
@media (min-width: 1024px) {
    .fate-header-desktop {
        display: block !important;
    }

    .fate-header-mobile {
        display: none !important;
    }

    .fate-header-inner {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .fate-header-logo img {
        max-height: 30px !important;
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
        transform: none !important;
    }
}

@media (max-width: 1023.98px) {
    .fate-header-desktop {
        display: none !important;
    }

    .fate-header-mobile {
        display: block !important;
    }

    .fate-header-inner {
        padding-left: 0.00rem !important;
        padding-right: 0.00rem !important;
    }

    .fate-mobile-logo img {
        max-height: 30px !important;
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
        transform: none !important;
    }
}

/* Header layout stays constant */
.fate-header-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

.fate-header-left,
.fate-header-right {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    height: var(--fate-header-height) !important;
    gap: 0 !important;
    margin: 0 !important;
}

.fate-header-left {
    justify-content: flex-start !important;
}

.fate-header-right {
    justify-content: flex-end !important;
}

.fate-header-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    height: var(--fate-header-height) !important;
}

.fate-icon-link,
.fate-menu-toggle {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
}

/* Progressive enhancement: if backdrop-filter is unsupported, keep the tint */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fate-site-header.is-scrolled::before {
        background-color: rgba(255, 255, 255, 0.94);
    }
}




/* ==========================================================================
   WORDPRESS ADMIN BAR OFFSET
   Prevents fixed FATE header from sitting behind WP admin toolbar
   ========================================================================== */

body.admin-bar .fate-site-header {
    top: 32px !important;
}

/* WordPress admin bar is taller on smaller screens */
@media (max-width: 782px) {
    body.admin-bar .fate-site-header {
        top: 46px !important;
    }
}


/* ==========================================================================
   FATE HEADER FINAL OVERRIDES
   Transparent top state + cart badge breathing room
   ========================================================================== */

body {
    --fate-header-scroll-trigger: 24;
}

/* Product pages stay transparent longer for the editorial image-under-header effect */
body.single-product {
    --fate-header-scroll-trigger: 60;
}

/* Mobile can trigger a little sooner if 120px feels too long */
@media (max-width: 1023.98px) {
    body.single-product {
        --fate-header-scroll-trigger: 96;
    }
}

/* Keep the real header transparent. The glass lives only on ::before. */
.fate-site-header,
.fate-site-header.is-scrolled {
    background: transparent !important;
    border-bottom: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Fix horizontal padding behavior */
.fate-header-desktop,
.fate-header-mobile {
    height: calc(var(--fate-header-height) + var(--fate-safe-top)) !important;
}

.fate-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(var(--fate-header-height) + var(--fate-safe-top)) !important;
    min-height: calc(var(--fate-header-height) + var(--fate-safe-top)) !important;
    padding-top: var(--fate-safe-top) !important;
    box-sizing: border-box !important;
}

/* Move the right icon group inward without affecting the centered logo */
.fate-header-right {
    padding-right: 0.00rem !important;
    box-sizing: border-box !important;
}

/* Optional: keeps the badge from hanging so far outside the bag icon */
.fate-cart-count {
    right: -4px !important;
}

/* True transparent top state: no visible glass, no visible blur */
.fate-site-header::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--fate-safe-top)) 0 0 0;
    z-index: 0;
    pointer-events: none;

    background-color: var(--fate-header-glass);
    border-bottom: 1px solid var(--fate-header-border);

    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);

    opacity: 0;
    transition: opacity 280ms ease;
}

/* Frosted glass only after scroll threshold */
.fate-site-header.is-scrolled::before {
    opacity: 1;
}

/* Explicit top state */
.fate-site-header.is-top::before {
    opacity: 0;
}

/* Fallback if backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fate-site-header.is-scrolled::before {
        background-color: rgba(255, 255, 255, 0.94);
    }
}





/* ==========================================================================
   FATE MOBILE HEADER PERFORMANCE POLISH
   Reduces mobile stutter without changing the sticky architecture
   ========================================================================== */

@media (max-width: 1023.98px) {
    .fate-site-header::before {
        will-change: opacity !important;
        contain: paint !important;

        /* Slightly lighter blur = less mobile GPU strain */
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;

        transition: opacity 220ms ease !important;
    }

    .fate-site-header.is-scrolled::before {
        background-color: rgba(255, 255, 255, 0.88) !important;
    }
}





/* ==========================================================================
   FATE FOOTER — TRUE FULL-BLEED OVERRIDE
   Put this at the VERY BOTTOM of style.css
   ========================================================================== */

body #fate-site-footer.fate-footer {
    background-color: #000000 !important;
    color: #ffffff !important;

    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;

    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;

    padding: 6rem 2rem 2rem 2rem !important;
    box-sizing: border-box !important;
    clear: both !important;
    transform: none !important;
}

body #fate-site-footer .fate-footer-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #fate-site-footer .fate-footer-grid {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body #fate-site-footer .fate-footer-bottom {
    width: 100% !important;
    max-width: none !important;
}

/* Remove copyright divider line */
body #fate-site-footer .fate-footer-bottom {
    border-top: none !important;
}



/* FATE Heritage Page Layout */
.fate-heritage-container {
  max-width: 600px; /* This replicates the Supreme narrow-column readability */
  margin: 6rem auto 8rem auto; /* Centers the block with breathing room top and bottom */
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.fate-heritage-logo {
  display: block;
  width: 140px; /* Adjust this to fit the proportions of your wordmark */
  height: auto;
  margin-bottom: 3.5rem;
}

.fate-heritage-copy p {
  font-family: inherit; /* Automatically inherits your theme's stark typography */
  font-size: 1.05rem;
  line-height: 1.7;
  color: #E0E0E0; /* Premium off-white */
  margin-bottom: 1.5rem;
  letter-spacing: 0.2px;
}

.fate-heritage-copy p:last-of-type {
  margin-bottom: 0;
}

/* Adds subtle emphasis to the final call to action */
.fate-heritage-signoff {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 3rem !important; /* Forces a slight visual break before the final line */
  color: #FFFFFF; 
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .fate-heritage-container {
    margin: 4rem auto 5rem auto;
  }
  .fate-heritage-logo {
    margin-bottom: 2.5rem;
  }
}