create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/src/components/navigation/Pagination.tsx

@@ -0,0 +1,74 @@
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import './Pagination.css'
+
+/**
+ * Nova 02 · Pagination — numbered (desktop) · compact "Page 2 of 8" (mobile).
+ * `href(page)` builds each link: pagination is navigation, not a button.
+ */
+export interface PaginationProps {
+  page: number
+  pages: number
+  href: (page: number) => string
+  variant?: 'numbered' | 'compact'
+  label?: string
+}
+
+function window1(page: number, pages: number): (number | '…')[] {
+  if (pages <= 7) return Array.from({ length: pages }, (_, i) => i + 1)
+  const out: (number | '…')[] = [1]
+  const start = Math.max(2, page - 1)
+  const end = Math.min(pages - 1, page + 1)
+  if (start > 2) out.push('…')
+  for (let i = start; i <= end; i++) out.push(i)
+  if (end < pages - 1) out.push('…')
+  out.push(pages)
+  return out
+}
+
+export function Pagination({ page, pages, href, variant = 'numbered', label = 'Pagination' }: PaginationProps): JSX.Element | null {
+  const { strings } = useNova()
+  if (pages <= 1) return null
+  const prev = page > 1 ? href(page - 1) : undefined
+  const next = page < pages ? href(page + 1) : undefined
+  const arrow = (to: string | undefined, dir: 'prev' | 'next') => {
+    const name = dir === 'prev' ? strings.previous : strings.next
+    const icon = <Icon name={dir === 'prev' ? 'chevron-left' : 'chevron-right'} size="sm" />
+    return to ? (
+      <a className="nv-pagination__arrow" href={to} aria-label={name} rel={dir}>
+        {icon}
+      </a>
+    ) : (
+      <span className="nv-pagination__arrow" aria-disabled="true" aria-label={name} role="link">
+        {icon}
+      </span>
+    )
+  }
+  return (
+    <nav className="nv-pagination" aria-label={label} data-variant={variant}>
+      {arrow(prev, 'prev')}
+      {/* Numbered collapses to the compact status below 640 (Nova 02: numbered · compact mobile). */}
+      <span className="nv-pagination__status nv-tabular" aria-current={variant === 'compact' ? 'page' : undefined}>
+        {page} / {pages}
+      </span>
+      {variant === 'compact' ? null : (
+        <ol className="nv-pagination__pages">
+          {window1(page, pages).map((p, i) =>
+            p === '…' ? (
+              <li key={`gap-${i}`} className="nv-pagination__gap" aria-hidden>
+                …
+              </li>
+            ) : (
+              <li key={p}>
+                <a className="nv-pagination__page nv-tabular" href={href(p)} aria-current={p === page ? 'page' : undefined}>
+                  {p}
+                </a>
+              </li>
+            ),
+          )}
+        </ol>
+      )}
+      {arrow(next, 'next')}
+    </nav>
+  )
+}

package/templates/nova/src/components/navigation/RecoveryLinks.css

@@ -0,0 +1,8 @@
+.nv-recovery { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
+.nv-recovery[data-align='center'] { justify-content: center; }
+.nv-recovery a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--space-4); border: 1px solid var(--color-border-input); border-radius: var(--radius-pill); color: var(--color-fg); font-size: var(--type-body-sm); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
+.nv-recovery a:hover { border-color: var(--color-border-emphasis); }
+.nv-recovery a:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
+@media (max-width: 639.98px) {
+  .nv-recovery { justify-self: stretch; min-width: 0; flex-wrap: nowrap; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); }
+}

package/templates/nova/src/components/navigation/RecoveryLinks.tsx

@@ -0,0 +1,23 @@
+import { useRef } from 'react'
+import { useScrollRegion } from '../../styles/scroll'
+import type { NovaLink } from '@tanqory/theme-kit'
+import './RecoveryLinks.css'
+
+/**
+ * 12G · merchant-chosen destinations as chips (search no-results, 404).
+ * Real collections only — never invented suggestions. A row that scrolls at 390.
+ */
+export function RecoveryLinks({ links, label, align = 'center' }: { links: readonly NovaLink[]; label: string; align?: 'left' | 'center' }): JSX.Element | null {
+  const ref = useRef<HTMLUListElement>(null)
+  const region = useScrollRegion(ref, label, [links.length], { list: true })
+  if (!links.length) return null
+  return (
+    <ul ref={ref} className="nv-recovery" data-align={align} aria-label={label} {...region}>
+      {links.map((l) => (
+        <li key={l.url}>
+          <a href={l.url}><bdi>{l.title}</bdi></a>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/templates/nova/src/components/navigation/SocialLinks.css

@@ -0,0 +1,5 @@
+/* social-links — plain marks, 40px targets (44 at 390) */
+.nv-social { display: flex; flex-wrap: wrap; gap: var(--space-1); }
+.nv-social__link { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-circle); color: inherit; transition: background-color var(--duration-fast) var(--ease-standard); }
+.nv-social__link:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
+@media (max-width: 639.98px) { .nv-social__link { width: var(--touch-target); height: var(--touch-target); } }

package/templates/nova/src/components/navigation/SocialLinks.tsx

@@ -0,0 +1,51 @@
+import type { HTMLAttributes } from 'react'
+import { Icon, type IconName } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { SOCIAL_NETWORKS, type NovaShop, type SocialNetwork } from '@tanqory/theme-kit'
+import './SocialLinks.css'
+
+/**
+ * Social marks — 20px glyphs in 40px targets (44 at 390), fixed order,
+ * plain (12A .dc: footer utility row, drawer foot, minimal footer). Explicit
+ * links win; the brand's links (Settings → Social) fill the rest. The store's
+ * profiles on networks the design draws no mark for follow, in the store's
+ * order, with the generic link mark and the network's name. Renders nothing
+ * when there is no link.
+ */
+export interface SocialLinksProps extends HTMLAttributes<HTMLUListElement> {
+  links?: Partial<Record<SocialNetwork, string>>
+  shop?: NovaShop
+}
+
+const LABEL: Record<SocialNetwork, string> = { instagram: 'Instagram', facebook: 'Facebook', x: 'X', tiktok: 'TikTok', youtube: 'YouTube' }
+
+export interface SocialEntry {
+  key: string
+  label: string
+  url: string
+  icon: IconName
+}
+
+/** The links SocialLinks renders, in order — empty when it would render nothing. */
+export function socialEntries(links: Partial<Record<SocialNetwork, string>> = {}, shop?: NovaShop): SocialEntry[] {
+  const drawn = SOCIAL_NETWORKS.map((n): SocialEntry => ({ key: n, label: LABEL[n], url: links[n] || shop?.social?.[n] || '', icon: n })).filter((e) => e.url)
+  const other = (shop?.otherSocial ?? []).filter((l) => l.url).map((l): SocialEntry => ({ key: l.platform, label: l.label, url: l.url, icon: 'link' }))
+  return [...drawn, ...other]
+}
+
+export function SocialLinks({ links = {}, shop, className, ...rest }: SocialLinksProps): JSX.Element | null {
+  const { strings } = useNova()
+  const list = socialEntries(links, shop)
+  if (!list.length) return null
+  return (
+    <ul className={['nv-social', className].filter(Boolean).join(' ')} aria-label={strings.followUs} {...rest}>
+      {list.map((e) => (
+        <li key={e.key}>
+          <a className="nv-social__link" href={e.url} aria-label={e.label} rel="noopener" target="_blank">
+            <Icon name={e.icon} size="md" />
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/templates/nova/src/components/navigation/blocks/SocialLinks.tsx

@@ -0,0 +1,23 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { SocialLinks, socialEntries } from '../SocialLinks'
+import type { NovaShop } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/** 12A · social-links — per-network URLs over the store's Brand links. Renders the SocialLinks component. */
+export const socialLinksSchema = defineSchema(
+  { kind: 'block', name: 'social-links', family: '12A', parents: ['footer', 'group'], title: 'Social links', description: 'Links to your social profiles.', icon: '@' },
+  { instagram: field.url(''), facebook: field.url(''), x: field.url(''), tiktok: field.url(''), youtube: field.url('') },
+)
+export type SocialLinksBlockProps = Partial<SettingsOf<typeof socialLinksSchema>> & {
+  /** The brand's links (Settings → Brand) fill networks the block leaves empty. */
+  shop?: NovaShop
+}
+
+export function SocialLinksBlock({ shop, ...links }: SocialLinksBlockProps): JSX.Element | null {
+  return <SocialLinks links={links} shop={shop} className="nv-block" data-block="social-links" />
+}
+
+/** True when the block would render at least one link (its own URLs or the store's). */
+export function hasSocialLinks({ shop, ...links }: SocialLinksBlockProps): boolean {
+  return socialEntries(links, shop).length > 0
+}

package/templates/nova/src/components/overlays/AccountMenu.css

@@ -0,0 +1,11 @@
+.nv-account-menu { padding: var(--space-4); }
+.nv-account-menu__in, .nv-account-menu__out-state { display: grid; gap: var(--space-1); }
+.nv-account-menu__out-state .nv-btn { margin-block-start: var(--space-3); }
+.nv-account-menu__name { overflow: hidden; font-size: 0.9375rem; font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }
+.nv-account-menu__email { color: var(--color-fg-muted); font-size: var(--type-caption); }
+.nv-account-menu__links { list-style: none; margin: var(--space-3) 0 0; padding: var(--space-2) 0; border-block: 1px solid var(--color-border); }
+.nv-account-menu__panel a:not(.nv-btn) { display: flex; align-items: center; min-height: 40px; color: var(--color-fg); font-size: 0.875rem; text-decoration: none; }
+.nv-account-menu__panel a:not(.nv-btn):hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-sheet .nv-account-menu__panel a:not(.nv-btn) { min-height: 48px; font-size: 1rem; }
+/* In the sheet the title already greets (or says "Your account"): the card's first line would repeat it. */
+.nv-sheet .nv-account-menu__name { display: none; }

package/templates/nova/src/components/overlays/AccountMenu.tsx

@@ -0,0 +1,91 @@
+import type { RefObject } from "react";
+import { Button } from "../base/Button";
+import { useNova } from "../../styles/NovaProvider";
+import { fmt } from "../../styles/strings";
+import { Popover } from "./Popover";
+import "./AccountMenu.css";
+
+export interface AccountMenuProps {
+  open: boolean;
+  onClose: () => void;
+  /** The account icon in the header. */
+  anchor: RefObject<HTMLElement>;
+  /** Signed in when present. */
+  customer?: { firstName: string; lastName?: string; email: string } | null;
+  signInUrl?: string;
+  ordersUrl?: string;
+  addressesUrl?: string;
+  detailsUrl?: string;
+  signOutUrl?: string;
+}
+
+/**
+ * Nova 13 · 5 account menu — a 260 popover from the account icon (a sheet
+ * on phone). Signed out: a line of why + Sign in. Signed in: the greeting
+ * (long names ellipsise; the full name is the title), email, the account
+ * pages and Sign out.
+ */
+export function AccountMenu({
+  open,
+  onClose,
+  anchor,
+  customer,
+  signInUrl = "/account/login",
+  ordersUrl = "/account/orders",
+  addressesUrl = "/account/addresses",
+  detailsUrl = "/account",
+  signOutUrl = "/account/logout",
+}: AccountMenuProps): JSX.Element | null {
+  const { strings } = useNova();
+  const full = customer
+    ? [customer.firstName, customer.lastName].filter(Boolean).join(" ")
+    : "";
+  return (
+    <Popover
+      open={open}
+      onClose={onClose}
+      anchor={anchor}
+      label={
+        customer
+          ? fmt(strings.greeting, { name: customer.firstName })
+          : strings.yourAccount
+      }
+      align="end"
+      width={260}
+      className="nv-account-menu"
+    >
+      <div className="nv-account-menu__panel">
+        {customer ? (
+          <div className="nv-account-menu__in">
+            <p className="nv-account-menu__name" title={full}>
+              {fmt(strings.greeting, { name: full })}
+            </p>
+            <p className="nv-account-menu__email">{customer.email}</p>
+            <ul className="nv-account-menu__links">
+              <li>
+                <a href={ordersUrl}>{strings.orders}</a>
+              </li>
+              <li>
+                <a href={addressesUrl}>{strings.addresses}</a>
+              </li>
+              <li>
+                <a href={detailsUrl}>{strings.accountDetails}</a>
+              </li>
+            </ul>
+            <a className="nv-account-menu__out" href={signOutUrl}>
+              {strings.signOut}
+            </a>
+          </div>
+        ) : (
+          <div className="nv-account-menu__out-state">
+            <p className="nv-account-menu__name">{strings.yourAccount}</p>
+            <p className="nv-account-menu__email">{strings.accountPitch}</p>
+            <Button href={signInUrl} block>
+              {strings.signIn}
+            </Button>
+          </div>
+        )}
+      </div>
+    </Popover>
+  );
+}

package/templates/nova/src/components/overlays/CartDrawer.css

@@ -0,0 +1,17 @@
+.nv-cart-drawer .nv-drawer__body { padding-block: 0; }
+.nv-cart-drawer__lines { list-style: none; margin: 0; padding: 0; }
+.nv-cart-drawer__foot { display: grid; gap: var(--space-2); }
+.nv-cart-drawer__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 0.875rem; }
+.nv-cart-drawer__row[data-kind='discount'] { color: var(--color-success); }
+.nv-cart-drawer__row[data-kind='subtotal'] { font-size: 1rem; font-weight: var(--weight-medium); }
+.nv-cart-drawer__note { margin-block-end: var(--space-2); color: var(--color-fg-muted); font-size: var(--type-caption); }
+.nv-cart-drawer__view { justify-self: center; display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--color-fg); font-size: 0.875rem; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-cart-drawer__empty { display: grid; gap: var(--space-3); justify-items: center; padding-block: var(--space-8); text-align: center; }
+.nv-cart-drawer__empty-title { font-size: 1.125rem; font-weight: var(--weight-medium); }
+.nv-cart-drawer__empty-hint { color: var(--color-fg-muted); font-size: 0.875rem; }
+.nv-cart-drawer__ship { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-block-end: 1px solid var(--color-border); font-size: var(--type-caption); }
+.nv-cart-drawer__ship-bar { display: block; height: 4px; border-radius: 2px; background: var(--color-bg-muted); overflow: hidden; }
+.nv-cart-drawer__ship-bar span { display: block; height: 100%; background: var(--color-fg); }
+.nv-cart-drawer__recs { padding-block: var(--space-5); }
+.nv-cart-drawer__recs-title { margin-block-end: var(--space-3); font-size: 0.875rem; font-weight: var(--weight-medium); }
+.nv-cart-drawer__recs ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }

package/templates/nova/src/components/overlays/CartDrawer.tsx

@@ -0,0 +1,118 @@
+import { sx } from '@tanqory/theme-kit'
+import type { ReactNode } from 'react'
+import type { Cart, CartLine, CartLineRefusal, Money, Product } from '@tanqory/theme-kit'
+import { EarnHint } from '../commerce/EarnHint'
+import { MiniCartLine } from '../commerce/MiniCartLine'
+import { ProductCard } from '../commerce/ProductCard'
+import { formatMoney } from '../commerce/money'
+import { Button } from '../base/Button'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { Drawer } from './Drawer'
+import './CartDrawer.css'
+
+export interface CartDrawerProps {
+  open: boolean
+  onClose: () => void
+  cart: Cart | null
+  checkoutUrl: string
+  cartUrl: string
+  /** Lines the host is updating; lines whose last update failed. */
+  updatingLineIds?: readonly string[]
+  failedLineIds?: readonly string[]
+  /** Failed lines the store said why for (its add-to-cart limit), by line id. */
+  refusedLines?: Readonly<Record<string, CartLineRefusal>>
+  onQuantity?: (line: CartLine, quantity: number) => void
+  onRemove?: (line: CartLine) => void
+  onRetry?: (line: CartLine) => void
+  /** Announced when the drawer opened because something was added ("Added · 3 items"). */
+  justAdded?: boolean
+  /** The empty cart's way back in (12G emptyStateCollection → "Shop {title}"). */
+  emptyAction?: { label: string; href: string }
+  /** DATA REQUIREMENT — only with a threshold from the platform. */
+  freeShipping?: { remaining: Money; progress: number } | null
+  /** DATA REQUIREMENT — complementary recommendations. */
+  goesWellWith?: Product[] | null
+  note?: ReactNode
+}
+
+/**
+ * Nova 13 · 3 cart drawer — from the inline-end, 440 on desktop, full screen
+ * on phone. Lines, discounts, one primary (Checkout) and a quiet View cart.
+ * Quantity changes update in place; a failure keeps the old value and shows
+ * an inline alert. Remove has no confirmation (undo via toast). The
+ * free-shipping bar and "goes well with" row have reserved slots that only
+ * appear with platform data.
+ */
+export function CartDrawer({ open, onClose, cart, checkoutUrl, cartUrl, updatingLineIds = [], failedLineIds = [], refusedLines = {}, onQuantity, onRemove, onRetry, justAdded, emptyAction, freeShipping, goesWellWith, note }: CartDrawerProps): JSX.Element {
+  const { strings, locale } = useNova()
+  const count = cart?.itemCount ?? 0
+  const items = count === 1 ? strings.itemsOne : fmt(strings.itemsMany, { count })
+  const empty = !cart || cart.lines.length === 0
+  const footer = !empty && (
+    <div className="nv-cart-drawer__foot">
+      {cart!.discounts?.map((d) => (
+        <p key={d.code} className="nv-cart-drawer__row nv-tabular" data-kind="discount">
+          <span>{fmt(strings.discountCode, { code: d.code })}</span>
+          <span>−{formatMoney(d.amount, locale)}</span>
+        </p>
+      ))}
+      <p className="nv-cart-drawer__row nv-tabular" data-kind="subtotal">
+        <span>{strings.subtotal}</span>
+        <span>{formatMoney(cart!.total, locale)}</span>
+      </p>
+      <EarnHint amount={cart!.total} scope="order" />
+      <p className="nv-cart-drawer__note">{note ?? strings.cartDrawerNote}</p>
+      <Button href={checkoutUrl} size="lg" block>
+        {strings.checkout}
+      </Button>
+      <a className="nv-cart-drawer__view" href={cartUrl}>
+        {strings.viewCart}
+      </a>
+    </div>
+  )
+  return (
+    <Drawer open={open} onClose={onClose} side="end" title={strings.cart} subtitle={empty ? undefined : items} footer={footer || undefined} className="nv-cart-drawer" initialFocus="title">
+      <p className="nv-visually-hidden" aria-live="polite">
+        {open && justAdded ? fmt(strings.addedCount, { count }) : ''}
+      </p>
+      {empty ? (
+        <div className="nv-cart-drawer__empty">
+          <p className="nv-cart-drawer__empty-title">{strings.cartEmpty}</p>
+          <p className="nv-cart-drawer__empty-hint">{strings.cartEmptyHint}</p>
+          <Button href={emptyAction?.href ?? '/collections/all'}>{emptyAction?.label ?? strings.shopAllProducts}</Button>
+        </div>
+      ) : (
+        <>
+          {freeShipping && (
+            <div className="nv-cart-drawer__ship">
+              <p>{freeShipping.progress >= 1 ? strings.freeShippingReached : fmt(strings.freeShippingAway, { amount: formatMoney(freeShipping.remaining, locale) })}</p>
+              <span className="nv-cart-drawer__ship-bar" aria-hidden>
+                <span className={sx({ width: `${Math.min(1, freeShipping.progress) * 100}%` })} />
+              </span>
+            </div>
+          )}
+          <ul className="nv-cart-drawer__lines" aria-label={strings.cartItems}>
+            {cart!.lines.map((l) => (
+              <li key={l.id}>
+                <MiniCartLine line={l} updating={updatingLineIds.includes(l.id)} failed={failedLineIds.includes(l.id)} refusal={Object.prototype.hasOwnProperty.call(refusedLines, l.id) ? refusedLines[l.id] : undefined} onQuantity={onQuantity} onRemove={onRemove} onRetry={onRetry} />
+              </li>
+            ))}
+          </ul>
+          {goesWellWith && goesWellWith.length > 0 && (
+            <div className="nv-cart-drawer__recs">
+              <p className="nv-cart-drawer__recs-title">{strings.goesWellWith}</p>
+              <ul>
+                {goesWellWith.slice(0, 2).map((p) => (
+                  <li key={p.id}>
+                    <ProductCard product={p} compact showSwatches={false} titleAs="p" />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </>
+      )}
+    </Drawer>
+  )
+}

package/templates/nova/src/components/overlays/ConfirmationDialog.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react'
+import { Button } from '../base/Button'
+import { useNova } from '../../styles/NovaProvider'
+import { Modal } from './Modal'
+
+export interface ConfirmationDialogProps {
+  open: boolean
+  title: string
+  /** What happens, in plain words ("… This can't be undone."). */
+  description?: ReactNode
+  confirmLabel: string
+  cancelLabel?: string
+  /** destructive = the red confirm; neutral = the primary. */
+  tone?: 'neutral' | 'destructive'
+  busy?: boolean
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+/**
+ * Nova 13 · 13 Confirmation — only for irreversible actions (removing a cart
+ * line is undoable → a toast, not a confirmation). Dialog S, role
+ * alertdialog; Cancel then the confirm action; a sheet at 390 with the
+ * action on top.
+ */
+export function ConfirmationDialog({ open, title, description, confirmLabel, cancelLabel, tone = 'neutral', busy, onConfirm, onCancel }: ConfirmationDialogProps): JSX.Element {
+  const { strings } = useNova()
+  return (
+    <Modal
+      open={open}
+      onClose={onCancel}
+      title={title}
+      description={description}
+      size="sm"
+      role="alertdialog"
+      closeOnScrim={false}
+      footer={
+        <>
+          <Button variant="secondary" onClick={onCancel}>
+            {cancelLabel ?? strings.cancel}
+          </Button>
+          <Button variant={tone === 'destructive' ? 'destructive' : 'primary'} onClick={onConfirm} loading={busy} disabled={busy}>
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    />
+  )
+}

package/templates/nova/src/components/overlays/CookieConsent.css

@@ -0,0 +1,56 @@
+/* Nova 13 · 10 consent — a non-modal banner, below every overlay. */
+.nv-consent { position: fixed; inset-block-end: var(--space-5); inset-inline: var(--space-5); z-index: var(--z-consent); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); max-width: 760px; padding: var(--space-4) var(--space-5); border: var(--overlay-hairline); border-radius: var(--overlay-radius-dialog); background: var(--color-bg-elevated); color: var(--color-fg); box-shadow: var(--overlay-popover-shadow); font-size: 0.875rem; }
+.nv-consent__text a { color: var(--color-fg); text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-consent__text strong { font-weight: var(--weight-medium); }
+.nv-consent__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
+.nv-consent__manage { min-height: var(--touch-target); padding: 0 var(--space-2); 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-consent-prefs { list-style: none; margin: 0; padding: 0; }
+.nv-consent-prefs li { padding-block: var(--space-3); border-block-end: 1px solid var(--color-border); }
+.nv-consent-prefs li:last-child { border-block-end: 0; }
+.nv-consent-prefs .nv-choice { flex-direction: row-reverse; justify-content: space-between; align-items: center; width: 100%; }
+.nv-consent-prefs__text { display: grid; gap: 2px; }
+.nv-consent-prefs__label { font-weight: var(--weight-medium); }
+.nv-consent-prefs__hint { color: var(--color-fg-muted); font-size: var(--type-caption); }
+@media (max-width: 1023.98px) {
+  .nv-consent { flex-direction: column; align-items: stretch; gap: var(--space-3); }
+  .nv-consent__actions { flex-wrap: wrap; }
+}
+@media (max-width: 639.98px) {
+  /* Above the bottom navigation: full width minus the gutter. */
+  .nv-consent { inset-inline: var(--space-3); inset-block-end: calc(var(--space-3) + var(--nv-toast-lift, 0px)); padding: var(--space-4); }
+  .nv-consent__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
+  .nv-consent__actions .nv-btn { width: 100%; }
+  .nv-consent__manage { justify-self: start; }
+}
+
+/* Settings › Customer privacy › position (data-position) — wider screens; a phone keeps the bottom bar. */
+@media (min-width: 640px) {
+  .nv-consent[data-position='bottom'] { max-width: none; }
+  .nv-consent[data-position='bottom-left'] { inset-inline-end: auto; }
+  .nv-consent[data-position='bottom-right'] { inset-inline-start: auto; }
+  .nv-consent[data-position='bottom-center'] { margin-inline: auto; }
+  .nv-consent[data-position='center'] { inset-block: 50% auto; transform: translateY(-50%); margin-inline: auto; }
+}
+.nv-consent-prefs__intro { display: grid; gap: var(--space-2); padding-block-end: var(--space-3); border-block-end: 1px solid var(--color-border); }
+.nv-consent-prefs__intro p { margin: 0; }
+.nv-consent-prefs__bullets { margin: 0; padding-inline-start: var(--space-5); color: var(--color-fg-muted); font-size: var(--type-caption); }
+
+/* Settings › Customer privacy › colours (data-scheme): light / dark whatever the theme's scheme; custom = the theme's own. */
+.nv-consent[data-scheme='light'] {
+  --color-bg: #ffffff; --color-bg-muted: #f4f4f3; --color-bg-elevated: #ffffff; --color-bg-inverse: #111111;
+  --color-bg-muted-hover: #ececea; --color-bg-muted-active: #e3e3e1;
+  --color-fg: #111111; --color-fg-muted: #4f4f4d; --color-fg-subtle: #6c6c6a; --color-fg-inverse: #ffffff;
+  --color-border: #e8e8e6; --color-border-strong: #8a8a88; --color-border-emphasis: #111111; --color-border-control: #d6d6d3;
+  --color-brand: #111111; --color-brand-hover: #2e2e2e; --color-brand-active: #000000; --color-brand-contrast: #ffffff;
+  --color-focus: #0b57d0;
+  color-scheme: light;
+}
+.nv-consent[data-scheme='dark'] {
+  --color-bg: #0e0e0e; --color-bg-muted: #1c1c1c; --color-bg-elevated: #151515; --color-bg-inverse: #f2f2f0;
+  --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-control: #3a3a38;
+  --color-brand: #f2f2f0; --color-brand-hover: #dcdcda; --color-brand-active: #c8c8c6; --color-brand-contrast: #111111;
+  --color-focus: #7aa7ff;
+  color-scheme: dark;
+}