/* Homepage composition. Reuse storefront components; keep page-only placement here. */

.home-main {
  padding-block: 10px 0;
}

.home-banner {
  display: grid;
  min-height: 320px;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr);
}

.home-banner__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  padding: clamp(34px, 4vw, 56px);
}

.home-banner h1 {
  max-width: 680px;
  color: var(--site-text-inverse);
  font-size: clamp(36px, 4.4vw, 58px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .98;
}

.home-banner h1 span {
  color: #67b83d;
}

.home-banner p {
  max-width: 560px;
  color: #596158;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
}

.home-banner__visual {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border-inline-start: 1px solid #daddd7;
  background: #e9ece7;
  place-items: center;
}

.home-banner__visual::before {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(17, 20, 15, .08);
  border-radius: 50%;
  content: "";
}

.home-banner__visual svg {
  position: relative;
  z-index: 1;
  width: min(78%, 430px);
  height: auto;
  color: #2d332d;
}

.home-banner__visual .home-banner__accent {
  color: var(--site-accent);
}

.home-banner__visual .home-banner__muted {
  color: #7b837a;
}

/* Purchase conditions under the banner: the shared .benefit-card, laid out
   as compact horizontal link tiles (icon + title + one line) instead of the
   component's tall stacked default. Hover mirrors the category tiles. */
.home-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-block-start: 12px;
}

.home-benefit-card {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 18px;
  border-radius: var(--site-radius-md);
  text-decoration: none;
  transition: background-color 120ms var(--site-ease), border-color 120ms var(--site-ease);
}

/* Light variant (.benefit-card--light, same surface as the banner): hover
   darkens the surface one step instead of the dark tiles' raised surface. */
.home-benefit-card:hover {
  border-color: #c9cec4;
  background: #e9ece7;
}

.home-benefit-card .benefit-card__icon {
  flex: 0 0 38px;
  margin-block-end: 0;
}

.home-benefit-card__text {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.home-benefit-card .benefit-card__title {
  margin-block-end: 0;
  font-size: 15px;
  line-height: 1.25;
}

.home-benefit-card__text > span {
  color: #636a61;
  font-size: 13px;
  line-height: 1.4;
}

.home-categories {
  padding-block: 24px 8px;
}

.home-products {
  padding-block: 44px 8px;
}

.home-categories__heading,
.home-products__heading {
  align-items: center;
  margin-block-end: 18px;
}

.home-categories__heading h2,
.home-products__heading h2 {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -.025em;
  line-height: 1.1;
}

.home-categories__heading .section-heading__action,
.home-products__heading .section-heading__action {
  color: var(--site-accent);
  text-decoration: none;
}

.home-categories__heading .section-heading__action:hover,
.home-categories__heading .section-heading__action:focus-visible,
.home-products__heading .section-heading__action:hover,
.home-products__heading .section-heading__action:focus-visible {
  color: var(--site-accent-hover);
}

.home-categories__grid,
.home-products__grid {
  display: grid;
  gap: 12px;
}

.home-categories__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-products__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}



/* The brand strip and the SEO text share the section rhythm of the
   category/product blocks above them. */
.home-brands {
  padding-block: 44px 8px;
}

.home-brands__heading {
  align-items: center;
  margin-block-end: 18px;
}

.home-brands__heading h2 {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -.025em;
  line-height: 1.1;
}

.home-brands__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.home-brand-card {
  display: flex;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-md);
  background: var(--site-surface);
  color: var(--site-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color 120ms var(--site-ease), border-color 120ms var(--site-ease), color 120ms var(--site-ease);
}

.home-brand-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-brand-card:hover {
  border-color: var(--site-border-strong);
  background: var(--site-surface-raised);
  color: var(--site-accent);
}

/* The page's own text under the sections: the same restrained text surface
   and rich-text rules the content pages use (page.css), so homepage text
   renders exactly like /about/ instead of a second local copy of them. */
.home-text {
  padding-block: 44px 8px;
}

.home-text__article {
  padding: 32px 36px 36px;
}

/* The shared body caps its measure for a text page; on the homepage the
   card is the full container, and the cap left the text wrapping early
   against one edge. Here the paragraphs use the whole card width. */
.home-text__article .store-content-page__body {
  width: 100%;
}

/* Wide lines leave a one- or two-word tail on the last line of a paragraph,
   which is what makes the block look ragged. pretty balances the last
   lines instead of rewriting the copy to fit a width that changes. */
.home-text__article .store-content-page__body p {
  text-wrap: pretty;
}

/* Closing call to action above the footer: the shared .promo-banner on the
   dark surface (the hero above is the light variant), text and actions in
   one row. Text-only by design - the page already carries one illustrated
   banner, and a second would compete with it. */
.home-cta {
  margin-block-start: 44px;
}

.home-cta__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 36px;
}

.home-cta__text {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.home-cta h2 {
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.home-cta p {
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.55;
}

.home-cta__actions {
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .home-products__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-brands__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

@media (max-width: 980px) {
  .home-banner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  }

  .home-banner__content {
    padding: 36px;
  }

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

  .home-products__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-brands__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .home-benefits {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-main {
    padding-block-start: 6px;
  }

  .home-banner {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .home-banner__content {
    padding: 32px;
  }

  .home-banner__visual {
    min-height: 220px;
    border-block-start: 1px solid #daddd7;
    border-inline-start: 0;
  }

  .home-categories {
    padding-block-start: 20px;
  }

  .home-products,
  .home-brands,
  .home-text {
    padding-block-start: 36px;
  }

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

@media (max-width: 620px) {
  .home-banner {
    border-radius: var(--site-radius-lg);
  }

  .home-banner__content {
    gap: 16px;
    padding: 26px 22px;
  }

  .home-banner h1 {
    font-size: clamp(32px, 10vw, 42px);
  }

  .home-banner__visual {
    display: none;
  }

  .home-categories__heading,
  .home-products__heading,
  .home-brands__heading {
    gap: 16px;
  }

  .home-categories__heading h2,
  .home-products__heading h2,
  .home-brands__heading h2 {
    font-size: 22px;
  }

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

  .home-text__article {
    padding: 26px 20px 30px;
  }

  .home-cta {
    margin-block-start: 36px;
  }

  .home-cta__content {
    padding: 26px 22px 28px;
  }

  .home-cta__actions {
    width: 100%;
  }

  .home-cta__actions .site-button {
    flex: 1 1 auto;
  }

  .home-categories__grid {
    grid-template-columns: 1fr;
  }

  .home-categories__grid,
  .home-products__grid {
    gap: 10px;
  }

}

@media (max-width: 520px) {
  .home-products__grid {
    grid-template-columns: 1fr;
  }
}