/**
 * ChaCha Home
 * Header v2.0 — Patch-01B (cumulative)
 *
 * Ownership:
 * - desktop main-header shell
 * - inline product-search presentation
 *
 * Not owned here:
 * - utility bar / top row
 * - category navigation / mega menu
 * - mobile off-canvas navigation
 */


/* ==========================================================
   01. DESKTOP MAIN HEADER SHELL
   ========================================================== */
@media (min-width: 1025px) {

    .site-main-header-wrap
    .site-header-row-container-inner
    > .site-container {
        width: min(
            calc(100% - 64px),
            var(--chacha-container-max, 1400px)
        );
        max-width: none;
        margin-inline: auto;
        padding-inline: 0;
    }


    .site-main-header-wrap
    .site-main-header-inner-wrap {
        grid-template-columns:
            minmax(210px, 285px)
            minmax(0, 1fr) !important;
        column-gap: clamp(28px, 3.4vw, 58px);
        min-height: 92px;
        align-items: center;
    }


    .site-main-header-wrap
    .site-header-main-section-left,

    .site-main-header-wrap
    .site-header-main-section-right {
        min-width: 0;
    }


    .site-main-header-wrap
    .site-header-main-section-left {
        justify-content: flex-start;
    }


    .site-main-header-wrap
    .site-header-main-section-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(12px, 1vw, 18px);
        width: 100%;
    }


    /*
     * The free Kadence Search component is a popup trigger.
     * Header v2.0 replaces it on desktop with the real inline
     * product-search form below. The mobile Search component is
     * rendered through a separate Kadence mobile header tree and
     * is therefore unaffected by this desktop-scoped rule.
     */
    .site-main-header-wrap
    .search-toggle-open-container {
        display: none !important;
    }

}


/* ==========================================================
   02. INLINE PRODUCT SEARCH
   ========================================================== */
@media (min-width: 1025px) {

    .chacha-header-search-slot {
        /*
         * DEV-05 / Patch-03B
         * Let Search consume the available middle space instead of
         * capping it at 720px. This keeps the visual rhythm:
         * Logo → Search → Account → Favorites → Cart.
         */
        flex: 1 1 auto;
        min-width: 280px;
        max-width: none;
        margin-right: clamp(8px, 0.9vw, 16px);
    }


    .chacha-header-search {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        margin: 0;
        overflow: hidden;
        background:
            var(--chacha-bg-soft, #FBF8F4);
        border:
            1px solid
            var(--chacha-border, #D7CEC4);
        border-radius: 7px;
        transition:
            border-color 180ms ease,
            box-shadow 180ms ease,
            background-color 180ms ease;
    }


    .chacha-header-search:hover {
        border-color:
            rgba(176, 141, 87, 0.62);
    }


    .chacha-header-search:focus-within {
        background:
            var(--chacha-bg, #FFFDFC);
        border-color:
            var(--chacha-brass, #B08D57);
        box-shadow:
            0 0 0 3px
            rgba(176, 141, 87, 0.10);
    }


    .chacha-header-search__submit {
        appearance: none;
        flex: 0 0 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color:
            var(--chacha-text-muted, #6A5F58);
        cursor: pointer;
        box-shadow: none;
        transition:
            color 180ms ease;
    }


    .chacha-header-search__submit:hover,
    .chacha-header-search__submit:focus-visible {
        background: transparent;
        color:
            var(--chacha-brass-dark, #8F6F3F);
    }


    .chacha-header-search__submit:focus-visible {
        outline:
            2px solid
            var(--chacha-brass, #B08D57);
        outline-offset: -5px;
    }


    .chacha-header-search__submit svg {
        display: block;
        width: 20px;
        height: 20px;
        pointer-events: none;
    }


    .chacha-header-search__field {
        appearance: none;
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        height: 46px;
        margin: 0;
        padding: 0 18px 0 2px;
        border: 0 !important;
        border-radius: 0;
        outline: 0;
        background: transparent !important;
        box-shadow: none !important;
        color:
            var(--chacha-espresso, #201A17);
        font-family:
            var(--chacha-font-body, "Inter", sans-serif);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 0.01em;
    }


    .chacha-header-search__field::placeholder {
        color:
            var(--chacha-text-muted, #6A5F58);
        opacity: 0.78;
    }


    .chacha-header-search__field::-webkit-search-cancel-button {
        cursor: pointer;
    }

}


/* ==========================================================
   03. EXISTING COMMERCE ACTIONS — SPACING ONLY
   ========================================================== */
@media (min-width: 1025px) {

    .site-main-header-wrap
    .secondary-navigation,

    .site-main-header-wrap
    .header-cart-wrap {
        flex: 0 0 auto;
    }


    .site-main-header-wrap
    .secondary-navigation
    .menu {
        white-space: nowrap;
    }

}


/* ==========================================================
   04. COMPACT DESKTOP / SMALL LAPTOP
   ========================================================== */
@media (min-width: 1025px) and (max-width: 1240px) {

    .site-main-header-wrap
    .site-header-row-container-inner
    > .site-container {
        width: calc(100% - 48px);
    }


    .site-main-header-wrap
    .site-main-header-inner-wrap {
        grid-template-columns:
            minmax(190px, 235px)
            minmax(0, 1fr) !important;
        column-gap: 26px;
    }


    .site-main-header-wrap
    .site-header-main-section-right {
        gap: 13px;
    }


    .chacha-header-search-slot {
        flex: 1 1 auto;
        min-width: 250px;
        max-width: none;
        margin-right: 8px;
    }

}


/* ==========================================================
   05. MOBILE / TABLET SAFETY
   ========================================================== */
@media (max-width: 1024px) {

    .chacha-header-search-slot {
        display: none !important;
    }

}


/* ==========================================================
   06. REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {

    .chacha-header-search,
    .chacha-header-search__submit {
        transition: none !important;
    }

}


/* ==========================================================
   07. TYPEWRITER SEARCH PLACEHOLDER — PATCH-01B
   ========================================================== */
@media (min-width: 1025px) {

    .chacha-header-search__typewriter {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 48px;
        right: 18px;
        display: block;
        overflow: hidden;
        color:
            var(--chacha-text-muted, #6A5F58);
        font-family:
            var(--chacha-font-body, "Inter", sans-serif);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 0.01em;
        white-space: nowrap;
        text-overflow: clip;
        pointer-events: none;
        opacity: 0;
        transform: translateY(-50%);
    }


    .chacha-header-search-slot.is-typewriter-ready
    .chacha-header-search__typewriter {
        opacity: 0.78;
    }


    .chacha-header-search-slot.is-typewriter-ready
    .chacha-header-search__typewriter::after {
        content: "";
        display: inline-block;
        width: 1px;
        height: 1em;
        margin-left: 2px;
        vertical-align: -0.12em;
        background:
            var(--chacha-brass-dark, #8F6F3F);
        animation:
            chachaHeaderSearchCaret 820ms steps(1, end) infinite;
    }


    .chacha-header-search-slot.is-typewriter-ready
    .chacha-header-search__field::placeholder {
        color: transparent;
        opacity: 0;
    }


    .chacha-header-search-slot.is-search-active
    .chacha-header-search__typewriter {
        opacity: 0;
    }


    .chacha-header-search-slot.is-search-active
    .chacha-header-search__field::placeholder {
        color:
            var(--chacha-text-muted, #6A5F58);
        opacity: 0.78;
    }


    .chacha-header-search-slot.is-typewriter-ready
    .chacha-header-search__field {
        position: relative;
        z-index: 2;
    }

}


@keyframes chachaHeaderSearchCaret {

    0%,
    48% {
        opacity: 1;
    }

    49%,
    100% {
        opacity: 0;
    }

}


@media (prefers-reduced-motion: reduce) {

    .chacha-header-search__typewriter,
    .chacha-header-search__typewriter::after {
        animation: none !important;
        transition: none !important;
    }

}


/* ==========================================================
   08. DEV-05 HEADER COMMERCE ORDER — PATCH-03A
   ==========================================================

   Kadence renders Account/secondary navigation and Cart inside
   .site-header-item wrappers. Flex ordering must therefore be
   applied to those direct children of the right header column,
   not to the inner nav/cart elements.

   Contract:
   Search → Account → Favorites → Cart
   ========================================================== */
@media (min-width: 1025px) {

    .site-main-header-wrap
    .site-header-main-section-right
    > .chacha-header-search-slot {
        order: 10;
    }

    .site-main-header-wrap
    .site-header-main-section-right
    > .site-header-item[data-section="kadence_customizer_secondary_navigation"] {
        order: 20;
    }

    .site-main-header-wrap
    .site-header-main-section-right
    > .chacha-header-wishlist--desktop {
        order: 30;
    }

    .site-main-header-wrap
    .site-header-main-section-right
    > .site-header-item[data-section="kadence_customizer_cart"] {
        order: 40;
    }

}


/* ==========================================================
   09. DEV-05 / PATCH-03C — DESKTOP HEADER UX FINAL
   ==========================================================

   Goals:
   - Keep Kadence ownership of Account and Cart behavior.
   - Remove the hidden Kadence desktop Search wrapper from layout flow.
   - Let the real ChaCha Search begin at the content-navigation axis.
   - Reserve predictable space for a compact three-item utility group:
     Account / Favorites / Cart.
   ========================================================== */
@media (min-width: 1025px) {

    /**
     * The inner popup-search control was hidden previously, but its
     * .site-header-item wrapper could still consume flex space. Remove the
     * complete desktop builder item; the custom ChaCha inline search is the
     * authoritative desktop search control.
     */
    .site-main-header-wrap
    .site-header-main-section-right
    > .site-header-item[data-section="kadence_customizer_header_search"] {
        display: none !important;
    }


    .site-main-header-wrap
    .site-header-main-section-right {
        gap: clamp(13px, 1.05vw, 18px);
    }


    /**
     * Search owns the flexible middle area. The wider text-based utility
     * actions to its right naturally bring the field endpoint back toward
     * the primary-navigation axis instead of letting it run into Cart.
     */
    .site-main-header-wrap
    .site-header-main-section-right
    > .chacha-header-search-slot {
        flex: 1 1 auto;
        min-width: 320px;
        margin: 0 clamp(4px, 0.45vw, 8px) 0 0;
    }


    /**
     * Account — preserve the existing WordPress/Kadence menu link, only
     * normalize its presentation to the shared ChaCha utility language.
     */
    .site-main-header-wrap
    .site-header-main-section-right
    > .site-header-item[data-section="kadence_customizer_secondary_navigation"] {
        flex: 0 0 auto;
    }


    .site-main-header-wrap
    .secondary-navigation
    .menu {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }


    .site-main-header-wrap
    .secondary-navigation
    .menu
    > li {
        margin: 0;
        padding: 0;
    }


    .site-main-header-wrap
    .secondary-navigation
    .menu
    > li
    > a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 40px;
        padding: 0 4px !important;
        border: 0 !important;
        background: transparent !important;
        color:
            var(--chacha-text-strong, #3B322D) !important;
        font-family:
            var(--chacha-font-body, "Inter", sans-serif) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        text-decoration: none !important;
        white-space: nowrap;
        box-shadow: none !important;
        transition: color 180ms ease;
    }


    .site-main-header-wrap
    .secondary-navigation
    .menu
    > li
    > a::before {
        content: "";
        display: block;
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        background-color: currentColor;
        -webkit-mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12.15a4.15 4.15 0 1 0 0-8.3 4.15 4.15 0 0 0 0 8.3Zm0 1.7c-4.66 0-7.55 2.34-8.25 6.3a.85.85 0 0 0 .84 1h14.82a.85.85 0 0 0 .84-1c-.7-3.96-3.59-6.3-8.25-6.3Zm-6.31 5.6c.78-2.5 2.85-3.9 6.31-3.9s5.53 1.4 6.31 3.9H5.69Z'/%3E%3C/svg%3E")
            center / contain no-repeat;
        mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12.15a4.15 4.15 0 1 0 0-8.3 4.15 4.15 0 0 0 0 8.3Zm0 1.7c-4.66 0-7.55 2.34-8.25 6.3a.85.85 0 0 0 .84 1h14.82a.85.85 0 0 0 .84-1c-.7-3.96-3.59-6.3-8.25-6.3Zm-6.31 5.6c.78-2.5 2.85-3.9 6.31-3.9s5.53 1.4 6.31 3.9H5.69Z'/%3E%3C/svg%3E")
            center / contain no-repeat;
    }


    .site-main-header-wrap
    .secondary-navigation
    .menu
    > li
    > a:hover,

    .site-main-header-wrap
    .secondary-navigation
    .menu
    > li
    > a:focus-visible {
        color:
            var(--chacha-text-muted, #6A5F58) !important;
    }


    /** Favorites — same geometry as Account/Cart, not a circular mobile icon. */
    .site-main-header-wrap
    .chacha-header-wishlist--desktop {
        width: auto;
        min-width: 0;
        height: 40px;
        min-height: 40px;
        gap: 7px;
        padding: 0 4px;
        border-radius: 0;
        background: transparent;
        color:
            var(--chacha-text-strong, #3B322D);
        font-family:
            var(--chacha-font-body, "Inter", sans-serif);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
    }


    .site-main-header-wrap
    .chacha-header-wishlist--desktop:hover {
        background: transparent;
        color:
            var(--chacha-text-muted, #6A5F58);
    }


    .site-main-header-wrap
    .chacha-header-wishlist--desktop
    .chacha-wishlist-icon {
        flex: 0 0 18px;
        width: 18px !important;
        height: 18px !important;
    }


    .site-main-header-wrap
    .chacha-header-wishlist--desktop
    .chacha-wishlist-icon
    svg {
        width: 18px !important;
        height: 18px !important;
    }


    .chacha-header-wishlist__label {
        display: inline-block;
    }


    /** Cart — preserve Kadence drawer/link behavior; add only presentation. */
    .site-main-header-wrap
    .site-header-main-section-right
    > .site-header-item[data-section="kadence_customizer_cart"] {
        flex: 0 0 auto;
    }


    .site-main-header-wrap
    .header-cart-wrap,

    .site-main-header-wrap
    .header-cart-inner-wrap {
        display: flex;
        align-items: center;
        margin: 0;
    }


    .site-main-header-wrap
    .header-cart-button {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 40px;
        margin: 0;
        padding: 0 5px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color:
            var(--chacha-text-strong, #3B322D) !important;
        font-family:
            var(--chacha-font-body, "Inter", sans-serif) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        white-space: nowrap;
        transition: color 180ms ease;
    }


    .site-main-header-wrap
    .header-cart-button::after {
        content: "Sepetim";
        order: 20;
        display: inline-block;
        font: inherit;
        color: inherit;
    }


    .site-main-header-wrap
    .header-cart-button
    .header-cart-label {
        display: none !important;
    }


    .site-main-header-wrap
    .header-cart-button
    .kadence-svg-iconset,

    .site-main-header-wrap
    .header-cart-button
    > svg {
        order: 10;
        flex: 0 0 auto;
    }


    .site-main-header-wrap
    .header-cart-button
    svg {
        width: 19px;
        height: 19px;
    }


    .site-main-header-wrap
    .header-cart-button:hover,

    .site-main-header-wrap
    .header-cart-button:focus-visible {
        background: transparent !important;
        color:
            var(--chacha-text-muted, #6A5F58) !important;
    }


    /**
     * Counts remain compact status badges. They do not participate in the
     * text width and therefore cannot push the three utility items apart.
     */
    .site-main-header-wrap
    .chacha-header-wishlist--desktop
    .chacha-header-wishlist__count {
        position: absolute !important;
        z-index: 2;
        top: -1px !important;
        right: -8px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        border:
            2px solid
            var(--chacha-white, #FFFDFC) !important;
        border-radius: 999px !important;
        background:
            var(--chacha-surface, #EDE6DD) !important;
        color:
            var(--chacha-text-strongest, #201A17) !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        transform: none !important;
    }


    .site-main-header-wrap
    .chacha-header-wishlist--desktop
    .chacha-header-wishlist__count.is-empty {
        display: none !important;
    }


    .site-main-header-wrap
    .header-cart-total {
        position: absolute !important;
        z-index: 2;
        top: -1px !important;
        right: -8px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        border:
            2px solid
            var(--chacha-white, #FFFDFC) !important;
        border-radius: 999px !important;
        background:
            var(--chacha-surface, #EDE6DD) !important;
        color:
            var(--chacha-text-strongest, #201A17) !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        transform: none !important;
    }

}


/* ==========================================================
   10. DEV-05 / PATCH-03C — MOBILE HEADER ACTION SAFETY
   ========================================================== */
@media (max-width: 1024px) {

    /** Desktop utility copy must never leak into the compact header. */
    .chacha-header-wishlist__label {
        display: none !important;
    }


    .chacha-header-account--mobile,
    .chacha-header-wishlist--mobile {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        min-width: 38px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color:
            var(--chacha-text-strongest, #201A17);
        text-decoration: none !important;
        box-shadow: none;
    }


    .chacha-header-account--mobile:hover,
    .chacha-header-account--mobile:focus-visible,
    .chacha-header-wishlist--mobile:hover,
    .chacha-header-wishlist--mobile:focus-visible {
        background:
            var(--chacha-surface, #EDE6DD);
        color:
            var(--chacha-text-muted, #6A5F58);
    }


    .chacha-header-account__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 19px;
        height: 19px;
    }


    .chacha-header-account__icon
    svg {
        display: block;
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    /** If a secondary-navigation item is present in the mobile builder,
     * hide that text-based duplicate; the icon-only account link above is
     * the mobile authority. */
    .site-mobile-header-wrap
    .site-header-item[data-section="kadence_customizer_secondary_navigation"] {
        display: none !important;
    }


    .site-mobile-header-wrap
    .header-cart-label {
        display: none !important;
    }

}


/* ==========================================================
   11. DEV-05 / PATCH-03E — MOBILE + TABLET HEADER FINAL
   ==========================================================

   Ownership contract:
   - Kadence keeps its native Search / Account / Mobile Cart controls.
   - ChaCha injects only Wishlist into that existing action cluster.
   - No duplicate mobile Account control is rendered by ChaCha.

   Visual order:
   Search → Account → Favorites → Cart
   ========================================================== */
@media (max-width: 1024px) {

    #mobile-header
    .site-header-main-section-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 2px;
        min-width: 0;
    }


    /**
     * Kadence adds a default right margin to every header item.
     * The compact mobile action rail owns spacing through gap instead.
     */
    #mobile-header
    .site-header-main-section-right
    > .site-header-item {
        flex: 0 0 38px;
        width: 38px;
        min-width: 38px;
        margin: 0 !important;
        justify-content: center;
    }


    /** Native Search first. */
    #mobile-header
    .site-header-main-section-right
    > .site-header-item[data-section="kadence_customizer_header_search"] {
        order: 10;
    }


    /**
     * Keep the existing Kadence/customer Account control as the second item.
     * This intentionally catches the currently configured account builder
     * component without coupling ChaCha to its internal implementation.
     */
    #mobile-header
    .site-header-main-section-right
    > .site-header-item:not([data-section="kadence_customizer_header_search"]):not([data-section="kadence_customizer_mobile_cart"]):not([data-section="kadence_customizer_cart"]) {
        order: 20;
    }


    /** ChaCha Wishlist sits between Account and Cart. */
    #mobile-header
    .site-header-main-section-right
    > .chacha-header-wishlist--mobile {
        order: 30;
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50%;
        background: transparent !important;
        color: var(--chacha-text-strongest, #201A17);
        box-shadow: none !important;
    }


    /** Native mobile Cart remains last. */
    #mobile-header
    .site-header-main-section-right
    > .site-header-item[data-section="kadence_customizer_mobile_cart"],

    #mobile-header
    .site-header-main-section-right
    > .site-header-item[data-section="kadence_customizer_cart"] {
        order: 40;
    }


    /** Normalize the native Search and Cart click targets. */
    #mobile-header
    .site-header-main-section-right
    .search-toggle-open-container,

    #mobile-header
    .site-header-main-section-right
    .search-toggle-open,

    #mobile-header
    .site-header-main-section-right
    .header-mobile-cart-wrap,

    #mobile-header
    .site-header-main-section-right
    .header-cart-inner-wrap,

    #mobile-header
    .site-header-main-section-right
    .header-cart-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        margin: 0 !important;
        padding: 0 !important;
    }


    /** Icon geometry — one visual scale across all four actions. */
    #mobile-header
    .site-header-main-section-right
    .search-toggle-open
    svg,

    #mobile-header
    .site-header-main-section-right
    .header-cart-button
    svg,

    #mobile-header
    .chacha-header-wishlist--mobile
    .chacha-wishlist-icon,

    #mobile-header
    .chacha-header-wishlist--mobile
    .chacha-wishlist-icon
    svg {
        width: 19px !important;
        height: 19px !important;
    }


    /**
     * Wishlist and Cart counters share exactly the same mobile badge language.
     */
    #mobile-header
    .chacha-header-wishlist--mobile
    .chacha-header-wishlist__count,

    #mobile-header
    .header-mobile-cart-wrap
    .header-cart-total {
        position: absolute !important;
        z-index: 3;
        top: -1px !important;
        right: -2px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        border: 2px solid var(--chacha-white, #FFFDFC) !important;
        border-radius: 999px !important;
        background: var(--chacha-surface, #EDE6DD) !important;
        color: var(--chacha-text-strongest, #201A17) !important;
        font-family: var(--chacha-font-body, "Inter", sans-serif) !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        transform: none !important;
        box-shadow: none !important;
    }


    #mobile-header
    .chacha-header-wishlist--mobile
    .chacha-header-wishlist__count.is-empty {
        display: none !important;
    }


    /** Ensure native mobile cart is a positioning context for its badge. */
    #mobile-header
    .header-mobile-cart-wrap
    .header-cart-button {
        position: relative;
    }

}


/* ----------------------------------------------------------
   TABLET — 720px to 1024px
   ---------------------------------------------------------- */
@media (min-width: 720px) and (max-width: 1024px) {

    #mobile-header
    .site-header-main-section-right {
        gap: 4px;
    }


    #mobile-header
    .site-header-main-section-right
    > .site-header-item,

    #mobile-header
    .site-header-main-section-right
    > .chacha-header-wishlist--mobile,

    #mobile-header
    .site-header-main-section-right
    .search-toggle-open-container,

    #mobile-header
    .site-header-main-section-right
    .search-toggle-open,

    #mobile-header
    .site-header-main-section-right
    .header-mobile-cart-wrap,

    #mobile-header
    .site-header-main-section-right
    .header-cart-inner-wrap,

    #mobile-header
    .site-header-main-section-right
    .header-cart-button {
        flex-basis: 40px;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

}


/* ----------------------------------------------------------
   PHONE — keep four actions without squeezing the centered logo
   ---------------------------------------------------------- */
@media (max-width: 719px) {

    #mobile-header
    .site-header-main-section-right {
        gap: 0;
    }


    #mobile-header
    .site-header-main-section-right
    > .site-header-item,

    #mobile-header
    .site-header-main-section-right
    > .chacha-header-wishlist--mobile,

    #mobile-header
    .site-header-main-section-right
    .search-toggle-open-container,

    #mobile-header
    .site-header-main-section-right
    .search-toggle-open,

    #mobile-header
    .site-header-main-section-right
    .header-mobile-cart-wrap,

    #mobile-header
    .site-header-main-section-right
    .header-cart-inner-wrap,

    #mobile-header
    .site-header-main-section-right
    .header-cart-button {
        flex-basis: 34px;
        width: 34px;
        min-width: 34px;
        height: 36px;
        min-height: 36px;
    }


    #mobile-header
    .chacha-header-wishlist--mobile
    .chacha-header-wishlist__count,

    #mobile-header
    .header-mobile-cart-wrap
    .header-cart-total {
        min-width: 16px !important;
        height: 16px !important;
        padding-inline: 3px !important;
        font-size: 8px !important;
        right: -1px !important;
    }

}


@media (max-width: 390px) {

    #mobile-header
    .site-header-main-section-right
    > .site-header-item,

    #mobile-header
    .site-header-main-section-right
    > .chacha-header-wishlist--mobile,

    #mobile-header
    .site-header-main-section-right
    .search-toggle-open-container,

    #mobile-header
    .site-header-main-section-right
    .search-toggle-open,

    #mobile-header
    .site-header-main-section-right
    .header-mobile-cart-wrap,

    #mobile-header
    .site-header-main-section-right
    .header-cart-inner-wrap,

    #mobile-header
    .site-header-main-section-right
    .header-cart-button {
        flex-basis: 32px;
        width: 32px;
        min-width: 32px;
    }

}

/* ==========================================================
   DEV-05 / PATCH-03I — MOBILE / TABLET BRAND CENTER FIX
   ==========================================================

   Architecture note:
   Kadence already owns the responsive header row geometry.
   Do not re-declare its grid tracks here.

   ChaCha's right rail intentionally carries four controls:
   Search + Account + Favorites + Cart.
   The resulting visual weight makes the mathematically centered
   brand look too close to the right rail on narrow screens.

   Move only the CENTER SECTION as a presentation correction.
   Logo dimensions remain fully owned by Kadence.
   ========================================================== */
@media (max-width: 1024px) {

    /*
     * Remove any positioning side effects left by older DEV-05
     * experiments. Size remains untouched.
     */
    #mobile-header
    .site-branding.mobile-site-branding,

    #mobile-header
    .site-branding.mobile-site-branding
    > a.brand {
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none;
    }


    /*
     * The column itself is the correct positioning authority.
     * Keeping the correction here avoids fighting Kadence logo styles.
     */
    #mobile-header
    .site-main-header-inner-wrap.site-header-row-center-column
    > .site-header-main-section-center {
        position: relative;
        z-index: 2;
        transform: translateX(-18px);
        transition: none;
    }


    /*
     * Safety: actions keep their own rail and never inherit the
     * brand correction.
     */
    #mobile-header
    .site-header-main-section-right {
        position: relative;
        z-index: 3;
    }

}


/* ----------------------------------------------------------
   PHONE
   ---------------------------------------------------------- */
@media (max-width: 719px) {

    #mobile-header
    .site-main-header-inner-wrap.site-header-row-center-column
    > .site-header-main-section-center {
        transform: translateX(-26px);
    }

}


/* ----------------------------------------------------------
   420px AND BELOW
   Gives the 4-icon rail clear breathing room without scaling logo.
   ---------------------------------------------------------- */
@media (max-width: 420px) {

    #mobile-header
    .site-main-header-inner-wrap.site-header-row-center-column
    > .site-header-main-section-center {
        transform: translateX(-32px);
    }

}


/* ----------------------------------------------------------
   FALLBACK — builders without a dedicated center column
   ----------------------------------------------------------
   Some Kadence configurations place mobile-logo in the right column.
   In that case, target only the logo item; never the full right rail.
   ---------------------------------------------------------- */
@media (max-width: 1024px) {

    #mobile-header
    .site-main-header-inner-wrap.site-header-row-no-center
    .site-header-main-section-right
    > .site-header-item[data-section="title_tagline"] {
        position: relative;
        transform: translateX(-18px);
        z-index: 2;
    }

}

@media (max-width: 719px) {

    #mobile-header
    .site-main-header-inner-wrap.site-header-row-no-center
    .site-header-main-section-right
    > .site-header-item[data-section="title_tagline"] {
        transform: translateX(-26px);
    }

}

@media (max-width: 420px) {

    #mobile-header
    .site-main-header-inner-wrap.site-header-row-no-center
    .site-header-main-section-right
    > .site-header-item[data-section="title_tagline"] {
        transform: translateX(-32px);
    }

}