/* ════════════════════════════════════
   
HEADER
   ════════════════════════════════════ */

/* ── Navigation ── */
#primary-menu a {
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    font-weight: 500;
    color: #FAF2E8 !important;
}

#primary-menu a:hover {
    color: #DB9475 !important;
}

#primary-menu>li.current-menu-item>a,
#primary-menu>li.current-menu-parent>a,
#primary-menu>li.current-menu-ancestor>a {
    position: relative;
    color: #FAF2E8 !important;
}

/* Active underline. At bottom:10px the bar sat at y=96 while the text box
   ended at y=99, so it cut 4px into the descenders. bottom:3px puts it 4px
   clear. left/right 1.75em matches the link's 24.5px padding, so the bar
   is the width of the word instead of the whole hit area. */
#primary-menu>li.current-menu-item>a::after,
#primary-menu>li.current-menu-parent>a::after,
#primary-menu>li.current-menu-ancestor>a::after {
    content: "";
    position: absolute;
    left: 1.75em;
    right: 1.75em;
    bottom: 3px;
    height: 1px;
    background: #D4784F;
}

#masthead .main-navigation ul ul {
    background: #2C2B28 !important;
    border: 1px solid rgba(250, 242, 232, 0.14) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

#masthead .main-navigation ul ul a {
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    color: #FAF2E8 !important;
}

#masthead .main-navigation ul ul a:hover {
    color: #DB9475 !important;
    background: rgba(250, 242, 232, 0.05) !important;
}

/* ── Search ── */
.header-html-inner {
    display: flex;
    align-items: center;
    gap: 26px;
}

.header-html-inner a {
    text-decoration: none !important;
}

.lcc-search {
    display: flex;
    align-items: center;
    width: 320px;
    height: 44px;
    padding: 0 4px 0 14px;
    background: #F5F1E8;
}

.lcc-search input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    line-height: 44px;
    color: #2C2B28;
    outline: 0;
    box-shadow: none;
}

.lcc-search input[type="search"]::placeholder {
    color: #5C574E;
}

/* Chrome's own clear button is a blue ✕ that ignores colour rules.
   -webkit-appearance:none strips it, then it's redrawn as an inline SVG
   in the same stone grey as the magnifier beside it. 24px box so it's a
   real tap target (WCAG 2.5.8) with an 11px mark inside. */
.lcc-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin: 0 2px 0 6px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='%236B655D' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

.lcc-search input[type="search"]::-webkit-search-cancel-button:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='%232C2B28' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

.lcc-search input[type="search"]:focus {
    outline: 0;
}

/* An outline, not an inset shadow. The field has no vertical padding,
   so the input is exactly as tall as the form and an inset ring's top
   and bottom 2px end up underneath it — only the left and right showed.
   An outline paints above descendants and can't be covered. Offset 2px
   puts it outside the box; there's 10px of clearance in the header row
   either side, measured, so nothing clips it. */
.lcc-search:focus-within {
    outline: 2px solid #B4521F;
    outline-offset: 2px;
}

/* Chrome paints an autofilled field #E8F0FE with blue text, and no
   normal background or color rule beats it. The inset shadow is the
   only way to cover it — 1000px so it fills the box whatever its size
   — and -webkit-text-fill-color is what actually sets autofilled text.
   The long transition stops the blue flashing in before the shadow
   paints. #F5F1E8 matches the field's own background above. */
.lcc-search input[type="search"]:-webkit-autofill,
.lcc-search input[type="search"]:-webkit-autofill:hover,
.lcc-search input[type="search"]:-webkit-autofill:focus,
.lcc-search input[type="search"]:-webkit-autofill:active {
    -webkit-box-shadow: inset 0 0 0 1000px #F5F1E8;
    box-shadow: inset 0 0 0 1000px #F5F1E8;
    -webkit-text-fill-color: #2C2B28;
    caret-color: #2C2B28;
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    transition: background-color 9999s ease-in-out 0s;
}

.lcc-search button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2C2B28;
    cursor: pointer;
}

.lcc-search button:hover {
    color: #B4521F;
}

.lcc-search .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── My account ── */
#masthead .secondary-navigation .menu-item>a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: 44px;
    font-family: 'Jost', sans-serif;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: #FAF2E8 !important;
    text-decoration: none;
    white-space: nowrap;
}

#masthead .secondary-navigation .menu-item>a:hover {
    color: #DB9475 !important;
}

#masthead .secondary-navigation .menu-item>a::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6 8-6s8 2 8 6"/></svg>') center/16px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6 8-6s8 2 8 6"/></svg>') center/16px no-repeat;
}

#masthead .site-main-header-wrap.item-is-fixed {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* ── Cart ── */
#masthead .header-cart-button {
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: 44px;
    font-family: 'Jost', sans-serif;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: #FAF2E8 !important;
    text-decoration: none;
    white-space: nowrap;
}

#masthead .header-cart-button svg {
    flex: 0 0 auto;
}

#masthead .header-cart-button::after {
    content: "Cart";
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

#masthead .header-cart-button:hover,
#masthead .header-cart-button:hover::after,
#masthead .header-cart-button:hover svg {
    color: #DB9475 !important;
}

.header-cart-wrap {
    position: relative;
}

.header-cart-total {
    position: absolute !important;
    top: -7px !important;
    right: -9px !important;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    background: #B4521F;
    color: #FFFFFF;
    font-size: 10px;
    line-height: 17px;
    letter-spacing: 0;
    text-align: center;
}

.header-cart-total:empty {
    display: none;
}

#masthead .main-navigation ul ul li.current-menu-item>a,
#masthead .main-navigation ul ul li.current_page_item>a,
.header-navigation ul ul.sub-menu li.current-menu-item>a {
    background: rgba(250, 242, 232, 0.08) !important;
    color: #D4784F !important;
}

.header-cart-wrap .sub-menu {
    background: #2C2B28 !important;
    border: 1px solid rgba(250, 242, 232, 0.14) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

.header-cart-wrap .sub-menu,
.header-cart-wrap .sub-menu a,
.header-cart-wrap .woocommerce-mini-cart__empty-message,
.header-cart-wrap .woocommerce-mini-cart__total {
    color: #FAF2E8 !important;
}

.header-cart-wrap .sub-menu a:hover {
    color: #DB9475 !important;
}

.header-cart-wrap .woocommerce-mini-cart-item,
.header-cart-wrap .woocommerce-mini-cart__total {
    border-color: rgba(250, 242, 232, 0.12) !important;
}

.header-cart-wrap .woocommerce-mini-cart__buttons .button {
    background: #B4521F !important;
    color: #FFFFFF !important;
    border: 0 !important;
}

.header-cart-wrap .woocommerce-mini-cart__buttons .button.checkout {
    background: transparent !important;
    color: #FAF2E8 !important;
    border: 1px solid rgba(250, 242, 232, 0.5) !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .lcc-search {
        width: 100%;
    }

    /* Kadence's own search toggle in the mobile header. The bottom bar
     already has a search button, so this one is a duplicate.

     Hidden rather than removed in the Customizer, and that is not a
     shortcut — the bottom bar button works by clicking this one:
       onclick="document.querySelector('.search-toggle-open, .search-toggle').click()"
     Delete the header element and that querySelector returns null, the
     click throws, and the bar's search stops working. display:none
     keeps it in the DOM, where a programmatic .click() still fires and
     still opens the drawer, while screen readers skip it. */
    .site-mobile-header-wrap .search-toggle-open-container {
        display: none;
    }
}

/* ── LushKesim in the main nav ── */
/*
 * Option C: the word in warm gold with a solid gold Beta tag. No
 * divider.
 *
 * #C4975A against the charcoal bar is about 6.3:1, and the tag is the
 * same pair inverted, so both pass comfortably.
 *
 * Two selectors on purpose. menu-item-100007955 is the current menu
 * item id; if you ever rebuild the menu WordPress issues a new id and
 * that selector stops matching, so the href selector is there to
 * carry it. Either one is enough.
 *
 * The tag is a pseudo-element, so there is no markup to add and
 * nothing to maintain in the menu. Delete this whole block at launch
 * and the nav goes back to normal.
 */

/*
 * Four selectors, and all four are needed.
 *
 * A few lines above, this file sets
 *   #primary-menu a { color: #FAF2E8 !important; }
 * That is an id plus an element — 1,0,1 — and it is !important, so a
 * class-only rule loses to it no matter how many !importants it
 * carries. The desktop selectors below are qualified with the id to
 * outrank it at 1,1,1.
 *
 * Kadence also renders a second copy of the menu for mobile, under
 * #mobile-menu. The id rule does not reach that one, so the unqualified
 * selectors cover it — without them the word stays white in the
 * mobile drawer.
 */
#primary-menu .menu-item-100007955>a,
#primary-menu li.menu-item:has(> a[href*="lushkesim"])>a,
.menu-item-100007955>a,
li.menu-item:has(> a[href*="lushkesim"])>a {
    color: var(--warm-gold) !important;
}

/*
 * inline-flex with a fixed height rather than padding arithmetic.
 * Padding alone centres the text against the font's em box, and in
 * an em box uppercase sits high — there is roughly 0.9px above the
 * capitals and 1.7px below at this size, so even padding reads
 * bottom-heavy. Flex centring ignores the metrics and splits the box.
 * vertical-align and the 1px nudge handle the tag against the word,
 * which is uppercase too.
 */
#primary-menu .menu-item-100007955>a::after,
#primary-menu li.menu-item:has(> a[href*="lushkesim"])>a::after,
.menu-item-100007955>a::after,
li.menu-item:has(> a[href*="lushkesim"])>a::after {
    content: "Beta";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    top: -1px;
    height: 16px;
    margin-left: 8px;
    padding: 0 6px;
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    border: 0;
    border-radius: 2px;
    background: var(--warm-gold);
    color: var(--charcoal);
}