/* Кнопка избранного по визуальному референсу Placeit. */
.favorite-tile { position: relative; isolation: isolate; }
.favorite-button {
  --favorite-color: #e53950; /* Цвет шаблона: можно заменить на фирменный. */
  position: absolute; top: 16px; right: 14px; z-index: 3;
  display: grid; place-items: center; width: 24px; height: 24px;
  padding: 0; border: 0; background: transparent; color: #fff;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* Расширенная невидимая область нажатия 44×44, видимая иконка остаётся 24×24. */
.favorite-button::before { content: ''; position: absolute; inset: -10px; }
.favorite-button svg {
  display: block; width: 24px; height: 24px; fill: currentColor;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.3));
  transition: transform 150ms cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.favorite-button[aria-pressed="true"] { color: var(--favorite-color); }
@media (hover: hover) {
  .favorite-button:hover { color: var(--favorite-color); }
  .favorite-button:hover svg { transform: scale(1.25); }
}
.favorite-button:focus-visible { outline: 2px solid #fff; outline-offset: 8px; border-radius: 3px; }
.favorite-button:focus-visible svg, .favorite-button:active svg { transform: scale(1.5); }
/* На широком экране скрываем до наведения; на сенсорном оставляем видимой. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .favorite-button { opacity: 0; pointer-events: none; }
  .favorite-tile:hover .favorite-button,
  .favorite-tile:has(:focus-visible) .favorite-button,
  .favorite-button[aria-pressed="true"] { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .favorite-button svg { transition: none; } }

/* Плавный наезд изображения внутри неподвижной рамки плитки. */
.tile-media { position: relative; overflow: hidden; border-radius: 8px; }
.tile-visual {
  display: block; width: 100%; transform: scale(1); transform-origin: center;
  transition: transform 550ms cubic-bezier(.2,.65,.3,1);
}
img.tile-visual { height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .favorite-tile:hover .tile-visual { transform: scale(1.15); }
}
.favorite-tile:has(:focus-visible) .tile-visual { transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
  .tile-visual { transition: none; }
  
}