/* ==========================================================
   EMOTIVE — AUTHORITATIVE GLOBAL HEADER
   Same header on Home, Shop, Products and all other pages
   ========================================================== */

.emotive-site-header,
.emotive-site-header .emotive-header-main,
.emotive-site-header .emotive-header-inner {
    background: #f3eee7 !important;
    color: #000 !important;
}

/* Main desktop header geometry */
@media (min-width: 901px) {

    .emotive-site-header .emotive-header-inner {
        max-width: 1440px !important;
        min-height: 78px !important;
        margin: 0 auto !important;
        padding: 0 28px !important;

        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        gap: 32px !important;
    }

    /* MAIN NAVIGATION — identical everywhere */
    .emotive-site-header .emotive-main-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 38px !important;

        font-family: Inter, Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1 !important;

        letter-spacing: .06em !important;
        text-transform: uppercase !important;
    }

    .emotive-site-header .emotive-main-nav > a,
    .emotive-site-header .emotive-main-nav .emotive-nav-item > a {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;

        font-family: Inter, Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;

        letter-spacing: .06em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;

        text-shadow: none !important;

        padding: 31px 0 !important;
        position: relative !important;
    }

    /* underline */
    .emotive-site-header .emotive-main-nav > a::after,
    .emotive-site-header .emotive-main-nav .emotive-nav-item > a::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 100% !important;
        bottom: 22px !important;

        height: 1px !important;
        background: #000 !important;

        transition: right .2s ease !important;
    }

    .emotive-site-header .emotive-main-nav > a:hover::after,
    .emotive-site-header .emotive-main-nav .emotive-nav-item > a:hover::after {
        right: 0 !important;
    }

    /* ======================================================
       DROPDOWNS — same styling on every page
       ====================================================== */

    .emotive-site-header .emotive-nav-item {
        position: relative !important;
    }

    .emotive-site-header .emotive-dropdown {
        position: absolute !important;
        top: calc(100% - 1px) !important;
        left: 50% !important;

        transform: translateX(-50%) translateY(8px) !important;

        min-width: 230px !important;

        background: #f8f3ec !important;
        border: 1px solid rgba(0,0,0,.12) !important;
        border-radius: 0 !important;

        padding: 22px !important;

        box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease !important;

        z-index: 99999 !important;
    }

    .emotive-site-header .emotive-has-dropdown:hover > .emotive-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateX(-50%) translateY(0) !important;
    }

    /* Bundle dropdown */
    .emotive-site-header .emotive-shop-dropdown {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(180px,1fr)) !important;
        gap: 34px !important;

        width: 470px !important;
        min-width: 470px !important;
    }

    .emotive-site-header .emotive-dropdown-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .emotive-site-header .emotive-dropdown-title {
        margin: 0 0 7px !important;

        color: #72695f !important;
        -webkit-text-fill-color: #72695f !important;

        font-family: Inter, Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;

        letter-spacing: .1em !important;
        text-transform: uppercase !important;
    }

    /* Dropdown links */
    .emotive-site-header .emotive-dropdown a {
        display: block !important;

        padding: 5px 0 !important;

        color: #1f1b18 !important;
        -webkit-text-fill-color: #1f1b18 !important;

        font-family: Inter, Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;

        letter-spacing: 0 !important;
        text-transform: none !important;
        text-decoration: none !important;

        text-shadow: none !important;
    }

    .emotive-site-header .emotive-dropdown a:hover {
        color: #75695c !important;
        -webkit-text-fill-color: #75695c !important;
    }

    /* Prevent main-nav underline styling appearing inside dropdown */
    .emotive-site-header .emotive-dropdown a::after {
        display: none !important;
        content: none !important;
    }
}

/* ==========================================================
   BRAND
   ========================================================== */

.emotive-site-header .emotive-brand-lockup {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    text-decoration: none !important;
}

.emotive-site-header .emotive-brand-wordmark {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

/* ==========================================================
   HEADER ICONS
   ========================================================== */

.emotive-site-header .emotive-header-actions,
.emotive-site-header .emotive-header-actions a,
.emotive-site-header .emotive-header-actions button,
.emotive-site-header .emotive-header-icon {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

.emotive-site-header .emotive-header-actions svg {
    color: #000 !important;
    stroke: #000 !important;
}

.emotive-site-header .emotive-header-actions svg path,
.emotive-site-header .emotive-header-actions svg circle,
.emotive-site-header .emotive-header-actions svg line,
.emotive-site-header .emotive-header-actions svg polyline,
.emotive-site-header .emotive-header-actions svg rect {
    stroke: #000 !important;
}

.emotive-site-header .emotive-header-actions svg [fill]:not([fill="none"]) {
    fill: #000 !important;
}

/* header separator */
.emotive-site-header .emotive-header-main {
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: none !important;
}


/* ==========================================================
   EMOTIVE — HOMEPAGE DROPDOWN CONSISTENCY FIX
   Homepage dropdowns must match the rest of the site
   ========================================================== */

body.home .emotive-site-header .emotive-main-nav .emotive-dropdown,
body.home .emotive-site-header .emotive-main-nav .emotive-shop-dropdown,
body.home .emotive-site-header .emotive-main-nav .emotive-about-dropdown {
    background: #f8f3ec !important;
    color: #1f1b18 !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;
}

/* dropdown section headings */
body.home .emotive-site-header .emotive-dropdown .emotive-dropdown-title {
    color: #72695f !important;
    -webkit-text-fill-color: #72695f !important;
    text-shadow: none !important;
}

/* dropdown links */
body.home .emotive-site-header .emotive-dropdown a {
    color: #1f1b18 !important;
    -webkit-text-fill-color: #1f1b18 !important;

    font-family: Inter, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;

    letter-spacing: 0 !important;
    text-transform: none !important;

    text-shadow: none !important;
    background: transparent !important;
}

/* hover */
body.home .emotive-site-header .emotive-dropdown a:hover {
    color: #75695c !important;
    -webkit-text-fill-color: #75695c !important;
    background: transparent !important;
}

/* make sure no homepage dark layer survives */
body.home .emotive-site-header .emotive-dropdown *,
body.home .emotive-site-header .emotive-dropdown-column {
    border-color: rgba(0,0,0,.10) !important;
}


/* ==========================================================
   EMOTIVE RESPONSIVE HEADER
   IMPORTANT: ONLY APPLIES AT 900PX AND BELOW
   Desktop >= 901px remains untouched
   ========================================================== */

@media (max-width:900px){

    /* Header bar */
    .emotive-site-header .emotive-header-inner{
        min-height:68px !important;
        height:68px !important;

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

        display:grid !important;
        grid-template-columns:1fr auto 1fr !important;
        align-items:center !important;
        gap:10px !important;

        background:#f3eee7 !important;
    }

    /* Hide full desktop navigation */
    .emotive-site-header .emotive-main-nav{
        display:none !important;
    }

    /* Brand stays centred */
    .emotive-site-header .emotive-brand-lockup{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        grid-column:2 !important;

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

        color:#000 !important;
        text-decoration:none !important;
    }

    .emotive-site-header .emotive-brand-wordmark{
        font-size:22px !important;
        line-height:1 !important;
        letter-spacing:.16em !important;

        color:#000 !important;
        -webkit-text-fill-color:#000 !important;
    }

    .emotive-site-header .emotive-brand-tagline{
        margin-top:4px !important;

        font-size:7px !important;
        line-height:1 !important;
        letter-spacing:.16em !important;

        color:#504b46 !important;
        -webkit-text-fill-color:#504b46 !important;
    }

    /* Right-side actions */
    .emotive-site-header .emotive-header-actions{
        grid-column:3 !important;

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

        gap:5px !important;

        margin:0 !important;
    }

    /* Search and cart remain visible */
    .emotive-site-header .emotive-search-toggle,
    .emotive-site-header .emotive-cart-toggle{
        display:inline-flex !important;

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

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

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

        color:#000 !important;
        background:transparent !important;
        border:0 !important;
    }

    /* Account + wishlist move into drawer */
    .emotive-site-header .emotive-desktop-secondary-action{
        display:none !important;
    }

    /* Hamburger */
    .emotive-site-header .emotive-mobile-menu-toggle{
        display:inline-flex !important;

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

        align-items:center !important;
        justify-content:center !important;
        flex-direction:column !important;

        gap:4px !important;

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

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

        cursor:pointer !important;
    }

    .emotive-site-header .emotive-mobile-menu-toggle span{
        display:block !important;

        width:19px !important;
        height:1.5px !important;

        margin:0 !important;

        background:#000 !important;
        border:0 !important;
    }

    /* Header icons */
    .emotive-site-header .emotive-header-actions svg{
        width:20px !important;
        height:20px !important;

        stroke:#000 !important;
        color:#000 !important;
    }

    /* Cart count */
    .emotive-site-header .emotive-cart-count{
        min-width:15px !important;
        height:15px !important;

        top:-1px !important;
        right:-1px !important;

        padding:0 3px !important;

        background:#211813 !important;
        color:#fff !important;

        font-size:8px !important;
    }

    /* ======================================================
       MOBILE / TABLET DRAWER APPEARANCE
       Do not alter existing JS/open-close behaviour
       ====================================================== */

    .emotive-mobile-drawer-panel{
        background:#f3eee7 !important;
        color:#211813 !important;
    }

    .emotive-mobile-drawer-top{
        padding:20px 22px !important;

        border-bottom:1px solid rgba(44,33,27,.12) !important;
    }

    .emotive-mobile-drawer-brand{
        color:#211813 !important;

        font-family:Inter,Arial,sans-serif !important;
        font-size:20px !important;
        font-weight:600 !important;

        letter-spacing:.14em !important;
        text-decoration:none !important;
    }

    .emotive-mobile-menu-close{
        color:#211813 !important;
        background:transparent !important;
        border:0 !important;

        font-size:30px !important;
        line-height:1 !important;
    }

    .emotive-mobile-nav{
        padding:14px 22px !important;
    }

    .emotive-mobile-nav > a,
    .emotive-mobile-nav summary{
        display:block !important;

        padding:15px 0 !important;

        color:#211813 !important;
        -webkit-text-fill-color:#211813 !important;

        font-family:Inter,Arial,sans-serif !important;
        font-size:15px !important;
        font-weight:600 !important;

        letter-spacing:.05em !important;
        text-transform:uppercase !important;
        text-decoration:none !important;

        border-bottom:1px solid rgba(44,33,27,.10) !important;
    }

    .emotive-mobile-nav summary{
        cursor:pointer !important;
    }

    .emotive-mobile-subnav{
        padding:6px 0 10px 14px !important;
    }

    .emotive-mobile-subnav a{
        display:block !important;

        padding:9px 0 !important;

        color:#5f554e !important;
        -webkit-text-fill-color:#5f554e !important;

        font-family:Inter,Arial,sans-serif !important;
        font-size:14px !important;
        font-weight:400 !important;

        text-transform:none !important;
        text-decoration:none !important;
    }

    .emotive-mobile-drawer-links{
        padding:16px 22px 26px !important;

        border-top:1px solid rgba(44,33,27,.12) !important;
    }

    .emotive-mobile-drawer-links a{
        display:block !important;

        padding:10px 0 !important;

        color:#211813 !important;
        -webkit-text-fill-color:#211813 !important;

        font-family:Inter,Arial,sans-serif !important;
        font-size:14px !important;

        text-decoration:none !important;
    }
}

/* Smaller phones only */
@media (max-width:480px){

    .emotive-site-header .emotive-header-inner{
        padding:0 12px !important;
    }

    .emotive-site-header .emotive-brand-wordmark{
        font-size:19px !important;
    }

    .emotive-site-header .emotive-brand-tagline{
        font-size:6px !important;
    }

    .emotive-site-header .emotive-header-actions{
        gap:2px !important;
    }

    .emotive-site-header .emotive-search-toggle,
    .emotive-site-header .emotive-cart-toggle,
    .emotive-site-header .emotive-mobile-menu-toggle{
        width:33px !important;
        height:33px !important;
    }
}


/* ==========================================================
   EMOTIVE HEADER — STEP 1
   Desktop logo colour only
   ========================================================== */

@media (min-width:1101px){

    .emotive-site-header .emotive-brand-wordmark{
        color:#5A3A2A !important;
        -webkit-text-fill-color:#5A3A2A !important;
    }

    .emotive-site-header .emotive-brand-tagline{
        color:#765744 !important;
        -webkit-text-fill-color:#765744 !important;
    }
}


/* ==========================================================
   EMOTIVE HEADER — STEP 2
   Desktop navigation typography only
   ========================================================== */

@media (min-width:1101px){

    .emotive-site-header .emotive-main-nav{
        font-family:Inter, Arial, sans-serif !important;
        font-size:14px !important;
        font-weight:500 !important;
        letter-spacing:.085em !important;
    }

    .emotive-site-header .emotive-main-nav > a,
    .emotive-site-header .emotive-main-nav .emotive-nav-item > a{
        color:#5A4032 !important;
        -webkit-text-fill-color:#5A4032 !important;

        font-family:Inter, Arial, sans-serif !important;
        font-size:14px !important;
        font-weight:500 !important;
        line-height:1 !important;

        letter-spacing:.085em !important;
        text-transform:uppercase !important;

        text-shadow:none !important;
    }

    .emotive-site-header .emotive-main-nav > a:hover,
    .emotive-site-header .emotive-main-nav .emotive-nav-item > a:hover{
        color:#5A4032 !important;
        -webkit-text-fill-color:#5A4032 !important;
    }
}


/* ==========================================================
   EMOTIVE HEADER — TOP LEVEL NAV UNIFICATION
   Desktop only
   Makes HOME / SHOP / BUNDLES / ABOUT identical
   ========================================================== */

@media (min-width:1101px){

    body .emotive-site-header .emotive-main-nav > a,
    body .emotive-site-header .emotive-main-nav > a:link,
    body .emotive-site-header .emotive-main-nav > a:visited,
    body .emotive-site-header .emotive-main-nav > a:hover,
    body .emotive-site-header .emotive-main-nav > a:focus,

    body .emotive-site-header .emotive-main-nav .emotive-nav-item > a,
    body .emotive-site-header .emotive-main-nav .emotive-nav-item > a:link,
    body .emotive-site-header .emotive-main-nav .emotive-nav-item > a:visited,
    body .emotive-site-header .emotive-main-nav .emotive-nav-item > a:hover,
    body .emotive-site-header .emotive-main-nav .emotive-nav-item > a:focus {

        color:#5A4032 !important;
        -webkit-text-fill-color:#5A4032 !important;

        font-family:Inter, Arial, sans-serif !important;
        font-size:14px !important;
        font-weight:500 !important;
        line-height:1 !important;

        letter-spacing:.09em !important;
        text-transform:uppercase !important;

        text-shadow:none !important;
        text-decoration:none !important;
    }

}


/* ==========================================================
   EMOTIVE HEADER — NAV TYPOGRAPHY STEP
   Desktop only
   ========================================================== */

@media (min-width:1101px){

    body .emotive-site-header .emotive-main-nav > a,
    body .emotive-site-header .emotive-main-nav > a:link,
    body .emotive-site-header .emotive-main-nav > a:visited,
    body .emotive-site-header .emotive-main-nav > a:hover,
    body .emotive-site-header .emotive-main-nav > a:focus,

    body .emotive-site-header .emotive-main-nav .emotive-nav-item > a,
    body .emotive-site-header .emotive-main-nav .emotive-nav-item > a:link,
    body .emotive-site-header .emotive-main-nav .emotive-nav-item > a:visited,
    body .emotive-site-header .emotive-main-nav .emotive-nav-item > a:hover,
    body .emotive-site-header .emotive-main-nav .emotive-nav-item > a:focus {

        font-size:15px !important;
        font-weight:550 !important;
        letter-spacing:.085em !important;
    }
}


/* ==========================================================
   EMOTIVE HEADER — LOGO REFINEMENT
   Desktop only
   ========================================================== */

@media (min-width:1101px){

    .emotive-site-header .emotive-brand-lockup{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        gap:3px !important;
        margin:0 !important;
        padding:0 !important;
    }

    .emotive-site-header .emotive-brand-wordmark{
        font-family:"Cormorant Garamond", Georgia, serif !important;

        font-size:35px !important;
        font-style:italic !important;
        font-weight:600 !important;

        line-height:.82 !important;
        letter-spacing:-.025em !important;

        color:#5A4032 !important;
        -webkit-text-fill-color:#5A4032 !important;

        text-shadow:none !important;
    }

    .emotive-site-header .emotive-brand-tagline{
        margin:4px 0 0 !important;

        font-family:Inter, Arial, sans-serif !important;
        font-size:8px !important;
        font-weight:500 !important;

        line-height:1 !important;
        letter-spacing:.34em !important;

        color:#765744 !important;
        -webkit-text-fill-color:#765744 !important;

        text-shadow:none !important;
        white-space:nowrap !important;
    }
}


/* ==========================================================
   EMOTIVE HEADER — ICON REFINEMENT
   Desktop only
   ========================================================== */

@media (min-width:1101px){

    .emotive-site-header .emotive-header-actions{
        gap:20px !important;
    }

    .emotive-site-header .emotive-header-icon{
        width:30px !important;
        height:30px !important;

        color:#5A4032 !important;
        -webkit-text-fill-color:#5A4032 !important;
    }

    .emotive-site-header .emotive-header-icon svg{
        width:21px !important;
        height:21px !important;

        stroke:#5A4032 !important;
        stroke-width:1.45 !important;

        color:#5A4032 !important;
    }

    .emotive-site-header .emotive-header-icon svg path,
    .emotive-site-header .emotive-header-icon svg circle,
    .emotive-site-header .emotive-header-icon svg line,
    .emotive-site-header .emotive-header-icon svg polyline,
    .emotive-site-header .emotive-header-icon svg rect{
        stroke:#5A4032 !important;
        stroke-width:1.45 !important;
    }

    /* Give cart a slightly wider visual footprint */
    .emotive-site-header .emotive-cart-toggle svg{
        width:23px !important;
        height:21px !important;
    }

    .emotive-site-header .emotive-cart-count{
        top:-2px !important;
        right:-3px !important;
    }
}


/* ==========================================================
   EMOTIVE HEADER — ICON BALANCE
   Desktop only
   ========================================================== */

@media (min-width:1101px){

    .emotive-site-header .emotive-header-actions{
        gap:24px !important;
    }

    .emotive-site-header .emotive-header-icon{
        width:32px !important;
        height:32px !important;
    }

    .emotive-site-header .emotive-header-icon svg{
        width:23px !important;
        height:23px !important;
    }

    .emotive-site-header .emotive-cart-toggle svg{
        width:24px !important;
        height:23px !important;
    }

    .emotive-site-header .emotive-cart-count{
        top:0 !important;
        right:-2px !important;
    }
}