.section--hero-puzzles {
  padding-top: var(--space-56);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-32);
  align-items: center;
}

.hero-copy p {
  max-width: 40rem;
}

.hero-actions {
  margin-top: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.hero-media {
  max-width: 480px;
  margin-left: auto;
}

.hero-meta {
  margin-top: var(--space-16);
}

.section-header {
  margin-bottom: var(--space-24);
}

.puzzle-category-grid .card-subtitle {
  font-size: var(--font-size-sm);
}

.puzzle-meta {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.rating-highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.rating svg,
.rating span {
  line-height: 1;
}

.featured-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-32);
  align-items: stretch;
}

.featured-media {
  height: 100%;
}

.featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

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

.featured-meta-list {
  margin-top: var(--space-8);
  color: var(--gray-600);
}

.availability-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  background-color: rgba(95, 214, 177, 0.16);
  color: #047857;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.availability-tag--limited {
  background-color: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

.benefits-grid ul,
.guide-grid ul,
.availability-grid ul {
  margin-top: var(--space-8);
}

.new-arrivals-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: var(--space-32);
  align-items: center;
}

.new-arrivals-media img {
  border-radius: var(--radius-lg);
}

.arrival-meta {
  margin-top: var(--space-12);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.filter-panel {
  margin-top: var(--space-16);
}

.filter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.filter-row .form-field {
  flex: 1 1 180px;
}

.filter-row--chips {
  align-items: center;
}

.filter-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.filter-row--actions {
  align-items: center;
}

.guide-grid .guide-card,
.benefits-grid .benefit-card,
.availability-grid .availability-card,
.checkout-grid .checkout-card,
.help-grid .help-card {
  height: 100%;
}

.reviews-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: var(--space-32);
  align-items: center;
}

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

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


.help-grid {
  align-items: stretch;
}

.checkout-grid {
  align-items: stretch;
}

@media (max-width: 1024px) {
  .hero-grid,
  .featured-layout,
  .new-arrivals-layout,
  .reviews-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-media,
  .featured-media,
  .new-arrivals-media,
  .reviews-media {
    max-width: 520px;
    margin: 0 auto;
  }

  .rating-highlight {
    align-items: flex-start;
    margin-top: var(--space-8);
  }
}

@media (max-width: 640px) {
  .section--hero-puzzles {
    padding-top: var(--space-40);
  }

  .filter-row {
    flex-direction: column;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}