/* Header FiboSearch appearance only. Native widgets, results and callbacks
   stay in place. These styles are inactive in the mobile full-screen search. */
@media (min-width: 768px) {
    body.mjm-header-search-active {
        --mjm-hs-surface: #fff;
        --mjm-hs-text: #202938;
        --mjm-hs-muted: #687385;
        --mjm-hs-border: #e3e8ef;
        --mjm-hs-accent: #b33759;
    }

    body.mjm-header-search-active .mjm-header-search-frame,
    body.mjm-header-search-active .mjm-header-search-list,
    body.mjm-header-search-active .mjm-header-search-detail {
        box-sizing: border-box;
        color-scheme: light;
        color: var(--mjm-hs-text);
        font-family: inherit;
        font-size: 14px;
        line-height: 1.45;
        text-align: left;
        text-transform: none;
    }

    body.mjm-header-search-active .mjm-header-search-frame *,
    body.mjm-header-search-active .mjm-header-search-list *,
    body.mjm-header-search-active .mjm-header-search-detail * {
        box-sizing: border-box;
    }

    body.mjm-header-search-active #mjm-header-search-frame {
        position: fixed;
        z-index: 1000000009;
        top: var(--mjm-header-popup-top);
        left: var(--mjm-header-popup-left);
        width: var(--mjm-header-popup-width);
        height: var(--mjm-header-popup-height);
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid #dfe5ed;
        border-radius: 14px;
        background: var(--mjm-hs-surface);
        opacity: 1;
        box-shadow: 0 12px 32px rgba(25, 39, 59, .13);
        pointer-events: none;
        transition: height 150ms ease, opacity 150ms ease;
    }

    body.mjm-header-search-active #mjm-header-search-frame[hidden] {
        display: none !important;
    }

    body.mjm-header-search-active.mjm-header-search-preview #mjm-header-search-frame::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--mjm-header-list-width);
        width: 1px;
        background: #e8edf3;
    }

    body.mjm-header-search-active .mjm-header-search-placeholder {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: var(--mjm-header-list-width);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        color: #8591a2;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.6;
        text-align: center;
    }

    body.mjm-header-search-active.mjm-header-search-preview #mjm-header-search-frame.is-preview-empty .mjm-header-search-placeholder {
        display: flex;
    }

    /* The owned frame and exclusion of the mobile drawer scope these
       overrides above legacy header rules without changing native IDs. */
    body.mjm-header-search-active:has(#mjm-header-search-frame) :is(.mjm-header-search-list, .mjm-header-search-detail):not(#mjm-light-menu *) {
        position: fixed !important;
        z-index: 1000000010 !important;
        top: var(--mjm-header-popup-top) !important;
        right: auto !important;
        bottom: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--mjm-header-popup-height) !important;
        min-height: 0 !important;
        max-height: var(--mjm-header-popup-height) !important;
        margin: 0 !important;
        padding: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        opacity: 1;
        box-shadow: none !important;
        animation: none !important;
        transition: height 150ms ease, opacity 150ms ease !important;
        scrollbar-width: thin;
        scrollbar-color: #c7cfdb transparent;
        -webkit-overflow-scrolling: touch;
    }

    body.mjm-header-search-active:has(#mjm-header-search-frame) .mjm-header-search-list:not(#mjm-light-menu *) {
        left: var(--mjm-header-popup-left) !important;
        width: var(--mjm-header-list-width) !important;
        border-radius: 14px !important;
        scroll-padding-block: 8px;
    }

    body.mjm-header-search-active.mjm-header-search-preview:has(#mjm-header-search-frame) .mjm-header-search-list:not(#mjm-light-menu *) {
        border-radius: 14px 0 0 14px !important;
    }

    body.mjm-header-search-active:has(#mjm-header-search-frame) .mjm-header-search-detail:not(#mjm-light-menu *) {
        left: var(--mjm-header-detail-left) !important;
        width: var(--mjm-header-detail-width) !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-left: 1px solid #e8edf3 !important;
        border-radius: 0 14px 14px 0 !important;
    }

    body.mjm-header-search-active .mjm-header-search-list a.dgwt-wcas-suggestion-product {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 78px;
        height: auto;
        margin: 0 0 4px;
        padding: 12px;
        overflow: visible;
        border: 1px solid transparent;
        border-radius: 10px;
        background: var(--mjm-hs-surface);
        color: var(--mjm-hs-text);
        font-family: inherit;
        font-size: 14px;
        line-height: 1.45;
        text-align: left;
        text-decoration: none;
        white-space: normal;
        float: none;
        box-shadow: none;
        transition: background-color 150ms ease, border-color 150ms ease;
    }

    body.mjm-header-search-active:has(#mjm-header-search-frame) .mjm-header-search-list:not(#mjm-light-menu *) a.dgwt-wcas-suggestion-product:hover,
    body.mjm-header-search-active:has(#mjm-header-search-frame) .mjm-header-search-list:not(#mjm-light-menu *) a.dgwt-wcas-suggestion-product.dgwt-wcas-suggestion-selected {
        border-color: #f0dce3;
        background: #fcf3f6 !important;
    }

    /* Native selection still owns keyboard navigation and the preview. While
       another product is hovered, show one visual highlight on that row. */
    body.mjm-header-search-active:has(#mjm-header-search-frame) .mjm-header-search-list:not(#mjm-light-menu *):has(a.dgwt-wcas-suggestion-product:hover) a.dgwt-wcas-suggestion-product.dgwt-wcas-suggestion-selected:not(:hover) {
        border-color: transparent !important;
        background: var(--mjm-hs-surface) !important;
    }

    body.mjm-header-search-active .mjm-header-search-list a.dgwt-wcas-suggestion-product .dgwt-wcas-si {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 52px;
        width: 52px;
        min-width: 52px;
        height: 52px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 8px;
        background: #fafbfc;
        float: none;
    }

    body.mjm-header-search-active .mjm-header-search-list a.dgwt-wcas-suggestion-product .dgwt-wcas-si img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        padding: 2px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        object-fit: contain;
    }

    body.mjm-header-search-active .mjm-header-search-list a.dgwt-wcas-suggestion-product .dgwt-wcas-content-wrapp {
        position: static;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 4px;
        width: auto;
        min-width: 0;
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        resize: none;
        float: none;
    }

    body.mjm-header-search-active .mjm-header-search-list a.dgwt-wcas-suggestion-product :is(.dgwt-wcas-st, .dgwt-wcas-st-title, .dgwt-wcas-meta, .dgwt-wcas-sp) {
        position: static;
        display: block;
        width: auto;
        min-width: 0;
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        color: var(--mjm-hs-text);
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.45;
        text-align: left;
        text-overflow: clip;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
        resize: none;
        float: none;
    }

    body.mjm-header-search-active .mjm-header-search-list a.dgwt-wcas-suggestion-product .dgwt-wcas-st strong {
        font-weight: 700;
    }

    body.mjm-header-search-active .mjm-header-search-list a.dgwt-wcas-suggestion-product :is(.dgwt-wcas-meta, .dgwt-wcas-sp) {
        min-height: 22px;
        font-size: 13px;
        font-weight: 500;
        line-height: 22px;
    }

    body.mjm-header-search-active .mjm-header-search-list a.dgwt-wcas-suggestion-product .dgwt-wcas-sp del {
        color: #7b8799;
        font-size: 11.5px;
        font-weight: 400;
        opacity: 1;
    }

    body.mjm-header-search-active .mjm-header-search-list a.dgwt-wcas-suggestion-product .dgwt-wcas-sp ins {
        background: transparent;
        color: var(--mjm-hs-accent);
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: none;
    }

    body.mjm-header-search-active .mjm-header-search-list a.dgwt-wcas-suggestion-product .dgwt-wcas-sp .amount,
    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-pd-price .amount {
        color: inherit;
        white-space: nowrap;
    }

    body.mjm-header-search-active .mjm-header-search-list .dgwt-wcas-sd {
        margin-top: 3px;
        color: var(--mjm-hs-muted);
        font-size: 12px;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.mjm-header-search-active .mjm-header-search-list .dgwt-wcas-suggestion-more {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin: 6px 0 0;
        padding: 10px 12px;
        border: 1px solid #edf0f5;
        border-radius: 10px;
        background: #f7f9fc;
        color: #53647a;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        white-space: normal;
    }

    body.mjm-header-search-active .mjm-header-search-list :is(.dgwt-wcas-suggestion-headline, .dgwt-wcas-suggestion-headline-v2) {
        min-height: 0;
        margin: 0;
        padding: 7px 12px 9px;
        border: 0;
        background: transparent;
        color: var(--mjm-hs-muted);
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.5;
    }

    body.mjm-header-search-active .mjm-header-search-list .dgwt-wcas-suggestion-nores,
    body.mjm-header-search-active .mjm-header-search-list.mjc-header-no-product-results::after {
        min-height: 0;
        margin: 0;
        padding: 24px 18px;
        background: transparent;
        color: var(--mjm-hs-muted);
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
    }

    /* Native automaticAlignment() measures its first cached inner, which
       may be inactive. Bound all inners without changing their display;
       native CSS still hides every inactive cached preview. */
    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-details-inner {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        margin: 0;
        padding: 18px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--mjm-hs-surface);
        scrollbar-width: thin;
        scrollbar-color: #c7cfdb transparent;
        -webkit-overflow-scrolling: touch;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-details-inner-active {
        animation: mjm-header-preview-fade 150ms ease both;
    }

    body.mjm-header-search-active .mjm-header-search-detail :is(.dgwt-wcas-product-details, .dgwt-wcas-details-space) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-product-details > a:has(> .dgwt-wcas-details-main-image) {
        display: block;
        margin: 0 0 14px;
        padding: 0;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-details-main-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 170px;
        min-height: 170px;
        max-height: 170px;
        margin: 0;
        padding: 5px;
        overflow: hidden;
        border: 0;
        border-radius: 10px;
        background: #fafbfc;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-details-main-image > img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        object-fit: contain;
    }

    body.mjm-header-search-active .mjm-header-search-detail :is(.dgwt-wcas-pd-title, .dgwt-wcas-details-product-title) {
        display: block;
        min-width: 0;
        margin: 0 0 12px;
        padding: 0 0 10px;
        border-bottom: 1px solid #edf0f5;
        color: var(--mjm-hs-text);
        font-family: inherit;
        font-size: 14px;
        font-weight: 650;
        line-height: 1.5;
        letter-spacing: 0;
        text-decoration: none;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-pd-title .product-title {
        margin: 0;
        color: inherit;
        font-family: inherit;
        font-size: 14px;
        font-weight: 650;
        line-height: 1.5;
        letter-spacing: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-pd-price {
        min-width: 0;
        margin: 12px 0;
        overflow: visible;
        color: var(--mjm-hs-text);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.55;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-pd-price del {
        color: #7b8799;
        font-size: 12px;
        font-weight: 400;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-pd-price ins {
        background: transparent;
        color: var(--mjm-hs-accent);
        text-decoration: none;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-details-desc {
        min-width: 0;
        margin: 0;
        color: var(--mjm-hs-muted);
        font-size: 12px;
        line-height: 1.6;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-details-hr {
        height: 1px;
        margin: 12px 0;
        padding: 0;
        border: 0;
        background: #edf0f5;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-pd-addtc-form {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
        margin: 12px 0 0;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-pd-addtc-form > .quantity {
        flex: 0 0 auto;
        margin: 0;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-pd-addtc-form > .product.add_to_cart_inline {
        flex: 1 1 150px;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    body.mjm-header-search-active .mjm-header-search-detail .quantity .rt-qty {
        display: inline-flex;
        align-items: center;
        width: auto;
        min-width: 0;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--mjm-hs-border);
        border-radius: 9px;
        background: var(--mjm-hs-surface);
    }

    body.mjm-header-search-active .mjm-header-search-detail .quantity .rt-qty > :is(.minus, .plus) {
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--mjm-hs-text);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }

    body.mjm-header-search-active .mjm-header-search-detail .quantity .rt-qty input.qty {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 42px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--mjm-hs-text);
        font-size: 13px;
        line-height: 42px;
        text-align: center;
        box-shadow: none;
    }

    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-pd-addtc :is(.add_to_cart_button, .add_to_cart_inline, .added_to_cart) {
        max-width: 100%;
        min-height: 44px;
        margin: 0;
        border-radius: 9px;
        font-family: inherit;
        font-size: 13px;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.mjm-header-search-active .mjm-header-search-list a:focus-visible,
    body.mjm-header-search-active .mjm-header-search-detail :is(a, button, input):focus-visible {
        outline: 2px solid #687385;
        outline-offset: 2px;
    }
}

@keyframes mjm-header-preview-fade {
    from { opacity: .65; }
    to { opacity: 1; }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    body.mjm-header-search-active #mjm-header-search-frame,
    body.mjm-header-search-active:has(#mjm-header-search-frame) :is(.mjm-header-search-list, .mjm-header-search-detail):not(#mjm-light-menu *),
    body.mjm-header-search-active .mjm-header-search-list a.dgwt-wcas-suggestion-product,
    body.mjm-header-search-active .mjm-header-search-detail .dgwt-wcas-details-inner-active {
        transition: none !important;
        animation: none !important;
    }
}