.ecommerce-page__heading {
  display: grid;
  gap: var(--space-lg);
  margin-block-end: clamp(var(--space-2xl), 4vw, var(--space-4xl));
}

.ecommerce-page__badge {
  justify-self: start;
}

.ecommerce-page__title {
  max-inline-size: none;
}

.ecommerce-page__description {
  max-inline-size: 66ch;
}

.ecommerce-page-hero,
.ecommerce-page-project-types,
.ecommerce-page-final-cta {
  --section-grid-opacity: 0.5;
}

#formularz-ecommerce,
#realizacja-ecommerce {
  scroll-margin-top: calc(var(--header-height) + var(--space-3xl));
}

.ecommerce-page-hero {
  padding-block-end: clamp(var(--space-2xl), 4vw, var(--space-4xl));
}

.ecommerce-page-hero__layout,
.ecommerce-page-scope__layout,
.ecommerce-page-form__panel,
.ecommerce-page-faq__layout {
  display: grid;
  gap: clamp(var(--space-2xl), 4vw, var(--space-5xl));
}

.ecommerce-page-hero__copy,
.ecommerce-page-hero__panel,
.ecommerce-page-faq__copy {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.ecommerce-page-hero__copy,
.ecommerce-page-faq__copy {
  min-inline-size: 0;
  gap: var(--space-lg);
}

.ecommerce-page-hero__copy::before,
.ecommerce-page-hero__panel::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    ellipse at 46% 42%,
    color-mix(in srgb, var(--color-background) 99%, transparent) 0%,
    color-mix(in srgb, var(--color-background) 96%, transparent) 20%,
    color-mix(in srgb, var(--color-background) 78%, transparent) 48%,
    color-mix(in srgb, var(--color-background) 42%, transparent) 72%,
    transparent 88%
  );
}

.ecommerce-page-hero__copy::before {
  inset-block-start: calc(clamp(var(--space-xl), 3vw, var(--space-3xl)) * -1);
  inset-inline-start: calc(clamp(var(--space-xl), 3vw, var(--space-3xl)) * -1);
  inline-size: calc(min(100%, 48rem) + (clamp(var(--space-xl), 3vw, var(--space-3xl)) * 2));
  block-size: calc(100% + clamp(var(--space-2xl), 5vw, var(--space-5xl)));
}

.ecommerce-page-hero__panel::before {
  inset: calc(clamp(var(--space-lg), 3vw, var(--space-3xl)) * -1);
}

.ecommerce-page-project-types .ecommerce-page__heading,
.ecommerce-page-final-cta__copy {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.ecommerce-page-project-types .ecommerce-page__heading::before,
.ecommerce-page-final-cta__copy::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    ellipse at 46% 42%,
    color-mix(in srgb, var(--color-background) 99%, transparent) 0%,
    color-mix(in srgb, var(--color-background) 97%, transparent) 18%,
    color-mix(in srgb, var(--color-background) 88%, transparent) 42%,
    color-mix(in srgb, var(--color-background) 56%, transparent) 68%,
    transparent 86%
  );
}

.ecommerce-page-project-types .ecommerce-page__heading::before {
  inset-block-start: calc(clamp(var(--space-lg), 3vw, var(--space-3xl)) * -1);
  inset-inline-start: calc(clamp(var(--space-lg), 3vw, var(--space-3xl)) * -1);
  inline-size: min(100%, 46rem);
  max-inline-size: calc(100% + (clamp(var(--space-lg), 3vw, var(--space-3xl)) * 2));
  block-size: calc(100% + clamp(var(--space-lg), 3vw, var(--space-3xl)) + clamp(var(--space-xl), 3.4vw, var(--space-4xl)));
}

.ecommerce-page-final-cta__copy::before {
  inset-block-start: calc(clamp(var(--space-lg), 3vw, var(--space-3xl)) * -1);
  inset-inline-start: calc(clamp(var(--space-lg), 3vw, var(--space-3xl)) * -1);
  inline-size: calc(min(100%, 52rem) + (clamp(var(--space-lg), 3vw, var(--space-3xl)) * 2));
  max-inline-size: calc(100% + (clamp(var(--space-lg), 3vw, var(--space-3xl)) * 2));
  block-size: calc(100% + clamp(var(--space-lg), 3vw, var(--space-3xl)) + clamp(var(--space-xl), 3.4vw, var(--space-4xl)));
}

.ecommerce-page-hero__title {
  max-inline-size: 13ch;
}

.ecommerce-page-hero__description {
  max-inline-size: 62ch;
}

.ecommerce-page-hero__actions {
  gap: var(--space-md);
}

.ecommerce-page-scope__actions {
  margin-block-start: var(--space-xl);
}

.ecommerce-page-hero__trust {
  display: grid;
  gap: var(--space-sm);
}

.ecommerce-page-hero__trust li,
.ecommerce-page-scope-group__list li {
  position: relative;
  padding-inline-start: calc(var(--space-lg) + var(--space-sm));
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.ecommerce-page-hero__trust li::before,
.ecommerce-page-scope-group__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.56em;
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
  border-radius: var(--radius-icon-sm);
  background: var(--color-accent);
  box-shadow: var(--shadow-accent-glow);
}

.offer-page-hero__aside,
.ecommerce-page-hero__panel {
  gap: var(--space-xl);
  block-size: auto;
  height: auto;
  inline-size: fit-content;
  max-inline-size: min(100%, 25rem);
  justify-self: end;
  align-self: start;
  overflow: hidden;
}

.offer-page-hero__aside.card {
  height: auto;
}

.ecommerce-page-hero__panel-title,
.ecommerce-page-form__aside-title,
.ecommerce-page-form__contact-title {
  font-size: clamp(1rem, 0.92rem + 0.32vw, 1.22rem);
}

.ecommerce-page-hero__scope {
  display: grid;
  gap: var(--space-lg);
}

.ecommerce-page-hero__scope-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  padding-block-end: var(--space-lg);
  border-block-end: var(--border-width-standard) solid var(--border-standard);
}

.ecommerce-page-hero__scope-item:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.ecommerce-page-hero__scope-number,
.ecommerce-page-problem-row__number,
.ecommerce-page-project-card__number,
.ecommerce-page-scope-group__number,
.ecommerce-page-process-step__number,
.ecommerce-page-form__step-number,
.ecommerce-page-faq__summary-number,
.ecommerce-page-featured-case__type {
  color: var(--color-accent);
}

.ecommerce-page-hero__scope-copy {
  display: grid;
  gap: var(--space-2xs);
}

.ecommerce-page-hero__panel-title,
.ecommerce-page-hero__scope-title,
.ecommerce-page-hero__scope-description,
.ecommerce-page-form__aside-title,
.ecommerce-page-form__note,
.ecommerce-page-form__helper,
.ecommerce-page-final-cta__copy .ecommerce-page__title,
.ecommerce-page-final-cta__copy .ecommerce-page__description {
  margin: 0;
}

.ecommerce-page-hero__scope-title,
.ecommerce-page-problem-row__title,
.ecommerce-page-project-card__title,
.ecommerce-page-scope-group__title,
.ecommerce-page-featured-case__detail-title,
.ecommerce-page-process-step__title,
.ecommerce-page-faq__question {
  font-size: clamp(1.08rem, 0.96rem + 0.36vw, 1.34rem);
  line-height: 1.2;
}

.ecommerce-page-hero__scope-description,
.ecommerce-page-problem-row__description,
.ecommerce-page-project-card__description,
.ecommerce-page-scope__tech-description,
.ecommerce-page-featured-case__detail-text,
.ecommerce-page-process-step__description,
.ecommerce-page-form__note,
.ecommerce-page-form__helper,
.ecommerce-page-faq__answer,
.ecommerce-page-form__step-text {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.ecommerce-page-problems__list,
.ecommerce-page-scope__groups,
.ecommerce-page-faq__accordion {
  display: grid;
}

.ecommerce-page-problem-row {
  display: grid;
  gap: var(--space-lg);
  padding-block: clamp(var(--space-xl), 3vw, var(--space-2xl));
  border-block-end: var(--border-width-standard) solid var(--border-standard);
}

.ecommerce-page-problem-row:first-child {
  padding-block-start: 0;
}

.ecommerce-page-problem-row:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.ecommerce-page-problem-row__copy,
.ecommerce-page-featured-case__header {
  display: grid;
  gap: var(--space-sm);
}

.ecommerce-page-form__heading {
  display: grid;
  gap: var(--space-md);
}

.ecommerce-page-project-types__grid {
  display: grid;
  gap: var(--card-grid-gap);
}

.ecommerce-page-project-card {
  display: grid;
  gap: var(--space-md);
  min-inline-size: 0;
  padding: clamp(var(--space-xl), 2.6vw, var(--space-3xl));
  border: var(--border-width-standard) solid var(--border-standard);
  border-radius: calc(var(--radius-large) + 2px);
  background: var(--color-surface);
  box-shadow: var(--shadow-card-sm);
}

.ecommerce-page-project-card--featured {
  border-top-width: var(--border-width-accent);
  border-top-color: var(--color-accent-border);
}

.ecommerce-page-project-card__actions {
  margin-block-start: var(--space-sm);
}

.ecommerce-page-b2b-link__panel {
  display: grid;
  gap: clamp(var(--space-xl), 3vw, var(--space-3xl));
  align-items: center;
  padding: clamp(var(--space-xl), 3vw, var(--space-3xl));
}

.ecommerce-page-b2b-link__copy {
  display: grid;
  gap: var(--space-md);
  min-inline-size: 0;
}

.ecommerce-page-b2b-link__actions {
  justify-content: flex-start;
}

.ecommerce-page-scope__intro-inner {
  gap: var(--space-lg);
}

.ecommerce-page-scope__tech,
.ecommerce-page-form__contact {
  gap: var(--space-md);
}

.ecommerce-page-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.ecommerce-page-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width-standard) solid var(--border-standard);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.35;
}

.ecommerce-page-scope-group {
  display: grid;
  gap: var(--space-lg);
  padding-block: clamp(var(--space-xl), 3vw, var(--space-2xl));
  border-block-end: var(--border-width-standard) solid var(--border-standard);
}

.ecommerce-page-scope-group:first-child {
  padding-block-start: 0;
}

.ecommerce-page-scope-group:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.ecommerce-page-scope-group__head {
  display: grid;
  gap: var(--space-xs);
}

.ecommerce-page-scope-group__list {
  display: grid;
  gap: var(--space-md);
}

.ecommerce-page-featured-case__panel,
.ecommerce-page-form__panel {
  display: grid;
  gap: clamp(var(--space-2xl), 4vw, var(--space-4xl));
  padding: clamp(var(--space-2xl), 4vw, var(--space-5xl));
  border: var(--border-width-standard) solid var(--border-standard);
  border-radius: calc(var(--radius-large) + 2px);
  background: var(--color-surface);
  box-shadow: var(--shadow-card-sm);
}

.ecommerce-page-featured-case__media {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-large) + 2px);
  background: var(--color-surface-muted);
  aspect-ratio: 16 / 9;
}

.ecommerce-page-featured-case__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.ecommerce-page-featured-case__details {
  display: grid;
  gap: var(--card-grid-gap);
}

.ecommerce-page-featured-case__detail {
  display: grid;
  gap: var(--space-sm);
}

.ecommerce-page-featured-case__actions,
.ecommerce-page-process__actions,
.ecommerce-page-faq__actions,
.ecommerce-page-final-cta__actions {
  gap: var(--space-md);
}

.ecommerce-page-final-cta__actions {
  position: relative;
  z-index: 1;
}

.ecommerce-page-process__actions {
  margin-block-start: clamp(var(--space-2xl), 4vw, var(--space-4xl));
}

.ecommerce-page-process__steps {
  display: grid;
  gap: var(--card-grid-gap);
}

.ecommerce-page-process-step {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  min-inline-size: 0;
  padding: clamp(var(--space-xl), 2.6vw, var(--space-3xl));
  border: var(--border-width-standard) solid var(--border-standard);
  border-radius: calc(var(--radius-large) + 2px);
  background: var(--color-surface);
}

.ecommerce-page-form__main,
.ecommerce-page-form__aside {
  min-inline-size: 0;
}

.ecommerce-page-form__main {
  display: grid;
  gap: clamp(var(--space-xl), 3vw, var(--space-2xl));
}

.ecommerce-page-form__aside {
  display: grid;
  align-content: start;
  gap: clamp(var(--space-xl), 3vw, var(--space-3xl));
}

.ecommerce-page-form__render {
  display: grid;
  gap: var(--space-lg);
}

.ecommerce-page-form__steps {
  display: grid;
  gap: clamp(var(--space-lg), 2.2vw, var(--space-xl));
}

.ecommerce-page-form__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.ecommerce-page-form__contact-list {
  display: grid;
  gap: clamp(var(--space-lg), 2.2vw, var(--space-xl));
  margin: 0;
}

.ecommerce-page-form__contact-list dt {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  color: var(--color-text-muted);
}

.ecommerce-page-form__contact-list dd {
  margin: 0;
  color: var(--color-text-primary);
}

.ecommerce-page-form__contact-list a {
  color: inherit;
  text-decoration: none;
}

.ecommerce-page-form__contact-list a:hover,
.ecommerce-page-form__contact-list a:focus-visible {
  color: var(--color-accent);
}

.ecommerce-page-form__note,
.ecommerce-page-form__helper {
  max-inline-size: 40ch;
}

.ecommerce-page-faq__accordion {
  gap: var(--space-lg);
}

.ecommerce-page-faq__item {
  border: var(--border-width-standard) solid var(--border-standard);
  border-radius: calc(var(--radius-large) + 2px);
  background: var(--color-surface);
  box-shadow: var(--shadow-card-sm);
  overflow: clip;
}

.ecommerce-page-faq__item[open] {
  border-color: var(--color-accent-border);
}

.ecommerce-page-faq__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  padding: clamp(var(--space-xl), 2.6vw, var(--space-2xl));
  cursor: pointer;
  list-style: none;
}

.ecommerce-page-faq__summary::-webkit-details-marker {
  display: none;
}

.ecommerce-page-faq__answer {
  padding:
    0 clamp(var(--space-xl), 2.6vw, var(--space-2xl))
    clamp(var(--space-xl), 2.6vw, var(--space-2xl));
}

.ecommerce-page-final-cta {
  padding-block-end: var(--section-vertical-spacing);
}

.ecommerce-page-final-cta__panel {
  display: grid;
  gap: var(--space-lg);
  inline-size: 100%;
  min-inline-size: 0;
  padding-block-start: clamp(var(--space-2xl), 4vw, var(--space-4xl));
  border-block-start: var(--border-width-standard) solid var(--border-standard);
}

.ecommerce-page-final-cta__copy {
  display: grid;
  gap: var(--space-md);
  min-inline-size: 0;
  max-inline-size: 56rem;
}

@media (min-width: 768px) {
  .ecommerce-page-project-types__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecommerce-page-featured-case__details,
  .ecommerce-page-process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1085px) {
  .ecommerce-page-hero__layout {
    grid-template-columns: minmax(0, 1.14fr) minmax(18rem, 0.78fr);
    align-items: start;
  }

  .ecommerce-page-problem-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .ecommerce-page-project-types__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .ecommerce-page-project-card--featured {
    grid-column: span 6;
  }

  .ecommerce-page-project-card:not(.ecommerce-page-project-card--featured) {
    grid-column: span 3;
  }

  .ecommerce-page-scope__layout {
    grid-template-columns: minmax(0, 0.68fr) minmax(18rem, 0.32fr);
    align-items: start;
  }

  .ecommerce-page-scope__intro-inner {
    position: sticky;
    top: calc(var(--header-height) + var(--space-3xl));
  }

  .ecommerce-page-featured-case__details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ecommerce-page-b2b-link__panel {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ecommerce-page-b2b-link__actions {
    justify-content: flex-end;
  }

  .ecommerce-page-process__steps {
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ecommerce-page-process__steps::before {
    content: "";
    position: absolute;
    inset-inline: clamp(var(--space-3xl), 5vw, var(--space-5xl));
    inset-block-start: calc(clamp(var(--space-xl), 2.6vw, var(--space-3xl)) + 0.5rem);
    block-size: 1px;
    background: var(--border-standard);
    z-index: 0;
  }

  .ecommerce-page-process-step {
    z-index: 1;
  }

  .ecommerce-page-form__panel {
    grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.65fr);
    align-items: start;
  }

  .ecommerce-page-faq__layout {
    grid-template-columns: minmax(18rem, 0.35fr) minmax(0, 0.65fr);
    align-items: start;
  }

  .ecommerce-page-final-cta__panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .ecommerce-page-final-cta__actions {
    justify-self: end;
  }
}

@media (max-width: 1084px) {
  .ecommerce-page-final-cta {
    padding-block-end: var(--section-vertical-spacing-tablet);
  }
}

@media (max-width: 767px) {
  .ecommerce-page-hero,
  .ecommerce-page-final-cta {
    padding-block-end: var(--section-vertical-spacing-mobile);
  }

  .ecommerce-page-final-cta__actions {
    inline-size: 100%;
  }

  .ecommerce-page-final-cta__actions > * {
    flex: 1 1 100%;
  }

  .ecommerce-page-process__steps::before {
    content: none;
  }
}