/* ============================================================
   Featured collection — product grid (unified product-card).
   2-up mobile / 3-up tablet / N-up desktop. Matches the
   ProductCard parity spec (gap: var(--grid-gap)). Tokens only.
   ============================================================ */

.lh-featured {
  padding-block: var(--section-pad-top) var(--section-pad-bottom);
}
/* Bottom divider for clear separation from the following section — matches the
   Shop by Style treatment (.lh-sbs--bordered). */
.lh-featured--bordered { border-bottom: 1px solid var(--border-subtle); }

/* Phones: the tighter card spacing from Theme settings -> Layout (tokens.css --card-gap-*). */
.lh-featured__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap-y) var(--card-gap-x);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-featured__cell { display: flex; }
.lh-featured__cell > * { width: 100%; }

@media (min-width: 768px) {
  .lh-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
}
@media (min-width: 1024px) {
  .lh-featured__grid {
    grid-template-columns: repeat(var(--lh-featured-cols, 4), minmax(0, 1fr));
    gap: var(--grid-gap-lg);
  }
}

/* Onboarding placeholder */
.lh-featured__placeholder {
  width: 100%;
  aspect-ratio: 0.82;
  background: var(--surface-image);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lh-featured__placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}