/* AUTOLAMPA header/footer redesign. Upload as /style/autolampa-redesign-header-footer.css */

@media (min-width: 1400px) {
    .main-page-page .container,
    .al-header .container,
    .al-footer-wrap .container {
        width: min(1520px, calc(100% - 48px)) !important;
        max-width: 1520px;
    }
}

.al-header {
    position: relative;
    z-index: 20;
    margin: 14px 0;
}

.al-header__inner {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start !important;
    min-height: 98px;
    padding: 0 14px;
    background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.al-header__inner > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.al-header__inner > .al-header-actions {
    margin-left: 12px !important;
}

.al-logo {
    flex: 0 0 210px;
    display: flex;
    align-items: center;
    width: 210px;
    height: 70px;
    overflow: hidden;
    border-radius: 10px;
}

.al-logo img {
    display: block;
    width: 220px;
    max-width: none;
    height: auto;
    object-fit: contain;
    object-position: left center;
    transform: translateX(-4px);
}

.al-catalog-trigger {
    flex: 0 0 132px;
    margin-left: 0 !important;
    height: 58px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #e94b0b;
    color: #fff;
    font-family: "Exo 2", "Rubik", Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
}

.al-catalog-trigger svg {
    width: 22px;
    height: 22px;
}

.al-header .catalog-nav {
    grid-column: 1;
    grid-row: 2;
    position: absolute !important;
    top: calc(100% + 18px);
    left: 0 !important;
    z-index: 40;
    display: none;
    width: 326px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .14);
    overflow: hidden;
}

.al-catalog-trigger:hover + .catalog-nav,
.al-catalog-trigger:focus + .catalog-nav,
.al-catalog-trigger.catalog-nav-trigger.active + .catalog-nav,
.al-catalog-trigger.catalog-nav-trigger.on + .catalog-nav,
.al-catalog-trigger.catalog-trigger.active + .catalog-nav,
.al-catalog-trigger.catalog-trigger.on + .catalog-nav,
.al-header .catalog-nav.active,
.al-header .catalog-nav.open,
.al-header .catalog-nav.is-open,
.al-header .catalog-nav.on-main,
.al-header .catalog-nav:hover {
    display: block;
}

.al-header .catalog-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.al-header .catalog-nav .back,
.al-header .catalog-nav .menu-toggle {
    display: none !important;
}

.al-header .catalog-nav > .item-level-0 {
    margin: 0;
    padding: 0;
}

.al-header .catalog-nav a {
    display: block;
    padding: 14px 24px;
    border-bottom: 1px solid #e4e4e4;
    color: #333;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}

.al-header .catalog-nav a:hover {
    color: #e94b0b;
    background: #fff6f1;
}

.al-header .catalog-nav > li > ul,
.al-header .catalog-nav > ul > li > ul {
    display: none !important;
}

.al-header .catalog-nav > li:last-child > a {
    border-bottom: 0;
}

.al-search {
    flex: 999 1 760px;
    width: auto;
    max-width: none;
    min-width: 480px;
    margin-left: 10px !important;
}

.al-header .al-search {
    flex: 999 1 760px !important;
    width: auto !important;
    min-width: 480px !important;
}

.al-header .al-search .search,
.al-header .al-search .custom-form,
.al-header .al-search form,
.al-header .al-search .search-field {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.al-search .search-form,
.al-search form,
.al-search .search,
.al-search .custom-form,
.al-search .search-field {
    display: grid;
    grid-template-columns: 1fr 56px;
    width: 100%;
    height: 55px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.al-search input[type="text"],
.al-search input[type="search"] {
    width: 100%;
    height: 55px;
    min-height: 55px;
    border: 1px solid #ddd;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    padding: 0 14px;
    background: #fff;
    color: #333;
    font-size: 14px;
}

.al-search button,
.al-search input[type="submit"] {
    width: 56px;
    height: 55px;
    min-width: 56px;
    min-height: 55px;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: #e94b0b;
    color: #fff;
    cursor: pointer;
    font-size: 0;
    padding: 0;
    margin: 0;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    transform: none;
    appearance: none;
    -webkit-appearance: none;
    background-color: #e94b0b !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' stroke='white' stroke-width='2.4'/%3E%3Cpath d='m15.6 15.6 5 5' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 25px 25px !important;
}

.al-search button::before,
.al-search input[type="submit"]::before {
    content: none !important;
}

.al-search #sys_search_block {
    grid-column: 1 / -1;
}

.al-partner-link {
    flex: 0 0 172px;
    width: 100%;
    margin-left: 0 !important;
    min-height: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border-radius: 8px;
    color: #242424;
    font-weight: 900;
    font-size: 20px;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.al-partner-link svg {
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    color: #e94b0b;
}

.al-phones {
    flex: 0 0 146px;
    position: relative;
}

.al-phones::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.al-phones__main {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #222;
    cursor: pointer;
    font-weight: 800;
    line-height: 1;
}

.al-phones__main::after {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-right: 1.8px solid #777;
    border-bottom: 1.8px solid #777;
    transform: translateY(-2px) rotate(45deg);
}

.al-phones__main span {
    flex: 0 0 auto;
    text-align: center;
}

.al-phones__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #777;
}

.al-phones__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    display: none;
    padding: 8px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .14);
}

.al-phones:hover .al-phones__list,
.al-phones.is-open .al-phones__list {
    display: grid;
    gap: 4px;
}

.al-phones__list a {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    color: #222;
    font-weight: 800;
    text-align: center;
}

.al-phones__list a:hover {
    color: #e94b0b;
    background: #f7f7f7;
}

.al-header-actions {
    flex: 0 0 153px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    height: 58px;
}

.al-header-actions a,
.al-header-actions button,
.al-header-actions .button,
.al-header-actions .login,
.al-header-actions .personal-catalog-item {
    min-width: 0;
    width: 100%;
    height: 58px;
    min-height: 58px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0;
    border-radius: 7px;
    background: #202020;
    color: #fff;
    font-size: 0;
    line-height: 1;
}

.al-header-actions span {
    display: none !important;
}

.al-header-actions .hidden {
    display: none !important;
}

.al-header-actions .login::before,
.al-header-actions .to-wishes::before,
.al-header-actions .basket-preview::before {
    content: "";
    width: 29px;
    height: 29px;
    display: block;
    flex: 0 0 29px;
    margin: 0 !important;
    background: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.al-header-actions .login::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 17v-3H3v-4h7V7l5 5-5 5zm2-15h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-8v-2h8V4h-8V2z'/%3E%3C/svg%3E");
}

.al-header-actions .to-wishes::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21s-7.2-4.4-9.6-8.6C.1 8.5 2.6 4 7 4c2 0 3.7 1 5 2.8C13.3 5 15 4 17 4c4.4 0 6.9 4.5 4.6 8.4C19.2 16.6 12 21 12 21zm0-2.4c2.6-1.7 6.3-4.6 7.8-7.2C21.2 9 19.8 6 17 6c-1.8 0-3 1-4.2 3.2h-1.6C10 7 8.8 6 7 6 4.2 6 2.8 9 4.2 11.4c1.5 2.6 5.2 5.5 7.8 7.2z'/%3E%3C/svg%3E");
}

.al-header-actions .basket-preview::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h-3V2h4.4l1.2 4H22l-2 9H9L7 4zm3.2 9h8.2l1.1-5H8.7l1.5 5zM10 22a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E");
}

.al-header-actions svg,
.al-header-actions img {
    width: 29px !important;
    height: 29px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.al-footer-wrap {
    padding: 32px 0;
    background: #f2f2f2;
}

.al-footer {
    overflow: hidden;
    border-radius: 14px;
    background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.08), transparent 34%), linear-gradient(135deg, #242424 0%, #111 100%);
    color: #fff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .16);
}

.al-footer__top {
    display: grid;
    grid-template-columns: 1.05fr .98fr 1.22fr 1.05fr 1.25fr;
    gap: 20px;
    padding: 34px 34px 28px;
}

.al-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.al-footer__brand img {
    width: 112px;
    height: auto;
    margin-bottom: 18px;
}

.al-footer__brand strong {
    display: block;
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .01em;
}

.al-footer__brand p {
    max-width: 230px;
    margin: 0 0 18px;
    color: rgba(255,255,255,.86);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.al-footer__socials {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.al-footer__socials a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
}

.al-footer__socials a:hover {
    background: #e94b0b;
}

.al-footer__socials svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.al-footer__group {
    min-width: 0;
    padding-left: 24px;
    border-left: 1px solid rgba(255,255,255,.12);
}

.al-footer__group ul,
.al-footer__group li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.al-footer h3 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 21px;
    line-height: 1.2;
}

.al-footer__group a,
.al-footer__group p {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 14px;
    color: rgba(255,255,255,.9);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.al-footer__group a {
    padding-left: 0;
}

.al-footer__group a::before {
    content: "";
    position: static;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-top: .42em;
    border-right: 2px solid #ff520f;
    border-bottom: 2px solid #ff520f;
    transform: rotate(-45deg);
}

.al-footer__group:not(.al-footer__contacts):not(.al-footer__schedule) .nav a::before,
.al-footer__group:not(.al-footer__contacts):not(.al-footer__schedule) .nav a::after,
.al-footer__group:not(.al-footer__contacts):not(.al-footer__schedule) ul a::before,
.al-footer__group:not(.al-footer__contacts):not(.al-footer__schedule) ul a::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
}

.al-footer__group:not(.al-footer__contacts):not(.al-footer__schedule) .nav a,
.al-footer__group:not(.al-footer__contacts):not(.al-footer__schedule) ul a {
    position: relative !important;
    display: block !important;
    padding-left: 20px !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap;
}

.al-footer__group:not(.al-footer__contacts):not(.al-footer__schedule) .nav a > span,
.al-footer__group:not(.al-footer__contacts):not(.al-footer__schedule) ul a > span {
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.al-footer__group:not(.al-footer__contacts):not(.al-footer__schedule) .nav a {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2l5 5-5 5' fill='none' stroke='%23ff520f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 8px 12px;
    background-position: left .3em;
}

.al-footer__contacts a,
.al-footer__schedule p {
    padding-left: 0;
}

.al-footer__contacts a::before,
.al-footer__schedule p::before {
    content: "";
    position: static;
    flex: 0 0 18px;
    margin-top: .12em;
    width: 17px;
    height: 17px;
    border: 0;
    transform: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.al-footer-phone::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23ff520f'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.7.6 4.1.6.7 0 1.3.6 1.3 1.3v3.5c0 .7-.6 1.3-1.3 1.3C10.4 21.6 2.4 13.6 2.4 3.3 2.4 2.6 3 2 3.7 2h3.5c.7 0 1.3.6 1.3 1.3 0 1.4.2 2.8.6 4.1.1.4 0 .8-.3 1.2l-2.2 2.2z'/%3E%3C/svg%3E");
}

.al-footer-mail::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23ff520f'%3E%3Cpath d='M2 5h20v14H2V5zm2 3.2V17h16V8.2l-8 5-8-5zm1.2-1.2 6.8 4.3L18.8 7H5.2z'/%3E%3C/svg%3E");
}

.al-footer-time::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Crect x='4' y='5' width='16' height='15' rx='2' stroke='%23ff520f' stroke-width='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16' stroke='%23ff520f' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='14' r='1.2' fill='%23ff520f'/%3E%3Ccircle cx='12' cy='14' r='1.2' fill='%23ff520f'/%3E%3Ccircle cx='16' cy='14' r='1.2' fill='%23ff520f'/%3E%3C/svg%3E");
}

.al-footer-address::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23ff520f'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
}

.al-footer__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 72px;
    padding: 14px 34px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.86);
    font-size: 16px;
    font-weight: 600;
}

.al-footer__copyright {
    display: flex;
    align-items: center;
    gap: 16px;
}

.al-footer__copyright img {
    width: 58px;
    height: auto;
}

@media (max-width: 1320px) {
    .al-header__inner {
        gap: 10px;
        min-height: 90px;
        padding: 0 16px;
    }

    .al-logo {
        flex-basis: 196px;
        width: 196px;
        height: 64px;
    }

    .al-catalog-trigger {
        flex-basis: 128px;
    }

    .al-search {
        flex-basis: 620px;
        min-width: 470px;
    }

    .al-logo img {
        width: 220px;
    }

    .al-partner-link {
        flex-basis: 188px;
        font-size: 14px;
    }

    .al-phones {
        flex-basis: 146px;
    }

    .al-header-actions {
        flex-basis: 128px;
    }
}

@media (max-width: 1190px) {
    .al-header__inner {
        padding: 0 14px;
    }

    .al-partner-link {
        display: none;
    }

    .al-phones {
        flex-basis: 132px;
    }

    .al-header-actions {
        flex-basis: 126px;
    }

    .al-logo {
        flex-basis: 190px;
        width: 190px;
    }

    .al-catalog-trigger {
        flex-basis: 122px;
    }

    .al-search {
        flex-basis: 520px;
        min-width: 380px;
    }

    .al-logo img {
        width: 210px;
    }
}

@media (max-width: 1120px) {
    .al-search {
        min-width: 280px;
    }
}

@media (max-width: 980px) {
    .al-header__inner {
        display: grid;
        grid-template-columns: 1fr auto auto;
        min-height: auto;
        padding: 12px;
    }

    .al-logo {
        grid-column: 1;
        width: 190px;
    }

    .al-header-actions {
        grid-column: 3;
    }

    .al-catalog-trigger,
    .al-search,
    .al-partner-link,
    .al-phones {
        display: none;
    }

    .al-header-actions {
        grid-template-columns: repeat(3, 42px);
    }

    .al-header-actions a,
    .al-header-actions button,
    .al-header-actions .button {
        height: 42px;
    }

    .al-footer__top {
        grid-template-columns: 1fr 1fr;
    }

    .al-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .al-footer__top {
        grid-template-columns: 1fr;
        padding: 28px 22px 24px;
    }

    .al-footer__group {
        padding-left: 0;
        border-left: 0;
    }

    .al-footer__legal {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        padding: 16px 22px;
    }
}
