/* =====================================================================
   OneSource — Home v2  ·  Sections 3 & 4
   3. Favourite Categories rail (circular)
   4. Hero banner grid (1 large + 2 stacked)
   Prefix: .ec-*  — no collision with legacy .ecom-*
   ===================================================================== */

.ec-wrap {
  max-width: var(--ecom-container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ═══════════ 3 · FAVOURITE CATEGORIES ═══════════ */
.ec-favcats { background: #fff; padding: 26px 0 8px; }
.ec-favcats__inner {
  max-width: var(--ecom-container);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex; align-items: flex-start; gap: 28px;
}

.ec-favcats__title {
  flex: 0 0 130px;
  margin: 22px 0 0;
  font-size: 17px; line-height: 1.35;
  font-weight: var(--ecom-fw-bold); color: var(--ec-ink);
}

.ec-favcats__rail {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-start; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--ec-line) transparent;
}
.ec-favcats__rail::-webkit-scrollbar { height: 6px; }
.ec-favcats__rail::-webkit-scrollbar-thumb { background: var(--ec-line); border-radius: 99px; }
.ec-favcats__rail::-webkit-scrollbar-track { background: transparent; }

.ec-favcat {
  flex: 0 0 104px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 6px 4px; border-radius: 12px;
  text-align: center;
  transition: transform .2s ease;
}
.ec-favcat:hover { transform: translateY(-3px); }

.ec-favcat__disc {
  width: 76px; height: 76px; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  background: var(--ec-navy-soft);
  border: 2px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ec-favcat__disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-favcat__disc i { font-size: 28px; color: var(--ec-navy); }
.ec-favcat:hover .ec-favcat__disc {
  border-color: var(--ec-coral);
  box-shadow: 0 4px 14px rgba(248,89,59,.18);
}

.ec-favcat__name {
  font-size: 12.5px; font-weight: var(--ecom-fw-medium);
  color: var(--ec-body); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ec-favcat:hover .ec-favcat__name { color: var(--ec-navy); }

/* ═══════════ 4 · HERO BANNER GRID ═══════════ */
.ec-hero { background: #fff; padding: 18px 0 30px; }
.ec-hero__grid {
  max-width: var(--ecom-container);
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.ec-hero__cell {
  display: block; overflow: hidden;
  border-radius: 16px;
  background: var(--ec-navy-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ec-hero__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-hero__cell:hover { transform: translateY(-2px); box-shadow: var(--ecom-shadow-lg); }

.ec-hero__main {
  grid-column: 1; grid-row: 1 / span 2;
  aspect-ratio: 660 / 437;
}
.ec-hero__side { grid-column: 2; aspect-ratio: 327 / 210; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
  .ec-favcats__inner { flex-direction: column; gap: 14px; }
  .ec-favcats__title { flex: none; margin: 0; }
  .ec-favcats__rail { width: 100%; }
}

@media (max-width: 860px) {
  .ec-hero__grid { grid-template-columns: 1fr; }
  .ec-hero__main { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 10; }
  .ec-hero__side { grid-column: 1; aspect-ratio: 16 / 9; }
}

@media (max-width: 680px) {
  .ec-favcats { padding-top: 18px; }
  .ec-favcats__inner,
  .ec-hero__grid,
  .ec-wrap { padding-inline: 16px; }
  .ec-favcat { flex-basis: 88px; }
  .ec-favcat__disc { width: 64px; height: 64px; }
  .ec-favcat__disc i { font-size: 23px; }
  .ec-favcat__name { font-size: 11.5px; }
  .ec-hero__grid { gap: 12px; }
  .ec-hero__cell { border-radius: 12px; }
}