/* ==========================================================================
   App-download promo bar (mobile only)
   ==========================================================================

   Its OWN stylesheet rather than an append to menu.css, for a structural reason and not
   just caution: _StoresLayout does not load menu.css at all (only maplibre-gl, stores,
   skeleton, a11y), so a menu.css append would style the bar on menu pages and leave it
   unstyled anywhere else it is ever rendered. The tail of menu.css is also interleaved
   with Menu Item Card rules, which are excluded from this migration.

   Z-INDEX: 25. The usable band is 21–44, and both edges are load-bearing:

     ABOVE  .pt-page-skel        20   (skeleton.css) — it is pointer-events:none, so sitting
                                       below it would give an invisible-but-tappable bar
     BELOW  .cart-scrim          45   (menu.css, @media max-width:720px) — the bar renders only
                                       at those widths, so at 50 it would paint OVER the dimming
                                       scrim while the cart is open: undimmed and still tappable

   It needs no height at all to clear the sticky chrome, which is the reference's stated reason
   for using 100: .menu-header (30), .menu-sidebar (40) and .menu-filters (38) are all
   position:sticky with a `top`, and .pt-burger (90) is fixed top-left. None can reach the
   bottom edge. Every overlay in the app — cart popup 60, offer sheets 150, customize 200,
   banner modal 250, drawer 9100, delete overlay 9600, loader 9999 — is far above 25 and
   correctly paints over the bar.

   Colours and font come from brand tokens, so the bar themes itself per brand. The reference
   hardcodes #E21B22 / #b91419 / 'Inter'. */

.pt-app-promo {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: none;                    /* mobile-only; the media query below opts it in */
    align-items: center;
    gap: 12px;
    /* Bottom padding carries the safe-area inset: this bar is pinned to bottom:0, and under
       viewport-fit=cover (_MenuLayout) that is the true screen edge, behind the home indicator.
       env() is 0px without an inset, so this stays the original 10px elsewhere. */
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    font-family: var(--brand-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

@media (max-width: 720px) {
    .pt-app-promo { display: flex; }
}

.pt-app-promo-text {
    flex: 1;
    min-width: 0;                     /* lets the copy ellipsize instead of pushing the button off */
}

.pt-app-promo h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text, #1a1a1a);
}

.pt-app-promo p {
    margin: 2px 0 0;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-app-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 8px;
    background: var(--brand-primary, #E21B22);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.pt-app-btn:hover { background: var(--brand-primary-dark, #b91419); }
.pt-app-btn svg { width: 18px; height: 18px; }

.pt-app-close {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted, #6b7280);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}
.pt-app-close:hover { background: #f3f4f6; }

/* ── Layout reservation ──────────────────────────────────────
   The bar is fixed, so without this it covers whatever sits at the bottom of the page. The
   height is MEASURED into --pt-app-bar-h at runtime rather than hardcoded, because
   accessibility text scaling grows the row. The class goes on <html> so the reservation lands
   before paint. */
html.pt-has-app-bar body {
    padding-bottom: var(--pt-app-bar-h, 56px);
}

/* Lift the accessibility affordances clear of the bar. Both are bottom-anchored, and the panel
   in particular sits only ~14px above a 56px bar at narrow widths. Specificity (0,2,1) beats
   a11y.css's own (0,1,0) regardless of link order — this does NOT rely on document order. */
html.pt-has-app-bar .a11y-fab {
    bottom: calc(var(--pt-app-bar-h, 56px) + 16px);
}

@media (max-width: 560px) {
    html.pt-has-app-bar .a11y-panel {
        bottom: calc(var(--pt-app-bar-h, 56px) + 60px);
    }
}