/* Loaded after the theme's stylesheets on every page (src/render/shell.js), for differences the Whop store must
   correct after the theme's own CSS has run. Each rule says why. */
/* The landing pages' own purchase block (5-reasons listicle: .njs-product > div > purchase form). On Shopify the theme's
   inline <product-form> element leaves a 15px line box above Kaching's widget; the Whop selector sits 15px lower to
   match (measured at 390 and 1440, 2026-11-06). */
.njs-native.njs-product > div > .njs-purchase-form{margin-top:15px}
/* GemPages marquee strips in the native landing pages (5-reasons: "165+ questions · Written in prayer · Beyond small
   talk…"). The section keeps react-fast-marquee's .rfm-* markup but not its stylesheet, which GemPages loads on Shopify;
   without it the items stack and the strip grew to a ~504px empty green band at 375. These are GemPages' own rules
   (read on notjustsundays.com 2026-11-11: one 23px line in a 43px band at 375, scrolling 100px/s; the copy that makes
   the loop seamless is filled in by src/render/theme.js gpMarquees, --duration by src/client/site.js). */
.rfm-marquee-container{display:flex;flex-direction:row;position:relative;transform:var(--transform,none);width:var(--width,100%);max-width:unset!important;overflow:hidden}
.rfm-marquee{display:flex;flex:0 0 auto;flex-direction:row;align-items:center;min-width:var(--min-width,auto);max-width:unset!important;z-index:1;animation:njs-rfm-scroll var(--duration,12s) linear var(--delay,0s) var(--iteration-count,infinite);animation-play-state:var(--play,running);animation-direction:var(--direction,normal)}
.rfm-initial-child-container{display:flex;flex:0 0 auto;flex-direction:row;align-items:center;min-width:auto}
.rfm-child{transform:var(--transform,none)}
@media (min-width:1025px){.rfm-marquee-container:hover div{animation-play-state:var(--pause-on-hover)}.rfm-marquee-container:active div{animation-play-state:var(--pause-on-click)}}
@media (prefers-reduced-motion:reduce){.rfm-marquee{animation:none}}
@keyframes njs-rfm-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Derrick 2026-11-13: product photo thumbnails laid over the bottom of the main photo (Whop store only, deployed
   outside the GitHub pipeline as build-patch "gallery"; see NOTES in the deploy entry). */
.njs-gallery{display:grid;grid-template-columns:minmax(0,1fr)}
.njs-gallery>.njs-gallery__stage,.njs-gallery>.njs-gallery__thumbs{grid-area:1/1;min-width:0}
.njs-gallery>.njs-gallery__thumbs{align-self:end;justify-self:center;z-index:2;max-width:calc(100% - 20px);margin:0 0 10px;padding:5px;gap:5px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.njs-gallery>.njs-gallery__thumbs a{flex:0 0 44px;background:#fff}
@media (min-width:750px){.njs-gallery>.njs-gallery__thumbs{margin-bottom:14px;padding:6px;gap:6px}.njs-gallery>.njs-gallery__thumbs a{flex-basis:60px}}