/**
 * Средний контур магазина: 992px–1280px (планшет / небольшой монитор).
 * Широкий десктоп: min-width 1281px. Мобильный: max-width 991px.
 */

@media (max-width: 1280px) and (min-width: 992px) {
    body.shopPage .body,
    body.shopPage header.shopSiteHeader {
        overflow-x: clip;
        overflow-y: visible;
        max-width: 100%;
    }

    body.shopPage header.shopSiteHeader > section {
        overflow: visible;
        max-width: 100%;
    }

    body.shopPage header.shopSiteHeader,
    body.shopPage .body header.shopSiteHeader {
        min-height: 0 !important;
        padding: 0 !important;
    }

    body.shopPage header.shopSiteHeader > section {
        position: relative;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.shopPage header.shopSiteHeader .shopHeaderLogo .logoLink img,
    body.shopPage header.shopSiteHeader .shopHeaderLogo .logoImg {
        max-height: 42px;
        width: auto;
        vertical-align: middle;
    }

    body.shopPage header.shopSiteHeader .shopHeaderNavCol .clear {
        display: none !important;
    }

    body.shopPage header.shopSiteHeader > section > .container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    body.shopPage header.shopSiteHeader .shopHeaderNavCol {
        display: contents;
        padding-left: 0 !important;
    }

    body.shopPage header.shopSiteHeader .shopHeaderRow {
        display: grid !important;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-rows: auto;
        align-items: center;
        position: static;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        padding: 12px clamp(16px, 4vw, 40px);
        box-sizing: border-box;
        column-gap: 12px;
        row-gap: 0;
    }

    body.shopPage header.shopSiteHeader .shopHeaderLogo {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    body.shopPage header.shopSiteHeader .headerBurger {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: static !important;
        grid-column: 2;
        grid-row: 1;
        width: 44px;
        height: 40px;
        margin: 0;
        padding: 0;
        cursor: pointer;
        box-sizing: border-box;
        color: #fff;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible;
        z-index: 2;
    }

    body.shopPage header.shopSiteHeader .shopHeaderBurger__icon {
        display: block !important;
        width: 25px;
        height: 19px;
        flex: 0 0 auto;
    }

    body.shopPage header.shopSiteHeader .shopHeaderBurger__line {
        display: none !important;
    }

    body.shopPage header.shopSiteHeader .shopSearch {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        min-width: 0;
    }

    body.shopPage header.shopSiteHeader .shopHeaderActions {
        grid-column: 4;
        grid-row: 1;
        justify-self: end;
        margin-left: 0 !important;
        min-width: 0;
    }

    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu:not(.shopHeaderMenu--collapsed) {
        display: block !important;
    }

    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10060 !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        padding-top: 0 !important;
        background: transparent !important;
        color: #282a31 !important;
        box-sizing: border-box;
        overflow: visible !important;
        transition: none;
        border-top: 0;
    }

    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu:not(.shopHeaderMenu--collapsed) > ul.shopHeaderMenuList {
        box-shadow: 0 12px 32px rgba(13, 68, 84, 0.12);
    }

    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu::before {
        content: '';
        display: block;
        height: 15px;
        background: var(--orange, #f39200);
    }

    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu.shopHeaderMenu--collapsed {
        display: none !important;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu > ul.shopHeaderMenuList,
    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu ul.shopHeaderMenuList {
        display: flex !important;
        flex-flow: column nowrap !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
    }

    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu .hm,
    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu ul.shopHeaderMenuList > li > a .hm,
    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu .shopCatalogLink .hm,
    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu .shopNavFaqLabel,
    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu .shopNavOfferLabel {
        font-family: Montserrat, sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        color: #282a31 !important;
    }

    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu .hm,
    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu ul.shopHeaderMenuList > li > a .hm,
    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu .shopCatalogLink .hm {
        display: inline !important;
        width: auto !important;
        max-width: none !important;
    }

    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu .shopNavFaqLabel--short,
    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu .shopNavOfferLabel--short {
        display: none !important;
    }

    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu .shopNavFaqLabel--long,
    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu .shopNavOfferLabel--long {
        display: inline !important;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu ul.shopHeaderMenuList > li.shopNavItem {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        align-self: stretch !important;
        padding: 14px clamp(16px, 4vw, 40px) !important;
        margin: 0 !important;
        border-bottom: 1px solid #dbe3e8;
        box-sizing: border-box;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu ul.shopHeaderMenuList > li.shopNavItem:last-child {
        border-bottom: 0;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu ul.shopHeaderMenuList > li > a,
    body.shopPage header.shopSiteHeader nav.shopHeaderMenu ul.shopHeaderMenuList > li > span.shopNavItemText,
    body.shopPage header.shopSiteHeader nav.shopHeaderMenu .shopCatalogLink {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        color: #282a31 !important;
        white-space: normal !important;
        box-sizing: border-box;
        text-decoration: none !important;
        border-bottom: none !important;
    }

    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu .hm span {
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        letter-spacing: inherit !important;
        text-transform: inherit !important;
        color: inherit !important;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu ul.shopHeaderMenuList > li > a:hover,
    body.shopPage header.shopSiteHeader nav.shopHeaderMenu ul.shopHeaderMenuList > li > a:hover .hm,
    body.shopPage header.shopSiteHeader nav.shopHeaderMenu ul.shopHeaderMenuList > li > a:hover .hm span,
    body.shopPage header.shopSiteHeader nav.shopHeaderMenu ul.shopHeaderMenuList > li > a:hover .shopNavFaqLabel,
    body.shopPage header.shopSiteHeader nav.shopHeaderMenu ul.shopHeaderMenuList > li > a:hover .shopNavOfferLabel,
    body.shopPage header.shopSiteHeader nav.shopHeaderMenu .shopCatalogLink:hover,
    body.shopPage header.shopSiteHeader nav.shopHeaderMenu .shopCatalogLink:hover .hm {
        color: #282a31 !important;
        opacity: 0.75;
        border-bottom: none !important;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu > ul.shopHeaderMenuList > li.shopNavItem--dropdown {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu .shopCatalogLink .shopCatalogLinkIcon {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu .shopCatalogLink span.hm::after {
        display: none !important;
        content: none !important;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu .shopCatalogLink::after {
        content: '' !important;
        display: block !important;
        flex: 0 0 8px !important;
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        min-height: 8px !important;
        margin-left: auto !important;
        border: solid #282a31 !important;
        border-width: 0 2px 2px 0 !important;
        background: none !important;
        filter: none !important;
        transform: rotate(-45deg) !important;
        transform-origin: center center !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu > ul.shopHeaderMenuList > li > ul.shopCatalogSubmenu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 8px 0 0 !important;
        padding: 0 0 0 12px !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0;
        z-index: auto !important;
        box-sizing: border-box;
        background: transparent !important;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu .shopNavItem--dropdown > .shopCatalogSubmenu > li > a {
        padding: 6px 0 !important;
        color: #41525d !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        text-transform: none !important;
        text-decoration: none !important;
    }

    body.shopPage header.shopSiteHeader nav.shopHeaderMenu .shopNavItem--dropdown > .shopCatalogSubmenu > li > a:hover,
    body.shopPage header.shopSiteHeader nav.shopHeaderMenu .shopNavItem--dropdown > .shopCatalogSubmenu > li > a.shopCatalogSubmenuLink--active {
        color: #282a31 !important;
        font-weight: 400 !important;
        opacity: 0.75;
    }

    body.shopPage header.shopSiteHeader .shopTopBlock {
        column-gap: clamp(12px, 2vw, 20px) !important;
        flex-wrap: nowrap;
        min-width: 0;
    }

    body.shopPage header.shopSiteHeader .shopTopBlock__value {
        font-size: 16px !important;
    }

    .shopProductCards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }

    .shopHomeMain--home .shopProductCards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .shopHomeMain--home .shopProductsSection {
        padding-top: 40px;
    }
}

@media (max-width: 1100px) and (min-width: 992px) {
    .shopHomeMain--home .shopProductCards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (min-width: 1281px) {
    header.shopSiteHeader .headerBurger {
        display: none !important;
    }

    .shopNavFaqLabel--long,
    .shopNavOfferLabel--long {
        display: none !important;
    }

    .shopNavFaqLabel--short,
    .shopNavOfferLabel--short {
        display: inline !important;
    }
}

@media (max-width: 991px) {
    body.shopPage header.shopSiteHeader,
    body.shopPage .body header.shopSiteHeader {
        height: auto !important;
        min-height: 60px;
        padding: 0 !important;
    }

    body.shopPage header.shopSiteHeader > section {
        position: relative;
        height: auto !important;
    }

    body.shopPage header.shopSiteHeader > section > .container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    body.shopPage header.shopSiteHeader .shopHeaderNavCol .clear {
        display: none !important;
    }

    body.shopPage header.shopSiteHeader .shopHeaderNavCol {
        display: contents !important;
        padding-left: 0 !important;
    }

    body.shopPage header.shopSiteHeader .shopHeaderRow {
        display: grid !important;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-rows: auto;
        align-items: center;
        position: relative;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        padding: 6px clamp(16px, 4vw, 40px);
        box-sizing: border-box;
        column-gap: 10px;
        row-gap: 0;
    }

    body.shopPage header.shopSiteHeader .shopHeaderLogo {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    body.shopPage header.shopSiteHeader .headerBurger {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: static !important;
        top: auto !important;
        right: auto !important;
        grid-column: 2;
        grid-row: 1;
        width: 44px;
        height: 40px;
        margin: 0;
        padding: 0;
        cursor: pointer;
        box-sizing: border-box;
        color: #fff;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible;
        z-index: 2;
    }

    body.shopPage header.shopSiteHeader .shopSearch {
        grid-column: 3;
        grid-row: 1;
        justify-self: stretch;
        min-width: 0;
    }

    body.shopPage header.shopSiteHeader .shopHeaderActions {
        grid-column: 4;
        grid-row: 1;
        justify-self: end;
        margin-left: 0 !important;
        min-width: 0;
    }

    body.shopPage header.shopSiteHeader nav.headerMenu.shopHeaderMenu {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    body.shopPage header.shopSiteHeader .shopTopBlock {
        column-gap: 8px !important;
        flex-wrap: nowrap;
        min-width: 0;
    }

    body.shopPage header.shopSiteHeader .shopTopBlock__cell--cart {
        column-gap: 0 !important;
    }

    body.shopPage header.shopSiteHeader .shopHeaderBurger__icon {
        display: none !important;
    }

    body.shopPage header.shopSiteHeader .shopHeaderBurger__line {
        display: block !important;
    }

    .shopNavFaqLabel--long,
    .shopNavOfferLabel--long {
        display: none !important;
    }

    .shopNavFaqLabel--short,
    .shopNavOfferLabel--short {
        display: inline !important;
    }
}