/* ── HERO ── */
.hero { padding: var(--space-5) var(--space-3); text-align: center; }
.hero__title { font-size: var(--font-size-xl); margin-bottom: var(--space-2); }
.hero__subtitle { color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.hero__search { display: flex; gap: var(--space-2); max-width: 480px; margin: 0 auto; }
.hero__search-input {
    flex: 1; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    font-size: var(--font-size-base); font-family: inherit;
}

/* ── SECTION ── */
.section { padding: var(--space-4) var(--space-3); }
.section--alt { background: var(--color-bg-alt); }
.section__title { font-size: var(--font-size-lg); margin-bottom: var(--space-3); }

/* ── CATEGORY ROW ── */
.category-row {
    display: flex; gap: var(--space-3);
    overflow-x: auto; padding-bottom: var(--space-2);
    scrollbar-width: thin;
}
.category-card {
    flex: 0 0 auto; width: 88px; text-align: center;
}
.category-card__image {
    width: 72px; height: 72px; border-radius: 50%;
    overflow: hidden; background: var(--color-bg-alt);
    margin: 0 auto var(--space-1);
}
.category-card__image img { width: 100%; height: 100%; object-fit: cover; }
.category-card__label { font-size: var(--font-size-sm); }

/* ── HOW IT WORKS ── */
.steps-row { display: flex; flex-direction: column; gap: var(--space-3); }
.step { display: flex; align-items: center; gap: var(--space-3); }
.step__number {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}

/* ── VENDOR CARD (Foodpanda-inspired) ── */
.vendor-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
}
.vendor-card {
    border: 1px solid var(--color-border); border-radius: var(--radius);
    overflow: hidden; background: var(--color-bg);
}
.vendor-card__image {
    position: relative; aspect-ratio: 4 / 3; background: var(--color-bg-alt);
}
.vendor-card__image img { width: 100%; height: 100%; object-fit: cover; }
.vendor-card__badge {
    position: absolute; top: var(--space-1); left: var(--space-1);
    background: var(--color-primary); color: #fff;
    font-size: 0.7rem; font-weight: 600;
    padding: 2px 8px; border-radius: 4px;
}
.vendor-card__body { padding: var(--space-2); }
.vendor-card__name { font-size: var(--font-size-base); margin-bottom: 2px; }
.vendor-card__category { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.vendor-card__rating { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); }
.vendor-card__rating-value { font-weight: 700; color: var(--color-primary); }
.vendor-card__rating-count { color: var(--color-text-secondary); }

/* ── DESKTOP ── */
@media (min-width: 768px) {
    .vendor-grid { grid-template-columns: repeat(3, 1fr); }
    .steps-row { flex-direction: row; justify-content: space-around; }
}
@media (min-width: 1024px) {
    .vendor-grid { grid-template-columns: repeat(4, 1fr); }
    .hero { padding: var(--space-5) 0; }
}