/* EK PWA v2 — Quietly confident install UI
 *
 * Editorial card aesthetic (29CM / Aritzia / Aesop tone). Single accent per site.
 * No gradients, no emoji, no "new version" pill. font-family: inherit so each
 * theme's typography flows through.
 *
 * The plugin sets two CSS custom properties on .ek-pwa via inline style:
 *   --ek-accent     (per-site primary, e.g. #111 / #1a1a2e / #2a2a2a)
 *   --ek-on-accent  (text on accent, almost always #fff)
 */

.ek-pwa {
  --ek-paper:      #ffffff;
  --ek-ink:        #111111;
  --ek-ink-soft:   rgba(17, 17, 17, 0.62);
  --ek-ink-faint:  rgba(17, 17, 17, 0.42);
  --ek-hairline:   rgba(17, 17, 17, 0.08);
  --ek-shadow-1:   0 1px 2px rgba(17, 17, 17, 0.04);
  --ek-shadow-2:   0 12px 36px rgba(17, 17, 17, 0.10);
  --ek-spring:     cubic-bezier(0.32, 0.72, 0, 1);
  font-family: inherit;
}

/* Auto dark theme — only kicks in when user prefers dark AND the page is in
 * standalone mode. Avoids surprising the regular site visitor with a dark
 * floating card on a light page. */
html.ek-pwa-standalone .ek-pwa {
  /* respects user preference for dark mode in standalone */
}
@media (prefers-color-scheme: dark) {
  html.ek-pwa-standalone .ek-pwa {
    --ek-paper:     #1a1a1a;
    --ek-ink:       #f5f5f5;
    --ek-ink-soft:  rgba(245, 245, 245, 0.65);
    --ek-ink-faint: rgba(245, 245, 245, 0.40);
    --ek-hairline:  rgba(255, 255, 255, 0.10);
    --ek-shadow-2:  0 14px 36px rgba(0, 0, 0, 0.60);
  }
}

/* ── Backdrop (Android modal only) ───────────────────────────────────── */
.ek-pwa-backdrop {
  position: fixed; inset: 0;
  background: rgba(17, 17, 17, 0.36);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity: 0;
  z-index: 999998;
  transition: opacity 280ms var(--ek-spring);
  cursor: pointer;
}
.ek-pwa-backdrop.is-shown { opacity: 1; }

/* ── Android install card ───────────────────────────────────────────── */
.ek-pwa-modal {
  position: fixed;
  left: 50%;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  transform: translateX(-50%) translateY(24px);
  width: min(380px, calc(100vw - 28px));
  background: var(--ek-paper);
  color: var(--ek-ink);
  border: 1px solid var(--ek-hairline);
  border-radius: 18px;
  padding: 22px 22px 18px;
  z-index: 999999;
  box-shadow: var(--ek-shadow-1), var(--ek-shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ek-spring), transform 380ms var(--ek-spring);
  font-family: inherit;
}
.ek-pwa-modal.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
@media (min-width: 600px) {
  .ek-pwa-modal {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, calc(-50% + 24px));
  }
  .ek-pwa-modal.is-shown { transform: translate(-50%, -50%); }
}

/* Non-blocking "toast" variant — used by the auto install prompt (shop/product pages).
 * No backdrop, and anchored to the bottom-right corner on desktop so it never sits over
 * page content / the Add-to-Cart button. On mobile it keeps the default bottom placement. */
@media (min-width: 600px) {
  .ek-pwa-modal.ek-pwa-modal--toast {
    top: auto;
    left: auto;
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    transform: translateY(24px);
  }
  .ek-pwa-modal.ek-pwa-modal--toast.is-shown { transform: translateY(0); }
}

.ek-pwa-modal__top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.ek-pwa-modal__icon-wrap {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--ek-paper);
  border: 1px solid var(--ek-hairline);
  overflow: hidden;
  display: grid; place-items: center;
}
.ek-pwa-modal__icon-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-pwa-modal__head { flex: 1; min-width: 0; padding-top: 2px; }
.ek-pwa-modal__eyebrow {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ek-ink-faint);
  margin-bottom: 5px;
}
.ek-pwa-modal__title {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.2;
  color: var(--ek-ink);
}
.ek-pwa-modal__close {
  margin-left: auto;
  flex-shrink: 0;
  width: 36px; height: 36px;
  border: 0; background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--ek-ink-faint);
  transition: color 180ms ease, background 180ms ease;
}
.ek-pwa-modal__close:hover { color: var(--ek-ink); background: var(--ek-hairline); }
.ek-pwa-modal__close svg { width: 14px; height: 14px; }

.ek-pwa-modal__body {
  font-size: 13.5px;
  color: var(--ek-ink-soft);
  line-height: 1.55;
  margin: 0 0 18px;
}
.ek-pwa-modal__benefits {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ek-pwa-modal__benefits li {
  font-size: 12.5px;
  color: var(--ek-ink-soft);
  display: flex; align-items: flex-start; gap: 10px;
  line-height: 1.45;
}
.ek-pwa-modal__benefits li::before {
  content: '';
  flex-shrink: 0;
  width: 14px; height: 1px;
  background: var(--ek-ink-faint);
  margin-top: 9px;
}

.ek-pwa-modal__actions { display: flex; gap: 8px; }
.ek-pwa-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  height: 44px;
  padding: 0 18px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease;
  display: inline-flex; align-items: center; justify-content: center;
}
#ekPwaRoot .ek-pwa-btn--primary {
  background: var(--ek-accent, #111) !important;
  color: var(--ek-on-accent, #fff) !important;
  border: 1px solid transparent !important;
  text-transform: none !important;
  flex: 1;
}
.ek-pwa-btn--primary:hover  { transform: translateY(-1px); }
.ek-pwa-btn--primary:active { transform: translateY(0); }
#ekPwaRoot .ek-pwa-btn--ghost {
  background: transparent !important;
  color: var(--ek-ink-soft) !important;
  border: 1px solid var(--ek-hairline) !important;
  text-transform: none !important;
  flex: 0 0 auto;
  padding: 0 16px;
}
.ek-pwa-btn--ghost:hover { color: var(--ek-ink); border-color: var(--ek-ink); }
.ek-pwa-btn:focus-visible {
  outline: 2px solid var(--ek-accent, #111);
  outline-offset: 2px;
}

/* ── iOS bottom sheet ──────────────────────────────────────────────── */
.ek-pwa-ios {
  position: fixed;
  left: 12px; right: 12px;
  bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  z-index: 999999;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 320ms var(--ek-spring), transform 380ms var(--ek-spring);
  pointer-events: none;
  font-family: inherit;
}
.ek-pwa-ios.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ek-pwa-ios__card {
  background: var(--ek-paper);
  color: var(--ek-ink);
  border: 1px solid var(--ek-hairline);
  border-radius: 18px;
  padding: 16px 16px 18px;
  box-shadow: var(--ek-shadow-1), var(--ek-shadow-2);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  position: relative;
}
.ek-pwa-ios__row { display: flex; align-items: center; gap: 14px; }
.ek-pwa-ios__icon-wrap {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 11px;
  background: var(--ek-paper);
  border: 1px solid var(--ek-hairline);
  overflow: hidden;
  display: grid; place-items: center;
}
.ek-pwa-ios__icon-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-pwa-ios__text { flex: 1; min-width: 0; padding-right: 8px; }
.ek-pwa-ios__eyebrow {
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ek-ink-faint);
  margin-bottom: 3px;
}
.ek-pwa-ios__title {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 1px;
  line-height: 1.2;
  color: var(--ek-ink);
}
.ek-pwa-ios__close {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border: 0; background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--ek-ink-faint);
  transition: color 180ms ease, background 180ms ease;
}
.ek-pwa-ios__close:hover { color: var(--ek-ink); background: var(--ek-hairline); }
.ek-pwa-ios__close svg { width: 14px; height: 14px; }
.ek-pwa-ios__instr {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ek-hairline);
  font-size: 12.5px;
  color: var(--ek-ink-soft);
  line-height: 1.5;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.ek-pwa-ios__share-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 6px;
  background: var(--ek-hairline);
  border-radius: 7px;
  font-size: 12px;
  color: var(--ek-ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ek-pwa-ios__share-pill svg { width: 13px; height: 13px; }
.ek-pwa-ios__then {
  background: var(--ek-ink);
  color: var(--ek-paper);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
}
.ek-pwa-ios.is-shown .ek-pwa-ios__share-pill {
  animation: ek-pwa-pulse 2.4s ease 360ms 2;
}
@keyframes ek-pwa-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ── Standalone-mode site tweaks (subtle, opt-in via class on <html>) ── */
html.ek-pwa-standalone, html.ek-pwa-standalone body {
  padding-top:    env(safe-area-inset-top, 0);
  padding-right:  env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left:   env(safe-area-inset-left, 0);
}
html.ek-pwa-standalone {
  -webkit-tap-highlight-color: transparent;
}
/* Scoped pull-to-refresh block while the WooCommerce PhotoSwipe modal
 * (product image zoom) is open. Both Ecomus (EK) and Flatsome (SMZ) themes
 * use WooCommerce's bundled PhotoSwipe v4. The `.ek-pswp-open` body class is
 * applied by pwa-app.js via a MutationObserver — that path is deterministic
 * across Android Chrome's gesture pipeline (CSS `:has()` re-evaluation is
 * too late: pull-to-refresh is decided at touchstart). */
body.ek-pswp-open {
  overscroll-behavior: none !important;
  touch-action: none !important;
}
html.ek-pswp-open-html {
  overscroll-behavior: none !important;
  touch-action: none !important;
}
.pswp.pswp--open,
.pswp.pswp--visible {
  overscroll-behavior: none !important;
}
/* ROOT CAUSE FIX: PhotoSwipe's internal `.pswp__scroll-wrap`, `.pswp__item`,
 * and `.pswp__img` all have `touch-action: auto` from PhotoSwipe's own
 * stylesheet. When the image is zoomed in and the user pans with one finger,
 * the touch lands on `.pswp__img` (touch-action:auto) and Chrome's gesture
 * pipeline decides "this is a scroll" AT touchstart time — too early for
 * PhotoSwipe's preventDefault() to intervene. Result: downward pan inside
 * a zoomed image leaks out as a viewport pull-to-refresh.
 * Force every PhotoSwipe descendant to touch-action:none so Chrome leaves
 * gesture interpretation entirely to PhotoSwipe's JS. */
.pswp.pswp--open *,
.pswp.pswp--visible * {
  touch-action: none !important;
  overscroll-behavior: none !important;
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ek-pwa-modal, .ek-pwa-ios, .ek-pwa-backdrop {
    transition-duration: 1ms !important;
  }
  .ek-pwa-ios.is-shown .ek-pwa-ios__share-pill { animation: none; }
}

/* ── Delivery tracking mini-timeline (thank-you install prompt) ──────── */
.ek-pwa-track {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin: 2px 0 16px;
}
.ek-pwa-track__step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
/* connecting line sits behind the dots, from previous dot centre to this one */
.ek-pwa-track__step::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--ek-hairline, #e7e1d8);
  z-index: 0;
}
.ek-pwa-track__step:first-child::before { display: none; }
.ek-pwa-track__step.is-done::before,
.ek-pwa-track__step.is-next::before { background: var(--ek-accent, #9c8a6e); }
.ek-pwa-track__dot {
  position: relative;
  z-index: 1;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ek-paper, #fff);
  border: 2px solid var(--ek-hairline, #e7e1d8);
  display: grid; place-items: center;
  color: var(--ek-on-accent, #fff);
}
.ek-pwa-track__step.is-done .ek-pwa-track__dot {
  background: var(--ek-ink, #1a1714);
  border-color: var(--ek-ink, #1a1714);
}
.ek-pwa-track__step.is-next .ek-pwa-track__dot { border-color: var(--ek-accent, #9c8a6e); }
.ek-pwa-track__dot svg { width: 9px; height: 9px; stroke-width: 2.4; }
.ek-pwa-track__lbl {
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ek-ink-faint, #9a9186);
  white-space: nowrap;
}
.ek-pwa-track__step.is-done .ek-pwa-track__lbl {
  color: var(--ek-ink, #1a1714);
  font-weight: 600;
}

/* ── Trust microcopy (Free · No app store · Remove anytime) ─────────── */
.ek-pwa-trust {
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--ek-ink-faint, #9a9186);
}