/* Final mobile-header geometry layer. Loaded after the broader visibility audit. */
@media (max-width: 900px) {
    .app-mobile-header {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        padding-top: calc(10px + env(safe-area-inset-top)) !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
        padding-left: 16px !important;
    }

    .app-mobile-header > .app-mobile-brand-row,
    .app-mobile-header > .app-mobile-search {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .app-mobile-brand-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .app-mobile-brand {
        min-width: max-content !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
    }

    .app-mobile-brand strong {
        flex: 0 0 auto !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-size: clamp(.9rem, 3.8vw, 1.05rem) !important;
        letter-spacing: .06em !important;
    }

    .app-mobile-header-actions {
        min-width: 0 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .app-mobile-search {
        box-sizing: border-box !important;
        height: 52px !important;
        min-height: 52px !important;
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) 42px !important;
        align-items: center !important;
        column-gap: 10px !important;
        padding: 0 8px 0 14px !important;
        overflow: hidden !important;
        border-radius: 27px !important;
    }

    .app-mobile-search > svg {
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
        flex: none !important;
    }

    .app-mobile-search input {
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
        text-overflow: ellipsis !important;
    }

    .app-search-camera {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-self: end !important;
        border-radius: 50% !important;
    }

    .app-search-camera svg {
        width: 25px !important;
        height: 25px !important;
        margin: 0 !important;
    }

    /* Keep the compact three-dot icon visually subtle without shrinking the touch target. */
    .app-home-feed .app-product-rail .app-card-menu,
    .app-listing-card .app-card-menu {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin-top: -4px !important;
        margin-right: -8px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
    }

    .app-home-feed .app-product-rail .app-card-menu svg,
    .app-listing-card .app-card-menu svg {
        width: 18px !important;
        height: 18px !important;
    }
}

@media (max-width: 430px) {
    .app-mobile-header {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    .app-mobile-search {
        grid-template-columns: 26px minmax(0, 1fr) 40px !important;
        column-gap: 9px !important;
        padding-left: 13px !important;
        padding-right: 7px !important;
    }

    .app-mobile-search > svg {
        width: 26px !important;
        height: 26px !important;
    }

    .app-mobile-search input {
        font-size: 15px !important;
    }

    .app-search-camera {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
}

@media (max-width: 350px) {
    .app-mobile-header {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .app-mobile-header-actions {
        gap: 5px !important;
    }

    .app-mobile-search {
        grid-template-columns: 24px minmax(0, 1fr) 38px !important;
        column-gap: 8px !important;
        padding-left: 12px !important;
        padding-right: 6px !important;
    }

    .app-mobile-search > svg {
        width: 24px !important;
        height: 24px !important;
    }

    .app-mobile-search input {
        font-size: 14px !important;
    }

    .app-search-camera {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }
}