body {
    gap: 30px;
}

.main-menu {
    display: none;
}

.page.product .price strong {
    font-size: 2.3rem;
}

.page.product .price strong.old {
    font-size: 1.3rem;
}

.search-form {
    padding: 0 15px;
}

.mb {
    display: block;
}

header .wrap {
    gap: 15px;
}


footer .mobile-cats {
    display: block;
}

footer div.mobile-cats ul,
footer div.mobile-info ul {
    display: none;
}

footer div.mobile-cats.active ul,
footer div.mobile-info.active ul {
    display: flex;
}

.mobile-info svg {
    display: inline-block;
}

.page.contacts .middle form button {
    align-self: stretch;
}

.page.contacts .left {
    grid-template-columns: repeat(1, 1fr);
}

.page.contacts .left > div:nth-child(2),
.page.contacts .left > div:nth-child(4) {
    padding: inherit;
}

.page.contacts .middle form {
    padding: 30px 15px;
}

.counter.mb {
    display: flex;
}

.page.catalog .filter-btn {
    display: block;
}

.db {
    display: none;
}

.btn {
    height: 65px;
}

.page.product .slider .main {
    overflow: hidden;
    aspect-ratio: auto;
    display: grid;
    grid-auto-flow: column;
}

.page.product .slider .main .slides {
    justify-content: flex-start;
    left: 0;
    transition: left 0.3s, right 0.3s;
    display: grid;
    grid-auto-columns: calc(100% / 1);
    grid-auto-flow: column;
}

.page.product .slider .main img {
    height: auto;
    aspect-ratio: 1 / 1;
}

.page.product .slider .main .slides.active {
    transition: left 0s, right 0s;
}

.page.product .slider .main .slides div {
    position: relative;
    opacity: 1;
    aspect-ratio: 1 / 1;
}

.page.contacts .middle {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.page.contacts .middle form .form-group-wrap {
    flex-direction: column;
}

.page.categories .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.cat-item .info {
    padding: 0 15px 15px 15px;
}

.main-slider ul {
    bottom: 15px;
    gap: 5px;
}

.main-slider button {
    width: 50px;
}

.cb.cats .container {
    display: flex;
    flex-direction: column;
}

.cb.cats .container > div,
.cb.cats .container div:nth-child(1) {
    max-height: 400px;
}

.main-slider ul li {
    height: 5px;
    width: 5px;
}

footer .wrap {
    flex-direction: column;
}

footer .wrap > div:not(:first-child) {
    border: none;
    padding: 0;
}

.page, .breadcrumbs,
.cabinet-menu {
    align-self: stretch;
    width: auto;
}

header .mm-btn {
    display: block;
}

.cb .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.cb .top > div:nth-child(2) {
    gap: 30px;
    overflow: hidden;
}

.cb .top h2 {
    font-size: 1.4rem;
}

.cb ul {
    align-self: flex-start;
    overflow: auto;
    width: 100%;
}

.cb ul::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.cb ul li {
    white-space: nowrap;
}

.page.shopcart ul li .image img {
/*    width: 20px;*/
}

.page.shopcart .count div input {
    width: 40px;
}

.page.shopcart ul li {
    gap: 15px;
}

footer .wrap div ul.social {
    margin-bottom: 30px;
}

header .logo img {
    height: 30px;
}

.shopcart-block div {
    display: none;
}

.page.signin form {
    padding: 30px 15px;
    width: auto;
    align-self: stretch;
}

.page.shopcart .middle {
    display: block;
}

.page.payment-delivery .b1 {
    flex-direction: column;
}

.page.rules .b1 .text,
.page.payment-delivery .b1 div,
.page.order .middle form,
.shopcart-info {
    padding: 30px 15px;
}

.page.order .middle > div {
    padding: 0;
}

.page.order .middle {
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

.page.my-orders .orders li {
    flex-direction: column;
    gap: 20px;
}

.page.my-orders .orders li > div:last-child {
    justify-content: space-between;
}

.page.product .b1 {
    flex-direction: column;
    padding: 30px 15px;
}

.page.product .slider .previews {
    display: none;
}

.variations button {
    padding: 10px 15px
}

.page.product .panel {
    flex-direction: column;
    align-items: stretch;
}

.page.about .b2 {
    flex-direction: column;
}

.page.catalog .middle {
    flex-direction: column;
    align-items: stretch;
}

.page.catalog .middle .filter {
    flex: auto;
    width: auto;
    z-index: 9999999999;
}

.filter {
    position: fixed;
    z-index: 2;
    background-color: var(--color-6);
    top: 0;
    left: 0;
    right: 0;
    height: calc(100svh - 30px);
    padding: 15px;
    overflow: scroll;
    display: none;
}

.filter.active {
    display: flex;
}

.filter .close-filter {
    display: block;
}

.page.catalog .middle .items {
    flex: auto;
}

.cb .top {
    flex-direction: column;
    gap: 20px;
}

.page.catalog .middle .items .container,
.page.catalog.search .middle .items .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.item .info {
    padding: 15px;
}

.page.catalog .top {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}

.page.catalog .middle .filter {
    max-width: none;
}

.page.user .info {
    flex-direction: column;
    align-items: stretch;
}

.page.user .info .data ul {
    flex-direction: column;
}

.page.user .adreses li > div {
    gap: 15px;
    justify-content: space-between;
    align-items: flex-start;
}

.page.user .adreses li {
    flex-direction: column;
    gap: 15px;
}

.page.user .adreses li .buttons {
    align-self: flex-end;
}

.btn.v5 {
    padding: 0 15px;
    height: 30px;
    font-size: 0.7rem;
}

.page.user .info .buttons {
    flex-direction: column;
}

.count div input {
    width: auto;
    flex: 1;
    height: 40px;
}

.main-slider {
    height: 200px;
    width: auto;
}

.page.contacts .left > div:nth-child(2n+1) {
    border: none;
}

.page.contacts .left > div:nth-child(2n+1):not(:first-child) {
    border: none;
}

.page.contacts .left > div:nth-child(2), .page.contacts .left > div:nth-child(4) {
    border: none;
}
