/* Контейнер блока */
.mp-cats { background: #f7f7f7; }

/* Шапка с треугольниками */
.mp-cats__head {
    background: #fff;
    border: 1px solid #e6e6e6;
    overflow: hidden;
    position: relative;
    min-height: 110px;
}
.mp-cats__triangle { position:absolute; width:0; height:0; }
.mp-cats__triangle--orange {
    left:0; top:0;
    border-top: 70px solid #f15a24;   /* оранжевый */
    border-right: 120px solid transparent;
}
.mp-cats__triangle--green {
    left:100px; top: 70px;
    border-bottom: 70px solid #7abf6f; /* зелёный */
    border-left:   120px solid transparent;
}
.mp-cats__badge {
    display:inline-block;
    background:#ff6f31;
    color:#fff;
    padding:2px 8px;
    border-radius:4px;
    letter-spacing:.03em;
}
.mp-cats__title { margin-top: .25rem; }
.mp-cats__subtitle { color:#666; line-height:1.4; }

/* Сетка элементов */
.mp-cats__grid { background:#fff; border-left:1px solid #eee; border-right:1px solid #eee; }
.mp-cats__item {
    background:#fff;
    height: 160px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 12px 10px 10px;
    color:#222;
    transition: background .15s ease, box-shadow .15s ease;
    position: relative;
}
@media (min-width:1200px){
    .mp-cats__item{ height: 190px; }
}
.mp-cats__item:hover { background:#fcfcfc; box-shadow: inset 0 0 0 1px #e8e8e8; }

.mp-cats__item-badge {
    position:absolute;
    left:8px; top:8px;
    background:#ff7f27;
    color:#fff;
    font-size:10px;
    line-height:1;
    padding:3px 6px;
    border-radius:3px;
    text-transform:uppercase;
}

/* Превью */
.mp-cats__thumb {
    width:100%;
    height: 95px;
    margin-bottom: 6px;
}
.mp-cats__thumb img {
    max-height: 90px;
    object-fit: contain;
}
.mp-cats__thumb-ph {
    width:72px; height:72px;
    background:#eaeaea; border-radius:8px;
}

/* Название */
.mp-cats__name {
    font-size: 15px;
    line-height: 1.2;
    color:#3a3a3a;
}

/* Нижняя полоса с информацией */
.mp-cats__info {
    background:#f7f7f7;
    border:1px solid #e6e6e6;
    border-top:none;
    padding: 10px 14px;
}
.mp-cats__info-badge{
    display:inline-block;
    background:#9bd19b;
    color:#fff;
    font-size:12px;
    line-height:1;
    padding:4px 8px;
    border-radius:4px;
    text-transform:uppercase;
}

/* Убираем двойные вертикальные границы по краям ряда */
.mp-cats__grid .row > [class*="col-"]:nth-child(6n+1) .mp-cats__item { border-left: 1px solid #eee; }
