@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));
        overflow: visible;
        padding-top: env(safe-area-inset-top, 0px);
    }

    body.app-shell-nav-open .appShellHeader,
    body.app-shell-nav-open .appShellHeader.is-compact,
    body.app-shell-nav-open .appShellHeader.is-search-open {
        overflow: visible;
        z-index: 10050;
    }

    .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 - 268px);
        overflow: auto;
        padding: 16px;
        position: fixed;
        right: max(12px, env(safe-area-inset-right, 0px));
        top: calc(252px + env(safe-area-inset-top, 0px));
        transform: none !important;
        width: auto;
    }

    .appShellSearchPopover[data-active-field="location"] {
        max-height: calc(100dvh - 194px);
        top: calc(178px + env(safe-area-inset-top, 0px));
    }

    .appShellNav {
        background: linear-gradient(180deg, #082f30 0%, #051f20 100%);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
        display: none;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        left: 0;
        margin: 0;
        overflow-y: auto;
        padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(24px, env(safe-area-inset-bottom, 0px));
        position: fixed;
        right: 0;
        top: 0;
        width: 100vw;
        z-index: 10080;
    }

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

    body.app-shell-nav-open {
        overflow: hidden;
    }

    .appShellMobileNavHead {
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        justify-content: space-between;
        margin: 0 0 24px;
        padding: 0 0 16px;
    }

    .appShellMobileNavBrand {
        align-items: center;
        display: inline-flex;
        min-height: 46px;
    }

    .appShellMobileNavBrand img {
        display: block;
        height: auto;
        width: clamp(150px, 42vw, 190px);
    }

    .appShellMobileNavClose {
        align-items: center;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 12px;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        font-size: 22px;
        height: 46px;
        justify-content: center;
        padding: 0;
        width: 46px;
    }

    .appShellMobileAccount {
        display: grid;
        gap: 10px;
        padding: 0;
        width: 100%;
    }

    .appShellMobileSectionTitle {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.58);
        display: block;
        font-family: var(--wgw-shell-headline);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .08em;
        margin: 10px 0 0;
        padding: 18px 4px 2px;
        text-transform: uppercase;
    }

    .appShellNav a {
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.86);
        gap: 14px;
        justify-content: flex-start;
        min-height: 58px;
        padding: 10px 12px;
        text-align: left;
        white-space: normal;
    }

    .appShellNav a i {
        align-items: center;
        background: rgba(71, 215, 176, 0.12);
        border: 1px solid rgba(71, 215, 176, 0.18);
        border-radius: 8px;
        color: #8eead8;
        display: inline-flex;
        flex: 0 0 34px;
        font-size: 20px;
        height: 34px;
        justify-content: center;
        width: 34px;
    }

    .appShellNav .appShellMobilePrimaryLink {
        background: #0b7473;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
        color: #fff;
        font-size: 19px;
        min-height: 72px;
        padding: 14px;
    }

    .appShellNav .appShellMobilePrimaryLink i {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.22);
        color: #fff;
        flex-basis: 42px;
        font-size: 24px;
        height: 42px;
        width: 42px;
    }

    .appShellNav .appShellMobileLink {
        background: rgba(255, 255, 255, 0.055);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .appShellNav .appShellMobileLocationLink {
        align-items: center;
        border: 0;
        color: rgba(255, 255, 255, 0.64);
        display: inline-flex;
        font-size: 13px;
        gap: 8px;
        justify-self: start;
        margin-top: 14px;
        min-height: 0;
        padding: 6px 4px;
    }

    .appShellNav .appShellMobileLocationLink i {
        background: transparent;
        border: 0;
        color: #8eead8;
        flex: 0 0 auto;
        font-size: 18px;
        height: auto;
        width: auto;
    }

    .appShellNav a:hover,
    .appShellNav a:focus {
        background: rgba(255, 255, 255, 0.10);
    }

    .appShellNav .appShellMobileLocationLink:hover,
    .appShellNav .appShellMobileLocationLink:focus {
        background: transparent;
        color: #fff;
    }

    .appShellMobileAccountDivider {
        border-top-color: rgba(255, 255, 255, 0.10);
        margin: 4px 6px;
    }

    .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 {
        max-height: calc(100dvh - 92px);
        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 {
        max-height: calc(100dvh - 268px);
        top: calc(252px + env(safe-area-inset-top, 0px));
    }

    .appShellHeader.is-search-open .appShellSearchPopover[data-active-field="location"] {
        max-height: calc(100dvh - 194px);
        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;
    }
}