/* ==========================================================================
   Blueleaf — native app feel on phones.
   Additive layer loaded after store.css / store-app.css. Everything here is
   scoped to touch phones or to installed (standalone) mode so the desktop
   website is untouched. Gives Material-style tap ripples, press feedback,
   app-like page transitions, and an install-app affordance.
   ========================================================================== */

/* ---- Cross-document view transitions (Chromium/Android) ---------------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: bl-vt-out .16s ease both; }
  ::view-transition-new(root) { animation: bl-vt-in .24s ease both; }
}
@keyframes bl-vt-out { to { opacity: 0; } }
@keyframes bl-vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- Top navigation progress bar (instant tap feedback) ---------------- */
#blNavProgress {
  position: fixed; inset: 0 auto auto 0; height: 3px; width: 0;
  z-index: 100000; border-radius: 0 3px 3px 0;
  background: var(--accent, #0B8B70);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #0B8B70) 70%, transparent);
  opacity: 0; pointer-events: none;
  transition: width .18s ease-out, opacity .3s ease;
}
#blNavProgress.is-active { opacity: 1; }

/* ---- Material ripple ---------------------------------------------------- */
.bl-ripple-host { position: relative; overflow: hidden; }
.bl-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  pointer-events: none; background: currentColor; opacity: .16;
  animation: bl-ripple .55s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes bl-ripple { to { transform: scale(2.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bl-ripple { display: none; } }

/* ======================================================================== */
/* Phones only: the app-like tactile layer.                                 */
/* ======================================================================== */
@media (max-width: 767.98px) {

  /* Kill the "web page" tells: rubber-band chaining / pull-to-refresh,
     grey tap flashes, accidental text selection and long-press callouts
     on chrome, and the double-tap zoom lag on interactive controls. */
  html, body {
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
  }
  .app-bar, .app-tabbar, .app-chips, .promo-ticker,
  .app-tab, .app-chip, .app-icon-btn, .app-search, .app-locale, .app-mark,
  .btn, button, a[href] {
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }
  .app-bar, .app-tabbar, .app-chips, .promo-ticker,
  .app-tab, .app-chip, .app-icon-btn, .btn {
    -webkit-user-select: none; user-select: none;
  }

  /* Press feedback — the quick "settle" every native control has. */
  .app-tab, .app-chip, .app-icon-btn, .app-search, .app-locale,
  .btn, .product-card, [data-ripple] {
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .app-tab:active, .app-chip:active, .app-icon-btn:active,
  .app-search:active, .app-locale:active, [data-ripple]:active {
    transform: scale(.94);
  }
  .btn:active { transform: scale(.97); }
  .product-card:active { transform: scale(.98); }

  /* Light up the active bottom-tab even where markup uses .is-active
     (the base stylesheet only targets [aria-current]). */
  .app-tab.is-active { color: var(--accent); }
  .app-tab.is-active .ph-fill { display: block; }
  .app-tab.is-active .ph { display: none; }
  .app-tab.is-active::before {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 26px; height: 3px; border-radius: 0 0 var(--r-pill, 999px) var(--r-pill, 999px);
    background: var(--accent); transform: translateX(-50%);
  }

  /* Momentum scrollers shouldn't show a desktop scrollbar. */
  .app-chips, .rail, .rail-track, [data-rail] {
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .app-chips::-webkit-scrollbar, .rail::-webkit-scrollbar,
  .rail-track::-webkit-scrollbar, [data-rail]::-webkit-scrollbar { display: none; }
}

/* ---- Installed (standalone) app polish ---------------------------------- */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  /* No browser URL bar now — reclaim the notch area and hide the web-only
     "back to top" / install hints that only make sense in a browser tab. */
  .app-bar { padding-top: env(safe-area-inset-top, 0px); }
  .bl-install-banner { display: none !important; }
  a[href="#top"].footer-top { display: none; }
}

/* ---- "Install app" banner (browser tab, Android) ------------------------ */
.bl-install-banner {
  position: fixed; left: 12px; right: 12px; z-index: 99998;
  bottom: calc(var(--tab-h, 62px) + env(safe-area-inset-bottom, 0px) + 12px);
  display: none; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px;
  background: var(--card, #fff); color: var(--ink, #0E1417);
  border: 1px solid var(--line, #D9E1E2);
  box-shadow: 0 12px 34px -12px rgba(14,20,23,.5);
  animation: bl-vt-in .3s ease both;
}
.bl-install-banner.is-shown { display: flex; }
.bl-install-banner img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.bl-install-banner .bl-install-copy { flex: 1; min-width: 0; line-height: 1.25; }
.bl-install-banner .bl-install-copy b { display: block; font-size: .92rem; }
.bl-install-banner .bl-install-copy span { font-size: .78rem; color: var(--ink-3, #6C7B81); }
.bl-install-banner button {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  border-radius: 999px; padding: 9px 16px; background: var(--accent, #0B8B70);
  color: var(--accent-ink, #fff); -webkit-tap-highlight-color: transparent;
}
.bl-install-banner button:active { transform: scale(.96); }
.bl-install-banner .bl-install-close {
  background: transparent; color: var(--ink-3, #6C7B81); padding: 6px; font-size: 20px; line-height: 1;
}
@media (min-width: 768px) { .bl-install-banner { display: none !important; } }