/* ===================================================================
   ROCKABI — карточка товара (финальная версия с комментариями)
   -------------------------------------------------------------------
   Что сделано:
   1) Две кнопки ("в корзину" и "вишлист") стоят в один ряд, одинаковой ширины.
   2) "Вишлист" — обычная кнопка с чёрной обводкой, БЕЗ скругления/теней.
   3) В карточке — шрифт Arial; у обеих кнопок одинаковая типографика.
   4) Select "Размер" имеет родную высоту, но стрелка центрирована по вертикали.
   5) "Отложить в бутике" — размер как у текста ниже и меньший отступ от кнопок.
   -------------------------------------------------------------------
   Куда смотреть, чтобы быстро поменять настройки:
   • --btn-height ........... общая высота обеих кнопок (и минимальная)
   • --btn-font-size ........ размер шрифта на кнопках
   • --font-family .......... шрифт карточки целиком
   • --gap-under-buttons .... отступ под блоком кнопок
   • --select-min-height .... минимальная высота селекта "Размер"
   -------------------------------------------------------------------
   Важно: всё ограничено селектором .js-store-product
   =================================================================== */

.js-store-product {
  /* === БЫСТРЫЕ «РЫЧАГИ» ДЛЯ НАСТРОЙКИ (меняйте при желании) === */
  --font-family: Arial, Arial, sans-serif;
  --btn-height: 46px;
  --btn-font-size: 14px;
  --btn-font-weight: 400;
  --btn-letter-spacing: .02em;
  --gap-under-buttons: 6px;
  --select-min-height: 40px;

  /* Общий шрифт для всей карточки */
  font-family: var(--font-family) !important;
}

/* ---------------------------------------------------------------
   Кнопочный ряд (корзина + вишлист): один ряд, одинаковая ширина
   --------------------------------------------------------------- */
.js-store-product .t-store__prod-popup__btn-wrapper {
  display: flex;
  align-items: stretch;
  gap: 0; /* Между кнопками нет зазора по макету */
}

/* Иногда Тильда подмешивает поле количества — оно нам не нужно */
.js-store-product .t-store__prod-popup__btn-wrapper .t-store__prod-popup__quantity,
.js-store-product .t-store__prod-popup__btn-wrapper .js-store-prod-quantity,
.js-store-product .t-store__prod-popup__btn-wrapper .t-store__prod-popup__quantity-wrap {
  display: none !important;
}

/* Растягиваем ТОЛЬКО две целевые кнопки на равные доли */
.js-store-product .t-store__prod-popup__btn-wrapper > .t-store__prod-popup__btn.t-btn,
.js-store-product .t-store__prod-popup__btn-wrapper > .about-fav-btn {
  flex: 1 1 0;                /* одинаковая ширина */
  min-height: var(--btn-height);
  margin: 0 !important;
  box-sizing: border-box;
}

/* Единая типографика для обеих кнопок (чтобы не отличались) */
.js-store-product .t-store__prod-popup__btn.t-btn,
.js-store-product .about-fav-btn {
  font-family: var(--font-family) !important;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  line-height: 1;
}

/* ---------------------------------------------------------------
   Кнопка "Добавить в корзину"
   --------------------------------------------------------------- */
.js-store-product .t-store__prod-popup__btn.t-btn {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important; /* Квадратные углы */
}

/* Текст внутри корзины — Тильда рендерит его в  */
.js-store-product .t-store__prod-popup__btn .js-store-prod-popup-buy-btn-txt {
  color: #fff !important;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

/* ---------------------------------------------------------------
   Кнопка "Вишлист" (превращаем ссылку в кнопку)
   --------------------------------------------------------------- */
/* Сбрасываем наследия у исходной ссылки */
.js-store-product a.t1002__addBtn {
  color: initial !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Скин самой кнопки "вишлист" */
.js-store-product .about-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  background: #fff;
  color: #000 !important;
  white-space: nowrap;                 /* НЕ переносить текст по словам */
  border: 1px solid #000 !important;   /* Чёрная обводка 1px */
  border-radius: 0 !important;         /* Без скругления */
  box-shadow: none !important;         /* Без теней */
  background-clip: padding-box !important;
}

/* Активное состояние — чёрная кнопка */
.js-store-product .about-fav-btn.about-active {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* Если от старой темы вдруг останется SVG-сердечко — скрываем */
.js-store-product .about-fav-btn svg { display: none !important; }

/* Дублируем бордер для всех состояний ссылки, чтобы ничто не перебило */
.js-store-product .t-store__prod-popup__btn-wrapper > a.about-fav-btn,
.js-store-product .t-store__prod-popup__btn-wrapper > a.about-fav-btn:link,
.js-store-product .t-store__prod-popup__btn-wrapper > a.about-fav-btn:visited,
.js-store-product .t-store__prod-popup__btn-wrapper > a.about-fav-btn:hover,
.js-store-product .t-store__prod-popup__btn-wrapper > a.about-fav-btn:focus,
.js-store-product .t-store__prod-popup__btn-wrapper > a.about-fav-btn:active {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* ---------------------------------------------------------------
   Ссылка "Отложить в бутике"
   --------------------------------------------------------------- */
.js-store-product .about-order-butik {
  display: inline-block;
  margin-top: var(--gap-under-buttons) !important; /* Управление зазором */
  font-family: var(--font-family) !important;
  font-size: 14px;          /* Такой же размер, как у текста ниже */
  line-height: 1.35;
  color: #000 !important;
  text-decoration: underline !important;
}

/* ---------------------------------------------------------------
   Select "Размер": родная высота + стрелка по вертикальному центру
   --------------------------------------------------------------- */
.js-store-product .t-product__option-select {
  font-family: var(--font-family) !important;
  background: transparent !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  color: #000 !important;

  height: 36px !important;                 /* Родная высота */
  min-height: var(--select-min-height);    /* Минимум, чтобы не «схлопнулся» */
  padding: 10px 36px 10px 12px !important; /* Справа — место под стрелку */
  line-height: 1.2;