/* Планшетні стилі */
@media (max-width: 1024px) {

    html {
        font-size: clamp(18px, 1.25vw, 18px);
        overflow-x: hidden;
      }

    /* Блокування прокрутки при відкритому меню */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        /* Компенсація для полоси прокрутки буде додана через JavaScript */
    }

    .top-colom-my .top-colom-my-1 {
        display: none;
    }

    #column-left {
        display: none !important;
      }

      .col-sm-9 {
        width: 100% !important;
    }
    
    .top-colom-my-2, 
    .top-colom-my-3, 
    .top-colom-my-4 {
        text-align: center;
    }

    .my-top-banner {
        flex-direction: column;
    }

    .my-top-banner-left,
    .my-top-banner-rigth {
        width: 100%;
    }

    .my-top-banner-rigth {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .button-group .hidden-xs {
        display: inline !important;
    }

    .my-top-banner-rigth-top,
    .my-top-banner-rigth-bottom {
        width: 50%;
    }

    .my-top-banner-rigth-bottom {
        margin: 0;
    }

    .faq-container { 
        flex-direction: column; 
    }
    
    .faq-column { 
        width: 100%; 
    }

    .product-thumb .button-group button, 
    .product-thumb .button-group button + button {
        width: 33.33%;
    }

    .product-grid .product-thumb .caption {
        min-height: 210px;
        padding: 0 10px;
    }

    /* header */
    #top {
       margin: 0;
    }
    header {
        padding: 0;
    }
    #menu .navbar-header {
        display: block;
    }

    .header-desktop {
        display: none;
      }
      .header-mobile {
        display: block;
      }

      #menu .navbar-toggle {
        display: block;
        background: url(../image/List.svg);
        width: 40px;
        height: 40px;
    }

    #menu .navbar-collapse {
        position: fixed;
        top: 130px;
        left: 0;
        width: 100%;
        height: 100vh !important;
        background: #ffffff !important;
        padding: 80px 20px 20px 20px;
        transition: none;
        -webkit-transition: none;
        z-index: 1000;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        overflow-y: auto;
        box-shadow: none;
        /* Запобігаємо закриття при кліку */
        pointer-events: auto;
    }

    #menu .navbar-collapse.in {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    ul.nav.navbar-nav .dropdown-menu {
        position: relative !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        margin-left: 0 !important;
        float: none !important;
        min-width: 200px;
    }
    
    ul.nav.navbar-nav .dropdown-menu.dropdown-menu-right {
        left: auto !important;
        right: 0 !important;
    }
    
    ul.nav.navbar-nav .navbar-nav .dropdown {
        position: relative;
    }
    
    ul.nav.navbar-nav .navbar-nav .dropdown-menu {
        margin-top: 0;
        border-radius: 0 0 4px 4px;
    }

    /* Кнопка закриття меню */
    #menu .navbar-collapse .close-menu-btn {
        position: absolute;
        top: -50px;
        right: 20px;
        width: 44px;
        height: 44px;
        background: #ffffff;
        color: #000;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        font-weight: normal;
        cursor: pointer;
        z-index: 1001;
        border: none;
        outline: none;
        transition: background-color 0.3s ease;
        box-shadow: none;
    }

    #menu .navbar-collapse .close-menu-btn:hover {
        background: #fff;
        transform: scale(1.05);
    }

    #menu .navbar-collapse .close-menu-btn:active {
        transform: scale(0.95);
    }

    #menu .nav {
        float: none;
        margin: 0;
    }

    #menu .nav > li {
        float: none;
        margin: 0;
        border-bottom: 1px solid #eee;
    }

    #menu .nav > li > a {
        padding: 15px 0;
        border-bottom: none;
        font-size: 18px;
        font-weight: 600;
        color: #000;
    }

    #menu .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
        padding-left: 20px;
    }

    #menu .dropdown-menu > li > a {
        padding: 10px 0;
        color: #333;
        font-size: 16px;
    }

    .fa-navicon:before, .fa-reorder:before, .fa-bars:before {
        content: "";
    }
    /* Кінець Header */
    span.table-noclick.hidden-xs.hidden-sm.hidden-md {
        display: none !important;
    }
    
    span.table-click.hidden-xs.hidden-sm.hidden-md {
       display: inline; 
    }

    /* .navbar-collapse.navbar-ex1-collapse.in.collapse .header-mobile .my-col-sm-3-my-wishlist, .navbar-collapse.navbar-ex1-collapse.in.collapse  .header-mobile .my-col-sm-3-my-compare{
        display: block !important;
    } */

    /* Додаємо затемнення фону при відкритому меню */
    #menu .navbar-collapse.in::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff(0,0,0,0.5);
        z-index: -1;
    }
    
    .home-abaut-us-malanka-body {
        flex-direction: column;
        align-items: center;
    }

    .home-abaut-us-malanka-left-top,
    .home-abaut-us-malanka-left-bottom {
        /* flex-direction: column; */
        gap: 10px;
        align-items: center;
    }

    .home-abaut-us-malanka-left-top-left,
    .home-abaut-us-malanka-left-bottom-right,
    .home-abaut-us-malanka-left-top-right,
    .home-abaut-us-malanka-left-bottom-left {
        /* width: 100%;
        max-width: 90%; */
    }

    .home-abaut-us-malanka-right, .home-abaut-us-malanka-left {
        width: 100%;
        /* max-width: 90%; */
        position: static;
        margin-top: 20px;
    }

    .home-abaut-us-malanka-right-1,
    .home-abaut-us-malanka-right-2,
    .home-abaut-us-malanka-right-3,
    .home-abaut-us-malanka-right-4 {
        position: static;
        
        margin-bottom: 15px;
    }
    .home-abaut-us-malanka-right-1 {
        width: 404px;
        justify-content: left;
		padding: 0;
        margin: 0 0 0 24px;}
		
		.home-abaut-us-malanka-right-2 {
            width: 404px;
		justify-content: left;
		padding: 0;
		
		margin: 0 0 0 124px;
		}
		
		.home-abaut-us-malanka-right-3 {
            width: 404px;
            justify-content: left;
            padding: 0;
		
		margin: 0 0 0 224px;
		}
		
		.home-abaut-us-malanka-right-4 {
            width: 404px;
	
		justify-content: left;
		padding: 0;
		
		margin: 0 0 0 334px;
		}
        .faq-answer {
            display: none;
            padding: 20px 0 0px;
            line-height: 140%;
        }
    /* Верх */
    .top-colom-my-2 {
        text-align: left;
    }
    
    .top-colom-my-4 {
        text-align: right;
    }
    /* Кынець верх */

    /* Стилі для соціальних мереж на планшетах */
    .my-contacts-malanka-left-3 {
        gap: 30px;
        justify-content: center;
        padding: 20px;
    }

    .my-contacts-malanka-left-3 > div {
        /* height: 52px;
        width: 52px; */
    }
    .bm .col-sm-6 {
        width:  100% !important;
    }
    /* карточка товара */
    .malanka-col-sm-8{
        width: 100%;
        order: 2;
    }
    .malanka-col-sm-4{
        width: 100%;
        order: 1;
    }
    .malanka-product-desc{
        width: 100%;
        order: 3;
        max-width: calc(100%);
    }
    /* кінець карточка товара */
    /* Головний банер */
    .my-top-banner {
        flex-direction: column;
    }

    .my-top-banner-left {
        width: 100%;
        height: 432px;
    }

    .my-top-banner-rigth {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
    }

    .my-top-banner-rigth-top,
    .my-top-banner-rigth-bottom {
        width: calc(50% - 5px); /* Відступ на gap */
        margin: 0;
    }
    .hero-image {
        position: absolute;
        width: 439px;
        height: 378px;
        right: 0;
        bottom: 0;
        background-image: url(../image/potato-sack-isolated.png);
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .hero-block {
        flex-direction: column;
        /* text-align: center; */
      }
    
      .cta-wrapper {
        /* position: static; */
        clip-path: none;
        border-radius: 1rem;
        margin-top: 1rem;
      }
      .tag-s {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 8px 16px;
        gap: 8px;
        position: absolute;
        /* width: 157px; */
        height: 38px;
        right: 230px;
        top: 235px;
        background: #FFFFFF;
        border-radius: 16px;
        color: #000;
    }
    .tag-p {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 8px 16px;
        gap: 8px;
        position: absolute;
        /* width: 124px; */
        height: 38px;
        right: 310px;
        top: 322px;
        background: #FFFFFF;
        border-radius: 16px;
        color: #000;
    }
    .tag-r {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 8px 16px;
        gap: 8px;
        position: absolute;
        /* width: 132px; */
        height: 38px;
        right: 100px;
        top: 105px;
        background: #FFFFFF;
        border-radius: 16px;
        color: #000;
    }
    .hero-content p {
        position: absolute;
        width: 483px;
        height: 66px;
        left: 32px;
        top: 150px;
        font-family: 'Gilroy';
        font-style: normal;
        font-weight: 400;
        font-size: 1rem;
        line-height: 140%;
        color: #FFFFFF;
    }
    .hero-content h1 {
        position: absolute;
        width: 733px;
        height: 126px;
        left: 32px;
        top: 0px;
        font-family: 'Gilroy';
        font-style: normal;
        font-weight: 700;
        font-size: 2.65rem;
        line-height: 60px;
        color: #FFFFFF;
    }
    
    /* Кынець головний банер */

    /* Tik Tok */
    .faq-container.tiktok {
        width: 100%;
        margin: 50px auto;
        padding: 50px;
    }
    .faq-container-tiktok {
        width: 100%;
        margin-left: 0;
        position: relative;
        background: #D2F898;
        border-radius: 56px;
        padding: 0.2vw 0;
    }
    .faq-column-left, .faq-column-right  {
        display: flex    ;
        /* flex-direction: unset; */
        /* align-items: center; */
        padding: 0px;
        gap: 22px;
        justify-content: center;
        flex-wrap: wrap;
    }
    /* And Tik Tok */
    /* Зв'зок */
    .my-contacts-malanka-top {
        display: flex;
        gap: 23px;
        margin-top: 60px;
        flex-direction: column;
    }
    .my-contacts-malanka-left, .bordered_content.padded {
        width: 100%;
    }
    .my-contacts-malanka-top .btn-primary{
        width: 100%;
    }
    /* Кінець зв'язок */
    /* Footer */
    footer {
        padding: 0 10px 50px;
    }
    .my-footer-malanka {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 20px;
      }
    
      .my-footer-malanka-1, .my-footer-malanka-4 {
        /* width: 100%; */
      }
    
      .my-footer-malanka-2, .my-footer-malanka-3 {
        width: calc(50% - 10px);
        margin-right: 20px;
      }
    
      .my-footer-malanka-3 {
        margin-right: 0;
      }
      .my-footer-malanka-1 { order: 0; }
.my-footer-malanka-4 { order: 1; margin-left: auto; }
.my-footer-malanka-2 { order: 2; }
.my-footer-malanka-3 { order: 3; }
footer .my-footer-malanka .my-footer-malanka-1 {
    width: 100%;
}
footer .my-footer-malanka .my-footer-malanka-4{
    display: none;
}
.my-footer-malanka-left-left {
    display: flex
;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;
    width: 50%;
}
.my-footer-malanka-left-right {
    display: flex
;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;
    /* width: 233px; */
    /* height: 119px; */
    flex: none;
    order: 1;
    flex-grow: 0;
    margin-left: auto;
}
.my-footer-malanka-left {
    width: 100%;
}
.my-footer-malanka-right {
    width: 100%;
}
.my-footer-malanka-right ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
  }

    /* End footer */

    /* Стилі для показу wishlist і compare при відкритому меню на планшетах */
    /* Тільки ті, що всередині navbar-collapse */
    #menu .navbar-collapse.in .my-col-sm-3-my-wishlist,
    #menu .navbar-collapse.in .my-col-sm-3-my-compare {
        display: none !important;
    }

    /* Приховуємо wishlist і compare в звичайному стані на планшетах */
    /* Тільки ті, що всередині navbar-collapse */
    #menu .navbar-collapse .my-col-sm-3-my-wishlist,
    #menu .navbar-collapse .my-col-sm-3-my-compare {
        display: none;
    }

    /* Показуємо wishlist і compare в container-mobile-right при відкритому меню на планшетах */
    body.menu-open .header-mobile .container-mobile-right .my-col-sm-3-my-wishlist,
    body.menu-open .header-mobile .container-mobile-right .my-col-sm-3-my-compare {
        display: block !important;
    }

    /* Запобігаємо закриття при кліку на вміст меню */
    #menu .navbar-collapse * {
        pointer-events: auto;
    }
}

/* Сторінка корзини */
div#cart-items {
    display: flex;
    gap: 20px;
    margin: 0 0 50px;
    flex-direction: column;
}

.cart-items-left {
    /* display: flex; */
    width: 100%;
}

.cart-items-right {
    width: 100%;
    background: #F0F2EF;
    border-radius: 24px;
    padding: 20px;
    margin: 46px 0 0;
}
/* кінец */
/* сторінка інформації */
.heading.bm-post-info.clearfix {
    flex-direction: column;
}
.heading.bm-post-info.clearfix-left img {
    width: 100% !important;
}
/* кінець сторінки інформації */
/* сторінка категорій */
.row.malanka-category-filter {
    flex-direction: column-reverse;
}
.list-group.malanka-category-list {
    display: flex
;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    /* padding: 10px; */
}
/* кінець сторінки категорій */
/* .header-mobile .navbar-collapse .my-col-sm-3-my-wishlist, .header-mobile .navbar-collapse .my-col-sm-3-my-compare {
    display: block;
} */