/* AL Shop B2B Header Search Desktop Fix V1.1
   Fixes conflict with alshop-header-search-position.css desktop CSS Grid.
   B2B desktop search uses its own flex layout.
*/

@media (min-width: 992px) {
    html body .agm-header .agm-search-wrap.alshop-b2b-header-search {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
        isolation: isolate !important;
        z-index: 2 !important;
    }

    html body .agm-header .alshop-b2b-header-search .alshop-b2b-header-search-form {
        display: flex !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        align-items: center !important;
        justify-content: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: 3 !important;
        pointer-events: auto !important;
        background: #fff !important;
        border: 1px solid #d6a15b !important;
        border-radius: 23px !important;
        box-shadow: 0 0 0 1px rgba(183,121,31,.04) !important;
    }

    html body .agm-header .alshop-b2b-header-search .alshop-b2b-header-search-form:focus-within {
        border-color: #b7791f !important;
        box-shadow: 0 0 0 3px rgba(183,121,31,.12) !important;
    }

    html body .agm-header .alshop-b2b-header-search .alshop-b2b-search-tag {
        order: 1 !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: 28px !important;
        margin: 0 0 0 8px !important;
        padding: 0 9px !important;
        position: relative !important;
        inset: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        z-index: 4 !important;
        pointer-events: none !important;
    }

    html body .agm-header .alshop-b2b-header-search .agm-search-icon {
        order: 2 !important;
        flex: 0 0 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        inset: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        z-index: 4 !important;
        pointer-events: none !important;
        color: #9a611b !important;
    }

    html body .agm-header .alshop-b2b-header-search .alshop-b2b-header-search-form > input[name="q"],
    html body .agm-header .alshop-b2b-header-search input#b2bHeaderSearchDesktop {
        order: 3 !important;
        flex: 1 1 0 !important;
        display: block !important;
        width: auto !important;
        min-width: 80px !important;
        max-width: none !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 12px 0 2px !important;
        position: relative !important;
        inset: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        z-index: 10 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        cursor: text !important;
        user-select: text !important;
        -webkit-user-select: text !important;
        touch-action: manipulation !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #20242c !important;
        font-size: 14px !important;
        line-height: 42px !important;
    }

    html body .agm-header .alshop-b2b-header-search .alshop-b2b-header-search-form > input[name="q"]:focus,
    html body .agm-header .alshop-b2b-header-search input#b2bHeaderSearchDesktop:focus {
        outline: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        pointer-events: auto !important;
    }

    /* Retail desktop CSS hides .agm-search-submit. Re-enable it only here. */
    html body .agm-header .alshop-b2b-header-search .agm-search-submit {
        order: 4 !important;
        flex: 0 0 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        min-width: 48px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        inset: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        z-index: 6 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        border: 0 !important;
        border-left: 1px solid rgba(183,121,31,.22) !important;
        background: #b7791f !important;
        color: #fff !important;
    }

    html body .agm-header .alshop-b2b-header-search .agm-search-submit:hover,
    html body .agm-header .alshop-b2b-header-search .agm-search-submit:focus {
        background: #935f16 !important;
        color: #fff !important;
    }

    html body .agm-header .alshop-b2b-header-search .alshop-b2b-header-caption {
        top: calc(100% + 4px) !important;
        left: 18px !important;
        right: auto !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    /* Nothing decorative may sit on top of the input. */
    html body .agm-header .alshop-b2b-header-search::before,
    html body .agm-header .alshop-b2b-header-search::after,
    html body .agm-header .alshop-b2b-header-search .alshop-b2b-header-search-form::before,
    html body .agm-header .alshop-b2b-header-search .alshop-b2b-header-search-form::after {
        pointer-events: none !important;
    }
}
