﻿
/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   LAYOUT WRAPPER
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.sp-page {
  padding-top: clamp(20px, 3vw, 36px);
  position: relative;
  overflow-x: hidden;
}

.sp-page::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rar) 18%, transparent), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
  opacity: .8;
}

/* в”Ђв”Ђ breadcrumb в”Ђв”Ђ */
.sp-crumb {
  padding: 12px 0 20px;
  font-size: .78rem;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-crumb a { color: var(--text-mute); text-decoration: none; transition: color .15s; }
.sp-crumb a:hover { color: var(--gold-1); }
.sp-crumb__sep { opacity: .35; }
.sp-crumb__current { color: var(--text-dim); }

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   TWO-COL LAYOUT
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.sp-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-bottom: 60px;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   GALLERY
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.sp-gallery { position: sticky; top: 90px; }

.sp-stage {
  position: relative;
  border-radius: var(--r-xl, 28px);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rar) 28%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-2, #1d1d25) 0%, var(--surface, #16161c) 100%);
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 48px);
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

/* Casino-feel diagonal stripes pattern */
.sp-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 14px);
  pointer-events: none;
  z-index: 0;
}

/* Rotating rarity ring behind item */
.sp-stage::after {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--rar) 50%, transparent) 0%,
    transparent 35%,
    color-mix(in srgb, var(--rar) 30%, transparent) 60%,
    transparent 100%
  );
  filter: blur(28px);
  opacity: .6;
  animation: sp-ring-spin 18s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes sp-ring-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.sp-main-img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  filter: drop-shadow(0 24px 50px color-mix(in srgb, var(--rar) 55%, transparent));
  transition: transform .5s cubic-bezier(.22,1,.36,1);
  animation: sp-float 5s ease-in-out infinite;
}

@keyframes sp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.sp-stage:hover .sp-main-img {
  transform: translateY(-14px) scale(1.06);
  animation-play-state: paused;
}

/* Holographic shine sweep */
.sp-stage-shine {
  position: absolute;
  top: 0; left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.06), transparent);
  pointer-events: none;
  z-index: 3;
  transition: left .9s cubic-bezier(.22,1,.36,1);
}
.sp-stage:hover .sp-stage-shine { left: 110%; }

/* Tier indicator in corner */
.sp-tier-chip {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(11,11,14,.65);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.sp-tier-chip__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rar);
  box-shadow: 0 0 10px var(--rar);
  animation: sp-pulse 1.6s ease-in-out infinite;
}

@keyframes sp-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--rar); }
  50%      { box-shadow: 0 0 18px var(--rar), 0 0 28px var(--rar); }
}

/* "View in 3D" floating hint */
.sp-stage-hint {
  position: absolute;
  bottom: 14px; right: 16px;
  z-index: 4;
  font-size: .7rem;
  color: var(--text-mute, rgba(255,255,255,.4));
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Thumbnails */
.sp-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--surface-2, #1d1d25);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: border-color .2s, transform .15s;
}
.sp-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-thumb:hover { transform: translateY(-2px); }
.sp-thumb.is-active {
  border-color: var(--rar);
  box-shadow: 0 0 0 1px var(--rar), 0 4px 18px color-mix(in srgb, var(--rar) 35%, transparent);
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   INFO COLUMN
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.sp-info { min-width: 0; }

/* Badges row */
.sp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sp-badge--rarity {
  background: color-mix(in srgb, var(--rar) 18%, transparent);
  color: var(--rar);
  border: 1px solid color-mix(in srgb, var(--rar) 45%, transparent);
}
.sp-badge--sale {
  background: var(--grad-gold, linear-gradient(135deg, #f7cf6b, #e89a3c, #d97a22));
  color: #0c0c0c;
  box-shadow: 0 4px 14px rgba(247,207,107,.25);
}
.sp-badge--stock-yes {
  background: rgba(34,197,94,.14);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.35);
}
.sp-badge--stock-yes::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: sp-pulse-dot 1.4s ease-in-out infinite;
}
.sp-badge--stock-no {
  background: rgba(220,38,38,.14);
  color: #f87171;
  border: 1px solid rgba(220,38,38,.35);
}
@keyframes sp-pulse-dot {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}

/* Title */
.sp-title {
  font-family: var(--font-display, 'Manrope'), system-ui;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--text, #fff);
}

.sp-wear-line {
  font-size: .85rem;
  color: var(--text-dim, #9b9ba8);
  margin-bottom: 22px;
}
.sp-wear-line strong { color: var(--rar); font-weight: 700; }

/* Price */
.sp-price-block {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--r-lg, 20px);
  background: linear-gradient(135deg,
    rgba(247,207,107,.08) 0%,
    rgba(247,207,107,.02) 100%);
  border: 1px solid color-mix(in srgb, var(--gold-1, #f7cf6b) 25%, transparent);
  margin-bottom: 20px;
  overflow: hidden;
}
.sp-price-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 50%, rgba(247,207,107,.12), transparent 50%);
  pointer-events: none;
}
.sp-price {
  position: relative;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--grad-gold, linear-gradient(135deg, #f7cf6b 0%, #e89a3c 55%, #d97a22 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.sp-price-old {
  position: relative;
  font-size: 1.1rem;
  color: var(--text-mute, rgba(255,255,255,.35));
  text-decoration: line-through;
  font-weight: 600;
}
.sp-price-save {
  position: relative;
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(34,197,94,.14);
  color: #4ade80;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid rgba(34,197,94,.3);
}

/* Stat grid (game-style) */
.sp-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.sp-stat {
  padding: 12px 14px;
  border-radius: var(--r-md, 12px);
  background: var(--surface-2, #1d1d25);
  border: 1px solid var(--border, rgba(255,255,255,.06));
}
.sp-stat__label {
  display: block;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute, rgba(255,255,255,.4));
  margin-bottom: 4px;
}
.sp-stat__value {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text, #fff);
}

/* Float bar */
.sp-float {
  padding: 14px 16px;
  border-radius: var(--r-md, 12px);
  background: var(--surface-2, #1d1d25);
  border: 1px solid var(--border, rgba(255,255,255,.06));
  margin-bottom: 20px;
}
.sp-float-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: .78rem;
}
.sp-float-head__label {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute, rgba(255,255,255,.4));
  font-weight: 600;
}
.sp-float-head__value {
  color: var(--rar);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sp-float-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4ade80 0%, #f7cf6b 25%, #fb923c 60%, #ef4444 100%);
  overflow: hidden;
}
.sp-float-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.sp-float-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: var(--sp-fill, 0%);
  background: rgba(0,0,0,0);
  border-right: 2px solid #fff;
  box-shadow: 0 0 8px #fff;
}
.sp-float-marker {
  position: absolute;
  top: -3px;
  left: var(--sp-fill, 0%);
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--rar), 0 0 12px var(--rar);
}
.sp-float-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: .62rem;
  color: var(--text-mute, rgba(255,255,255,.3));
  letter-spacing: .04em;
}

/* Live stats (casino feel) */
.sp-live {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 22px;
  padding: 12px;
  border-radius: var(--r-md, 12px);
  background:
    linear-gradient(135deg, rgba(247,207,107,.06), rgba(247,207,107,.02));
  border: 1px solid var(--border, rgba(255,255,255,.06));
}
.sp-live__item {
  text-align: center;
  font-size: .72rem;
}
.sp-live__num {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold-1, #f7cf6b);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 2px;
}
.sp-live__label {
  color: var(--text-mute, rgba(255,255,255,.4));
  letter-spacing: .04em;
}

/* CTA */
.sp-cta {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.sp-cta-buy {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 28px;
  border-radius: var(--r-pill, 999px);
  background: var(--grad-gold, linear-gradient(135deg, #f7cf6b, #e89a3c, #d97a22));
  color: #0c0c0c;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s, filter .2s, box-shadow .2s;
  box-shadow: 0 8px 22px rgba(247,207,107,.28);
}
.sp-cta-buy::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  pointer-events: none;
  transition: left 0s;
}
.sp-cta-buy:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 12px 30px rgba(247,207,107,.45);
}
.sp-cta-buy:hover::after { left: 160%; transition: left .65s cubic-bezier(.22,1,.36,1); }
.sp-cta-buy:active { transform: translateY(0) scale(.985); }
.sp-cta-buy:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}
.sp-cta-buy svg { width: 18px; height: 18px; }

.sp-cta-wish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-2, #1d1d25);
  border: 1px solid var(--border-2, rgba(255,255,255,.1));
  color: var(--text-dim, #9b9ba8);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.sp-cta-wish:hover {
  color: var(--rar-pink, #e25aa0);
  border-color: var(--rar-pink, #e25aa0);
  transform: translateY(-1px);
}
.sp-cta-wish.is-active {
  color: var(--rar-pink, #e25aa0);
  background: color-mix(in srgb, var(--rar-pink, #e25aa0) 12%, transparent);
  border-color: var(--rar-pink, #e25aa0);
}
.sp-cta-wish svg { width: 22px; height: 22px; }

.sp-cta-wish.is-active svg { fill: currentColor; }

/* Buy hint line */
.sp-buy-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--text-mute, rgba(255,255,255,.45));
  margin-bottom: 22px;
}
.sp-buy-hint svg {
  width: 14px; height: 14px;
  color: var(--gold-1, #f7cf6b);
  flex-shrink: 0;
}

/* Description accordion */
.sp-desc {
  margin-top: 12px;
  border-top: 1px solid var(--border, rgba(255,255,255,.06));
  padding-top: 18px;
}
.sp-desc-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 8px 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text, #fff);
  cursor: pointer;
  letter-spacing: .02em;
}
.sp-desc-toggle svg { width: 16px; height: 16px; transition: transform .25s; }
.sp-desc-toggle.is-open svg { transform: rotate(180deg); }
.sp-desc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, margin-top .25s ease;
  font-size: .88rem;
  color: var(--text-dim, #9b9ba8);
  line-height: 1.65;
}
.sp-desc-body.is-open {
  max-height: 1200px;
  margin-top: 12px;
}
.sp-desc-body p { margin: 0 0 10px; }
.sp-desc-body p:last-child { margin-bottom: 0; }

/* Trust strip */
.sp-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border, rgba(255,255,255,.06));
}
.sp-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--text-dim, #9b9ba8);
}
.sp-trust__item svg {
  width: 16px; height: 16px;
  color: var(--gold-1, #f7cf6b);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   RELATED PRODUCTS
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.sp-related {
  padding: clamp(40px, 5vw, 64px) 0 80px;
  position: relative;
}
.sp-related__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  flex-wrap: wrap;
}
.sp-related__title {
  font-family: var(--font-display, 'Manrope'), system-ui;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text, #fff);
}
.sp-related__title em {
  font-style: normal;
  background: var(--grad-gold, linear-gradient(135deg, #f7cf6b, #e89a3c, #d97a22));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sp-related__lead {
  font-size: .9rem;
  color: var(--text-dim, #9b9ba8);
}
.sp-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Sticky mobile buy bar */
.sp-sticky-buy {
  display: none;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   RESPONSIVE
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
@media (max-width: 1024px) {
  .sp-layout { grid-template-columns: 1fr; }
  .sp-gallery { position: static; }
  .sp-related__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .sp-stage { min-height: 320px; padding: 28px 20px; }
  .sp-stage::after { width: 240px; height: 240px; }
  .sp-related__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sp-cta { position: sticky; bottom: 0; z-index: 30; }
  .sp-stats { grid-template-columns: 1fr; }
  .sp-live { grid-template-columns: 1fr; gap: 6px; }
  .sp-live__item { display: flex; justify-content: space-between; padding: 4px 6px; }
  .sp-live__num { display: inline; font-size: .92rem; }
}
