/* ================================================================
   ROCKABI — карточка товара: кнопочный ряд + подписи под кнопками
   ----------------------------------------------------------------
   Делает по ТЗ:
   1) Кнопки в ОДНУ строку: слева «Корзина» (чёрная), справа «Избранное».
   2) У двух кнопок ОДИНАКОВАЯ ВЫСОТА и СКРУГЛЕНИЕ 5px; «Избранное» — КВАДРАТ.
   3) «Корзину» можно сделать ПОУЖЕ через --cart-w.
   4) Подписи под кнопками: левая выровнена под корзиной, правая — под избранным.
   5) Отступ между кнопками и подписями уменьшен.
   6) ФИКС мобилки: «Избранное» ровно той же высоты, что и «Корзина».
   ================================================================ */

/* ---------- БЫСТРЫЕ ПАРАМЕТРЫ (меняйте при желании) ---------- */
.js-store-product{
  --btn-h: 48px;        /* высота обеих кнопок на десктопе */
  --btn-radius: 5px;    /* скругление углов у обеих кнопок */
  --wish-w: 48px;       /* ширина квадрата «Избранное» (десктоп) */
  --cart-w: 560px;      /* желаемая ширина «Корзины» (поуже ряда); 100% — на всю ширину */
  --row-gap: 5px;      /* расстояние между кнопками */
  --under-gap: 15px;     /* расстояние от кнопочного ряда до подписей */
}
@media (max-width:640px){
  .js-store-product{
    --btn-h: 44px;
    --wish-w: 44px;
    --cart-w: 100%;     /* на мобилке корзина тянется */
    --row-gap: 5px;
    --under-gap: 15px;
  }
}

/* ---------- КНОПОЧНЫЙ РЯД (одна строка) ---------- */
.js-store-product .t-store__prod-popup__btn-wrapper{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;                 /* запрет переносов */
  gap: var(--row-gap);
  margin-bottom: var(--under-gap) !important; /* уменьшаем отступ снизу у самого ряда */
}

/* «Корзина»: чёрная, одинаковая высота/радиус, поуже через --cart-w */
.js-store-product .t-store__prod-popup__btn-wrapper > .t-store__prod-popup__btn.t-btn{
  flex: 0 1 var(--cart-w);          /* ← управляем шириной корзины */
  min-height: var(--btn-h) !important;
  height: var(--btn-h) !important;  /* для строгого равенства */
  box-sizing: border-box;
  border-radius: var(--btn-radius) !important;

  background:#000 !important;
  color:#fff !important;
  border:1px solid #000 !important;
}
/* Центровка текста внутри «табличной» разметки тильды */
.js-store-product .t-store__prod-popup__btn.t-btn table,
.js-store-product .t-store__prod-popup__btn.t-btn tr,
.js-store-product .t-store__prod-popup__btn.t-btn td{
  height:100% !important; vertical-align:middle !important;
}
.js-store-product .t-store__prod-popup__btn .js-store-prod-popup-buy-btn-txt{
  color:#fff !important;
}

/* «Избранное»: строгий КВАДРАТ справа, та же высота/радиус, чёрная обводка */
.js-store-product .t-store__prod-popup__btn-wrapper > a.t1002__addBtn{
  flex: 0 0 var(--wish-w);
  width: var(--wish-w);
  min-width: var(--wish-w);
  height: var(--btn-h) !important;
  min-height: var(--btn-h) !important;
  box-sizing: border-box;

  display:flex; align-items:center; justify-content:center;
  padding:0 !important;

  border:1px solid #000 !important;
  border-radius: var(--btn-radius) !important;
  background: transparent;
}

/* ---------- ПОДПИСИ ПОД КНОПКАМИ ---------- */
/* Расставляем по краям ряда: левая под корзиной, правая под избранным */
.js-store-product .about-afterbuy{
  display:flex;
  align-items:center;
  justify-content: space-between;   /* ← левую влево, правую вправо */
  gap: 24px;
  margin-top: 0;                    /* отступ сверху контролирует сам ряд кнопок */
  font: 14px/1.35 Arial, sans-serif;
}
/* Ссылки: чёрный текст, одна строка (на десктопе) */
.js-store-product .about-auxlink{
  display:inline-flex; align-items:center; gap:10px;
  color:#000 !important; text-decoration:none; white-space:nowrap;
}
.js-store-product .about-auxlink:hover{ text-decoration:underline; }

/* Иконки (по URL  или inline-SVG) — без кружков, только пиктограмма */
.js-store-product .about-auximg{ width:18px; height:18px; display:block; }
.js-store-product .about-auxicon{ display:inline-flex; }
.js-store-product .about-auxicon svg{
  width:18px; height:18px; display:block; stroke:currentColor; fill:none;
}

/* ---------- МОБИЛЬНЫЙ ФИКС: идеальное равенство высот ---------- */
@media (max-width:640px){
  .js-store-product .t-store__prod-popup__btn-wrapper{ align-items:stretch; }

  /* Корзина: высота строго var(--btn-h) */
  .js-store-product .t-store__prod-popup__btn.t-btn{
    height: var(--btn-h) !important;
    min-height: var(--btn-h) !important;
    box-sizing: border-box;
    border-radius: var(--btn-radius) !important;
  }
  .js-store-product .t-store__prod-popup__btn.t-btn table,
  .js-store-product .t-store__prod-popup__btn.t-btn tr,
  .js-store-product .t-store__prod-popup__btn.t-btn td{
    height:100% !important; vertical-align:middle !important;
  }

  /* Избранное: та же высота, контент по центру */
  .js-store-product .t-store__prod-popup__btn-wrapper > a.t1002__addBtn{
    height: var(--btn-h) !important;
    min-height: var(--btn-h) !important;
    box-sizing: border-box;
    padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    line-height: normal !important; /* чтобы Safari не «задирал» высоту */
    border-radius: var(--btn-radius) !important;
  }
  /* Размер иконки сердца (можно 20–24px по вкусу) */
  .js-store-product .t1002__addBtn svg{ width:22px; height:22px; display:block; }

  /* Подписи — можно переносить строки, чуть компактнее */
  .js-store-product .about-afterbuy{ gap:16px; flex-wrap:wrap; }
  .js-store-product .about-auxlink{ white-space:normal; font-size:13px; line-height:1.25; }
  .js-store-product .about-auximg,
  .js-store-product .about-auxicon svg{ width:16px; height:16px; }
}