.page {
  position: relative;
  width: var(--page-width);
  height: var(--page-height);
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-montserrat);
}

.page-auth {
  position: absolute;
  left: 48px;
  top: 59px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 320px;
  min-width: 0;
  height: 48px;
  padding: 0 14px 0 4px;
  border-radius: 60px;
  background: rgba(240, 240, 240, 0.9);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
}

.page-auth--login {
  padding: 0 22px;
  background: var(--color-accent);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.page-auth__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.page-auth__name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-cta-row {
  position: absolute;
  left: 0;
  top: 320px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 60px;
  border: 2px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.catalog-cta:hover {
  background: rgba(188, 65, 157, 0.08);
}

.header {
  position: absolute;
  left: 452px;
  top: 42px;
  width: 1016px;
  height: 82px;
  border-radius: 60px;
  background: var(--color-header-bg);
  backdrop-filter: blur(17.5px);
  -webkit-backdrop-filter: blur(17.5px);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

.header__brand {
  position: absolute;
  left: 42px;
  top: 21px;
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
  color: var(--color-text);
}

.header__stores {
  position: absolute;
  top: 13px;
  right: 42px;
  display: flex;
  gap: 12px;
}

.header__store {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.header__store img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header__login {
  position: absolute;
  top: 13px;
  right: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  border-radius: 155px;
  border: 1px solid var(--color-border);
  background: #2c2c2c;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  font-family: var(--font-family-montserrat);
  font-size: 22px;
  font-weight: 500;
  line-height: normal;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.header__user {
  position: absolute;
  top: 13px;
  right: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  min-width: 0;
  height: 56px;
  padding: 0 18px 0 8px;
  border-radius: 155px;
  border: 1px solid var(--color-border);
  background: #2c2c2c;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-decoration: none;
}

.header__user-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.header__user-name {
  font-family: var(--font-family-montserrat);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title {
  position: absolute;
  left: 537px;
  top: 236px;
  width: 846px;
  margin: 0;
  font-size: 72px;
  font-weight: 500;
  line-height: normal;
  color: var(--color-text);
}

.covers {
  position: absolute;
  left: 452px;
  top: 366px;
  display: flex;
  gap: 10px;
}

.covers__item {
  position: relative;
  width: 246px;
  height: 304px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.covers__item:last-child {
  width: 247px;
}

.covers__item img {
  position: absolute;
  left: 0;
  top: -47.55%;
  width: 100%;
  height: 171.43%;
  max-width: none;
  object-fit: cover;
}

.covers__item:nth-child(3) img {
  top: -48.87%;
}

.covers__item:nth-child(4) img {
  top: -50.53%;
  height: 172.12%;
}

.pay {
  position: absolute;
  left: 593px;
  top: 751px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 387px;
  height: 90px;
  border-radius: 60px;
  background: var(--color-accent);
  color: #fff;
  font-size: 52px;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}

.pay__arrow {
  width: 39px;
  height: 21px;
  flex-shrink: 0;
}

.price {
  position: absolute;
  left: 1040px;
  top: 765px;
  margin: 0;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  color: var(--color-text);
}

.price__value {
  font-size: 52px;
}

.price__period {
  font-size: 42px;
  color: var(--color-text-soft);
}

.legal {
  position: absolute;
  left: 524px;
  top: 893px;
  width: 872px;
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  color: var(--color-text-muted);
}

.legal a {
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
}

.legal a:hover {
  text-decoration: underline;
}

html[data-layout="mobile"] .page {
  width: 440px;
  height: 956px;
  overflow: visible;
}

html[data-layout="mobile"] .page-auth,
html[data-layout="mobile"] .catalog-cta-row {
  display: none !important;
}

html[data-layout="mobile"] .header {
  left: 22px;
  top: 32px;
  width: 396px;
  height: 72px;
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  transform: scale(var(--design-boost, 1));
  transform-origin: top center;
}

html[data-layout="mobile"] .header__brand {
  left: 22px;
  top: 23px;
  font-size: 22px;
}

html[data-layout="mobile"] .header__stores {
  top: 15px;
  right: 22px;
  gap: 10px;
}

html[data-layout="mobile"] .header__store {
  width: 42px;
  height: 42px;
}

html[data-layout="mobile"] .header__login {
  top: 12px;
  right: 22px;
  height: 48px;
  padding: 0 24px;
  font-size: 16px;
}

html[data-layout="mobile"] .header__user {
  top: 12px;
  right: 22px;
  height: 48px;
  max-width: 160px;
  gap: 6px;
  padding: 0 12px 0 6px;
}

html[data-layout="mobile"] .header__user-icon {
  width: 32px;
  height: 32px;
}

html[data-layout="mobile"] .header__user-name {
  font-size: 13px;
}

html[data-layout="mobile"] .title {
  left: 32px;
  top: 156px;
  width: auto;
  font-size: 32px;
  white-space: nowrap;
  transform: scale(var(--design-boost, 1));
  transform-origin: top center;
}

html[data-layout="mobile"] .covers-boost {
  position: absolute;
  left: 0;
  top: 227px;
  width: 440px;
  height: 401px;
  transform: scale(var(--design-boost, 1));
  transform-origin: top center;
}

html[data-layout="mobile"] .covers {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  gap: 12px;
  padding: 0 22px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  transform: none;
}

html[data-layout="mobile"] .covers::-webkit-scrollbar {
  display: none;
}

html[data-layout="mobile"] .covers__item,
html[data-layout="mobile"] .covers__item:last-child {
  width: 250px;
  height: 401px;
}

html[data-layout="mobile"] .covers__item img,
html[data-layout="mobile"] .covers__item:nth-child(3) img,
html[data-layout="mobile"] .covers__item:nth-child(4) img {
  top: -22.35%;
  height: 132.07%;
}

html[data-layout="mobile"] .pay {
  left: 27px;
  top: var(--fit-pay-top, 754px);
  width: 209px;
  height: 48px;
  gap: 10px;
  border-radius: 32.485px;
  font-size: 28px;
  transform: scale(var(--fit-bottom-scale, 1));
  transform-origin: top left;
}

html[data-layout="mobile"] .pay__arrow {
  width: 21px;
  height: 11px;
}

html[data-layout="mobile"] .price {
  left: 268px;
  top: var(--fit-price-top, 761px);
  transform: scale(var(--fit-bottom-scale, 1));
  transform-origin: top left;
}

html[data-layout="mobile"] .price__value {
  font-size: 28px;
}

html[data-layout="mobile"] .price__period {
  font-size: 20px;
}

html[data-layout="mobile"] .legal {
  left: 54px;
  top: var(--fit-legal-top, 844px);
  width: 331px;
  font-size: 16px;
  transform: scale(var(--fit-bottom-scale, 1));
  transform-origin: top center;
}