/* =========================================================
   SPADE — MOBILE INLINE FIBOSEARCH
   Announcement -> Logo -> Menu | Search | Cart
   ========================================================= */

.spade-mobile-fibosearch-source {
    display: none !important;
}

@media (max-width: 767px) {

    /* Mobile header row */
    #header [data-device="mobile"] [data-row="middle"] .ct-container {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        grid-template-rows: auto 46px !important;
        column-gap: 10px !important;
        row-gap: 9px !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 9px 14px 11px !important;
        box-sizing: border-box !important;
    }

    #header [data-device="mobile"] [data-column="start"],
    #header [data-device="mobile"] [data-column="end"] {
        display: contents !important;
    }

    /* Logo */
    #header [data-device="mobile"] .site-logo-container {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header [data-device="mobile"] .site-logo-container img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 112px !important;
        max-height: 36px !important;
        margin: 0 auto !important;
    }

    /* Hamburger */
    #header [data-device="mobile"] [data-id="trigger"],
    #header [data-device="mobile"] .ct-header-trigger {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        align-self: center !important;
        width: 42px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header [data-device="mobile"] [data-id="trigger"] button,
    #header [data-device="mobile"] button.ct-header-trigger {
        width: 42px !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    #header [data-device="mobile"] .ct-header-trigger svg,
    #header [data-device="mobile"] [data-id="trigger"] svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Hide Blocksy's old mobile search trigger/modal button */
    #header [data-device="mobile"] [data-id="search"].spade-hide-old-mobile-search {
        display: none !important;
    }

    /* Real FiboSearch slot */
    #header [data-device="mobile"] .spade-mobile-search-slot {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 10020 !important;
    }

    #header [data-device="mobile"] .spade-mobile-search-slot .dgwt-wcas-search-wrapp {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 46px !important;
        margin: 0 !important;
    }

    #header [data-device="mobile"] .spade-mobile-search-slot .dgwt-wcas-sf-wrapp {
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #d9d9d9 !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        box-shadow: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transition: border-color .2s ease, box-shadow .2s ease !important;
    }

    #header [data-device="mobile"] .spade-mobile-search-slot .dgwt-wcas-sf-wrapp:focus-within {
        border-color: #d7006d !important;
        box-shadow: 0 0 0 2px rgba(215, 0, 109, .08) !important;
    }

    #header [data-device="mobile"] .spade-mobile-search-slot input.dgwt-wcas-search-input {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 45px 0 16px !important;
        border: 0 !important;
        border-radius: 999px !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #111111 !important;
        font-family: var(--spade-font-body, Manrope, Arial, sans-serif) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 44px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    #header [data-device="mobile"] .spade-mobile-search-slot input.dgwt-wcas-search-input::placeholder {
        color: #858585 !important;
        opacity: 1 !important;
    }

    /* Pirx search icon/button */
    #header [data-device="mobile"] .spade-mobile-search-slot .dgwt-wcas-search-submit,
    #header [data-device="mobile"] .spade-mobile-search-slot .dgwt-wcas-ico-magnifier {
        color: #111111 !important;
    }

    #header [data-device="mobile"] .spade-mobile-search-slot button.dgwt-wcas-search-submit {
        right: 5px !important;
        top: 5px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #111111 !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    #header [data-device="mobile"] .spade-mobile-search-slot button.dgwt-wcas-search-submit:hover,
    #header [data-device="mobile"] .spade-mobile-search-slot button.dgwt-wcas-search-submit:focus {
        background: #d7006d !important;
    }

    /* Cart */
    #header [data-device="mobile"] [data-id="cart"] {
        grid-column: 3 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        align-self: center !important;
        width: 42px !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header [data-device="mobile"] [data-id="cart"] svg {
        width: 24px !important;
        height: 24px !important;
    }

    #header [data-device="mobile"] [data-id="account"] {
        display: none !important;
    }

    /* FiboSearch autocomplete dropdown — white panel below input */
    body .dgwt-wcas-suggestions-wrapp {
        max-height: 52vh !important;
        border: 1px solid #e8e8e8 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 50px rgba(0, 0, 0, .18) !important;
        overflow-y: auto !important;
        z-index: 999999 !important;
    }

    body .dgwt-wcas-suggestion {
        padding: 10px 12px !important;
        border-bottom: 1px solid #f1f1f1 !important;
        background: #ffffff !important;
    }

    body .dgwt-wcas-suggestion:hover,
    body .dgwt-wcas-suggestion-selected {
        background: #fafafa !important;
    }

    body .dgwt-wcas-suggestion-product .dgwt-wcas-si {
        width: 56px !important;
        min-width: 56px !important;
        margin-right: 11px !important;
    }

    body .dgwt-wcas-si img {
        width: 56px !important;
        height: 56px !important;
        object-fit: contain !important;
        border-radius: 4px !important;
        background: #fafafa !important;
    }

    body .dgwt-wcas-st-title {
        color: #111111 !important;
        font-family: var(--spade-font-body, Manrope, Arial, sans-serif) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
    }

    body .dgwt-wcas-st-price {
        color: #111111 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 768px) {
    .spade-mobile-search-slot,
    #spade-mobile-fibosearch-source {
        display: none !important;
    }
}