create-tanqory-theme 0.0.0-stage → 0.2.2

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

@@ -0,0 +1,336 @@
+/* ── 12B · 00 shared hero system ───────────────────────────────────────────
+   One height ladder, one anchor grid, one overlay floor, one set of controls. */
+.nv-hero,
+.nv-slideshow,
+.nv-video-hero,
+.nv-collection-banner { position: relative; }
+
+:is(.nv-hero, .nv-slideshow, .nv-video-hero)[data-size='small'] { --nv-hero-h: var(--hero-height-small); }
+:is(.nv-hero, .nv-slideshow, .nv-video-hero) { --nv-hero-h: var(--hero-height-medium); }
+:is(.nv-hero, .nv-slideshow, .nv-video-hero)[data-size='large'] { --nv-hero-h: var(--hero-height-large); }
+:is(.nv-hero, .nv-slideshow, .nv-video-hero)[data-size='fullscreen'] { --nv-hero-h: var(--hero-height-fullscreen); }
+
+.nv-promo-container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: var(--page-gutter);
+}
+.nv-promo-container[data-width='standard'] { max-width: calc(var(--container-standard) + 2 * var(--page-gutter)); }
+.nv-promo-container[data-width='wide'] { max-width: calc(var(--container-wide) + 2 * var(--page-gutter)); }
+.nv-promo-container[data-width='full'] { max-width: none; }
+
+/* ── 12B · 01 hero ───────────────────────────────────────────────────────── */
+/* Full-bleed media fills the section box: spacing applies to page layouts. */
+.nv-hero[data-layout='image-background'],
+.nv-hero[data-layout='split'] { padding-block: 0; }
+.nv-hero[data-layout='image-background'] .nv-promo-container,
+.nv-hero[data-layout='split'] .nv-promo-container { padding-inline: 0; }
+.nv-hero[data-layout='contained'] .nv-media-frame { border-radius: var(--hero-radius); }
+
+.nv-hero .nv-editor-frame { margin-block-end: var(--gap-xl); }
+
+/* text-first · minimal: copy on the page. */
+.nv-hero__copy-row { display: grid; }
+.nv-hero[data-layout='text-first'] .nv-hero__copy-row { padding-block-end: var(--gap-xl); }
+.nv-hero[data-layout='text-first'] .nv-hero__media {
+  position: relative;
+  height: var(--nv-hero-h);
+  border-radius: var(--hero-radius);
+  overflow: hidden;
+  --nv-media-control-block: var(--space-4);
+  --nv-media-control-inline: var(--space-4);
+}
+.nv-hero[data-layout='text-first']:is([data-ratio='square'], [data-ratio='portrait']) .nv-hero__media {
+  width: auto;
+  max-width: 100%;
+  margin-inline: auto;
+  aspect-ratio: 1;
+}
+.nv-hero[data-layout='text-first'][data-ratio='portrait'] .nv-hero__media { aspect-ratio: 4 / 5; }
+.nv-hero[data-layout='minimal'] .nv-hero-copy__heading { max-width: 16ch; }
+.nv-hero[data-layout='minimal'][data-align='center'] .nv-hero-copy__heading { margin-inline: auto; }
+
+/* split: copy beside media; the media side is edge to edge. */
+.nv-hero__split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  min-height: var(--nv-hero-h);
+}
+.nv-hero__split .nv-hero__media {
+  position: relative;
+  --nv-media-control-block: var(--space-4);
+  --nv-media-control-inline: var(--space-4);
+}
+.nv-hero[data-media-position='right'] .nv-hero__split .nv-hero__media { order: 2; }
+.nv-hero[data-ratio='landscape'] .nv-hero__split .nv-hero__media { align-self: center; aspect-ratio: 3 / 2; }
+.nv-hero[data-ratio='square'] .nv-hero__split .nv-hero__media { align-self: center; aspect-ratio: 1; }
+.nv-hero[data-ratio='portrait'] .nv-hero__split .nv-hero__media { align-self: center; aspect-ratio: 4 / 5; }
+.nv-hero__split .nv-hero__copy-row {
+  align-content: center;
+  padding: var(--hero-inset-block) var(--hero-inset-inline);
+}
+
+/* Mobile alignment (shared mobileContentAlignment). */
+@media (max-width: 639.98px) {
+  [data-mobile-align='left'] .nv-hero-copy { align-items: flex-start; text-align: start; margin-inline: 0; }
+  [data-mobile-align='left'] .nv-hero-copy__actions { justify-content: flex-start; }
+  [data-mobile-align='left'] .nv-media-frame__anchor { justify-items: start; }
+  [data-mobile-align='center'] .nv-hero-copy { align-items: center; text-align: center; margin-inline: auto; }
+  [data-mobile-align='center'] .nv-hero-copy__actions { justify-content: center; }
+  [data-mobile-align='center'] .nv-media-frame__anchor { justify-items: center; }
+}
+
+/* < 1024: split stacks; mobileMediaPosition decides the order. */
+@media (max-width: 1023.98px) {
+  .nv-hero__split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
+  .nv-hero .nv-hero__split .nv-hero__media { order: 0; aspect-ratio: 4 / 3; align-self: stretch; }
+  .nv-hero[data-mobile-media='after'] .nv-hero__split .nv-hero__media { order: 2; }
+}
+
+/* 390: media is 4:5 (fullscreen = 100svh − header); copy anchors bottom unless middle. */
+@media (max-width: 639.98px) {
+  :is(.nv-hero, .nv-slideshow, .nv-video-hero)[data-size='fullscreen'] .nv-media-frame { aspect-ratio: auto; min-height: var(--hero-height-fullscreen); }
+  .nv-hero[data-layout='text-first'] .nv-hero__media { height: auto; aspect-ratio: 4 / 5; width: 100%; }
+  .nv-hero[data-layout='text-first'][data-ratio='square'] .nv-hero__media { aspect-ratio: 1; }
+  .nv-hero .nv-hero__split .nv-hero__media { aspect-ratio: 1; }
+  .nv-hero[data-ratio='portrait'] .nv-hero__split .nv-hero__media { aspect-ratio: 4 / 5; }
+  .nv-hero__split .nv-hero__copy-row { padding-inline: var(--page-gutter); }
+}
+
+/* ── 12B · 02 slideshow ──────────────────────────────────────────────────── */
+.nv-slideshow__viewport { position: relative; overflow: hidden; }
+.nv-slideshow__track { display: grid; }
+.nv-slideshow__slide { grid-area: 1 / 1; min-width: 0; }
+/* fade (and always under reduced motion): slides stacked, 400ms crossfade. */
+.nv-slideshow[data-transition='fade'] .nv-slideshow__slide {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--duration-hero) var(--ease-standard), visibility 0s linear var(--duration-hero);
+}
+.nv-slideshow[data-transition='fade'] .nv-slideshow__slide[data-active] { opacity: 1; visibility: visible; transition-delay: 0s; }
+/* slide: a track moved by the index (mirrors in RTL). */
+.nv-slideshow[data-transition='slide'] .nv-slideshow__track {
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+  transform: translateX(calc(var(--nv-slide-index) * -100%));
+  transition: transform var(--duration-hero) var(--ease-standard);
+}
+.nv-slideshow[data-transition='slide'] .nv-slideshow__slide { grid-area: auto; }
+[dir='rtl'] .nv-slideshow[data-transition='slide'] .nv-slideshow__track { transform: translateX(calc(var(--nv-slide-index) * 100%)); }
+.nv-slideshow:not([data-single]) .nv-promo-container[data-width='full'] { padding-inline: 0; }
+.nv-slideshow[data-single] .nv-promo-container[data-width='full'] { padding-inline: 0; }
+.nv-slideshow .nv-promo-container:not([data-width='full']) .nv-slideshow__viewport,
+.nv-slideshow[data-single] .nv-promo-container:not([data-width='full']) .nv-media-frame { border-radius: var(--hero-radius); }
+
+/* The control cluster: bottom inline-end / start / centre, level with the copy's last line. */
+.nv-slideshow__controls {
+  position: absolute;
+  z-index: var(--z-raised);
+  inset-block-end: var(--hero-inset-block);
+  inset-inline-end: var(--hero-inset-inline);
+}
+.nv-slideshow[data-controls-position='bottom-left'] .nv-slideshow__controls { inset-inline: var(--hero-inset-inline) auto; }
+.nv-slideshow[data-controls-position='bottom-center'] .nv-slideshow__controls { inset-inline: 0; margin-inline: auto; width: max-content; }
+
+/* 390: arrows drop (swipe); the controls are a full-width row under the copy. */
+@media (max-width: 639.98px) {
+  .nv-slideshow__controls,
+  .nv-slideshow[data-controls-position] .nv-slideshow__controls {
+    inset-inline: var(--hero-inset-inline);
+    inset-block-end: var(--space-3);
+    width: auto;
+    margin: 0;
+  }
+  .nv-slideshow:not([data-single]) .nv-media-frame__anchor { padding-block-end: calc(var(--touch-target) + var(--space-5)); }
+  /* The floor gradient runs on under the control row. */
+  .nv-slideshow:not([data-single]) .nv-media-frame__copy::before { inset-block-end: calc(-1 * (var(--touch-target) + var(--space-5))); }
+}
+
+/* ── 12B · 03 video-hero ─────────────────────────────────────────────────── */
+.nv-video-hero .nv-promo-container[data-width='full'] { padding-inline: 0; }
+.nv-video-hero .nv-promo-container:not([data-width='full']) .nv-media-frame { border-radius: var(--hero-radius); }
+
+/* ── 12B · 04 promo-banner ───────────────────────────────────────────────── */
+.nv-promo__band {
+  --nv-promo-bg: var(--color-bg-inverse);
+  --nv-promo-fg: var(--color-fg-inverse);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gap-lg) var(--gap-xl);
+  padding: var(--promo-pad-block) var(--promo-pad-inline);
+  border-radius: var(--hero-radius);
+  background: var(--nv-promo-bg);
+  color: var(--nv-promo-fg);
+}
+.nv-promo__band[data-style='muted'] { --nv-promo-bg: var(--color-bg-muted); --nv-promo-fg: var(--color-fg); --nv-countdown-bg: var(--color-bg); }
+.nv-promo__band[data-style='brand'] { --nv-promo-bg: var(--color-brand); --nv-promo-fg: var(--color-brand-contrast); }
+.nv-promo__band[data-style='brand'] .nv-promo__cta.nv-btn { background: var(--nv-promo-fg); color: var(--nv-promo-bg); }
+.nv-promo__band[data-ended] .nv-promo__heading { color: var(--color-fg-muted); }
+.nv-promo__copy { flex: 1 1 20rem; display: grid; gap: var(--space-1); max-width: var(--nv-promo-measure, none); }
+.nv-promo__band[data-width='narrow'] { --nv-promo-measure: var(--container-narrow); }
+.nv-promo__band[data-width='content'] { --nv-promo-measure: var(--hero-measure-medium); }
+.nv-promo__eyebrow { font-size: var(--type-body-sm); font-weight: var(--weight-medium); }
+.nv-promo__heading {
+  font-size: var(--type-h2);
+  line-height: var(--leading-h2);
+  letter-spacing: var(--tracking-h2);
+  font-weight: var(--weight-heading);
+  text-wrap: balance;
+}
+/* headerSize → the SectionHead ladder: small h3 · medium h2 · large h1. */
+.nv-promo__heading[data-size='small'] { font-size: var(--type-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
+.nv-promo__heading[data-size='large'] { font-size: var(--type-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); }
+.nv-promo__cta.nv-btn[data-size='lg'] { min-height: var(--space-7); }
+.nv-promo__band[data-align='center'] { flex-direction: column; text-align: center; }
+.nv-promo__band[data-align='center'] .nv-promo__copy { flex: none; justify-items: center; }
+.nv-promo .nv-editor-frame { margin-block-end: var(--gap-md); }
+
+@media (max-width: 639.98px) {
+  .nv-promo__band { flex-direction: column; align-items: stretch; }
+  .nv-promo__copy { flex: none; }
+  .nv-promo__cta.nv-btn { width: 100%; }
+  .nv-promo[data-mobile-align='center'] .nv-promo__band { text-align: center; }
+  .nv-promo[data-mobile-align='left'] .nv-promo__band { text-align: start; }
+}
+
+/* ── 12B · 05 marquee ────────────────────────────────────────────────────── */
+.nv-marquee {
+  --nv-marquee-h: var(--marquee-height-medium);
+  /* The track is wider than the band: never let it size the band (or the page). */
+  contain: inline-size;
+  --nv-marquee-text: var(--marquee-text-medium);
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: var(--nv-marquee-h);
+  overflow: hidden;
+  background: var(--color-bg);
+  color: var(--color-fg);
+  font-size: var(--nv-marquee-text);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-tight);
+}
+.nv-marquee[data-size='small'] { --nv-marquee-h: var(--marquee-height-small); --nv-marquee-text: var(--marquee-text-small); }
+.nv-marquee[data-size='large'] {
+  --nv-marquee-h: var(--marquee-height-large);
+  --nv-marquee-text: var(--marquee-text-large);
+  letter-spacing: var(--tracking-h1);
+}
+/* surface adds hairlines above and below. */
+.nv-marquee[data-bg='surface'] { border-block: var(--border-subtle); }
+.nv-marquee[data-bg='surface-secondary'] { background: var(--color-bg-muted); }
+.nv-marquee[data-bg='primary'] { background: var(--color-bg-inverse); color: var(--color-fg-inverse); }
+
+.nv-marquee__viewport {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  /* The fade mask behind the pause button at the inline end. */
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--space-9)), transparent calc(100% - var(--touch-target) / 2));
+}
+[dir='rtl'] .nv-marquee__viewport { mask-image: linear-gradient(to left, #000 calc(100% - var(--space-9)), transparent calc(100% - var(--touch-target) / 2)); }
+.nv-marquee__track { display: flex; width: max-content; }
+.nv-marquee__unit { display: inline-flex; align-items: center; flex: none; white-space: nowrap; }
+.nv-marquee__text { padding-inline-start: var(--space-6); }
+.nv-marquee__dot {
+  width: 0.3em;
+  height: 0.3em;
+  margin-inline-start: var(--space-6);
+  border-radius: var(--radius-circle);
+  background: currentColor;
+  opacity: 0.45;
+}
+.nv-marquee[data-state='moving'] .nv-marquee__track { animation: nv-marquee var(--nv-marquee-duration) linear infinite; }
+.nv-marquee[data-state='moving'][data-direction='right'] .nv-marquee__track { animation-direction: reverse; }
+.nv-marquee[data-hover-pause]:hover .nv-marquee__track { animation-play-state: paused; }
+@keyframes nv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+[dir='rtl'] .nv-marquee[data-state='moving'] .nv-marquee__track { animation-name: nv-marquee-rtl; }
+@keyframes nv-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
+
+.nv-marquee__pause.nv-icon-btn { position: absolute; inset-inline-end: var(--space-2); flex: none; }
+/* The text stops before the pause button instead of running under it: the
+   viewport ends where the button begins, and fades out over its last stretch. */
+.nv-marquee:has(.nv-marquee__pause) .nv-marquee__viewport {
+  margin-inline-end: calc(var(--touch-target) + var(--space-2) * 2);
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--space-9)), transparent 100%);
+}
+[dir='rtl'] .nv-marquee:has(.nv-marquee__pause) .nv-marquee__viewport { mask-image: linear-gradient(to left, #000 calc(100% - var(--space-9)), transparent 100%); }
+.nv-marquee[data-size='small']:has(.nv-marquee__pause) .nv-marquee__viewport { margin-inline-end: calc(var(--space-6) + var(--space-2) * 2); }
+.nv-marquee[data-size='small'] .nv-marquee__pause.nv-icon-btn { width: var(--space-6); height: var(--space-6); }
+.nv-marquee[data-size='small'] .nv-marquee__pause.nv-icon-btn::after { content: ''; position: absolute; inset: calc((var(--space-6) - var(--touch-target)) / 2); }
+.nv-marquee__pause.nv-icon-btn { box-shadow: inset 0 0 0 var(--border-width) currentColor; }
+
+/* Reduced motion: static, centred, shown once, allowed to wrap. */
+.nv-marquee__static { flex: 1; padding: var(--space-3) var(--page-gutter); text-align: center; }
+
+/* ── 12B · 06 collection-banner ──────────────────────────────────────────── */
+.nv-collection-banner { --nv-hero-h: var(--banner-height-md); }
+.nv-collection-banner[data-height='compact'] { --nv-hero-h: var(--banner-height-compact); }
+.nv-collection-banner[data-height='lg'] { --nv-hero-h: var(--banner-height-lg); }
+.nv-collection-banner .nv-promo-container[data-width='full'] { padding-inline: 0; }
+.nv-collection-banner[data-kind='image'] .nv-promo-container:not([data-width='full']) .nv-media-frame { border-radius: var(--hero-radius); }
+.nv-collection-banner[data-kind='text'] .nv-promo-container[data-width='full'] { padding-inline: var(--page-gutter); }
+
+.nv-collection-banner__copy {
+  display: grid;
+  justify-items: start;
+  gap: var(--gap-sm);
+  max-width: var(--nv-banner-measure, var(--container-content));
+}
+.nv-collection-banner__copy[data-width='narrow'] { --nv-banner-measure: var(--container-narrow); }
+.nv-collection-banner__copy[data-width='standard'] { --nv-banner-measure: var(--container-standard); }
+.nv-collection-banner__copy[data-align='center'] { justify-items: center; text-align: center; margin-inline: auto; }
+.nv-collection-banner__copy[data-nv-surface='inverse'] { color: var(--color-fg-inverse); }
+.nv-collection-banner__copy[data-nv-surface='inverse'] :is(.nv-breadcrumb, .nv-breadcrumb a, .nv-breadcrumb__current, .nv-collection-banner__desc) { color: var(--color-fg-inverse); }
+.nv-collection-banner__title {
+  font-size: var(--banner-display-medium);
+  line-height: var(--leading-display);
+  letter-spacing: var(--tracking-display);
+  font-weight: var(--weight-heading);
+  text-wrap: balance;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+.nv-collection-banner__title[data-size='small'] { font-size: var(--hero-display-small); }
+.nv-collection-banner__title[data-size='large'] { font-size: var(--hero-display-large); }
+.nv-root :lang(th) .nv-collection-banner__title,
+.nv-root:lang(th) .nv-collection-banner__title,
+.nv-root[dir='rtl'] .nv-collection-banner__title { letter-spacing: 0; line-height: var(--leading-h4); }
+.nv-collection-banner__desc {
+  max-width: 56ch;
+  font-size: var(--type-body-lg);
+  line-height: var(--leading-snug);
+  color: var(--color-fg-muted);
+}
+.nv-collection-banner__more {
+  min-height: var(--touch-target);
+  font-weight: var(--weight-medium);
+  text-decoration: underline;
+  text-underline-offset: var(--underline-offset-lg);
+}
+@media (min-width: 640px) {
+  .nv-collection-banner__more { display: none; }
+}
+/* No image: a calm text banner, height auto (56 / 40 padding). */
+.nv-collection-banner__text { padding-block: calc(var(--space-7) + var(--space-2)) calc(var(--space-6) + var(--space-2)); }
+
+@media (max-width: 639.98px) {
+  .nv-collection-banner { --nv-hero-h: var(--banner-height-md-mobile); }
+  .nv-collection-banner[data-height='compact'] { --nv-hero-h: var(--banner-height-compact-mobile); }
+  .nv-collection-banner[data-height='lg'] { --nv-hero-h: var(--banner-height-lg-mobile); }
+  /* Banners keep their own shorter ladder at 390 (not the hero 4:5). */
+  .nv-collection-banner .nv-media-frame { aspect-ratio: auto; min-height: var(--nv-hero-h); }
+  .nv-collection-banner__desc:not([data-expanded]) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+  .nv-collection-banner__text { padding-block: var(--space-7) var(--space-6); }
+}
+/* line-add-friend: the head over LINE's button, both on the section's alignment */
+.nv-line-section .nv-section-container { display: flex; flex-direction: column; align-items: flex-start; }
+.nv-line-section[data-align='center'] .nv-section-container { align-items: center; }

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

@@ -0,0 +1,117 @@
+/* ── 12F · Trust & Advanced Commerce ─────────────────────────────────────── */
+
+.nv-trust__editor-note { display: inline-flex; align-items: center; min-height: 24px; margin-block-end: var(--space-4); padding-inline: var(--space-2); border-radius: var(--radius-sm); background: var(--color-warning-surface); color: var(--color-warning-ink); font-size: var(--type-caption); }
+
+/* ── 01 testimonials: 1 card + a peek at 390; spotlight = one large quote. */
+.nv-testimonials .nv-row { --carousel-peek: 1.12; }
+.nv-testimonials__root { min-width: 0; contain: inline-size; }
+.nv-testimonials[data-columns='1'] .nv-row__list { max-width: var(--container-content); }
+.nv-testimonials[data-columns='1'] .nv-row[data-layout='carousel'] .nv-row__list { max-width: none; }
+
+/* ── 02 logo-list: max height per logoHeight; grey at 60% ink, colour on hover / focus. */
+.nv-logos { --nv-logo-h: 28px; }
+.nv-logos[data-size='small'] { --nv-logo-h: 24px; }
+.nv-logos[data-size='large'] { --nv-logo-h: 40px; }
+.nv-logos__label { margin-block-end: var(--space-5); color: var(--color-fg-muted); }
+.nv-logos[data-align='center'] .nv-logos__label { text-align: center; }
+.nv-logos__list { display: grid; grid-template-columns: repeat(var(--nv-cols), minmax(0, 1fr)); gap: var(--space-5) var(--space-6); align-items: center; }
+.nv-logos[data-few] .nv-logos__list { display: flex; flex-wrap: wrap; justify-content: center; }
+.nv-logos__cell { display: flex; align-items: center; justify-content: center; min-height: 48px; min-width: 0; }
+.nv-logos__cell img { display: block; width: auto; max-width: 100%; height: auto; max-height: var(--nv-logo-h); object-fit: contain; transition: filter var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
+.nv-logos[data-grey] .nv-logos__cell img { filter: grayscale(1); opacity: 0.6; }
+.nv-logos[data-grey] .nv-logos__cell:is(:hover, :focus-within) img { filter: none; opacity: 1; }
+.nv-logos__link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); min-width: var(--touch-target); border-radius: var(--radius-sm); }
+.nv-logos__link:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 4px; }
+.nv-logos__name { font-size: var(--type-body-sm); font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-fg-muted); text-align: center; }
+@media (max-width: 639.98px) {
+  .nv-logos { --nv-logo-h: 24px; }
+  .nv-logos[data-size='small'] { --nv-logo-h: 20px; }
+  .nv-logos[data-size='large'] { --nv-logo-h: 28px; }
+  .nv-logos__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
+}
+
+/* ── 03 trust-badges: icon · title · detail; hairline dividers; 2 × 2 at 390 without. */
+.nv-badges__list { display: grid; grid-template-columns: repeat(var(--nv-cols), minmax(0, 1fr)); gap: var(--space-5) 0; }
+.nv-badges__item { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; padding-inline: var(--space-6); }
+.nv-badges__item:first-child { padding-inline-start: 0; }
+.nv-badges[data-dividers] .nv-badges__item + .nv-badges__item { border-inline-start: 1px solid var(--color-border); }
+.nv-badges__item .nv-icon { flex: none; margin-block-start: 1px; }
+.nv-badges__text { display: grid; gap: 2px; min-width: 0; }
+.nv-badges__title { font-size: 0.9375rem; font-weight: var(--weight-medium); line-height: 1.35; }
+.nv-badges__title a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-border-emphasis); text-underline-offset: var(--underline-offset); }
+.nv-badges__detail { font-size: var(--type-body-sm); line-height: 1.4; color: var(--color-fg-muted); }
+.nv-badges[data-badge-align='center'] .nv-badges__item { flex-direction: column; align-items: center; text-align: center; }
+.nv-badges[data-style='compact'] .nv-badges__list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
+.nv-badges[data-style='compact'] .nv-badges__item { align-items: center; padding: 0; border: 0; }
+.nv-badges[data-style='compact'] .nv-badges__item .nv-icon { margin: 0; }
+.nv-badges[data-style='compact'] .nv-badges__title { font-size: var(--type-body-sm); white-space: nowrap; }
+.nv-badges[data-style='compact'][data-badge-align='center'] .nv-badges__list { justify-content: center; }
+.nv-badges[data-style='compact'][data-badge-align='center'] .nv-badges__item { flex-direction: row; }
+@media (max-width: 1023.98px) {
+  .nv-badges[data-style='row'] .nv-badges__list { grid-template-columns: repeat(min(var(--nv-cols), 2), minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
+  .nv-badges[data-style='row'] .nv-badges__item { padding: 0; border: 0 !important; }
+}
+@media (max-width: 639.98px) {
+  .nv-badges[data-style='row'] .nv-badges__item { flex-direction: column; gap: var(--space-2); }
+  .nv-badges[data-style='row'][data-badge-align='center'] .nv-badges__item { align-items: center; }
+}
+
+/* ── 04 product-reviews: summary beside (≈ 1 / 3) from 1024; stacked below. */
+.nv-reviews__grid { display: grid; gap: var(--space-7); }
+.nv-reviews__summary { display: grid; gap: var(--space-5); align-content: start; }
+.nv-reviews__summary .nv-section-head { margin-block-end: 0; }
+.nv-reviews__write { max-width: 24rem; }
+.nv-reviews__tools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block-end: var(--space-4); border-block-end: 1px solid var(--color-border); }
+.nv-reviews__filters { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
+.nv-reviews__sort { width: auto; }
+.nv-reviews__list { list-style: none; margin: 0; padding: 0; }
+.nv-reviews__more { display: flex; justify-content: center; padding-block-start: var(--space-5); }
+.nv-reviews__none { margin-block: var(--space-2) var(--space-5); color: var(--color-fg-muted); }
+@media (min-width: 1024px) {
+  .nv-reviews[data-layout='summary-left'] .nv-reviews__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); gap: var(--space-8); }
+  .nv-reviews[data-layout='summary-left'] .nv-reviews__summary { position: sticky; top: var(--space-6); }
+  .nv-reviews[data-layout='stacked'] .nv-reviews__summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-7); }
+  .nv-reviews[data-layout='stacked'] .nv-reviews__summary > .nv-section-head { grid-column: 1 / -1; }
+  .nv-reviews[data-layout='stacked'] .nv-reviews__bars { grid-column: 2; grid-row: 2 / span 2; }
+}
+@media (max-width: 639.98px) {
+  .nv-reviews__bars { display: none; }
+  .nv-reviews__grid { gap: var(--space-5); }
+  .nv-reviews__write { max-width: none; }
+}
+
+/* ── 05 ugc-gallery: square tiles; 2.2 visible at 390. */
+.nv-ugc .nv-row { --carousel-peek: 2.2; --nv-row-gap-x: var(--space-3); --nv-row-gap-y: var(--space-3); }
+.nv-ugc__cta { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-target); color: var(--color-fg); font-size: var(--type-body-sm); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset-lg); white-space: nowrap; }
+
+/* ── 06 shop-the-look: 4:5 image ≈ 56%, the list beside; image first at 390. */
+.nv-look__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
+.nv-look[data-media='end'] .nv-look__media { order: 2; }
+.nv-look__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-media); background: var(--color-media-bg); }
+.nv-look__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.nv-look__panel { display: grid; gap: var(--space-5); align-content: start; }
+.nv-look__panel .nv-section-head { margin-block-end: 0; }
+.nv-look__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
+.nv-look__all { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border); }
+.nv-look__total { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-look__all-total { display: none; }
+.nv-look__message { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-look__message:empty { display: none; }
+@media (min-width: 1024px) { .nv-look__panel { padding-block-start: var(--space-2); } }
+@media (max-width: 1023.98px) { .nv-look__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .nv-look[data-media='end'] .nv-look__media { order: 0; } }
+@media (max-width: 639.98px) {
+  .nv-look__panel .nv-section-head { order: -2; }
+  .nv-look__list { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline-end: calc(-1 * var(--page-gutter)); padding-inline-end: var(--page-gutter); }
+  .nv-look__list .nv-look-item { scroll-snap-align: start; grid-template-columns: 24px auto minmax(0, 1fr); background: var(--color-bg-muted); }
+  .nv-look__list .nv-look-item[data-variant='compact'] { padding-inline: var(--space-3); border: 0; border-radius: var(--radius-md); grid-template-columns: 24px minmax(0, 1fr); }
+  .nv-look__list .nv-look-item__media { width: 56px; height: 56px; }
+  .nv-look__list .nv-look-item__add { display: none; }
+  .nv-look__all { display: block; padding: 0; border: 0; }
+  .nv-look__all .nv-btn { width: 100%; }
+  .nv-look__total { display: none; }
+  .nv-look__all-total { display: inline; }
+}
+
+/* ── 07 comparison-table */
+.nv-compare-section .nv-section-head__link .nv-choice { flex-direction: row-reverse; gap: var(--space-3); }
+.nv-compare-section__bare { display: flex; justify-content: flex-end; margin-block-end: var(--space-4); }

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

@@ -0,0 +1,190 @@
+/* ── 12G · Utility & Customer Experience ─────────────────────────────────── */
+
+/* Page titles: headerSize small 24 · medium 32 · large 48 (h1 scale). */
+.nv-utility__title, .nv-cart__title, .nv-search__title { font-size: var(--type-h1); line-height: 1.1; letter-spacing: var(--tracking-h1); font-weight: var(--weight-heading); text-wrap: balance; }
+:is(.nv-utility__title, .nv-cart__title, .nv-search__title)[data-size='medium'] { font-size: var(--type-h2); letter-spacing: var(--tracking-h2); }
+:is(.nv-utility__title, .nv-cart__title, .nv-search__title)[data-size='small'] { font-size: var(--type-h3); letter-spacing: var(--tracking-h3); }
+.nv-utility__editor-note { margin-block-start: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-warning-surface); color: var(--color-warning-ink); font-size: var(--type-caption); }
+/* contentWidth → the measure these sections read. */
+:is(.nv-account__home, .nv-newsletter, .nv-contact__grid, .nv-not-found__inner, .nv-policy__body)[data-measure='narrow'] { --nv-measure: var(--container-narrow); }
+:is(.nv-account__home, .nv-newsletter, .nv-contact__grid, .nv-not-found__inner, .nv-policy__body)[data-measure='content'] { --nv-measure: var(--container-content); }
+:is(.nv-account__home, .nv-newsletter, .nv-contact__grid, .nv-not-found__inner, .nv-policy__body)[data-measure='standard'] { --nv-measure: var(--container-standard); }
+
+/* ── 01 cart-items: lines ≈ 2 / 3, sticky summary ≈ 1 / 3 from 1024. */
+.nv-cart__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-6); }
+.nv-cart__continue { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--color-fg); font-size: var(--type-body-sm); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset-lg); white-space: nowrap; }
+.nv-cart__grid { display: grid; gap: var(--space-7); align-items: start; }
+.nv-cart__cols { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 6rem; gap: var(--space-4); padding-block-end: var(--space-3); border-block-end: 1px solid var(--color-fg); font-size: var(--type-caption); color: var(--color-fg-muted); }
+.nv-cart__cols span:nth-child(2) { text-align: center; }
+.nv-cart__cols span:last-child { text-align: end; }
+.nv-cart__list { list-style: none; margin: 0; padding: 0; }
+.nv-cart__removed { padding-block: var(--space-4); font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-cart__removed button { min-height: 24px; padding: 0; border: 0; background: none; color: var(--color-fg); font: inherit; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset); cursor: pointer; }
+.nv-cart__note { display: grid; gap: var(--space-2); max-width: 30rem; margin-block-start: var(--space-6); font-size: var(--type-body-sm); font-weight: var(--weight-medium); }
+.nv-cart__note .nv-textarea { font-weight: 400; }
+.nv-cart__empty { display: grid; gap: var(--space-4); justify-items: start; max-width: 36rem; }
+.nv-cart__empty-hint { color: var(--color-fg-muted); }
+.nv-cart__suggest { margin-block-start: var(--space-8); }
+.nv-cart__suggest-title { margin-block-end: var(--space-5); font-size: 1.25rem; font-weight: var(--weight-heading); letter-spacing: 0; }
+.nv-cart__suggest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap-y) var(--card-gap-x); list-style: none; margin: 0; padding: 0; }
+@media (min-width: 1024px) {
+  .nv-cart[data-summary='right'] .nv-cart__grid { grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr); gap: var(--space-8); }
+  .nv-cart[data-summary='right'] .nv-cart__summary { position: sticky; top: var(--space-6); }
+  .nv-cart[data-summary='below'] .nv-cart__summary { justify-self: end; width: min(100%, 26rem); }
+}
+@media (max-width: 1023.98px) { .nv-cart__cols { display: none; } }
+@media (max-width: 639.98px) {
+  .nv-cart__suggest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .nv-cart__empty .nv-btn { width: 100%; }
+  .nv-cart__head { margin-block-end: var(--space-3); }
+}
+
+/* ── 02 search-results */
+.nv-search .nv-search-field { margin-block-end: var(--space-6); }
+.nv-search__message { display: grid; gap: var(--space-3); padding-block: var(--space-6); color: var(--color-fg-muted); }
+.nv-search__message .nv-search__title { color: var(--color-fg); }
+.nv-search__message[data-align='center'] { justify-items: center; text-align: center; }
+.nv-search__message .nv-recovery { margin-block-start: var(--space-3); }
+.nv-search__results { position: relative; }
+.nv-search__sort { width: auto; }
+.nv-search__results[data-sort] .nv-search__sort { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 1; }
+.nv-search__results[data-sort] .nv-tabs__list { padding-inline-end: 12rem; }
+.nv-search__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap-y) var(--card-gap-x); list-style: none; margin: var(--space-5) 0 0; padding: 0; }
+.nv-search__grid[data-columns='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.nv-search__grid + .nv-pagination { margin-block-start: var(--space-7); }
+.nv-search__pages { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
+.nv-search__pages li { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-block-end: 1px solid var(--color-border); }
+.nv-search__pages a { color: var(--color-fg); font-weight: var(--weight-medium); }
+.nv-search__pages p { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-search__group + .nv-search__group { margin-block-start: var(--space-7); }
+.nv-search__group-title { font-size: 1.125rem; font-weight: var(--weight-medium); letter-spacing: 0; }
+@media (max-width: 1023.98px) { .nv-search__grid, .nv-search__grid[data-columns='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (max-width: 639.98px) {
+  .nv-search__grid, .nv-search__grid[data-columns='3'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  /* An article card is a row (image beside text) at 390: two per row left each title one word per line. */
+  .nv-search__grid[data-kind='articles'] { grid-template-columns: minmax(0, 1fr); }
+  .nv-search__results[data-sort] .nv-search__sort { position: relative; inset: auto; margin-block-end: var(--space-3); }
+  .nv-search__results[data-sort] .nv-tabs__list { padding-inline-end: 0; }
+  .nv-search .nv-tabs__list { overflow-x: auto; scrollbar-width: none; }
+}
+
+/* ── 03 account: split = image ½ · sign-in ½ (stacked < 1024 or without an image). */
+.nv-account__signin { display: grid; gap: var(--space-7); align-items: center; }
+.nv-account[data-layout='stacked'] .nv-account__signin { max-width: 26rem; margin-inline: auto; }
+.nv-account__media { align-self: stretch; min-height: 26rem; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-account__media img { width: 100%; height: 100%; object-fit: cover; }
+.nv-account__panel { display: grid; gap: var(--space-4); max-width: 24rem; }
+.nv-account__desc { color: var(--color-fg-muted); font-size: var(--type-body-sm); }
+/* The account slot (Theme ABI v2 §4): the platform's account area, framed where the sign-in form sat. */
+.nv-account__slot { display: block; inline-size: 100%; min-block-size: 36rem; border: 0; margin-block-start: var(--space-2); background: transparent; color-scheme: normal; }
+.nv-account__home { max-width: var(--nv-measure, var(--container-content)); }
+.nv-account__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-5); }
+.nv-account__signout { color: var(--color-fg); font-size: var(--type-body-sm); text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-account__orders { list-style: none; margin: 0; padding: 0; }
+.nv-account__orders :is(a, div) { display: grid; grid-template-columns: minmax(0, 1fr) auto 6rem; align-items: center; gap: var(--space-4); min-height: 56px; padding-block: var(--space-3); border-block-end: 1px solid var(--color-border); color: var(--color-fg); text-decoration: none; }
+.nv-account__orders a:hover .nv-account__number { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-account__order-id { display: grid; font-size: var(--type-body-sm); }
+.nv-account__number { font-family: var(--font-mono); font-weight: var(--weight-medium); }
+.nv-account__order-id time, .nv-account__items { color: var(--color-fg-muted); font-size: var(--type-body-sm); }
+.nv-account__total { text-align: end; font-weight: var(--weight-medium); }
+.nv-account__none { display: grid; gap: var(--space-3); justify-items: start; padding-block: var(--space-5); color: var(--color-fg-muted); }
+@media (min-width: 1024px) {
+  .nv-account[data-layout='split'] .nv-account__signin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  .nv-account[data-layout='split'] .nv-account__panel { justify-self: center; width: 100%; }
+}
+@media (max-width: 1023.98px) {
+  .nv-account__media { display: none; }
+  .nv-account__panel { max-width: 26rem; margin-inline: auto; width: 100%; }
+}
+
+/* ── 04 policy-page: contents 13rem · text at the measure. */
+.nv-policy__grid { display: grid; gap: var(--space-6); }
+.nv-policy__body { width: 100%; max-width: var(--nv-measure, var(--container-narrow)); margin-inline: auto; }
+.nv-policy__body > .nv-utility__title { margin-block-end: var(--space-3); }
+.nv-policy__updated { margin-block-end: var(--space-6); font-size: var(--type-caption); color: var(--color-fg-muted); }
+.nv-policy__body > .nv-longform { margin-block-start: var(--space-6); }
+.nv-policy__updated + .nv-longform { margin-block-start: 0; }
+.nv-policy__unpublished { padding-block: var(--space-7); text-align: center; color: var(--color-fg-muted); }
+.nv-policy__unpublished a { color: var(--color-fg); }
+@media (min-width: 1024px) {
+  .nv-policy[data-contents] .nv-policy__grid { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-8); }
+  .nv-policy__contents { position: sticky; top: var(--space-6); align-self: start; padding-block-start: var(--space-2); }
+  .nv-policy[data-contents] .nv-policy__body { margin-inline: 0; }
+}
+
+/* ── 05 store-locator: cards radius 10; 2 · 3 columns; 1 at 390. */
+.nv-stores__tools { display: flex; align-items: center; gap: var(--space-4); margin-block-end: var(--space-5); }
+.nv-stores__tools .nv-input { flex: 0 1 31rem; }
+.nv-stores__count { font-size: var(--type-body-sm); color: var(--color-fg-muted); white-space: nowrap; }
+.nv-stores__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
+.nv-stores__list[data-columns='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.nv-stores__list > li { display: grid; }
+.nv-stores__none { padding-block: var(--space-6); color: var(--color-fg-muted); }
+.nv-stores__none button { min-height: 24px; padding: 0; border: 0; background: none; color: var(--color-fg); font: inherit; text-decoration: underline; text-underline-offset: var(--underline-offset); cursor: pointer; }
+@media (max-width: 1023.98px) { .nv-stores__list[data-columns='3'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 639.98px) {
+  .nv-stores__list, .nv-stores__list[data-columns='3'] { grid-template-columns: minmax(0, 1fr); }
+  .nv-stores__tools { flex-wrap: wrap; }
+  .nv-stores__tools .nv-input { flex-basis: 100%; }
+}
+
+/* ── 06 newsletter: start · centered · split; card = contained, radius 12. */
+.nv-newsletter { display: grid; gap: var(--space-5); max-width: var(--nv-measure, var(--container-standard)); }
+.nv-newsletter__copy { display: grid; gap: var(--space-2); max-width: 40rem; }
+.nv-newsletter__title { font-size: var(--type-h2); line-height: 1.15; letter-spacing: var(--tracking-h2); font-weight: var(--weight-heading); }
+.nv-newsletter__title[data-size='small'] { font-size: var(--type-h3); }
+.nv-newsletter__title[data-size='large'] { font-size: var(--type-h1); letter-spacing: var(--tracking-h1); }
+.nv-newsletter__body { color: var(--color-fg-muted); }
+.nv-newsletter__action { display: grid; gap: var(--space-2); justify-items: start; }
+.nv-newsletter__note { font-size: var(--type-caption); color: var(--color-fg-muted); }
+.nv-newsletter .nv-newsletter-form { max-width: 32rem; width: 100%; }
+/* Width fixed while it reads "Subscribing…" (12G). */
+.nv-newsletter .nv-newsletter-form__submit { min-width: 7.5rem; }
+.nv-newsletter[data-layout='centered'] { justify-items: center; margin-inline: auto; text-align: center; }
+.nv-newsletter[data-layout='centered'] .nv-newsletter__action { justify-items: center; }
+.nv-newsletter[data-layout='centered'] .nv-newsletter-form { justify-content: center; }
+.nv-newsletter__card { padding: var(--space-7) var(--space-6); border-radius: var(--radius-lg); }
+.nv-newsletter__card[data-bg='surface'] { background: var(--color-bg-muted); color: var(--color-fg); }
+.nv-newsletter__card[data-bg='surface-secondary'] { background: var(--color-bg-muted); color: var(--color-fg); }
+.nv-newsletter__card[data-bg='primary'] { background: var(--color-bg-inverse); color: var(--color-fg-inverse); }
+@media (min-width: 1024px) {
+  .nv-newsletter[data-layout='split'] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); max-width: none; }
+  .nv-newsletter[data-layout='split'] .nv-newsletter__action { justify-items: end; }
+  .nv-newsletter[data-layout='split'] .nv-newsletter-form { justify-content: flex-end; }
+}
+@media (max-width: 639.98px) {
+  /* Scoped to the section: the footer's newsletter block keeps its own row. */
+  .nv-newsletter .nv-newsletter-form { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
+  .nv-newsletter .nv-newsletter-form > :is(*, .nv-input) { flex: 0 0 auto; }
+  .nv-newsletter .nv-newsletter-form .nv-btn { width: 100%; }
+  .nv-newsletter__card { padding: var(--space-6) var(--space-5); }
+}
+
+/* ── 07 contact-form: split = details ⅖ · form ⅗ (stacked < 1024). */
+.nv-contact__grid { display: grid; gap: var(--space-7); max-width: var(--nv-measure, var(--container-content)); }
+.nv-contact[data-layout='stacked'] .nv-contact__grid { margin-inline: auto; }
+.nv-contact__aside { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
+.nv-contact__intro { color: var(--color-fg-muted); }
+.nv-contact__details { width: 100%; margin: var(--space-2) 0 0; border-block-start: 1px solid var(--color-border); font-size: var(--type-body-sm); }
+.nv-contact__details > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--color-border); }
+.nv-contact__details dt { color: var(--color-fg-muted); }
+.nv-contact__details dd { margin: 0; font-weight: var(--weight-medium); }
+.nv-contact__details a { color: inherit; text-decoration: none; }
+.nv-contact__details a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+@media (min-width: 1024px) {
+  .nv-contact[data-layout='split'] .nv-contact__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8); max-width: none; }
+}
+@media (max-width: 639.98px) {
+  .nv-contact__details > div { grid-template-columns: minmax(0, 1fr) auto; }
+  .nv-contact__details dd { text-align: end; }
+  .nv-contact__aside > .nv-btn { width: 100%; }
+}
+
+/* ── 08 not-found: 404 in mono above the heading; centred by default. */
+.nv-not-found__inner { display: grid; gap: var(--space-4); justify-items: start; max-width: var(--nv-measure, var(--container-narrow)); }
+.nv-not-found__inner[data-align='center'] { justify-items: center; margin-inline: auto; text-align: center; }
+.nv-not-found__code { font-family: var(--font-mono); font-size: var(--type-caption); color: var(--color-fg-muted); letter-spacing: 0.08em; }
+.nv-not-found__body { color: var(--color-fg-muted); }
+.nv-not-found .nv-search-field { margin-block-start: var(--space-2); }
+.nv-not-found .nv-recovery { max-width: 100%; }
+@media (max-width: 639.98px) { .nv-not-found__inner > .nv-btn { width: 100%; } }