/* =====================================================
   PROCORA Fruit3 — Mobile Header (Shop template)
   Layout: LOGO | [ Search Box ] | MENU☰
   Scope: max-width 1023px only
   File: fruit3/assets/css/custom-mobile-header.css
   ===================================================== */

@media (max-width: 1023px) {

    /*
     * Plant3 locks .site-header to height: var(--s-head-height).
     * Vertical margin on the search box gets clipped — use container
     * padding instead so blue gap shows above/below the white pill.
     */
    .site-header .s-container {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* LOGO — left */
    .site-header .site-branding {
        flex: 0 0 auto;
        margin: 0;
        max-width: 34%;
        align-self: center;
    }

    .site-header .site-branding img,
    .site-header .site-branding svg {
        max-height: 28px;
        width: auto;
        max-width: 100%;
    }

    /* SEARCH BOX — middle (undo Plant3 mobile icon treatment) */
    .site-header .site-search {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        flex: 1 1 auto;
        align-self: stretch;
        width: auto !important;
        min-width: 0;
        height: auto !important;
        max-height: none;
        margin: 0;
        padding: 0;
    }

    .site-header .site-search::before,
    .site-header .site-search::after {
        content: none !important;
        display: none !important;
    }

    .site-header .site-search .dgwt-wcas-search-form {
        display: block !important;
        width: 100%;
        height: 100%;
    }

    .site-header .site-search .dgwt-wcas-search-wrapp {
        min-width: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
        display: flex !important;
        align-items: center;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 999px;
        overflow: hidden;
        position: relative;
        z-index: 2;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100%;
        box-sizing: border-box;
    }

    /*
     * Typed text vertical center — avoid height:100% + short line-height
     * (WebKit sits the glyph box low and clips descenders like "g").
     * Match line-height to the pill height (header − 6px×2 padding).
     */
    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
        --procora-msearch-h: calc(var(--s-head-height) - 12px);
        display: block !important;
        width: 100% !important;
        height: var(--procora-msearch-h) !important;
        min-height: var(--procora-msearch-h) !important;
        max-height: var(--procora-msearch-h) !important;
        margin: 0 !important;
        padding: 0 36px 0 40px !important;
        font-size: 16px !important;
        line-height: var(--procora-msearch-h) !important;
        border: none !important;
        background: transparent !important;
        color: #0b3d63;
        box-sizing: border-box !important;
        vertical-align: middle;
        -webkit-appearance: none;
        appearance: none;
    }

    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::-webkit-search-decoration,
    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::-webkit-search-cancel-button,
    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::-webkit-search-results-button,
    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::-webkit-search-results-decoration {
        display: none !important;
        -webkit-appearance: none;
    }

    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder {
        color: #71767f;
        opacity: 1;
        font-size: 16px;
        line-height: var(--procora-msearch-h);
        vertical-align: middle;
    }

    /*
     * Magnifier — beat Plant3/FiboSearch `top: 16px` with true center.
     * transform must win over components.css `transform: none`.
     */
    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
        position: absolute !important;
        top: 50% !important;
        bottom: auto !important;
        left: 10px !important;
        right: auto !important;
        margin: 0 !important;
        width: 22px !important;
        height: 22px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateY(-50%) !important;
        color: #0b3d63;
        line-height: 0 !important;
    }

    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg,
    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit i,
    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit * {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        vertical-align: middle;
        position: static !important;
        top: auto !important;
        transform: none !important;
    }

    /* Clear (X) — pin to far right inside the pill */
    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp .dgwt-wcas-close,
    .site-header .site-search .dgwt-wcas-style-pirx .dgwt-wcas-close {
        position: absolute !important;
        top: 50% !important;
        right: 8px !important;
        left: auto !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
        z-index: 2;
    }

    /*
     * Suggestions dropdown — FiboSearch top calc undershoots our padded
     * mobile header search, so the panel overlaps typed text. Nudge down
     * and keep the pill above the overlapping edge via stacking in-header.
     */
    .site-header .site-search {
        z-index: 5;
        overflow: visible !important;
    }

    .site-header .site-search .dgwt-wcas-search-wrapp {
        overflow: visible !important;
        position: relative;
    }

    .site-header .site-search .dgwt-wcas-suggestions-wrapp,
    .dgwt-wcas-suggestions-wrapp {
        /* Fallback before JS runs; JS sets exact top from pill bottom */
        margin-top: 20px !important;
    }

    .dgwt-wcas-details-wrapp {
        margin-top: 20px !important;
    }

    /* Keep autocomplete dropdown on-page (no fullscreen white overlay chrome) */
    .dgwt-wcas-overlay-mobile,
    .js-dgwt-wcas-overlay-mobile {
        display: none !important;
    }

    body.dgwt-wcas-overlay-mobile-on {
        overflow: auto !important;
    }

    body.dgwt-wcas-overlay-mobile-on .site-header .site-search .dgwt-wcas-search-wrapp {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: auto !important;
    }

    /* MENU + ☰ — right */
    .site-header .site-action.-right {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        flex: 0 0 auto;
        align-self: center;
        margin: 0;
        gap: 4px;
        z-index: 1;
    }

    .site-header .site-action.-right .nav-toggle.procora-nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        width: auto;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0 0 0 4px;
        cursor: pointer;
    }

    .site-header .procora-nav-toggle__label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        line-height: 1;
        color: inherit;
        white-space: nowrap;
        user-select: none;
    }

    .site-header .procora-nav-toggle__icon {
        position: relative;
        display: block;
        flex-shrink: 0;
        width: 2.5em;
        height: 2.5em;
    }

    .site-header .procora-nav-toggle__icon em {
        left: 0.55em;
        right: 0.55em;
    }

    /* Hide desktop-only inline nav in header row */
    .site-header .nav-panel.nav-inline._desktop {
        display: none;
    }
}