.products-section {
  width: 100%;
  background: var(--light-surface);
  padding: 72px 24px;
}

.products-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  overflow: hidden;
  padding: 0;
}

.products-pattern-phones {
  position: absolute;
  top: 64px;
  left: 72px;
  display: flex;
  justify-content: flex-start;
}

.products-pattern-dots {
  position: absolute;
  top: 72px;
  right: 72px;
  display: flex;
  justify-content: flex-end;
}

.products-pattern-phones,
.products-pattern-dots {
  z-index: 0;
  pointer-events: none;
}

.products-heading {
  position: relative;
  width: 100%;
  max-width: 570px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  z-index: 1;
}

.products-heading > * {
  position: relative;
  z-index: 1;
}



.products-title {
  color: var(--light-secondary);
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 45px;
  line-height: 44px;
  font-weight: 400;
}

.products-title-highlight {
  font-family: 'Gentium Book Basic', serif;
  font-style: italic;
  font-size: 52px;
  line-height: 48px;
  letter-spacing: -1px;
}

.products-description {
  color: var(--light-onsurfacevariant);
  font-family: var(--body-body-large-font-family);
  font-size: var(--body-body-large-font-size);
  font-style: var(--body-body-large-font-style);
  font-weight: var(--body-body-large-font-weight);
  line-height: var(--body-body-large-line-height);
}

.products-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  z-index: 1;
}

.products-tabs {
  display: none;
  width: 100%;
  max-width: 680px;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.products-tab {
  --md-filled-tonal-button-container-height: 40px;
  --md-filled-tonal-button-container-shape: 0;
  --md-filled-tonal-button-container-color: transparent;
  --md-filled-tonal-button-label-text-color: var(--light-onsurfacevariant);
  --md-filled-tonal-button-hover-label-text-color: var(--light-onsurfacevariant);
  --md-filled-tonal-button-focus-label-text-color: var(--light-onsurfacevariant);
  --md-filled-tonal-button-pressed-label-text-color: var(--light-onsurfacevariant);
  --md-filled-tonal-button-state-layer-color: var(--light-onsurfacevariant);
  --md-filled-tonal-button-hover-state-layer-opacity: 0.08;
  --md-filled-tonal-button-focus-state-layer-opacity: 0.08;
  --md-filled-tonal-button-pressed-state-layer-opacity: 0.12;
  --md-filled-tonal-button-container-elevation: 0;
  --md-filled-tonal-button-hover-container-elevation: 0;
  --md-filled-tonal-button-focus-container-elevation: 0;
  --md-filled-tonal-button-pressed-container-elevation: 0;

  min-width: 0;
  width: auto;
  padding: 0 24px;
  border-radius: 14px;
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

.products-tab-active {
  --md-filled-tonal-button-container-color: transparent;
  --md-filled-tonal-button-label-text-color: var(--light-onsurface);
  --md-filled-tonal-button-hover-label-text-color: var(--light-onsurface);
  --md-filled-tonal-button-focus-label-text-color: var(--light-onsurface);
  --md-filled-tonal-button-pressed-label-text-color: var(--light-onsurface);
  --md-filled-tonal-button-state-layer-color: var(--light-onsurface);
}

.products-columns {
  width: 100%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.products-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.products-column-title {
  color: var(--light-onsurface);
  font-family: var(--title-title-large-font-family);
  font-size: var(--title-title-large-font-size);
  line-height: var(--title-title-large-line-height);
  font-weight: var(--title-title-large-font-weight);
  text-align: center;
}

.products-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.products-skeleton-card {
  height: 200px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background: #e8e9ec;
}

.products-skeleton-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    102deg,
    rgba(255, 255, 255, 0) 18%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 82%
  );
  transform: translate3d(-120%, 0, 0);
  animation: products-loading-shimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
  pointer-events: none;
}

@keyframes products-loading-shimmer {
  0% {
    transform: translate3d(-120%, 0, 0);
  }

  100% {
    transform: translate3d(120%, 0, 0);
  }
}

.products-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 48px 24px;
  grid-column: 1 / -1;
}

.products-error-icon {
  width: 100px;
  height: 100px;
}

.products-error-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
  width: 100%;
  text-align: center;
}

.products-error-title {
  color: var(--light-onsurface);
  font-family: var(--title-title-large-font-family);
  font-size: var(--title-title-large-font-size);
  line-height: var(--title-title-large-line-height);
  font-weight: var(--title-title-large-font-weight);
}

.products-error-message {
  color: var(--light-onsurfacevariant);
  font-family: var(--body-body-medium-font-family);
  font-size: var(--body-body-medium-font-size);
  line-height: var(--body-body-medium-line-height);
  font-weight: var(--body-body-medium-font-weight);
  letter-spacing: -0.2px;
}

.products-error-retry {
  align-self: center;
}

.products-error-retry.btn {
  align-self: center;
}

.products-cards-list {
  display: block;
}

.products-cards-list-visible,
.products-cards-list-hidden {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.products-cards-list-hidden {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.products-cards-list.products-cards-list--expanded .products-cards-list-hidden {
  max-height: 2400px;
  opacity: 1;
  margin-top: 16px;
  pointer-events: auto;
}

.products-show-more-button {
  --md-filled-tonal-button-container-color: transparent;
  --md-filled-tonal-button-label-text-color: var(--light-onsurface, #2a2b33);
  --md-filled-tonal-button-hover-label-text-color: var(--light-onsurface, #2a2b33);
  --md-filled-tonal-button-focus-label-text-color: var(--light-onsurface, #2a2b33);
  --md-filled-tonal-button-pressed-label-text-color: var(--light-onsurface, #2a2b33);
  --md-filled-tonal-button-icon-color: var(--light-onsurface, #2a2b33);
  --md-filled-tonal-button-hover-icon-color: var(--light-onsurface, #2a2b33);
  --md-filled-tonal-button-focus-icon-color: var(--light-onsurface, #2a2b33);
  --md-filled-tonal-button-pressed-icon-color: var(--light-onsurface, #2a2b33);
  --md-filled-tonal-button-state-layer-color: var(--light-onsurface, #2a2b33);
  --md-filled-tonal-button-hover-state-layer-opacity: 0.08;
  --md-filled-tonal-button-focus-state-layer-opacity: 0.08;
  --md-filled-tonal-button-pressed-state-layer-opacity: 0.12;
  --md-filled-tonal-button-container-height: 40px;
  --md-filled-tonal-button-container-shape: 35px;
  --md-filled-tonal-button-container-elevation: 0;
  --md-filled-tonal-button-hover-container-elevation: 0;
  --md-filled-tonal-button-focus-container-elevation: 0;
  --md-filled-tonal-button-pressed-container-elevation: 0;

  color: var(--light-onsurface, #2a2b33);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  padding: 0 16px 0 24px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}

.products-show-more-label {
  white-space: nowrap;
}

.products-show-more-icon {
  width: 24px;
  height: 24px;
  background-color: var(--light-onsurface, #2a2b33);
  -webkit-mask: url('../images/chevron-down.svg') center / contain no-repeat;
  mask: url('../images/chevron-down.svg') center / contain no-repeat;
  transition: transform 0.25s ease;
}

.products-show-more-button--expanded .products-show-more-icon {
  transform: rotate(180deg);
}

.products-card {
  width: 100%;
  min-height: var(--products-card-equal-height, 200px);
  border-radius: 24px;
  border: 1px solid var(--light-outlinevariant);
  background: var(--light-surface);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

.products-card-middle,
.products-card-bottom {
  grid-column: 1 / -1;
}

.products-card-middle {
  display: flex;
  align-items: center;
  min-height: 0;
}

.products-card-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

.products-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.products-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 40px;
}

.products-chip-balance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 24px;
  background: var(--light-secondarycontainer);
  color: var(--light-onsecondarycontainer);
  padding: 8px 16px 8px 8px;
}

.products-chip-balance-icon {
  width: 24px;
  height: 24px;
}

.products-chip-balance-label {
  font-family: var(--label-label-large-font-family);
  font-size: var(--label-label-large-font-size);
  font-style: var(--label-label-large-font-style);
  font-weight: var(--label-label-large-font-weight);
  line-height: var(--label-label-large-line-height);
}

.products-promo-badge {
  --products-promo-start: #850b3e;
  --products-promo-end: #301759;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 24px;
  background: linear-gradient(
    114deg,
    var(--products-promo-start),
    var(--products-promo-end)
  );
  padding: 8px 16px 8px 8px;
}

.products-promo-rive {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

.products-promo-badge-label {
  color: var(--light-onprimary);
  font-family: var(--label-label-large-font-family);
  font-size: var(--label-label-large-font-size);
  font-style: var(--label-label-large-font-style);
  font-weight: var(--label-label-large-font-weight);
  line-height: var(--label-label-large-line-height);
}

.products-receive-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.products-receive-price-original {
  color: var(--light-outline);
  font-family: var(--title-title-medium-font-family);
  font-size: var(--title-title-medium-font-size);
  line-height: var(--title-title-medium-line-height);
  font-weight: var(--title-title-medium-font-weight);
  text-decoration: line-through;
}

.products-receive-price-current {
  color: var(--light-secondary);
  font-family: var(--headline-headline-large-font-family);
  font-size: var(--headline-headline-large-font-size);
  line-height: var(--headline-headline-large-line-height);
  font-weight: var(--headline-headline-large-font-weight);
}

.products-card-title {
  color: var(--light-secondary);
  font-family: var(--headline-headline-large-font-family);
  font-size: var(--headline-headline-large-font-size);
  line-height: var(--headline-headline-large-line-height);
  font-weight: var(--headline-headline-large-font-weight);
  margin: 0;
}

.products-features-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.products-feature-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 6px;
  align-items: start;
  color: var(--light-onsurfacevariant);
}

.products-feature-bullet {
  color: var(--light-onsurface);
  font-family: var(--title-title-small-font-family);
  font-size: var(--title-title-small-font-size);
  line-height: var(--title-title-small-line-height);
  font-weight: var(--title-title-small-font-weight);
}

.products-feature-content {
  min-width: 0;
}

.products-feature-value {
  color: var(--light-onsurface);
  font-family: var(--title-title-small-font-family);
  font-size: var(--title-title-small-font-size);
  line-height: var(--title-title-small-line-height);
  font-weight: var(--title-title-small-font-weight);
}

.products-feature-validity {
  color: var(--light-onsurfacevariant);
  font-family: var(--body-body-medium-font-family);
  font-size: var(--body-body-medium-font-size);
  line-height: var(--body-body-medium-line-height);
  font-weight: var(--body-body-medium-font-weight);
}

.products-feature-item--promo {
  --products-feature-start: #850b3e;
  --products-feature-end: #301759;
}

.products-feature-item--promo .products-feature-bullet,
.products-feature-item--promo .products-feature-value,
.products-feature-item--promo .products-feature-validity {
  background-image: linear-gradient(
    114deg,
    var(--products-feature-start),
    var(--products-feature-end)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.products-card-footer {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.products-card-bottom-row {
  margin-top: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.products-card-bottom-row .products-features-list {
  flex: 1;
  min-width: 0;
}

.products-card-bottom-row .products-card-footer {
  margin-top: 0;
  justify-content: flex-end;
  flex-shrink: 0;
}

.products-send-pill {
  border-radius: 20px;
  background: var(--light-surfacecontainerlow);
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
}

.products-send-original {
  color: var(--light-outline);
  font-family: var(--title-title-medium-font-family);
  font-size: var(--title-title-medium-font-size);
  line-height: var(--title-title-medium-line-height);
  font-weight: var(--title-title-medium-font-weight);
  text-decoration: line-through;
}

.products-send-current {
  color: var(--light-onsurface);
  font-family: var(--title-title-medium-font-family);
  font-size: var(--title-title-medium-font-size);
  line-height: var(--title-title-medium-line-height);
  font-weight: var(--title-title-medium-font-weight);
}

.products-select-button {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  flex-shrink: 0;
}

.products-select-button-icon {
  width: 24px;
  height: 24px;
}

.products-empty-state {
  min-height: 200px;
  border-radius: 24px;
  border: 1px dashed var(--light-outlinevariant);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light-onsurfacevariant);
  font-family: var(--body-body-large-font-family);
  font-size: var(--body-body-large-font-size);
  line-height: var(--body-body-large-line-height);
  font-weight: var(--body-body-large-font-weight);
  text-align: center;
  padding: 24px;
}

@media (max-width: 1080px) {
  .products-content.products-content--error .products-tabs {
    display: none;
  }

  .products-section {
    padding: 48px 16px;
  }

  .products-shell {
    gap: 32px;
  }

  .products-heading {
    max-width: 560px;
    gap: 20px;
  }

  .products-title {
    font-size: 45px;
    line-height: 44px;
  }

  .products-title-highlight {
    display: block;
  }

  .products-columns {
    max-width: 680px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .products-column-title {
    display: none;
  }

  .products-column {
    display: none;
  }

  .products-column.products-column-mobile-visible {
    display: flex;
  }

  .products-tabs {
    display: flex;
  }

  .products-card {
    gap: 12px;
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .products-card-middle,
  .products-card-bottom {
    grid-column: 1;
  }

  .products-card-header,
  .products-card-middle {
    margin-bottom: 12px;
  }

  .products-receive-wrap {
    min-height: auto;
    justify-content: center;
  }

  .products-card-header {
    justify-content: flex-start;
  }

  .products-card .products-select-button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .products-card-footer {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .products-card-bottom-row {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .products-card-bottom-row .products-card-footer {
    width: 100%;
  }

  .products-send-pill {
    width: 100%;
    justify-content: center;
    gap: 8px;
  }

  .products-card-header {
    gap: 8px;
  }

}

@media (min-width: 1080px) {
  .products-section {
    padding: 72px 0;
  }

  .products-shell {
    padding: 0;
  }
}