.categories { margin-top: 116px; }
.promos     { margin-top: 116px; }
.features   { margin-top: 149px; }
.footer     { margin-top: 150px; }

.band {
  --u: min(1px, 0.0660502cqw);

  position: relative;
  height: calc(532 * var(--u));
  border-radius: calc(14 * var(--u));
  overflow: hidden;
  isolation: isolate;
}

.band__bg {
  position: absolute;
  z-index: 0;
  display: block;
  overflow: hidden;
}
.band__bg img {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
}

.band--one .band__bg {
  left: calc(-88 * var(--u));
  top: calc(-31 * var(--u));
  width: calc(1690 * var(--u));
  height: calc(594 * var(--u));
  filter: blur(calc(5 * var(--u)));
}
.band--one .band__bg img { top: -142.79%; height: 276.55%; }

.band--two .band__bg {
  left: calc(-17 * var(--u));
  top: calc(-778 * var(--u));
  width: calc(1548 * var(--u));
  height: calc(1342 * var(--u));
  filter: blur(calc(12.5 * var(--u)));
}
.band--two .band__bg img { top: -5.22%; height: 115.35%; }

.band__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background: var(--c-black);
  opacity: .25;
}

.seller {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  color: #fff;
}

.seller--center {
  left: 50%;
  top: calc(98 * var(--u));
  transform: translateX(-50%);
  align-items: center;
  gap: calc(24 * var(--u));
}

.seller--aside {
  left: calc(42 * var(--u));
  top: calc(124 * var(--u));
  align-items: flex-start;
  gap: calc(38 * var(--u));
}

.seller__id { display: flex; }
.seller--center .seller__id {
  flex-direction: column;
  align-items: center;
  gap: calc(18 * var(--u));
}
.seller--aside .seller__id {
  flex-direction: row;
  align-items: center;
  gap: calc(24 * var(--u));
}

.seller__avatar {
  position: relative;
  display: block;
  flex: none;
  width: calc(132 * var(--u));
  height: calc(132 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, .25);
}
.seller__avatar-clip {
  position: absolute;
  display: block;
  left: calc(10 * var(--u));
  top: calc(10 * var(--u));
  width: calc(112 * var(--u));
  height: calc(112 * var(--u));
  border-radius: calc(14 * var(--u));
  overflow: hidden;
}
.seller__avatar-clip img {
  position: absolute;
  left: -8.04%;
  top: -8.93%;
  width: 116.96%;
  height: 117.86%;
  max-width: none;
  object-fit: cover;
}

.seller__meta { display: flex; flex-direction: column; }
.seller--center .seller__meta {
  align-items: center;
  text-align: center;
  gap: calc(12 * var(--u));
}
.seller--aside .seller__meta {
  align-items: flex-start;
  gap: calc(11 * var(--u));
}

.seller__name {
  font-size: calc(34 * var(--u));
  font-weight: 600;
  letter-spacing: calc(-.68 * var(--u));
  line-height: 1.17;
}
.seller__sales {
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.17;
}

.pcard {
  position: absolute;
  z-index: 1;
  top: calc(31 * var(--u));
  width: calc(408 * var(--u));
  height: calc(468 * var(--u));
  display: flex;
  flex-direction: column;
  background:var(--glass);
  border-radius: calc(14 * var(--u));
  overflow: hidden;
}
.pcard--left  { left: calc(117 * var(--u)); }
.pcard--right { left: calc(988 * var(--u)); }

.pcard__media {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 408 / 383;
  overflow: hidden;
}
.pcard__media img {
  position: absolute;
  max-width: none;
}
.pcard--left .pcard__media img {
  left: -81.91%;
  top: -4.49%;
  width: 216.67%;
  height: 129.84%;
}
.pcard--right .pcard__media img {
  left: -97.99%;
  top: -12.01%;
  width: 243.58%;
  height: 145.95%;
}

.pcard__info {
  flex: none;
  height: calc(85 * var(--u));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u)) 0;
  background:var(--glass);
}

.pcard__title {
  margin-top: calc(8 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 500;
  letter-spacing: calc(.48 * var(--u));
  line-height: 1.17;
}

.pcard__price { display: flex; flex-direction: column; }
.pcard__label {
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.17;
  color: var(--c-muted);
}
.pcard__value {
  margin-top: calc(1.5 * var(--u));
  font-size: calc(28.966 * var(--u));
  font-weight: 600;
  letter-spacing: calc(.869 * var(--u));
  line-height: 1.17;
}

.gcards > li { flex: none; display: flex; }

.gcards {
  position: absolute;
  z-index: 1;
  left: calc(468 * var(--u));
  top: calc(32 * var(--u));
  width: calc(1004 * var(--u));
  height: calc(468 * var(--u));
  display: flex;
  gap: calc(34 * var(--u));
}

.features {
  align-items: center;
  gap: 0;
}

.features__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.features__title {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.18;
}
.features__title strong { font-weight: 600; }

.features__lead {
  width: 585px;
  height: 77px;
  max-width: 100%;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2131;
  color: var(--c-muted-2);
}

.features__list {
  margin-top: 138px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px 144px;
}

.feature {
  position: relative;
  width: 360px;
  max-width: 100%;
  padding: 32px 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-block);
  overflow: hidden;
}
.feature::before {
  content: "";
  position: absolute;
  left: -11.67%;
  top: -114.97%;
  width: 129.59%;
  height: 266.31%;
  background: url("../assets/texture.jpg") center / 100% 100% no-repeat;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.feature__title,
.feature__text { position: relative; }

.feature__title {
  font-size: 41px;
  font-weight: 600;
  line-height: 1.17;
  text-align: center;
}

.feature__text {
  width: 200px;
  max-width: 100%;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.623;
  text-align: center;
}

.feature--wide { padding-inline: 58px; }
.feature--wide .feature__text { width: 220px; }

@media (max-width: 1023px) {
  .categories, .promos { margin-top: 72px; }
  .features { margin-top: 88px; }
  .footer   { margin-top: 88px; }

  .band {
    --u: 1px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 32px clamp(16px, 4vw, 42px);
  }
  .band__bg,
  .band--one .band__bg,
  .band--two .band__bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .band__bg img {
    top: 0;
    height: 100%;
    object-fit: cover;
  }
  .band__scrim { opacity: .45; }

  .seller,
  .seller--center,
  .seller--aside {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    align-items: center;
    gap: 20px;
  }
  .seller--aside .seller__meta,
  .seller--center .seller__meta {
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .seller--aside .seller__id { flex-direction: column; gap: 16px; }
  .band--one .seller { order: -1; }

  .pcard,
  .gcards .gcard {
    position: relative;
    left: auto;
    top: auto;
    width: min(408px, 100%);
    height: auto;
  }
  .gcards .gcard { width: min(312px, 100%); }

  .pcard__info { height: auto; padding-bottom: 20px; }

  .gcards {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }

  .band--one {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
  }
  .band--one .seller { flex-basis: 100%; }

  .features__head { width: 100%; }
  .features__title { font-size: clamp(30px, 5.4vw, 56px); }
  .features__lead {
    width: auto;
    max-width: 585px;
    height: auto;
    font-size: clamp(16px, 2.6vw, 24px);
  }
  .features__list { margin-top: 56px; gap: 32px; }
  .feature { padding: 28px 32px; }
  .feature--wide { padding-inline: 32px; }
  .feature__title { font-size: clamp(28px, 4.4vw, 41px); }
}