<!-- Store switcher modal -->
<div id="store-switcher-modal" class="store-switcher" aria-hidden="true">
<div class="store-switcher__backdrop" data-store-switcher-close></div>
<div class="store-switcher__dialog" role="dialog" aria-modal="true" aria-labelledby="store-switcher-title">
<button type="button" class="store-switcher__close" data-store-switcher-close aria-label="Close">
×
</button>
<h2 id="store-switcher-title">Choose a Store</h2>
<p>Please choose which Real Science Radio store you’d like to visit:</p>
<div class="store-switcher__options">
<a class="store-switcher__button store-switcher__button--bible"
href="https://enyart.shop"
target="_blank"
rel="noopener">
Bible Study Products
</a>
<a class="store-switcher__button store-switcher__button--science"
href="https://real-science-radio.myshopify.com"
target="_blank"
rel="noopener">
Science Products
</a>
</div>
</div>
</div>
<style>
.store-switcher {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
align-items: center;
justify-content: center;
}
.store-switcher.is-open {
display: flex;
}
.store-switcher__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
}
.store-switcher__dialog {
position: relative;
z-index: 1;
background: #ffffff;
padding: 2rem;
max-width: 420px;
width: 90%;
border-radius: 8px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
text-align: center;
}
.store-switcher__close {
position: absolute;
top: 0.5rem;
right: 0.75rem;
border: none;
background: transparent;
font-size: 1.5rem;
cursor: pointer;
}
.store-switcher__options {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.store-switcher__button {
display: block;
padding: 0.75rem 1rem;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
border: 1px solid #ddd;
}
.store-switcher__button--bible {
background: #f3f4ff;
}
.store-switcher__button--science {
background: #e7f7ff;
}
</style>
<script>
(function () {
document.addEventListener('DOMContentLoaded', function () {
var modal = document.getElementById('store-switcher-modal');
if (!modal) return;
// Find the existing Store link by its class from your nav:
// <a href="https://kgov.com/%3Ca%20href%3D"http://store.kgov.com">http://store.kgov.com" class="icon-menu-store">Visit Our KGOV Store</a>
var storeLink = document.querySelector('a.icon-menu-store');
if (!storeLink) return;
function openModal(event) {
if (event) event.preventDefault();
modal.classList.add('is-open');
modal.setAttribute('aria-hidden', 'false');
}
function closeModal() {
modal.classList.remove('is-open');
modal.setAttribute('aria-hidden', 'true');
}
// Intercept Store click to open the modal instead of navigating
storeLink.addEventListener('click', openModal);
// Close (backdrop or X)
modal.querySelectorAll('[data-store-switcher-close]').forEach(function (el) {
el.addEventListener('click', closeModal);
});
// Escape key closes modal
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && modal.classList.contains('is-open')) {
closeModal();
}
});
});
})();
</script>
