:root {
    --home-mobile-header-height: 4.5rem;
}

.home-mobile-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    background: #fff;
}

.home-mobile-header__inner {
    display: flex;
    align-items: center;
    padding: .75rem;
    padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
    padding-bottom: 1rem;
}

@media (max-width: 991.98px) {
    .home-mobile-header__inner {
        padding-inline: var(--home-inline-inset, calc(4.5455% + 0.364px));
    }
}

.home-mobile-header__search {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    margin: 0;
    padding: .7rem .9rem;
    border: 0;
    border-radius: 12px;
    background: #f5f5f7;
    color: #53565a;
    text-align: right;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease;
}

.home-mobile-header__search:active {
    background: #eee;
}

.home-mobile-header__search-icon {
    display: flex;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
}

.home-mobile-header__search-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.home-mobile-header__search-text {
    flex: 0 0 auto;
    margin: 0;
    font-size: .875rem;
    line-height: 1.4;
    color: #53565a;
    font-weight: 400;
}

.home-mobile-header__brand {
    display: block;
    height: 1.25rem;
    width: auto;
    max-width: 4.5rem;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .home {
        margin-top: 0;
        /* بوت‌استرپ py-5 را important تعریف کرده، پس اینجا هم لازم است */
        /* فاصله ۸px زیر هدر، معادل mt-2 بنر دیجی‌کالا */
        padding-top: calc(var(--home-mobile-header-height) + .5rem + env(safe-area-inset-top, 0px)) !important;
    }
}