/* =====================================================================
   HOME PAGE — featured grid, brands grid
   ===================================================================== */

.home-about .section-title,
.home-featured .section-title,
.home-brands .section-title { margin-top: 10px; }

/* --- Featured section --- */
.home-featured {
  background: var(--bg);
  color: var(--text);
}

.home-featured .section-lead { color: var(--muted); }

.home-featured__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-featured__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}

.home-featured__card {
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg,#151820 0%,#101218 100%);
  border: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-shadow: var(--shadow-card);
}

.home-featured__card:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  border-color: var(--primary);
}

.home-featured__media {
  position: relative;
  aspect-ratio: 16/10;
  background: #11151c;
}

.home-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16/10;
}

.home-featured__info {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-featured__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.home-featured__title,
.home-featured__title a { margin: 0; font-size: 16px; line-height: 1.25; letter-spacing: .02em; color: #fff; }

.home-featured__price {
  white-space: nowrap;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: #f2b705;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.05;
}

.home-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #b8c0cd;
  font-size: 13px;
  margin-top: 10px;
}

.home-featured__meta span {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 6px 10px;
}

.home-featured__actions {
  margin-top: 26px;
  display: flex;
  justify-content: center;
}

/* --- Brands section --- */
.home-brands__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-brands__desc { color: #b8c0cd; }

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

.home-brands__item {
  text-decoration: none;
  text-align: center;
  padding: 14px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg,#151820 0%,#101218 100%);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.home-brands__item:hover {
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  border-color: var(--accent-2);
}

.home-brands__actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* --- Section bg for home body --- */
body.home section:not(.hero):not(.home-news) {
  background: #0d0f14;
}

/* --- User-select off for cards/brands --- */
:where(.home-featured,.home-featured *,.home-brands,.home-brands *) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

:where(.home-featured,.home-featured *,.home-brands,.home-brands *)::selection,
:where(.home-featured,.home-featured *,.home-brands,.home-brands *)::-moz-selection {
  background: transparent;
  color: inherit;
}

/* --- Responsive --- */
@media (max-width:1199px) { .home-brands__grid  { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width:991px)  { .home-featured__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:767px)  {
  .home-featured__grid { grid-template-columns: 1fr; }
  .home-brands__grid   { grid-template-columns: repeat(2,minmax(0,1fr)); }
}