#mfilter-content-container{display:flex;flex-wrap:wrap;align-items:stretch;}
#mfilter-content-container .product-layout.product-grid{display:flex;float:none;}
#mfilter-content-container .product-layout.product-grid .product-thumb{display:flex;flex-direction:column;width:100%;}
#mfilter-content-container .product-layout.product-grid .product-thumb .caption{display:flex;flex-direction:column;flex:1 1 auto;}
#mfilter-content-container .product-layout.product-grid .caption .cart-buttons{margin-top:auto;}

ul.box-subcat {
    display: flex;
    flex-wrap: wrap;
}

ul.box-subcat > li {
    float: none;
    display: flex;
}

ul.box-subcat > li .thumb {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 210px;
    padding: 0;
    overflow: hidden;
    background: #192021;
}

ul.box-subcat > li .thumb .image {
    flex: 1 1 auto;
    width: 100%;
    overflow: hidden;
}

ul.box-subcat > li .thumb .image img {
    display: block;
    width: 100%;
    height: auto;
}

ul.box-subcat > li .thumb .name {
    margin-top: auto;
    padding: 12px 10px;
    text-align: center;
}

/* Фото в товарній плитці: тема малює його 200x200 по центру квадрата,
   через що навколо були великі порожні поля. Тепер заповнює плитку. */
.product-thumb .image .lazy img {
    width: 100%;
}

/* Мобільний: скасовуємо absolute у назви підкатегорії */
@media (max-width: 767px) {
    ul.box-subcat > li {
        float: none;
        clear: both;
        width: 100%;
    }

    ul.box-subcat > li .thumb {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        min-height: 56px;
        padding: 8px 10px;
    }

    ul.box-subcat > li .thumb .image {
        flex: 0 0 30%;
        width: 30%;
        margin: 0 15px 0 0;
        border-right: 1px solid #707475;
    }

    ul.box-subcat > li .name {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }
}

ul.sf-menu > li > a::after,
ul.sf-menu > li > a.sf-with-ul::after {
    position: absolute;
    display: inline-block;
    content: "\f105";          /* FontAwesome chevron-right */
    top: 21px;
    right: -2px;
    margin-left: 3px;
    padding: 0;
    font-size: 16px;
    line-height: 15px;
    font-weight: 600;
    font-family: "FontAwesome";
    color: #f46534;            /* фірмовий оранжевий */
}

.homebuilder .col-inner > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Картка: флоат більше не потрібен — він і був причиною рваного переносу.
   flex: 0 0 auto — ширина лишається рівно такою, як задає клас col-*. */
.homebuilder .col-inner > .row > .product-layout {
  float: none;
  flex: 0 0 auto;
  display: flex;
}

/* Вміст картки — колонка на всю висоту рядка */
.homebuilder .col-inner > .row > .product-layout > .product-thumb {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Картинка однакова в усіх картках: колонки рівні за шириною, а всі
   вихідні зображення квадратні, тож і висота виходить однакова */
.homebuilder .col-inner > .row > .product-layout > .product-thumb .image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Підпис притиснутий до низу картки — назви стоять на одній лінії,
   навіть якщо картинки колись будуть різної висоти.
   margin-bottom: 0 обов'язковий: тема дає h4 margin-bottom 20px, який у
   звичайному блоці «схлопувався» назовні картки, а у flex стає видимим і
   додає 20px порожнечі під назвою (перевірено: 297px -> 317px). */
.homebuilder .col-inner > .row > .product-layout > .product-thumb > :last-child {
  margin-top: auto;
  margin-bottom: 0;
}

.homebuilder .col-inner > .row > .product-layout > .product-thumb > :last-child h4 {
  margin-bottom: 0;
}


@media (max-width: 767px) {

  /* Панель кошика: на всю ширину екрана і заввишки як екран, а не 260px */
  .cart .toggle_cont {
    position: fixed;
    top: 56px;
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    max-height: calc(100vh - 70px);
  }

  /* Блок із кнопкою «Оформлення купівлі» — завжди внизу панелі */
  .cart .toggle_cont > li:last-child {
    position: sticky;
    bottom: 0;
    background: #192021;
    border-top: 1px solid #707475;
  }
}