/* =====================================================
   SHOP — Прокачка себя на выбор (заголовок + карточки)
   Единая секция. T776 (#rec1659652261) скрыт off-screen,
   но остаётся в DOM для корзины Tilda.
   ===================================================== */

.shop {
  background: #080c1c;
  padding: 80px 40px 100px;
  position: relative;
  overflow: hidden;
}

.shop::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at top, rgba(220,29,36,.09) 0%, transparent 70%);
  pointer-events: none;
}

/* ── HEADING ─────────────────────────────────────── */

.shop__head {
  max-width: 1200px;
  margin: 0 auto 52px;
  text-align: center;
  position: relative;
}

.shop__label {
  display: inline-flex;
  align-items: center;
  background: rgba(220, 29, 36, .12);
  border: 1px solid rgba(220, 29, 36, .30);
  border-radius: 100px;
  padding: 6px 20px;
  margin-bottom: 20px;
}

.shop__label span {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .65);
  letter-spacing: .10em;
  text-transform: uppercase;
}

.shop__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #ffffff;
  margin: 0;
}

/* ── GRID ────────────────────────────────────────── */

.shop__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── CARD ────────────────────────────────────────── */

.shop__card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.shop__card:hover {
  border-color: rgba(220,29,36,.40);
}

/* image */
.shop__img-link {
  display: block !important;
  text-decoration: none;
  flex-shrink: 0;
  height: 396px !important;
  background-size: cover !important;
  background-position: center top !important;
  background-color: rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}


/* body */
.shop__body {
  padding: 20px 20px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shop__name {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  margin: 0;
}

.shop__desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.50);
  margin: 0;
}

.shop__prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.shop__price {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -.02em;
}

.shop__old {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,.30);
  text-decoration: line-through;
}

/* buttons */
.shop__btns {
  padding: 16px 20px 20px;
  display: flex;
  gap: 8px;
}

.shop__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 11px 12px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.shop__btn--ghost {
  background: rgba(255,255,255,.08);
  color: #ffffff !important;
  border-color: rgba(255,255,255,.12);
}

.shop__btn--ghost:hover {
  background: rgba(255,255,255,.14);
  color: #ffffff !important;
  border-color: rgba(255,255,255,.25);
}

.shop__btn--red {
  background: #DC1D24;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(220,29,36,.40);
}

.shop__btn--red:hover {
  background: #B8151B;
  color: #ffffff !important;
  box-shadow: 0 6px 28px rgba(220,29,36,.55);
}

/* ── RESPONSIVE ─────────────────────────────────────── */

@media (max-width: 960px) {
  .shop {
    padding: 60px 24px 80px;
  }
  .shop__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .shop {
    padding: 48px 16px 60px;
  }
  .shop__grid {
    grid-template-columns: 1fr;
  }
}