.mobile-backdrop{position:fixed;inset:0;background-color:rgba(0,0,0,.25);-webkit-backdrop-filter:grayscale(100%) brightness(0.85);backdrop-filter:grayscale(100%) brightness(0.85);z-index:30;transition:opacity 220ms linear;opacity:0;pointer-events:none}
.mobile-backdrop.open{opacity:1;pointer-events:auto}
.mobile-menu{z-index:50}
#mobile-menu-button,.mobile-menu-button{position:relative;z-index:60}
.mobile-menu-open main,.mobile-menu-open .site-max,.mobile-menu-open footer{filter:grayscale(100%) brightness(0.85);-webkit-filter:grayscale(100%) brightness(0.85);transition:filter 220ms linear}

/* Neutral 3D QR frame: use inset shadow so effect is visible inside overflow-hidden parents */
.qr-3d{display:inline-flex;align-items:center;justify-content:center;border-radius:.75rem;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid rgba(15,23,42,0.06);box-shadow:inset 0 6px 16px rgba(2,6,23,0.08),inset 0 2px 0 rgba(255,255,255,0.6);padding:.5rem}
.qr-3d img{display:block;max-width:100%;max-height:100%;object-fit:contain}

/* Targetable selectors for the QR so it can be edited individually */
/* Default: outer 3D frame for the messenger QR (visible outside the image) */
#messenger-qr-frame{border-radius:.75rem;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid rgba(15,23,42,0.08);box-shadow:0 14px 36px rgba(2,6,23,0.14),0 6px 16px rgba(2,6,23,0.08);padding:.4rem}

/* If you prefer to remove the 3D frame for this specific QR, add the class `no-frame` to the wrapper */
#messenger-qr-frame.no-frame{box-shadow:none!important;background:transparent!important;border:none!important;padding:0!important}

#messenger-qr-image{display:block}

/* Make the messenger card allow visible overflow so the QR outer shadow can be shown */
#messenger-card{overflow:visible}

.store-3d{display:inline-flex;align-items:center;justify-content:center;border-radius:.6rem;background:transparent;border:none;box-shadow:0 12px 30px rgba(2,6,23,0.18),0 6px 16px rgba(2,6,23,0.12);padding:0}
.store-3d img{display:block;max-width:100%;max-height:100%;object-fit:contain}

/* Individual IDs in case you want to tweak one specifically */
#apple-store-frame,#google-play-frame{border-radius:.6rem}

/* Allow opting out of the baked frame when using framed image files */
.store-3d.no-frame{box-shadow:none!important;background:transparent!important;border:none!important;padding:0!important}