/* Полоса, всплывающая при прокрутке карточки: к названию и цене добавлены
   чипы цвета и кнопка расчёта. Полоса узкая (96 px), поэтому всё компактное. */
.mp-panel-colors{ display:inline-flex; flex-wrap:wrap; gap:6px; margin-right:14px; vertical-align:middle; }
.mp-panel-color{
  appearance:none; cursor:pointer; font:inherit; font-size:13px; line-height:1;
  padding:7px 11px; border-radius:999px;
  background:rgba(255,255,255,.08); color:#E9E6E2;
  border:1px solid rgba(255,255,255,.22);
}
.mp-panel-color:hover{ background:rgba(255,255,255,.16); }
.mp-panel-color.is-on{ background:rgba(16,104,85,.35); border-color:#2E8F74; color:#FFFFFF; }
.mp-panel-calc{
  appearance:none; cursor:pointer; font:inherit; font-size:14px; font-weight:600; line-height:1;
  padding:11px 18px; border-radius:999px; border:0;
  background:#106855; color:#FFFFFF; margin-left:12px; white-space:nowrap;
}
.mp-panel-calc:hover{ background:#0C5241; }
@media (max-width:1000px){
  .mp-panel-colors{ display:none; }   /* на телефоне полоса и так тесная */
}

/* Раскладываем полосу в одну строку: чипы — цена — кнопка.
   Без этого тема ставит их друг под друга и полоса вырастает вдвое. */
.catalog-element-panel .catalog-element-panel-block-action{
  display:flex !important;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
}
.catalog-element-panel .mp-panel-colors{ flex-wrap:nowrap; margin-right:0; }
.catalog-element-panel .mp-panel-calc{ margin-left:0; }
@media (max-width:1200px){
  .catalog-element-panel .mp-panel-colors{ display:none; }
}