main {
  background-color: var(--color-background);
}

.section-header {
  max-width: 720px;
  margin: 0 auto var(--space-6);
  text-align: left;
}

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

.section-header p {
  margin-top: var(--space-2);
}

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

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

.shop-hero__content p {
  max-width: 40rem;
}

.shop-hero__eyebrow {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-strong);
  margin-bottom: var(--space-2);
}

.shop-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.shop-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}

.shop-hero__meta-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.shop-hero__visual {
  padding: var(--space-4);
}

.shop-hero__visual-header {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.shop-hero__image {
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.shop-hero__visual-body p {
  margin-bottom: var(--space-3);
}

.shop-hero__link {
  padding-left: 0;
}

.featured-collection__grid {
  grid-template-columns: minmax(0, 1.2fr);
  justify-content: center;
}

.featured-collection__list {
  margin-top: var(--space-2);
}

.featured-collection__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-start;
}

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

.shop-by-pet__visual img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.shop-by-pet__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.shop-by-pet__card h3 {
  margin-bottom: var(--space-2);
}

.shop-by-pet__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.filters-section {
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.filters__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.filters__row--secondary {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
}

.filters__group--range .filters__range-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filters__range-inputs input {
  max-width: 9rem;
}

.filters__range-separator {
  color: var(--gray-400);
}

.filters__group--inline legend {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filters__group--sort {
  align-self: flex-end;
}

.filters__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
}

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

.best-sellers__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: var(--space-8);
  align-items: center;
}

.best-sellers__visual img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.best-sellers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.best-sellers__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.product-grid__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: var(--space-8);
  align-items: flex-start;
}

.product-grid__summary-text {
  margin-bottom: var(--space-3);
}

.product-grid__image {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.product-grid__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.product-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.product-card__title {
  font-size: var(--font-size-lg);
}

.product-card__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.product-card__price {
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.product-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.quick-view__layout {
  display: flex;
  justify-content: center;
}

.quick-view__panel {
  max-width: 720px;
}

.quick-view__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.quick-view__list {
  margin-top: var(--space-2);
}

.quick-view__footer {
  display: flex;
  justify-content: flex-end;
}

.reviews-section__grid {
  margin-top: var(--space-4);
}

.reviews-section__author {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.reviews-section__cta {
  margin-top: var(--space-6);
  text-align: center;
}

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

.mobile-shopping__list {
  margin-top: var(--space-2);
}

.mobile-shopping__visual img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.articles-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: var(--space-8);
  align-items: center;
}

.articles-section__visual img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.articles-section__list {
  margin-top: var(--space-2);
}

.checkout-section__layout {
  display: flex;
  justify-content: center;
}

.checkout-section__content {
  max-width: 720px;
}

.checkout-section__list {
  margin-top: var(--space-2);
}

.checkout-section__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.help-section__layout {
  display: flex;
  justify-content: center;
}

.help-section__content {
  max-width: 640px;
  text-align: center;
}

.help-section__content p {
  margin-bottom: var(--space-4);
}

.featured-collection__card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 1024px) {
  .shop-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-by-pet__layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

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

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

@media (max-width: 900px) {
  .product-grid__items,
  .best-sellers__grid,
  .shop-by-pet__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filters__row,
  .filters__row--secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .filters__group--sort {
    align-self: auto;
  }
}

@media (max-width: 640px) {
  .section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .section-header,
  .checkout-section__content,
  .help-section__content {
    text-align: left;
  }

  .shop-hero__actions,
  .shop-hero__meta,
  .featured-collection__footer,
  .product-card__footer,
  .filters__actions,
  .checkout-section__links {
    justify-content: flex-start;
  }

  .product-grid__items,
  .best-sellers__grid,
  .shop-by-pet__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .filters {
    padding: var(--space-3);
  }

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