:root {
    --spade-header-height: 64px;
    --spade-header-mobile-height: 58px;
    --spade-announcement-height: 28px;

    --spade-black: #111111;
    --spade-white: #ffffff;
    --spade-pink: #e83d72;
    --spade-border: rgba(17, 17, 17, 0.08);
}

/* =========================================================
   SPADE — STICKY / TRANSPARENT HEADER
   ========================================================= */

#header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 9990 !important;

    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
    color: var(--spade-black);

    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

#header .ct-header {
    position: relative !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

/* =========================================================
   THIN ANNOUNCEMENT BAR
   ========================================================= */

#header [data-row="top"] {
    position: relative !important;
    top: 0 !important;
    z-index: 9994 !important;

    width: 100% !important;
    min-height: var(--spade-announcement-height) !important;
    height: var(--spade-announcement-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #111111 !important;
    color: #ffffff !important;

    border: 0 !important;
    box-shadow: none !important;
}

#header [data-row="top"] .ct-container {
    min-height: var(--spade-announcement-height) !important;
    height: var(--spade-announcement-height) !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    display: flex;
    align-items: center;
}

#header [data-row="top"] * {
    line-height: 1 !important;
}

/* =========================================================
   MAIN HEADER ROW — TRANSPARENT AT TOP
   ========================================================= */

#header [data-row="middle"] {
    position: relative !important;
    top: 0 !important;
    z-index: 9992 !important;

    width: 100% !important;
    min-height: var(--spade-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid var(--spade-border) !important;

    transition:
        background-color 0.28s ease,
        box-shadow 0.28s ease,
        backdrop-filter 0.28s ease;
}

/* Homepage only: main header is transparent at the very top.
   The announcement bar remains a separate black row above it. */
body.home #header,
body.home #header .ct-header {
    background: transparent !important;
}

body.home #header [data-row="top"] {
    background: #111111 !important;
    color: #ffffff !important;
}

body.home #header:not(.spade-header-scrolled) [data-row="middle"] {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* =========================================================
   SCROLLED STATE
   ========================================================= */

#header.spade-header-scrolled [data-row="middle"] {
    background: rgba(255, 255, 255, 0.96) !important;

    border-bottom: 1px solid var(--spade-border) !important;

    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.06) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* All non-home pages remain solid from the start */
body:not(.home) #header [data-row="middle"] {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid var(--spade-border) !important;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.035) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* =========================================================
   PAGE OFFSET / HEADER STACKING
   ========================================================= */

/*
 * OTHER PAGES:
 * Reserve space for BOTH the announcement bar and main header.
 * This prevents the collection banner / page content from
 * sitting underneath the fixed header.
 */
body:not(.home) #main-container {
    padding-top:
        calc(
            var(--spade-announcement-height)
            + var(--spade-header-height)
        ) !important;
}


/*
 * HOMEPAGE:
 * Reserve space only for the announcement bar.
 * The transparent main header intentionally overlays
 * the cinematic video below it.
 */
body.home #main-container {
    padding-top:
        var(--spade-announcement-height) !important;
}


/* =========================================================
   WORDPRESS ADMIN BAR COMPATIBILITY
   ========================================================= */

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

@media (max-width: 782px) {

    body.admin-bar #header {
        top: 46px !important;
    }

}


/* =========================================================
   MOBILE PAGE OFFSET
   ========================================================= */

@media (max-width: 767px) {

    body:not(.home) #main-container {
        padding-top:
            calc(
                26px
                + var(--spade-header-mobile-height)
            ) !important;
    }

    body.home #main-container {
        padding-top: 26px !important;
    }

}


/* =========================================================
   MAIN HEADER CONTAINER
   ========================================================= */

#header [data-row="middle"] .ct-container {
    width: 100%;
    max-width: none !important;

    min-height: var(--spade-header-height);

    display: flex;
    align-items: center;

    padding-inline: clamp(18px, 2.3vw, 38px) !important;

    box-sizing: border-box;
}

/* =========================================================
   LEFT COLUMN — LOGO + MENU
   ========================================================= */

#header [data-column="start"] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: clamp(24px, 2.8vw, 44px);
}

#header [data-column="middle"] {
    display: none !important;
}

/* =========================================================
   RIGHT HEADER ICON SPACING
   Search / Account / Cart
   ========================================================= */

#header [data-column="end"] {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    /* More breathing room between icons */
    gap: 20px !important;

    margin-left: auto;
}

/* Keep each icon in its own clean area */
#header [data-id="search"],
#header [data-id="account"],
#header [data-id="cart"] {
    flex: 0 0 auto;
    margin: 0 !important;
}

/* =========================================================
   SITE TITLE / LOGO
   ========================================================= */

#header .site-title-container,
#header .site-title,
#header .site-description {
    display: none !important;
}

#header .site-logo-container {
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
}

#header .site-logo-container img {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 126px !important;
    max-height: 38px !important;

    margin: 0 !important;
}

/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

#header [data-id="menu"] > ul {
    display: flex;
    align-items: center;
    gap: clamp(22px, 2vw, 34px);
}

#header [data-id="menu"] > ul > li > a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: var(--spade-header-height);

    padding: 0 !important;

    color: var(--spade-black);

    font-family:
        var(--spade-font-body),
        Manrope,
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.10em;

    white-space: nowrap;
    text-transform: uppercase;
}

#header [data-id="menu"] > ul > li > a::after {
    content: "";

    position: absolute;

    right: 100%;
    bottom: 14px;
    left: 0;

    height: 1.5px;

    background: var(--spade-pink);

    transition: right 0.25s ease;
}

#header [data-id="menu"] > ul > li > a:hover::after,
#header [data-id="menu"] > ul > li.current-menu-item > a::after {
    right: 0;
}

/* =========================================================
   SEARCH / ACCOUNT / CART
   ========================================================= */

#header [data-id="search"],
#header [data-id="account"],
#header [data-id="cart"] {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--spade-black);

    margin: 0 !important;
    padding: 0 !important;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

#header [data-id="search"] svg,
#header [data-id="account"] svg,
#header [data-id="cart"] svg {
    width: 18px !important;
    height: 18px !important;

    transition: transform 0.25s ease;
}

#header [data-id="search"]:hover,
#header [data-id="account"]:hover,
#header [data-id="cart"]:hover {
    opacity: 0.65;
    transform: translateY(-1px);
}

#header [data-id="search"]:hover svg,
#header [data-id="account"]:hover svg,
#header [data-id="cart"]:hover svg {
    transform: scale(1.08);
}

#header [data-id="cart"] {
    position: relative;
}

/* =========================================================
   DROPDOWN MENU
   ========================================================= */

#header .sub-menu {
    padding: 20px;

    border: 0;

    background: #ffffff;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.12);
}

#header .sub-menu a {
    color: #111111 !important;

    font-family:
        var(--spade-font-body),
        Manrope,
        Arial,
        sans-serif;

    font-size: 11px;
    letter-spacing: 0.07em;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #header [data-row="top"] {
        min-height: 26px !important;
        height: 26px !important;
    }

    #header [data-row="top"] .ct-container {
        min-height: 26px !important;
        height: 26px !important;
    }

    #header [data-row="middle"] {
        min-height: var(--spade-header-mobile-height) !important;
    }

    #header [data-row="middle"] .ct-container {
        min-height: var(--spade-header-mobile-height);
        padding-inline: 14px !important;
    }

    #header .site-logo-container img {
        max-width: 108px !important;
        max-height: 32px !important;
    }

    #header [data-column="start"] {
        gap: 12px;
    }

    #header [data-column="end"] {
        gap: 13px;
    }

    #header [data-id="menu"] {
        display: none !important;
    }

    #header [data-id="trigger"],
    #header .ct-header-trigger {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 32px !important;
        height: 32px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #header [data-id="trigger"] svg,
    #header .ct-header-trigger svg {
        width: 21px !important;
        height: 21px !important;
    }

    #header [data-id="search"] svg,
    #header [data-id="account"] svg,
    #header [data-id="cart"] svg {
        width: 17px !important;
        height: 17px !important;
    }
}

/* =========================================================
   BACK TO TOP
   ========================================================= */

.spade-back-to-top {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 9998;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #111111 !important;
    border-radius: 50% !important;

    background: #111111 !important;
    color: #ffffff !important;

    font-size: 20px;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

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

@media (max-width: 767px) {
    .spade-back-to-top {
        right: 15px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}

/* Keep announcement bar above the main header with no overlap/gap. */
#header [data-row="middle"],
body.home #header:not(.spade-header-scrolled) [data-row="middle"],
body.home #header.spade-header-scrolled [data-row="middle"] {
    margin-top: 0 !important;
}

/* =========================================================
   SPADE — RIGHT HEADER ICONS
   FORCE EQUAL SPACING
   ========================================================= */

#header [data-column="end"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    margin-left: auto !important;
}


/* SEARCH */
#header [data-id="search"] {
    margin: 0 24px 0 0 !important;
    padding: 0 !important;
}


/* ACCOUNT */
#header [data-id="account"] {
    margin: 0 24px 0 0 !important;
    padding: 0 !important;
}


/* CART */
#header [data-id="cart"] {
    margin: 0 !important;
    padding: 0 !important;
}


/* Keep all icon boxes identical */
#header [data-id="search"],
#header [data-id="account"],
#header [data-id="cart"] {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 22px !important;
}


/* Same SVG dimensions */
#header [data-id="search"] svg,
#header [data-id="account"] svg,
#header [data-id="cart"] svg {
    width: 20px !important;
    height: 20px !important;

    margin: 0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #header [data-id="search"] {
        margin-right: 18px !important;
    }

    #header [data-id="account"] {
        margin-right: 18px !important;
    }

}
/* =========================================================
   SPADE — HEADER CLICK / DROPDOWN FIX
   Keep this at the very bottom of header.css
   ========================================================= */

/* Keep main header above page content */
#header [data-row="middle"] {
    position: relative !important;
    z-index: 9992 !important;
}

/* Header container */
#header [data-row="middle"] .ct-container {
    position: relative !important;
    z-index: 2 !important;
}

/* Navigation must receive mouse clicks */
#header [data-id="menu"] {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

#header [data-id="menu"] > ul {
    position: relative !important;
    z-index: 101 !important;
    pointer-events: auto !important;
}

/* Every menu item */
#header [data-id="menu"] li {
    position: relative !important;
    pointer-events: auto !important;
}

/* Most important: actual links */
#header [data-id="menu"] a {
    position: relative !important;
    z-index: 102 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Decorative underline must never capture clicks */
#header [data-id="menu"] > ul > li > a::after {
    pointer-events: none !important;
}


/* =========================================================
   DROPDOWN
   ========================================================= */

#header [data-id="menu"] .sub-menu {
    position: absolute !important;

    top: 100% !important;
    left: 0 !important;

    min-width: 220px;

    padding: 12px 0 !important;

    background: #ffffff !important;

    border: 1px solid rgba(17, 17, 17, 0.08) !important;

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.10) !important;

    z-index: 99999 !important;

    pointer-events: auto !important;
}


/* Dropdown links */

#header [data-id="menu"] .sub-menu a {
    display: block !important;

    width: 100% !important;

    padding: 11px 18px !important;

    color: #111111 !important;

    background: #ffffff !important;

    pointer-events: auto !important;

    cursor: pointer !important;

    text-decoration: none !important;
}


/* Dropdown hover */

#header [data-id="menu"] .sub-menu a:hover {
    background: #f8f8f8 !important;
    color: #e83d72 !important;
}


/* =========================================================
   JS OPEN STATE
   ========================================================= */

#header .menu-item-has-children.spade-dropdown-open > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}


/* =========================================================
   DESKTOP HOVER
   ========================================================= */

@media (min-width: 768px) {

    #header .menu-item-has-children:hover > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

}


/* =========================================================
   SPADE — FINAL HEADER / ANNOUNCEMENT STACK FIX
   =========================================================
   IMPORTANT:
   The SPADE announcement bar is a separate element rendered
   with wp_body_open (.spade-announcement). It is NOT Blocksy's
   [data-row="top"] header row.

   Final layout:
   - Announcement bar fixed at the very top.
   - Blocksy top row hidden to prevent duplicate announcements.
   - Main header fixed directly below announcement.
   - Homepage only: main header transparent over cinematic video.
   - Other pages: solid white header with content starting below it.
   ========================================================= */


/* ---------------------------------------------------------
   1. HIDE BLOCKSY TOP ROW
   Prevent duplicate/overlapping announcement text.
   --------------------------------------------------------- */

#header [data-row="top"] {
    display: none !important;
}


/* ---------------------------------------------------------
   2. REAL SPADE ANNOUNCEMENT BAR
   --------------------------------------------------------- */

.spade-announcement {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    z-index: 10020 !important;

    width: 100% !important;
    height: var(--spade-announcement-height) !important;
    min-height: var(--spade-announcement-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #111111 !important;
    color: #ffffff !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   3. MAIN BLOCKSY HEADER
   Always begins BELOW the announcement bar.
   --------------------------------------------------------- */

#header {
    position: fixed !important;

    top: var(--spade-announcement-height) !important;
    right: 0 !important;
    left: 0 !important;

    z-index: 10010 !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}


/*
 * Blocksy's wrapper must not paint an unwanted white layer.
 * The actual middle row controls transparent/solid state.
 */
#header .ct-header {
    background: transparent !important;
}


/* ---------------------------------------------------------
   4. DEFAULT — ALL NORMAL PAGES
   --------------------------------------------------------- */

#header [data-row="middle"] {
    position: relative !important;

    width: 100% !important;
    min-height: var(--spade-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(255, 255, 255, 0.98) !important;

    border-bottom:
        1px solid var(--spade-border) !important;

    box-shadow:
        0 3px 16px rgba(0, 0, 0, 0.035) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        background-color 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        backdrop-filter 0.28s ease;
}


/* ---------------------------------------------------------
   5. HOMEPAGE ONLY — TRANSPARENT OVER CINEMATIC VIDEO
   JS adds .spade-header-home to #header only when the
   cinematic homepage section exists.
   --------------------------------------------------------- */

#header.spade-header-home:not(.spade-header-scrolled)
[data-row="middle"] {
    background: transparent !important;

    border-bottom-color: transparent !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* Homepage after scroll */

#header.spade-header-home.spade-header-scrolled
[data-row="middle"] {
    background: rgba(255, 255, 255, 0.96) !important;

    border-bottom:
        1px solid var(--spade-border) !important;

    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.06) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* ---------------------------------------------------------
   6. PAGE CONTENT POSITION
   --------------------------------------------------------- */

/*
 * NORMAL PAGES
 *
 * Announcement = 28px
 * Header       = 64px
 *
 * Content begins after both.
 */

body:not(.spade-homepage) #main-container {
    padding-top:
        calc(
            var(--spade-announcement-height)
            + var(--spade-header-height)
        ) !important;
}


/*
 * HOMEPAGE
 *
 * Reserve only announcement-bar space.
 * Main header overlays the cinematic video.
 */

body.spade-homepage #main-container {
    padding-top:
        var(--spade-announcement-height) !important;
}


/* ---------------------------------------------------------
   7. WORDPRESS ADMIN BAR
   --------------------------------------------------------- */

body.admin-bar .spade-announcement {
    top: 32px !important;
}

body.admin-bar #header {
    top:
        calc(
            32px
            + var(--spade-announcement-height)
        ) !important;
}


/* ---------------------------------------------------------
   8. MOBILE
   --------------------------------------------------------- */

@media (max-width: 782px) {

    body.admin-bar .spade-announcement {
        top: 46px !important;
    }

    body.admin-bar #header {
        top:
            calc(
                46px
                + 26px
            ) !important;
    }

}


@media (max-width: 767px) {

    .spade-announcement {
        height: 26px !important;
        min-height: 26px !important;
    }

    #header {
        top: 26px !important;
    }

    #header [data-row="middle"] {
        min-height:
            var(--spade-header-mobile-height) !important;
    }

    body:not(.spade-homepage) #main-container {
        padding-top:
            calc(
                26px
                + var(--spade-header-mobile-height)
            ) !important;
    }

    body.spade-homepage #main-container {
        padding-top: 26px !important;
    }

    body.admin-bar #header {
        top: 72px !important;
    }

}


/* ---------------------------------------------------------
   9. REMOVE ANY LEGACY MARGINS
   --------------------------------------------------------- */

#header [data-row="middle"],
#header.spade-header-home:not(.spade-header-scrolled)
[data-row="middle"],
#header.spade-header-home.spade-header-scrolled
[data-row="middle"] {
    margin-top: 0 !important;
}


/* =========================================================
   SPADE — AUTHORITATIVE HEADER POSITIONING
   Keep this FINAL block at the bottom of header.css.
   ========================================================= */

/* Blocksy's own top row is not the SPADE announcement bar. */
#header [data-row="top"] {
    display: none !important;
}

/* ---------- NORMAL / NON-HOMEPAGE PAGES ---------- */

/*
 * On normal pages both rows remain in document flow.
 * This guarantees:
 * announcement -> header -> page banner
 * with no overlay and no artificial spacer.
 */
body:not(.spade-homepage) .spade-announcement {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 10020 !important;
    width: 100% !important;
    height: var(--spade-announcement-height, 28px) !important;
    min-height: var(--spade-announcement-height, 28px) !important;
    margin: 0 !important;
}

body:not(.spade-homepage) #header {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 10010 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:not(.spade-homepage) #header [data-row="middle"] {
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid var(--spade-border) !important;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.035) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* No manual offsets are required when the two rows occupy real space. */
body:not(.spade-homepage) #main-container,
body:not(.spade-homepage).tax-product_cat #main-container,
body:not(.spade-homepage).tax-product_cat .spade-collection {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ---------- HOMEPAGE ---------- */

/*
 * Homepage keeps the desired cinematic treatment:
 * fixed announcement, transparent fixed header over the video.
 */
body.spade-homepage .spade-announcement {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 10020 !important;
    width: 100% !important;
    height: var(--spade-announcement-height, 28px) !important;
    min-height: var(--spade-announcement-height, 28px) !important;
    margin: 0 !important;
}

body.spade-homepage #header {
    position: fixed !important;
    top: var(--spade-announcement-height, 28px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 10010 !important;
    width: 100% !important;
    margin: 0 !important;
}

body.spade-homepage #main-container {
    padding-top: var(--spade-announcement-height, 28px) !important;
}

body.spade-homepage #header.spade-header-home:not(.spade-header-scrolled)
[data-row="middle"] {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.spade-homepage #header.spade-header-home.spade-header-scrolled
[data-row="middle"] {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid var(--spade-border) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* WordPress admin bar: only fixed homepage elements need an offset. */
body.admin-bar.spade-homepage .spade-announcement {
    top: 32px !important;
}

body.admin-bar.spade-homepage #header {
    top: calc(32px + var(--spade-announcement-height, 28px)) !important;
}

@media (max-width: 782px) {
    body.admin-bar.spade-homepage .spade-announcement {
        top: 46px !important;
    }

    body.admin-bar.spade-homepage #header {
        top: 72px !important;
    }
}

@media (max-width: 767px) {
    body:not(.spade-homepage) .spade-announcement,
    body.spade-homepage .spade-announcement {
        height: 26px !important;
        min-height: 26px !important;
    }

    body.spade-homepage #header {
        top: 26px !important;
    }

    body.spade-homepage #main-container {
        padding-top: 26px !important;
    }

    body.admin-bar.spade-homepage #header {
        top: 72px !important;
    }
}

/* =========================================================
   SPADE — SEARCH DRAWER LIKE MINI CART
   ========================================================= */

#search-modal {
    --spade-pink: #d7006d;
    --spade-black: #111111;
    --spade-text: #666666;
    --spade-border: #ececec;
}


/* BACKDROP */
#search-modal.ct-panel {
    background: rgba(10, 10, 12, 0.42) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* RIGHT DRAWER */
#search-modal .ct-panel-content {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    transform: none !important;

    width: min(420px, 100vw) !important;
    height: 100vh !important;
    min-height: 100vh !important;

    padding: 84px 26px 28px !important;

    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.14) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box !important;
}


/* HEADING */
#search-modal .ct-panel-content::before {
    content: "SEARCH SPADE";
    display: block;
    margin-bottom: 18px;

    color: #111111;
    font-family: var(--spade-font-heading, "DM Serif Display", Georgia, serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
}


/* CLOSE BUTTON */
#search-modal .ct-toggle-close {
    position: absolute !important;
    top: 22px !important;
    right: 20px !important;

    width: 36px !important;
    height: 36px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: transparent !important;
    color: #111111 !important;

    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

#search-modal .ct-toggle-close:hover {
    opacity: 1;
    color: #d7006d !important;
    transform: rotate(90deg);
}


/* SEARCH FORM */
#search-modal .search-form,
#search-modal .ct-search-form {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    align-items: center !important;

    margin: 0 0 18px !important;
    padding: 0 4px 0 16px !important;

    min-height: 52px !important;
    height: 52px !important;

    border: 1px solid #e3e3e3 !important;
    border-radius: 3px !important;

    background: #ffffff !important;
    box-shadow: none !important;

    overflow: hidden !important;

    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#search-modal .search-form:focus-within,
#search-modal .ct-search-form:focus-within {
    border-color: #d7006d !important;
    box-shadow: 0 0 0 1px rgba(215, 0, 109, 0.08) !important;
}


/* INPUT */
#search-modal input[type="search"],
#search-modal .search-field {
    width: 100% !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;
    color: #111111 !important;

    font-family: var(--spade-font-body, Manrope, Arial, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 400 !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

#search-modal input[type="search"]::placeholder,
#search-modal .search-field::placeholder {
    color: #888888 !important;
    opacity: 1 !important;
}

#search-modal input[type="search"]::-webkit-search-decoration,
#search-modal input[type="search"]::-webkit-search-cancel-button {
    display: none !important;
}


/* BUTTON */
#search-modal button[type="submit"],
#search-modal .search-submit {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 2px !important;

    background: #111111 !important;
    color: #ffffff !important;

    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

#search-modal button[type="submit"]:hover,
#search-modal .search-submit:hover {
    background: #d7006d !important;
    transform: scale(0.96);
}

#search-modal button[type="submit"] svg,
#search-modal .search-submit svg {
    width: 17px !important;
    height: 17px !important;

    color: #ffffff !important;
    fill: none !important;
    stroke: currentColor !important;
}


/* LIVE RESULTS BOX */
#search-modal .ct-search-results {
    margin-top: 8px !important;
    border-top: 1px solid #f0f0f0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* Generic result item spacing */
#search-modal .ct-search-results > *,
#search-modal .ct-search-results article,
#search-modal .ct-search-results li {
    padding: 14px 0 !important;
    border-bottom: 1px solid #f3f3f3 !important;
}

/* Links/text inside results */
#search-modal .ct-search-results a {
    color: #111111 !important;
    text-decoration: none !important;
}

#search-modal .ct-search-results a:hover {
    color: #d7006d !important;
}


/* REMOVE BLUE FOCUS */
#search-modal input,
#search-modal button,
#search-modal form {
    outline: none !important;
    outline-color: transparent !important;
}

#search-modal input:focus,
#search-modal input:focus-visible,
#search-modal button:focus,
#search-modal button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* MOBILE */
@media (max-width: 600px) {
    #search-modal .ct-panel-content {
        width: 100vw !important;
        padding: 76px 18px 22px !important;
    }

    #search-modal .ct-panel-content::before {
        font-size: 24px;
        margin-bottom: 16px;
    }

    #search-modal .search-form,
    #search-modal .ct-search-form {
        min-height: 50px !important;
        height: 50px !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        padding-left: 14px !important;
    }

    #search-modal input[type="search"],
    #search-modal .search-field {
        height: 48px !important;
        font-size: 13px !important;
    }

    #search-modal button[type="submit"],
    #search-modal .search-submit {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }
}

/* =========================================================
   SPADE — FINAL MOBILE HEADER
   JS-organised single row:
   Hamburger | Logo | FiboSearch | Cart
   ========================================================= */

@media (max-width: 767px) {

    #header [data-device="mobile"] [data-row="middle"] {
        min-height: 58px !important;
        height: 58px !important;
    }

    #header [data-device="mobile"] [data-row="middle"] .ct-container {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 58px !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 0 9px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* Hide Blocksy's now-empty mobile column wrappers. */
    #header [data-device="mobile"]
    [data-row="middle"] [data-column] {
        min-width: 0 !important;
    }


    /* ---------------------------------------------------------
       ACTUAL SINGLE-LINE ROW CREATED BY header.js
       --------------------------------------------------------- */

    #header [data-device="mobile"] .spade-mobile-header-row {
        position: relative !important;

        display: grid !important;

        grid-template-columns:
            28px
            68px
            minmax(0, 1fr)
            30px !important;

        grid-template-rows: 44px !important;

        align-items: center !important;

        column-gap: 7px !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* ---------------------------------------------------------
       HAMBURGER
       --------------------------------------------------------- */

    #header [data-device="mobile"]
    .spade-mobile-header-row [data-id="trigger"],
    #header [data-device="mobile"]
    .spade-mobile-header-row .ct-header-trigger {
        grid-column: 1 !important;
        grid-row: 1 !important;

        justify-self: start !important;
        align-self: center !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 28px !important;
        min-width: 28px !important;

        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

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

        transform: none !important;
    }

    #header [data-device="mobile"]
    .spade-mobile-header-row [data-id="trigger"] button,
    #header [data-device="mobile"]
    .spade-mobile-header-row button.ct-header-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 28px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
    }

    #header [data-device="mobile"]
    .spade-mobile-header-row [data-id="trigger"] svg,
    #header [data-device="mobile"]
    .spade-mobile-header-row .ct-header-trigger svg {
        width: 21px !important;
        height: 21px !important;

        margin: 0 !important;
    }


    /* ---------------------------------------------------------
       LOGO
       --------------------------------------------------------- */

    #header [data-device="mobile"]
    .spade-mobile-header-row [data-id="logo"] {
        grid-column: 2 !important;
        grid-row: 1 !important;

        justify-self: start !important;
        align-self: center !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 68px !important;
        max-width: 68px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #header [data-device="mobile"]
    .spade-mobile-header-row .site-logo-container {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 68px !important;
        max-width: 68px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #header [data-device="mobile"]
    .spade-mobile-header-row .site-logo-container img {
        display: block !important;

        width: 68px !important;
        max-width: 68px !important;

        height: auto !important;
        max-height: 30px !important;

        margin: 0 !important;

        object-fit: contain !important;
        object-position: left center !important;
    }


    /* ---------------------------------------------------------
       SEARCH
       --------------------------------------------------------- */

    #header [data-device="mobile"]
    .spade-mobile-header-row [data-id="search"] {
        grid-column: 3 !important;
        grid-row: 1 !important;

        justify-self: stretch !important;
        align-self: center !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

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

        flex: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        overflow: visible !important;

        transform: none !important;
    }

    #header [data-device="mobile"]
    .spade-mobile-header-row [data-id="search"]::before {
        content: none !important;
        display: none !important;
    }


    /* Real FiboSearch wrapper */
    #header [data-device="mobile"]
    .spade-mobile-header-row
    [data-id="search"] .dgwt-wcas-search-wrapp {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;

        overflow: visible !important;

        transform: none !important;
    }


    /* Hide only Fibo's separate icon/overlay launchers. */
    #header [data-device="mobile"]
    .spade-mobile-header-row
    [data-id="search"] > .dgwt-wcas-search-wrapp
    > .dgwt-wcas-enable-mobile-form,

    #header [data-device="mobile"]
    .spade-mobile-header-row
    [data-id="search"] > .dgwt-wcas-search-wrapp
    > .dgwt-wcas-search-icon,

    #header [data-device="mobile"]
    .spade-mobile-header-row
    [data-id="search"] > .dgwt-wcas-search-wrapp
    > .dgwt-wcas-search-icon-arrow {
        display: none !important;
    }


    /* Force the REAL Fibo form inline. */
    #header [data-device="mobile"]
    .spade-mobile-header-row
    [data-id="search"] .dgwt-wcas-search-form {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;
    }


    #header [data-device="mobile"]
    .spade-mobile-header-row
    [data-id="search"] .dgwt-wcas-sf-wrapp {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        border:
            1px solid rgba(17, 17, 17, 0.18) !important;

        border-radius: 999px !important;

        background: #ffffff !important;

        box-shadow: none !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    #header [data-device="mobile"]
    .spade-mobile-header-row
    [data-id="search"] .dgwt-wcas-sf-wrapp:focus-within {
        border-color: var(--spade-pink) !important;

        box-shadow:
            0 0 0 2px
            rgba(232, 61, 114, 0.08) !important;
    }


    #header [data-device="mobile"]
    .spade-mobile-header-row
    input.dgwt-wcas-search-input {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;

        padding:
            0
            39px
            0
            12px !important;

        border: 0 !important;
        outline: 0 !important;

        border-radius: 999px !important;

        background: transparent !important;

        box-shadow: none !important;

        color: #111111 !important;

        font-family:
            var(--spade-font-body),
            Manrope,
            Arial,
            sans-serif !important;

        font-size: 11px !important;
        font-weight: 500 !important;

        line-height: 38px !important;

        appearance: none !important;
        -webkit-appearance: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    #header [data-device="mobile"]
    .spade-mobile-header-row
    input.dgwt-wcas-search-input::placeholder {
        color: #858585 !important;
        opacity: 1 !important;
    }


    /* Real magnifier button inside Fibo form. */
    #header [data-device="mobile"]
    .spade-mobile-header-row
    .dgwt-wcas-search-submit {
        position: absolute !important;

        top: 3px !important;
        right: 3px !important;
        bottom: auto !important;
        left: auto !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 34px !important;
        min-width: 34px !important;

        height: 34px !important;
        min-height: 34px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 50% !important;

        background: #111111 !important;
        color: #ffffff !important;

        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        cursor: pointer !important;

        transform: none !important;

        z-index: 5 !important;
    }

    #header [data-device="mobile"]
    .spade-mobile-header-row
    .dgwt-wcas-search-submit:hover,
    #header [data-device="mobile"]
    .spade-mobile-header-row
    .dgwt-wcas-search-submit:focus {
        background: var(--spade-pink) !important;
    }

    #header [data-device="mobile"]
    .spade-mobile-header-row
    .dgwt-wcas-search-submit svg {
        display: block !important;

        width: 15px !important;
        height: 15px !important;

        margin: 0 !important;

        fill: #ffffff !important;
        color: #ffffff !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }

    #header [data-device="mobile"]
    .spade-mobile-header-row
    .dgwt-wcas-search-submit svg path {
        fill: #ffffff !important;
    }

    #header [data-device="mobile"]
    .spade-mobile-header-row
    .dgwt-wcas-preloader {
        right: 39px !important;
    }


    /* ---------------------------------------------------------
       CART
       --------------------------------------------------------- */

    #header [data-device="mobile"]
    .spade-mobile-header-row [data-id="cart"] {
        grid-column: 4 !important;
        grid-row: 1 !important;

        justify-self: end !important;
        align-self: center !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: 30px !important;
        min-width: 30px !important;

        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: none !important;

        transform: none !important;
    }

    #header [data-device="mobile"]
    .spade-mobile-header-row [data-id="cart"] svg {
        width: 21px !important;
        height: 21px !important;

        margin: 0 !important;
    }


    /* Keep account + desktop menu off mobile. */
    #header [data-device="mobile"] [data-id="account"],
    #header [data-device="mobile"] [data-id="menu"] {
        display: none !important;
    }


    /* ---------------------------------------------------------
       FIBO LIVE RESULTS
       --------------------------------------------------------- */

    .dgwt-wcas-suggestions-wrapp {
        max-height: 54vh !important;

        border:
            1px solid rgba(17, 17, 17, 0.10) !important;

        border-radius: 8px !important;

        background: #ffffff !important;

        box-shadow:
            0 18px 46px
            rgba(0, 0, 0, 0.16) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        z-index: 100000 !important;
    }

    .dgwt-wcas-suggestion {
        padding: 10px 12px !important;

        border-bottom:
            1px solid #f1f1f1 !important;

        background: #ffffff !important;
    }

    .dgwt-wcas-suggestion:hover,
    .dgwt-wcas-suggestion-selected {
        background: #fafafa !important;
    }

    .dgwt-wcas-suggestion-product .dgwt-wcas-si {
        width: 54px !important;
        min-width: 54px !important;

        margin-right: 11px !important;
    }

    .dgwt-wcas-si img {
        width: 54px !important;
        height: 54px !important;

        object-fit: contain !important;

        border-radius: 4px !important;

        background: #fafafa !important;
    }

    .dgwt-wcas-st-title {
        color: #111111 !important;

        font-size: 12px !important;
        font-weight: 600 !important;

        line-height: 1.4 !important;
    }

    .dgwt-wcas-st-price {
        margin-top: 3px !important;

        color: #111111 !important;

        font-size: 12px !important;
        font-weight: 700 !important;
    }

    .dgwt-wcas-suggestion-more {
        padding: 13px 15px !important;

        background: #111111 !important;
        color: #ffffff !important;

        font-size: 10px !important;
        font-weight: 700 !important;

        letter-spacing: 0.10em !important;
        text-transform: uppercase !important;
        text-align: center !important;
    }
}


/* =========================================================
   SPADE — BRAND MENU NEW BADGE (OUTLINE ONLY)
   ========================================================= */

.spade-menu-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 8px;
    padding: 3px 9px;

    background: transparent !important;
    border: 1.5px solid #d7006d !important;
    border-radius: 999px;

    color: #d7006d !important;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    box-shadow: none !important;
    text-shadow: none !important;

    vertical-align: middle;
}