/* Типографіка та блоки головної (банер .home-hero не чіпаємо) */

.page-home .home-section .section__title,
.page-home .home-section .product-card__title,
.page-home .home-section .product-card__price,
.page-home .home-section .product-card__price-old,
.page-home .home-value-card__title,
.page-home .home-brand__name,
.page-home .home-tabs__btn {
  font-family: var(--font-body);
}

.page-home .home-section .section__title {
  font-weight: 620;
  letter-spacing: -0.025em;
}

.page-home .home-section .product-card__title {
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.page-home .home-section .product-card__price {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-home .home-section .product-card__price-old {
  font-size: 0.78rem;
}

/* Таби «Популярне зараз» — фільтр лише DOM-карток */
.home-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  margin: 0 0 var(--sp-4);
  padding: 0.1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.home-tabs::-webkit-scrollbar {
  display: none;
}

.home-tabs__btn {
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-chip, var(--color-surface));
  color: var(--color-chip-text, var(--color-muted));
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.home-tabs__btn.is-active,
.home-tabs__btn[aria-selected="true"] {
  background: var(--btn-primary-bg, var(--color-primary));
  border-color: var(--btn-primary-bg, var(--color-primary));
  color: var(--btn-primary-text, #fff);
}

.home-tabs__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-ink) 45%, transparent);
  outline-offset: 2px;
}

/* Картки товарів — та сама ширина/краї, що й блок категорій */
.page-home .product-grid--home {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: var(--sp-2);
  justify-content: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .page-home .product-grid--home {
    gap: var(--sp-3);
  }
}

@media (min-width: 768px) {
  .page-home .product-grid--home {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .page-home .product-grid--home {
    gap: var(--sp-3);
  }
}

.page-home .product-card--home {
  width: 100%;
  padding: var(--sp-3);
  background: var(--bg-card, var(--color-surface));
  border: 1px solid var(--border-color, var(--color-border));
  border-radius: 12px;
  box-shadow: none;
}

.page-home .product-card--home:hover {
  transform: translateY(-2px);
  border-color: var(--border-color, var(--color-border));
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08);
}

.page-home .product-card--home .product-card__media {
  aspect-ratio: 1 / 1;
  background: var(--btn-secondary-bg, var(--color-surface-soft));
  border-radius: var(--radius-sm);
}

.page-home .product-card--home .product-card__media img {
  padding: 0.35rem;
  object-fit: contain;
}

.page-home .product-card--home .product-card__body {
  gap: 0.35rem;
  padding: 0.55rem 0.2rem 0.15rem;
}

.page-home .product-card--home .product-card__brand {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.page-home .product-card--home .product-card__meta {
  padding-top: 0;
}

.page-home .product-card--home .product-card__actions {
  padding-top: var(--sp-2);
}

.page-home .product-card--home .product-card__badge {
  font-size: 0.65rem;
  padding: 0.2rem 0.45rem;
}

.page-home .product-card__badge--hit {
  background: var(--accent-orange, var(--color-accent));
  color: var(--accent-orange-text, #fff);
}

.page-home .product-card__badge--sale {
  background: var(--accent-orange, var(--price-discount));
  color: var(--accent-orange-text, #fff);
}

.page-home .product-card__badge--new {
  background: var(--status-success, var(--color-success));
  color: #fff;
}

.page-home .btn--cart {
  gap: 0.35rem;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 650;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--btn-primary-bg, var(--color-primary)) 22%, transparent);
}

.page-home .btn--cart__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.page-home .product-card--home.is-tab-hidden {
  display: none;
}

@supports (-webkit-touch-callout: none) {
  .page-home .product-card--home .product-card__media img {
    -webkit-transform: translateZ(0);
  }

  .page-home .btn--cart {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Value propositions */
.home-value-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.home-value-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  padding: 1rem 1.05rem;
  background: var(--bg-card, var(--color-surface));
  border: 1px solid var(--border-color, var(--color-border));
  border-radius: 12px;
  box-shadow: none;
  transition: all 0.2s ease;
}

.home-value-card:hover {
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08);
}

.home-value-card__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  align-self: start;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.1rem;
  border-radius: 0.65rem;
  color: var(--accent-orange-hover, var(--color-accent-hover));
  background: color-mix(in srgb, var(--accent-orange, var(--color-accent)) 16%, #fff);
}

.home-value-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.home-value-card__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.home-value-card__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.45;
}

/* Brands */
.home-brands-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.home-brand {
  display: grid;
  place-items: center;
  min-height: 3.5rem;
  padding: 0.75rem 0.95rem;
  text-decoration: none;
  color: var(--text-muted, var(--color-muted));
  background: var(--bg-card, var(--color-surface));
  border: 1px solid var(--border-color, var(--color-border));
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.home-brand:hover,
.home-brand:focus-visible {
  color: var(--text-main, var(--color-ink));
  border-color: var(--border-color, var(--color-border));
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.home-brand__logo {
  max-width: 7.5rem;
  max-height: 2.25rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.72);
  transition: filter 0.22s ease;
}

.home-brand:hover .home-brand__logo,
.home-brand:focus-visible .home-brand__logo {
  filter: grayscale(0) opacity(1);
}

.home-brand__name {
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .home-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }

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

@media (min-width: 1024px) {
  .home-value-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .home-value-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 1rem 0.95rem;
    min-height: 100%;
  }

  .home-value-card__icon {
    grid-row: auto;
    margin-bottom: 0.35rem;
  }

  .home-brands-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

@supports (-webkit-touch-callout: none) {
  .home-tabs__btn,
  .home-brand,
  .page-home .btn--cart {
    -webkit-tap-highlight-color: transparent;
  }

  .home-tabs {
    padding-bottom: 0.25rem;
  }
}