/* Кнопка 300x80 со строго фиксированным позиционированием текста поверх ВАШЕГО SVG-фона */
.btn-combo{
  width:300px;
  height:80px;
  border:0;
  cursor:pointer;
  
  /* фон подставит JS из data-bg-*, никаких заливок */
  background-size: contain;
  background-position: center left;
  background-repeat: no-repeat;

  position: relative;           /* для абсолютного позиционирования текста */
  background-color: transparent;
  border-radius:16px;
  padding:0;

  /* лёгкий отклик */
  will-change: transform, filter;
  transition: transform .08s ease, filter .12s ease;
}
.btn-combo:active{
  transform: translateY(1px) scale(.985);
  filter: brightness(.98) contrast(1.02);
}
.btn-combo:focus-visible{ outline:2px solid #000; outline-offset:2px; border-radius:16px }

/* Слой текста поверх фона на всю кнопку */
.btn-layer{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;     /* кликается вся кнопка */
}

/* Фиксированные позиции под ширину 300px */
.price-wrap,
.cta-wrap{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  text-align:left;
  white-space:nowrap;
  line-height:1;
}
.price-wrap{ left:18px;  width:120px; }
.cta-wrap  { left:160px; width:120px; }

/* Текстовые стили */
.btn-price{
  font-weight:800;
  font-size:20px;
  color:#151515;
}
.btn-cta{
  font-weight:900;
  font-size:16px;
  letter-spacing:.2px;
  color:#ffffff;
  margin-left: 5px;
}

/* Эффект «второго фона»: включается, когда aria-pressed="true" (меняет JS) */
.btn-combo[aria-pressed="true"]{
  transform: translateY(1px) scale(.985);
  filter: brightness(.98) contrast(1.02);
}
.btn-combo[aria-pressed="true"]::before{
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  opacity:1;
  pointer-events:none;
  z-index:2;
}
.btn-combo[aria-pressed="true"] .btn-price,
.btn-combo[aria-pressed="true"] .btn-cta{
  transform: translateY(1px);
  transition: transform .08s ease;
}

/* Уважение к системным настройкам */
@media (prefers-reduced-motion: reduce){
  .btn-combo,
  .btn-combo::before,
  .btn-combo .btn-price,
  .btn-combo .btn-cta{
    transition: none !important;
  }
}
/* --- Вписываем кнопку с левым выносом -20px, без переливов --- */
.section-button-add{
  position: relative;
  overflow: hidden;                 /* всё, что выходит за блок — обрезаем */
}

/* На десктопе: фикс 300x80, сдвиг влево на 20px */
.section-button-add .btn-combo{
  margin-left: -6px;               /* уводим влево */
}

/* На узких контейнерах (когда ширина секции < 280px) 
   переходим на адаптивную ширину, чтобы не резалось справа */
@media (max-width: 420px){
  .section-button-add .btn-combo{
    /* перекрываем фикс ширины из исходного стиля */
    width: min(300px, calc(100% + 20px));  /* вписываемся в блок + вынос */
    transform: translateX(-20px);          /* сдвиг влево */
    margin-left: 0;                         /* чтобы не суммировать с transform */
  }

  /* так как сменилась ширина, немного подвинем текстовые зоны */
  .section-button-add .btn-combo .price-wrap{ left:14px; }
  .section-button-add .btn-combo .cta-wrap  { left:154px; }
}

/* На совсем узких (когда ширина секции < 220px) 
   ужимаем внутренние отступы текста, чтобы ничего не “рвалось” */
@media (max-width: 320px){
  .section-button-add .btn-combo .btn-price{ font-size:18px; }
  .section-button-add .btn-combo .btn-cta  { font-size:16px; margin-left:4px; }
  .section-button-add .btn-combo .price-wrap{ left:12px; width:110px; }
  .section-button-add .btn-combo .cta-wrap  { left:140px; width:110px; }
}