main {
  padding-top: var(--space-8);
}

.hero-ordering {
  background: radial-gradient(circle at top left, #e0edff 0, #f5f7fb 45%, #f5f7fb 100%);
}

.hero-ordering-grid {
  align-items: center;
  gap: var(--space-8);
}

.hero-ordering-content {
  max-width: 34rem;
}

.hero-ordering-media {
  max-width: 32rem;
  margin-left: auto;
}

.section-ordering-overview {
  margin-top: -2rem;
}

.ordering-overview-grid {
  align-items: flex-start;
}

.ordering-overview-list {
  list-style: decimal;
  padding-left: 1.25rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.ordering-overview-list li + li {
  margin-top: 0.5rem;
}

.ordering-key-points {
  height: 100%;
}

.section-browse-products {
  background-color: #ffffff;
}

.browse-products-grid {
  align-items: center;
}

.browse-products-media {
  max-width: 30rem;
}

.browse-products-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.browse-card .btn {
  margin-top: var(--space-4);
}

.section-how-to-order {
  background: linear-gradient(135deg, #f9fafb, #edf2ff);
}

.how-to-order-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.step-card {
  position: relative;
}

.step-list {
  list-style: disc;
  padding-left: 1.25rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.step-list li + li {
  margin-top: 0.25rem;
}

.delivery-payment-grid {
  align-items: flex-start;
}

.delivery-table tbody tr:last-child td {
  border-bottom: none;
}

.payment-card {
  margin-top: var(--space-4);
}

.payment-list,
.tracking-list,
.bulk-list,
.confirmation-list,
.returns-list,
.support-list {
  list-style: disc;
  padding-left: 1.25rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.payment-list li + li,
.tracking-list li + li,
.bulk-list li + li,
.confirmation-list li + li,
.returns-list li + li,
.support-list li + li {
  margin-top: 0.25rem;
}

.section-tracking-bulk {
  background-color: #ffffff;
}

.tracking-media {
  border-radius: var(--radius-lg);
}

.section-confirmation-returns {
  background: #f9fafb;
}

.section-support-faqs {
  background-color: #ffffff;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.faq-item {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-3) var(--space-4);
  background-color: #ffffff;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item p {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.section-ordering-cta {
  background: linear-gradient(120deg, #1d4ed8, #2563eb);
  color: #ffffff;
}

.ordering-cta-inner h2,
.ordering-cta-inner p {
  color: #ffffff;
}

.ordering-cta-text {
  max-width: 36rem;
}

.ordering-cta-actions .btn-secondary {
  background-color: #ffffff;
  color: var(--color-primary-strong);
  border-color: transparent;
}

@media (max-width: 1024px) {
  .browse-products-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-ordering-grid {
    grid-template-columns: 1fr;
  }

  .hero-ordering-media {
    max-width: 100%;
    margin-left: 0;
    margin-top: var(--space-4);
  }

  .how-to-order-grid {
    grid-template-columns: 1fr;
  }

  .delivery-payment-grid,
  .tracking-bulk-grid,
  .confirmation-returns-grid,
  .support-faqs-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .section-ordering-overview {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .hero-actions,
  .ordering-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .faq-item {
    padding-inline: var(--space-3);
  }
}