/* ============================================================================
   v2 — the dashboard reworked along the lines of the Jollibee app's home
   screen. Three deliberate moves, all of them layout:

     1. No header. Jollibee's red header carries only the pickup branch, and
        SFC+ has no branches, so the row goes. What survives is a red band
        behind the status bar, keeping the brand anchored at the top, and the
        greeting moves into the points card the way Jollibee's does.
     2. The points card drops to 10% of the screen — a single row of avatar,
        greeting, balance and a QR.
     3. The carousel rises to 37.5%, with the neighbouring slides peeking
        either side. Driven by the swipe and v1's own dots, so the control
        cluster the first pass carried is gone. At 348 x 350 the slide box
        is square, so the art it wants is 1:1 — not the 0.78:1 the first
        pass called for.

   Consequence worth naming: with no header, the card has nothing to pin over,
   so v2 scrolls as one page. v1's two nested scrollers are gone.

   Loads AFTER components.css and overrides it. Everything below the carousel —
   Explore, Activity History, the nav bar — is shared, unchanged.
   ========================================================================= */

:root {
  --v2-card-h:     calc(var(--geo-screen-h) * 0.10);  /* 10% of the screen */
  --v2-carousel-h: calc(var(--geo-screen-h) * 0.375); /* 37.5% — 75% of the first pass */
  --v2-slide-w:    348px;                             /* ~81%, leaving both neighbours visible */
  --v2-slide-gap:  10px;
}

/* ── one natural scroll, no pinned card ─────────────────────────────────── */
.app--v2 { display: flex; flex-direction: column; }
.scroll-v2 {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding-bottom: calc(var(--geo-nav-slant) + var(--geo-nav-bar) + var(--geo-safe-bottom) + 8px);
}
.scroll-v2::-webkit-scrollbar { width: 0; height: 0; }

/* ── points card ─────────────────────────────────────────────────────────── */
.pcard {
  display: flex; align-items: center; gap: 14px;
  width: calc(100% - (var(--geo-gutter) * 2));
  height: var(--v2-card-h);
  margin: 16px var(--geo-gutter) 0;
  padding: 0 16px;
  text-align: left;
  background: var(--c-white);
  border: 2px solid var(--c-prim);
  border-radius: 20px;
  cursor: pointer;
  /* Flat, like everything else on the page — a raised ledge here read as a
     different kind of object. The QR chip carries the affordance instead. */
  transition: transform .1s ease;
}
.pcard:active { transform: scale(0.985); }
.pcard__avatar {
  flex: 0 0 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
}
.pcard__avatar img { width: 100%; height: 100%; object-fit: contain; }
.pcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pcard__greet {
  font-family: var(--font); font-size: 17px; font-weight: var(--fw-semi); color: var(--c-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard__pts { font-family: var(--font); font-size: 15px; font-weight: var(--fw-reg); color: var(--c-txt); }
.pcard__pts b { font-size: 17px; font-weight: var(--fw-bold); color: var(--c-prim); }
/* A QR glyph rather than a chevron: the card's destination is the rewards
   code you show at the till, so the affordance says what it opens. */
.pcard__qr {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  border: 2px solid var(--c-prim); border-radius: 12px;
  background: #FFF2F2;
  color: var(--c-prim);
}
.pcard__qr svg { width: 30px; height: 30px; fill: currentColor; }

/* ── carousel at half the screen, neighbours peeking ────────────────────── */
.carousel--peek {
  --slide-w: var(--v2-slide-w);
  --slide-gap: var(--v2-slide-gap);
  margin-top: 24px;
  height: var(--v2-carousel-h);
}
.carousel--peek .carousel__viewport { height: 100%; overflow: hidden; }
.carousel--peek .carousel__track {
  gap: var(--slide-gap);
  padding-left: calc((100% - var(--slide-w)) / 2);
}
.carousel--peek .carousel__slide { flex: 0 0 var(--slide-w); align-items: stretch; }
.carousel--peek .carousel__slide img {
  width: 100%; height: 100%;
  object-fit: cover;          /* correctly-proportioned art will not crop */
  border-radius: 16px;
}
/* Dragging an <img> starts a native HTML5 drag, and the browser then
   swallows the pointerup the swipe handler is waiting for — so the gesture
   silently did nothing. Turning the image's own drag off hands the pointer
   back. `touch-action: pan-y` does the same job for touch: the page still
   scrolls vertically, but horizontal movement is ours to read. */
.carousel { touch-action: pan-y; }
.carousel__slide img { -webkit-user-drag: none; user-select: none; }

/* The reference does not dim the peeking slides, so neither does this. JS still
   marks the centre one `.is-current` — the hook is here if that ever changes. */

/* v1's dots, under a carousel that is now driven by the swipe rather than a
   control cluster. The 24px below the carousel is the room they sit in. */
/* The dots hang below the slides, so the carousel's own bottom margin has to
   clear them and then leave a gap before the next section starts. */
.carousel--peek { margin-bottom: 54px; }
.carousel--peek .carousel__dots { bottom: -26px; }

/* ── Explore sits directly under the carousel now ───────────────────────── */
.app--v2 .explore { margin-top: 24px; }

/* ── Explore the E-Marketplace: a four-up teaser under the carousel ─────────
   The full catalogue lives on services.html; this is the doorway to it, laid
   out the way the reference lays its own teaser out — heading on the left,
   "View All" and an arrow on the right, then one row of circular chips. */
.hsvc { margin: 28px var(--geo-gutter) 0; }
.hsvc__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hsvc__title {
  margin: 0;
  font-size: 18px; font-weight: var(--fw-semi); color: var(--c-txt-heading);
}
.hsvc__all {
  display: flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: var(--fw-semi); color: var(--c-prim);
}
.hsvc__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-prim);
}
.hsvc__arrow svg {
  width: 14px; height: 14px;
  fill: none; stroke: var(--c-white); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.hsvc__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 16px; }
.hsvc__item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px 2px; border: 0; background: none; cursor: pointer;
}
.hsvc__ic {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--c-panel);
}
.hsvc__ic img { width: 34px; height: 34px; object-fit: contain; }
.hsvc__label {
  font-family: var(--font); font-size: 11px; font-weight: var(--fw-med);
  color: var(--c-txt); text-align: center; line-height: 1.25;
}