/* * Design tokens shared by every AnnGhar Mobile Experience stylesheet. * Values are overridden per-request by Assets::build_variables_css(), * generated from the Appearance settings — these are fallbacks only. */ :root { --agm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --agm-accent: #0a84ff; --agm-accent-soft: rgba( 10, 132, 255, .12 ); --agm-blur: 18px; --agm-glass-opacity: 0.72; --agm-shadow: 0 8px 30px rgba(0, 0, 0, .12); --agm-radius: 22px; --agm-floating-height: 16px; --agm-animation-speed: 300ms; --agm-tap-size: 44px; --agm-safe-top: env(safe-area-inset-top, 0px); --agm-safe-bottom: env(safe-area-inset-bottom, 0px); --agm-safe-left: env(safe-area-inset-left, 0px); --agm-safe-right: env(safe-area-inset-right, 0px); } /* * Scoped to body.agm-respect-reduced-motion (Animations → "Reduced Motion * Support", default on) rather than a bare `:root` media query, so an * admin who deliberately turns that setting off can keep configured * animations running even for shoppers whose OS requests less motion. */ @media (prefers-reduced-motion: reduce) { body.agm-respect-reduced-motion { --agm-animation-speed: 0ms; } } /* * PHP now renders every one of this plugin's own top-level surfaces * unconditionally on every request, on every device (see * Assets::register_core()'s docblock) — a full-page cache can only ever * safely replay identical HTML to every visitor, and used to receive * none of this markup at all whenever a URL's cached copy happened to be * generated for a non-mobile request, which is what made the homepage * (this site's highest-traffic, most rarely-regenerated cache entry) * appear completely broken on real mobile devices while pages excluded * from full-page caching (cart, checkout, My Account) kept working. * * Since the HTML is now always present, it must default to hidden here * and only ever become visible once agm-core.js's own device check * (evaluated fresh in-browser on every page view, immune to any caching * layer) adds `agm-device-active` to — the single, authoritative * signal every stylesheet and every module's JS agrees on. This is what * actually keeps desktop visitors from ever seeing this plugin's UI, not * a viewport-width media query (which would drift from the real * device-class decision) and not each module's own JS alone (which must * still work as the authority for interactivity even if a page's CSS * ever fails to load for some unrelated reason). * * `!important` is required only to win against each module's own, * non-`!important` "make this visible" rule (e.g. `.agm-search{display: * flex}`) when inactive; it never fights those modules' own `[hidden]` * attribute toggle for open/close state, since this selector simply * doesn't match at all once `agm-device-active` is present — each * module's own CSS governs its own open/close display normally from * that point on. */ html:not(.agm-device-active) .agm-bottom-nav, html:not(.agm-device-active) .agm-search, html:not(.agm-device-active) .agm-modal { display: none !important; }