:root{
  --hs-pwa-green:   #2e4418;
  --hs-pwa-green-2: #3e5a20;
  --hs-pwa-mid:     #527030;
  --hs-pwa-gold:    #bfa03a;
  --hs-pwa-ivory:   #f3f2e8;
  --hs-pwa-stone:   #dedad0;
  --hs-pwa-ink:     #2a2a1e;
}

/* ══════════════════════════════════════════════════════
   FULLSCREEN — iPhone standalone PWA
   Problem: WP/theme adds margin-top:32px, body padding → white bars
   Fix: attack html AND body, both @media AND .hs-pwa-active class
══════════════════════════════════════════════════════ */

@media all and (display-mode: standalone) {
  html {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    background: #2e4418 !important;
  }
  body {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    min-height: 100dvh !important;
    width: 100% !important;
    background: #2e4418 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  #wpadminbar { display: none !important; }
  html.admin-bar { margin-top: 0 !important; }
  .hs-wrap { margin-top: 0 !important; padding-top: 0 !important; }
  .hs-topbar {
    padding-top: calc(18px + env(safe-area-inset-top, 0px)) !important;
    border-radius: 0 !important;
  }
}

/* JS class — applied immediately on standalone detect, higher specificity */
html.hs-pwa-active {
  margin: 0 !important; padding: 0 !important;
  margin-top: 0 !important; background: #2e4418 !important;
}
html.hs-pwa-active body {
  margin: 0 !important; padding: 0 !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  padding-left: env(safe-area-inset-left, 0px) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
  min-height: 100dvh !important;
  background: #2e4418 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
html.hs-pwa-active #wpadminbar { display: none !important; }
html.hs-pwa-active .hs-wrap { margin-top: 0 !important; padding-top: 0 !important; }
html.hs-pwa-active .hs-topbar {
  padding-top: calc(18px + env(safe-area-inset-top, 0px)) !important;
  border-radius: 0 !important;
}

/* ── Install card ── */
.hs-pwa-card {
  position: fixed; left: 14px; right: 14px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 99998; opacity: 0; transform: translateY(16px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.hs-pwa-card:not([hidden]) { pointer-events: auto; }
.hs-pwa-card__inner {
  background: linear-gradient(145deg, var(--hs-pwa-green), var(--hs-pwa-green-2));
  color: #fff; border: 1px solid rgba(196,168,74,.3);
  border-radius: 20px; box-shadow: 0 20px 54px rgba(18,31,22,.32);
  padding: 20px 20px 18px; max-width: 440px; margin: 0 auto; position: relative;
}
.hs-pwa-card__eyebrow {
  font: 600 10px/1.2 'DM Sans',system-ui,sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hs-pwa-gold); margin-bottom: 8px;
}
.hs-pwa-card__title { font: 700 22px/1.1 'Playfair Display',Georgia,serif; margin-bottom: 8px; }
.hs-pwa-card__text { font: 14px/1.65 'DM Sans',system-ui,sans-serif; color: rgba(255,255,255,.85); margin-bottom: 16px; }
.hs-pwa-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hs-pwa-card__close {
  position: absolute; right: 14px; top: 10px; border: 0;
  background: rgba(255,255,255,.15); color: #fff;
  width: 34px; height: 34px; border-radius: 999px;
  font-size: 24px; line-height: 34px; text-align: center;
  cursor: pointer; transition: background .2s;
}
.hs-pwa-card__close:hover { background: rgba(255,255,255,.3); }

.hs-pwa-btn {
  appearance: none; border: 0; border-radius: 10px; padding: 12px 18px;
  cursor: pointer; font: 600 13px/1 'DM Sans',system-ui,sans-serif;
  transition: .18s ease; letter-spacing: .03em;
}
.hs-pwa-btn:hover { transform: translateY(-1px); }
.hs-pwa-btn--primary { background: var(--hs-pwa-gold); color: var(--hs-pwa-green); }
.hs-pwa-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }

.hs-pwa-modal {
  position: fixed; inset: 0; background: rgba(14,22,16,.5);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 99999; padding: 0;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.hs-pwa-modal__dialog {
  position: relative; width: 100%; max-width: 520px;
  background: var(--hs-pwa-ivory); border-radius: 24px 24px 0 0;
  padding: 28px 24px calc(28px + env(safe-area-inset-bottom,0px));
  border: 1px solid var(--hs-pwa-stone);
  box-shadow: 0 -8px 40px rgba(12,20,13,.2); color: var(--hs-pwa-ink);
}
.hs-pwa-modal__dialog::before {
  content: ''; display: block; width: 36px; height: 4px;
  background: #ccc; border-radius: 2px; margin: 0 auto 18px;
}
.hs-pwa-modal__close {
  position: absolute; right: 16px; top: 20px; border: 0;
  background: #dedad0; width: 28px; height: 28px; border-radius: 50%;
  font-size: 18px; cursor: pointer; color: #6b6b52;
  display: flex; align-items: center; justify-content: center;
}
.hs-pwa-modal__eyebrow {
  font: 600 10px/1.2 'DM Sans',system-ui,sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hs-pwa-green-2); margin-bottom: 8px;
}
.hs-pwa-modal h3 { font: 700 26px/1.1 'Playfair Display',Georgia,serif; color: var(--hs-pwa-green); margin: 0 0 18px 0; }
.hs-pwa-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hs-pwa-steps li {
  padding: 14px 16px; background: #fff; border-radius: 14px;
  border: 1px solid var(--hs-pwa-stone); display: flex; gap: 12px; align-items: flex-start;
}
.hs-pwa-steps li::before {
  content: attr(data-step); width: 24px; height: 24px; border-radius: 50%;
  background: var(--hs-pwa-green); color: var(--hs-pwa-gold);
  font: 700 12px/24px 'DM Sans',system-ui,sans-serif;
  text-align: center; flex-shrink: 0; margin-top: 2px;
}
.hs-pwa-steps strong { display: block; font: 700 15px/1.2 'Playfair Display',Georgia,serif; color: var(--hs-pwa-green); margin-bottom: 3px; }
.hs-pwa-steps span { display: block; font: 13px/1.6 'DM Sans',system-ui,sans-serif; color: #6b6b52; }

@media (min-width: 520px) {
  .hs-pwa-modal { align-items: center; padding: 18px; }
  .hs-pwa-modal__dialog { border-radius: 24px; padding: 28px; }
  .hs-pwa-modal__dialog::before { display: none; }
}


/* ── Mobile standalone centering fix ── */
@media (max-width: 768px) and (display-mode: standalone) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  .hs-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)) 0 !important;
    overflow-x: hidden !important;
  }

  .hs-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .hs-topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hs-topbar > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  .hs-brand {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hs-brand span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .hs-topbar-pill {
    max-width: calc(100vw - 120px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .hs-steps {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
  }

  .hs-doc-band {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hs-panels {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* Same fix when JS applies hs-pwa-active immediately */
@media (max-width: 768px) {
  html.hs-pwa-active, html.hs-pwa-active body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  html.hs-pwa-active .hs-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)) 0 !important;
    overflow-x: hidden !important;
  }

  html.hs-pwa-active .hs-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html.hs-pwa-active .hs-topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html.hs-pwa-active .hs-topbar > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  html.hs-pwa-active .hs-brand {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html.hs-pwa-active .hs-brand span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.hs-pwa-active .hs-topbar-pill {
    max-width: calc(100vw - 120px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.hs-pwa-active .hs-steps {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
  }

  html.hs-pwa-active .hs-doc-band {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html.hs-pwa-active .hs-panels {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}