/* Homepage business picker (hero-select) + scrollbar-free reels. Approved by owner 2026-10-03. */
.hp { padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3rem); scroll-margin-top: 4.5rem; overflow: hidden; }
.hp.nudge .finder-head h2 { animation: nudge .8s var(--ease); }
.hp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.3rem; }
.hp-f { min-height: 44px; padding: .3rem 1rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--cream); color: var(--ink);
  font: 700 .95rem/1 var(--display); font-stretch: 85%; cursor: pointer; transition: background .2s, color .2s, transform .3s var(--ease); }
.hp-f:hover { transform: translateY(-2px); }
.hp-f[aria-pressed='true'] { background: var(--ink); color: var(--cream); }
.hp-f .n { font: 600 .78rem 'Plex Mono', monospace; opacity: .7; margin-left: .35rem; }
.hp-grid-btn { margin-left: auto; background: transparent; border-style: dashed; }

/* the stage: cards fan out from the centre like a hero select */
.hp-stage { position: relative; height: clamp(290px, 31vw, 340px); margin-top: .6rem; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  cursor: grab; outline: none; border-radius: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.hp-stage.drag { cursor: grabbing; }
.hp-stage:focus-visible { box-shadow: 0 0 0 3px var(--red); }
.hp-card { --w: clamp(148px, 17vw, 196px); position: absolute; left: 50%; bottom: 34px; width: var(--w); height: calc(var(--w) * 1.42); margin-left: calc(var(--w) / -2);
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; padding: .7rem .6rem 1rem; overflow: visible; border-radius: 16px; border: 2px solid var(--ink);
  background: var(--cream) url('../img/paper_manila.webp') center / 500px; color: var(--ink); cursor: pointer; transform-origin: 50% 100%;
  box-shadow: var(--shadow); transition: transform .5s var(--ease), opacity .4s var(--ease), background-color .3s, box-shadow .4s var(--ease); will-change: transform; }
.hp-stage.drag .hp-card { transition: none; }
.hp-card img { width: 100%; height: 100%; min-height: 0; object-fit: contain; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(29,43,68,.22)); transition: transform .5s var(--ease); }
.hp-card b { font: 900 1.12rem/1 var(--display); font-stretch: 72%; text-transform: uppercase; text-align: center; margin-top: .35rem; }
.hp-card .pr { font: 600 .85rem 'Plex Mono', monospace; color: var(--ink); margin-top: .25rem; }
.hp-card.on { background-color: var(--yellow); background-blend-mode: multiply; border-width: 3px; box-shadow: var(--shadow-lift); cursor: default; }
.hp-card.on img { transform: translateY(-6px) scale(1.06) rotate(-3deg); }
.hp-card.on::after { content: 'Ito ang sa\2019yo!'; position: absolute; top: -14px; right: -16px; padding: .25rem .6rem; border-radius: 6px; background: var(--red); color: var(--cream);
  font: 700 1.05rem 'Caveat', cursive; transform: rotate(7deg); box-shadow: 0 3px 6px rgba(29,43,68,.25); }
.hp-card.grow .pr::after { content: ' · Grow'; color: var(--green); }

.hp-nav { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: .3rem; }
.hp-arrow { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--cream); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease), opacity .2s; }
.hp-arrow svg { width: 20px; height: 20px; }
.hp-arrow.prev svg { transform: rotate(180deg); }
.hp-arrow:hover { transform: scale(1.08); }
.hp-arrow:disabled { opacity: .3; cursor: default; transform: none; }
.hp-count { font: 600 .95rem 'Plex Mono', monospace; min-width: 5.5ch; text-align: center; }
.hp-ticks { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: .7rem; }
.hp-tick { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 2px solid var(--ink-2); background: transparent; cursor: pointer; transition: transform .3s var(--ease), background .2s; }
.hp-tick.on { background: var(--red); border-color: var(--red); transform: scale(1.35); }
.hp-hint { text-align: center; margin-top: .3rem; font: 700 1.15rem 'Caveat', cursive; color: var(--ink-2); }

/* grid view (like GRID VIEW in a hero select) */
.hp-gridview { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: .6rem; margin-top: 1rem; }
.hp-gridview button { display: grid; justify-items: center; gap: .2rem; padding: .5rem .3rem .6rem; border-radius: 12px; border: 2px solid var(--ink); background: var(--cream); cursor: pointer;
  font: 800 .9rem/1.05 var(--display); font-stretch: 80%; color: var(--ink); transition: transform .3s var(--ease); }
.hp-gridview button:hover { transform: translateY(-3px) rotate(-1deg); }
.hp-gridview img { width: 64px; height: 64px; object-fit: contain; }
.hp-gridview button.on { background: var(--yellow); border-width: 3px; transform: translateY(-3px) rotate(-1.5deg); box-shadow: var(--shadow); }
.hp-gridview button.out { opacity: .32; }
.hp-gridview button.out:hover { opacity: .7; }

/* detail card: everything in the chosen pack */
.hp-detail { position: relative; margin-top: 1.1rem; display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 2.6rem);
  padding: clamp(1.2rem, 3vw, 2rem); border-radius: 18px; background: var(--cream); border: 2px solid var(--ink); box-shadow: var(--shadow); }
.hp-detail.swap .hp-anim { animation: hpIn .45s var(--ease) both; }
.hp-cover { position: relative; align-self: start; }
.hp-cover img { border-radius: 6px; box-shadow: var(--shadow-lift); transform: rotate(-2.5deg); background: #fff; }
.hp-cover::before { content: ''; position: absolute; z-index: 1; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(247,220,74,.8); transform: rotate(-4deg); }
.hp-pages { display: flex; gap: .45rem; margin-top: .9rem; }
.hp-pages img { width: calc(33.3% - .3rem); border-radius: 4px; box-shadow: 0 2px 4px rgba(29,43,68,.2); background: #fff; }
.hp-txt h3 { font: 900 clamp(1.7rem, 4vw, 2.4rem)/.95 var(--display); font-stretch: 72%; text-transform: uppercase; margin-top: .25rem; }
.hp-txt .promise { margin-top: .6rem; color: var(--ink-2); max-width: 60ch; }
.hp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 1.6rem; margin-top: 1.1rem; }
.hp-cols h4 { font: 700 1.25rem 'Caveat', cursive; color: var(--red); margin: 0 0 .35rem; }
.hp-inside { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.hp-inside li { padding-left: 1.4rem; position: relative; line-height: 1.3; }
.hp-inside li::before { content: ''; position: absolute; left: 0; top: .32em; width: .8rem; height: .8rem; border-radius: 3px; border: 2px solid var(--green); background: linear-gradient(135deg, transparent 45%, var(--green) 45% 60%, transparent 60%); }
.hp-inside b { display: block; font-weight: 800; }
.hp-inside span { color: var(--ink-2); font-size: .95rem; }
.hp-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.hp-tabs span { padding: .3rem .65rem; border-radius: 6px 6px 0 0; border: 2px solid var(--green); border-bottom-width: 4px; background: #E8F1EA; font: 600 .82rem 'Plex Mono', monospace; color: var(--green); }
.hp-buy { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: 1.3rem; }
.hp-buy .peso { font: 900 2.2rem/1 var(--display); font-stretch: 75%; }
.hp-fine { margin-top: .7rem; font-size: .9rem; color: var(--ink-2); }
.hp-char { position: absolute; right: -10px; bottom: -14px; width: clamp(110px, 14vw, 170px); pointer-events: none; transform: rotate(4deg); filter: drop-shadow(0 8px 8px rgba(29,43,68,.25)); }
.hp-none { margin-top: 1rem; }
@keyframes hpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .hp-detail { grid-template-columns: 1fr; padding-bottom: 6.5rem; }
  .hp-cover { max-width: 220px; }
  .hp-grid-btn { margin-left: 0; }
  .hp-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 1.5rem 2px 0; margin-right: calc(-1 * var(--gut, 1.25rem));
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .hp-card { --w: 150px; }
  .hp-card.on::after { right: -6px; }
  .hp-nav { padding-bottom: env(safe-area-inset-bottom); }
  .hp-bar::-webkit-scrollbar { display: none; }
  .hp-f { flex: none; }
  .hp-ticks { display: none; }
  .hp-gridview { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .hp-gridview button { padding: .35rem .15rem .4rem; font-size: .72rem; border-radius: 10px; }
  .hp-gridview img { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .hp-card, .hp-card img, .hp-f, .hp-arrow, .hp-tick { transition: none; } .hp-detail.swap .hp-anim { animation: none; } }

/* reels: no scrollbar, still swipe / wheel / arrows */
.reels { scrollbar-width: none; }
.reels::-webkit-scrollbar { display: none; }
.reel-count { font: 600 .9rem 'Plex Mono', monospace; color: var(--ink-2); }