
/* блок с блюдом */
.dish { padding: 23px 22px 28px 16px; position: relative; border-bottom: 1px solid #e7e7e7; min-height: 130px; }
/* убираем нижний бордер у последнего блюда */
.dish:last-child { border-bottom: none; }
/* левый паддинг у блюда с фотографией */
.dish--with-photo { padding-left: 142px; }
/* верхний отступ у первого сопутствующего блюда для заголовка */
.dish--related-title { margin-top: 42px; }
/* тескт заголовка сопутствующих блюд */
.dish--related-title:before { content: attr(data-related); font: 700 21px/20px geometria, arial; position: absolute; top: -21px; left: 17px; right: 22px; }
/* стрелка у заголовка сопутствующих блюд */
.dish--related-title:after { content: ""; position: absolute; width: 30px; height: 34px; background: url(i/related_arrow.svg) no-repeat 50%; top: -9px; margin: 0 0 0 96px; }

/* блок с фото */
.dish__photos { position: absolute; left: 16px; top: 25px; bottom: 28px; width: 110px; }
.dish__photo { max-width: 100%; max-height: 100%; position: absolute; right: 0; top: 0; bottom: 0; left: 0; margin: 0 auto; border-radius: 8px; }

@supports (object-fit: cover) {
    .dish__photo { width: 100%; height: 100px; object-fit: cover; }
}

/* стоимость */
.dish__price { display: inline-block; vertical-align: middle; font: 600 15px/30px geometria, arial; margin: 0 0 0 8px; }
.dish__discount { color: #01bf5c; margin: 0 0 0 5px; font-size: 12px; }

.dish__warn { color: #ff523d; display: inline-block; font: 13px/13px geometria; margin: -5px 0 13px 0;  }

/* убираем количество в удалённом блюде и сопутствующих блюдах */
.dish--deleted .dish__num { display: none; }
.dish--related .dish__num { display: none; }

/* контролы */
.dish__controls { font: 0/0 a; }
.dish__control { width: 30px; height: 30px; border-radius: 8px; background-color: #fff; border: 2px solid; cursor: pointer; display: inline-block; vertical-align: middle; }
.dish__control--minus { border-color: #FF5353; background: url(i/minus.svg) no-repeat 50%; }
.dish__control--plus { border-color: #01bf5c; background: url(i/plus.svg) no-repeat 50%; }
.dish--deleted .dish__control--minus { display: none; }
.dish--related .dish__control--minus { display: none; }

.dish__num { font: 600 15px/30px geometria, arial; display: inline-block; vertical-align: middle; margin: 0 8px; }


/* название блюда */
.dish__name { font: 600 17px/19px geometria, arial; margin: 0 0 8px 0; }
.dish__name > em { font: 400 14px/14px geometria; color: #999; display: block; margin: 3px 0 0 0; }

.dish__badge { background-color: #f00; text-transform: uppercase; font: 700 9px/14px geometria, arial; padding: 0 5px; color: #fff; border-radius: 2px; display: inline-block; vertical-align: middle; }
.dish__badge--gift { background-color: #a8d17d; }


/* название блюда, если оно удалено */
.dish--deleted .dish__name { color: rgba(0, 0, 0, .5); text-decoration: line-through; }

/* ингредиенты */
.dish__ingredients { font: 400 13px/15px geometria, arial; color: rgba(0, 0, 0, .5); margin: 0 0 13px 0; }
.dish--deleted .dish__ingredients { display: none; }

.dish--extra .dish__num,
.dish--extra .dish__control--minus { display: none; }