.hub-hero {
  padding: 84px 0 44px;
  background: linear-gradient(180deg, var(--halo-paper), var(--halo-cloud));
}

.hub-hero h1 {
  max-width: 920px;
  margin-bottom: 18px;
  font-size: var(--halo-type-display);
  line-height: 1;
  letter-spacing: var(--halo-tracking-tight);
  font-weight: 600;
}

.route-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.route-tile {
  display: grid;
  gap: 12px;
  min-height: 160px;
  padding: 22px;
  border: 1px solid var(--halo-line);
  border-radius: var(--radius-md);
  background: var(--halo-paper);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 28px;
  align-items: start;
}

.pdp-gallery {
  display: grid;
  gap: 12px;
}

.pdp-gallery__main {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--halo-cloud);
}

.pdp-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.thumb-row button {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--halo-cloud);
  cursor: pointer;
}

.thumb-row button.is-active {
  border-color: var(--halo-black);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.swatch {
  width: 42px;
  height: 42px;
  border: 2px solid var(--halo-line);
  border-radius: 50%;
  cursor: pointer;
}

.swatch.is-active {
  border-color: var(--halo-black);
  outline: 3px solid var(--halo-yellow);
}

.option-card,
.addon-card,
.plan-card {
  padding: 18px;
  border: 1px solid var(--halo-line);
  border-radius: var(--radius-md);
  background: var(--halo-paper);
}

.option-card.is-selected,
.addon-card.is-selected,
.plan-card.is-selected {
  border-color: var(--halo-black);
  box-shadow: inset 0 0 0 2px var(--halo-black);
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--halo-line);
}

.price-row strong {
  font-size: 2rem;
}

.template-hero {
  padding: 72px 0;
  background: var(--halo-black);
  color: var(--halo-paper);
}

.template-hero h1 {
  max-width: 920px;
  margin-bottom: 16px;
  font-size: var(--halo-type-hero);
  line-height: 1.02;
  letter-spacing: var(--halo-tracking-tight);
  font-weight: 600;
}

.timeline {
  display: grid;
  gap: 14px;
  counter-reset: step;
}

.timeline__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--halo-line);
  border-radius: var(--radius-md);
  background: var(--halo-paper);
}

.timeline__item::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--halo-yellow);
  font-weight: 900;
}

.catalog-group {
  display: grid;
  gap: 14px;
  margin-bottom: 42px;
}

.catalog-summary {
  display: grid;
  gap: 22px;
  margin-bottom: 42px;
  padding: 22px;
  border: 1px solid var(--halo-line);
  border-radius: var(--radius-md);
  background: var(--halo-cloud);
}

.catalog-summary h2 {
  margin-bottom: 8px;
  font-size: var(--halo-type-section);
  line-height: 1;
}

.catalog-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.catalog-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px;
  border: 1px solid var(--halo-line);
  border-radius: var(--radius-sm);
  background: var(--halo-paper);
}

.catalog-stat span,
.catalog-meta {
  color: var(--halo-muted);
  font-size: 0.8rem;
}

.catalog-priority {
  display: grid;
  gap: 12px;
}

.component-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--halo-line);
  border-radius: var(--radius-md);
  background: var(--halo-paper);
}

.promo-state {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--halo-cloud);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }

  .component-row {
    grid-template-columns: 1fr;
  }
}