/* THP PWA install banner — site design language: cream ground, ink rule,
   Cormorant heading + Inter body, boxed-button primary action.
   Fixed bottom sheet; safe-area aware for notched phones.
   15 Sep: centred column per Richard — logo, title, body and the
   Add to Home Screen / Not now row all hang off the centre line. */

.thp-pwa-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 1.1rem 1.5rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg, #F5F3EE);
  border-top: 1px solid var(--ink, #1A1A1A);
  box-shadow: 0 -6px 24px rgba(26, 26, 26, 0.12);
}

.thp-pwa-icon {
  width: 44px;
  height: 44px;
}

.thp-pwa-copy {
  min-width: 0;
}

.thp-pwa-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--ink, #1A1A1A);
}

.thp-pwa-body {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  color: var(--ink, #1A1A1A);
}

.thp-pwa-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.15rem;
}

/* Reuses the site's boxed button; tightened for the banner.
   .cta-button sets no background (built for <a>), so a <button> needs the
   reset here or it renders with the browser's grey face. */
.thp-pwa-install.cta-button {
  background: transparent;
  border-color: transparent;   /* 16 Sep: base .cta-button gained the client-box hairline + inset shadow; banner button stays clean on the dark panel */
  box-shadow: none;
  cursor: pointer;
  padding: 0.45rem 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.thp-pwa-notnow {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate, #8C8E94);
  padding: 0.15rem 0;
}

.thp-pwa-notnow:hover {
  color: var(--ink, #1A1A1A);
}

/* Sit above the permanent bottom tab bar on mobile (15 Sep). */
@media (max-width: 760px) {
  .thp-pwa-banner { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}