/* Карточка витрины умеет показать QR вместо картинки: ребёнок наводит камеру
   и уносит работу в телефон. Отдельным файлом, потому что версия style.css
   считается на старте гейтвея — новый адрес не нужно расклеивать от кеша. */

.kartochka { position: relative; display: flex; }
.kartochka > .card { flex: 1; }

/* кнопка поверх картинки */
.qr-knopka {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  font: 700 11px/1 'Unbounded', sans-serif; letter-spacing: .5px;
  color: #eaf1ff; background: rgba(10, 14, 38, .72);
  border: 1px solid rgba(143, 211, 255, .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.qr-knopka:hover, .qr-knopka:focus-visible {
  background: rgba(10, 14, 38, .92); border-color: rgba(110, 242, 192, .8);
  transform: scale(1.06); outline: none;
}
.kartochka.qr-vidno .qr-knopka {
  background: #6ef2c0; border-color: #6ef2c0; color: #0b1030;
}

/* сторона с кодом — ровно поверх картинки, название карточки остаётся видно */
.qr-lico {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  aspect-ratio: 16 / 9; border-radius: var(--radius) var(--radius) 0 0;
  background: #fff; display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 14px 56px 14px 14px;
  opacity: 0; visibility: hidden; transform: scale(.97);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.kartochka.qr-vidno .qr-lico { opacity: 1; visibility: visible; transform: none; }

.qr-lico img { height: 82%; width: auto; max-width: 45%; display: block; }
.qr-lico .qr-slova { max-width: 46%; color: #14183a; }
.qr-lico .qr-slova b {
  display: block; font: 600 .92rem/1.25 'Unbounded', sans-serif; margin-bottom: 6px;
}
.qr-lico .qr-slova span { display: block; font-size: .8rem; color: #5a6180; line-height: 1.35; }

/* на узких карточках подпись мешает — оставляем один код покрупнее */
@media (max-width: 420px) {
  .qr-lico .qr-slova { display: none; }
  .qr-lico img { height: 88%; max-width: 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .qr-lico, .qr-knopka { transition: none; }
}