/* Витрина, плитки разделов, избранное, фон карточки и полноэкранный просмотр */

/* ---------- Витрина ---------- */

.showcase { position: relative; margin: 6px 16px 0; --glow: #ff8a3d; }
.sc-glow {
  position: absolute;
  inset: 18% 6% -10%;
  border-radius: 40px;
  background: var(--glow);
  filter: blur(46px);
  opacity: 0.45;
  transition: background-color 900ms ease;
  pointer-events: none;
}
.sc-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3.15;
  background: #111;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.sc-track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sc-track::-webkit-scrollbar { display: none; }
.sc-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; text-align: left; overflow: hidden; }
.sc-media { position: absolute; inset: 0; }
.sc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 60% 40%; }
/* Медленный наезд камеры на активный слайд */
.sc-slide.active .sc-media img { animation: kenburns 9s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, 1%); } }
.sc-slide::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.82));
  pointer-events: none;
}
.sc-info { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; display: flex; flex-direction: column; gap: 2px; color: #fff; }
.sc-cat { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tint); filter: brightness(1.25); }
.sc-info b { font: 700 28px/1.08 var(--font-display); letter-spacing: -0.03em; }
.sc-price {
  margin-top: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
}
.sc-slide.active .sc-info { animation: rise 600ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.sc-bars { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; gap: 4px; pointer-events: none; }
.sc-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.sc-bars b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Плитки разделов ---------- */

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 26px 16px 0; }
.tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 108px;
  padding: 14px;
  border-radius: 18px;
  text-align: left;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  transition: transform var(--press);
}
.tile::before {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--tint);
  filter: blur(34px);
  opacity: 0.32;
}
.tile:active { transform: scale(0.96); }
.tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 18%, transparent);
}
.tile-icon svg { width: 21px; height: 21px; }
.tile b { position: relative; margin-top: 14px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.tile span:last-child { position: relative; font-size: 13px; color: var(--secondary); }

/* ---------- Избранное ---------- */

.fav-rail { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.fav-rail::-webkit-scrollbar { display: none; }
.fav { flex: 0 0 138px; display: flex; flex-direction: column; gap: 2px; text-align: left; scroll-snap-align: start; transition: transform var(--press); }
.fav:active { transform: scale(0.96); }
.fav-media { position: relative; display: block; width: 138px; height: 96px; border-radius: 14px; overflow: hidden; margin-bottom: 6px; background: var(--card); }
.fav-media.glyph { display: grid; place-items: center; background: color-mix(in srgb, var(--tint) 20%, #1c1c1e); color: var(--tint); }
.fav-media.glyph svg { width: 34px; height: 34px; }
.fav-media .play { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.5); color: #fff; }
.fav-media .play svg { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.fav b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav span:last-child { font-size: 13px; font-weight: 600; color: var(--accent); }

/* ---------- Карточка: фон из цвета скриншота, действия, параллакс ---------- */

.detail-inner { position: relative; }
.detail-ambient {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 620px;
  background: var(--img, none) center 30% / cover no-repeat, var(--amb, var(--tint));
  filter: blur(60px) saturate(1.5);
  opacity: 0.42;
  transform: scale(1.3);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent);
  mask-image: linear-gradient(to bottom, black 40%, transparent);
  pointer-events: none;
}
.hero { overflow: hidden; z-index: 1; }
.hero-track { will-change: transform; }
.hero-track img { cursor: zoom-in; }
.hero-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.hero-hint svg { width: 15px; height: 15px; stroke-width: 2.2; }
.detail-head, .detail .info-group, .detail .group-label, .detail .note { position: relative; }

.detail-title-row { display: flex; align-items: flex-start; gap: 10px; }
.detail-title-row h2 { flex: 1; min-width: 0; }
.round-action {
  flex: none;
  width: 40px;
  height: 40px;
  margin-top: 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--label);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: background var(--press);
}
.round-action svg { width: 20px; height: 20px; }
.round-action:active { background: rgba(255, 255, 255, 0.2); }
.fav-btn svg { transition: fill 200ms ease, color 200ms ease; }
.fav-btn[aria-pressed="true"] { color: #ff375f; }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }

/* ---------- Полноэкранный просмотр ---------- */

.viewer { position: fixed; inset: 0; z-index: 11; background: #000; touch-action: none; }
.viewer-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-top) + 12px) 16px 12px 20px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.viewer-close { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); color: #fff; }
.viewer-close svg { width: 16px; height: 16px; stroke-width: 2.6; }
.viewer-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; }
.viewer-slide img { max-width: 100%; max-height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .sc-slide.active .sc-media img, .sc-slide.active .sc-info { animation: none; }
}

/* Доводка: уведомление в одну строку, текст витрины читается на пёстрых скриншотах */
.toast { width: max-content; white-space: nowrap; }
.sc-slide::after { inset: 30% 0 0; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.9)); }

/* Шрифт Onest: сделан под кириллицу, по характеру близок к шрифту Apple */
:root {
  --font: "Onest", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-display: "Onest", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
}
body { letter-spacing: -0.012em; }
.large-title { font-weight: 800; letter-spacing: -0.035em; }
.section-title, .sc-info b, .detail-head h2 { font-weight: 800; }
.item-name, .tile b { letter-spacing: -0.015em; }