/* ============================================================================
   E-Marketplace — v2 only.

   v1 carries Explore the App inline on the home screen: five fused pills over
   one paged 12-tile grid, so most of the catalogue is behind a swipe. This
   page keeps the filter pills but drops the paging — every category is a
   titled block and the whole catalogue is there to scroll, after the pattern
   of the GCash "View All" screen. Nothing is hidden behind a page or a tab.
   ========================================================================= */

.app--services {
  display: flex; flex-direction: column;
  background: var(--c-panel);
}

/* ── the pill rail: stays put while the catalogue scrolls under it ──────── */
.svcpills {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 10px;
  padding: 12px var(--geo-gutter);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-sep);
  overflow-x: auto; scrollbar-width: none;
}
.svcpills::-webkit-scrollbar { width: 0; height: 0; }
.svcpill {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--c-tab-idle); color: var(--c-txt);
  font-family: var(--font); font-size: 14px; font-weight: var(--fw-semi);
  white-space: nowrap;
}
.svcpill[aria-pressed='true'] { background: var(--c-chrome); color: var(--c-white); }

.svcscroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding-bottom: calc(var(--geo-nav-slant) + var(--geo-nav-bar) + var(--geo-safe-bottom) + 16px);
}
.svcscroll::-webkit-scrollbar { width: 0; height: 0; }

/* ── one block per category, grey showing through between them ──────────── */
.svcsection {
  padding: 18px var(--geo-gutter) 22px;
  margin-bottom: 10px;
  background: var(--c-white);
}
.svcsection:last-child { margin-bottom: 0; }
.svcsection__hd {
  margin: 0 0 4px;
  font-size: 19px; font-weight: var(--fw-bold); color: var(--c-txt-heading);
}
.svcsection__note {
  margin: 0 0 6px;
  font-size: 13px; font-style: italic; color: var(--c-n);
}

.svcgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 4px; }
.svcitem {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 2px 8px;
  border: 0; border-radius: 10px; background: none; cursor: pointer;
}
.svcitem:active { background: var(--c-panel); }
.svcitem__ic { height: 44px; display: flex; align-items: center; justify-content: center; }
.svcitem__ic img { width: 48px; height: 44px; object-fit: contain; }
.svcitem__label {
  font-family: var(--font); font-size: 11px; font-weight: var(--fw-med);
  color: var(--c-txt); text-align: center; line-height: 1.25;
}