@media (max-width: 980px) {
    body {
        padding-top: calc(278px + env(safe-area-inset-top, 0px)) !important;
    }

    body.app-shell-header-compact {
        padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
    }

    .appShellHeader {
        height: calc(278px + env(safe-area-inset-top, 0px));
        max-height: calc(278px + env(safe-area-inset-top, 0px));
        min-height: calc(278px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }

    .appShellHeaderInner {
        box-sizing: border-box;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 46px auto;
        height: 278px;
        margin: 0 auto;
        max-width: 640px;
        padding: 12px max(12px, env(safe-area-inset-right, 0px)) 14px max(12px, env(safe-area-inset-left, 0px)) !important;
        width: 100% !important;
    }

    .appShellBrand {
        align-self: center;
        grid-column: 1;
        grid-row: 1;
    }

    .appShellBrand img,
    .appShellHeader.is-compact .appShellBrand img {
        display: block;
        height: auto;
        width: clamp(172px, 49vw, 214px);
    }

    .appShellMenuToggle {
        align-self: center;
        border-radius: 10px;
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
        height: 40px;
        justify-self: end;
        width: 44px;
    }

    .appShellActions {
        display: none;
    }

    .appShellSearchBlock {
        align-self: start;
        display: grid;
        gap: 10px;
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    .appShellSearchTabs {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        box-sizing: border-box;
        display: grid;
        gap: 4px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 4px;
        width: 100%;
    }

    .appShellSearchTab {
        border: 0;
        border-radius: 7px;
        color: var(--wgw-shell-logo-blue);
        font-size: 15px;
        justify-content: center;
        min-height: 40px;
        padding: 0 8px;
    }

    .appShellSearchTab i {
        font-size: 22px;
    }

    .appShellSearchTab.is-active {
        background: rgba(71, 215, 176, 0.18);
        color: #fff;
    }

    .appShellSearchTab.is-active::after {
        display: none;
    }

    .appShellSearch {
        border-radius: 10px;
        grid-template-columns: minmax(0, 1fr) 64px;
        grid-template-rows: 62px 62px;
        height: 124px;
        max-width: none;
        overflow: hidden;
        width: 100%;
    }

    .appShellSearch label {
        align-items: flex-start;
        box-sizing: border-box;
        gap: 4px;
        height: 62px;
        justify-content: center;
        padding: 0 16px 0 18px;
    }

    .appShellSearch label[data-app-shell-search-field="location"] {
        border-bottom: 1px solid #dbe4e6;
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .appShellSearch label[data-app-shell-search-field="term"] {
        border-left: 0;
        grid-column: 1;
        grid-row: 2;
    }

    .appShellSearch span {
        font-size: 13px;
        line-height: 1;
    }

    .appShellSearch input,
    .appShellSearch input[type=text] {
        font-size: 20px;
        line-height: 1.1;
    }

    .appShellSearch button {
        align-self: center;
        border-radius: 999px;
        font-size: 29px;
        grid-column: 2;
        grid-row: 2;
        height: 52px;
        justify-self: end;
        margin: 0 6px 0 0;
        width: 52px;
    }

    .appShellSearchPopover {
        border-radius: 20px;
        box-shadow: 0 22px 64px rgba(7, 27, 28, 0.24);
        left: max(12px, env(safe-area-inset-left, 0px));
        max-height: calc(100dvh - 190px);
        overflow: auto;
        padding: 16px;
        position: fixed;
        right: max(12px, env(safe-area-inset-right, 0px));
        top: calc(178px + env(safe-area-inset-top, 0px));
        transform: none !important;
        width: auto;
    }

    .appShellNav {
        background: rgba(7, 27, 28, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 12px;
        box-shadow: 0 18px 42px rgba(7, 27, 28, 0.28);
        box-sizing: border-box;
        display: none;
        grid-column: 1 / -1;
        grid-row: 3;
        margin: 0;
        padding: 10px;
        width: 100%;
    }

    body.app-shell-nav-open .appShellNav {
        display: grid;
    }

    .appShellNav a {
        justify-content: center;
        min-height: 42px;
    }

    .appShellHeader.is-compact {
        height: calc(76px + env(safe-area-inset-top, 0px));
        max-height: calc(76px + env(safe-area-inset-top, 0px));
        min-height: calc(76px + env(safe-area-inset-top, 0px));
    }

    .appShellHeader.is-compact .appShellHeaderInner {
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-rows: 52px;
        height: 76px;
        padding-bottom: 12px !important;
        padding-top: 12px !important;
    }

    .appShellHeader.is-compact .appShellBrand {
        display: none;
    }

    .appShellHeader.is-compact .appShellSearchBlock {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .appShellHeader.is-compact .appShellSearchTabs {
        display: none;
    }

    .appShellHeader.is-compact .appShellSearch {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) 48px;
        grid-template-rows: 52px;
        height: 52px;
        max-width: none;
        transform: none;
    }

    .appShellHeader.is-compact .appShellSearch label,
    .appShellHeader.is-compact .appShellSearch label[data-app-shell-search-field="location"],
    .appShellHeader.is-compact .appShellSearch label[data-app-shell-search-field="term"] {
        align-items: center;
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        gap: 6px;
        height: 52px;
        justify-content: flex-start;
        min-width: 0;
        padding: 0 9px 0 11px;
    }

    .appShellHeader.is-compact .appShellSearch label[data-app-shell-search-field="location"] {
        border-right: 1px solid #dbe4e6;
        grid-column: 1;
        grid-row: 1;
    }

    .appShellHeader.is-compact .appShellSearch label[data-app-shell-search-field="term"] {
        grid-column: 2;
        grid-row: 1;
    }

    .appShellHeader.is-compact .appShellSearch span {
        display: none;
    }

    .appShellHeader.is-compact .appShellSearchCompactIcon {
        color: var(--wgw-shell-brand);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 17px;
    }

    .appShellHeader.is-compact .appShellSearch input,
    .appShellHeader.is-compact .appShellSearch input[type=text] {
        font-size: 14px;
        font-weight: 800;
        min-width: 0;
        text-align: left;
    }

    .appShellHeader.is-compact .appShellSearch button {
        font-size: 24px;
        grid-column: 3;
        grid-row: 1;
        height: 42px;
        margin: 0 5px 0 0;
        width: 42px;
    }

    .appShellHeader.is-compact .appShellMenuToggle {
        grid-column: 2;
        grid-row: 1;
        height: 44px;
        width: 44px;
    }

    .appShellHeader.is-compact .appShellSearchPopover {
        top: calc(74px + env(safe-area-inset-top, 0px));
    }

    .appShellHeader.is-search-open {
        height: calc(278px + env(safe-area-inset-top, 0px));
        max-height: calc(278px + env(safe-area-inset-top, 0px));
        min-height: calc(278px + env(safe-area-inset-top, 0px));
    }

    .appShellHeader.is-search-open .appShellHeaderInner {
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 46px auto;
        height: 278px;
        padding-bottom: 14px !important;
        padding-top: 12px !important;
    }

    .appShellHeader.is-search-open .appShellBrand {
        display: inline-flex;
    }

    .appShellHeader.is-search-open .appShellSearchBlock {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    .appShellHeader.is-search-open .appShellSearchTabs {
        display: grid;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .appShellHeader.is-search-open .appShellSearch {
        grid-template-columns: minmax(0, 1fr) 64px;
        grid-template-rows: 62px 62px;
        height: 124px;
        max-width: none;
    }

    .appShellHeader.is-search-open .appShellSearch label,
    .appShellHeader.is-search-open .appShellSearch label[data-app-shell-search-field="location"],
    .appShellHeader.is-search-open .appShellSearch label[data-app-shell-search-field="term"] {
        align-items: flex-start;
        border-bottom: 0;
        border-right: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        height: 62px;
        justify-content: center;
        padding: 0 16px 0 18px;
    }

    .appShellHeader.is-search-open .appShellSearch label[data-app-shell-search-field="location"] {
        border-bottom: 1px solid #dbe4e6;
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .appShellHeader.is-search-open .appShellSearch label[data-app-shell-search-field="term"] {
        grid-column: 1;
        grid-row: 2;
    }

    .appShellHeader.is-search-open .appShellSearch span {
        display: block;
        font-size: 13px;
    }

    .appShellHeader.is-search-open .appShellSearch input,
    .appShellHeader.is-search-open .appShellSearch input[type=text] {
        font-size: 20px;
        font-weight: 400;
    }

    .appShellHeader.is-search-open .appShellSearchCompactIcon {
        display: none;
    }

    .appShellHeader.is-search-open .appShellSearch button {
        font-size: 29px;
        grid-column: 2;
        grid-row: 2;
        height: 52px;
        margin: 0 6px 0 0;
        width: 52px;
    }

    .appShellHeader.is-search-open .appShellMenuToggle {
        grid-column: 2;
        grid-row: 1;
    }

    .appShellHeader.is-search-open .appShellSearchPopover {
        top: calc(178px + env(safe-area-inset-top, 0px));
    }
}

@media (max-width: 380px) {
    .appShellSearchTab {
        font-size: 14px;
    }

    .appShellSearch input,
    .appShellSearch input[type=text] {
        font-size: 18px;
    }

    .appShellHeader.is-compact .appShellSearchCompactIcon {
        display: none;
    }
}