/* Карточка-перевёртыш: лицо - фото и имя, оборот - подробности */
.flip {
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-card);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: pan-y;
}
.flip.is-dragging { cursor: grabbing; }
.flip__shadow {
  position: absolute; inset: 12% 9% -5%; border-radius: var(--r-card); pointer-events: none;
  background: rgba(0, 0, 0, .55); filter: blur(22px);
}
.flip__rotor { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.flip__face {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-card);
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column;
}
.flip__face img { -webkit-user-drag: none; }
.flip__face--back { transform: rotateY(180deg); background: linear-gradient(180deg, var(--color-surface-elevated), var(--color-surface)); padding: 22px 22px 20px; gap: 12px; }
.flip__glare {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--fc-sheen, 0);
  background: radial-gradient(circle farthest-side at var(--fc-gx, 50%) var(--fc-gy, 50%),
    rgba(var(--text-rgb), .2) 0%, rgba(var(--text-rgb), .15) 12%, rgba(var(--text-rgb), .1) 26%,
    rgba(var(--text-rgb), .055) 42%, rgba(var(--text-rgb), .024) 60%, rgba(var(--text-rgb), 0) 100%);
}

/* лицо */
.flip .prod__img { flex: 0 0 auto; margin: 0; }
.flip__front-body { display: grid; gap: 6px; padding: 16px 20px 0; flex: 1; align-content: start; }
.flip__hint {
  margin: auto 16px 16px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--r); background: transparent;
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); cursor: pointer;
}
.flip__hint::before { /* значок поворота */
  content: ""; width: 12px; height: 12px; border: 1.5px solid currentColor; border-left-color: transparent; border-radius: 50%;
}
@media (hover: hover) { .flip:hover .flip__hint { color: var(--color-text); border-color: var(--color-text-muted); } }

/* оборот */
.flip__title { font-size: 19px; font-weight: 700; line-height: 1.2; }
.flip__desc { font-size: 14.5px; line-height: 1.5; color: var(--color-text-muted); }
.flip__spec { font-family: var(--ff-mono); font-size: 12.5px; border-top: 1px solid var(--color-border); }
.flip__spec div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-border); }
.flip__spec dt { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; padding-top: 1px; }
.flip__act { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.flip__act .btn { min-height: 44px; padding: 0 18px; font-size: 12.5px; }
.flip__back-btn { appearance: none; border: 0; background: none; color: var(--color-text-muted); font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; padding: 8px 0; }
@media (hover: hover) { .flip__back-btn:hover { color: var(--color-text); } }

/* меньше движения: без поворота, смена граней прозрачностью */
.flip.is-fade .flip__face { transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .2s ease; }
.flip.is-fade .flip__face--back { opacity: 0; }
.flip.is-fade.is-flipped .flip__face--front { opacity: 0; }
.flip.is-fade.is-flipped .flip__face--back { opacity: 1; }

@media (max-width: 640px) {
  .flip { aspect-ratio: auto; min-height: 470px; }
  .flip__face--back { padding: 18px; }
}
.flip__turnkey { font-size: 11.5px; letter-spacing: .04em; color: var(--color-text-muted); padding-left: 10px; border-left: 2px solid var(--color-primary); }
@media (max-width: 1180px) and (min-width: 641px) { .flip__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }