.shop-bg {
  background-image: url("/imgs/posting/authorized-training.webp");
}

.shop-success-bg,
.shop-cancel-bg {
  background-image: linear-gradient(
    160deg,
    var(--color-primary-hover) 0%,
    var(--color-primary) 48%,
    var(--color-glass-strong) 100%
  );
  min-height: 0;
}

.shop-success-bg .hero-content,
.shop-cancel-bg .hero-content {
  align-items: center;
  text-align: center;
  padding-top: calc(var(--space-3xl) + var(--space-2xl));
  padding-bottom: var(--space-3xl);
}

.shop-success-bg .hero-title,
.shop-success-bg .hero-subtitle,
.shop-cancel-bg .hero-title,
.shop-cancel-bg .hero-subtitle {
  max-width: 100%;
}

.shop-success-bg .hero-subtitle,
.shop-cancel-bg .hero-subtitle {
  margin-bottom: 0;
}

.shop-success-bg .hero-buttons,
.shop-cancel-bg .hero-buttons {
  display: none;
}

#course-list {
  scroll-margin-top: calc(var(--space-3xl) + var(--space-xl));
}

.shop-intro,
.shop-result {
  background: var(--color-surface);
}

.shop-courses,
.shop-faq {
  background: var(--color-primary-soft);
}

.shop-family-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.shop-family {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.shop-family-summary {
  cursor: pointer;
  padding: var(--space-lg);
}

.shop-family-summary h3 {
  display: inline;
  margin-bottom: 0;
}

.shop-family-grid {
  padding: 0 var(--space-lg) var(--space-lg);
}

.shop-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shop-card-form {
  margin-top: auto;
}

.shop-card-form .btn {
  width: 100%;
}

.shop-result-card {
  max-width: calc(var(--space-3xl) * 10);
}

.shop-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}