/*
 * METSTROYSETKA MOBILE RESPONSIVE V1
 *
 * Desktop layout remains untouched.
 * Overrides begin only at viewport <= 900px.
 */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* Header */

    .header {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
    }

    .header-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "logo desc"
            "search search"
            "contact contact";
        gap: 8px 16px;

        width: 100%;
        max-width: 760px;
        height: auto;

        margin: 0 auto;
        padding: 12px 16px 10px;
    }

    .header-inner .logo,
    .header-inner .desc,
    .header-inner .search,
    .header-inner .contact {
        float: none;
        width: auto;
        height: auto;
        min-width: 0;
    }

    .header-inner .logo {
        grid-area: logo;
        align-self: center;
    }

    .header-inner .logo img {
        display: block;
        max-width: 160px;
        height: auto;
    }

    .header-inner .desc {
        grid-area: desc;
        align-self: center;
    }

    .header-inner .desc img,
    .preview-title-image {
        max-width: 100%;
        height: auto;
    }

    .desc .title {
        margin-left: 0;
        font-size: 12px;
        line-height: 1.35;
    }

    .header-inner .search {
        grid-area: search;
    }

    .search-inner {
        width: 100%;
        height: auto;
        padding: 4px 0;
    }

    .search-inner .ya-site-form {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .ya-site-form__form {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search input[type="text"],
    .search input[type="search"] {
        max-width: 100%;
    }

    .header-inner .contact {
        grid-area: contact;
    }

    .contact-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 18px;
        padding-top: 0;
    }

    .contact-inner a {
        width: auto;
        height: auto;
        min-height: 32px;
        padding-left: 34px;
        line-height: 32px;
        white-space: nowrap;
    }

    /* Top menu */

    .menu {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .menu-inner {
        width: 100%;
        max-width: 760px;
        height: auto;
        min-height: 0;
        margin: 0 auto;
        padding: 0 12px;
    }

    .menu-links {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        gap: 1px;
        width: 100%;
    }

    .menu-1,
    .menu-2,
    .menu-3,
    .menu-4,
    .menu-basket {
        box-sizing: border-box;
        float: none;

        width: auto;
        min-width: 0;
        height: auto;
        min-height: 48px;

        margin: 0;
        padding: 0;

        background-image: none;
        line-height: normal;
    }

    .menu-1,
    .menu-2,
    .menu-3,
    .menu-4 {
        display: flex;
        align-items: center;
        justify-content: center;

        padding: 10px 6px;

        background: #f2f6f9;

        color: #138eb8;
        text-align: center;
        text-decoration: none;
        font-size: 15px;
    }

    .menu-1:hover,
    .menu-2:hover,
    .menu-3:hover,
    .menu-4:hover,
    .menu-1-sel,
    .menu-2-sel,
    .menu-3-sel,
    .menu-4-sel {
        background: #0aa5d3;
        color: #fff;
        text-decoration: none;
    }

    .menu-splitter {
        display: none;
    }

    .menu-basket {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #53616d;
    }

    #mb_in {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    .menu-basket a,
    .menu-basket .request-widget-link {
        display: block;
        width: 100%;
        padding: 6px;
        color: #fff;
        text-decoration: none;
    }

    /* Main shell */

    .outer {
        width: 100%;
        min-width: 0;
        overflow: visible;
        background-position: center top;
    }

    .breadcrumbs {
        box-sizing: border-box;

        width: calc(100% - 32px);
        max-width: 760px;

        margin: 12px auto;
        padding: 0;

        overflow-wrap: anywhere;
        line-height: 1.5;
    }

    .breadcrumbs_lnk,
    .breadcrumbs b {
        font-size: 13px;
    }

    .content {
        box-sizing: border-box;

        width: calc(100% - 32px);
        max-width: 760px;

        margin-left: auto;
        margin-right: auto;
    }

    /* Legacy category sidebar */

    .legacy-category .main-catalog-left {
        display: none;
    }

    .legacy-category #main-catalog-right {
        box-sizing: border-box;
        float: none;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;
    }

    .catalog-top-text {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .catalog-top-text h1,
    .item2_item_title,
    .content h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Hub category cards */

    .legacy-category #main-catalog-right .catalog-mid-item {
        box-sizing: border-box;

        display: inline-block;
        float: none;

        width: calc(50% - 7px);
        height: auto;
        min-height: 185px;

        margin: 0 10px 14px 0;
        padding: 8px;

        vertical-align: top;
    }

    .catalog-mid-item-1,
    .catalog-mid-item-3 {
        margin-left: 0;
    }

    .catalog-mid-item-splitter {
        display: none;
    }

    /* Related/sibling category links */

    .top_sub_cat {
        box-sizing: border-box;

        width: calc(50% - 8px);

        padding: 7px 12px 7px 0;
        vertical-align: top;
    }

    /* Product list */

    #catalog-items,
    #catalog-items-top {
        width: 100%;
        max-width: 100%;
    }

    .catalog2_href_item_title {
        box-sizing: border-box;
        position: relative;

        display: block;

        width: 100%;
        height: auto;
        min-height: 58px;

        margin: 0;
        padding: 9px 12px;

        border-bottom: 1px solid #e2e7eb;

        background: #fff;

        color: #4b4b4b;
        text-decoration: none;
    }

    .catalog2_href_item_title:hover {
        background: #f7fafc;
    }

    .catalog2_href_item_title_inner {
        display: block;

        width: auto;
        height: auto;
        min-height: 0;

        padding: 0;

        font-size: 14px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .catalog2_href_item_title .subcost {
        display: inline-block;
        float: none;

        width: auto;
        min-width: 75px;
        height: auto;
        min-height: 27px;

        margin: 7px 0 0;
        padding: 5px 9px;

        background: #eef6fa;

        color: #34708a;
        line-height: 17px;
    }

    .catalog2_href_item_bigimage {
        display: none !important;
    }

    /* Catalog filter */

    .autofilter_outer,
    .catalog-filter {
        width: 100%;
        max-width: 100%;
    }

    /* Product page */

    .item2_left_menu {
        display: none;
    }

    .item2_right_content {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    #item-site-left {
        box-sizing: border-box;
        float: none;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0 0 16px;
        text-align: center;
    }

    #item-site-left .fancybox,
    #item-site-left .tovarimg {
        display: inline-block;
        max-width: 100%;
        height: auto;
    }

    #item-site-right {
        box-sizing: border-box;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
    }

    .item_status_i,
    #buttonadd,
    #buttonmod,
    #buttondel {
        box-sizing: border-box;
        width: 100%;
        max-width: 340px;
    }

    #loc_sum {
        box-sizing: border-box;
        height: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .count_f {
        max-width: 100%;
    }

    /* Related products */

    .seo-related-products,
    .seo-related-products__list {
        box-sizing: border-box;
        max-width: 100%;
    }

    .seo-related-products__list {
        padding-left: 0;
    }

    .seo-related-product-link {
        overflow-wrap: anywhere;
    }

    /* Homepage */

    .legacy-home .main-catalog-item {
        box-sizing: border-box;

        width: calc(50% - 12px);
        height: auto;

        margin: 0 24px 28px 0;
    }

    .legacy-home .main-catalog-item-1,
    .legacy-home .main-catalog-item-3 {
        margin-left: 0;
    }

    .main-items-center {
        box-sizing: border-box;

        width: 100% !important;
        max-width: 760px;

        padding: 0 16px;
    }

    .carousel,
    .carousel_seen {
        width: 100% !important;
        max-width: 100% !important;
    }

    .default-articles {
        box-sizing: border-box;

        width: 100%;
        max-width: 760px;

        padding-left: 0;
    }

    /* Contacts and text pages */

    .contacts_div {
        box-sizing: border-box;

        width: calc(50% - 10px);
        max-width: 100%;
        height: auto;
        min-height: 180px;

        margin-right: 20px;
    }

    .text-page-right,
    .text-page-left,
    .content-head,
    .content-body {
        max-width: 100%;
    }

    .content table,
    .content iframe,
    .content video {
        max-width: 100%;
    }

    /* Footer */

    .footer {
        width: 100%;
        height: auto;
        min-height: 0;

        padding: 26px 16px;

        background-color: #515758;
    }

    .footer-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;

        width: 100%;
        max-width: 760px;

        margin: 0 auto;
    }

    .footer-left,
    .footer-links,
    .footer-right {
        box-sizing: border-box;

        float: none;

        width: auto;
        max-width: 100%;

        margin: 0;
        padding: 0;
    }

    .footer-links {
        grid-column: 1 / -1;

        display: flex;
        flex-wrap: wrap;
        gap: 10px 18px;

        order: 3;
    }

    .footer-right {
        text-align: right;
    }

    .footer-order-online {
        box-sizing: border-box;
        width: 100%;
        max-width: 240px;
    }
}


@media (max-width: 640px) {

    .header-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "desc"
            "contact"
            "search";

        gap: 8px;

        max-width: none;

        padding: 10px 14px 12px;
        text-align: center;
    }

    .header-inner .logo,
    .header-inner .desc {
        justify-self: center;
    }

    .header-inner .logo img {
        max-width: 145px;
    }

    .desc br {
        display: none;
    }

    .desc .title {
        font-size: 11px;
        line-height: 1.35;
    }

    .contact-inner {
        justify-content: center;
        gap: 2px 14px;
        font-size: 14px;
    }

    .contact-inner a {
        min-height: 30px;
        padding-left: 30px;
        line-height: 30px;
    }

    .menu-inner {
        max-width: none;
        padding: 0;
    }

    .menu-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-1,
    .menu-2,
    .menu-3,
    .menu-4,
    .menu-basket {
        min-height: 46px;
    }

    .menu-1,
    .menu-2,
    .menu-3,
    .menu-4 {
        font-size: 14px;
    }

    .breadcrumbs,
    .content {
        width: calc(100% - 24px);
    }

    .breadcrumbs {
        margin-top: 9px;
        margin-bottom: 9px;
        font-size: 12px;
    }

    .breadcrumbs_lnk,
    .breadcrumbs b {
        font-size: 12px;
    }

    .content h1,
    .catalog-top-text h1,
    .item2_item_title {
        font-size: 22px;
        line-height: 1.25;
    }

    .legacy-category #main-catalog-right .catalog-mid-item {
        display: block;
        width: 100%;
        min-height: 0;
        margin: 0 0 12px;
    }

    .top_sub_cat {
        display: block;
        width: 100%;
        padding: 7px 0;
    }

    .catalog2_href_item_title {
        min-height: 56px;
        padding: 9px 10px;
    }

    .catalog2_href_item_title_inner {
        font-size: 13px;
    }

    #item-site-left {
        margin-bottom: 12px;
    }

    .item_status_i,
    #buttonadd,
    #buttonmod,
    #buttondel {
        max-width: none;
    }

    .legacy-home .main-catalog-item {
        float: none;
        width: 100%;
        margin: 0 0 24px;
    }

    .main-items-center {
        padding: 0 12px;
    }

    .contacts_div {
        float: none;
        width: 100%;
        margin: 0 0 16px;
    }

    .footer {
        padding: 24px 14px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 20px;

        max-width: none;

        text-align: center;
    }

    .footer-left,
    .footer-right {
        text-align: center;
    }

    .footer-links {
        grid-column: auto;
        justify-content: center;
        order: initial;
    }

    .footer-phone,
    .footer-href {
        font-size: 21px;
    }

    .footer-mail {
        font-size: 15px;
    }

    .footer-order-online {
        max-width: 100%;
    }
}


/*
 * MOBILE UX V18.4A
 *
 * Existing desktop layout remains untouched.
 * These controls exist only when JS creates them
 * for viewports <= 900px.
 */

@media (max-width: 900px) {

    .mobile-ux-toolbar {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 8px;

        width: 100%;
        margin: 0 0 14px;
    }

    .mobile-ux-toolbar
    .mobile-ux-toggle:only-child {
        grid-column: 1 / -1;
    }

    .mobile-ux-toggle {
        position: relative;

        min-width: 0;
        min-height: 44px;

        padding: 9px 14px;

        border: 1px solid #cbd6df;
        border-radius: 7px;

        background: #f4f7f9;

        color: #344553;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;

        text-align: center;

        cursor: pointer;

        -webkit-tap-highlight-color:
            transparent;
    }

    .mobile-ux-toggle::after {
        content: "▾";

        display: inline-block;

        margin-left: 7px;

        font-size: 12px;

        transition:
            transform .16s ease;
    }

    .mobile-ux-toggle.is-active {
        border-color: #0aa5d3;

        background: #0aa5d3;

        color: #fff;
    }

    .mobile-ux-toggle.is-active::after {
        transform: rotate(180deg);
    }

    .mobile-ux-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-width: 20px;
        height: 20px;

        margin-left: 7px;
        padding: 0 6px;

        border-radius: 10px;

        background: #53616d;

        color: #fff;

        font-size: 11px;
        line-height: 20px;
    }

    .mobile-ux-toggle.is-active
    .mobile-ux-count {
        background: #fff;
        color: #0a88ae;
    }

    /*
     * Filter remains visible if JS fails.
     * It collapses only after mobile-ux-ready
     * is successfully applied.
     */

    .mobile-ux-ready
    .catalog-filter.mobile-filter-panel {
        display: none;
    }

    .mobile-ux-ready
    .catalog-filter.mobile-filter-panel.is-mobile-open {
        display: block;
    }

    /*
     * Catalog tree.
     */

    .mobile-ux-ready
    .main-catalog-left.mobile-catalog-panel {
        display: none;

        box-sizing: border-box;

        float: none;

        width: 100%;
        max-width: 100%;

        margin: 0 0 16px;
        padding: 0;

        border: 1px solid #d9e0e6;
        border-radius: 8px;

        background: #fff;

        overflow: hidden;
    }

    .mobile-ux-ready
    .main-catalog-left.mobile-catalog-panel.is-mobile-open {
        display: block !important;
    }

    .mobile-catalog-panel
    .main-catalog-left-top {
        box-sizing: border-box;

        width: 100%;
        max-width: 100%;

        padding: 0;
    }

    .mobile-catalog-panel
    .main-catalog-img {
        display: none;
    }

    .mobile-catalog-panel
    .catalog-menu-href1,
    .mobile-catalog-panel
    .catalog-menu-href2,
    .mobile-catalog-panel
    .catalog-menu-href3,
    .mobile-catalog-panel
    .catalog-menu-href4,
    .mobile-catalog-panel
    .catalog-menu-href5 {
        box-sizing: border-box;

        width: 100%;
        max-width: 100%;

        height: auto;
        min-height: 40px;

        margin: 0;

        background-image: none;

        line-height: 1.3;
    }

    .mobile-catalog-panel
    .catalog-menu-href1 {
        padding:
            11px
            12px;

        border-bottom:
            1px solid #dde4e9;

        background: #f4f7f9;

        font-size: 14px;
        font-weight: 700;
    }

    .mobile-catalog-panel
    .catalog-menu-href2 {
        padding:
            10px
            12px
            10px
            22px;

        border-bottom:
            1px solid #edf1f4;

        font-size: 14px;
    }

    .mobile-catalog-panel
    .catalog-menu-href3 {
        padding:
            9px
            12px
            9px
            32px;

        font-size: 13px;
    }

    .mobile-catalog-panel
    .catalog-menu-href4 {
        padding:
            9px
            12px
            9px
            42px;

        font-size: 13px;
    }

    .mobile-catalog-panel
    .catalog-menu-href5 {
        padding:
            8px
            12px
            8px
            52px;

        font-size: 12px;
    }

    .mobile-catalog-panel
    .catalog-menu-inner {
        display: block;

        width: auto;
        max-width: 100%;

        height: auto;
        min-height: 0;

        padding: 0;

        overflow-wrap: anywhere;
    }

    .mobile-catalog-panel
    .menuchilds {
        max-width: 100%;
    }

    .mobile-catalog-panel
    > br {
        display: none;
    }
}


@media (max-width: 640px) {

    .mobile-ux-toolbar {
        gap: 6px;
        margin-bottom: 12px;
    }

    .mobile-ux-toggle {
        min-height: 46px;

        padding:
            9px
            10px;

        font-size: 14px;
    }

    .mobile-catalog-panel
    .catalog-menu-href1 {
        font-size: 13px;
    }

    .mobile-catalog-panel
    .catalog-menu-href2 {
        padding-left: 19px;
        font-size: 13px;
    }

    .mobile-catalog-panel
    .catalog-menu-href3 {
        padding-left: 27px;
    }

    .mobile-catalog-panel
    .catalog-menu-href4 {
        padding-left: 35px;
    }

    .mobile-catalog-panel
    .catalog-menu-href5 {
        padding-left: 43px;
    }
}