/* Мелкие блоки UI-кита Figma, общие для нескольких секций и страниц.
   Под MODX — один чанк со стилями кита. Позиции задают блоки-потребители. */

/* Кнопка-стрелка «arrow banner light» (611:1937): круг 56, белый @80% + blur 5,
   иконка Alt Arrow Right 32×32 на 12/12. Направление задаёт потребитель:
   rotate(180deg) — влево, rotate(90deg) — вниз. */
.arrow-light {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: var(--r-round);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  overflow: hidden;
}

.arrow-light img {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
}

/* Кнопка-стрелка «arrow banner» (611:1929): круг 56, rgba(255,255,255,0.1) + blur 5.
   Живёт поверх фото, поэтому фон полупрозрачный белый, а не сплошной. */
.arrow-dark {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: var(--r-round);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.arrow-dark img {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
}

/* hov (611:1932): фон вдвое плотнее; cl (611:1934): он же с opacity .5 */
.arrow-dark:hover,
.arrow-dark:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.arrow-dark:active {
  background: rgba(255, 255, 255, 0.2);
  opacity: 0.5;
}

.arrow-light {
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Светлая стрелка (611:1936) живёт на белом фоне: наведение делает её плотнее. */
.arrow-light:hover,
.arrow-light:focus-visible {
  background: var(--white);
}

.arrow-light:active {
  opacity: 0.5;
}

.arrow-dark[disabled],
.arrow-light[disabled] {
  opacity: 0.3;
  cursor: default;
}

/* «Heart card» (611:1818): круг 40 с рамкой rgba(0,0,0,0.03),
   иконка сердца 24×24 по центру, top 7. */
.heart-card {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1px solid var(--black-03);
  border-radius: var(--r-round);
  overflow: hidden;
}

.heart-card img {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
}

/* Кликабельность и активное состояние «в избранном» */
.heart-card {
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.heart-card.heart-card.is-liked {
  border-color: var(--brand-20);
  background: var(--brand-05);
}

/* Иконка контурная (fill: none, форма задана обводкой), поэтому активный цвет даём
   альфа-маской, как у логотипа подвала: цвет точный, без подбора filter и без
   второго ассета. Сам <img> при этом прячем, маску несёт родитель. */
.heart-card.heart-card.is-liked img {
  visibility: hidden;
}

.heart-card.heart-card.is-liked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 24px;
  height: 24px;
  background: var(--brand);
  -webkit-mask: url("../assets/icons/heart-card.svg") no-repeat center / 24px 24px;
  mask: url("../assets/icons/heart-card.svg") no-repeat center / 24px 24px;
  transform: translateX(-50%);
}

/* hov (611:1820): рамка и иконка перекрашиваются в brand */
.heart-card:hover,
.heart-card:focus-visible {
  border-color: var(--brand-20);
  background: var(--brand-08);
}

.heart-card:active {
  opacity: 0.5;
}

/* Табы каталога «tags button» (611:1830): hov даёт фон rgba(48,86,132,0.2),
   cl — он же с opacity .5. Активный таб задаёт секция каталога. */
.tab {
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.tab:not(.tab--active):hover,
.tab:not(.tab--active):focus-visible {
  background: var(--brand-20);
}

.tab:active {
  opacity: 0.5;
}

/* Кнопка баннера «banner button» (611:1919): def белая с brand-текстом,
   hov инвертируется в brand с белым текстом, включая иконку стрелки. */
.btn-basket {
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.btn-basket:hover,
.btn-basket:focus-visible {
  background: var(--brand);
  color: var(--white);
}

/* Стрелка в кнопке — контурный SVG, поэтому в инверсии перекрашиваем маской. */
.btn-basket:hover img,
.btn-basket:focus-visible img {
  filter: brightness(0) invert(1);
}

.btn-basket:active {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .arrow-dark,
  .arrow-light,
  .heart-card,
  .tab,
  .btn-basket {
    transition: none;
  }
}