@nok-integration/storefront-react 0.6.0 → 0.6.1

package/dist/index.mjs

@@ -6743,31 +6743,31 @@ function ProductView({
   }
   return unavailable;
 }
-const showcase = "_showcase_1osag_7";
-const panel = "_panel_1osag_19";
-const image$1 = "_image_1osag_28";
-const heroImageBox = "_heroImageBox_1osag_48";
-const hero = "_hero_1osag_48";
-const heroContent = "_heroContent_1osag_53";
-const heroText = "_heroText_1osag_64";
-const logo = "_logo_1osag_72";
-const heroTitle = "_heroTitle_1osag_76";
-const heroSub = "_heroSub_1osag_84";
-const swipe = "_swipe_1osag_91";
-const swipeLabel = "_swipeLabel_1osag_100";
-const chevron = "_chevron_1osag_106";
-const overlay$1 = "_overlay_1osag_118";
-const copy = "_copy_1osag_130";
-const title$2 = "_title_1osag_135";
-const subtitle = "_subtitle_1osag_142";
-const cta = "_cta_1osag_148";
-const mosaicPanel = "_mosaicPanel_1osag_167";
-const mosaic = "_mosaic_1osag_167";
-const mRow = "_mRow_1osag_181";
-const mBetween = "_mBetween_1osag_186";
-const mCol = "_mCol_1osag_189";
-const tile = "_tile_1osag_194";
-const solid = "_solid_1osag_200";
+const showcase = "_showcase_16alm_30";
+const panel = "_panel_16alm_49";
+const image$1 = "_image_16alm_59";
+const heroImageBox = "_heroImageBox_16alm_79";
+const hero = "_hero_16alm_79";
+const heroContent = "_heroContent_16alm_84";
+const heroText = "_heroText_16alm_95";
+const logo = "_logo_16alm_103";
+const heroTitle = "_heroTitle_16alm_107";
+const heroSub = "_heroSub_16alm_115";
+const swipe = "_swipe_16alm_122";
+const swipeLabel = "_swipeLabel_16alm_131";
+const chevron = "_chevron_16alm_137";
+const overlay$1 = "_overlay_16alm_149";
+const copy = "_copy_16alm_161";
+const title$2 = "_title_16alm_166";
+const subtitle = "_subtitle_16alm_173";
+const cta = "_cta_16alm_179";
+const mosaicPanel = "_mosaicPanel_16alm_198";
+const mosaic = "_mosaic_16alm_198";
+const mRow = "_mRow_16alm_212";
+const mBetween = "_mBetween_16alm_217";
+const mCol = "_mCol_16alm_220";
+const tile = "_tile_16alm_225";
+const solid = "_solid_16alm_231";
 const styles$6 = {
   showcase,
   panel,
@@ -6917,53 +6917,83 @@ function MosaicPanel() {
     ] })
   ] }) });
 }
+function useShowcaseTop(ref) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => {
+      const top = Math.max(0, Math.round(el.getBoundingClientRect().top + window.scrollY));
+      el.style.setProperty("--showcase-top", `${top}px`);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    window.addEventListener("orientationchange", measure);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    if (observer && el.parentElement) observer.observe(el.parentElement);
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("orientationchange", measure);
+      observer?.disconnect();
+    };
+  }, [ref]);
+}
 function HomeShowcase() {
   const assetUrl = useAssetUrl();
-  return /* @__PURE__ */ jsx(ShopSurface, { tone: "dark", fill: true, children: /* @__PURE__ */ jsxs("div", { className: styles$6.showcase, children: [
-    /* @__PURE__ */ jsxs("section", { className: `${styles$6.panel} ${styles$6.hero}`, "aria-label": "DAZN Shop", children: [
-      /* @__PURE__ */ jsx("div", { className: styles$6.heroImageBox, children: /* @__PURE__ */ jsx(
-        ShopImage,
-        {
-          src: "/figma/home/hero.jpg",
-          alt: "",
-          fill: true,
-          priority: true,
-          sizes: "(max-width: 480px) 100vw, 480px",
-          className: styles$6.image
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: styles$6.heroContent, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$6.heroText, children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: assetUrl("/figma/home/dazn-logo.svg"),
-              alt: "DAZN",
-              className: styles$6.logo
-            }
-          ),
-          /* @__PURE__ */ jsx("h1", { className: styles$6.heroTitle, children: "DAZN SHOP" }),
-          /* @__PURE__ */ jsx("p", { className: styles$6.heroSub, children: "Fresh drops inspired by sport, culture, and everyday movement" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles$6.swipe, children: [
-          /* @__PURE__ */ jsx("p", { className: styles$6.swipeLabel, children: "Swipe down for more" }),
-          /* @__PURE__ */ jsx("svg", { className: styles$6.chevron, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M6 9l6 6 6-6",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ) })
+  const showcaseRef = useRef(null);
+  useShowcaseTop(showcaseRef);
+  return (
+    /*
+     * No `fill`. The surface used to force `min-height: 100dvh` around a scroller that was
+     * a different height, so the difference showed as a dead band of bare background. The
+     * showcase paints its own dark ground and now owns its own height, so there is nothing
+     * for the surface to fill.
+     */
+    /* @__PURE__ */ jsx(ShopSurface, { tone: "dark", children: /* @__PURE__ */ jsxs("div", { className: styles$6.showcase, ref: showcaseRef, children: [
+      /* @__PURE__ */ jsxs("section", { className: `${styles$6.panel} ${styles$6.hero}`, "aria-label": "DAZN Shop", children: [
+        /* @__PURE__ */ jsx("div", { className: styles$6.heroImageBox, children: /* @__PURE__ */ jsx(
+          ShopImage,
+          {
+            src: "/figma/home/hero.jpg",
+            alt: "",
+            fill: true,
+            priority: true,
+            sizes: "(max-width: 480px) 100vw, 480px",
+            className: styles$6.image
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: styles$6.heroContent, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$6.heroText, children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: assetUrl("/figma/home/dazn-logo.svg"),
+                alt: "DAZN",
+                className: styles$6.logo
+              }
+            ),
+            /* @__PURE__ */ jsx("h1", { className: styles$6.heroTitle, children: "DAZN SHOP" }),
+            /* @__PURE__ */ jsx("p", { className: styles$6.heroSub, children: "Fresh drops inspired by sport, culture, and everyday movement" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles$6.swipe, children: [
+            /* @__PURE__ */ jsx("p", { className: styles$6.swipeLabel, children: "Swipe down for more" }),
+            /* @__PURE__ */ jsx("svg", { className: styles$6.chevron, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M6 9l6 6 6-6",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) })
+          ] })
         ] })
-      ] })
-    ] }),
-    PANELS_TOP.map((p) => /* @__PURE__ */ jsx(CategoryPanel, { panel: p }, p.key)),
-    /* @__PURE__ */ jsx(MosaicPanel, {}),
-    PANELS_BOTTOM.map((p) => /* @__PURE__ */ jsx(CategoryPanel, { panel: p }, p.key))
-  ] }) });
+      ] }),
+      PANELS_TOP.map((p) => /* @__PURE__ */ jsx(CategoryPanel, { panel: p }, p.key)),
+      /* @__PURE__ */ jsx(MosaicPanel, {}),
+      PANELS_BOTTOM.map((p) => /* @__PURE__ */ jsx(CategoryPanel, { panel: p }, p.key))
+    ] }) })
+  );
 }
 const overlay = "_overlay_s4eai_1";
 const scrim = "_scrim_s4eai_10";

package/dist/standalone/storefront.mjs

@@ -6743,31 +6743,31 @@ function ProductView({
   }
   return unavailable;
 }
-const showcase = "_showcase_1osag_7";
-const panel = "_panel_1osag_19";
-const image$1 = "_image_1osag_28";
-const heroImageBox = "_heroImageBox_1osag_48";
-const hero = "_hero_1osag_48";
-const heroContent = "_heroContent_1osag_53";
-const heroText = "_heroText_1osag_64";
-const logo = "_logo_1osag_72";
-const heroTitle = "_heroTitle_1osag_76";
-const heroSub = "_heroSub_1osag_84";
-const swipe = "_swipe_1osag_91";
-const swipeLabel = "_swipeLabel_1osag_100";
-const chevron = "_chevron_1osag_106";
-const overlay$1 = "_overlay_1osag_118";
-const copy = "_copy_1osag_130";
-const title$2 = "_title_1osag_135";
-const subtitle = "_subtitle_1osag_142";
-const cta = "_cta_1osag_148";
-const mosaicPanel = "_mosaicPanel_1osag_167";
-const mosaic = "_mosaic_1osag_167";
-const mRow = "_mRow_1osag_181";
-const mBetween = "_mBetween_1osag_186";
-const mCol = "_mCol_1osag_189";
-const tile = "_tile_1osag_194";
-const solid = "_solid_1osag_200";
+const showcase = "_showcase_16alm_30";
+const panel = "_panel_16alm_49";
+const image$1 = "_image_16alm_59";
+const heroImageBox = "_heroImageBox_16alm_79";
+const hero = "_hero_16alm_79";
+const heroContent = "_heroContent_16alm_84";
+const heroText = "_heroText_16alm_95";
+const logo = "_logo_16alm_103";
+const heroTitle = "_heroTitle_16alm_107";
+const heroSub = "_heroSub_16alm_115";
+const swipe = "_swipe_16alm_122";
+const swipeLabel = "_swipeLabel_16alm_131";
+const chevron = "_chevron_16alm_137";
+const overlay$1 = "_overlay_16alm_149";
+const copy = "_copy_16alm_161";
+const title$2 = "_title_16alm_166";
+const subtitle = "_subtitle_16alm_173";
+const cta = "_cta_16alm_179";
+const mosaicPanel = "_mosaicPanel_16alm_198";
+const mosaic = "_mosaic_16alm_198";
+const mRow = "_mRow_16alm_212";
+const mBetween = "_mBetween_16alm_217";
+const mCol = "_mCol_16alm_220";
+const tile = "_tile_16alm_225";
+const solid = "_solid_16alm_231";
 const styles$6 = {
   showcase,
   panel,
@@ -6917,53 +6917,83 @@ function MosaicPanel() {
     ] })
   ] }) });
 }
+function useShowcaseTop(ref) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => {
+      const top = Math.max(0, Math.round(el.getBoundingClientRect().top + window.scrollY));
+      el.style.setProperty("--showcase-top", `${top}px`);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    window.addEventListener("orientationchange", measure);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    if (observer && el.parentElement) observer.observe(el.parentElement);
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("orientationchange", measure);
+      observer?.disconnect();
+    };
+  }, [ref]);
+}
 function HomeShowcase() {
   const assetUrl = useAssetUrl();
-  return /* @__PURE__ */ jsx(ShopSurface, { tone: "dark", fill: true, children: /* @__PURE__ */ jsxs("div", { className: styles$6.showcase, children: [
-    /* @__PURE__ */ jsxs("section", { className: `${styles$6.panel} ${styles$6.hero}`, "aria-label": "DAZN Shop", children: [
-      /* @__PURE__ */ jsx("div", { className: styles$6.heroImageBox, children: /* @__PURE__ */ jsx(
-        ShopImage,
-        {
-          src: "/figma/home/hero.jpg",
-          alt: "",
-          fill: true,
-          priority: true,
-          sizes: "(max-width: 480px) 100vw, 480px",
-          className: styles$6.image
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: styles$6.heroContent, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$6.heroText, children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: assetUrl("/figma/home/dazn-logo.svg"),
-              alt: "DAZN",
-              className: styles$6.logo
-            }
-          ),
-          /* @__PURE__ */ jsx("h1", { className: styles$6.heroTitle, children: "DAZN SHOP" }),
-          /* @__PURE__ */ jsx("p", { className: styles$6.heroSub, children: "Fresh drops inspired by sport, culture, and everyday movement" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles$6.swipe, children: [
-          /* @__PURE__ */ jsx("p", { className: styles$6.swipeLabel, children: "Swipe down for more" }),
-          /* @__PURE__ */ jsx("svg", { className: styles$6.chevron, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M6 9l6 6 6-6",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ) })
+  const showcaseRef = useRef(null);
+  useShowcaseTop(showcaseRef);
+  return (
+    /*
+     * No `fill`. The surface used to force `min-height: 100dvh` around a scroller that was
+     * a different height, so the difference showed as a dead band of bare background. The
+     * showcase paints its own dark ground and now owns its own height, so there is nothing
+     * for the surface to fill.
+     */
+    /* @__PURE__ */ jsx(ShopSurface, { tone: "dark", children: /* @__PURE__ */ jsxs("div", { className: styles$6.showcase, ref: showcaseRef, children: [
+      /* @__PURE__ */ jsxs("section", { className: `${styles$6.panel} ${styles$6.hero}`, "aria-label": "DAZN Shop", children: [
+        /* @__PURE__ */ jsx("div", { className: styles$6.heroImageBox, children: /* @__PURE__ */ jsx(
+          ShopImage,
+          {
+            src: "/figma/home/hero.jpg",
+            alt: "",
+            fill: true,
+            priority: true,
+            sizes: "(max-width: 480px) 100vw, 480px",
+            className: styles$6.image
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: styles$6.heroContent, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$6.heroText, children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: assetUrl("/figma/home/dazn-logo.svg"),
+                alt: "DAZN",
+                className: styles$6.logo
+              }
+            ),
+            /* @__PURE__ */ jsx("h1", { className: styles$6.heroTitle, children: "DAZN SHOP" }),
+            /* @__PURE__ */ jsx("p", { className: styles$6.heroSub, children: "Fresh drops inspired by sport, culture, and everyday movement" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles$6.swipe, children: [
+            /* @__PURE__ */ jsx("p", { className: styles$6.swipeLabel, children: "Swipe down for more" }),
+            /* @__PURE__ */ jsx("svg", { className: styles$6.chevron, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M6 9l6 6 6-6",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) })
+          ] })
         ] })
-      ] })
-    ] }),
-    PANELS_TOP.map((p) => /* @__PURE__ */ jsx(CategoryPanel, { panel: p }, p.key)),
-    /* @__PURE__ */ jsx(MosaicPanel, {}),
-    PANELS_BOTTOM.map((p) => /* @__PURE__ */ jsx(CategoryPanel, { panel: p }, p.key))
-  ] }) });
+      ] }),
+      PANELS_TOP.map((p) => /* @__PURE__ */ jsx(CategoryPanel, { panel: p }, p.key)),
+      /* @__PURE__ */ jsx(MosaicPanel, {}),
+      PANELS_BOTTOM.map((p) => /* @__PURE__ */ jsx(CategoryPanel, { panel: p }, p.key))
+    ] }) })
+  );
 }
 const overlay = "_overlay_s4eai_1";
 const scrim = "_scrim_s4eai_10";

package/dist/standalone/styles.css

@@ -1729,34 +1729,65 @@
  * outline CTA). Always dark (#080e12), independent of theme. Measurements are taken
  * from Figma: overlay pad 24, gap 16, title 32, subtitle 16/1.55, button h48 radius 8.
  */
-._showcase_1osag_7 {
-  height: calc(100dvh - 56px); /* below the 56px webview header */
+
+/*
+ * The height of this scroller is the one measurement a mounted component cannot guess.
+ *
+ * It used to be `calc(100dvh - 56px)`, and both halves were wrong.
+ *
+ * **The 56 was a hard-coded guess at somebody else's header.** We are mounted inside a
+ * host page whose chrome we do not own and cannot see. Where the host's header was not
+ * 56px — DAZN's storefront runs 69 — the scroller ended up shorter than the space it was
+ * given, leaving a dead band of bare surface at the bottom. Because the band sits below
+ * the fold until the document itself scrolls, it appeared only after scrolling down and
+ * back: exactly the report from 13 Aug 2026.
+ *
+ * **`dvh` is the wrong unit for a snap container.** It is the *dynamic* viewport, so it
+ * grows as a mobile browser hides its URL bar and shrinks as it returns. Every panel then
+ * resizes during the very scroll that snapping depends on, and the container is left
+ * parked between snap points. `svh` is the stable smallest value and never changes
+ * mid-scroll. The cost is a small gap when the chrome is hidden; the alternative is a
+ * layout that moves under the reader's thumb.
+ *
+ * `--showcase-top` is measured at mount and on resize (see HomeShowcase.tsx) rather than
+ * assumed: whatever the host puts above us, we take the rest.
+ */
+._showcase_16alm_30 {
+  height: calc(100svh - var(--showcase-top, 0px));
   overflow-y: auto;
   scroll-snap-type: y mandatory;
+  /*
+   * Do not hand the scroll on to the host page when this container reaches its end.
+   * Chaining is what let the outer document sit at a different offset from this one, so a
+   * reader who scrolled to the bottom and back found the page in a state neither scroller
+   * agreed on.
+   */
+  overscroll-behavior-y: contain;
   -webkit-overflow-scrolling: touch;
   background: #080e12;
   scrollbar-width: none;
 }
-._showcase_1osag_7::-webkit-scrollbar {
+._showcase_16alm_30::-webkit-scrollbar {
   display: none;
 }
 
-._panel_1osag_19 {
+._panel_16alm_49 {
   position: relative;
-  height: calc(100dvh - 56px);
+  /* Matches the scroller exactly, or snapping has nothing to align to. */
+  height: calc(100svh - var(--showcase-top, 0px));
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
 
-._image_1osag_28 {
+._image_16alm_59 {
   object-fit: cover;
   object-position: center;
 }
 
 /* Bottom scrim so overlay text stays legible over any photo. */
-._panel_1osag_19::after {
+._panel_16alm_49::after {
   content: '';
   position: absolute;
   inset: 0;
@@ -1770,12 +1801,12 @@
  * (`edit_9 1`) is 375x674 and stops where the opaque "swipe down" bar starts. Giving it
  * its own box keeps the shot at its native aspect instead of cover-cropping the sides.
  */
-._heroImageBox_1osag_48 {
+._heroImageBox_16alm_79 {
   position: absolute;
   inset: 0 0 82px;
   overflow: hidden;
 }
-._hero_1osag_48 ._heroContent_1osag_53 {
+._hero_16alm_79 ._heroContent_16alm_84 {
   position: absolute;
   bottom: 15px;
   left: 0;
@@ -1786,7 +1817,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1osag_64 {
+._heroText_16alm_95 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -1794,11 +1825,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._logo_1osag_72 {
+._logo_16alm_103 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1osag_76 {
+._heroTitle_16alm_107 {
   margin: 0;
   font-size: 56px;
   line-height: 1.3;
@@ -1806,14 +1837,14 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1osag_84 {
+._heroSub_16alm_115 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1osag_91 {
+._swipe_16alm_122 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1822,25 +1853,25 @@
   justify-content: center;
   background: #080e12;
 }
-._swipeLabel_1osag_100 {
+._swipeLabel_16alm_131 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1osag_106 {
+._chevron_16alm_137 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1osag_1 1.8s ease-in-out infinite;
+  animation: _bob_16alm_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1osag_1 {
+@keyframes _bob_16alm_1 {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(4px); }
 }
 
 /* ── Category panels ── */
-._overlay_1osag_118 {
+._overlay_16alm_149 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -1852,25 +1883,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_1osag_130 {
+._copy_16alm_161 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1osag_135 {
+._title_16alm_166 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1osag_142 {
+._subtitle_16alm_173 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1osag_148 {
+._cta_16alm_179 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1884,45 +1915,45 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1osag_148:active {
+._cta_16alm_179:active {
   background: rgba(249, 250, 250, 0.12);
 }
 
 /* ── Mosaic gallery panel ── */
-._mosaicPanel_1osag_167 {
+._mosaicPanel_16alm_198 {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-._mosaicPanel_1osag_167::after {
+._mosaicPanel_16alm_198::after {
   display: none;
 }
-._mosaic_1osag_167 {
+._mosaic_16alm_198 {
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 343px;
 }
-._mRow_1osag_181 {
+._mRow_16alm_212 {
   display: flex;
   gap: 12px;
   align-items: center;
 }
-._mBetween_1osag_186 {
+._mBetween_16alm_217 {
   justify-content: space-between;
 }
-._mCol_1osag_189 {
+._mCol_16alm_220 {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
-._tile_1osag_194 {
+._tile_16alm_225 {
   position: relative;
   border-radius: 6px;
   overflow: hidden;
   flex-shrink: 0;
 }
-._solid_1osag_200 {
+._solid_16alm_231 {
   background: #171e23;
 }
 ._overlay_s4eai_1 {

package/dist/styles.css

@@ -1729,34 +1729,65 @@
  * outline CTA). Always dark (#080e12), independent of theme. Measurements are taken
  * from Figma: overlay pad 24, gap 16, title 32, subtitle 16/1.55, button h48 radius 8.
  */
-._showcase_1osag_7 {
-  height: calc(100dvh - 56px); /* below the 56px webview header */
+
+/*
+ * The height of this scroller is the one measurement a mounted component cannot guess.
+ *
+ * It used to be `calc(100dvh - 56px)`, and both halves were wrong.
+ *
+ * **The 56 was a hard-coded guess at somebody else's header.** We are mounted inside a
+ * host page whose chrome we do not own and cannot see. Where the host's header was not
+ * 56px — DAZN's storefront runs 69 — the scroller ended up shorter than the space it was
+ * given, leaving a dead band of bare surface at the bottom. Because the band sits below
+ * the fold until the document itself scrolls, it appeared only after scrolling down and
+ * back: exactly the report from 13 Aug 2026.
+ *
+ * **`dvh` is the wrong unit for a snap container.** It is the *dynamic* viewport, so it
+ * grows as a mobile browser hides its URL bar and shrinks as it returns. Every panel then
+ * resizes during the very scroll that snapping depends on, and the container is left
+ * parked between snap points. `svh` is the stable smallest value and never changes
+ * mid-scroll. The cost is a small gap when the chrome is hidden; the alternative is a
+ * layout that moves under the reader's thumb.
+ *
+ * `--showcase-top` is measured at mount and on resize (see HomeShowcase.tsx) rather than
+ * assumed: whatever the host puts above us, we take the rest.
+ */
+._showcase_16alm_30 {
+  height: calc(100svh - var(--showcase-top, 0px));
   overflow-y: auto;
   scroll-snap-type: y mandatory;
+  /*
+   * Do not hand the scroll on to the host page when this container reaches its end.
+   * Chaining is what let the outer document sit at a different offset from this one, so a
+   * reader who scrolled to the bottom and back found the page in a state neither scroller
+   * agreed on.
+   */
+  overscroll-behavior-y: contain;
   -webkit-overflow-scrolling: touch;
   background: #080e12;
   scrollbar-width: none;
 }
-._showcase_1osag_7::-webkit-scrollbar {
+._showcase_16alm_30::-webkit-scrollbar {
   display: none;
 }
 
-._panel_1osag_19 {
+._panel_16alm_49 {
   position: relative;
-  height: calc(100dvh - 56px);
+  /* Matches the scroller exactly, or snapping has nothing to align to. */
+  height: calc(100svh - var(--showcase-top, 0px));
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
 
-._image_1osag_28 {
+._image_16alm_59 {
   object-fit: cover;
   object-position: center;
 }
 
 /* Bottom scrim so overlay text stays legible over any photo. */
-._panel_1osag_19::after {
+._panel_16alm_49::after {
   content: '';
   position: absolute;
   inset: 0;
@@ -1770,12 +1801,12 @@
  * (`edit_9 1`) is 375x674 and stops where the opaque "swipe down" bar starts. Giving it
  * its own box keeps the shot at its native aspect instead of cover-cropping the sides.
  */
-._heroImageBox_1osag_48 {
+._heroImageBox_16alm_79 {
   position: absolute;
   inset: 0 0 82px;
   overflow: hidden;
 }
-._hero_1osag_48 ._heroContent_1osag_53 {
+._hero_16alm_79 ._heroContent_16alm_84 {
   position: absolute;
   bottom: 15px;
   left: 0;
@@ -1786,7 +1817,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1osag_64 {
+._heroText_16alm_95 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -1794,11 +1825,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._logo_1osag_72 {
+._logo_16alm_103 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1osag_76 {
+._heroTitle_16alm_107 {
   margin: 0;
   font-size: 56px;
   line-height: 1.3;
@@ -1806,14 +1837,14 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1osag_84 {
+._heroSub_16alm_115 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1osag_91 {
+._swipe_16alm_122 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1822,25 +1853,25 @@
   justify-content: center;
   background: #080e12;
 }
-._swipeLabel_1osag_100 {
+._swipeLabel_16alm_131 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1osag_106 {
+._chevron_16alm_137 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1osag_1 1.8s ease-in-out infinite;
+  animation: _bob_16alm_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1osag_1 {
+@keyframes _bob_16alm_1 {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(4px); }
 }
 
 /* ── Category panels ── */
-._overlay_1osag_118 {
+._overlay_16alm_149 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -1852,25 +1883,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_1osag_130 {
+._copy_16alm_161 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1osag_135 {
+._title_16alm_166 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1osag_142 {
+._subtitle_16alm_173 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1osag_148 {
+._cta_16alm_179 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1884,45 +1915,45 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1osag_148:active {
+._cta_16alm_179:active {
   background: rgba(249, 250, 250, 0.12);
 }
 
 /* ── Mosaic gallery panel ── */
-._mosaicPanel_1osag_167 {
+._mosaicPanel_16alm_198 {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-._mosaicPanel_1osag_167::after {
+._mosaicPanel_16alm_198::after {
   display: none;
 }
-._mosaic_1osag_167 {
+._mosaic_16alm_198 {
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 343px;
 }
-._mRow_1osag_181 {
+._mRow_16alm_212 {
   display: flex;
   gap: 12px;
   align-items: center;
 }
-._mBetween_1osag_186 {
+._mBetween_16alm_217 {
   justify-content: space-between;
 }
-._mCol_1osag_189 {
+._mCol_16alm_220 {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
-._tile_1osag_194 {
+._tile_16alm_225 {
   position: relative;
   border-radius: 6px;
   overflow: hidden;
   flex-shrink: 0;
 }
-._solid_1osag_200 {
+._solid_16alm_231 {
   background: #171e23;
 }
 ._overlay_s4eai_1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "publishConfig": {