create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/src/styles/fonts.css

@@ -0,0 +1,95 @@
+/*
+ * Geist + Geist Mono, self-hosted (SIL Open Font License 1.1 — fonts/OFL.txt).
+ * Served with the theme instead of from a font CDN: one fewer origin before the
+ * first paint, and the browser fetches only the subsets a page actually uses.
+ */
+/* Geist · cyrillic-ext */
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(./fonts/geist-cyrillic-ext.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* Geist · cyrillic */
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(./fonts/geist-cyrillic.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* Geist · vietnamese */
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(./fonts/geist-vietnamese.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* Geist · latin-ext */
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(./fonts/geist-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* Geist · latin */
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(./fonts/geist-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* Geist Mono · cyrillic-ext */
+@font-face {
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: swap;
+  src: url(./fonts/geist-mono-cyrillic-ext.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* Geist Mono · cyrillic */
+@font-face {
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: swap;
+  src: url(./fonts/geist-mono-cyrillic.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* Geist Mono · vietnamese */
+@font-face {
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: swap;
+  src: url(./fonts/geist-mono-vietnamese.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* Geist Mono · latin-ext */
+@font-face {
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: swap;
+  src: url(./fonts/geist-mono-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* Geist Mono · latin */
+@font-face {
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: swap;
+  src: url(./fonts/geist-mono-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/templates/nova/src/styles/global-settings.css

@@ -0,0 +1,88 @@
+/* Global settings that branch behaviour (not a single value) key off root
+   data-* flags written by <NovaProvider theme>. Value settings arrive as
+   CSS custom properties from resolveThemeSettings(). */
+
+/* The primary button IS the brand colour (tokens.css). Re-declared on the theme root so the
+   button follows the brand colour this root carries — Theme settings › Primary (brand), the
+   Settings › Brand fallback, or the dark scheme's — instead of the :root default it was resolved
+   against (a custom property's var() resolves where it is declared). */
+.nv-root {
+  --color-button: var(--color-brand);
+  --color-button-text: var(--color-brand-contrast);
+  --color-button-hover: var(--color-brand-hover);
+  --color-button-hover-text: var(--color-brand-contrast);
+  --color-button-active: var(--color-brand-active);
+}
+
+/* Type scale — design typeScale compact / large columns; body never scales. */
+[data-type-scale='compact'] {
+  --type-display: clamp(2.5rem, calc(2.5rem + (100vw - 24.375rem) * 0.03155), 3.75rem);
+  --type-h1: clamp(2rem, calc(2rem + (100vw - 24.375rem) * 0.01262), 2.5rem);
+  --type-h2: clamp(1.5rem, calc(1.5rem + (100vw - 24.375rem) * 0.00631), 1.75rem);
+  --type-h3: clamp(1.25rem, calc(1.25rem + (100vw - 24.375rem) * 0.00315), 1.375rem);
+  --type-h4: 1.125rem;
+  --type-h5: 1rem;
+  --type-h6: 0.875rem;
+  --type-product-title: 0.8125rem;
+}
+[data-type-scale='large'] {
+  --type-display: clamp(2.5rem, calc(2.5rem + (100vw - 24.375rem) * 0.07571), 5.5rem);
+  --type-h1: clamp(2rem, calc(2rem + (100vw - 24.375rem) * 0.03785), 3.5rem);
+  --type-h2: clamp(1.5rem, calc(1.5rem + (100vw - 24.375rem) * 0.02208), 2.375rem);
+  --type-h3: clamp(1.25rem, calc(1.25rem + (100vw - 24.375rem) * 0.01262), 1.75rem);
+  --type-h4: 1.375rem;
+  --type-h5: 1.125rem;
+  --type-h6: 1rem;
+  --type-product-title: 1rem;
+}
+
+/* Dark scheme (Round 2 · D1) — the same value set tokens.css keys on :root,
+   repeated for a scoped provider so one lab page can show both schemes. */
+.nv-root[data-scheme='dark'] {
+  --color-bg: #0e0e0e;
+  --color-bg-muted: #1c1c1c;
+  --color-bg-elevated: #151515;
+  --color-bg-inverse: #f2f2f0;
+  --color-media-bg: #1c1c1c;
+  --color-bg-muted-hover: #262626;
+  --color-bg-muted-active: #303030;
+  --color-fg: #f2f2f0;
+  --color-fg-muted: #a8a8a5;
+  --color-fg-subtle: #8c8c89;
+  --color-fg-inverse: #111111;
+  --color-border: #2a2a2a;
+  --color-border-strong: #6e6e6b;
+  --color-border-emphasis: #f2f2f0;
+  --color-border-inverse: rgba(17, 17, 17, 0.16);
+  --color-border-control: #3a3a38;
+  --color-brand: #f2f2f0;
+  --color-brand-hover: #dcdcda;
+  --color-brand-active: #c8c8c6;
+  --color-brand-contrast: #111111;
+  --color-sale: #ff8a7a;
+  --color-sale-contrast: #0e0e0e;
+  --color-success: #7fd49b;
+  --color-success-surface: #12301f;
+  --color-warning: #f2c46b;
+  --color-warning-ink: #f2c46b;
+  --color-warning-surface: #3a2a0c;
+  --color-danger: #ff8a7a;
+  --color-danger-surface: #3a1512;
+  --color-info: #7aa7ff;
+  --color-info-surface: #12233f;
+  --color-focus: #7aa7ff;
+  --color-overlay-scrim: rgba(0, 0, 0, 0.6);
+  color-scheme: dark;
+}
+
+/* Icon family — iconStyle outline (1.6) · filled (2.0 stroke, Nova 02 "bold"). */
+[data-icon-style='filled'] { --icon-stroke: 2px; }
+
+/* Button label — buttonTextStyle uppercase (never in Thai, base.css). */
+[data-button-text='uppercase'] .nv-btn { text-transform: uppercase; letter-spacing: 0.06em; }
+
+/* Secondary button border — buttonBorder default (input grey) · strong (ink). */
+[data-button-border='strong'] .nv-btn[data-variant='secondary'] { border-color: var(--color-border-emphasis); }
+
+/* Badge treatment — badgeStyle filled · outline. */
+[data-badge-style='outline'] .nv-badge { background: var(--color-bg); color: var(--badge-ink); box-shadow: inset 0 0 0 1px currentColor; }

package/templates/nova/src/styles/index.css

@@ -0,0 +1,6 @@
+/* Everything a page needs before any Nova component: tokens, then base.
+   Component sheets are imported by the components themselves. */
+@import './fonts.css';
+@import './tokens.css';
+@import './global-settings.css';
+@import './base.css';

package/templates/nova/src/styles/motion.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState, type RefObject } from 'react'
+
+/**
+ * Reduced motion — the OS preference OR the theme's `motion: reduced` setting
+ * (NovaProvider writes data-motion="reduced"). Everything that moves on its
+ * own (slideshow autoplay, marquees, background video) reads this and stops.
+ * `ref` is any element inside the Nova tree; without it only the OS counts.
+ */
+export function useReducedMotion(ref?: RefObject<Element | null>): boolean {
+  const [reduced, setReduced] = useState(false)
+  useEffect(() => {
+    const mq = typeof window !== 'undefined' ? window.matchMedia?.('(prefers-reduced-motion: reduce)') : undefined
+    const read = () => setReduced(Boolean(mq?.matches) || Boolean(ref?.current?.closest('[data-motion="reduced"]')))
+    read()
+    mq?.addEventListener?.('change', read)
+    return () => mq?.removeEventListener?.('change', read)
+  }, [ref])
+  return reduced
+}
+
+/**
+ * Save-Data or a slow connection (2G / slow-2G) — background video shows its
+ * poster only (12B · video rules). Feature-detected; false where unknown.
+ */
+export function prefersLightMedia(): boolean {
+  const c = typeof navigator !== 'undefined' ? (navigator as Navigator & { connection?: { saveData?: boolean; effectiveType?: string } }).connection : undefined
+  return Boolean(c?.saveData) || /(^|-)2g$/.test(c?.effectiveType ?? '')
+}
+
+/** The document is hidden (another tab) — autoplay pauses (12B states: "Tab hidden"). */
+export function usePageHidden(): boolean {
+  const [hidden, setHidden] = useState(false)
+  useEffect(() => {
+    const read = () => setHidden(document.visibilityState === 'hidden')
+    read()
+    document.addEventListener('visibilitychange', read)
+    return () => document.removeEventListener('visibilitychange', read)
+  }, [])
+  return hidden
+}
+
+/** The element is (at least partly) on screen. True where IntersectionObserver is missing. */
+export function useInView(ref: RefObject<Element | null>): boolean {
+  const [inView, setInView] = useState(true)
+  useEffect(() => {
+    const el = ref.current
+    if (!el || typeof IntersectionObserver === 'undefined') return
+    const io = new IntersectionObserver(([e]) => setInView(e.isIntersecting), { threshold: 0.01 })
+    io.observe(el)
+    return () => io.disconnect()
+  }, [ref])
+  return inView
+}

package/templates/nova/src/styles/scroll.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState, type RefObject } from 'react'
+
+/**
+ * A horizontally scrolling strip must be reachable by keyboard (WCAG 2.1.1,
+ * axe scrollable-region-focusable). While — and only while — it actually
+ * scrolls, it becomes a labelled, focusable region; arrow keys then scroll it.
+ */
+/** `list`: the strip is a <ul> — keep its list role, add focus + a name only. */
+export function useScrollRegion(ref: RefObject<HTMLElement | null>, label: string, deps: unknown[] = [], opts: { list?: boolean } = {}): { tabIndex?: number; role?: 'region'; 'aria-label'?: string } {
+  const [scrolls, setScrolls] = useState(false)
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const read = () => setScrolls(el.scrollWidth > el.clientWidth + 1)
+    read()
+    if (typeof ResizeObserver === 'undefined') return
+    const ro = new ResizeObserver(read)
+    ro.observe(el)
+    return () => ro.disconnect()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref, ...deps])
+  if (!scrolls) return {}
+  return opts.list ? { tabIndex: 0, 'aria-label': label } : { tabIndex: 0, role: 'region', 'aria-label': label }
+}

package/templates/nova/src/styles/sections/commerce.css

@@ -0,0 +1,147 @@
+/* 12C · shared section rules for product and collection rows. */
+.nv-merch__sample { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-4); font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+
+/* collection-list · editorial: the first collection leads (2 × 2); a grid at 390. */
+@media (min-width: 640px) {
+  .nv-collection-list[data-layout='editorial'] .nv-row__item:first-child { grid-column: span 2; grid-row: span 2; }
+}
+
+/* ── 12C · 05 featured-product ─────────────────────────────────────────── */
+.nv-featured-product__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
+.nv-featured-product[data-media='none'] .nv-featured-product__grid { grid-template-columns: minmax(0, var(--container-narrow)); justify-content: center; }
+.nv-featured-product[data-media='right'] .nv-featured-product__media { order: 2; }
+.nv-featured-product__media { position: relative; aspect-ratio: 1; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-featured-product[data-ratio='portrait'] .nv-featured-product__media { aspect-ratio: 4 / 5; }
+.nv-featured-product__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.nv-featured-product__info { display: grid; gap: var(--space-4); align-content: center; max-width: 30rem; }
+.nv-featured-product__eyebrow { font-size: var(--type-body-sm); font-weight: var(--weight-medium); color: var(--color-fg-muted); }
+.nv-featured-product__title {
+  font-size: var(--type-h1);
+  line-height: var(--leading-h1);
+  letter-spacing: var(--tracking-h1);
+  font-weight: var(--weight-heading);
+  text-wrap: balance;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+.nv-featured-product__desc { color: var(--color-fg-muted); max-width: 46ch; }
+.nv-featured-product[data-lines='3'] .nv-featured-product__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
+.nv-featured-product__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-4); margin-block-start: var(--space-2); }
+.nv-featured-product__actions .nv-btn[data-size='lg'] { min-height: var(--space-7); }
+@media (max-width: 1023.98px) {
+  .nv-featured-product__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
+  .nv-featured-product[data-media] .nv-featured-product__media { order: 0; }
+  .nv-featured-product__info { max-width: none; }
+}
+@media (max-width: 639.98px) {
+  .nv-featured-product__actions > .nv-atc, .nv-featured-product__actions > .nv-btn[data-variant='primary'] { width: 100%; }
+  .nv-featured-product__actions .nv-atc .nv-btn { width: 100%; }
+}
+
+/* ── 12C · 01 product-details ──────────────────────────────────────────── */
+.nv-pdp__trail { margin-block-end: var(--space-5); }
+.nv-pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--pdp-buybox); gap: var(--space-8); align-items: start; }
+.nv-pdp__buy { display: grid; gap: var(--space-6); min-width: 0; }
+.nv-pdp:is([data-sticky='both'], [data-sticky='desktop']) .nv-pdp__buy { position: sticky; top: var(--pdp-sticky-top); }
+.nv-pdp__box { display: grid; gap: var(--space-5); }
+.nv-pdp__box > .nv-pdp-title + .nv-pdp-price { margin-block-start: calc(-1 * var(--space-2)); }
+.nv-pdp__buy-row { display: flex; gap: var(--space-2); align-items: flex-start; }
+.nv-pdp__buy-row .nv-pdp-atc { flex: 1; min-width: 0; }
+.nv-pdp__info { display: grid; gap: var(--space-5); }
+.nv-pdp__accordion { border-block-start: var(--border-subtle); }
+.nv-pdp__tabs-phone { display: none; }
+.nv-pdp__badges { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); padding-block-start: var(--space-2); }
+
+/* Sticky add-to-cart bar: variant summary + price + button, after the main button scrolls out. */
+.nv-pdp__bar-slot { display: contents; }
+body:has(.nv-consent) .nv-pdp__bar[data-scope='mobile'] { display: none; }
+.nv-pdp__bar {
+  position: fixed;
+  z-index: var(--z-sticky);
+  inset-inline: 0;
+  inset-block-end: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--page-gutter);
+  padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom));
+  border-block-start: var(--border-subtle);
+  background: var(--color-bg);
+  transform: translateY(100%);
+  visibility: hidden;
+  transition: transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
+}
+.nv-pdp__bar[data-visible] { transform: none; visibility: visible; transition-delay: 0s; }
+.nv-pdp__bar-info { display: grid; gap: var(--space-1); min-width: 0; font-size: var(--type-body-sm); }
+.nv-pdp__bar-variant { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nv-pdp__bar .nv-atc__status { display: none; }
+@media (min-width: 640px) { .nv-pdp__bar[data-scope='mobile'] { display: none; } }
+
+@media (max-width: 1023.98px) {
+  .nv-pdp__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
+  .nv-pdp:is([data-sticky='both'], [data-sticky='desktop']) .nv-pdp__buy { position: static; }
+  .nv-pdp__trail { margin-block-end: var(--space-3); }
+}
+@media (max-width: 639.98px) {
+  /* 390: the tabs are always an accordion; the stepper and button are 48. */
+  .nv-pdp__tabs { display: none; }
+  .nv-pdp__tabs-phone { display: block; }
+  .nv-pdp__buy-row .nv-btn[data-size='lg'] { min-height: var(--space-7); }
+  .nv-pdp__badges { grid-template-columns: 1fr; }
+}
+
+/* ── 12C · 02 / 03 listing (main-collection · product-grid) ───────────── */
+.nv-listing__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
+.nv-listing[data-filters='sidebar'] .nv-listing__body { grid-template-columns: var(--filter-sidebar) minmax(0, 1fr); }
+.nv-listing__sidebar { align-self: start; position: sticky; top: var(--pdp-sticky-top); }
+.nv-listing__main { display: grid; gap: var(--space-5); min-width: 0; align-content: start; }
+.nv-listing__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
+.nv-listing__facet-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.nv-listing__popover { display: grid; gap: var(--space-3); min-width: 14rem; }
+.nv-listing__toolbar-end { display: flex; align-items: center; gap: var(--space-4); margin-inline-start: auto; }
+.nv-listing__count { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-listing__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--nv-listing-cols, 3), minmax(0, 1fr)); gap: var(--card-gap-y) var(--card-gap-x); }
+.nv-listing[data-columns='4'] { --nv-listing-cols: 4; }
+.nv-listing__mobile-bar { display: none; }
+.nv-listing__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: var(--space-1); border-radius: var(--radius-pill); background: var(--color-fg); color: var(--color-bg); font-size: var(--type-label); }
+
+@media (max-width: 1023.98px) {
+  /* Always a sheet below 1024: Filter + Sort buttons stick under the header. */
+  .nv-listing .nv-listing__body { grid-template-columns: minmax(0, 1fr); }
+  .nv-listing__sidebar, .nv-listing__facet-bar, .nv-listing__toolbar > .nv-btn, .nv-listing__sort { display: none; }
+  .nv-listing__mobile-bar {
+    position: sticky;
+    z-index: var(--z-sticky);
+    top: 0;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    gap: var(--space-2);
+    padding-block: var(--space-2);
+    background: var(--color-bg);
+  }
+  .nv-listing__mobile-bar .nv-disclosure__button { width: 100%; justify-content: center; }
+  .nv-listing__toolbar-end { margin-inline-start: 0; }
+  .nv-listing { --nv-listing-cols: 2; }
+}
+@media (max-width: 639.98px) {
+  .nv-listing[data-mobile-columns='1'] { --nv-listing-cols: 1; }
+}
+
+/* main-collection header: trail · title · description | image (beside) or a 21:9 banner under it. */
+.nv-collection-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-block-end: var(--space-7); }
+.nv-collection-head[data-image='beside-title'] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
+.nv-collection-head__text { display: grid; gap: var(--space-3); align-content: end; }
+.nv-collection-head__title { font-size: var(--type-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); font-weight: var(--weight-heading); text-wrap: balance; }
+.nv-collection-head__desc { max-width: 56ch; color: var(--color-fg-muted); }
+.nv-collection-head__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-collection-head[data-image='banner'] .nv-collection-head__media { aspect-ratio: 21 / 9; }
+.nv-collection-head__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+@media (max-width: 639.98px) {
+  .nv-collection-head[data-image='beside-title'] { grid-template-columns: minmax(0, 1fr); }
+  .nv-collection-head[data-image='beside-title'] .nv-collection-head__media { display: none; }
+  .nv-collection-head { margin-block-end: var(--space-5); }
+}