main {
  padding-top: var(--space-32);
  padding-bottom: var(--space-48);
}

.section {
  padding-top: var(--space-40);
  padding-bottom: var(--space-40);
}

.section:nth-of-type(odd) {
  background-color: var(--color-bg);
}

.section:nth-of-type(even) {
  background-color: #ffffff;
}



.section-header p {
  margin-bottom: 0;
}

.section-header-inline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-24);
}

.section-header-inline .section-header-actions {
  flex-shrink: 0;
}

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

.section-layout-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.section-content p {
  margin-bottom: var(--space-16);
}

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

.section-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}

.section-list li + li {
  margin-top: var(--space-8);
}

.section-footer-link {
  margin-top: var(--space-24);
}

.section-footer-link a {
  font-size: var(--text-sm);
}

.hero {
  padding-top: var(--space-48);
  padding-bottom: var(--space-40);
}

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

.hero-kicker {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: var(--space-8);
}

.hero h1 {
  margin-bottom: var(--space-16);
}

.hero-text {
  font-size: var(--text-md);
  margin-bottom: var(--space-20);
}

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

.hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-16);
  font-size: var(--text-sm);
}

.hero-meta-label {
  display: block;
  color: var(--gray-500);
}

.hero-meta-value {
  font-weight: 600;
}

.hero-image-wrapper {
  height: 100%;
}

.hero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-categories-grid {
  align-items: center;
}

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

.category-card-actions {
  margin-top: var(--space-12);
}

.category-links-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  font-size: var(--text-sm);
}

.section-bestsellers-grid {
  margin-top: var(--space-24);
}

.product-card-image {
  margin-bottom: var(--space-12);
}

.product-card-body {
  font-size: var(--text-sm);
}

.product-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.product-card-title {
  font-size: var(--text-md);
  margin-bottom: var(--space-8);
}

.product-card-text {
  margin-bottom: var(--space-12);
}

.product-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.product-card-price {
  font-weight: 600;
  color: var(--color-text);
}

.product-card-rating {
  font-variant-numeric: tabular-nums;
}

.section-stats {
  display: grid;
  gap: var(--space-16);
}

.section-stat-card {
  text-align: left;
}

.section-stat-number {
  font-size: var(--text-3xl);
  font-family: var(--font-accent);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.section-stat-label {
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.section-why-grid {
  margin-top: var(--space-24);
}

.why-card .card-body {
  margin-bottom: var(--space-12);
}

.why-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.why-list li + li {
  margin-top: var(--space-4);
}

.section-reviews-list {
  display: grid;
  gap: var(--space-16);
}

.review-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
}

.review-text {
  font-size: var(--text-sm);
  margin-bottom: var(--space-8);
}

.review-meta {
  font-size: var(--text-xs);
  color: var(--gray-600);
}

.reviews-summary {
  margin-top: var(--space-16);
  margin-bottom: var(--space-16);
}

.reviews-score-main {
  font-size: var(--text-3xl);
  font-family: var(--font-accent);
  font-weight: 600;
}

.reviews-score-sub {
  display: block;
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.reviews-note {
  font-size: var(--text-sm);
}

.section-guides .section-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-brands-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-24);
}

.brand-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
}

.brand-text {
  font-size: var(--text-sm);
}

.section-newsletter {
  background-color: var(--color-primary-soft);
}

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

.newsletter-form {
  background-color: #ffffff;
  padding: var(--space-20);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.newsletter-input-row {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-4);
}

.newsletter-input-row .input {
  flex: 1 1 auto;
}

.newsletter-submit {
  flex-shrink: 0;
}

.section-cta-final {
  padding-top: var(--space-32);
  padding-bottom: var(--space-24);
}

.section-cta-final-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
}

.section-cta-final-inner p {
  max-width: 520px;
}

@media (max-width: 960px) {
  .hero-inner,
  .section-layout,
  .section-layout-reverse,
  .section-newsletter-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-header-inline {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    padding-top: var(--space-40);
  }
}

@media (max-width: 768px) {
  main {
    padding-top: var(--space-24);
    padding-bottom: var(--space-32);
  }

  .section {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }

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

  .newsletter-input-row {
    flex-direction: column;
  }

  .section-brands-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-cta-final-inner {
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: var(--text-3xl);
  }

  h2 {
    font-size: var(--text-2xl);
  }

  .hero {
    padding-top: var(--space-32);
  }
}