create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/components/content/CardRow.tsx

@@ -0,0 +1,140 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { Children, useCallback, useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'
+import { IconButton } from '../base/IconButton'
+import { useScrollRegion } from '../../styles/scroll'
+import { useNova } from '../../styles/NovaProvider'
+import { SectionHead } from './SectionHead'
+import './CardRow.css'
+
+/**
+ * 12C · 00 the one section header + row every product (and collection) row
+ * uses. Header: eyebrow · heading · description, with "View all" and the
+ * carousel arrows at the inline end — arrows are 40px circles in the header
+ * row, never over products; a disabled arrow is 30% ink. A centred header
+ * moves View all under the row.
+ *
+ *   grid      exactly `columns` per row from 1024 (2 at 640–1023, mobileColumns
+ *             below); fewer items than columns keep their width — never stretched
+ *   carousel  scroll-snap; Tab moves through cards; no autoplay for products.
+ *             At 390: no arrows, 2.3 cards visible (peek) and a progress line
+ * Gaps are the same everywhere: 16 / 40 desktop, 8 / 28 at 390.
+ */
+export interface CardRowProps {
+  eyebrow?: string
+  heading?: string
+  description?: string
+  headerSize?: 'small' | 'medium' | 'large'
+  headingLevel?: 1 | 2 | 3
+  align?: 'left' | 'center'
+  viewAll?: { label: string; href: string } | null
+  /** Extra header action (recently viewed: Clear history). */
+  action?: ReactNode
+  layout?: 'grid' | 'carousel'
+  columns?: number
+  mobileColumns?: 1 | 2
+  /** Grid rows become a carousel below 640. */
+  carouselOnMobile?: boolean
+  /** Arrows in the header row (carousel, ≥ 640). */
+  showNavigation?: boolean
+  /** Accessible name for the list (defaults to the heading). */
+  label?: string
+  /** The row's items — one card each. */
+  children: ReactNode
+  className?: string
+}
+
+export function CardRow({
+  eyebrow,
+  heading,
+  description,
+  headerSize = 'medium',
+  headingLevel = 2,
+  align = 'left',
+  viewAll,
+  action,
+  layout = 'grid',
+  columns = 4,
+  mobileColumns = 2,
+  carouselOnMobile,
+  showNavigation = true,
+  label,
+  children,
+  className,
+}: CardRowProps): JSX.Element {
+  const { strings, dir } = useNova()
+  const items = Children.toArray(children)
+  // A carousel with no more items than columns is simply a grid.
+  const carousel = layout === 'carousel' && items.length > columns
+  const scroller = useRef<HTMLUListElement>(null)
+  const [edge, setEdge] = useState({ start: true, end: false, progress: 0, visible: 1 })
+  // A strip with nothing focusable inside (quotes) must still be reachable by keyboard while it scrolls.
+  const region = useScrollRegion(scroller, label ?? heading ?? '', [items.length], { list: true })
+
+  const measure = useCallback(() => {
+    const el = scroller.current
+    if (!el) return
+    const max = el.scrollWidth - el.clientWidth
+    const pos = Math.abs(el.scrollLeft)
+    setEdge({ start: pos <= 1, end: pos >= max - 1, progress: max > 0 ? pos / max : 0, visible: el.scrollWidth ? el.clientWidth / el.scrollWidth : 1 })
+  }, [])
+
+  useEffect(() => {
+    measure()
+    if (typeof ResizeObserver === 'undefined' || !scroller.current) return
+    const ro = new ResizeObserver(measure)
+    ro.observe(scroller.current)
+    return () => ro.disconnect()
+  }, [measure, items.length])
+
+  const page = (d: 1 | -1) => {
+    const el = scroller.current
+    if (!el) return
+    const step = el.clientWidth * d * (dir === 'rtl' ? -1 : 1)
+    el.scrollBy({ left: step, behavior: 'smooth' })
+  }
+
+  const viewAllLink = viewAll ? (
+    <a className="nv-row__view-all" href={viewAll.href}>
+      <bdi>{viewAll.label}</bdi>
+    </a>
+  ) : null
+  const arrows = carousel && showNavigation && (
+    <span className="nv-row__arrows">
+      <IconButton variant="outlined" icon="chevron-left" label={strings.previous} disabled={edge.start} onClick={() => page(-1)} />
+      <IconButton variant="outlined" icon="chevron-right" label={strings.next} disabled={edge.end} onClick={() => page(1)} />
+    </span>
+  )
+  const headActions = (align === 'left' ? viewAllLink : null) || arrows || action ? (
+    <span className="nv-row__actions">
+      {action}
+      {align === 'left' && viewAllLink}
+      {arrows}
+    </span>
+  ) : undefined
+
+  return (
+    <div
+      className={sxJoin(['nv-row', className].filter(Boolean).join(' '), sx({ '--nv-cols': columns } as CSSProperties))}
+      data-layout={carousel ? 'carousel' : 'grid'}
+      data-mobile-carousel={carousel || carouselOnMobile ? '' : undefined}
+      data-mobile-columns={mobileColumns}
+    >
+      {heading ? (
+        <SectionHead eyebrow={eyebrow} heading={heading} description={description} headerSize={headerSize} level={headingLevel} align={align} link={headActions} />
+      ) : headActions ? (
+        <div className="nv-row__bare-head">{headActions}</div>
+      ) : null}
+      <ul ref={scroller} className="nv-row__list" aria-label={label ?? heading} onScroll={measure} {...region}>
+        {items.map((child, i) => (
+          <li key={i} className="nv-row__item">
+            {child}
+          </li>
+        ))}
+      </ul>
+      <div className="nv-row__progress" aria-hidden>
+        <span className={sx({ width: `${Math.max(12, edge.visible * 100)}%`, marginInlineStart: `${edge.progress * (100 - Math.max(12, edge.visible * 100))}%` })} />
+      </div>
+      {align === 'center' && viewAllLink && <div className="nv-row__foot">{viewAllLink}</div>}
+    </div>
+  )
+}

package/templates/nova/src/components/content/CarouselControls.css

@@ -0,0 +1,61 @@
+/* 12B · carousel control cluster — an ink pill on media. */
+.nv-carousel-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  border-radius: var(--radius-pill);
+  background: var(--color-media-control);
+  color: var(--color-fg-inverse);
+}
+.nv-carousel-controls .nv-icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
+.nv-carousel-controls__bars { display: flex; align-items: center; padding-inline: var(--space-2); }
+.nv-carousel-controls__bar {
+  display: grid;
+  align-items: center;
+  width: var(--space-6);
+  height: var(--space-6);
+  padding-inline: var(--space-1);
+  cursor: pointer;
+}
+.nv-carousel-controls__bar::before { content: none; }
+.nv-carousel-controls__bar .nv-carousel-controls__fill {
+  display: block;
+  height: 2px;
+  border-radius: var(--radius-pill);
+  background: linear-gradient(currentColor, currentColor) no-repeat 0 0 / 0% 100%, color-mix(in srgb, currentColor 40%, transparent);
+}
+[dir='rtl'] .nv-carousel-controls__bar .nv-carousel-controls__fill { background-position: 100% 0, 0 0; }
+.nv-carousel-controls__bar[data-state='done'] .nv-carousel-controls__fill,
+.nv-carousel-controls__bar[data-state='current'] .nv-carousel-controls__fill { background-size: 100% 100%, auto; }
+/* Progress fills with the interval; a paused slideshow shows a static bar.
+   Declared infinite so a capture harness never waits on it; the owner's timer
+   advances the slide (and restarts the fill) at the same interval. */
+.nv-carousel-controls__bar[data-state='running'] .nv-carousel-controls__fill {
+  animation: nv-carousel-fill var(--nv-carousel-interval) linear infinite;
+}
+@keyframes nv-carousel-fill {
+  from { background-size: 0% 100%, auto; }
+  to { background-size: 100% 100%, auto; }
+}
+.nv-carousel-controls__count {
+  min-width: var(--space-7);
+  padding-inline: var(--space-2);
+  font-size: var(--type-body-sm);
+  font-weight: var(--weight-strong);
+  text-align: center;
+}
+.nv-carousel-controls__arrows { display: inline-flex; gap: var(--space-1); }
+.nv-carousel-controls__next.nv-icon-btn { background: var(--color-bg); color: var(--color-fg); }
+.nv-carousel-controls__next.nv-icon-btn:hover { background: var(--color-bg-muted); }
+[dir='rtl'] .nv-carousel-controls__arrows .nv-icon { transform: scaleX(-1); }
+
+/* 390: arrows drop (swipe); the cluster is a row under the copy. */
+@media (max-width: 639.98px) {
+  .nv-carousel-controls__arrows { display: none; }
+  /* On the slide's scrim: no pill (the owner keeps the scrim under this row). */
+  .nv-carousel-controls[data-on-scrim] { display: flex; justify-content: space-between; padding: 0; background: transparent; }
+  .nv-carousel-controls__bars { margin-inline: auto; }
+  .nv-carousel-controls__count { margin-inline-start: auto; }
+  .nv-carousel-controls__bars + .nv-carousel-controls__count { margin-inline-start: 0; }
+}

package/templates/nova/src/components/content/CarouselControls.tsx

@@ -0,0 +1,90 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import type { CSSProperties } from 'react'
+import { IconButton } from '../base/IconButton'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import './CarouselControls.css'
+
+/**
+ * 12B · the one quiet control cluster for anything that rotates on media:
+ * pause · progress · count · previous / next. Persisted variants (slideshow
+ * `controls`): both · arrows+counter · dots · none. `none` still renders pause
+ * while autoplay runs (WCAG 2.2.2). Arrows drop below 640 (swipe + progress).
+ *
+ * Presentational: the owner keeps the index and the timer; progress is a CSS
+ * fill whose duration is the interval, restarted per slide.
+ */
+export type CarouselControlsVariant = 'both' | 'arrows+counter' | 'dots' | 'none'
+
+export interface CarouselControlsProps {
+  count: number
+  index: number
+  variant?: CarouselControlsVariant
+  onGo: (index: number) => void
+  /** Autoplay is on: the pause / play button is shown. */
+  autoplay?: boolean
+  paused?: boolean
+  onTogglePause?: () => void
+  /** Autoplay is on but held (hover / focus / touch / hidden tab): the icon stays "pause", the bar stops. */
+  holding?: boolean
+  /** Changes whenever the owner restarts its timer — restarts the fill. */
+  cycle?: number
+  /** ms the current bar takes to fill while running. */
+  interval?: number
+  /** Below 640 the row sits on the owner's scrim (no pill). */
+  onScrim?: boolean
+  /** The ids of the slides, for aria-controls. */
+  slideIds?: string[]
+  className?: string
+}
+
+export function CarouselControls({ count, index, variant = 'both', onGo, autoplay, paused, onTogglePause, holding, cycle = 0, interval = 6000, onScrim, slideIds, className }: CarouselControlsProps): JSX.Element | null {
+  const { strings } = useNova()
+  if (count < 2) return null
+  const bars = variant === 'both' || variant === 'dots'
+  const counter = variant === 'both' || variant === 'arrows+counter'
+  const arrows = variant === 'both' || variant === 'arrows+counter'
+  if (!bars && !counter && !arrows && !autoplay) return null
+  const running = Boolean(autoplay && !paused && !holding)
+  return (
+    <div className={sxJoin(['nv-carousel-controls', className].filter(Boolean).join(' '), sx({ '--nv-carousel-interval': `${interval}ms` } as CSSProperties))} data-variant={variant} data-on-scrim={onScrim ? '' : undefined}>
+      {autoplay && (
+        <IconButton
+          className="nv-carousel-controls__pause"
+          icon={paused ? 'play' : 'pause'}
+          label={paused ? strings.playSlideshow : strings.pauseSlideshow}
+          onClick={onTogglePause}
+        />
+      )}
+      {bars && (
+        <div className="nv-carousel-controls__bars">
+          {Array.from({ length: count }, (_, i) => (
+            <button
+              key={i}
+              type="button"
+              className="nv-carousel-controls__bar"
+              data-state={i < index ? 'done' : i === index ? (running ? 'running' : 'current') : 'todo'}
+              aria-label={fmt(strings.goToSlide, { index: i + 1 })}
+              aria-current={i === index ? 'true' : undefined}
+              aria-controls={slideIds?.[i]}
+              onClick={() => onGo(i)}
+            >
+              <span className="nv-carousel-controls__fill" key={i === index && running ? `run-${cycle}` : 'idle'} />
+            </button>
+          ))}
+        </div>
+      )}
+      {counter && (
+        <span className="nv-carousel-controls__count nv-tabular" aria-hidden>
+          {index + 1} / {count}
+        </span>
+      )}
+      {arrows && (
+        <span className="nv-carousel-controls__arrows">
+          <IconButton className="nv-carousel-controls__prev" icon="chevron-left" label={strings.previous} onClick={() => onGo((index - 1 + count) % count)} />
+          <IconButton className="nv-carousel-controls__next" icon="chevron-right" label={strings.next} onClick={() => onGo((index + 1) % count)} />
+        </span>
+      )}
+    </div>
+  )
+}

package/templates/nova/src/components/content/ContentsNav.css

@@ -0,0 +1,16 @@
+.nv-contents { font-size: var(--type-body-sm); }
+.nv-contents__title { margin-block-end: var(--space-3); color: var(--color-fg-muted); font-size: var(--type-caption); }
+.nv-contents__list { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--color-border); }
+.nv-contents__list a { display: flex; align-items: center; min-height: 36px; margin-inline-start: -1px; padding-inline-start: var(--space-3); border-inline-start: 2px solid transparent; color: var(--color-fg-muted); text-decoration: none; }
+.nv-contents__list a:hover { color: var(--color-fg); }
+.nv-contents__list a[aria-current] { border-inline-start-color: var(--color-fg); color: var(--color-fg); }
+.nv-contents__narrow { display: none; }
+@media (max-width: 1023.98px) {
+  .nv-contents__title, .nv-contents__wide { display: none; }
+  .nv-contents__narrow { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
+  .nv-contents__narrow summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--touch-target); padding-inline: var(--space-4); font-weight: var(--weight-medium); cursor: pointer; list-style: none; }
+  .nv-contents__narrow summary::-webkit-details-marker { display: none; }
+  .nv-contents__narrow summary::after { content: ''; width: 8px; height: 8px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
+  .nv-contents__narrow[open] summary::after { transform: rotate(-135deg); }
+  .nv-contents__narrow .nv-contents__list { margin: 0 var(--space-4) var(--space-3); }
+}

package/templates/nova/src/components/content/ContentsNav.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react'
+import { useNova } from '../../styles/NovaProvider'
+import './ContentsNav.css'
+
+export interface ContentsNavProps {
+  headings: readonly { id: string; text: string }[]
+  label?: string
+}
+
+/**
+ * 12G · "On this page": a sticky list beside long text that highlights the
+ * section in view; a disclosure at 390. The ids come from LongForm
+ * (headingIds), so the links always land.
+ */
+export function ContentsNav({ headings, label }: ContentsNavProps): JSX.Element {
+  const { strings } = useNova()
+  const title = label ?? strings.onThisPage
+  const [current, setCurrent] = useState(headings[0]?.id)
+  useEffect(() => {
+    if (typeof IntersectionObserver === 'undefined') return
+    const els = headings.map((h) => document.getElementById(h.id)).filter((e): e is HTMLElement => Boolean(e))
+    const io = new IntersectionObserver(
+      (entries) => {
+        const top = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0]
+        if (top) setCurrent(top.target.id)
+      },
+      { rootMargin: '0px 0px -70% 0px' },
+    )
+    els.forEach((e) => io.observe(e))
+    return () => io.disconnect()
+  }, [headings])
+  const list = (
+    <ol className="nv-contents__list">
+      {headings.map((h) => (
+        <li key={h.id}>
+          <a href={`#${h.id}`} aria-current={current === h.id ? 'location' : undefined} onClick={() => setCurrent(h.id)}>
+            {h.text}
+          </a>
+        </li>
+      ))}
+    </ol>
+  )
+  return (
+    <nav className="nv-contents" aria-label={title}>
+      <p className="nv-contents__title" aria-hidden>
+        {title}
+      </p>
+      <div className="nv-contents__wide">{list}</div>
+      <details className="nv-contents__narrow">
+        <summary>{title}</summary>
+        {list}
+      </details>
+    </nav>
+  )
+}

package/templates/nova/src/components/content/Countdown.css

@@ -0,0 +1,24 @@
+/* 12B · countdown units — tabular mono digits in quiet boxes; one row at 390. */
+.nv-countdown { display: flex; gap: var(--space-2); }
+.nv-countdown__unit {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: var(--space-1);
+  min-width: var(--countdown-unit);
+  min-height: var(--countdown-unit);
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  background: var(--nv-countdown-bg, color-mix(in srgb, currentColor 10%, transparent));
+}
+.nv-countdown__digits {
+  font-family: var(--font-mono);
+  font-size: var(--type-h3);
+  font-weight: var(--weight-strong);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.nv-countdown__label { font-size: var(--type-label); line-height: 1; opacity: 0.8; }
+@media (max-width: 639.98px) {
+  .nv-countdown { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
+}

package/templates/nova/src/components/content/Countdown.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useRef, useState } from 'react'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import './Countdown.css'
+
+/**
+ * 12B · honest countdown — counts to the merchant's date in the STORE time
+ * zone against the store (server) clock, stops at zero and never restarts.
+ *
+ *   days hidden under 24h · under 1h minutes + seconds only
+ *   digits are tabular monospace, so the width never jitters
+ *   role="timer", aria-live off; its label updates each MINUTE, not second
+ */
+export interface CountdownProps {
+  /** The end instant (epoch ms) — see parseStoreDateTime. */
+  endsAt: number
+  /** The store / server clock. Defaults to the device clock. */
+  clock?: () => number
+  onEnd?: () => void
+  className?: string
+}
+
+const S = 1000
+const M = 60 * S
+const H = 60 * M
+const D = 24 * H
+
+export function remaining(ms: number): { days: number; hours: number; minutes: number; seconds: number } {
+  const t = Math.max(0, ms)
+  return { days: Math.floor(t / D), hours: Math.floor((t % D) / H), minutes: Math.floor((t % H) / M), seconds: Math.floor((t % M) / S) }
+}
+
+const pad = (n: number) => String(n).padStart(2, '0')
+
+export function Countdown({ endsAt, clock = Date.now, onEnd, className }: CountdownProps): JSX.Element | null {
+  const { strings } = useNova()
+  const [now, setNow] = useState(() => clock())
+  const ended = useRef(false)
+
+  useEffect(() => {
+    setNow(clock())
+    const id = window.setInterval(() => setNow(clock()), S)
+    return () => window.clearInterval(id)
+  }, [clock, endsAt])
+
+  const left = endsAt - now
+  useEffect(() => {
+    if (left <= 0 && !ended.current) {
+      ended.current = true
+      onEnd?.()
+    }
+  }, [left, onEnd])
+
+  if (left <= 0) return null
+  const r = remaining(left)
+  const units: [number, string][] =
+    left < H
+      ? [[r.minutes, strings.countdownMinutes], [r.seconds, strings.countdownSeconds]]
+      : left < D
+        ? [[r.hours, strings.countdownHours], [r.minutes, strings.countdownMinutes], [r.seconds, strings.countdownSeconds]]
+        : [[r.days, strings.countdownDays], [r.hours, strings.countdownHours], [r.minutes, strings.countdownMinutes], [r.seconds, strings.countdownSeconds]]
+  // Minute precision for assistive tech (the visual seconds are aria-hidden).
+  const spoken = [
+    r.days ? fmt(strings.countdownDaysLong, { n: r.days }) : '',
+    r.days || r.hours ? fmt(strings.countdownHoursLong, { n: r.hours }) : '',
+    fmt(strings.countdownMinutesLong, { n: r.minutes }),
+  ]
+    .filter(Boolean)
+    .join(' ')
+  // The server rendered this at another instant (and the edge may serve that
+  // html for a day): the digits and the spoken label differ from the first
+  // client render by design, and the effect above corrects them right after
+  // hydration. Only these two are exempt from the hydration check.
+  return (
+    <div className={['nv-countdown', className].filter(Boolean).join(' ')} role="timer" aria-live="off" aria-label={fmt(strings.countdownLabel, { time: spoken })} suppressHydrationWarning>
+      {units.map(([n, label]) => (
+        <span key={label} className="nv-countdown__unit" aria-hidden>
+          <span className="nv-countdown__digits" suppressHydrationWarning>{pad(n)}</span>
+          <span className="nv-countdown__label">{label}</span>
+        </span>
+      ))}
+    </div>
+  )
+}
+
+/**
+ * The fallback datetime field: "YYYY-MM-DD HH:mm" (12B endsAt, NEEDS NEW FIELD
+ * TYPE), read in the store's IANA time zone. Returns epoch ms, or null when
+ * the text is empty or not a real date/time (the banner then shows no
+ * countdown and the editor warns).
+ */
+export function parseStoreDateTime(text: string, timeZone = 'UTC'): number | null {
+  const m = /^\s*(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})\s*$/.exec(text)
+  if (!m) return null
+  const [y, mo, d, h, mi] = m.slice(1).map(Number)
+  const guess = Date.UTC(y, mo - 1, d, h, mi)
+  const g = new Date(guess)
+  if (g.getUTCFullYear() !== y || g.getUTCMonth() !== mo - 1 || g.getUTCDate() !== d || h > 23 || mi > 59) return null
+  const off1 = zoneOffset(guess, timeZone)
+  let t = guess - off1
+  const off2 = zoneOffset(t, timeZone)
+  if (off2 !== off1) t = guess - off2
+  return t
+}
+
+/** ms the zone is ahead of UTC at an instant (0 for an unknown zone). */
+function zoneOffset(utc: number, timeZone: string): number {
+  try {
+    const parts = new Intl.DateTimeFormat('en-US', { timeZone, hourCycle: 'h23', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }).formatToParts(new Date(utc))
+    const p = Object.fromEntries(parts.map((x) => [x.type, Number(x.value)]))
+    return Date.UTC(p.year, p.month - 1, p.day, p.hour, p.minute, p.second) - Math.floor(utc / S) * S
+  } catch {
+    return 0
+  }
+}

package/templates/nova/src/components/content/HeroCopy.css

@@ -0,0 +1,92 @@
+/* 12B · shared hero copy. */
+.nv-hero-copy {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gap-sm);
+  max-width: var(--nv-hero-measure, var(--hero-measure-narrow));
+  text-align: start;
+}
+.nv-hero-copy[data-width='medium'] { --nv-hero-measure: var(--hero-measure-medium); }
+.nv-hero-copy[data-width='wide'] { --nv-hero-measure: var(--hero-measure-wide); }
+.nv-hero-copy[data-align='center'] { align-items: center; text-align: center; margin-inline: auto; }
+.nv-hero-copy[data-align='right'] { align-items: flex-end; text-align: end; margin-inline-start: auto; }
+
+.nv-hero-copy__eyebrow {
+  font-size: var(--type-body-sm);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-tight);
+  color: var(--color-fg-muted);
+}
+.nv-hero-copy__heading {
+  font-size: var(--hero-display-medium);
+  line-height: var(--leading-display);
+  letter-spacing: var(--tracking-display);
+  font-weight: var(--weight-heading);
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+.nv-hero-copy__heading[data-size='small'] { font-size: var(--hero-display-small); }
+.nv-hero-copy__heading[data-size='large'] { font-size: var(--hero-display-large); }
+/* Thai display: no negative tracking, leading 1.3, weight 600 (12B · 390 Thai). */
+.nv-root :lang(th) .nv-hero-copy__heading,
+.nv-root:lang(th) .nv-hero-copy__heading { letter-spacing: 0; line-height: var(--leading-h4); font-weight: var(--weight-strong); }
+.nv-root[dir='rtl'] .nv-hero-copy__heading { letter-spacing: 0; line-height: var(--leading-h4); }
+
+.nv-hero-copy__body {
+  max-width: var(--hero-body-measure);
+  font-size: var(--type-body-lg);
+  line-height: var(--leading-snug);
+  color: var(--color-fg-muted);
+}
+.nv-hero-copy__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: inherit;
+  gap: var(--gap-xs) var(--gap-sm);
+  margin-block-start: var(--gap-sm);
+}
+.nv-hero-copy[data-align='center'] .nv-hero-copy__actions { justify-content: center; }
+.nv-hero-copy[data-align='right'] .nv-hero-copy__actions { justify-content: flex-end; }
+/* Buttons: 48 lg, desktop and phone. */
+.nv-hero-copy__actions .nv-btn[data-size='lg'] { min-height: var(--space-7); }
+.nv-hero-copy__actions .nv-btn[data-variant='tertiary'] { text-decoration-color: currentColor; padding-inline: var(--space-2); }
+
+/* On media: white text on the scrim; the body keeps full white (floor 62%). */
+.nv-hero-copy[data-on-media] { color: var(--color-fg-inverse); }
+.nv-hero-copy[data-on-media] :is(.nv-hero-copy__eyebrow, .nv-hero-copy__body) { color: var(--color-fg-inverse); }
+
+/* text-first · left: heading and text side by side above the image (≥ 1024). */
+@media (min-width: 1024px) {
+  .nv-hero-copy[data-arrange='split'] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-areas: 'eyebrow .' 'heading body' 'heading actions';
+    align-items: start;
+    column-gap: var(--gap-2xl);
+    max-width: none;
+  }
+  .nv-hero-copy[data-arrange='split'] > .nv-hero-copy__eyebrow { grid-area: eyebrow; }
+  .nv-hero-copy[data-arrange='split'] > .nv-hero-copy__heading { grid-area: heading; }
+  .nv-hero-copy[data-arrange='split'] > .nv-hero-copy__body { grid-area: body; margin-block-start: var(--space-2); }
+  .nv-hero-copy[data-arrange='split'] > .nv-hero-copy__actions { grid-area: actions; margin-block-start: 0; }
+}
+
+@media (max-width: 639.98px) {
+  .nv-hero-copy { max-width: none; }
+  /* Image layouts: the primary goes full width, the second action becomes a text link. */
+  .nv-hero-copy__actions[data-block-phone] { flex-direction: column; align-items: stretch; width: 100%; }
+  .nv-hero-copy__actions[data-block-phone] .nv-btn { width: 100%; }
+  .nv-hero-copy__actions[data-block-phone] .nv-btn[data-style='responsive'] { align-self: center; width: auto; }
+  .nv-hero-copy .nv-btn[data-style='responsive'] {
+    border-color: transparent;
+    background: transparent;
+    text-decoration: underline;
+    text-underline-offset: var(--underline-offset-lg);
+  }
+  /* Text-first: two buttons share one row at equal width. */
+  .nv-hero-copy__actions[data-pair-phone] { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; width: 100%; }
+  /* Equal halves of 342: tighter inline padding keeps "Shop the collection" on one line. */
+  .nv-hero-copy__actions[data-pair-phone] .nv-btn { padding-inline: var(--space-3); }
+}