@media (min-width: 1300px) {
    body {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    inner {
        width: calc(1300px - 2rem);
    }
}

/* State changes for menus and image preview are class based; no inline styles. */
popmenu.is-open, popimg.is-open, closepop.is-open { display: flex; }
mobmenu.is-open { top: 0; }
mobtop.is-open mx { display: inline-flex; }
mobtop.is-open mhum { display: none; }
body.mobmenu-open { position: fixed; width: 100%; overflow: hidden; }
inimg > img { display: block; width: 100%; height: 100%; object-fit: contain; }
mmmin.is-hidden { display: none; }
mmmin#inform.is-open { display: flex; }
inimg.is-active { opacity: 0; }




@media (max-width: 1179px) {
    topnav, fnav {
        display: none;
    }
    popmenu {
        display: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        background: rgb(255 255 255 / .95);
        font-size: 18px;
        line-height: 18px;
        font-weight: 600;
        text-transform: uppercase;
        z-index: 1;
    }
    popmenu in {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    popmenu a {
        color: #333;
    }
    popmenu a:hover {
        color: #555;
    }
}

@media (min-width: 641px) and (max-width: 1179px) {
    topminmenu {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 52px;
        height: 52px;
        font-size: 26px;
        line-height: 26px;
        background: #333;
        color: #fff;
        border-radius: 2rem;
        border: 1px solid #fff;
        font-weight: 600;
        cursor: pointer;
    }
    closepop {
        top: 2rem;
        right: 2rem;
    }
    menubut {display: none;}
    category {
        grid-template-columns: repeat(4, 1fr);
    }
    tlf {
        font-size: 14px;
        line-height: 14px;
    }
    tlf::after {
        content: "Позвонить";
    }
}


@media (max-width: 640px) {
    body {
        width: 100vw;
        height: 100vh;
    }
    inner {
        padding: 2rem;
        gap: 2rem;
    }
    header {
        background: none;
        border: none;
        justify-content: center;
        margin: 0;
        padding: 0;
    }
    adr {
        background: none;
        padding: 0;
        border: none;
        font-size: 14px;
        line-height: 14px;
        text-transform: uppercase;
    }
    topnav {
        display: none;
    }
    top {
        flex-direction: column;
        gap: 2rem;
    }
    logo {
        position: relative;
        width: 283px;
        height: 90px;
    }
    logo img {
        width: 100%;
    }
    tlf {
        font-size: 21px;
        line-height: 21px;
    }

    search {
        width: 100%;
    }
    search input.text {
        width: 100%;
    }

    catalog {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0;
    }

    cont p, incont p {
        padding: 2rem;
    }

    colorblock {
        padding: 0;
        flex-direction: column;
    }
    colorblock.nowrap {
        flex-direction: column;
        gap: 2rem;
    }
    leftblock {
        padding: 2rem;
        gap: 2rem;
    }
    leftblock p {
        font-size: 18px;
        line-height: 24px;
    }

    rigthblock {
        border-radius: 2rem;
    }
    rigthblock text p:nth-child(3) {
        font-size: 22px;
        line-height: 22px;
    }
    rigthblock form {
        flex-direction: column;
    }
    money {
        display: none;
    }

    advantages {
        flex-direction: column;
        gap: 2rem;
    }
    advantages vline {
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #ccc;
    }

    mmm {
        flex-direction: column;
        background: none;
        border: none;
        padding: 0;
    }
    mmm mmmin {
        background: #f1f1f1;
        border-radius: 2rem;
        border: 1px solid #ddd;
        padding: 2rem 1rem;
    }

    reviewmap {
        flex-direction: column;
    }

    intitle {
        text-align: center;
        line-height: 1.5;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 2rem 1rem;
    }
    container {
        flex-wrap: wrap;
    }
    cont {
        width: 100%;
    }
    mainimg {
        width: 100%;
        height: 50vh;
    }
    hsep {
        display: none;
    }
    footer {
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
        padding: 0;
        background: none;
        border: none;
    }
    offcopynav {
        width: auto;
        text-align: center;
        justify-content: center;
        padding: 0 1rem;
    }

    category {
        gap: 1rem;
        grid-template-columns: repeat(1, 1fr);
    }
    category item {
        width: 100%;
    }
    inimgprice, incont {
        width: 100%;
    }
    inimg {
        height: 50vh;   
        flex: none;
    }
    category#incat item {
        width: 100%;
        padding: 0 1rem;
    }
    category item img {
        padding: 2rem;
    }
    cur, qtt {
        font-weight: 600;
    }
    intitle h1 {
        width: 100%;
    }

    popimg {
        z-index: 1;
    }
    
    menubut {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 64px;
        height: 64px;
        font-size: 32px;
        line-height: 32px;
        position: fixed;
        bottom: 2rem;
        left: 0;
        right: 0;
        margin: auto;
        background: #84be63;
        color: #fff;
        box-shadow: 0 0 1rem rgb(0 0 0 / .25);
        border-radius: 2rem;
        font-weight: 600;
        cursor: pointer;
        z-index: 1;
    }
    closepop {
        width: 64px;
        height: 64px;
        font-size: 32px;
        line-height: 32px;
        top: auto;
        left: 0;
        right: 0;
        bottom: 2rem;
        margin: auto;
    }
    topminmenu {display: none;}

    aboutimgs {
        flex-wrap: wrap;
    }
    aboutimgs abimg {
        flex: auto;
        width: 100%;
        height: 300px;
    }

    psltbl {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(4, auto);
        font-size: 16px;
        line-height: 16px;
    }

    psltbl p {
        padding: .5rem;
    }

    logo a {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    #fileform {
        gap: 2rem;
    }

    mmm vline {
        display: none;
    }

}
@media (max-width: 640px){

    header, top, menubut, closepop, leftblock {
        display: none;
    }
    inner {
        margin-top: 96px;
        padding: 1rem;
        gap: 1rem;
    }
    rigthblock {
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    rigthblock text p:nth-child(1) {
        font-size: 22px;
        line-height: 22px;
        color: #fff;
        text-shadow: 0 0 .25rem rgb(0 0 0 / .5);
    }
    rigthblock text p:nth-child(4) {
        font-weight: 600;
        font-size: 18px;
        line-height: normal;
    }
    advantages adv {
        justify-content: unset;
        flex-direction: row;
        gap: 2rem;
    }
    mobtop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        width: 100%;
        background: linear-gradient(90deg, #fff, #f1f1f1);
        z-index: 2;
        padding: 1rem;
        box-shadow: 0 0 2rem rgb(0 0 0 / .25);
    }
    mobtop mlogo {
        height: 64px;
    }
    mobtop mlogo a {
        display: inline-flex;
        width: 100%;
        height: 100%;
    }
    mobtop mhum, mobtop mx {
        background: #333;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        line-height: 32px;
        font-weight: 400;
        width: 52px;
        height: 52px;
        border-radius: 100%;
    }
    mobtop mx {
        background: #dd2d59;
    }
    mobmenu {
        display: flex;
        width: 100%;
        height: calc(100% - 96px);
        background: #fff;
        padding: 1rem 2rem 2rem;
        margin-top: 96px;
        position: fixed;
        top: -100%;
        z-index: 1;
        transition: top .25s;
        flex-direction: column;
        gap: 2rem;
        overflow-y: scroll;
    }
    mobmenu title {
        display: inline-flex;
        font-size: 18px;
        line-height: 18px;
        color: #f46b45;
        padding: 1rem 0;
        border-bottom: 1px solid #f46b45;
    }
    mobmenu addr, mobmenu phone {
        padding-left: 1rem;
    }

    mobmenu addr {
        font-size: 17px;
        line-height: 17px;
    }
    
    mobmenu phone a {
        font-size: 22px;
        line-height: 22px;
        color: #333;
    }
    mobmenu in {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    mobmenu in a {
        font-size: 18px;
        line-height: 18px;
        padding-left: 1rem;
        color: #333;
    }
    sm {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    mmm {
        gap: 1rem;
    }


}