/* Ecommerce web design page ------------------------------------------------ */
.ec-hero { padding-bottom: 64px; }
.ec-hero__browser { width: 88%; }
.ec-hero .ec-hero__phone { position: absolute; right: 0; bottom: 24px; width: 27%; }
.ec-hero__basket { position: absolute; z-index: 2; left: -8%; bottom: 14%; width: 230px; }
.ec-hero__note { position: absolute; left: 0; bottom: 0; }
.ec-friction__photo { aspect-ratio: 4 / 4.8; }

.ec-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); font-size: .98rem; }
.ec-table th, .ec-table td { text-align: left; vertical-align: top; padding: 18px 24px; border-bottom: 1px solid var(--line-soft); }
.ec-table thead th { font: 600 1.2rem/1.2 var(--font-display); letter-spacing: -.01em; background: var(--ink); color: #fff; border-bottom: 0; }
.ec-table thead th:first-child { color: var(--on-dark-muted); font: 600 var(--fs-xs)/1.6 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.ec-table tbody th { width: 22%; font: 600 1rem/1.4 var(--font-display); color: var(--text); }
.ec-table td { color: var(--muted); width: 39%; }
.ec-table tbody tr:last-child > * { border-bottom: 0; }
.ec-table tbody tr:hover > * { background: #FBFAF7; }
.ec-table-note { margin-top: 24px; display: flex; gap: 12px; align-items: flex-start; max-width: 52em; color: var(--muted); }
.ec-table-note i { color: var(--brand); margin-top: 5px; }
.ec-table-note a { color: var(--brand); font-weight: 500; }

.ec-showcase { padding-bottom: 8px; }
.ec-showcase .browser { width: 90%; }
.ec-showcase .phone { position: absolute; right: 0; top: 18%; width: 26%; }

@media (max-width: 1023px) {
  .ec-hero__basket { left: 2%; bottom: 18%; }
}
@media (max-width: 767px) {
  .ec-table, .ec-table tbody, .ec-table tr, .ec-table th, .ec-table td { display: block; width: 100%; }
  .ec-table thead { display: none; }
  .ec-table tbody tr { border-bottom: 1px solid var(--line-soft); padding: 8px 0 12px; }
  .ec-table tbody tr:last-child { border-bottom: 0; }
  .ec-table tbody th { width: 100%; padding: 14px 18px 6px; border: 0; }
  .ec-table td { padding: 6px 18px; border: 0; }
  .ec-table td::before { content: attr(data-label) ': '; display: block; font: 600 .78rem/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
}
@media (max-width: 599px) {
  .ec-hero__basket { display: none; }
  .ec-hero .ec-hero__phone { width: 30%; bottom: 30px; }
  .ec-hero__browser { width: 90%; }
}