@tokenoftrust/storefront-runner 2.0.40 → 2.0.42

package/apps/storefront/src/components/chrome/SiteHeader.astro

@@ -35,6 +35,10 @@ interface Props {
   nav?: ChromeNavItem[];
   /** Search form action (GET). Omit to hide search. Mounts the live SearchTypeahead island. */
   searchAction?: string;
+  /** Search input placeholder (defaults to "Search products"). */
+  searchPlaceholder?: string;
+  /** Accessible search label (defaults to "Search"). */
+  searchLabel?: string;
   /** Announcement text surfaced inside the mobile drawer (the desktop banner is a Layout-level sibling, e.g. <AnnouncementBar>). */
   announcement?: string;
   /** Generic account-icon link (no session awareness). Prefer `authLink` for a real session-aware entry point — passing both renders two affordances. */
@@ -69,6 +73,8 @@ const {
   brandHref,
   nav = [],
   searchAction,
+  searchPlaceholder,
+  searchLabel,
   announcement,
   accountHref,
   authLink,
@@ -87,6 +93,7 @@ const homeHref = withBase(basePath, brandHref ?? "/");
 const showLogo = !!logo && /^(https?:|\/)/.test(logo.src);
 const dark = variant === "dark";
 const minimal = layout === "minimal";
+const compact = layout === "compact-centered";
 
 const ctaClass = (v?: string) =>
   v === "secondary" || v === "ghost"
@@ -120,7 +127,7 @@ const mobileNav = nav.map((item) => ({
 const currentPath = Astro.url.pathname;
 ---
 
-<header class:list={[sticky && "sticky top-0 z-40", className]}>
+<header class:list={[sticky && !compact && "sticky top-0 z-40", className]} data-layout={layout}>
   <div
     class:list={[
       "border-b backdrop-blur",
@@ -129,11 +136,26 @@ const currentPath = Astro.url.pathname;
         : "border-border bg-surface/95 text-text",
     ]}
   >
-    <div class="container-prose flex h-16 items-center gap-4">
+    <div
+      class:list={[
+        "container-prose h-16 items-center gap-4",
+        compact ? "relative grid grid-cols-[1fr_auto_1fr]" : "flex",
+      ]}
+    >
+      {
+        compact && nav.length > 0 && (
+          <div class="hidden min-w-0 md:block">
+            <MegaMenu items={nav} />
+          </div>
+        )
+      }
       <!-- Logo / wordmark -->
       <a
         href={homeHref}
-        class="flex shrink-0 items-center transition-opacity hover:opacity-80"
+        class:list={[
+          "flex shrink-0 items-center transition-opacity hover:opacity-80",
+          compact && "absolute left-1/2 -translate-x-1/2 md:static md:translate-x-0 md:justify-self-center",
+        ]}
         aria-label={logo?.alt ?? wordmark ?? "Home"}
       >
         {
@@ -142,9 +164,23 @@ const currentPath = Astro.url.pathname;
               Brand logo: a bare merchant URL shown at a fixed header height via
               object-contain. It can't go through <Img> — that forces an
               aspect-ratio crop box + a placeholder background, which would alter
-              a transparent logo's appearance. Keep raw, but set explicit
-              width/height (reserve space → CLS-free) and, since it sits
-              above the fold, eager/async loading hints.
+              a transparent logo's appearance.
+
+              BOTH dimensions are pinned in CSS, deliberately. `h-9 w-auto` looks
+              like it reserves space — the width/height attributes give an
+              aspect ratio — but the width still RESOLVES from the image: the
+              declared ratio before load, the real file's ratio after. When those
+              disagree the header resizes on load and everything below it jumps.
+              Measured 2026-09-21: declared 176x69, rendered 87x34, and the
+              resulting reflow of an 18,666px <main> scored CLS 0.82 — 96% of the
+              page's total, and enough to make the whole run unmeasurable.
+
+              Computing the width here from the DECLARED dimensions makes the box
+              a pure function of config: identical before and after load, for
+              every tenant, whether or not their declared size matches the file.
+              object-contain then letterboxes any mismatch instead of resizing
+              the box, which is exactly the failure mode we can never see coming
+              because it depends on a merchant's asset.
             */
             <img
               src={logo!.src}
@@ -153,7 +189,11 @@ const currentPath = Astro.url.pathname;
               height={logo!.height ?? 48}
               loading="eager"
               decoding="async"
-              class="h-9 w-auto max-w-[180px] object-contain"
+              class="h-9 object-contain"
+              style={`width:${Math.min(
+                180,
+                Math.round((36 * (logo!.width ?? 160)) / (logo!.height ?? 48)),
+              )}px`}
             />
           ) : (
             <span class="font-display text-lg font-bold tracking-tight">
@@ -165,15 +205,34 @@ const currentPath = Astro.url.pathname;
 
       <!-- Search (live typeahead island) -->
       {
-        !minimal && searchAction && (
+        !minimal && !compact && searchAction && (
           <div class="hidden flex-1 md:flex">
-            <SearchTypeahead client:idle action={searchAction} />
+            <SearchTypeahead
+              client:idle
+              action={searchAction}
+              placeholder={searchPlaceholder}
+              label={searchLabel}
+            />
           </div>
         )
       }
 
       <!-- Actions: saved items + marketing CTAs + auth + account + cart (link only) + mobile menu -->
-      <div class="ml-auto flex items-center gap-1">
+      <div class:list={["flex items-center gap-1", compact ? "col-start-3 justify-self-end" : "ml-auto"]}>
+        {
+          compact && searchAction && (
+            <a
+              href={withBase(basePath, searchAction)}
+              aria-label={searchLabel ?? "Search"}
+              class="hidden h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent md:grid"
+            >
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
+                <circle cx="11" cy="11" r="7" />
+                <path d="M21 21l-4.3-4.3" />
+              </svg>
+            </a>
+          )
+        }
         {
           !minimal && savedItemsHref && (
             <a
@@ -247,7 +306,7 @@ const currentPath = Astro.url.pathname;
           cartHref && (
             <a
               href={withBase(basePath, cartHref)}
-              aria-label="Cart"
+              aria-label={`Cart, ${cartCount} ${cartCount === 1 ? "item" : "items"}`}
               class="relative grid h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent"
             >
               <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
@@ -269,7 +328,7 @@ const currentPath = Astro.url.pathname;
         <!-- Mobile menu: the MobileNav island (focus-trap, scroll-lock, Escape-to-close) -->
         {
           !minimal && nav.length > 0 && (
-            <div class="md:hidden">
+            <div class:list={["md:hidden", compact && "absolute left-0 top-1/2 -translate-y-1/2"]}>
               <MobileNav client:idle nav={mobileNav} announcement={announcement} currentPath={currentPath} />
             </div>
           )
@@ -288,7 +347,7 @@ const currentPath = Astro.url.pathname;
        [data-mobile-nav-fallback] effect) so JS-enabled visitors get the drawer
        as the primary/enhanced experience; this is additive, not a replacement. -->
   {
-    !minimal && nav.length > 0 && (
+    !minimal && !compact && nav.length > 0 && (
       <div class="border-b border-border bg-surface">
         <div class="container-prose">
           <MegaMenu items={nav} />
@@ -310,3 +369,14 @@ const currentPath = Astro.url.pathname;
     )
   }
 </header>
+
+{
+  compact && (
+    <nav class:list={["fixed inset-x-0 bottom-0 z-50 grid h-[62px] border-t border-border bg-surface shadow-[0_-3px_14px_color-mix(in_srgb,var(--color-text)_10%,transparent)] md:hidden", cartHref ? "grid-cols-4" : "grid-cols-3"]} aria-label="Quick links">
+      <a href={homeHref} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Home</a>
+      <a href={withBase(basePath, searchAction ?? "/search")} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Search</a>
+      <a href={accountHref ? withBase(basePath, accountHref) : (authLink?.href ?? "/auth/login")} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Account</a>
+      {cartHref && <a href={withBase(basePath, cartHref)} class="flex flex-col items-center justify-center gap-0.5 text-[0.65rem] text-text">Cart</a>}
+    </nav>
+  )
+}

package/apps/storefront/src/components/commerce/RatingStars.astro

@@ -39,7 +39,7 @@ const label =
     : `Rated ${clamped} out of ${max}`;
 ---
 
-<span class:list={["inline-flex items-center gap-1.5", className]} aria-label={label}>
+<span class:list={["inline-flex items-center gap-1.5", className]} role="img" aria-label={label}>
   <span class:list={["relative inline-block leading-none tracking-[0.08em]", dim]} aria-hidden="true">
     <span class="text-[var(--color-border)]">{stars}</span>
     <span

package/apps/storefront/src/components/compliance/ComplianceNotice.astro

@@ -56,7 +56,7 @@ const TONE_TEXT: Record<Tone, string> = {
       aria-label={label}
       data-compliance={hook}
     >
-      <p class={`container-prose py-2 text-center text-[0.72rem] font-semibold uppercase tracking-[0.05em] sm:text-xs ${TONE_TEXT[tone]}`}>
+      <p class={`container-prose py-2 text-center text-sm font-semibold uppercase tracking-[0.05em] ${TONE_TEXT[tone]}`}>
         {symbol && <span aria-hidden="true" class="mr-1">{symbol}</span>}
         <slot />
       </p>
@@ -64,7 +64,7 @@ const TONE_TEXT: Record<Tone, string> = {
   ) : variant === "footer" ? (
     <div class="border-t border-[var(--color-border)] bg-[var(--color-bg)]" data-compliance={hook}>
       <p
-        class="container-prose py-3 text-center text-xs text-[var(--color-muted)]"
+        class="container-prose py-3 text-center text-sm text-[var(--color-muted)]"
         role="note"
         aria-label={label}
       >

package/apps/storefront/src/components/content/PromoTiles.astro

@@ -0,0 +1,107 @@
+---
+/** Static, provider-neutral commerce promo presentations. */
+import Section from "@/components/Section.astro";
+import type { PromoTilesBlock } from "@/lib/storyblok/content-model";
+import { promoTilesView } from "@/lib/homeVisualParity";
+
+interface Props {
+  block: PromoTilesBlock;
+  basePath: string;
+  tenantId: string;
+}
+
+const { block, basePath, tenantId } = Astro.props;
+const view = promoTilesView(block, basePath, tenantId);
+const railId = `promo-${tenantId.replace(/[^a-z0-9]+/gi, "-")}-${(block.title ?? "tiles").replace(/[^a-z0-9]+/gi, "-")}`;
+---
+
+<Section title={block.title} eyebrow={view.eyebrow} tone="bg" class={view.isLogoStrip ? "py-8" : undefined}>
+  <div
+    id={view.isPortrait ? railId : undefined}
+    class={view.gridClass}
+    data-presentation={view.presentation}
+    aria-label={view.isPortrait ? (block.title ?? "Featured collections") : undefined}
+  >
+    {view.tiles.map((tile) => (
+      <a
+        href={tile.href}
+        class:list={[
+          "group block",
+          view.isOverlay && "relative aspect-[16/9] overflow-hidden rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)]",
+          view.isLogoStrip && "flex min-h-16 items-center justify-center px-3 py-2",
+          view.isPortrait && "promo-portrait-card snap-start",
+        ]}
+      >
+        {tile.image && (
+          <img
+            src={tile.image}
+            alt={tile.imageAlt ?? tile.label}
+            width={tile.imageWidth}
+            height={tile.imageHeight}
+            loading="lazy"
+            class:list={tile.imageClass}
+          />
+        )}
+        {view.isOverlay ? (
+          <span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-4 font-display text-lg font-semibold text-white">
+            {tile.label}
+          </span>
+        ) : !view.isLogoStrip ? (
+          <span class="mt-3 block">
+            <span class="block font-display text-base font-semibold text-[var(--color-text)]">{tile.label}</span>
+            {tile.meta && <span class="mt-1 block text-sm text-[var(--color-muted)]">{tile.meta}</span>}
+          </span>
+        ) : (
+          <span class="sr-only">{tile.label}</span>
+        )}
+      </a>
+    ))}
+  </div>
+  {view.isPortrait && view.tiles.length > 1 && (
+    <div class="promo-portrait-dots" aria-hidden="true">
+      {view.tiles.map(() => <span />)}
+    </div>
+  )}
+  {view.cta && (
+    <div class="mt-8 text-center">
+      <a
+        href={view.cta.href}
+        class="link-accent link-accent--cta font-display text-sm font-medium"
+      >
+        {view.cta.label} →
+      </a>
+    </div>
+  )}
+</Section>
+
+<style>
+  /* Fixed track widths, not `minmax(0, …)`: a shrinkable minimum lets the grid
+     squeeze every card into the container instead of overflowing, which is what
+     makes this a scroll-snap rail at all. */
+  .promo-portrait-rail {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 78%;
+    gap: 1rem;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    padding: .125rem max(1rem, calc((100vw - var(--container, 80rem)) / 2));
+    margin-inline: min(-1rem, calc((var(--container, 80rem) - 100vw) / 2));
+    scroll-padding-inline: 1rem;
+    scroll-snap-type: inline mandatory;
+    scrollbar-width: none;
+  }
+  .promo-portrait-rail::-webkit-scrollbar { display: none; }
+  .promo-portrait-card { min-width: 0; }
+  /* Position indicators, not controls: one dot per card is ~9px wide at any
+     realistic card count, far under the 44px tap minimum, and every card it
+     would scroll to is already a focusable link in the rail above. */
+  .promo-portrait-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1.25rem; }
+  .promo-portrait-dots span { inline-size: .55rem; block-size: .55rem; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 24%, transparent); }
+  @media (min-width: 40rem) {
+    .promo-portrait-rail { grid-auto-columns: 42%; }
+  }
+  @media (min-width: 64rem) {
+    .promo-portrait-rail { grid-auto-columns: calc((100% - 4rem) / 5); scroll-padding-inline: 0; padding-inline: 0; margin-inline: 0; }
+  }
+</style>

package/apps/storefront/src/components/content/TrustStrip.astro

@@ -9,36 +9,52 @@
  * data-widget="trust-strip".
  */
 import type { TrustStripItem } from "@/lib/content/trustStrip";
-import { sanitizeTrustStrip, ratingAriaLabel } from "@/lib/content/trustStrip";
+import { orderTrustStripForMobile, sanitizeTrustStrip, ratingAriaLabel } from "@/lib/content/trustStrip";
 
 interface Props {
   items: TrustStripItem[];
+  tenantId?: string;
+  mobile?: { hidden?: boolean; order?: string[] };
 }
-const items = sanitizeTrustStrip(Astro.props.items);
+const items = sanitizeTrustStrip(Astro.props.items, Astro.props.tenantId);
+const mobileItems = orderTrustStripForMobile(items, Astro.props.mobile?.order);
 ---
 {
   items.length > 0 && (
     <div
-      class="border-y border-[var(--color-border)] bg-[var(--color-surface)]"
+      class:list={["border-y border-[var(--color-border)] bg-[var(--color-surface)]", Astro.props.mobile?.hidden && "max-md:hidden"]}
       data-widget="trust-strip"
     >
-      <ul class="container-prose flex flex-wrap items-center justify-center gap-x-6 gap-y-2 py-4 text-center font-mono text-[0.72rem] uppercase tracking-[0.1em] text-[var(--color-muted)]">
+      <ul class="container-prose hidden items-stretch text-center text-sm text-[var(--color-text)] md:grid md:grid-cols-4">
         {items.map((item) =>
           item.kind === "rating" ? (
-            <li
-              class="flex items-center gap-1.5 text-[var(--color-text)]"
-              data-trust="rating"
-            >
+            <li class="flex min-h-16 items-center justify-center gap-1.5 border-[var(--color-border)] px-4 py-3 md:[&:not(:last-child)]:border-r" data-trust="rating">
               <span aria-hidden="true" class="text-[var(--color-warning)]">★</span>
-              <span aria-hidden="true">
-                {Math.round(item.average * 10) / 10}
-                {item.label ? ` ${item.label}` : ` (${item.count})`}
-              </span>
+              <span aria-hidden="true">{Math.round(item.average * 10) / 10}{item.label ? ` ${item.label}` : ` (${item.count})`}</span>
               <span class="sr-only">{ratingAriaLabel(item)}</span>
             </li>
           ) : (
-            <li data-trust="claim">{item.label}</li>
-          ),
+            <li class="flex min-h-16 items-center justify-center gap-3 border-[var(--color-border)] px-4 py-3 md:[&:not(:last-child)]:border-r" data-trust="claim">
+              {item.icon && <img src={item.icon} alt={item.iconAlt ?? ""} width="28" height="28" loading="lazy" class="h-7 w-7 shrink-0 object-contain" />}
+              <span>{item.label}</span>
+            </li>
+          )
+        )}
+      </ul>
+      <ul class="container-prose grid grid-cols-2 items-stretch text-center text-sm text-[var(--color-text)] md:hidden">
+        {mobileItems.map((item) =>
+          item.kind === "rating" ? (
+            <li class="flex min-h-16 items-center justify-center gap-1.5 border-[var(--color-border)] px-4 py-3 [&:nth-child(odd)]:border-r" data-trust="rating">
+              <span aria-hidden="true" class="text-[var(--color-warning)]">★</span>
+              <span aria-hidden="true">{Math.round(item.average * 10) / 10}{item.label ? ` ${item.label}` : ` (${item.count})`}</span>
+              <span class="sr-only">{ratingAriaLabel(item)}</span>
+            </li>
+          ) : (
+            <li class="flex min-h-16 items-center justify-center gap-3 border-[var(--color-border)] px-4 py-3 [&:nth-child(odd)]:border-r" data-trust="claim">
+              {item.icon && <img src={item.icon} alt={item.iconAlt ?? ""} width="28" height="28" loading="lazy" class="h-7 w-7 shrink-0 object-contain" />}
+              <span>{item.label}</span>
+            </li>
+          )
         )}
       </ul>
     </div>

package/apps/storefront/src/components/home/Hero.astro

@@ -1,31 +1,117 @@
 ---
 /**
  * Homepage hero — the SIGNATURE moment (brief §6: "hero is a thesis", spend
- * boldness in ONE place). Two treatments, by the tenant's brand.heroVariant:
+ * boldness in ONE place). It has a governed slideshow plus three heroVariant
+ * treatments:
+ *   - non-empty `block.slides`: a static, accessible slideshow whose first
+ *     rehosted slide is the LCP image. Slides take precedence over heroVariant.
  *   - "bold" (default): full-bleed primary background, light contrast text.
  *   - "light": hero on the page background, brand color as an accent on the
  *     headline + CTA — matches merchants whose own site is a light page with
  *     color accents. The brand adopter sets "light" when it captures a hero image.
- * The feature image is the merchant's own hero slide (block.image) when adopted,
+ *   - "banner": a merchant-supplied wide campaign asset edge-to-edge, for
+ *     visual-parity migrations where the artwork owns the visible copy.
+ * The feature image is the merchant's own hero image (block.image) when adopted,
  * else the hero collection's first product.
  */
 import type { HeroBlock } from "@/lib/storyblok/content-model";
 import type { CatalogProduct } from "@tot/public-runtime";
 import Img from "@/components/Img.astro";
 import { withBase } from "@/lib/basePath";
+import { heroSlideshowView } from "@/lib/heroSlideshow";
 
 interface Props {
   block: HeroBlock;
   featureProduct?: CatalogProduct | null;
+  instanceKey?: string;
 }
-const { block, featureProduct } = Astro.props;
+const { block, featureProduct, instanceKey = "home" } = Astro.props;
 const { basePath } = Astro.locals;
-const light = (Astro.locals.tenant?.theme_tokens?.brand?.heroVariant ?? "bold") === "light";
+const heroVariant = Astro.locals.tenant?.theme_tokens?.brand?.heroVariant ?? "bold";
+const light = heroVariant === "light";
+const banner = heroVariant === "banner" && Boolean(block.image);
 const prodImg = featureProduct?.images[0];
 const heroImg = block.image;
 const hasImage = Boolean(heroImg || (prodImg && featureProduct));
+const slideshowView = heroSlideshowView(block, instanceKey, basePath);
+const slides = slideshowView.slides;
+const slideshow = slides.length > 0;
+const slideId = slideshowView.id;
 ---
 
+{slideshow ? (
+  <section
+    class="hero-slideshow bg-[var(--color-bg)]"
+    aria-roledescription="carousel"
+    aria-label={block.headline}
+    data-hero-slideshow
+    data-autoplay={slideshowView.autoplay ? "true" : "false"}
+    data-interval={slideshowView.intervalMs}
+  >
+    <h1 class="sr-only">{block.headline}</h1>
+    <div class="hero-slideshow__slides">
+      {slides.map((slide) => (
+        <Fragment>
+          <input
+            class="hero-slideshow__radio"
+            type="radio"
+            name={slideId}
+            id={slide.radioId}
+            checked={slide.checked}
+            aria-label={slide.radioLabel}
+          />
+          <div class="hero-slideshow__slide" role={slide.groupRole} aria-roledescription="slide" aria-label={slide.groupLabel} data-focus-target={slide.focusTarget}>
+            {slide.ctaHref ? (
+              <a href={slide.href} aria-label={slide.ctaLabel ?? slide.headline ?? slide.imageAlt} class="block w-full">
+                <img src={slide.image} alt={slide.imageAlt} width={slide.width} height={slide.height} loading={slide.loading} fetchpriority={slide.fetchpriority} decoding={slide.decoding} class="hero-slideshow__image" />
+              </a>
+            ) : (
+              <img src={slide.image} alt={slide.imageAlt} width={slide.width} height={slide.height} loading={slide.loading} fetchpriority={slide.fetchpriority} decoding={slide.decoding} class="hero-slideshow__image" />
+            )}
+          </div>
+        </Fragment>
+      ))}
+    </div>
+    {slides.length > 1 && (
+      <div class="hero-slideshow__controls" aria-label="Hero slides">
+        {slides.map((slide, index) => <label for={slide.radioId}>{index + 1}<span class="sr-only">: {slide.headline ?? slide.imageAlt}</span></label>)}
+      </div>
+    )}
+  </section>
+) : banner ? (
+  <section class="bg-[var(--color-bg)]">
+    <h1 class="sr-only">{block.headline}</h1>
+    {block.ctaHref ? (
+      <a
+        href={withBase(basePath, block.ctaHref)}
+        aria-label={block.ctaLabel ?? block.headline}
+        class="block w-full"
+      >
+        <img
+          src={block.image}
+          alt={block.imageAlt ?? ""}
+          width={1920}
+          height={650}
+          loading="eager"
+          fetchpriority="high"
+          decoding="sync"
+          class="block h-auto w-full"
+        />
+      </a>
+    ) : (
+      <img
+        src={block.image}
+        alt={block.imageAlt ?? block.headline}
+        width={1920}
+        height={650}
+        loading="eager"
+        fetchpriority="high"
+        decoding="sync"
+        class="block h-auto w-full"
+      />
+    )}
+  </section>
+) : (
 <section
   class:list={[
     "relative overflow-hidden",
@@ -176,3 +262,69 @@ const hasImage = Boolean(heroImg || (prodImg && featureProduct));
   >
   </div>
 </section>
+)}
+
+<style>
+  .hero-slideshow { position: relative; overflow: hidden; }
+  .hero-slideshow__slides { display: grid; aspect-ratio: 1920 / 650; background: var(--color-bg); }
+  .hero-slideshow__radio { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
+  .hero-slideshow__slide { grid-area: 1 / 1; display: none; min-width: 0; }
+  .hero-slideshow__radio:checked + .hero-slideshow__slide { display: grid; }
+  .hero-slideshow__slide > a { min-width: 0; }
+  .hero-slideshow__image { display: block; width: 100%; height: 100%; object-fit: contain; }
+  .hero-slideshow__controls { position: absolute; inset-inline: 0; bottom: 1rem; z-index: 1; display: flex; justify-content: center; gap: .5rem; }
+  .hero-slideshow__controls label { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 999px; background: color-mix(in srgb, var(--color-bg) 86%, transparent); color: var(--color-text); cursor: pointer; font: 600 .75rem/1 var(--font-mono); }
+  .hero-slideshow__radio:focus-visible + .hero-slideshow__slide { outline: 2px solid var(--color-accent); outline-offset: -2px; }
+  @media (max-width: 40rem) {
+    .hero-slideshow__controls { bottom: .35rem; gap: .3rem; }
+    .hero-slideshow__controls label { inline-size: 2.75rem; block-size: 2.75rem; font-size: .65rem; }
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-slideshow__image { scroll-behavior: auto; } }
+</style>
+
+<script>
+  import { heroAutoplayAllowed, nextHeroSlideIndex } from "@/lib/heroSlideshow";
+
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+
+  for (const root of document.querySelectorAll<HTMLElement>("[data-hero-slideshow]")) {
+    const radios = Array.from(root.querySelectorAll<HTMLInputElement>(".hero-slideshow__radio"));
+    const interval = Number(root.dataset.interval) || 6000;
+    let timer: number | undefined;
+    let paused = false;
+
+    const stop = () => {
+      if (timer !== undefined) window.clearInterval(timer);
+      timer = undefined;
+    };
+    const start = () => {
+      stop();
+      if (!heroAutoplayAllowed({
+        enabled: root.dataset.autoplay === "true",
+        reducedMotion: reducedMotion.matches,
+        paused,
+        pageVisible: !document.hidden,
+        slideCount: radios.length,
+      })) return;
+      timer = window.setInterval(() => {
+        const current = radios.findIndex((radio) => radio.checked);
+        radios[nextHeroSlideIndex(current, radios.length)]?.click();
+      }, interval);
+    };
+
+    root.addEventListener("pointerenter", () => { paused = true; stop(); });
+    root.addEventListener("pointerleave", () => { paused = false; start(); });
+    root.addEventListener("focusin", () => { paused = true; stop(); });
+    root.addEventListener("focusout", (event) => {
+      if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;
+      paused = false;
+      start();
+    });
+    root.addEventListener("change", (event) => {
+      if (event.target instanceof HTMLInputElement && event.target.matches(".hero-slideshow__radio")) start();
+    });
+    document.addEventListener("visibilitychange", () => document.hidden ? stop() : start());
+    reducedMotion.addEventListener("change", start);
+    start();
+  }
+</script>