/* Country picker approved in the design preview. Scoped to the shared header. */
.home-navigation-v1,
.country-navigation-page { padding-top: 112px; }

.header--country-navigation .header__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px minmax(0, 1fr);
    min-height: 112px;
    gap: 22px;
}

.header--country-navigation .nav { display: contents; }
.header--country-navigation .logo { grid-column: 1; grid-row: 1; justify-self: start; }
.header--country-navigation .country-nav-utilities {
    display: flex;
    align-items: center;
    gap: 14px;
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
}
.header--country-navigation .country-nav-utilities .nav__link { font-size: 12px; }
.header--country-navigation .country-nav-utilities .nav__link--cbr { gap: 7px; padding: 0 11px; }
.header--country-navigation .header__container > .btn {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-height: 44px;
    padding: 12px 17px;
    font-size: 12px;
}

.header--country-navigation .country-nav-panel {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 7px;
    width: 520px;
    grid-column: 2;
    grid-row: 1;
}

.header--country-navigation .country-nav-panel__title {
    text-align: center;
    color: #f4fbf9;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
}

.header--country-navigation .country-nav-panel__links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 8px;
    background: #15191c;
    border: 1px solid #424a51;
    border-radius: 16px;
}

.header--country-navigation .country-nav-panel__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 56px;
    margin: 0;
    padding: 10px 6px;
    background: #252b30;
    border: 1px solid #424a51;
    border-radius: 9px;
    color: #f4fbf9;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.header--country-navigation .country-nav-panel__link img {
    display: block;
    flex: none;
    width: 28px;
    height: 21px;
    max-width: none;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}

.header--country-navigation .country-nav-panel__link:not(.nav__link--disabled)::after { display: none; }

.header--country-navigation .country-nav-panel__link[aria-current="page"] {
    background: #c7d0d5;
    border-color: #c7d0d5;
    color: #151b20;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

@media (hover: hover) {
    .header--country-navigation .country-nav-panel__link:hover {
        background: #353e45;
        border-color: #87949d;
        color: #ffffff;
        box-shadow: 0 3px 10px rgba(0,0,0,.25);
        transform: translateY(-1px);
    }
    .header--country-navigation .country-nav-panel__link[aria-current="page"]:hover {
        background: #e0e6e9;
        border-color: #eef3f5;
        color: #151b20;
        box-shadow: 0 3px 12px rgba(0,0,0,.25);
    }
    .header--country-navigation .country-nav-panel__link.nav__link--disabled:hover { transform: none; }
}

.header--country-navigation .country-nav-panel__link:focus-visible {
    outline: 2px solid #e8fff8;
    outline-offset: 3px;
}

.header--country-navigation .country-nav-panel__link:not(.nav__link--disabled):active {
    transform: translateY(1px);
    box-shadow: none;
}

.header--country-navigation .country-nav-panel__link.nav__link--disabled { opacity: .78; }
.header--country-navigation .country-nav-panel__link.nav__link--disabled::after {
    display: block;
    right: auto;
    bottom: auto;
    left: 50%;
    top: calc(100% + 8px);
    height: auto;
    padding: 7px 10px;
    background: #151a1b;
    border: 1px solid #424a51;
    color: #ffffff;
    transform: translate(-50%, -4px);
}
.header--country-navigation .country-nav-panel__link.nav__link--disabled:hover::after,
.header--country-navigation .country-nav-panel__link.nav__link--disabled:focus-visible::after {
    transform: translate(-50%, 0);
}

@media (min-width: 1321px) {
    .catalog-v3-page.country-navigation-page { padding-top: 89.6px; }
    .catalog-v3-page > .header--country-navigation { zoom: .8; }
}

@media (max-width: 1320px) {
    .home-navigation-v1,
    .country-navigation-page,
    .catalog-v3-page.country-navigation-page { padding-top: 80px; }
    .catalog-v3-page > .header--country-navigation { zoom: 1; }
    .header--country-navigation .header__container { display: flex; min-height: 80px; padding: 12px 20px; gap: 16px; }
    .header--country-navigation .menu-toggle { display: block; margin-left: auto; margin-right: 0; flex-shrink: 0; }
    .header--country-navigation .nav {
        position: absolute;
        top: 80px;
        right: 20px;
        left: 20px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 18px;
        background: rgba(12,15,18,.98);
        border: 1px solid #424a51;
        border-radius: 16px;
        box-shadow: 0 16px 35px rgba(0,0,0,.45);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        overflow: visible;
        transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    }
    .header--country-navigation .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .header--country-navigation .country-nav-panel { width: min(100%, 520px); align-self: center; }
    .header--country-navigation .country-nav-panel__title { font-size: 14px; }
    .header--country-navigation .country-nav-panel__link { justify-content: center; min-height: 56px; padding: 11px 6px; border: 1px solid #424a51; }
    .header--country-navigation .country-nav-utilities { flex-direction: column; align-items: stretch; gap: 0; }
    .header--country-navigation .country-nav-utilities .nav__link { font-size: 14px; }
}

@media (max-width: 600px) {
    .header--country-navigation .header__container { padding-right: 16px; padding-left: 16px; }
    .header--country-navigation .nav { right: 12px; left: 12px; padding: 16px 12px; }
    .header--country-navigation .country-nav-panel__links { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 8px; }
    .header--country-navigation .country-nav-panel__link { font-size: 17px !important; margin: 0 !important; }
    .header--country-navigation .country-nav-panel__link img { width: 28px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .header--country-navigation .country-nav-panel__link { transition: none; }
    .header--country-navigation .country-nav-panel__link:hover,
    .header--country-navigation .country-nav-panel__link:active { transform: none; }
}