/* (C)2025 Badger Commerce Limited, a subsidiary of Kedos Consulting Limited */
@charset "utf-8";

/* ============================================
   NOVA THEME - Modern E-Commerce Design System
   ============================================ */

/* CSS Custom Properties - Design Tokens */
:root {
  /* Color System */
  --color-primary: #4F46E5;
  --color-primary-dark: #4338CA;
  --color-primary-light: #C7D2FE;
  --color-primary-50: #EEF2FF;
  --color-primary-ring: rgba(79, 70, 229, 0.1);
  --color-primary-tint: rgba(79, 70, 229, 0.05);
  --color-secondary: #06B6D4;
  --color-secondary-dark: #0891B2;
  --color-secondary-light: #A5F3FC;
  --color-secondary-50: #ECFEFF;
  --color-accent: #D97706;
  --color-accent-dark: #B45309;
  --color-accent-light: #FDE68A;
  --color-accent-50: #FFFBEB;
  /* Text and icons on a brand fill: --color-on-primary sits on --color-primary and
     --color-primary-dark (buttons, badges, filled sections), and the other two do the same for
     secondary and accent fills. Text on a brand fill reads one of these, never a literal white; the
     Design Brief sets them to whichever of white or dark ink reaches 4.5:1 on its colours. */
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;

  /* Neutrals */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;

  /* Semantic Colors */
  /* Dark enough for white text and for status text on the page (4.5:1); a theme whose status colours
     are light (a dark theme) sets the --color-on-* text colours to its dark ink. */
  --color-success: #047857;
  --color-warning: #B45309;
  --color-error: #DC2626;
  --color-error-dark: #B91C1C;
  --color-error-ring: rgba(220, 38, 38, 0.1);
  --color-info: #2563EB;
  --color-on-success: #FFFFFF;
  --color-on-warning: #FFFFFF;
  --color-on-error: #FFFFFF;

  /* Design Brief surface + text tokens — let dark-mode-leaning brands flip page
     and card backgrounds, plus strong text, without touching every --color-* ref.
     `--color-surface` is the PAGE / card background (defaults to white = today's
     implicit body bg) so setting palette.surface = dark in the brief flips both
     the body and elevated card surfaces in one go. Cards rely on their existing
     borders + shadows for visual elevation rather than a contrasting fill. */
  --color-surface: #FFFFFF;
  --color-text-strong: var(--color-gray-900);
  /* The brand colour as text (links, overlines, outline buttons) on the page. A theme whose brand
     colour is too light to read as text (Depot's yellow) points these at a darker shade and keeps
     --color-primary for fills. */
  --color-primary-text: var(--color-primary);
  --color-primary-text-hover: var(--color-primary-dark);
  /* The ground of a dark section (dark bands, the dark hero presets, the top banner). A theme that
     inverts the grey ramp (Spec) points it at its own dark, since its gray-950 is light. */
  --color-dark-surface: var(--color-gray-950);
  /* Brand colour that stays legible on dark sections (overlines, hero accent rules, primary
     buttons on dark). The Design Brief compiler overrides it with the brief's lightest brand
     colour; the contrast token is the text colour on top of it. */
  --color-on-dark: #FFFFFF;
  --color-on-dark-accent: var(--color-primary-light);
  --color-on-dark-accent-contrast: var(--color-gray-950);

  /* Typography */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 3.75rem;   /* 60px */
  --font-size-7xl: 4.5rem;    /* 72px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Heading-specific tokens — overridden by the Design Brief's typography settings.
     Keep these separate from the semantic font-weight-* / letter-spacing tokens so
     a tenant can change how headings feel without affecting inline bold text or
     component-specific letter-spacing. */
  --font-weight-heading: 700;
  --letter-spacing-heading: -0.025em;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing System (based on 4px grid) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Layout */
  --container-max-width: 1280px;
  --container-padding: var(--space-6);

  /* Product imagery — aspect ratio for product cards and the product detail main
     gallery. Defaults to square; the Design Brief's "Product image shape" setting
     (Shape language) overrides it via $cssOverride$/theme.css for retailers whose
     imagery suits a portrait/landscape crop. Thumbnails deliberately stay 1:1. */
  --product-image-ratio: 1 / 1;

  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Success Light Color (for alerts) */
  --color-success-light: #D1FAE5;
  --color-error-light: #FEE2E2;
}

/* One side gutter on phones (matches Brock's ~16px); 24px from tablet up, as before. */
@media (max-width: 767px) {
  :root {
    --container-padding: var(--space-4);
  }
}

/* ============================================
   VIEW TRANSITIONS API
   ============================================ */

/* Enable View Transitions for same-origin navigations (Chrome 111+) */
@view-transition {
  navigation: auto;
}

/* Customize the default transition animation */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default: Simple fade for all navigations - let shared elements do the morphing */
::view-transition-old(root) {
  animation-name: subtle-fade;
}

::view-transition-new(root) {
  animation-name: subtle-fade;
}

/* Optional: Add slide animation for specific navigation patterns if needed in future */
/* Example: Apply 'slide-navigation' class from JavaScript for specific routes */
html.slide-navigation ::view-transition-old(root) {
  animation-name: slide-out-left;
}

html.slide-navigation ::view-transition-new(root) {
  animation-name: slide-in-right;
}

html.slide-navigation.back-navigation ::view-transition-old(root) {
  animation-name: slide-out-right;
}

html.slide-navigation.back-navigation ::view-transition-new(root) {
  animation-name: slide-in-left;
}

/* Same page navigation: Quicker, more subtle fade */
html.same-page-navigation ::view-transition-old(root),
html.same-page-navigation ::view-transition-new(root) {
  animation-name: subtle-fade;
  animation-duration: 0.2s;
}

/* Page reload/refresh: Gentle fade in */
html.reload-navigation ::view-transition-old(root) {
  animation-name: fade-out;
  animation-duration: 0.15s;
}

html.reload-navigation ::view-transition-new(root) {
  animation-name: fade-in;
  animation-duration: 0.25s;
}

/* Animation keyframes */
@keyframes slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-30px);
    opacity: 0;
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(30px);
    opacity: 0;
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes subtle-fade {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

/* A shopper who asks for less motion (prefers-reduced-motion: reduce) gets none, on every Nova-family
   theme. One block instead of one rule per component, so motion added later is covered too.

   - Animations and transitions still run, but in .01ms, so anything that listens for animationend or
     transitionend still hears it, and every element lands in its final state at once. !important
     because component rules (and inline styles) set their own durations. The layered themes' own
     blocks (Brock, Depot, Pop, Spec, Atelier: 1ms) load after this one and agree with it.
   - Smooth scrolling (scroll-behavior: smooth, scrollIntoView) jumps instead.
   - The hero's fade-up runs with a delay and fill-mode both, which would keep the subtitle and the
     button hidden for that delay: it is switched off, so they show at once.
   - Scroll reveals (.nova-reveal, .nova-stagger, run by js/view-transitions.js) start transparent and
     offset: they are shown in place here, and the script marks them visible at once, so nothing waits
     for a scroll to appear.
   - Cross-document view transitions (the page fade and the shared product image / title / price
     morphs) don't animate: the new page simply replaces the old one.
   - No transition-delay or animation-delay is reset: a delay that isn't motion (a menu that waits
     before closing) keeps working. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .nova-hero .nova-hero__title,
  .nova-hero .nova-hero__subtitle,
  .nova-hero .nova-hero__cta {
    animation: none !important;
  }

  .nova-reveal,
  .nova-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Unique view-transition-names for basket cards */
#basket-items-card {
  view-transition-name: basket-items;
}

#basket-summary-card {
  view-transition-name: basket-summary;
}

/* Unique view-transition-names for checkout cards */
#personal-details-card {
  view-transition-name: personal-details;
}

#address-details-card {
  view-transition-name: address-details;
}

#billing-address-card {
  view-transition-name: billing-address;
}

#delivery-chooser-card {
  view-transition-name: delivery-chooser;
}

#payment-card {
  view-transition-name: payment;
}

#payment-methods-card {
  view-transition-name: payment-methods;
}

#previously-saved-card {
  view-transition-name: previously-saved;
}

/* Special transition for checkout sections - expand/collapse effect */
::view-transition-group(basket-items),
::view-transition-group(basket-summary),
::view-transition-group(personal-details),
::view-transition-group(address-details),
::view-transition-group(billing-address),
::view-transition-group(delivery-chooser),
::view-transition-group(payment),
::view-transition-group(payment-methods),
::view-transition-group(previously-saved) {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-duration: 0.4s;
}

::view-transition-old(basket-items),
::view-transition-old(basket-summary),
::view-transition-old(personal-details),
::view-transition-old(address-details),
::view-transition-old(billing-address),
::view-transition-old(delivery-chooser),
::view-transition-old(payment),
::view-transition-old(payment-methods),
::view-transition-old(previously-saved) {
  animation-name: collapse-section;
}

::view-transition-new(basket-items),
::view-transition-new(basket-summary),
::view-transition-new(personal-details),
::view-transition-new(address-details),
::view-transition-new(billing-address),
::view-transition-new(delivery-chooser),
::view-transition-new(payment),
::view-transition-new(payment-methods),
::view-transition-new(previously-saved) {
  animation-name: expand-section;
}

@keyframes collapse-section {
  from {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
  to {
    opacity: 0;
    transform: scaleY(0.92);
    transform-origin: top;
  }
}

@keyframes expand-section {
  from {
    opacity: 0;
    transform: scaleY(0.92);
    transform-origin: top;
  }
  to {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* ============================================
   GLOBAL STYLES
   ============================================ */

/* Keep media and embeds inside the viewport on phones. */
img, video, iframe, canvas { max-width: 100%; }

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  background: var(--color-surface);
  color: var(--color-gray-800);
  background-color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-tight);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing-heading);
}

/* Larger headings tighten proportionally from the base heading letter-spacing so
   a tenant's "wide/normal/tight" choice still propagates but h1/h2 stay optically
   correct relative to h3-h6. */
h1 { font-size: var(--font-size-5xl); margin-bottom: var(--space-6); letter-spacing: calc(var(--letter-spacing-heading) - 0.01em); }
h2 { font-size: var(--font-size-4xl); margin-bottom: var(--space-5); letter-spacing: calc(var(--letter-spacing-heading) - 0.005em); }
h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-4); }
h4 { font-size: var(--font-size-xl); margin-bottom: var(--space-4); }
h5 { font-size: var(--font-size-lg); margin-bottom: var(--space-3); }
h6 { font-size: var(--font-size-base); margin-bottom: var(--space-3); }

a {
  color: var(--color-primary-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-text-hover);
}

/* Inline SVG icons (fragment/icons.html) - sized and coloured like a Font Awesome <i>:
   1em tall, width from the viewBox, filled with the current text colour. */
.nova-icon {
  display: inline-block;
  height: 1em;
  width: auto;
  overflow: visible;
  vertical-align: -0.125em;
  fill: currentColor;
  flex-shrink: 0;
}

/* Font Awesome's stylesheet loads without blocking render (fragment/head.html). Until it arrives, give
   FA's empty <i> elements a 1em box so icons don't shift the text around them when they appear. */
html:not(.fa-loaded) :is(.fa, .fas, .far, .fab, .fal) {
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* ============================================
   CONTAINER & LAYOUT
   ============================================ */

.nova-container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.nova-section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.nova-section-lg {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.nova-section-xl {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

/* ============================================
   TABLES
   ============================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}

thead {
  border-bottom: 2px solid var(--color-gray-200);
}

th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-gray-700);
  border-bottom: 1px solid var(--color-gray-100);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* Phones: a wide table in page content scrolls inside itself rather than widening the page.
   Scoped to content areas; checkout and account tables lay themselves out. */
@media (max-width: 767px) {
  .nova-page-main table,
  .nova-html-content table,
  .json-component-wrapper table,
  .nova-faq-answer table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nova-page-main th,
  .nova-page-main td {
    padding: var(--space-2) var(--space-3);
  }
}

/* ============================================
   PRODUCT GRID
   ============================================ */

.nova-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

/* Mobile: Force 2 columns with smaller cards */
@media (max-width: 767px) {
  .nova-product-grid {
    /* minmax(0, ...) so a long unbreakable word can't stretch a column past the viewport */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
    margin-bottom: var(--space-6);
  }
}

@media (min-width: 768px) {
  .nova-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .nova-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .nova-product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Fixed desktop column count, set by the collectionProductGrid extension's "columns" option */
@media (min-width: 1024px) {
  .nova-product-grid.nova-product-grid--cols {
    grid-template-columns: repeat(var(--nova-grid-columns, 4), minmax(0, 1fr));
  }
}

/* ============================================
   PRODUCT CARD
   ============================================ */

.nova-product-card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-gray-100);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nova-product-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-6px);
  border-color: var(--color-gray-200);
}

.nova-product-card:hover .fa-arrow-right {
  color: var(--color-primary-text);
  transform: translateX(4px);
}

.nova-product-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: var(--product-image-ratio);
  overflow: hidden;
  background-color: var(--color-gray-50);
}

.nova-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.nova-product-card:hover .nova-product-card__image {
  transform: scale(1.05);
}

.nova-product-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  /* Sit above the product image: on hover the image gets `transform: scale()`,
     which makes it establish its own stacking context. Without an explicit
     z-index the badge (positioned, z-auto) and the transformed image paint in
     the same group in DOM order — and the image comes later in the DOM, so it
     would cover the badge on hover. A positive z-index keeps the badge on top. */
  z-index: 2;
  background: var(--color-error);
  color: var(--color-on-error);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ----- Listing-card image scrubbing (product-image-scrub.js) -----
   The overlay frame and the indicator are created by JS only when a product has more than one
   image and the feature is enabled for the site; with JS off, a single image, or the feature
   disabled the card is completely untouched. */
.nova-scrub__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  /* Cross-fade between fully-loaded, stacked layers — no src swapping, so no white flash. */
  transition: opacity 0.22s ease;
  z-index: 1;
}

.nova-scrub__frame.is-shown {
  opacity: 1;
}

/* The primary image steps aside while another frame shows, so it can never show through. */
.nova-scrub__primary {
  transition: opacity 0.22s ease;
}

.nova-scrub--away .nova-scrub__primary {
  opacity: 0;
}

.nova-scrub__bar {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  gap: 4px;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 2;
}

.nova-scrub--engaged .nova-scrub__bar {
  opacity: 1;
}

.nova-scrub__seg {
  flex: 1 1 0;
  height: 3px;
  max-width: 48px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: background-color var(--transition-fast);
}

.nova-scrub__seg.is-active {
  background: #ffffff;
}

/* Touch devices: render the position indicator as centred dots rather than a full-width bar. */
@media (pointer: coarse) {
  .nova-scrub__seg {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    max-width: none;
    background: rgba(255, 255, 255, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nova-scrub__frame,
  .nova-scrub__seg,
  .nova-scrub__bar {
    transition: none;
  }
}

.nova-product-card__content {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nova-product-card__manufacturer {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nova-product-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-tight);
}

/* The description keeps its clamped height and the auto margin below it takes the card's spare height,
   so the footer still sits at the bottom. Letting the clamped box grow instead (flex: 1) showed part of the
   hidden third line under the ellipsis whenever a neighbouring card in the row was taller. */
.nova-product-card__description {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: auto;
  flex: 0 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nova-product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-200);
}

.nova-product-card__price-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nova-product-card__price-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
}

.nova-product-card__price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.nova-product-card__compare-price {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  text-decoration: line-through;
}

.nova-product-card__actions {
  margin-top: var(--space-4);
}

/* ----- Phone cards -----
   Two narrow columns: trim the body padding, scale the type down a step and make the CTA
   fit ("Add to Basket" must not clip) while keeping a 44px tap target. */
@media (max-width: 767px) {
  .nova-product-card {
    border-radius: var(--radius-lg);
  }

  .nova-product-card__content {
    padding: var(--space-3);
  }

  .nova-product-card__manufacturer {
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nova-product-card__title {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-1);
    overflow-wrap: anywhere;
  }

  .nova-product-card__description {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
  }

  .nova-product-card__footer {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
  }

  .nova-product-card__price {
    font-size: var(--font-size-xl);
  }

  .nova-product-card__actions {
    margin-top: var(--space-3);
  }

  .nova-product-card__actions .nova-btn {
    min-height: 44px;
    padding: var(--space-2);
    font-size: var(--font-size-sm);
    gap: var(--space-1);
    white-space: normal;
    text-align: center;
    line-height: var(--line-height-tight);
  }

  .nova-product-card__cta {
    min-height: 44px;
  }

  .nova-product-card__badge {
    top: var(--space-2);
    right: var(--space-2);
  }
}

/* No hover on touch: don't leave a card lifted after a tap */
@media (hover: none) {
  .nova-product-card:hover {
    transform: none;
  }

  .nova-product-card:hover .nova-product-card__image {
    transform: none;
  }
}

/* ----- Compact (fashion-style) card variant -----
   A denser layout for fashion / high-SKU catalogues: no mini description, tighter
   padding, a smaller grid gap, a flat surface and a text-link CTA instead of a
   full-width button. Opt in via the `productCardStyle` site config ( = "compact" );
   the listing templates add `--compact` modifier classes on the grid and each card. */

.nova-product-grid--compact {
  gap: var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

@media (max-width: 767px) {
  .nova-product-grid--compact {
    gap: var(--space-3);
  }
}

.nova-product-card--compact {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.nova-product-card--compact:hover {
  box-shadow: var(--shadow-sm);
  transform: none;
  border-color: var(--color-gray-300);
}

.nova-product-card--compact .nova-product-card__content {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.nova-product-card--compact .nova-product-card__manufacturer {
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-1);
}

.nova-product-card--compact .nova-product-card__title {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* When the dense layout keeps a description (productCardStyle = "compact-detailed"):
   one muted line with ellipsis overflow, not the standard card's two. */
.nova-product-card--compact .nova-product-card__description {
  flex: 0 0 auto;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  -webkit-line-clamp: 1;
}

.nova-product-card--compact .nova-product-card__footer {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.nova-product-card--compact .nova-product-card__price {
  font-size: var(--font-size-lg);
}

/* Text-link call-to-action used on compact cards (the card body carries the click-through) */
.nova-product-card__cta {
  align-self: flex-start;
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nova-product-card__cta::after {
  content: '\203A'; /* › */
  font-size: 1.2em;
}

.nova-product-card__cta:hover {
  color: var(--color-primary-text-hover);
}

/* ============================================
   BUTTONS
   nova-btn: the button class of Nova's own templates, JSON components and tenant content. Its values
   come from the --button-* tokens a theme sets on .nova-btn (the list is in the "ui: button" section
   near the end). These rules stay here, not in that section: Nova's own component rules further down
   sit on the same elements (.nova-price__go, .nova-sticky-buybar__btn ...) and must keep winning
   ties. A variant falls back to the base token where the theme's base rule used to win over Nova's
   (box-shadow, font-weight, border).
   ============================================ */

.nova-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height, auto);
  padding: var(--button-padding, var(--space-3) var(--space-6));
  font-size: var(--button-font-size, var(--font-size-base));
  font-weight: var(--button-font-weight, var(--font-weight-semibold));
  line-height: 1;
  border-radius: var(--button-radius, var(--radius-lg));
  border: var(--button-border, none);
  box-shadow: var(--button-shadow, none);
  cursor: pointer;
  transition: var(--button-transition, all var(--transition-fast));
  text-decoration: none;
  white-space: nowrap;
}

.nova-btn:disabled {
  opacity: var(--button-disabled-opacity, 0.5);
  cursor: not-allowed;
}

.nova-btn-primary {
  background: var(--button-primary-bg, var(--color-primary));
  color: var(--button-primary-color, var(--color-on-primary));
  font-weight: var(--button-primary-font-weight, var(--button-font-weight, var(--font-weight-semibold)));
  box-shadow: var(--button-primary-shadow, var(--button-shadow, 0 1px 3px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 1px 2px color-mix(in srgb, var(--color-primary) 20%, transparent)));
}

.nova-btn-primary:hover:not(:disabled) {
  background: var(--button-primary-hover-bg, var(--color-primary-dark));
  color: var(--button-primary-hover-color, var(--color-on-primary));
  box-shadow: var(--button-primary-hover-shadow, 0 4px 14px color-mix(in srgb, var(--color-primary) 40%, transparent), 0 2px 6px color-mix(in srgb, var(--color-primary) 20%, transparent));
  transform: var(--button-primary-hover-transform, translateY(-2px));
}

.nova-btn-secondary {
  background: var(--button-secondary-bg, var(--color-gray-100));
  color: var(--button-secondary-color, var(--color-gray-900));
}

.nova-btn-secondary:hover:not(:disabled) {
  background: var(--button-secondary-hover-bg, var(--color-gray-200));
}

.nova-btn-outline {
  background: var(--button-outline-bg, transparent);
  color: var(--button-outline-color, var(--color-primary-text));
  border: var(--button-border, 2px solid var(--button-outline-border-color, var(--color-primary-text)));
}

.nova-btn-outline:hover:not(:disabled) {
  background: var(--button-outline-hover-bg, var(--color-primary));
  color: var(--button-outline-hover-color, var(--color-on-primary));
}

.nova-btn-error {
  background: var(--button-error-bg, var(--color-error));
  color: var(--button-error-color, var(--color-on-error));
  box-shadow: var(--button-error-shadow, var(--button-shadow, var(--shadow-sm)));
}

.nova-btn-error:hover:not(:disabled) {
  background: var(--button-error-hover-bg, var(--color-error-dark));
  box-shadow: var(--button-error-hover-shadow, var(--shadow-md));
  transform: var(--button-error-hover-transform, translateY(-1px));
}

.nova-btn-sm {
  padding: var(--button-sm-padding, var(--space-2) var(--space-4));
  font-size: var(--button-sm-font-size, var(--font-size-sm));
}

.nova-btn-lg {
  padding: var(--button-lg-padding, var(--space-4) var(--space-8));
  font-size: var(--button-lg-font-size, var(--font-size-lg));
}

.nova-btn-block {
  display: flex;
  width: 100%;
}

.nova-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap, var(--space-2));
}

/* ============================================
   PRODUCT DETAIL PAGE
   ============================================ */

.nova-product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
  margin-bottom: var(--space-12);
}

@media (min-width: 1024px) {
  .nova-product-detail {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

.nova-product-detail__gallery {
  position: sticky;
  top: var(--space-8);
  align-self: start;
}

/* Disable sticky positioning on mobile/tablet to prevent gallery floating over content */
@media (max-width: 1023px) {
  .nova-product-detail__gallery {
    position: static;
  }
}

/* ── Product Gallery (Splide + PhotoSwipe) ── */

.nova-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Main slider slides — fixed aspect ratio prevents CLS (1:1 by default, see --product-image-ratio) */
#main-slider .splide__slide {
  width: 100%;
  aspect-ratio: var(--product-image-ratio);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.nova-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Desktop hover-zoom */
@media (hover: hover) {
  .nova-gallery__zoom-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .nova-gallery__zoom-wrap:hover .nova-gallery__image {
    transform: scale(2);
  }
}

/* Video slides */
.nova-gallery__video-wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--product-image-ratio);
  background: var(--color-gray-900);
}

/* Thumbnails */
#thumb-slider .splide__slide {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

#thumb-slider .splide__slide:hover {
  opacity: 0.9;
}

#thumb-slider .splide__slide.is-active {
  border-color: var(--color-primary);
  opacity: 1;
}

.nova-gallery__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-base);
}

.nova-gallery__thumb--video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-200);
  color: var(--color-gray-600);
  font-size: var(--font-size-lg);
}

/* Hide thumbnail strip when only one image */
#thumb-slider:has(.splide__slide:only-child) {
  display: none;
}

/* Main slider needs relative positioning for arrow overlay */
#main-slider {
  position: relative;
}

/* Splide arrow positioning — splide-core.min.css has no arrow layout */
#main-slider .splide__arrows {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

#main-slider .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-sm);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

#main-slider .splide__arrow--prev {
  left: var(--space-3);
}

#main-slider .splide__arrow--next {
  right: var(--space-3);
}

#main-slider:hover .splide__arrow {
  opacity: 1;
}

#main-slider .splide__arrow:hover {
  background: #FFFFFF;
  box-shadow: var(--shadow-md);
}

#main-slider .splide__arrow svg {
  fill: var(--color-gray-700);
  width: 16px;
  height: 16px;
}

#main-slider .splide__arrow--prev svg {
  transform: scaleX(-1);
}

/* Always show arrows on touch devices (no hover) */
@media (hover: none) {
  #main-slider .splide__arrow {
    opacity: 0.7;
  }
}

/* ── Image loading placeholders ──
   Each gallery image fades in once it actually paints, over a shimmering skeleton box.
   product-gallery.js adds --loading to an image's slot/tile while the image is in flight and
   removes it on load (or error); with JS off the images are simply visible. Because every
   slot already reserves its space (aspect-ratio), an image that finishes loading out of order
   — common when swapping variants — fades into its own slot instead of collapsing the column
   and shoving the others out of view. */
.nova-gallery__media--loading {
  position: relative;
}

.nova-gallery__media--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-50) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

.nova-gallery__media--loading .nova-gallery__image,
.nova-gallery__media--loading .nova-gallery__thumb {
  opacity: 0;
}

/* ══════════════════════════════════════════════════════════════════
   Gallery modes (productGalleryExtension). The carousel rules above are
   the default mode; the blocks below layer on the alternative layouts
   selected via .nova-gallery--{mode} / data-gallery-mode.
   ══════════════════════════════════════════════════════════════════ */

/* ── Fashion Grid: every photo in a responsive, zoomable grid ── */
.nova-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.nova-gallery__grid-item {
  display: block;
  aspect-ratio: var(--product-image-ratio);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Give the zoom wrap a definite size on touch too (the hover-only rule
   above doesn't fire), so the image fills its square tile. */
.nova-gallery__grid-item .nova-gallery__zoom-wrap {
  width: 100%;
  height: 100%;
}

.nova-gallery__grid .nova-gallery__image {
  object-fit: cover;
}

/* Stay a 2-up grid on phones — collapsing to one column would make the grid
   indistinguishable from the Editorial Stack and twice as long. Just tighten the gap. */
@media (max-width: 575px) {
  .nova-gallery__grid {
    gap: var(--space-2);
  }
}

/* ── Spotlight + Filmstrip: large image beside a vertical thumb strip ── */
/* On mobile this stays the base flex-column (main on top, thumbs below). */
@media (min-width: 768px) {
  .nova-gallery--spotlight {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .nova-gallery--spotlight #main-slider {
    flex: 1 1 auto;
    min-width: 0;
  }
  .nova-gallery--spotlight #thumb-slider {
    flex: 0 0 72px;
    width: 72px;
  }
}

/* ── Editorial Stack: full-width images in a single scrolling column ── */
.nova-gallery--stack .nova-gallery__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nova-gallery__stack-item {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-gray-50);
}

/* Full-width, natural-height images (no square crop) for the lookbook flow */
.nova-gallery--stack .nova-gallery__image {
  height: auto;
  object-fit: cover;
}

/* The desktop stack shows images at their natural height, so an unloaded item has zero
   height and the whole column collapses until images arrive — then they pop in out of order.
   While loading, reserve a box at the configured product ratio (the best guess for the real
   shape, so the settle on load is minimal); release to natural height once painted. Mobile
   stack cards are already a fixed 3/4, so this only bites the desktop natural-height flow. */
.nova-gallery__stack-item.nova-gallery__media--loading {
  aspect-ratio: var(--product-image-ratio);
}

.nova-gallery--stack .nova-gallery__media--loading .nova-gallery__image {
  height: 100%;
}

.nova-gallery--stack .nova-gallery__video-wrap {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* On phones the Editorial Stack becomes a swipeable horizontal gallery (one portrait
   card at a time, the next peeking in) — distinct from the Fashion Grid and about one
   screen tall rather than N screens. Pure CSS scroll-snap; PhotoSwipe still works. */
@media (max-width: 767px) {
  .nova-gallery--stack .nova-gallery__stack {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nova-gallery--stack .nova-gallery__stack::-webkit-scrollbar {
    display: none;
  }
  .nova-gallery--stack .nova-gallery__stack-item {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }
  /* Uniform portrait cards for image slides; videos keep their 16/9 frame. */
  .nova-gallery--stack a.nova-gallery__stack-item {
    aspect-ratio: 3 / 4;
  }
  .nova-gallery--stack a.nova-gallery__stack-item .nova-gallery__image {
    height: 100%;
  }
}

.nova-product-detail__info {
  padding: var(--space-6);
}

.nova-product-detail__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  color: var(--color-gray-900);
}

.nova-product-detail__description {
  color: var(--color-gray-700);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-gray-200);
  margin-bottom: var(--space-6);
}

/* No stray divider when a product has no description */
.nova-product-detail__description:empty {
  display: none;
}

/* Rating - subtle and near description */
.nova-product-detail__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.nova-product-detail__rating-stars {
  display: flex;
  gap: var(--space-1);
}

.nova-product-detail__rating-stars .fa-star {
  color: var(--color-accent);
}

.nova-product-detail__rating-stars .fa-star.far {
  color: var(--color-gray-300);
}

.nova-product-detail__rating-text {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

/* Form wrapper */
.nova-product-detail__form {
  margin-top: var(--space-8);
}

/* Purchase Cluster - groups stock + CTA together (price now sits above it) */
.nova-product-detail__purchase-cluster {
  margin-top: var(--space-2);
  padding: var(--space-6);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
}

/* Price section — prominent, sits directly beneath the title */
.nova-product-detail__price-section {
  margin-bottom: var(--space-6);
}

.nova-product-detail__price-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nova-product-detail__price-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.nova-product-detail__price-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-medium);
  margin-right: var(--space-1);
}

.nova-product-detail__price {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.nova-product-detail__price-symbol {
  font-size: var(--font-size-2xl);
}

.nova-product-detail__compare-price-wrapper {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.nova-product-detail__compare-price-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.nova-product-detail__compare-price {
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
  text-decoration: line-through;
}

/* Stock status - compact, part of purchase cluster */
.nova-product-detail__stock-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
}

.nova-product-detail__stock-status i {
  font-size: var(--font-size-base);
}

.nova-product-detail__stock-status--in {
  color: var(--color-gray-700);
}

.nova-product-detail__stock-status--in i {
  color: var(--color-success);
}

.nova-product-detail__stock-status--out {
  color: var(--color-error);
}

.nova-product-detail__stock-status--out i {
  color: var(--color-error);
}

.nova-product-detail__stock-status--unlimited {
  color: var(--color-gray-700);
}

.nova-product-detail__stock-status--unlimited i {
  color: var(--color-gray-400);
}

.nova-product-detail__stock-quantity {
  color: var(--color-gray-500);
  font-weight: var(--font-weight-normal);
}

/* Disabled button message */
.nova-product-detail__disabled-message {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  text-align: center;
}

/* ── Mobile / tablet PDP: one gutter, full-bleed gallery, 16px fields, 44px taps ──
   The page container already supplies the side gutter, so the info column adds none of its own
   (it used to stack a second 24px on top). Grid children get min-width:0 so a wide gallery
   track can't push the page past the viewport. Brock overrides the gallery/buy box markup
   (.brock-pdp), so none of this reaches it. */
@media (max-width: 1023px) {
  .nova-product-detail {
    gap: var(--space-5);
    margin-top: 0;
    margin-bottom: var(--space-8);
  }

  .nova-product-detail > * {
    min-width: 0;
  }

  /* Edge-to-edge gallery: every pixel of width goes to the product */
  .nova-product-detail__gallery {
    margin-inline: calc(var(--container-padding) * -1);
  }

  .nova-product-detail__gallery #main-slider .splide__slide {
    border-radius: 0;
  }

  .nova-product-detail__gallery #thumb-slider {
    padding-inline: var(--container-padding);
  }

  #main-slider .splide__arrow {
    width: 44px;
    height: 44px;
  }

  .nova-product-detail__info {
    padding: 0;
  }

  .nova-product-detail__title {
    font-size: clamp(1.625rem, 7vw, 2rem);
    margin-bottom: var(--space-3);
  }

  .nova-product-detail__purchase-cluster {
    padding: var(--space-4);
  }

  .nova-product-detail__description {
    font-size: var(--font-size-base);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
  }

  .nova-product-detail .nova-input,
  .nova-product-detail select,
  .nova-product-detail textarea {
    font-size: 16px;
    min-height: 48px;
  }

  .nova-product-detail .nova-quantity-selector--amount .nova-input {
    width: 120px !important;
  }

  .nova-variant-btn {
    height: 44px;
    min-width: 48px;
  }

  /* The donation card sits inside the (now gutter-only) info column: don't pad it a second time */
  .nova-donation-form {
    padding: var(--space-4) !important;
    margin: var(--space-4) 0 !important;
  }
}

/* Donation preference rows (shared by the donation form and the fundraiser widget): full-width
   44px tap rows with a comfortable checkbox, and 16px text fields so iOS doesn't zoom on focus. */
@media (max-width: 1023px) {
  .nova-donation-check {
    min-height: 44px;
    margin-bottom: 0 !important;
    gap: var(--space-3) !important;
  }

  .nova-donation-check__box {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
    margin-top: 0 !important;
  }

  .nova-donation-check span {
    font-size: var(--font-size-base) !important;
  }

  .nova-donation-field {
    font-size: 16px !important;
    min-height: 48px;
  }

  textarea.nova-donation-field {
    min-height: 96px;
  }
}

/* ============================================
   STICKY BUY BAR
   Condensed price + add-to-basket that slides in once the in-page buy box
   leaves the viewport. Bottom bar on mobile, top bar (under the nav) on
   desktop. Visibility + the desktop top offset are driven by
   js/sticky-buybar.js.
   ============================================ */
.nova-sticky-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;                 /* mobile default: dock to the bottom */
  z-index: 1030;             /* under the offcanvas menu and its backdrop (1040/1045) */
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-gray-200);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--transition-base), visibility var(--transition-base);
}

/* Double class keeps this winning over the desktop @media base transform
   regardless of source order — without it the bar never slides into view. */
.nova-sticky-buybar.nova-sticky-buybar--visible {
  transform: translateY(0);
  visibility: visible;
}

.nova-sticky-buybar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.nova-sticky-buybar__media {
  flex-shrink: 0;
  display: none;             /* hidden on mobile to save width */
}

.nova-sticky-buybar__media img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
}

.nova-sticky-buybar__details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;              /* allow the name/variant to truncate */
  flex: 1 1 auto;
}

.nova-sticky-buybar__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Variant chip is a button: tap it to jump back to the in-page selectors */
.nova-sticky-buybar__variant {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.nova-sticky-buybar__variant-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nova-sticky-buybar__variant i {
  font-size: 0.8em;
  color: var(--color-gray-400);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.nova-sticky-buybar__variant:hover,
.nova-sticky-buybar__variant:hover i {
  color: var(--color-primary-text);
}

/* Brief highlight when the shopper jumps back to the selectors from the bar */
@keyframes nova-variant-attention {
  0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
  25%  { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

.nova-variant-attention {
  border-radius: var(--radius-md);
  animation: nova-variant-attention 1.4s ease-out;
}

.nova-sticky-buybar__price {
  display: flex;
  align-items: baseline;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  white-space: nowrap;
}

.nova-sticky-buybar__price .nova-product-detail__price-symbol {
  font-size: var(--font-size-base);
}

.nova-sticky-buybar__btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Looks disabled but stays clickable, so a tap can bounce to the selectors */
.nova-sticky-buybar__btn[aria-disabled="true"] {
  opacity: 0.55;
  box-shadow: none;
}

.nova-sticky-buybar__btn[aria-disabled="true"]:hover {
  background: var(--color-primary);
  transform: none;
}

/* Reserve space on mobile so the fixed bottom bar never hides page content */
@media (max-width: 1023px) {
  body.nova-buybar-active {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* Clear the iPhone home indicator and keep a 44px CTA */
  .nova-sticky-buybar__inner {
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  .nova-sticky-buybar__btn {
    min-height: 44px;
  }
}

/* Tight phones: drop the name/variant block so price + CTA stay uncramped */
@media (max-width: 420px) {
  .nova-sticky-buybar__details {
    display: none;
  }
}

/* Desktop: dock to the top, below the (optionally sticky) nav — js sets `top` */
@media (min-width: 1024px) {
  .nova-sticky-buybar {
    bottom: auto;
    top: 0;
    z-index: 900;            /* tuck under the sticky nav (z-index 1000) */
    border-top: none;
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-100%);
  }

  .nova-sticky-buybar__media {
    display: block;
  }

  .nova-sticky-buybar__name {
    font-size: var(--font-size-base);
  }

  .nova-sticky-buybar__variant {
    font-size: var(--font-size-sm);
  }

  .nova-sticky-buybar__price {
    font-size: var(--font-size-xl);
    margin-left: var(--space-4);
  }

  .nova-sticky-buybar__btn {
    margin-left: var(--space-4);
  }
}

/* Variant selector groups */
.nova-variant-group {
  margin-bottom: var(--space-5);
}

/* Label row: "Colour: Black" — name bold, value muted */
.nova-variant-label-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.nova-variant-label {
  display: inline;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nova-variant-label-value {
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

/* Prompt shown when another selection cleared this group's choice (variant.choosePrompt, set by variants.js) */
.nova-variant-label-value:empty::after {
  content: attr(data-prompt);
  font-style: italic;
  color: var(--color-primary-text);
}

/* Button group */
.nova-variant-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  animation: variant-fade-in 0.15s ease-out;
}

@keyframes variant-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nova-variant-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 40px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  background: white;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
  user-select: none;
  overflow: hidden;
  line-height: 1;
  white-space: nowrap;
}

/* A colour option's dot before its name (VariantDisplayer swatches), drawn as a swatch filter's .bdgr-swatch */
.nova-variant-btn--swatch {
  padding-left: var(--space-2);
}
.nova-variant-btn__swatch {
  --bdgr-swatch-size: 20px;
  margin-right: var(--space-2);
  flex-shrink: 0;
}
.nova-variant-btn--selected .nova-variant-btn__swatch {
  outline: 2px solid var(--color-on-primary);
}
.nova-variant-btn--disabled .nova-variant-btn__swatch {
  opacity: 0.45;
}

/* The option's price, when the group alone decides it (ticket types, pack sizes) */
.nova-variant-btn__price {
  margin-left: var(--space-2);
  font-weight: var(--font-weight-normal);
  opacity: 0.75;
}

.nova-variant-btn:hover:not(.nova-variant-btn--disabled):not(.nova-variant-btn--selected) {
  border-color: var(--color-gray-500);
  color: var(--color-gray-900);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.nova-variant-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.nova-variant-btn--selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Disabled — muted with a diagonal strikethrough. Still clickable: clicking
   an unavailable option clears the conflicting selection so the user can
   reach a valid combination rather than being trapped. */
.nova-variant-btn--disabled {
  color: var(--color-gray-400);
  background: var(--color-gray-50);
  border-color: var(--color-gray-200);
  cursor: pointer;
}

.nova-variant-btn--disabled:hover {
  border-color: var(--color-gray-300);
  background: white;
  transform: none;
  box-shadow: none;
}

/* A clear strikethrough that stays visible against the muted background. */
.nova-variant-btn--disabled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    var(--color-gray-500) calc(50% - 1px),
    var(--color-gray-500) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

/* A disabled button can still be the active selection (the user clicked it
   while it was greyed). Keep the primary fill so they can see what they
   picked, but show the strikethrough in a contrast colour so it remains
   visible against the indigo. */
.nova-variant-btn--disabled.nova-variant-btn--selected {
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.nova-variant-btn--disabled.nova-variant-btn--selected::after {
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    rgba(255, 255, 255, 0.7) calc(50% - 1px),
    rgba(255, 255, 255, 0.7) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

/* A group the shopper still has to choose, after pressing Add to basket too early */
.nova-variant-group--missing .nova-variant-label { color: var(--color-error); }
.nova-variant-group--missing .nova-variant-btn:not(.nova-variant-btn--disabled) { border-color: var(--color-error); }

/* Variant loading skeleton */
.nova-variant-loading {
  margin-bottom: var(--space-4);
}

.nova-variant-skeleton-label {
  height: 14px;
  width: 72px;
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-50) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-loading 1.5s ease-in-out infinite;
  margin-bottom: var(--space-3);
}

.nova-variant-skeleton-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.nova-variant-skeleton-btn {
  height: 40px;
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-50) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

.nova-variant-skeleton-btn:nth-child(1) { width: 52px; }
.nova-variant-skeleton-btn:nth-child(2) { width: 68px; }
.nova-variant-skeleton-btn:nth-child(3) { width: 52px; }
.nova-variant-skeleton-btn:nth-child(4) { width: 60px; }
.nova-variant-skeleton-btn:nth-child(5) { width: 44px; }

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Quantity selector */
.nova-quantity-selector {
  margin-bottom: var(--space-4);
}

.nova-quantity-select {
  width: auto;
  min-width: 80px;
  padding-right: var(--space-8);
  font-weight: var(--font-weight-medium);
}

/* Social section */
.nova-product-detail__social {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-gray-200);
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.nova-breadcrumb {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nova-breadcrumb::-webkit-scrollbar {
  display: none;
}

.nova-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

.nova-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: var(--color-gray-500);
}

.nova-breadcrumb__item + .nova-breadcrumb__item::before {
  content: "›";
  margin-right: var(--space-2);
  color: var(--color-gray-400);
  font-weight: var(--font-weight-medium);
}

.nova-breadcrumb__link {
  color: var(--color-gray-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nova-breadcrumb__link:hover,
.nova-breadcrumb__link:focus-visible {
  color: var(--color-primary-text);
  text-decoration: underline;
}

.nova-breadcrumb__current {
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Phones: a ~44px tap area on crumb links. An absolutely positioned pseudo-element grows the hit area
   without touching layout, so the trail keeps its height (every Nova-family theme shares this rule). */
@media (max-width: 767px) {
  .nova-breadcrumb__link {
    position: relative;
  }

  .nova-breadcrumb__link::before {
    content: '';
    position: absolute;
    inset: -14px -6px;
  }
}

/* Content-page (/p/...) trail: rendered by the nav fragment between the header and any hero, so it is
   tighter than the collection/product one and adds no space of its own when absent. */
.nova-page-crumbs .nova-breadcrumb {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

/* ============================================
   COLLECTION HEADER
   ============================================ */

.nova-collection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-gray-200);
}

/* Title switched off in the collectionProductGrid extension: keep the sort control on the right */
.nova-collection-header--no-title {
  justify-content: flex-end;
}

.nova-collection-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0;
}

.nova-collection-sort {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* The label and select sit in a <form> inside .nova-collection-sort on some templates: lay that out too */
.nova-collection-sort > form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.nova-collection-sort__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin: 0;
  white-space: nowrap;
}

/* Same look as a form select (select.nova-input): the label's type size, our chevron instead of the
   browser's, and the theme's input border and radius */
.nova-collection-sort__select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--color-surface, #FFFFFF);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234B5563' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px;
  color: var(--color-gray-900);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.nova-collection-sort__select:hover {
  border-color: var(--color-primary);
}

.nova-collection-sort__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* Phones: title above a full-width sort control instead of side by side */
@media (max-width: 767px) {
  .nova-collection-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
  }

  .nova-collection-header--no-title {
    align-items: stretch;
  }

  .nova-collection-title {
    font-size: var(--font-size-3xl);
    overflow-wrap: anywhere;
  }

  /* Covers both shapes: <div class="nova-collection-sort"><form> and <form class="nova-collection-sort"> */
  .nova-collection-sort,
  .nova-collection-sort > form {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
  }

  .nova-collection-sort > form {
    margin: 0;
  }

  .nova-collection-sort__label {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .nova-collection-sort__select {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 44px;
    /* 16px stops iOS zooming the page on focus */
    font-size: 16px;
  }
}

/* ============================================
   COLLECTION CHILD CATEGORY LINKS
   ============================================ */

.nova-child-categories {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  /* Single row that scrolls horizontally rather than wrapping down the page. */
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.nova-child-category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* Don't let pills shrink — they keep their size and the row scrolls instead. */
  flex: 0 0 auto;
  white-space: nowrap;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-gray-700);
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.nova-child-category:hover,
.nova-child-category:focus {
  color: var(--color-primary-text);
  background: #FFFFFF;
  border-color: var(--color-primary);
  text-decoration: none;
}

.nova-child-category:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* "Up one level" pill — ghost styling so it reads as navigation back up the tree,
   visually distinct from the filled drill-down children beside it. */
.nova-child-category--up {
  color: var(--color-gray-500);
  background: transparent;
  border-color: var(--color-gray-300);
  font-weight: var(--font-weight-normal);
}

@media (max-width: 767px) {
  .nova-child-categories {
    margin-bottom: var(--space-5);
  }

  .nova-child-category {
    min-height: 44px;
  }
}

/* ============================================
   COLLECTION LAYOUT + FACET RAIL
   ============================================ */

.nova-collection-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.nova-facet-rail {
  flex: 0 0 240px;
  /* Lock the rail at its basis: without this, a long unbreakable facet name
     raises the rail's min-content width and a 0-shrink flex item expands past
     240px, squeezing (and eventually hiding) the product grid. */
  min-width: 0;
  max-width: 240px;
  position: sticky;
  top: var(--space-6);
}

.nova-collection-content {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 1023px) {
  .nova-collection-layout {
    flex-direction: column;
    gap: var(--space-4);
  }
  .nova-facet-rail {
    flex: none;
    width: 100%;
    max-width: none;
    position: static;
  }
}

.nova-collection-empty {
  color: var(--color-gray-500);
  font-size: var(--font-size-lg);
  padding: var(--space-10) 0;
}

.nova-collection-count {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-4);
}

/* Category page: "Shop {category} by brand", links to its brand landing pages (fragment/landing-links).
   Used by every Nova-family theme, so only theme tokens. */
.nova-landing-links {
  max-width: var(--container-max-width);
  margin: var(--space-8) auto;
  padding: 0 var(--container-padding);
}

.nova-landing-links__group + .nova-landing-links__group {
  margin-top: var(--space-6);
}

.nova-landing-links__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-3);
}

.nova-landing-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nova-landing-links__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  color: var(--color-gray-800);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.nova-landing-links__link:hover,
.nova-landing-links__link.is-current {
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

.nova-landing-links__count {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
}

/* Category page: its description, and the search-in-this-category box (a GET form to the page's own URL) */
.nova-collection-desc {
  max-width: 70ch;
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.nova-scope-search {
  display: flex;
  align-items: stretch;
  max-width: 420px;
  margin: var(--space-3) 0 0;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.nova-scope-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ring, rgba(79, 70, 229, 0.18));
}

.nova-scope-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-gray-900);
  font-size: 16px;
  outline: none;
}

.nova-scope-search__btn {
  flex: none;
  width: 42px;
  border: 0;
  background: transparent;
  color: var(--color-gray-700);
  cursor: pointer;
}

.nova-facets__active {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.nova-facets__active-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

.nova-facets__active-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.nova-facets__clear {
  font-size: var(--font-size-sm);
  color: var(--color-primary-text);
  text-decoration: none;
}

.nova-facets__clear:hover {
  text-decoration: underline;
}

.nova-facets__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.nova-facet-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--font-size-sm);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  color: var(--color-gray-800);
  max-width: 100%;
}

.nova-facet-chip__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nova-facet-chip__x {
  color: var(--color-gray-500);
  text-decoration: none;
  font-size: var(--font-size-base);
  line-height: 1;
}

.nova-facet-chip__x:hover {
  color: var(--color-error);
}

.nova-facet-group {
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
  padding-bottom: var(--space-3);
}

.nova-facet-group:last-child {
  border-bottom: none;
}

.nova-facet-group__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  cursor: pointer;
  padding: var(--space-1) 0;
  /* Leave room for the floated +/- marker and let long facet names wrap
     inside the now-bounded rail instead of overflowing it. */
  padding-right: var(--space-5);
  overflow-wrap: break-word;
  list-style: none;
}

.nova-facet-group__title::-webkit-details-marker {
  display: none;
}

.nova-facet-group__title::after {
  content: '\002B';
  float: right;
  color: var(--color-gray-400);
}

.nova-facet-group[open] > .nova-facet-group__title::after {
  content: '\2212';
}

.nova-facet-group__values {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.nova-facet-value__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  text-decoration: none;
}

.nova-facet-value__link:hover {
  color: var(--color-gray-900);
}

.nova-facet-value__box {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
}

.nova-facet-value.is-selected .nova-facet-value__box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.nova-facet-value.is-selected .nova-facet-value__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.nova-facet-value__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nova-facet-value__count {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
}

/* "More filters (n)": the groups past the rail's visible cap, closed until asked for */
.nova-facets-more {
  margin-bottom: var(--space-4);
}

.nova-facets-more__toggle {
  cursor: pointer;
  list-style: none;
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-text);
}

.nova-facets-more__toggle::-webkit-details-marker {
  display: none;
}

.nova-facets-more__toggle::after {
  content: ' \002B';
}

.nova-facets-more[open] > .nova-facets-more__toggle::after {
  content: ' \2212';
}

.nova-facets-more[open] > .nova-facets-more__toggle {
  margin-bottom: var(--space-3);
}

/* Price: min/max inputs under the buckets, a plain GET form */
.nova-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.nova-price__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 80px;
  min-width: 0;
  margin: 0;
}

.nova-price__caption {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.nova-price__input {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-surface, #FFFFFF);
}

.nova-price__input:focus-within {
  border-color: var(--color-primary);
}

.nova-price__symbol {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.nova-price__input input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 0;
  background: transparent;
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  outline: none;
}

.nova-price__go {
  min-height: 38px;
  padding: 0 var(--space-4);
}

/* Filters drawer: on phones the whole rail collapses behind one "Filters" summary
   (facet-rail.html opens/closes it from a matchMedia check; open by default without JS). */
.nova-facets__drawer-toggle {
  display: none;
}

@media (max-width: 1023px) {
  .nova-facets__drawer {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .nova-facets__drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 var(--space-4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    cursor: pointer;
    list-style: none;
  }

  .nova-facets__drawer-toggle::-webkit-details-marker {
    display: none;
  }

  .nova-facets__drawer-toggle::after {
    content: '\002B';
    color: var(--color-gray-400);
  }

  .nova-facets__drawer[open] > .nova-facets__drawer-toggle::after {
    content: '\2212';
  }

  .nova-facets__drawer[open] > .nova-facets__drawer-toggle {
    border-bottom: 1px solid var(--color-gray-200);
  }

  .nova-facets__drawer-body {
    padding: var(--space-4);
  }

  /* "Show N products": applies what was ticked in the drawer (facet-sheet.js), pinned to the
     bottom of the screen while the drawer is open */
  .nova-facets__apply {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: var(--space-4) calc(var(--space-4) * -1) calc(var(--space-4) * -1);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-surface);
  }

  .nova-facets__apply[hidden] {
    display: none;
  }

  .nova-facets__apply-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* 16px so iOS doesn't zoom the page when a price input takes focus */
  .nova-price__input input {
    min-height: 42px;
    font-size: 16px;
  }

  .nova-facet-group__title {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nova-facet-group__title::after {
    float: none;
  }

  .nova-facet-group__values {
    max-height: 320px;
  }

  .nova-facet-value__link {
    min-height: 44px;
    gap: var(--space-3);
    font-size: var(--font-size-base);
  }

  .nova-facet-value__box {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  .nova-facets__clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nova-facet-chip {
    min-height: 32px;
    padding: 2px var(--space-3);
  }

  .nova-facet-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    font-size: var(--font-size-lg);
  }
}

@media (min-width: 1024px) {
  .nova-facets__drawer-toggle {
    display: none;
  }
}

/* Quick filters (fragment/quick-filters): below 1024px, where Nova and every theme layered on it turn the
   rail into a panel, one row of pills above the results: "Filters (n)" and the top filter groups. Only the
   row scrolls sideways, never the page. Colours are the Nova tokens, which each theme redefines. */
.bdgr-quick-filters {
  display: none;
}

@media (max-width: 1023px) {
  .bdgr-quick-filters {
    display: block;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 var(--space-4, 16px);
  }

  .bdgr-quick-filters__list {
    display: flex;
    gap: var(--space-2, 8px);
    margin: 0;
    /* room for the focus ring, which the scroll box would otherwise clip */
    padding: 3px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .bdgr-quick-filters__list::-webkit-scrollbar {
    display: none;
  }

  .bdgr-quick-filters__item {
    flex: none;
    scroll-snap-align: start;
  }

  .bdgr-qf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--space-4, 16px);
    border: 1px solid var(--color-gray-300, #D1D5DB);
    border-radius: var(--radius-full, 9999px);
    background: transparent;
    color: var(--color-gray-900, #111827);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--transition-fast, 150ms ease), border-color var(--transition-fast, 150ms ease),
      color var(--transition-fast, 150ms ease);
  }

  .bdgr-qf:hover {
    border-color: var(--color-gray-900, #111827);
    color: var(--color-gray-900, #111827);
  }

  .bdgr-qf:focus-visible {
    outline: 2px solid var(--color-primary, #4F46E5);
    outline-offset: 2px;
  }

  /* a group with a selection, an applied toggle, and Filters once anything is applied */
  .bdgr-qf.is-active {
    border-color: var(--color-gray-900, #111827);
    background: var(--color-gray-900, #111827);
    color: var(--color-surface, #FFFFFF);
  }

  .bdgr-qf__icon {
    font-size: 0.9em;
  }

  .bdgr-qf__count {
    font-variant-numeric: tabular-nums;
  }

  /* Nova: the bar's Filters button opens and closes the drawer, so the drawer's own summary goes, and the
     folded drawer with it (it would be an empty bordered box) */
  .bdgr-quick-filters ~ .nova-collection-layout .nova-facets__drawer-toggle {
    display: none;
  }

  .bdgr-quick-filters ~ .nova-collection-layout .nova-facets__drawer:not([open]) {
    display: none;
  }

  /* the group a pill opens isn't tucked under the sticky header */
  .nova-facet-group {
    scroll-margin-top: var(--space-20, 80px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bdgr-qf {
    transition: none;
  }
}

/* Pagination (fragment/pagination.html styles its items inline, hence !important):
   wrap on narrow screens and give every item a 44px tap target. */
@media (max-width: 767px) {
  /* Nova's (class-less) wrapper only: the other Nova-family themes reuse the id with a class and their own spacing */
  #pagination-wrapper:not([class]) {
    margin-top: var(--space-8) !important;
  }

  .nova-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) !important;
  }

  .nova-pagination > li > a,
  .nova-pagination > li > span {
    min-width: 44px !important;
    height: 44px !important;
  }
}

/* ============================================
   NAVIGATION
   ============================================ */

.nova-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 100;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
}

.nova-nav--sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nova-nav__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--container-padding);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.nova-nav__logo {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.nova-nav__menu {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nova-nav__link {
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.nova-nav__link:hover {
  color: var(--color-primary-text);
  background: var(--color-gray-50);
}

/* ============================================
   DROPDOWN MENUS (multi-level navigation)
   ============================================ */

/* Desktop: override Bootstrap 5's ".navbar-nav .dropdown-menu { position: static }"
   which is designed for mobile-first navbars with .navbar-expand-*.
   Nova uses its own .nova-nav__desktop wrapper instead, so we restore absolute positioning. */
.nova-nav__desktop .dropdown-menu {
  position: absolute;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  /* No offset from the trigger: the panel must physically touch the nav link,
     otherwise the pointer crosses an un-hovered band on its way down and the
     :hover-driven dropdown closes under the cursor.  Nothing is lost visually —
     the panel already overlaps the nav bar's bottom padding, so this gap was
     never seen, it only ever created dead pixels. */
  margin-top: 0;
  min-width: 220px;
  background: #FFFFFF;
  animation: nova-dropdown-in 0.15s ease-out;
}

@keyframes nova-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nova-nav__desktop .dropdown-menu .dropdown-item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nova-nav__desktop .dropdown-menu .dropdown-item:hover {
  background: var(--color-gray-50);
  color: var(--color-primary-text);
}

.nova-nav__desktop .dropdown-menu .dropdown-divider {
  margin: var(--space-1) 0;
  border-top-color: var(--color-gray-100);
}

/* Desktop: submenus fly out to the right */
.nova-nav__desktop .dropdown-submenu {
  position: relative;
}

.nova-nav__desktop .dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: calc(-1 * var(--space-2));
  margin-left: 0;
  display: none;
}

.nova-nav__desktop .dropdown-submenu > .dropdown-menu.show {
  display: block;
}

/* Caret indicator for items with submenus */
.nova-nav__desktop .dropdown-submenu > .dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: auto;
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid currentColor;
  float: right;
  margin-top: 0.35em;
}

/* Desktop: hover-to-open dropdowns (excludes mega items — those are JS-controlled) */
@media (min-width: 1024px) {
  /* .nova-hover-hold is applied by menu.js on mouseleave and dropped again
     after a short delay, so a menu doesn't vanish the instant the pointer
     strays off it.  This is what makes the level-3 flyouts reachable: the
     path from a submenu trigger to its side flyout crosses sibling items,
     and without the grace period :hover is lost mid-traversal and the
     flyout closes under the cursor.  Purely additive — hover alone still
     opens these menus if the script never loads. */
  .nova-nav__desktop .nav-item.dropdown:not(.mega-menu-item):hover > .dropdown-menu,
  .nova-nav__desktop
    .nav-item.dropdown:not(.mega-menu-item).nova-hover-hold
    > .dropdown-menu {
    display: block;
  }

  .nova-nav__desktop .dropdown-submenu:hover > .dropdown-menu,
  .nova-nav__desktop .dropdown-submenu.nova-hover-hold > .dropdown-menu {
    display: block;
  }

  /* Hover bridge: extends the trigger's own hover region a few pixels below
     itself, so sub-pixel layout seams (fractional nav heights, browser zoom,
     fractional device pixel ratios) can't reopen the dead band that
     margin-top: 0 closes above.  Excludes mega items — those are position:
     static, so top: 100% would resolve against .nova-nav and cover the page;
     they have no gap and a JS close timer already. */
  .nova-nav__desktop .nav-item.dropdown:not(.mega-menu-item):hover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--space-2);
  }

  /* Prevent flyout from going off-screen right */
  .nova-nav__desktop .dropdown-submenu > .dropdown-menu {
    position: absolute;
  }
}

/* Mobile: nested menus expand in-place as accordion */
.nova-mobile-menu .dropdown-menu {
  position: static !important;
  float: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none;
}

.nova-mobile-menu .dropdown-menu.show {
  display: block !important;
}

.nova-mobile-menu .dropdown-submenu > .dropdown-menu {
  position: static !important;
}

.nova-mobile-menu .dropdown-item {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
}

/* Indent nested levels on mobile */
.nova-mobile-menu .dropdown-menu .dropdown-item {
  padding-left: var(--space-6);
}

.nova-mobile-menu .dropdown-submenu .dropdown-menu .dropdown-item {
  padding-left: var(--space-8);
}

/* Mobile toggle caret — right-pointing chevron (>) instead of filled triangle */
.nova-mobile-menu .dropdown-toggle::after {
  content: '';
  display: inline-block;
  float: right;
  width: 7px;
  height: 7px;
  border: none;
  border-right: 2px solid var(--color-gray-400);
  border-bottom: 2px solid var(--color-gray-400);
  transform: rotate(-45deg);
  margin-top: 0.45em;
  vertical-align: middle;
  transition: transform var(--transition-fast);
}

.nova-mobile-menu .dropdown-toggle[aria-expanded="true"]::after,
.nova-mobile-menu .dropdown-submenu.open > .dropdown-toggle::after {
  transform: rotate(45deg);
}

/* ============================================
   FOOTER
   ============================================ */

.nova-footer {
  background: var(--color-dark-surface);
  color: var(--color-gray-300);
  padding: var(--space-16) 0 var(--space-8);
  margin-top: var(--space-24);
  position: relative;
}

.nova-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-secondary), transparent);
}

.nova-footer__content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Footer content (the footer slot's columns, the default copy's links) sits on the dark ground */
.nova-footer :is(h1, h2, h3, h4, h5, h6) { color: var(--color-on-dark); }
.nova-footer a { color: var(--color-gray-300); }
.nova-footer a:hover { color: var(--color-on-dark); }
/* a link in a sentence (the legal line's "Powered by") is told apart from the text by more than its colour */
.nova-footer p > a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

.nova-footer__text {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
}

/* Phones: a compact footer (the desktop 64px/96px rhythm leaves a sparse dark block). */
@media (max-width: 767px) {
  .nova-footer {
    padding: var(--space-8) 0 calc(var(--space-6) + env(safe-area-inset-bottom));
    margin-top: var(--space-12);
  }

  .nova-footer__default {
    padding-bottom: var(--space-4) !important;
  }

  .nova-footer__default p {
    margin-bottom: var(--space-3) !important;
  }

  .nova-footer__payments {
    padding: var(--space-4) 0 0 !important;
    margin-top: var(--space-4) !important;
  }

  /* One tidy row of card marks instead of 7 + 1 wrapping */
  .nova-footer__payment-icons {
    gap: var(--space-3) !important;
  }

  .nova-footer__payment-icons .nova-icon {
    font-size: 1.5em !important;
  }
}

/* ============================================
   UTILITIES
   ============================================ */

.nova-fade-in {
  opacity: 1;
  transition: opacity var(--transition-slow);
}

.nova-fade-out {
  opacity: 0.25;
  transition: opacity var(--transition-slow);
}

.nova-text-center {
  text-align: center;
}

.nova-mt-4 { margin-top: var(--space-4); }
.nova-mt-8 { margin-top: var(--space-8); }
.nova-mt-12 { margin-top: var(--space-12); }
.nova-mt-16 { margin-top: var(--space-16); }
.nova-mb-4 { margin-bottom: var(--space-4); }
.nova-mb-8 { margin-bottom: var(--space-8); }
.nova-mb-12 { margin-bottom: var(--space-12); }
.nova-mb-16 { margin-bottom: var(--space-16); }
.nova-my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.nova-my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
.nova-my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }
.nova-py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.nova-py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.nova-py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.nova-py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.nova-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.nova-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.nova-px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.nova-gap-4 { gap: var(--space-4); }
.nova-gap-6 { gap: var(--space-6); }
.nova-gap-8 { gap: var(--space-8); }
.nova-gap-12 { gap: var(--space-12); }
.nova-max-w-2xl { max-width: 672px; }
.nova-max-w-3xl { max-width: 768px; }
.nova-max-w-4xl { max-width: 896px; }
.nova-mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes nova-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nova-animate-slide-up {
  animation: nova-slide-up var(--transition-slow) ease-out;
}

/* Price update animation for basket */
@keyframes price-pulse {
  0%, 100% {
    transform: scale(1);
    color: var(--color-gray-900);
  }
  50% {
    transform: scale(1.05);
    color: var(--color-primary-text);
  }
}

.price-update {
  animation: price-pulse 0.6s ease-in-out;
}

.loading-price span {
  animation: loading-dots 1.4s infinite;
  opacity: 0;
}

.loading-price span:nth-child(1) { animation-delay: 0s; }
.loading-price span:nth-child(2) { animation-delay: 0.2s; }
.loading-price span:nth-child(3) { animation-delay: 0.4s; }
.loading-price span:nth-child(4) { animation-delay: 0.6s; }

@keyframes loading-dots {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* ============================================
   RESPONSIVE IMAGES
   ============================================ */

.nova-responsive-image {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.nova-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-gray-900);
  transition: all var(--transition-fast);
}

/* Ensure select elements match input height */
select.nova-input {
  height: auto;
  min-height: 2.5rem;
  line-height: 1.5;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234B5563' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px;
  padding-right: var(--space-8);
}

.nova-input:hover {
  border-color: var(--color-gray-300);
}

/* Phones: every text-like field is at least 16px so iOS Safari doesn't zoom the page on focus.
   Covers Bootstrap's .form-control / .form-select (incl. -sm) and bare inputs from extensions. */
@media (max-width: 1023px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  select,
  textarea,
  .form-control,
  .form-control-sm,
  .form-select,
  .form-select-sm,
  .nova-input,
  .nova-search-input {
    font-size: max(16px, 1rem);
  }
}

.nova-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* ============================================
   LEGACY BOOTSTRAP COMPATIBILITY
   ============================================ */

.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.btn {
  @extend .nova-btn;
}

.btn-primary {
  @extend .nova-btn-primary;
}

.btn-secondary {
  @extend .nova-btn-secondary;
}

.btn-block {
  @extend .nova-btn-block;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-body {
  padding: var(--space-5);
}

.price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.compare-price {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  text-decoration: line-through;
}

/* ============================================
   SEARCH FORM
   ============================================ */

.nova-search-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .nova-search-desktop {
    display: block;
    margin-left: auto;
    margin-right: var(--space-6);
  }
}

.nova-search-mobile {
  display: block;
  list-style: none;
  padding: var(--space-3) 0;
}

@media (min-width: 1024px) {
  .nova-search-mobile {
    display: none;
  }
}

.nova-search-form {
  margin: 0;
}

.nova-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 400px;
}

.nova-search-icon {
  position: absolute;
  left: var(--space-4);
  color: var(--color-gray-400);
  pointer-events: none;
  font-size: var(--font-size-base);
  transition: color var(--transition-fast);
  z-index: 1;
}

.nova-search-input {
  flex: 1;
  padding: var(--space-3) var(--space-12) var(--space-3) var(--space-10);
  font-size: var(--font-size-base);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  color: var(--color-gray-900);
  transition: all var(--transition-fast);
  width: 100%;
}

.nova-search-input::placeholder {
  color: var(--color-gray-400);
}

.nova-search-input:hover {
  background: #FFFFFF;
  border-color: var(--color-gray-300);
}

.nova-search-input:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.nova-search-input:focus ~ .nova-search-icon {
  color: var(--color-primary-text);
}

.nova-search-btn {
  position: absolute;
  right: var(--space-1);
  padding: var(--space-2);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0.9;
}

.nova-search-btn:hover {
  background: var(--color-primary-dark);
  opacity: 1;
  transform: scale(1.05);
}

.nova-search-btn:active {
  transform: scale(0.95);
}

/* Mobile adjustments */
@media (max-width: 1023px) {
  .nova-search-input-wrapper {
    max-width: 100%;
  }
}

/* ============================================
   PRODUCT 8-4 LAYOUT
   ============================================ */

.nova-product-detail-8-4 {
  padding-top: var(--space-6);
  padding-bottom: var(--space-10);
}

.nova-product-layout-8-4 {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-8);
}

.nova-product-sidebar {
  position: sticky;
  top: var(--space-6);
  height: fit-content;
}

@media (max-width: 1023px) {
  .nova-product-layout-8-4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FUNDRAISER DONATION WIDGET
   ============================================ */

.fundraiser-donation-widget {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.fundraiser-donation-widget__progress {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-gray-100);
}

.fundraiser-donation-widget__form {
  padding: var(--space-6);
}

.fundraiser-donation-widget__closed-notice {
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fundraiser-donation-widget__closed-notice i {
  color: var(--color-primary-text);
  font-size: var(--font-size-lg);
}

.fundraiser-donation-widget__closed-notice span {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.fundraiser-donation-widget__amount-section {
  margin-bottom: var(--space-4);
}

.fundraiser-donation-widget__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin-bottom: var(--space-3);
}

.fundraiser-donation-widget__amount-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.fundraiser-donation-widget .amount-btn {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: white;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  cursor: pointer;
  transition: all 0.2s ease;
}

.fundraiser-donation-widget .amount-btn:hover {
  border-color: var(--color-primary);
}

.fundraiser-donation-widget .amount-btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  color: var(--color-primary-text);
}

.fundraiser-donation-widget__custom-amount {
  position: relative;
}

.fundraiser-donation-widget__currency-symbol {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-lg);
  color: var(--color-gray-500);
}

.fundraiser-donation-widget__input {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  transition: border-color 0.2s ease;
}

.fundraiser-donation-widget__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.fundraiser-donation-widget__submit {
  width: 100%;
  padding: var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.fundraiser-donation-widget__submit:hover {
  background: var(--color-primary-dark);
}

.fundraiser-donation-widget__completed {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-gray-600);
}

.fundraiser-donation-widget__completed i {
  font-size: var(--font-size-3xl);
  color: var(--color-success);
  margin-bottom: var(--space-3);
  display: block;
}

/* Phones: tighter card padding, 48px tap targets for the amount buttons and submit */
@media (max-width: 1023px) {
  .fundraiser-donation-widget__progress,
  .fundraiser-donation-widget__form {
    padding: var(--space-4);
  }

  .fundraiser-donation-widget .amount-btn,
  .fundraiser-donation-widget__submit {
    min-height: 48px;
  }

  .fundraiser-donation-widget__input {
    font-size: 16px;
    min-height: 48px;
  }
}

/* ============================================
   MEGA MENU
   ============================================ */

.mega-menu-item {
  position: static;
}

/* Stable caret for mega items — fixed size so hover doesn't cause layout jitter */
.nova-nav__desktop .mega-menu-item > .dropdown-toggle::after {
  transition: none;
}

.mega-menu-active > .nav-link {
  color: var(--color-primary-text) !important;
  position: relative;
}

/* Indicator bar — uses ::before so the Bootstrap caret (::after) is preserved */
.mega-menu-active > .nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
}

/* Rotate caret upward when mega panel is open */
.mega-menu-active > .nav-link::after {
  transform: rotate(180deg);
}

/* Mega panel: use opacity/visibility for fade instead of display toggle */
.nova-nav__desktop .mega-menu-panel {
  display: block;
  width: 100%;
  left: 0;
  right: 0;
  padding: var(--space-6) var(--space-4);
  border: none;
  border-top: 2px solid var(--color-primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: #FFFFFF;
  min-width: 0;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.nova-nav__desktop .mega-menu-panel.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-menu-inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.mega-menu-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-gray-200);
}

.mega-menu-view-all {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.mega-menu-view-all:hover {
  color: var(--color-primary-text-hover);
}

.mega-menu-columns {
  display: flex;
  gap: var(--space-8);
}

.mega-menu-col {
  flex: 1;
  min-width: 0;
}

.mega-menu-content-panel {
  flex: 0 0 auto;
  max-width: 300px;
}

.mega-menu-col-heading {
  display: block;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
  text-decoration: none;
}

a.mega-menu-col-heading:hover {
  color: var(--color-primary-text);
}

.mega-menu-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu-links li {
  margin-bottom: var(--space-2);
}

.mega-menu-link {
  color: var(--color-gray-600);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.mega-menu-link:hover {
  color: var(--color-primary-text);
}

.mega-menu-view-all-col {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-text);
  text-decoration: none;
}

.mega-menu-view-all-col:hover {
  color: var(--color-primary-text-hover);
}

/* ── Mobile Mega Menu (Offcanvas + Drill-Down) ── */

/* Flyout header: always hidden in Nova (offcanvas header handles back + title) */
.mega-menu-flyout-header {
  display: none;
}

/* Offcanvas mobile navigation */
#novaMobileMenu {
  max-width: 400px;
  width: 100%;
  border-left: 2px solid var(--color-primary);
}

#novaMobileMenu .offcanvas-body {
  padding: 0;
  overflow: hidden;
}

/* Back button in offcanvas header — always occupies space to prevent title shift */
.nova-mobile-back {
  visibility: hidden;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  margin-right: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-700);
  transition: color var(--transition-fast);
}

/* 44px close target, kept aligned to the drawer's right gutter */
#novaMobileMenu .btn-close {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0 calc(var(--space-3) * -1) 0 0;
  background-position: center;
}

.nova-mobile-back:hover {
  color: var(--color-primary-text);
}

/* Drill-down sliding panels within offcanvas */
.nova-mobile-slides {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nova-mobile-slides.drilled-in {
  transform: translateX(-50%);
}

.nova-mobile-slide {
  width: 50%;
  flex-shrink: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1023px) {
  /* Hidden inside the nav */
  .mega-menu-panel {
    display: none !important;
  }

  /* Visible when inside the drill-down detail slide */
  .nova-mobile-slide-detail .mega-menu-panel {
    display: block !important;
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    transition: none;
  }

  /* Hide in-panel flyout header (offcanvas header handles it) */
  .offcanvas .mega-menu-flyout-header {
    display: none !important;
  }

  /* "View All" link restyled as prominent button */
  .mega-menu-header {
    margin: var(--space-4);
    padding: 0;
    border-bottom: none;
  }

  .mega-menu-view-all {
    display: block;
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-align: center;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: background var(--transition-fast);
  }

  .mega-menu-view-all:hover {
    background: var(--color-primary-dark);
    color: var(--color-on-primary);
  }

  /* Inner container */
  .mega-menu-inner {
    max-width: none;
    padding: 0;
  }

  /* Columns stack vertically — match .nova-mobile-menu padding */
  .mega-menu-columns {
    flex-direction: column;
    gap: 0;
    padding: var(--space-4);
  }

  .mega-menu-col {
    padding: 0;
    border-bottom: none;
  }

  .mega-menu-content-panel {
    max-width: none;
  }

  /* Column headings — styled as section separators, matching nav link rhythm */
  .mega-menu-col-heading {
    display: block;
    padding: var(--space-3);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-gray-900);
  }

  /* Touch-friendly link targets — match first-level nav items */
  .mega-menu-links li {
    margin-bottom: 0;
  }

  .mega-menu-link {
    display: block;
    padding: var(--space-3);
    min-height: 44px;
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
  }

  .mega-menu-view-all-col {
    display: block;
    padding: var(--space-3);
    min-height: 44px;
    font-size: var(--font-size-sm);
    line-height: 1.4;
  }
}

/* ============================================
   MARKETING PAGE STYLES
   ============================================ */

/* Top banner / promo bar — more polished */
.nova-top-banner {
  background: var(--color-dark-surface);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

/* Gradient text utility */
.nova-gradient-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section background variants */
.nova-bg-subtle {
  background: var(--color-gray-50);
}

.nova-bg-primary-subtle {
  background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-surface) 100%);
}

.nova-bg-dark {
  background: var(--color-dark-surface);
}

.nova-bg-gradient {
  background: linear-gradient(135deg, var(--color-primary-50) 0%, #FFFFFF 40%, var(--color-secondary-50, #ECFEFF) 100%);
}

/* The brief's brand gradient, darkened where needed so light text stays legible
   (--gradient-brand-dark, compiled by DesignBriefCssCompiler); without one, a dark wash tinted
   with the primary and secondary colours. The old hard-coded indigo/navy stops ignored the brief. */
.nova-bg-gradient-dark {
  background: var(--gradient-brand-dark,linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 30%, var(--color-dark-surface)) 0%, var(--color-dark-surface) 45%, color-mix(in srgb, var(--color-secondary) 18%, var(--color-dark-surface)) 100%));
}

/* Mesh gradient background — premium, organic feel */
.nova-bg-mesh {
  background-color: #FFFFFF;
  background-image:
    radial-gradient(at 20% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent) 0px, transparent 50%),
    radial-gradient(at 80% 0%, color-mix(in srgb, var(--color-secondary) 6%, transparent) 0px, transparent 50%),
    radial-gradient(at 50% 100%, color-mix(in srgb, var(--color-accent) 4%, transparent) 0px, transparent 50%);
}

.nova-bg-mesh-dark {
  /* Near-black tinted towards the brand primary, so a navy or green brand reads as its own dark. */
  background-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-dark-surface));
  background-image:
    radial-gradient(at 20% 0%, color-mix(in srgb, var(--color-primary) 20%, transparent) 0px, transparent 50%),
    radial-gradient(at 80% 0%, color-mix(in srgb, var(--color-secondary) 15%, transparent) 0px, transparent 50%),
    radial-gradient(at 50% 100%, color-mix(in srgb, var(--color-accent) 8%, transparent) 0px, transparent 50%);
}

/* ── Dark section scope ───────────────────────────────────────────────────────────────────
   Everything that paints a dark background (the dark section backgrounds, the dark hero presets
   and anything tagged .nova-on-dark) re-points the text tokens rather than colouring elements
   directly. JSON-component headings carry an inline `color: var(--color-text-strong)`, so the
   token has to flip here for them to read light; a hard `h2 { color: #fff }` lost to that inline
   style. Literal light values, not --color-gray-*: a dark Design Brief surface inverts the gray
   scale, which would turn gray-100 text dark again. --color-on-dark-accent is the brief's most
   legible brand colour on dark (compiled by DesignBriefCssCompiler; defaults to primary-light). */
.nova-on-dark,
.nova-bg-dark,
.nova-bg-gradient-dark,
.nova-bg-mesh-dark {
  --color-text-strong: #FFFFFF;
  color: #F3F4F6;
}

.nova-on-dark p,
.nova-bg-dark p,
.nova-bg-gradient-dark p,
.nova-bg-mesh-dark p {
  color: #D1D5DB;
}

.nova-on-dark .nova-overline,
.nova-bg-dark .nova-overline,
.nova-bg-gradient-dark .nova-overline,
.nova-bg-mesh-dark .nova-overline {
  color: var(--color-on-dark-accent);
}

.nova-on-dark .nova-overline--pill,
.nova-bg-dark .nova-overline--pill,
.nova-bg-gradient-dark .nova-overline--pill,
.nova-bg-mesh-dark .nova-overline--pill {
  background: color-mix(in srgb, var(--color-on-dark-accent) 14%, transparent);
}

/* The primary colour is often the dark brand colour the section is painted in, so a primary
   button would vanish. Use the on-dark accent with dark text instead. */
.nova-on-dark .nova-btn-primary,
.nova-bg-dark .nova-btn-primary,
.nova-bg-gradient-dark .nova-btn-primary,
.nova-bg-mesh-dark .nova-btn-primary {
  background: var(--color-on-dark-accent);
  color: var(--color-on-dark-accent-contrast);
  border-color: var(--color-on-dark-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.nova-on-dark .nova-btn-primary:hover:not(:disabled),
.nova-bg-dark .nova-btn-primary:hover:not(:disabled),
.nova-bg-gradient-dark .nova-btn-primary:hover:not(:disabled),
.nova-bg-mesh-dark .nova-btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-on-dark-accent) 82%, #FFFFFF);
  color: var(--color-on-dark-accent-contrast);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.nova-on-dark .nova-btn-secondary,
.nova-on-dark .nova-btn-outline,
.nova-bg-dark .nova-btn-secondary,
.nova-bg-dark .nova-btn-outline,
.nova-bg-gradient-dark .nova-btn-secondary,
.nova-bg-gradient-dark .nova-btn-outline,
.nova-bg-mesh-dark .nova-btn-secondary,
.nova-bg-mesh-dark .nova-btn-outline {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.nova-on-dark .nova-btn-secondary:hover:not(:disabled),
.nova-on-dark .nova-btn-outline:hover:not(:disabled),
.nova-bg-dark .nova-btn-secondary:hover:not(:disabled),
.nova-bg-dark .nova-btn-outline:hover:not(:disabled),
.nova-bg-gradient-dark .nova-btn-secondary:hover:not(:disabled),
.nova-bg-gradient-dark .nova-btn-outline:hover:not(:disabled),
.nova-bg-mesh-dark .nova-btn-secondary:hover:not(:disabled),
.nova-bg-mesh-dark .nova-btn-outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.7);
}

/* Decorative dot grid pattern */
.nova-bg-dots {
  background-image: radial-gradient(var(--color-gray-200) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Section divider — subtle gradient line */
.nova-divider-gradient {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, var(--color-gray-300), transparent);
  margin: var(--space-16) 0;
}

/* Glow effect behind elements */
.nova-glow {
  position: relative;
}

.nova-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Feature card styling — elevated cards with left accent */
.nova-feature-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-100);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.nova-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.nova-feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--color-primary-light);
}

.nova-feature-card:hover::before {
  opacity: 1;
}

/* Icon container for feature cards */
.nova-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-50);
  color: var(--color-primary-text);
  margin-bottom: var(--space-4);
}

.nova-icon-container--secondary {
  background: var(--color-secondary-50, #ECFEFF);
  color: var(--color-secondary);
}

.nova-icon-container--accent {
  background: var(--color-accent-50, #FFFBEB);
  color: var(--color-accent-dark, #D97706);
}

/* Stats / metrics display */
.nova-stat {
  text-align: center;
}

.nova-stat__value {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-text);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-2);
}

.nova-stat__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Pricing card styles */
.nova-pricing-card {
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: 2px solid var(--color-gray-200);
  transition: all var(--transition-base);
  position: relative;
}

.nova-pricing-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-xl);
}

.nova-pricing-card--featured {
  border-color: var(--color-primary);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.nova-pricing-card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Badge / tag */
.nova-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

.nova-badge--primary {
  background: var(--color-primary-50);
  color: var(--color-primary-text);
}

.nova-badge--secondary {
  background: var(--color-secondary-50, #ECFEFF);
  color: var(--color-secondary-dark, #0891B2);
}

.nova-badge--accent {
  background: var(--color-accent-50, #FFFBEB);
  color: var(--color-accent-dark, #D97706);
}

/* Testimonial / quote card */
.nova-testimonial {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-100);
  position: relative;
}

.nova-testimonial::before {
  content: '\201C';
  font-size: 4rem;
  line-height: 1;
  color: var(--color-primary-light);
  font-family: Georgia, serif;
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
}

/* Scroll-triggered fade-in animation */
.nova-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.nova-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children animations */
.nova-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nova-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.nova-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.nova-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.nova-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.nova-stagger.is-visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.nova-stagger.is-visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

/* Hover link with arrow animation */
.nova-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-text);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.nova-link-arrow:hover {
  gap: var(--space-3);
  color: var(--color-primary-text-hover);
}

.nova-link-arrow::after {
  content: '\2192';
  transition: transform var(--transition-fast);
}

.nova-link-arrow:hover::after {
  transform: translateX(2px);
}

/* Responsive text sizing for marketing headlines */
.nova-display-xl {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.nova-display-lg {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.nova-display-md {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* Subheadline — larger body text for marketing copy */
.nova-subheadline {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.7;
  color: var(--color-gray-600);
  max-width: 680px;
}

/* Centered section intro pattern */
.nova-section-intro {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-12);
}

.nova-section-intro .nova-subheadline {
  margin-left: auto;
  margin-right: auto;
}

/* Pill-shaped overline label */
.nova-overline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-text);
  margin-bottom: var(--space-4);
}

.nova-overline--pill {
  background: var(--color-primary-50);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}

/* ============================================
   JSON COMPONENT STYLE OVERRIDES
   ============================================ */

/* Give JSON component sections breathing room */
.json-component-wrapper {
  font-family: var(--font-family-base);
}

/* Improve HTML extension content spacing */
.nova-html-content {
  padding: var(--space-16) 0;
}

/* Phones: page content blocks. Headings scale down so a long word fits the gutter-width column,
   section padding drops from 64px to 32px, and the page's own gutter is the only one (Brock has
   its own page templates and is unaffected; these hooks are Nova's page.html / page-*.html). */
@media (max-width: 767px) {
  .nova-html-content {
    padding: var(--space-8) 0 !important;
  }

  .nova-page-main > .nova-section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  /* Class-less headings only: that's authored page copy. Extensions rendered in the page (basket,
     checkout, json components) class their headings and keep their own sizes. */
  .nova-page-main h1:not([class]) {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    overflow-wrap: break-word;
  }

  .nova-page-main h2:not([class]) {
    font-size: clamp(1.5rem, 6.4vw, 1.875rem);
    overflow-wrap: break-word;
  }

  .nova-page-main :is(iframe, video, embed, object) {
    max-width: 100%;
  }

  .nova-page-main iframe[src*="youtube"],
  .nova-page-main iframe[src*="vimeo"] {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* ============================================
   JSON COMPONENTS: SEMANTIC TOKENS
   ============================================
   The classes SemanticTokenResolver gives a JSON component for its style tokens on Nova and the
   themes layered on it: nova-jc-<family>-<token> ("variant": "heading-lg" is
   .nova-jc-variant-heading-lg). The Bootstrap theme doesn't load this file and keeps inline styles.

   Re-skinning: every value a theme might want to change reads a public --json-* token first, with
   Nova's semantic token (or the old fixed value) as the fallback, so a theme sets tokens on :root
   (or a scope) instead of restyling these classes:
     --json-heading-color, --json-heading-{xl,lg,md,sm}-{size,weight},
     --json-body-{lg,md,sm}-{size,line-height}, --json-link-{color,decoration},
     --json-color-<token>, --json-bg-<token> (and --json-bg-<token>-text on the dark ones),
     --json-bg-<token>-button-{bg,color} (a primary button on success, error, warning, primary and
     primary-dark: by default the section's text colour with the section's colour as its label, so it
     reads wherever the section's own text does; the on-dark accent on primary and primary-dark).
     On those five backgrounds --json-bg-<token>-text is the colour of all of the section's text:
     headings, body, overlines and text given the muted, secondary or primary colour inside it,
     --json-gap-<token>, --json-padding-<token>, --json-radius-<token>, --json-shadow-<token>,
     --json-border, --json-border-light, --json-border-dark, --json-border-accent,
     --json-border-gradient, --json-max-width-<token>, --json-tracking-<token>,
     --json-overlay-<token>.
   Structural tokens (align, justify, width, height, transform, background position and size) have
   no token: they mean one thing.

   Strength: each rule is :where(.class) { ... !important }. These were inline styles, so they must
   beat every ordinary rule (a theme's heading sizes, the template's own inline base styles, hero
   slot rules) and lose to every other !important rule, as inline styles did; :where() gives them
   no specificity, so any other !important rule wins. Where one element has tokens from two
   families that set the same property, the later key in the JSON wins, as it did inline:
   SemanticTokenResolver drops a token whose properties are all set again later, the families are
   ordered here (variant, backgrounds that set the text colour, other backgrounds, colour) so the
   remaining overlaps resolve the right way, and nova-jc-variant-color marks a heading or link
   variant written after a background that sets the text colour. */

/* Fallbacks for the colours Nova has no semantic token for */
:root {
  --jsonc-success-dark: #166534;
  --jsonc-warning-light: #fbbf24;
  --jsonc-warning-dark: #92400e;
  --jsonc-bg-warning-light: #fef3c7;
  /* Text on a status background, and a primary button on one, is the status colour's own text colour */
  --json-bg-success-text: var(--color-on-success);
  --json-bg-error-text: var(--color-on-error);
  --json-bg-warning-text: var(--color-on-warning);
}

:where(.nova-jc-variant-heading-xl) {
  font-size: var(--json-heading-xl-size, var(--font-size-5xl)) !important;
  font-weight: var(--json-heading-xl-weight, var(--font-weight-bold)) !important;
  color: var(--json-heading-color, var(--color-text-strong)) !important;
}

:where(.nova-jc-variant-heading-lg) {
  font-size: var(--json-heading-lg-size, var(--font-size-3xl)) !important;
  font-weight: var(--json-heading-lg-weight, var(--font-weight-bold)) !important;
  color: var(--json-heading-color, var(--color-text-strong)) !important;
}

:where(.nova-jc-variant-heading-md) {
  font-size: var(--json-heading-md-size, var(--font-size-2xl)) !important;
  font-weight: var(--json-heading-md-weight, var(--font-weight-semibold)) !important;
  color: var(--json-heading-color, var(--color-text-strong)) !important;
}

:where(.nova-jc-variant-heading-sm) {
  font-size: var(--json-heading-sm-size, var(--font-size-xl)) !important;
  font-weight: var(--json-heading-sm-weight, var(--font-weight-semibold)) !important;
  color: var(--json-heading-color, var(--color-text-strong)) !important;
}

:where(.nova-jc-variant-body-lg) {
  font-size: var(--json-body-lg-size, var(--font-size-lg)) !important;
  line-height: var(--json-body-lg-line-height, var(--line-height-relaxed)) !important;
}

:where(.nova-jc-variant-body-md) {
  font-size: var(--json-body-md-size, var(--font-size-base)) !important;
  line-height: var(--json-body-md-line-height, var(--line-height-normal)) !important;
}

:where(.nova-jc-variant-body-sm) {
  font-size: var(--json-body-sm-size, var(--font-size-sm)) !important;
  line-height: var(--json-body-sm-line-height, var(--line-height-normal)) !important;
}

:where(.nova-jc-variant-link) {
  color: var(--json-link-color, var(--color-primary-text)) !important;
  text-decoration: var(--json-link-decoration, underline) !important;
}

/* A primary button on a success, error, warning, primary or primary-dark background (below): the
   theme's primary is often the section's own colour (Brock's primary is its success green), so the
   button takes the --jsonc-button-* colours resolved on the section. Resolved there, not on the
   button, because a theme may re-point --color-* on its buttons (Ridge does). Any other background
   inside the section (a white card) drops them, so its buttons are the theme's primary again. Zero
   specificity and before the background and colour families, so a button's own background or colour
   token still wins. Written as [class~=] so JsonComponentTokenCssTest's one-rule-per-token check
   leaves them alone: they style what sits inside a section, not the token's own element. */
:where([class~="nova-jc-bg-success"], [class~="nova-jc-bg-error"], [class~="nova-jc-bg-warning"], [class~="nova-jc-bg-primary"], [class~="nova-jc-bg-primary-dark"]) :where(.nova-btn-primary) {
  background: var(--jsonc-button-bg, var(--button-primary-bg, var(--color-primary))) !important;
  color: var(--jsonc-button-color, var(--button-primary-color, var(--color-on-primary))) !important;
}

:where([class~="nova-jc-bg-success"], [class~="nova-jc-bg-error"], [class~="nova-jc-bg-warning"], [class~="nova-jc-bg-primary"], [class~="nova-jc-bg-primary-dark"]) :where(.nova-btn-primary:hover:not(:disabled)) {
  background: color-mix(in srgb, var(--jsonc-button-bg, var(--button-primary-hover-bg, var(--color-primary-dark))) 88%, var(--jsonc-button-color, var(--button-primary-hover-bg, var(--color-primary-dark)))) !important;
}

/* The text inside those sections reads in the section's text colour (--jsonc-text): a body
   paragraph (Nova's dark-section rule makes it a light grey on primary), an overline (the theme's
   primary, often the section's own colour) and text given the muted, secondary or primary colour.
   Descendants only, so a colour token on the section itself still beats its background, as the
   later key did inline. A nested background drops --jsonc-text and its text is as before. */
:where([class~="nova-jc-bg-success"], [class~="nova-jc-bg-error"], [class~="nova-jc-bg-warning"], [class~="nova-jc-bg-primary"], [class~="nova-jc-bg-primary-dark"]) :where(p) {
  color: var(--jsonc-text, currentcolor) !important;
}

:where([class~="nova-jc-bg-success"], [class~="nova-jc-bg-error"], [class~="nova-jc-bg-warning"], [class~="nova-jc-bg-primary"], [class~="nova-jc-bg-primary-dark"]) :where(.nova-overline) {
  color: var(--jsonc-text, var(--color-primary-text)) !important;
}

:where([class~="nova-jc-bg-success"], [class~="nova-jc-bg-error"], [class~="nova-jc-bg-warning"], [class~="nova-jc-bg-primary"], [class~="nova-jc-bg-primary-dark"]) :where(.nova-overline--pill) {
  background: color-mix(in srgb, var(--jsonc-text, var(--color-primary-text)) 14%, transparent) !important;
}

:where([class*="nova-jc-bg-"]:not(.nova-btn, .nova-jc-bg-success, .nova-jc-bg-error, .nova-jc-bg-warning, .nova-jc-bg-primary, .nova-jc-bg-primary-dark)) {
  --jsonc-button-bg: initial;
  --jsonc-button-color: initial;
  --jsonc-text: initial;
}

:where([class~="nova-jc-bg-success"]) {
  --jsonc-text: var(--json-bg-success-text, white);
  --jsonc-button-bg: var(--json-bg-success-button-bg, var(--json-bg-success-text, white));
  --jsonc-button-color: var(--json-bg-success-button-color, var(--json-bg-success, var(--color-success)));
}

:where([class~="nova-jc-bg-error"]) {
  --jsonc-text: var(--json-bg-error-text, white);
  --jsonc-button-bg: var(--json-bg-error-button-bg, var(--json-bg-error-text, white));
  --jsonc-button-color: var(--json-bg-error-button-color, var(--json-bg-error, var(--color-error)));
}

:where([class~="nova-jc-bg-warning"]) {
  --jsonc-text: var(--json-bg-warning-text, var(--color-gray-900));
  --jsonc-button-bg: var(--json-bg-warning-button-bg, var(--json-bg-warning-text, var(--color-gray-900)));
  --jsonc-button-color: var(--json-bg-warning-button-color, var(--json-bg-warning, var(--color-warning)));
}

:where([class~="nova-jc-bg-primary"]) {
  --jsonc-text: var(--json-bg-primary-text, var(--color-on-primary));
  --color-text-strong: var(--json-bg-primary-text, var(--color-on-primary)) !important;
  --jsonc-button-bg: var(--json-bg-primary-button-bg, var(--color-on-dark-accent));
  --jsonc-button-color: var(--json-bg-primary-button-color, var(--color-on-dark-accent-contrast));
}

:where([class~="nova-jc-bg-primary-dark"]) {
  --jsonc-text: var(--json-bg-primary-dark-text, var(--color-on-primary));
  --color-text-strong: var(--json-bg-primary-dark-text, var(--color-on-primary)) !important;
  --jsonc-button-bg: var(--json-bg-primary-dark-button-bg, var(--color-on-dark-accent));
  --jsonc-button-color: var(--json-bg-primary-dark-button-color, var(--color-on-dark-accent-contrast));
}

:where(.nova-jc-bg-success) {
  background-color: var(--json-bg-success, var(--color-success)) !important;
  color: var(--json-bg-success-text, white) !important;
  --color-text-strong: var(--json-bg-success-text, white) !important;
}

:where(.nova-jc-bg-error) {
  background-color: var(--json-bg-error, var(--color-error)) !important;
  color: var(--json-bg-error-text, white) !important;
  --color-text-strong: var(--json-bg-error-text, white) !important;
}

:where(.nova-jc-bg-warning) {
  background-color: var(--json-bg-warning, var(--color-warning)) !important;
  color: var(--json-bg-warning-text, var(--color-gray-900)) !important;
  --color-text-strong: var(--json-bg-warning-text, var(--color-gray-900)) !important;
}

:where(.nova-jc-bg-primary) {
  background-color: var(--json-bg-primary, var(--color-primary)) !important;
  color: var(--json-bg-primary-text, var(--color-on-primary)) !important;
}

:where(.nova-jc-bg-primary-dark) {
  background-color: var(--json-bg-primary-dark, var(--color-primary-dark)) !important;
  color: var(--json-bg-primary-dark-text, var(--color-on-primary)) !important;
}

:where(.nova-jc-bg-surface) {
  background-color: var(--json-bg-surface, var(--color-gray-50)) !important;
}

:where(.nova-jc-bg-secondary) {
  background-color: var(--json-bg-secondary, var(--color-gray-100)) !important;
}

:where(.nova-jc-bg-muted) {
  background-color: var(--json-bg-muted, var(--color-gray-100)) !important;
}

:where(.nova-jc-bg-transparent) {
  background-color: var(--json-bg-transparent, transparent) !important;
}

:where(.nova-jc-bg-white) {
  background-color: var(--json-bg-white, white) !important;
}

:where(.nova-jc-bg-surface-light) {
  background-color: var(--json-bg-surface-light, var(--color-gray-50)) !important;
}

:where(.nova-jc-bg-surface-dark) {
  background-color: var(--json-bg-surface-dark, var(--color-gray-200)) !important;
}

:where(.nova-jc-bg-primary-light) {
  background-color: var(--json-bg-primary-light, var(--color-primary-light)) !important;
}

:where(.nova-jc-bg-success-light) {
  background-color: var(--json-bg-success-light, var(--color-success-light)) !important;
}

:where(.nova-jc-bg-error-light) {
  background-color: var(--json-bg-error-light, var(--color-error-light)) !important;
}

:where(.nova-jc-bg-warning-light) {
  background-color: var(--json-bg-warning-light, var(--color-warning-light, var(--jsonc-bg-warning-light))) !important;
}

:where(.nova-jc-bg-gray-light) {
  background-color: var(--json-bg-gray-light, var(--color-gray-100)) !important;
}

:where(.nova-jc-bg-gray) {
  background-color: var(--json-bg-gray, var(--color-gray-200)) !important;
}

:where(.nova-jc-bg-gray-dark) {
  background-color: var(--json-bg-gray-dark, var(--color-gray-300)) !important;
}

:where(.nova-jc-variant-color:is(.nova-jc-variant-heading-xl, .nova-jc-variant-heading-lg, .nova-jc-variant-heading-md, .nova-jc-variant-heading-sm)) {
  color: var(--json-heading-color, var(--color-text-strong)) !important;
}

:where(.nova-jc-variant-color.nova-jc-variant-link) {
  color: var(--json-link-color, var(--color-primary-text)) !important;
}

:where(.nova-jc-color-primary) {
  color: var(--json-color-primary, var(--color-primary-text)) !important;
}

:where(.nova-jc-color-secondary) {
  color: var(--json-color-secondary, var(--color-gray-600)) !important;
}

:where(.nova-jc-color-muted) {
  color: var(--json-color-muted, var(--color-gray-500)) !important;
}

/* Muted, secondary and primary text inside a success, error, warning, primary or primary-dark
   section (see above the backgrounds): the section's text colour. A muted grey can't reach 4.5:1 on
   every theme's status colours, so muted text there differs by size only. */
:where([class~="nova-jc-bg-success"], [class~="nova-jc-bg-error"], [class~="nova-jc-bg-warning"], [class~="nova-jc-bg-primary"], [class~="nova-jc-bg-primary-dark"]) :where(.nova-jc-color-muted) {
  color: var(--jsonc-text, var(--json-color-muted, var(--color-gray-500))) !important;
}

:where([class~="nova-jc-bg-success"], [class~="nova-jc-bg-error"], [class~="nova-jc-bg-warning"], [class~="nova-jc-bg-primary"], [class~="nova-jc-bg-primary-dark"]) :where(.nova-jc-color-secondary) {
  color: var(--jsonc-text, var(--json-color-secondary, var(--color-gray-600))) !important;
}

:where([class~="nova-jc-bg-success"], [class~="nova-jc-bg-error"], [class~="nova-jc-bg-warning"], [class~="nova-jc-bg-primary"], [class~="nova-jc-bg-primary-dark"]) :where(.nova-jc-color-primary) {
  color: var(--jsonc-text, var(--json-color-primary, var(--color-primary-text))) !important;
}

:where(.nova-jc-color-success) {
  color: var(--json-color-success, var(--color-success)) !important;
}

:where(.nova-jc-color-error) {
  color: var(--json-color-error, var(--color-error)) !important;
}

:where(.nova-jc-color-warning) {
  color: var(--json-color-warning, var(--color-warning)) !important;
}

:where(.nova-jc-color-primary-light) {
  color: var(--json-color-primary-light, var(--color-primary-light)) !important;
}

:where(.nova-jc-color-primary-dark) {
  color: var(--json-color-primary-dark, var(--color-primary-text-hover)) !important;
}

:where(.nova-jc-color-secondary-light) {
  color: var(--json-color-secondary-light, var(--color-gray-400)) !important;
}

:where(.nova-jc-color-secondary-dark) {
  color: var(--json-color-secondary-dark, var(--color-gray-700)) !important;
}

:where(.nova-jc-color-success-light) {
  color: var(--json-color-success-light, var(--color-success-light)) !important;
}

:where(.nova-jc-color-success-dark) {
  color: var(--json-color-success-dark, var(--color-success-dark, var(--jsonc-success-dark))) !important;
}

:where(.nova-jc-color-error-light) {
  color: var(--json-color-error-light, var(--color-error-light)) !important;
}

:where(.nova-jc-color-error-dark) {
  color: var(--json-color-error-dark, var(--color-error-dark)) !important;
}

:where(.nova-jc-color-warning-light) {
  color: var(--json-color-warning-light, var(--color-warning-light, var(--jsonc-warning-light))) !important;
}

:where(.nova-jc-color-warning-dark) {
  color: var(--json-color-warning-dark, var(--color-warning-dark, var(--jsonc-warning-dark))) !important;
}

:where(.nova-jc-color-gray-light) {
  color: var(--json-color-gray-light, var(--color-gray-400)) !important;
}

:where(.nova-jc-color-gray) {
  color: var(--json-color-gray, var(--color-gray-500)) !important;
}

:where(.nova-jc-color-gray-dark) {
  color: var(--json-color-gray-dark, var(--color-gray-700)) !important;
}

:where(.nova-jc-color-white) {
  color: var(--json-color-white, white) !important;
}

:where(.nova-jc-color-black) {
  color: var(--json-color-black, var(--color-gray-900)) !important;
}

:where(.nova-jc-gap-none) {
  gap: var(--json-gap-none, 0) !important;
}

:where(.nova-jc-gap-xs) {
  gap: var(--json-gap-xs, var(--space-1)) !important;
}

:where(.nova-jc-gap-sm) {
  gap: var(--json-gap-sm, var(--space-2)) !important;
}

:where(.nova-jc-gap-md) {
  gap: var(--json-gap-md, var(--space-4)) !important;
}

:where(.nova-jc-gap-lg) {
  gap: var(--json-gap-lg, var(--space-6)) !important;
}

:where(.nova-jc-gap-xl) {
  gap: var(--json-gap-xl, var(--space-8)) !important;
}

:where(.nova-jc-gap-2xl) {
  gap: var(--json-gap-2xl, var(--space-12)) !important;
}

:where(.nova-jc-gap-3xl) {
  gap: var(--json-gap-3xl, var(--space-16)) !important;
}

:where(.nova-jc-padding-none) {
  padding: var(--json-padding-none, 0) !important;
}

:where(.nova-jc-padding-xs) {
  padding: var(--json-padding-xs, var(--space-1)) !important;
}

:where(.nova-jc-padding-sm) {
  padding: var(--json-padding-sm, var(--space-2)) !important;
}

:where(.nova-jc-padding-md) {
  padding: var(--json-padding-md, var(--space-4)) !important;
}

:where(.nova-jc-padding-lg) {
  padding: var(--json-padding-lg, var(--space-6)) !important;
}

:where(.nova-jc-padding-xl) {
  padding: var(--json-padding-xl, var(--space-8)) !important;
}

:where(.nova-jc-padding-2xl) {
  padding: var(--json-padding-2xl, var(--space-16)) !important;
}

:where(.nova-jc-padding-3xl) {
  padding: var(--json-padding-3xl, var(--space-24)) !important;
}

:where(.nova-jc-padding-section) {
  padding: var(--json-padding-section, var(--space-16) var(--space-6)) !important;
}

:where(.nova-jc-padding-section-lg) {
  padding: var(--json-padding-section-lg, var(--space-24) var(--space-6)) !important;
}

:where(.nova-jc-bgpos-center) {
  background-position: center !important;
}

:where(.nova-jc-bgpos-top) {
  background-position: top !important;
}

:where(.nova-jc-bgpos-bottom) {
  background-position: bottom !important;
}

:where(.nova-jc-bgpos-left) {
  background-position: left !important;
}

:where(.nova-jc-bgpos-right) {
  background-position: right !important;
}

:where(.nova-jc-bgsize-cover) {
  background-size: cover !important;
}

:where(.nova-jc-bgsize-contain) {
  background-size: contain !important;
}

:where(.nova-jc-bgsize-auto) {
  background-size: auto !important;
}

:where(.nova-jc-overlay-none) {
  --bg-overlay-opacity: var(--json-overlay-none, 0) !important;
}

:where(.nova-jc-overlay-light) {
  --bg-overlay-opacity: var(--json-overlay-light, 0.3) !important;
}

:where(.nova-jc-overlay-medium) {
  --bg-overlay-opacity: var(--json-overlay-medium, 0.5) !important;
}

:where(.nova-jc-overlay-dark) {
  --bg-overlay-opacity: var(--json-overlay-dark, 0.7) !important;
}

:where(.nova-jc-overlay-heavy) {
  --bg-overlay-opacity: var(--json-overlay-heavy, 0.85) !important;
}

:where(.nova-jc-align-center) {
  text-align: center !important;
  align-items: center !important;
}

:where(.nova-jc-align-left) {
  text-align: left !important;
}

:where(.nova-jc-align-right) {
  text-align: right !important;
}

:where(.nova-jc-align-start) {
  align-items: flex-start !important;
}

:where(.nova-jc-align-end) {
  align-items: flex-end !important;
}

:where(.nova-jc-justify-start) {
  justify-content: flex-start !important;
}

:where(.nova-jc-justify-center) {
  justify-content: center !important;
}

:where(.nova-jc-justify-end) {
  justify-content: flex-end !important;
}

:where(.nova-jc-justify-between) {
  justify-content: space-between !important;
}

:where(.nova-jc-justify-around) {
  justify-content: space-around !important;
}

:where(.nova-jc-border-default) {
  border: var(--json-border, 1px solid var(--color-gray-200)) !important;
}

:where(.nova-jc-border-none) {
  border: none !important;
}

:where(.nova-jc-border-light) {
  border: var(--json-border-light, 1px solid var(--color-gray-100)) !important;
}

:where(.nova-jc-border-dark) {
  border: var(--json-border-dark, 1px solid var(--color-gray-400)) !important;
}

:where(.nova-jc-border-accent-top) {
  border-top: var(--json-border-accent, 3px solid var(--color-primary)) !important;
}

:where(.nova-jc-border-gradient-top) {
  border-image: var(--json-border-gradient, linear-gradient(90deg, var(--color-primary), var(--color-secondary))) 1 !important;
  border-top-width: 3px !important;
  border-top-style: solid !important;
}

:where(.nova-jc-radius-none) {
  border-radius: var(--json-radius-none, 0) !important;
}

:where(.nova-jc-radius-sm) {
  border-radius: var(--json-radius-sm, var(--radius-sm)) !important;
}

:where(.nova-jc-radius-md) {
  border-radius: var(--json-radius-md, var(--radius-md)) !important;
}

:where(.nova-jc-radius-lg) {
  border-radius: var(--json-radius-lg, var(--radius-lg)) !important;
}

:where(.nova-jc-radius-full) {
  border-radius: var(--json-radius-full, var(--radius-full)) !important;
}

:where(.nova-jc-shadow-none) {
  box-shadow: var(--json-shadow-none, none) !important;
}

:where(.nova-jc-shadow-sm) {
  box-shadow: var(--json-shadow-sm, var(--shadow-sm)) !important;
}

:where(.nova-jc-shadow-md) {
  box-shadow: var(--json-shadow-md, var(--shadow-md)) !important;
}

:where(.nova-jc-shadow-lg) {
  box-shadow: var(--json-shadow-lg, var(--shadow-lg)) !important;
}

:where(.nova-jc-shadow-xl) {
  box-shadow: var(--json-shadow-xl, var(--shadow-xl)) !important;
}

:where(.nova-jc-width-full) {
  width: 100% !important;
}

:where(.nova-jc-width-auto) {
  width: auto !important;
}

:where(.nova-jc-height-full) {
  height: 100% !important;
}

:where(.nova-jc-height-auto) {
  height: auto !important;
}

:where(.nova-jc-maxwidth-prose) {
  max-width: var(--json-max-width-prose, 65ch) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

:where(.nova-jc-maxwidth-sm) {
  max-width: var(--json-max-width-sm, 640px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

:where(.nova-jc-maxwidth-md) {
  max-width: var(--json-max-width-md, 768px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

:where(.nova-jc-maxwidth-lg) {
  max-width: var(--json-max-width-lg, 1024px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

:where(.nova-jc-maxwidth-xl) {
  max-width: var(--json-max-width-xl, 1280px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

:where(.nova-jc-maxwidth-full) {
  max-width: 100% !important;
}

:where(.nova-jc-maxwidth-none) {
  max-width: none !important;
}

:where(.nova-jc-transform-uppercase) {
  text-transform: uppercase !important;
}

:where(.nova-jc-transform-lowercase) {
  text-transform: lowercase !important;
}

:where(.nova-jc-transform-capitalize) {
  text-transform: capitalize !important;
}

:where(.nova-jc-transform-none) {
  text-transform: none !important;
}

:where(.nova-jc-tracking-tight) {
  letter-spacing: var(--json-tracking-tight, -0.025em) !important;
}

:where(.nova-jc-tracking-normal) {
  letter-spacing: var(--json-tracking-normal, 0) !important;
}

:where(.nova-jc-tracking-wide) {
  letter-spacing: var(--json-tracking-wide, 0.025em) !important;
}

:where(.nova-jc-tracking-wider) {
  letter-spacing: var(--json-tracking-wider, 0.05em) !important;
}

:where(.nova-jc-tracking-widest) {
  letter-spacing: var(--json-tracking-widest, 0.1em) !important;
}

/* ============================================================
   Hero Extension: the slot content (the JSON components in the title, subtitle and cta) and the
   heights. The presets' own layout and surfaces are in the "ui: hero" sub-section near the end.
   ============================================================ */

/* Base hero section */
.nova-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Slot context overrides: cascade hero-specific styling into JSON components.
   One fluid size for hero headlines, set as a token too: the heading-xl / heading-lg variants
   write `font-size: var(--font-size-5xl|3xl)` inline, which beats a class rule, so re-pointing the
   token is the only way their size follows the hero. Capped at 3.5rem so a long headline holds
   to three or four lines in the hero's measure rather than six. */
.nova-hero__title {
    --nova-hero-title-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    --font-size-5xl: var(--nova-hero-title-size);
    --font-size-3xl: var(--nova-hero-title-size);
}

.nova-hero__title h1,
.nova-hero__title h2 {
    line-height: 1.1;
    text-wrap: balance;
}

.nova-hero__title .json-heading {
    font-size: var(--nova-hero-title-size);
    font-weight: var(--font-weight-bold, 700);
    font-family: var(--font-family-display, inherit);
    line-height: 1.08;
    margin: 0;
    letter-spacing: -0.04em;
}

.nova-hero__subtitle .json-text {
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    line-height: 1.7;
    margin: 0;
    opacity: 0.85;
}

.nova-hero__cta .json-button {
    font-size: var(--font-size-base, 1rem);
    padding: var(--space-4, 16px) var(--space-10, 40px);
    border-radius: var(--radius-full, 9999px);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0.01em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nova-hero__cta .json-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -5px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

/* Split image preset */
.nova-hero--split .nova-hero__image img,
.nova-hero--split .nova-hero__image .json-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* Minimal preset — title gets extra weight */
.nova-hero--minimal .nova-hero__title .json-heading {
    letter-spacing: -0.04em;
    color: var(--color-text-strong, #111827);
}

.nova-hero--minimal .nova-hero__subtitle .json-text {
    color: var(--color-gray-500, #6B7280);
}

/* The light presets' subtitle is muted grey already: faded as well, it drops below 4.5:1 */
.nova-hero--minimal .nova-hero__subtitle .json-text,
.nova-hero--split .nova-hero__subtitle .json-text {
    opacity: 1;
}

/* Video background: video fills container */
.nova-hero--video-bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile responsive */
@media (max-width: 1023px) {
    .nova-hero__content {
        padding: var(--space-10, 40px) var(--space-5, 20px) !important;
    }
}


/* Phones: the centered / minimal / video presets used 64px x 24px copy padding and a 70vh floor.
   Use the one site gutter, shorter padding, and let long headline words wrap rather than push the page. */
@media (max-width: 767px) {
    .nova-hero--centered,
    .nova-hero--minimal,
    .nova-hero--video-bg {
        min-height: min(70vh, 480px) !important;
    }

    .nova-hero--centered .nova-hero__content,
    .nova-hero--minimal .nova-hero__content,
    .nova-hero--video-bg .nova-hero__content {
        padding: var(--space-12, 48px) var(--container-padding) !important;
    }

    .nova-hero__title {
        /* 36px from 375px up (the previous phone size); only narrower phones go smaller */
        --nova-hero-title-size: clamp(2rem, 9.6vw, 2.25rem);
        overflow-wrap: break-word;
    }

    .nova-hero__cta .json-button {
        min-height: 44px;
    }
}

/* Compact height (heroConfig "height": "compact"): a page banner rather than a landing hero, the height of
   a blog masthead: no floor, so it is as tall as its copy, with the masthead's padding. The presets set their
   70vh floor in "ui: hero", later in this file and as specific, hence !important. */
.nova-hero.nova-hero--compact {
    min-height: 0 !important;
}

.nova-hero.nova-hero--compact .nova-hero__content {
    padding-top: clamp(40px, 6vw, 72px) !important;
    padding-bottom: clamp(40px, 6vw, 72px) !important;
}

/* Screen height (heroConfig "height": "screen"): the rest of the window under the nav, for a photo-led
   home page, so the slideshow controls at its foot are on screen. svh so a phone's collapsing address
   bar doesn't push the bottom of the hero off screen. A theme whose nav is taller, or floats over the
   hero, sets --nova-hero-screen-offset (0 for a see-through header). */
.nova-hero.nova-hero--screen {
    min-height: calc(100vh - var(--nova-hero-screen-offset, 72px)) !important;
    min-height: calc(100svh - var(--nova-hero-screen-offset, 72px)) !important;
}

/* Slideshow background (heroConfig "backgroundImages", nova/extensions/hero/slideshow.html, driven by
   js/hero-slideshow.js): the photos cross-fade under the overlay; the copy keeps clear of the controls. */
.nova-hero__slide {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.nova-hero__slide.is-active {
    opacity: 1;
}

.nova-hero--slideshow .nova-hero__content {
    padding-bottom: calc(var(--space-16, 64px) + 48px) !important;
}

.nova-hero__slide-btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-full, 999px);
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s ease);
}

.nova-hero__slide-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.nova-hero__slide-btn:focus-visible,
.nova-hero__slide-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* A 24px target round an 8px dot; the active dot stretches into a bar */
.nova-hero__slide-dot {
    position: relative;
    width: 24px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.nova-hero__slide-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width var(--transition-base, 0.25s ease), background var(--transition-base, 0.25s ease);
}

.nova-hero__slide-dot.is-active::before {
    width: 18px;
    background: #fff;
}

/* A phone has no room for a long row of dots: with arrows, the caption's "3 of 12" gives the place
   instead; dots alone wrap. */
@media (max-width: 639px) {
    .nova-hero__slide-controls--both .nova-hero__slide-dots {
        display: none !important;
    }

    .nova-hero__slide-dots {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nova-hero__slide {
        transition: none;
    }
}

/* Header search scope on a category page (fragment/search-scope): "All products" or the category,
   a plain <select> between the text box and the search button. Inherits the form's colour and type;
   a theme can restyle it through its own class (e.g. .depot-search__scope). */
.bdgr-search-scope {
  flex: 0 1 auto;
  align-self: stretch;
  min-width: 0;
  max-width: 40%;
  margin: 0;
  padding: 0 1.9em 0 0.75em;
  border: 0;
  border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.6em center / 0.75em;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.bdgr-search-scope:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.nova-search__scope, .nova-search-scope { color: var(--color-gray-900); }
.bdgr-search-scope option { color: #111; background: #fff; }
@media (max-width: 767px) {
  /* 16px so iOS doesn't zoom the page when it takes focus */
  .bdgr-search-scope { max-width: 36%; font-size: 16px; }
}

/* Search box over a long filter group (fragment/facet-search, shown by facet-sheet.js). Inherits the
   rail's colour and type; a theme can restyle it through its own class (e.g. .depot-facet__search). */
.bdgr-facet-search {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0 0 8px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
}
.bdgr-facet-search[hidden] { display: none; }
.bdgr-facet-search:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.bdgr-facet-search__empty { margin: 4px 0 12px; font-size: 13px; opacity: 0.7; }
@media (max-width: 1023px) {
  /* 16px so iOS doesn't zoom the page when it takes focus */
  .bdgr-facet-search { height: 40px; font-size: 16px; }
}

/* Colour dot before a swatch filter's value (fragment/facet-rail, FacetDisplay.SWATCH). The colour comes
   in as --bdgr-swatch on the element; --clear draws a checkerboard and --multi a colour wheel. A thin
   inner border keeps white and pale colours visible on a white rail, and a selected value gets a ring
   (outline, so the gap shows the rail's own background). Themes can resize it with --bdgr-swatch-size. */
.bdgr-swatch {
  flex: 0 0 auto;
  display: inline-block;
  width: var(--bdgr-swatch-size, 14px);
  height: var(--bdgr-swatch-size, 14px);
  border-radius: 50%;
  background: var(--bdgr-swatch, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
  vertical-align: middle;
}
.bdgr-swatch--clear {
  background:
    repeating-conic-gradient(#d4d4d8 0 25%, #ffffff 0 50%) 50% / 7px 7px;
}
.bdgr-swatch--multi {
  background: conic-gradient(#e53935, #f5d000, #43a047, #1e88e5, #8e24aa, #e53935);
}
[data-facet-selected="true"] > .bdgr-swatch {
  outline: 1.5px solid currentColor;
  outline-offset: 2px;
}
@media (forced-colors: active) {
  .bdgr-swatch { forced-color-adjust: none; border: 1px solid CanvasText; }
}

/* Two-thumb slider over a price or number filter's min/max boxes, added above the form by facet-sheet.js
   (no JS, no slider). Two native range inputs share one track: the inputs ignore the pointer and only
   their thumbs take it, so each thumb drags on its own; the fill between them is the theme's accent. */
.bdgr-range-slider {
  position: relative;
  height: 28px;
  margin: 8px 10px 4px;
}
.bdgr-range-slider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.bdgr-range-slider__fill {
  position: absolute;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--color-primary, #4F46E5);
}
.bdgr-range-slider input[type="range"] {
  position: absolute;
  inset: 0 -10px;
  width: calc(100% + 20px);
  height: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.bdgr-range-slider input[type="range"]::-webkit-slider-runnable-track { background: none; border: 0; }
.bdgr-range-slider input[type="range"]::-moz-range-track { background: none; border: 0; }
.bdgr-range-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-primary, #4F46E5);
  border-radius: 50%;
  background: #ffffff;
  cursor: grab;
}
.bdgr-range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-primary, #4F46E5);
  border-radius: 50%;
  background: #ffffff;
  cursor: grab;
}
.bdgr-range-slider input[type="range"]:focus { outline: none; }
.bdgr-range-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid currentColor; outline-offset: 2px; }
.bdgr-range-slider input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid currentColor; outline-offset: 2px; }
@media (forced-colors: active) {
  .bdgr-range-slider::before, .bdgr-range-slider__fill { forced-color-adjust: none; background: CanvasText; }
}

/* A search rule's banner (fragment/search-banner), right under the results heading on the search page
   and on a category searched within. A calm callout in the theme's own accent (each Nova-family theme
   sets --color-primary); text and link inherit the page colour, so a pale accent (Spec, Depot) never
   carries the words. Wraps long words and URLs rather than widening the page on a phone. */
.bdgr-search-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  box-sizing: border-box;
  max-width: 100%;
  margin: 12px 0 20px;
  padding: 12px 16px;
  border-left: 4px solid var(--color-primary, currentColor);
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--color-primary, currentColor) 8%, transparent);
  color: inherit;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bdgr-search-banner__text { flex: 1 1 16rem; min-width: 0; margin: 0; }
.bdgr-search-banner__link {
  flex: 0 0 auto;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-primary, currentColor);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.bdgr-search-banner__link:hover { text-decoration-thickness: 3px; }
.bdgr-search-banner__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 767px) {
  .bdgr-search-banner { margin: 8px 0 16px; padding: 10px 12px; font-size: 14px; }
  .bdgr-search-banner__link { flex-basis: 100%; }
}

/* Bootstrap 4 badge colours. Shared fragments (order and payment state badges) still use BS4 class names
   - badge-success, badge-pill... - which Bootstrap 5 dropped, so on Nova pages those badges were white
   text with no background. Map them onto Nova's tokens. */
.badge-pill { border-radius: var(--radius-full, 9999px); }
.badge-primary { background-color: var(--color-primary); color: var(--color-on-primary); }
.badge-secondary { background-color: var(--color-gray-500); color: #fff; }
.badge-success { background-color: var(--color-success); color: var(--color-on-success); }
.badge-info { background-color: var(--color-info); color: #fff; }
.badge-warning { background-color: var(--color-warning); color: var(--color-on-warning); }
.badge-danger { background-color: var(--color-error); color: var(--color-on-error); }
.badge-dark { background-color: var(--color-gray-800); color: #fff; }
.badge-light { background-color: var(--color-gray-100); color: var(--color-gray-800); }

/* Start-your-own-fundraiser block (extensions/fundraiser/startFundraiser). A card in the theme's surface, or bare
   text and a button; in a narrow column (a sidebar) the button takes the full width. */
.nova-start-fundraiser {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin: var(--space-6) 0;
}

.nova-start-fundraiser--card {
    padding: var(--space-6);
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.nova-start-fundraiser__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
}

.nova-start-fundraiser__text {
    margin: 0;
    color: var(--color-gray-600);
}

.nova-start-fundraiser__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

@container (max-width: 320px) {
    .nova-start-fundraiser__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Events (Event Ticket products)
   .nova-event-line: the date and venue line on product cards (fragments/eventCardLine), used by
   every Nova-family card, including the Brock-family listing and rail cards, so it inherits the
   card's font and only sets size and colour.
   .nova-event-details: the eventDetails panel on the product page, above the ticket types.
   ========================================================================== */

.nova-event-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-gray-700);
}

.nova-event-line__when {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}

.nova-event-line__venue {
    flex-basis: 100%;
    color: var(--color-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nova-event-line__badge {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nova-event-line--ended .nova-event-line__when {
    color: var(--color-gray-600);
}

.nova-event-details {
    margin: 0 0 var(--space-5) 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-gray-50);
}

.nova-event-details__status {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success);
}

.nova-event-details__status--sold-out,
.nova-event-details__status--sales-closed,
.nova-event-details__status--ended {
    color: var(--color-error-dark);
}

.nova-event-details__list {
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.nova-event-details__row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-3);
}

.nova-event-details__label {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
}

.nova-event-details__value {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
    overflow-wrap: anywhere;
}

.nova-event-details__doors {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.nova-event-details__calendar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    /* the text colour, not --color-primary: Depot's yellow primary is unreadable as link text */
    color: var(--color-gray-900);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nova-event-details__calendar:hover,
.nova-event-details__calendar:focus-visible {
    text-decoration-thickness: 2px;
}

@media (max-width: 1023px) {
    .nova-event-details {
        padding: var(--space-3) var(--space-4);
    }

    .nova-event-details__row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* Restaurant line choices (fragments/lineItemAttributes :: customisation): modifiers, the customer's
   note and the item's allergens, compact under the line's name in every basket, mini basket, checkout
   summary and confirmation. Inherits the line's colour so dark themes (Spec) stay readable. */
.nova-line-custom { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.45; opacity: 0.86; }
.nova-line-custom p { margin: 0; }
.nova-line-custom__mod { overflow-wrap: anywhere; } /* a long option name wraps; only its price stays whole: */
.nova-line-custom__delta { white-space: nowrap; }
.nova-line-custom__note q { quotes: "\201C" "\201D"; font-style: italic; }
.nova-line-custom__label { font-weight: 600; }
.nova-line-custom__allergens { font-size: 0.75rem; }

/* ==========================================================================
   Account area (/p/account and its tabs): the header band with the account tabs (userAccountMenu,
   in topBanner), the overview's tiles and cards (accountOverview) and the card rows the list pages
   use. A theme recolours it through the --account-* properties; Ridge sets them in ridge.css.
   ========================================================================== */
.nova-account {
  --account-band-bg: var(--color-gray-900);
  --account-band-ink: #FFFFFF;
  --account-band-muted: rgba(255, 255, 255, 0.78);
  --account-page-bg: var(--color-surface, #FFFFFF); /* the page's own background, so the current tab joins it */
  --account-figure: var(--color-gray-900);
  --account-figure-strong: var(--color-primary);
  --account-display-font: var(--font-family-display);
}
.nova-account-head { background: var(--account-band-bg); color: var(--account-band-ink); }
.nova-account-head__inner {
  max-width: var(--container-max-width); margin: 0 auto; box-sizing: border-box;
  padding: var(--space-8) var(--container-padding) 0;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.nova-container .nova-account-head { border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-top: var(--space-6); }
.nova-account-head__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.nova-account-head__avatar {
  position: relative; width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: var(--color-on-primary); border: 3px solid rgba(255, 255, 255, 0.25);
  font: 700 1.75rem/1 var(--account-display-font);
}
.nova-account-head__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* over the initials; removed when there's no Gravatar */
.nova-account-head__text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.nova-account-head__eyebrow { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--account-band-muted); }
.nova-account-head__title { margin: 0; font: 700 clamp(2rem, 4vw, 2.75rem)/1.05 var(--account-display-font); color: inherit; }
.nova-account-head__email { font-size: 0.9375rem; color: var(--account-band-muted); overflow-wrap: anywhere; }
.nova-account-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.nova-account-head__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: var(--account-band-ink);
  font: 600 0.875rem/1 var(--font-family-base); text-decoration: none; cursor: pointer;
  transition: background var(--transition-fast);
}
.nova-account-head__btn:hover, .nova-account-head__btn:focus-visible { background: rgba(255, 255, 255, 0.12); color: var(--account-band-ink); }
.nova-account-tabs { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--container-padding)); padding: 0 var(--container-padding); }
.nova-account-tabs::-webkit-scrollbar { display: none; }
.nova-account-tabs a {
  flex: none; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: var(--account-band-muted); font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
}
.nova-account-tabs a:hover { color: var(--account-band-ink); background: rgba(255, 255, 255, 0.08); }
.nova-account-tabs a[aria-current="page"] { background: var(--account-page-bg); color: var(--account-band-bg); font-weight: 700; }

.nova-account-body { display: flex; flex-direction: column; gap: var(--space-6); padding-bottom: var(--space-8); }
.nova-account-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.nova-account-tile {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5);
  background: #FFFFFF; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  color: var(--color-gray-900); text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
a.nova-account-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-gray-900); }
.nova-account-tile__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-gray-600); }
.nova-account-tile__figure { font: 700 2.5rem/1 var(--account-display-font); color: var(--account-figure); }
.nova-account-tile__figure--strong { color: var(--account-figure-strong); }
.nova-account-tile__note { font-size: 0.8125rem; color: var(--color-gray-600); }
.nova-account-cols { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.nova-account-cols__main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.nova-account-cols__side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.nova-account-card { background: #FFFFFF; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.nova-account-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-gray-100); }
.nova-account-card__title { margin: 0; font: 700 1.5rem/1.2 var(--account-display-font); color: var(--color-gray-900); }
.nova-account-card__link { font-weight: 600; font-size: 0.875rem; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.nova-account-card__link:hover { text-decoration-thickness: 2px; }
.nova-account-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.nova-account-card__note { font-size: 0.8125rem; color: var(--color-gray-600); margin: 0; }
.nova-account-details { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: 0.9375rem; }
.nova-account-details dt { font-size: 0.8125rem; font-weight: 600; color: var(--color-gray-600); }
.nova-account-details dd { margin: 0; overflow-wrap: anywhere; }
.nova-account-address { font-style: normal; font-size: 0.9375rem; line-height: 1.5; }
.nova-account-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-900); text-decoration: none;
}
.nova-account-row:last-child { border-bottom: 0; }
a.nova-account-row:hover { background: var(--color-gray-50); color: var(--color-gray-900); }
.nova-account-row__main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nova-account-row__title { font-weight: 700; }
.nova-account-row__meta { font-size: 0.875rem; color: var(--color-gray-600); }
.nova-account-row__amount { font-weight: 700; min-width: 80px; text-align: right; }
.nova-account-row__go { flex: none; color: var(--color-gray-400); }
.nova-account-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nova-account-progress { display: block; height: 6px; max-width: 240px; margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--color-gray-200); overflow: hidden; }
.nova-account-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--account-figure-strong); }
.nova-account-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 600; background: var(--color-gray-100); color: var(--color-gray-800); white-space: nowrap; }
.nova-account-pill--good { background: var(--color-success-light); color: #065F46; }
.nova-account-pill--warn { background: #FEF3C7; color: #92400E; }
.nova-account-pill--bad { background: var(--color-error-light); color: #991B1B; }
.nova-account-summary { font-size: 0.9375rem; color: var(--color-gray-700); margin: 0; }
.nova-account-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-5); text-align: center; }
.nova-account-empty__title { margin: 0; font: 700 1.625rem/1.2 var(--account-display-font); color: var(--color-gray-900); }
.nova-account-empty p { margin: 0; color: var(--color-gray-700); }
.nova-account-pager { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-gray-100); }
/* Order pictures: up to three, overlapping, like what's in the bag fanned out */
.nova-account-thumbs { display: inline-flex; align-items: center; flex: none; }
.nova-account-thumb {
  width: 52px; height: 52px; flex: none; overflow: hidden; border-radius: var(--radius-md);
  background: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--color-gray-200);
}
.nova-account-thumb + .nova-account-thumb { margin-left: -22px; }
.nova-account-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nova-account-thumb--blank { display: flex; align-items: center; justify-content: center; color: var(--color-gray-500); font-weight: 700; }
.nova-account-thumbs__more { margin-left: var(--space-2); font-size: 0.8125rem; color: var(--color-gray-600); white-space: nowrap; }

/* An order's progress: steps along a line; done ones in the accent, the current one ringed */
.nova-account-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--account-steps, 4), minmax(0, 1fr)); }
.nova-account-track__step { position: relative; padding: var(--space-5) var(--space-2) 0 0; font-size: 0.8125rem; line-height: 1.3; color: var(--color-gray-500); }
.nova-account-track__step::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--color-gray-200); }
.nova-account-track__step:last-child::before { display: none; }
.nova-account-track__step::after {
  content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--color-gray-300);
}
.nova-account-track__step--done { color: var(--color-gray-700); }
.nova-account-track__step--done::before { background: var(--account-figure-strong); }
.nova-account-track__step--done::after { background: var(--account-figure-strong); box-shadow: none; }
.nova-account-track__step--current { color: var(--color-gray-900); font-weight: 700; }
.nova-account-track__step--current::after { box-shadow: inset 0 0 0 3px var(--account-figure-strong); }
@media (prefers-reduced-motion: no-preference) {
  .nova-account-track__step--current::after { animation: nova-account-arrive 1.6s ease-out 1; }
  @keyframes nova-account-arrive {
    from { box-shadow: inset 0 0 0 3px var(--account-figure-strong), 0 0 0 0 color-mix(in srgb, var(--account-figure-strong) 45%, transparent); }
    to { box-shadow: inset 0 0 0 3px var(--account-figure-strong), 0 0 0 10px transparent; }
  }
}

/* The overview's "On its way": each order on its way with where it is and its steps */
.nova-account-card--way { border-top: 4px solid var(--account-figure-strong); }
.nova-account-way {
  display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5);
  border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-900); text-decoration: none;
}
.nova-account-way:last-child { border-bottom: 0; }
a.nova-account-way:hover { background: var(--color-gray-50); color: var(--color-gray-900); }
.nova-account-way__top { display: flex; align-items: center; gap: var(--space-4); }
.nova-account-way__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nova-account-way .nova-account-row__amount { flex: none; min-width: 0; align-self: flex-start; }
.nova-account-way__status { font: 700 1.375rem/1.2 var(--account-display-font); }
.nova-account-way__meta { font-size: 0.875rem; color: var(--color-gray-600); }

/* The order page's head, after the confirmation moment */
.nova-account-orderhead {
  display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6);
  margin: var(--space-6) 0; background: #FFFFFF; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--account-figure-strong); color: var(--color-gray-900);
}
.nova-account-orderhead__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.nova-account-orderhead__text { flex: 1 1 240px; min-width: 0; }
.nova-account-orderhead__title { margin: 0; font: 700 clamp(1.75rem, 3vw, 2.25rem)/1.1 var(--account-display-font); color: var(--account-figure); }
.nova-account-orderhead__meta { margin: var(--space-1) 0 0; color: var(--color-gray-600); }
.nova-account-orderhead__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.nova-account-orderhead__actions form { margin: 0; }
@media print { .nova-account-orderhead__actions { display: none; } .nova-account-orderhead { box-shadow: none; } }

/* Tickets: a stub per ticket, the QR code past a dashed perforation */
.nova-account-stubs { list-style: none; margin: 0; padding: var(--space-5); display: grid; gap: var(--space-4); }
.nova-account-stub { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.nova-account-stub__body { padding: var(--space-5); min-width: 0; }
.nova-account-stub__event { margin: 0 0 var(--space-3); font: 700 1.25rem/1.2 var(--account-display-font); color: var(--color-gray-900); }
.nova-account-stub__facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); font-size: 0.875rem; }
.nova-account-stub__facts dt { font-weight: 600; color: var(--color-gray-600); }
.nova-account-stub__facts dd { margin: 0; color: var(--color-gray-900); }
.nova-account-stub__code { font-family: var(--font-family-mono, monospace); letter-spacing: 0.12em; }
.nova-account-stub__wallet { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.nova-account-stub__wallet img { height: 40px; width: auto; display: block; }
.nova-account-stub__qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-left: 2px dashed var(--color-gray-300); }
.nova-account-stub__qr img { width: 120px; height: 120px; image-rendering: pixelated; display: block; }
/* Donations tab: totals, the tax-year group rows and the Gift Aid card */
.nova-account-tiles--flat { margin-bottom: var(--space-2); }
.nova-account-tiles--flat .nova-account-tile { box-shadow: none; border: 1px solid var(--color-gray-200); }
.nova-account-row--group { background: var(--color-gray-50); }
.nova-account-select { width: auto; padding: var(--space-2) var(--space-3); font-size: 0.875rem; }
.nova-account-nowrap { white-space: nowrap; }
.nova-account-giftaid__text { margin: 0; color: var(--color-gray-700); line-height: 1.6; }
.nova-account-giftaid__who { margin: 0; font-weight: 600; color: var(--color-gray-900); }
.nova-account-giftaid__potential { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-success-light); color: #065F46; }
.nova-account-giftaid__amount { font: 700 1.5rem/1.1 var(--account-display-font); color: var(--account-figure-strong, #065F46); }
.nova-account-giftaid__terms { padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-gray-200); color: var(--color-gray-700); font-size: 0.9375rem; line-height: 1.6; }
.nova-account-field--narrow { flex: 0 0 8rem; }

/* Addresses tab: the address book and its form */
.nova-account-notice { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-success-light); color: #065F46; font-weight: 600; font-size: 0.9375rem; }
.nova-account-notice--bad { background: var(--color-error-light); color: #991B1B; }
.nova-account-notice--info { background: var(--color-gray-100); color: var(--color-gray-800); font-weight: 500; }
.nova-account-notice--info a { color: inherit; text-decoration: underline; margin-left: var(--space-1); }
.nova-account-consent__state { margin: 0; font-weight: 600; color: var(--color-gray-900); }
.nova-account-addresses__intro { padding: var(--space-4) var(--space-5) 0; }
.nova-account-addresses { list-style: none; margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.nova-account-saved { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); }
.nova-account-saved__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-weight: 700; color: var(--color-gray-900); }
.nova-account-saved__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-gray-100); }
.nova-account-saved__actions form { margin: 0; }
.nova-account-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; font-size: 0.875rem; color: var(--color-primary-text); cursor: pointer; }
.nova-account-linkbtn:hover { text-decoration: underline; }
.nova-account-linkbtn--quiet { color: var(--color-gray-600); }
.nova-account-form { max-width: 640px; display: flex; flex-direction: column; gap: var(--space-3); }
.nova-account-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 0; min-width: 0; }
.nova-account-field label { font-weight: 600; font-size: 0.875rem; color: var(--color-gray-800); }
.nova-account-field-row { display: flex; gap: var(--space-4); }
.nova-account-subtitle { margin: var(--space-3) 0 var(--space-1); font-size: 1rem; font-weight: 700; color: var(--color-gray-900); }
.nova-account-devices { list-style: none; margin: 0; padding: 0; }
.nova-account-devices li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-gray-100); }
.nova-account-devices li:last-child { border-bottom: 0; }
.nova-account-devices__name { font-weight: 600; color: var(--color-gray-900); }
.nova-account-confirm summary { display: inline-flex; cursor: pointer; list-style: none; }
.nova-account-confirm summary::-webkit-details-marker { display: none; }
.nova-account-confirm form { margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-gray-50); }
.nova-account-confirm form p { margin: 0 0 var(--space-3); font-size: 0.9375rem; color: var(--color-gray-800); }
/* Overview "Your details" card: the edit form opens in place (native <details>); the side column is narrow, so fields stack */
.nova-account-edit .nova-account-form { margin-top: var(--space-1); }
.nova-account-edit .nova-account-field-row { flex-direction: column; gap: var(--space-3); }
.nova-account-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
@media (max-width: 559px) {
  .nova-account-field-row { flex-direction: column; }
  .nova-account-field--narrow { flex: 1 1 auto; }
  .nova-account-stub { grid-template-columns: minmax(0, 1fr); }
  .nova-account-stub__qr { border-left: 0; border-top: 2px dashed var(--color-gray-300); }
  .nova-account-stub__qr img { width: 180px; height: 180px; }
}
/* Fundraisers tab (userFundraiserList) */
/* What the script shows later (wizard steps, submit button, save notice, the new-fundraiser form) starts with
   this class; the script's inline display wins over it. Not the hidden attribute: Bootstrap's [hidden] is !important. */
.nova-account .nova-account-fundraiser__hidden { display: none; }
.nova-account-fundraiser__notice { display: flex; align-items: center; gap: var(--space-3); }
.nova-account-fundraiser__notice > span { flex: 1 1 auto; min-width: 0; }
.nova-account-fundraiser__x { flex: none; font-size: 1.25rem; line-height: 1; color: inherit; padding: var(--space-1); }
.nova-account-fundraiser__thanks { border-top: 4px solid var(--account-figure-strong); }
.nova-account-fundraiser__thanks-pill { align-self: flex-start; }
.nova-account-fundraiser__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 0.9375rem; color: var(--color-gray-700); }
.nova-account-fundraiser__checklist li { position: relative; padding-left: var(--space-6); }
.nova-account-fundraiser__checklist li::before {
  content: ""; position: absolute; left: var(--space-1); top: 0.5em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--account-figure-strong);
}
.nova-account-fundraiser__list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.875rem; color: var(--color-gray-700); }
.nova-account-fundraiser__empty { padding-bottom: 0; }
.nova-account-fundraiser__start { text-align: center; padding-bottom: var(--space-2); }

/* The wizard: numbered steps along a thin bar, one panel at a time */
.nova-account-fundraiser__wizard-body { gap: var(--space-5); }
.nova-account-fundraiser__wizard-steps { display: flex; justify-content: space-between; gap: var(--space-1); }
.nova-account-fundraiser__wizard .wizard-step { flex: 1 1 0; min-width: 0; text-align: center; }
.nova-account-fundraiser__wizard .wizard-step-circle {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: var(--space-1);
  border-radius: 50%; background: var(--color-gray-100); color: var(--color-gray-600);
  font-weight: 700; font-size: 0.75rem; transition: background var(--transition-fast), color var(--transition-fast);
}
.nova-account-fundraiser__wizard .wizard-step.active .wizard-step-circle { background: var(--account-figure-strong); color: var(--color-on-primary); }
.nova-account-fundraiser__wizard .wizard-step.completed .wizard-step-circle {
  background: color-mix(in srgb, var(--account-figure-strong) 14%, transparent); color: var(--account-figure-strong);
}
.nova-account-fundraiser__wizard .wizard-step-label { display: none; font-size: 0.75rem; color: var(--color-gray-600); overflow-wrap: anywhere; }
.nova-account-fundraiser__wizard .wizard-step.active .wizard-step-label { display: block; font-weight: 600; color: var(--color-gray-900); }
.nova-account-fundraiser__wizard-bar { max-width: none; height: 4px; }
.nova-account-fundraiser__wizard-bar > span { width: 16.7%; transition: width var(--transition-base); }
.nova-account-fundraiser__form { margin: 0; }
.nova-account-fundraiser__panel > * + * { margin-top: var(--space-4); }
.nova-account-fundraiser__heading { margin: 0; font: 700 1.25rem/1.25 var(--account-display-font); color: var(--color-gray-900); }
.nova-account-fundraiser__required { color: var(--color-error); }
.nova-account-fundraiser__textarea { resize: vertical; }
.nova-account-fundraiser__counter { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.nova-account-fundraiser__short { max-width: 240px; }
.nova-account-fundraiser__availability { font-size: 0.875rem; }
.nova-account-fundraiser__ok { color: color-mix(in srgb, var(--color-success) 70%, var(--color-gray-900)); }
.nova-account-fundraiser__bad { color: color-mix(in srgb, var(--color-error) 80%, var(--color-gray-900)); }
.nova-account-fundraiser__ok + .nova-account-fundraiser__ok, .nova-account-fundraiser__bad + .nova-account-fundraiser__bad { margin-left: var(--space-1); }
.nova-account-fundraiser__url { margin: 0; }
.nova-account-fundraiser__url code, .nova-account-fundraiser__summary code {
  display: inline-block; max-width: 100%; padding: 2px var(--space-2); border-radius: var(--radius-sm);
  background: var(--color-gray-100); color: var(--color-gray-800); font-size: 0.875rem; overflow-wrap: anywhere;
}
.nova-account-fundraiser__money { display: flex; align-items: stretch; max-width: 320px; }
.nova-account-fundraiser__money-prefix {
  display: flex; align-items: center; padding: 0 var(--space-3); border: 2px solid var(--color-gray-200); border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--color-gray-50); color: var(--color-gray-600); font-weight: 600;
}
.nova-account-fundraiser__money .nova-input { flex: 1 1 auto; min-width: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.nova-account-fundraiser__advisory {
  margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border-left: 3px solid var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-gray-900); font-size: 0.9375rem;
}
.nova-account-fundraiser__box { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-gray-50); }
.nova-account-fundraiser__box > .nova-account-subtitle { margin-top: 0; margin-bottom: var(--space-3); }
.nova-account-fundraiser__summary { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); font-size: 0.875rem; }
.nova-account-fundraiser__summary dt { font-weight: 600; color: var(--color-gray-600); }
.nova-account-fundraiser__summary dd { margin: 0; min-width: 0; color: var(--color-gray-900); overflow-wrap: anywhere; }
.nova-account-fundraiser__danger-link { color: var(--color-error); }
.nova-account-fundraiser__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-gray-100); }
.nova-account-fundraiser__prev { visibility: hidden; } /* the script makes it visible from step 2 */
.nova-account-fundraiser__nav .wizard-nav-text { display: none; }

/* Images: a dashed drop zone and a grid of previews the script builds */
.nova-account-fundraiser__drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--color-gray-300); border-radius: var(--radius-lg); text-align: center; cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.nova-account-fundraiser__drop:hover { background: var(--color-gray-50); }
.nova-account-fundraiser__drop-icon { font-size: 1.5rem; color: var(--color-gray-400); }
.nova-account-fundraiser__drop-title { margin: 0; font-weight: 600; color: var(--color-gray-900); }
.nova-account-fundraiser__drop-hint { display: none; margin: 0; font-size: 0.875rem; color: var(--color-gray-600); }
.nova-account-fundraiser__images { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.nova-account-fundraiser__image { overflow: hidden; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); background: var(--color-surface, #FFFFFF); }
.nova-account-fundraiser__image img { display: block; width: 100%; height: 100px; object-fit: cover; }
.nova-account-fundraiser__image--loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-3); text-align: center; }
.nova-account-fundraiser__image--loading p { margin: 0; font-size: 0.875rem; color: var(--color-gray-600); }
.nova-account-fundraiser__image small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--color-gray-600); max-width: 100%; }
.nova-account-fundraiser__image-foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); }
.nova-account-fundraiser__image-foot small { flex: 1 1 auto; }
.nova-account-fundraiser__image-remove {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-gray-600); cursor: pointer;
}
.nova-account-fundraiser__image-remove:hover { background: var(--color-error-light); color: var(--color-error); }
.nova-account-fundraiser__spinner {
  width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--color-gray-200); border-top-color: var(--account-figure-strong);
  animation: nova-account-fundraiser-spin 1s linear infinite;
}
@keyframes nova-account-fundraiser-spin { to { transform: rotate(360deg); } }

/* Dialogs (native <dialog>; the browser shows and hides them, so no display here) */
.nova-account-fundraiser__dialog {
  width: min(500px, calc(100% - 2 * var(--space-4))); max-width: none; padding: 0; border: 0;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); background: var(--color-surface, #FFFFFF); color: var(--color-gray-900);
}
.nova-account-fundraiser__dialog--wide { width: min(600px, calc(100% - 2 * var(--space-4))); }
.nova-account-fundraiser__dialog::backdrop { background: color-mix(in srgb, var(--color-gray-900) 50%, transparent); }
.nova-account-fundraiser__dialog form { margin: 0; }
.nova-account-fundraiser__dialog p { margin: 0; }
.nova-account-fundraiser__dialog-head { flex-wrap: nowrap; align-items: center; }
.nova-account-fundraiser__dialog-title { margin: 0; min-width: 0; font: 700 1.25rem/1.25 var(--account-display-font); color: var(--color-gray-900); }
.nova-account-fundraiser__dialog-scroll { max-height: 70vh; overflow-y: auto; }
.nova-account-fundraiser__dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-gray-100); }
.nova-account-fundraiser__rule { margin: var(--space-1) 0; border: 0; border-top: 1px solid var(--color-gray-100); opacity: 1; }
.nova-account-fundraiser__quote { padding-left: var(--space-3); border-left: 3px solid var(--color-gray-200); color: var(--color-gray-700); white-space: pre-line; }
.nova-account-fundraiser__post { display: flex; flex-direction: column; gap: var(--space-3); }
.nova-account-fundraiser__post .nova-account-form__actions { margin-top: 0; }
.nova-account-fundraiser__updates { display: flex; flex-direction: column; }
.nova-account-fundraiser__update { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-gray-100); }
.nova-account-fundraiser__update:last-child { border-bottom: 0; }
.nova-account-fundraiser__update-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); overflow-wrap: anywhere; }
.nova-account-fundraiser__update-text .nova-account-pill { margin-left: var(--space-1); }
.nova-account-fundraiser__update form { margin: 0; flex: none; }
.nova-account-fundraiser__update--hidden .nova-account-fundraiser__update-text > p { color: var(--color-gray-500); }
.nova-account-fundraiser__none { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); text-align: center; color: var(--color-gray-600); }
@media (min-width: 768px) {
  .nova-account-fundraiser__wizard .wizard-step-circle { width: 36px; height: 36px; font-size: 0.875rem; }
  .nova-account-fundraiser__wizard .wizard-step-label { display: block; font-size: 0.8125rem; }
  .nova-account-fundraiser__nav .wizard-nav-text { display: inline; }
  .nova-account-fundraiser__drop-hint { display: block; }
  .nova-account-fundraiser__image img { height: 150px; }
}
@media (max-width: 559px) {
  .nova-account-fundraiser__box { padding: var(--space-4); }
  .nova-account-fundraiser__summary { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nova-account-fundraiser__summary dd + dt { margin-top: var(--space-2); }
  .nova-account-fundraiser__short, .nova-account-fundraiser__money { max-width: none; }
  .nova-account-fundraiser__dialog-foot .nova-btn { flex: 1 1 auto; }
}
/* Preferences tab */
.nova-account-notice a { font-weight: 600; margin-left: var(--space-2); }
/* Preferences: a tick box per list, its wording underneath. 44px tap rows. */
.nova-account-prefs { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nova-account-prefs__legend { padding: 0; margin-bottom: var(--space-2); font-size: 0.8125rem; font-weight: 600; color: var(--color-gray-600); text-transform: uppercase; letter-spacing: 0.08em; }
.nova-account-prefs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-top: var(--space-2); }
.nova-account-toggle { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; min-height: 44px; border-bottom: 1px solid var(--color-gray-100); }
.nova-account-toggle--stop { border-bottom: 0; }
.nova-account-toggle__input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--account-figure-strong); cursor: pointer; }
.nova-account-toggle__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; }
.nova-account-toggle__label { font-weight: 600; color: var(--color-gray-900); }
.nova-account-toggle__note { font-size: 0.875rem; color: var(--color-gray-600); overflow-wrap: anywhere; }
.nova-account-toggle .nova-account-pill { margin-top: var(--space-1); white-space: normal; }
@media (max-width: 767px) {
  .nova-account-head__inner { padding-top: var(--space-6); gap: var(--space-4); }
  .nova-account-head__avatar { width: 52px; height: 52px; font-size: 1.25rem; }
  .nova-account-head__actions { width: 100%; }
  .nova-account-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .nova-account-tile { padding: var(--space-4); }
  .nova-account-tile__figure { font-size: 2rem; }
}

/* =====================================================================================
   Basket quantity field (js/qty-input.js): the number between a basket stepper's - and + buttons,
   on the basket page and in the mini basket, that can be typed into. Each stepper's own value class
   (.nb-qty-display, .brock-stepper__value, .nova-mini-basket__step-value) still sets its size,
   weight and colour; this only turns the field back into plain text until it is hovered or focused.
   Kept before those classes so they win; --qty-input-width on them sets the width (about 3 digits).
   ===================================================================================== */
.nova-qty-input {
  box-sizing: border-box;
  width: var(--qty-input-width, 2.75em);
  height: 32px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  cursor: text;
}
.nova-qty-input:hover { box-shadow: inset 0 -1.5px 0 color-mix(in srgb, currentColor 40%, transparent); }
.nova-qty-input:focus { outline: 2px solid var(--qty-input-focus, var(--color-primary-text, var(--color-primary))); outline-offset: -2px; box-shadow: none; }
/* Phones zoom the page into a field whose text is under 16px (iOS), so a touch screen gets 16px. */
@media (pointer: coarse) {
  input.nova-qty-input.nova-qty-input { font-size: max(16px, 1em); }
}
/* The unnamed submit ahead of the - button, so Enter in the number sends it without JavaScript. */
.nova-qty-default {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* =====================================================================================
   ui components: the shared storefront components in templates/nova/ui/ (contract:
   docs/developers/design/components.md). One sub-section per component, written only against
   that component's public tokens (--<component>-*), resolved on the component root. Themes
   re-skin a component by setting its tokens on :root, never by re-styling these selectors.
   ===================================================================================== */

/* --- ui: pager (ui/pager.html) --- */
.nova-pager {
  --pagerc-item-font: var(--pager-item-font, inherit);
  --pagerc-item-size: var(--pager-item-size, 15px);
  --pagerc-item-weight: var(--pager-item-weight, 500);
  display: var(--pager-display, block);
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--pager-justify, normal);
  gap: var(--pager-gap, normal);
  margin: var(--pager-margin, 56px 0 8px);
  padding: var(--pager-padding, 0);
  border-top: var(--pager-border-top, 0);
  font-size: var(--pager-font-size, inherit);
  text-align: var(--pager-align, center);
}
.nova-pager__summary {
  margin: var(--pager-summary-margin, 0 0 16px);
  color: var(--pager-summary-color, var(--color-gray-500));
  font-family: var(--pager-summary-font, inherit);
  font-size: var(--pager-summary-size, 14px);
  font-weight: var(--pager-summary-weight, inherit);
  letter-spacing: var(--pager-summary-ls, normal);
  text-transform: var(--pager-summary-case, none);
}
.nova-pager__list {
  display: var(--pager-list-display, inline-flex);
  flex-wrap: wrap;
  justify-content: var(--pager-list-justify, center);
  align-items: center;
  gap: var(--pager-list-gap, 6px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nova-pager__list > li:empty { display: none; }
.nova-pager__page,
.nova-pager__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pager-item-gap, 6px);
  min-width: var(--pager-item-box, 44px);
  height: var(--pager-item-box, 44px);
  padding: var(--pager-item-padding, 0 12px);
  border: var(--pager-item-border, 1.5px solid var(--color-gray-200));
  border-radius: var(--pager-item-radius, var(--radius-md));
  background: var(--pager-item-bg, transparent);
  box-shadow: var(--pager-item-shadow, none);
  color: var(--pager-item-color, var(--color-gray-900));
  font-family: var(--pagerc-item-font);
  font-size: var(--pagerc-item-size);
  font-weight: var(--pagerc-item-weight);
  font-variant-numeric: var(--pager-item-numeric, tabular-nums);
  text-decoration: none;
  transition: var(--pager-item-transition, border-color 150ms ease);
}
.nova-pager__step {
  font-family: var(--pager-step-font, var(--pagerc-item-font));
  font-size: var(--pager-step-size, var(--pagerc-item-size));
  font-weight: var(--pager-step-weight, var(--pagerc-item-weight));
  letter-spacing: var(--pager-step-ls, normal);
  text-transform: var(--pager-step-case, none);
}
.nova-pager__page:hover,
.nova-pager__step:hover {
  border-color: var(--pager-hover-border, var(--color-gray-900));
  color: var(--pager-hover-color, var(--color-gray-900));
  transform: var(--pager-hover-transform, none);
  box-shadow: var(--pager-hover-shadow, var(--pager-item-shadow, none));
}
.nova-pager__page.is-current {
  background: var(--pager-current-bg, var(--color-gray-900));
  border-color: var(--pager-current-border, var(--color-gray-900));
  color: var(--pager-current-color, var(--color-surface, #fff));
  font-weight: var(--pager-current-weight, 650);
  box-shadow: var(--pager-current-shadow, var(--pager-item-shadow, none));
  transform: var(--pager-current-transform, none);
}
.nova-pager__step svg { font-size: var(--pager-icon-size, 18px); }
.nova-pager__gap { color: var(--pager-gap-color, var(--color-gray-500)); padding: 0 4px; }
@media (max-width: 479px) { .nova-pager__step span { display: var(--pager-step-label-phone, none); } }

/* --- ui: sort (ui/sort.html) --- */
.nova-sort {
  --sortc-border: var(--sort-control-border, 1.5px solid var(--color-gray-300));
  display: var(--sort-display, flex);
  align-items: center;
  gap: var(--sort-gap, 10px);
  margin: var(--sort-margin, 0 0 0 auto);
}
.nova-sort__label {
  margin: var(--sort-label-margin, 0);
  color: var(--sort-label-color, var(--color-gray-500));
  font-family: var(--sort-label-family, inherit);
  font-size: var(--sort-label-size, 14px);
  font-weight: var(--sort-label-weight, inherit);
  line-height: var(--sort-label-lh, inherit);
  letter-spacing: var(--sort-label-ls, normal);
  text-transform: var(--sort-label-case, none);
  white-space: nowrap;
}
.nova-sort__field { position: relative; display: inline-flex; align-items: var(--sort-field-align, normal); }
.nova-sort__control {
  height: var(--sort-control-height, 40px);
  padding: var(--sort-control-padding, 0 38px 0 14px);
  border: var(--sortc-border);
  border-bottom: var(--sort-control-border-bottom, var(--sortc-border));
  border-radius: var(--sort-control-radius, var(--radius-md));
  background: var(--sort-control-bg, var(--color-white, #fff));
  color: var(--sort-control-color, var(--color-gray-900));
  font-family: var(--sort-control-family, var(--font-family-base));
  font-size: var(--sort-control-size, 14px);
  font-weight: var(--sort-control-weight, 500);
  line-height: var(--sort-control-lh, 1);
  letter-spacing: var(--sort-control-ls, normal);
  box-shadow: var(--sort-control-shadow, none);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.nova-sort__control:hover { border-color: var(--sort-control-hover-border, var(--color-gray-400)); }
.nova-sort__chevron {
  position: absolute;
  right: var(--sort-chevron-right, 12px);
  top: var(--sort-chevron-top, 50%);
  transform: var(--sort-chevron-transform, translateY(-50%));
  font-size: var(--sort-chevron-size, 16px);
  color: var(--sort-chevron-color, var(--color-gray-900));
  pointer-events: none;
}
@media (max-width: 479px) { .nova-sort__label { display: var(--sort-label-phone, none); } }
@media (max-width: 1023px) { .nova-sort__control { font-size: 16px; } }

/* --- ui: category nav (ui/category-nav.html) --- */
.nova-cat-nav {
  padding: var(--catnav-padding, 14px 0);
  font-size: var(--catnav-size, 14px);
}
.nova-cat-nav__title {
  margin: 0 0 8px;
  font-family: var(--catnav-title-family, var(--font-family-display));
  font-size: var(--catnav-title-size, 15px);
  font-weight: var(--catnav-title-weight, 650);
  line-height: var(--catnav-title-lh, var(--line-height-tight));
  letter-spacing: var(--catnav-title-ls, calc(var(--letter-spacing-heading) - 0.005em));
  text-transform: var(--catnav-title-case, none);
  color: var(--catnav-title-color, var(--color-gray-900));
}
.nova-cat-nav__up {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--catnav-up-padding, 4px 0);
  color: var(--catnav-text, var(--color-gray-700));
  text-decoration: none;
}
.nova-cat-nav__up:hover { color: var(--catnav-hover-color, var(--color-gray-900)); text-decoration: var(--catnav-hover-decoration, underline); }
.nova-cat-nav__up svg { font-size: var(--catnav-up-icon-size, inherit); }
.nova-cat-nav__current {
  margin: var(--catnav-current-margin, 2px 0);
  padding: var(--catnav-current-padding, 0);
  background: var(--catnav-current-bg, transparent);
  border-left: var(--catnav-current-border, 0);
  font-weight: var(--catnav-current-weight, 650);
  color: var(--catnav-current-color, var(--color-gray-900));
}
.nova-cat-nav__list {
  margin: var(--catnav-list-margin, 0 0 0 6px);
  padding: var(--catnav-list-padding, 0 0 0 12px);
  border-left: var(--catnav-list-border, 1px solid var(--color-gray-200));
  list-style: none;
}
.nova-cat-nav__list--siblings {
  margin-left: var(--catnav-siblings-margin, 0);
  padding-left: var(--catnav-siblings-padding, 0);
  border-left: var(--catnav-siblings-border, 0);
}
.nova-cat-nav__list a {
  display: block;
  padding: var(--catnav-item-padding, 4px 0);
  color: var(--catnav-text, var(--color-gray-700));
  text-decoration: none;
}
/* The current category inside its list; a leaf's siblings sit flush, so it needs no hang. */
.nova-cat-nav__list .nova-cat-nav__current {
  display: block;
  margin: var(--catnav-list-current-margin, 2px 0);
  padding: var(--catnav-list-current-padding, var(--catnav-item-padding, 4px 0));
}
.nova-cat-nav__list a:hover { color: var(--catnav-hover-color, var(--color-gray-900)); text-decoration: var(--catnav-hover-decoration, underline); }
.nova-cat-nav__list--siblings .nova-cat-nav__current { margin: 2px 0; }
/* A category with its result count, pushed to the right like a facet value's. */
.nova-cat-nav__list .nova-cat-nav__item { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nova-cat-nav__item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.nova-cat-nav__count {
  flex: none;
  font-family: var(--catnav-count-family, inherit);
  font-size: var(--catnav-count-size, 13px);
  font-weight: var(--catnav-count-weight, inherit);
  color: var(--catnav-count-color, var(--color-gray-500));
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1023px) {
  .nova-cat-nav__up, .nova-cat-nav__list .nova-cat-nav__item { min-height: var(--catnav-phone-min, 0); }
  .nova-cat-nav__list .nova-cat-nav__item { align-items: var(--catnav-phone-item-align, baseline); }
}

/* --- ui: account status (ui/account-status.html) --- */

/* --- ui: auth head (ui/auth-head.html) --- */
/* The account pages' rules are page-level (body, .btn, .form-control on pages with no storefront
   chrome), so they live in the fragment's own <style>, read --auth-* tokens and must not reach other
   pages. Only the alert borders' defaults live here. */
:root {
  --auth-warning-border: #fbbf24;
  --auth-info-border: #60a5fa;
}

/* --- ui: language menu (ui/language-menu.html) --- */
/* The header's flag menu: a native disclosure, so it needs no Bootstrap JS. The defaults are Nova's
   header; a theme re-skins it with the --lang-* tokens on .nova-lang. */
.nova-lang { position: relative; }
.nova-lang__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--lang-toggle-padding, var(--space-2));
  border-radius: var(--lang-toggle-radius, var(--radius-md));
  cursor: pointer;
  list-style: none;
  color: var(--lang-toggle-color, var(--color-gray-700));
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}
.nova-lang__toggle::-webkit-details-marker { display: none; }
.nova-lang__toggle:hover,
.nova-lang[open] .nova-lang__toggle { background: var(--lang-toggle-hover-bg, var(--color-gray-100)); }
.nova-lang__toggle:focus-visible { outline: 2px solid var(--lang-focus, var(--color-primary)); outline-offset: 2px; }
.nova-lang__chevron { display: var(--lang-chevron-display, inline); width: 10px; height: 6px; transition: transform var(--transition-fast); }
.nova-lang[open] .nova-lang__chevron { transform: rotate(180deg); }
.nova-flag { width: 20px; height: 15px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); overflow: hidden; }
.nova-flag--emoji { box-shadow: none; font-size: 16px; line-height: 15px; text-align: center; }
.nova-lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 1050;
  min-width: 11rem;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--lang-menu-bg, white);
  border: 1px solid var(--lang-menu-border, var(--color-gray-200));
  border-radius: var(--lang-menu-radius, var(--radius-lg));
  box-shadow: var(--lang-menu-shadow, var(--shadow-lg));
}
.nova-lang__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--lang-option-color, var(--color-gray-800));
  text-decoration: none;
  font-size: var(--font-size-sm);
}
.nova-lang__option:hover,
.nova-lang__option:focus-visible {
  background: var(--lang-option-hover-bg, var(--color-gray-100));
  color: var(--lang-option-hover-color, var(--color-gray-900));
}
.nova-lang__option[aria-current="true"] { font-weight: var(--font-weight-semibold); }
@media (max-width: 1023px) {
  .nova-lang__code { display: none; }
}

/* --- ui: mini basket (ui/mini-basket.html) --- */
/* A full-height drawer: titled "Your basket" with an item count, each line editable in place, subtotal,
   checkout and clear basket pinned to the foot. Prices still being worked out show a shimmer (.is-loading)
   until the theme script fills them from /rest/order/prices. The palette is resolved on both roots, since the
   content is also rendered (and swapped) on its own. Defaults are Brock's. */
.nova-mini-basket,
.nova-mini-basket__content {
  --mini-basketc-ink: var(--mini-basket-ink, var(--color-gray-900));
  --mini-basketc-muted: var(--mini-basket-muted, var(--color-gray-500));
  --mini-basketc-sale: var(--mini-basket-sale, var(--color-error));
  --mini-basketc-line: var(--mini-basket-line, var(--color-gray-200));
  --mini-basketc-line-strong: var(--mini-basket-line-strong, var(--color-gray-300));
  --mini-basketc-tile: var(--mini-basket-tile, var(--color-gray-100));
  --mini-basketc-subtle: var(--mini-basket-subtle, var(--color-gray-50));
  --mini-basketc-surface: var(--mini-basket-surface, #fff);
  --mini-basketc-ease: var(--mini-basket-ease, cubic-bezier(0.2, 0, 0, 1));
}
.nova-mini-basket { position: fixed; inset: 0; z-index: var(--mini-basket-z, 1075); }
.nova-mini-basket[hidden] { display: none; }
.nova-mini-basket__scrim {
  position: absolute;
  inset: 0;
  background: var(--mini-basket-scrim-bg, rgba(11, 14, 12, 0.45));
  opacity: 0;
  transition: opacity var(--mini-basket-scrim-duration, 260ms) var(--mini-basketc-ease);
}
.nova-mini-basket.is-open .nova-mini-basket__scrim { opacity: 1; }
.nova-mini-basket__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--mini-basket-panel-width, min(440px, 100vw));
  border-left: var(--mini-basket-panel-border, 0);
  background: var(--mini-basket-panel-bg, var(--mini-basketc-surface));
  box-shadow: var(--mini-basket-panel-shadow, var(--shadow-xl));
  transform: translateX(100%);
  transition: transform var(--mini-basket-panel-duration, 300ms) var(--mini-basketc-ease);
}
.nova-mini-basket.is-open .nova-mini-basket__panel { transform: none; }
.nova-mini-basket__content { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.nova-mini-basket__content.is-busy { cursor: progress; }

.nova-mini-basket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--mini-basket-head-padding, 14px 14px 14px 24px);
  border-bottom: var(--mini-basket-head-border, 1px solid var(--mini-basketc-line));
  background: var(--mini-basket-head-bg, transparent);
}
.nova-mini-basket__title {
  display: flex;
  align-items: var(--mini-basket-title-align, center);
  gap: 10px;
  margin: 0;
  font-family: var(--mini-basket-title-font, var(--font-family-display));
  font-size: var(--mini-basket-title-size, 19px);
  font-weight: var(--mini-basket-title-weight, 700);
  line-height: var(--mini-basket-title-lh, var(--line-height-tight));
  letter-spacing: var(--mini-basket-title-ls, -0.01em);
  text-transform: var(--mini-basket-title-case, inherit);
  color: var(--mini-basket-title-color, var(--mini-basketc-ink));
}
.nova-mini-basket__title:focus { outline: none; }
.nova-mini-basket__title-icon { font-size: var(--mini-basket-title-icon-size, 22px); }
/* Scoped to the content so it wins over the theme's <ns>-num, which loads later. */
.nova-mini-basket__content .nova-mini-basket__count {
  padding: var(--mini-basket-count-padding, 3px 10px);
  border: var(--mini-basket-count-border, 0);
  border-radius: var(--mini-basket-count-radius, 999px);
  background: var(--mini-basket-count-bg, var(--mini-basketc-tile));
  font-family: var(--mini-basket-count-font, inherit);
  font-size: var(--mini-basket-count-size, 13px);
  font-weight: var(--mini-basket-count-weight, 600);
  letter-spacing: var(--mini-basket-count-ls, 0);
  text-transform: var(--mini-basket-count-case, inherit);
  color: var(--mini-basket-count-color, var(--mini-basketc-ink));
}

.nova-mini-basket__alert {
  margin: 12px 24px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--mini-basketc-sale) 30%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--mini-basketc-sale) 7%, var(--mini-basketc-surface));
  color: var(--mini-basketc-sale);
  font-size: 14px;
}
.nova-mini-basket__alert[hidden] { display: none; }

.nova-mini-basket__lines {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 4px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.nova-mini-basket__line {
  display: grid;
  grid-template-columns: var(--mini-basket-line-columns, 76px minmax(0, 1fr) auto);
  gap: var(--mini-basket-line-gap, 14px);
  align-items: start;
  margin-inline: -10px;
  padding: var(--mini-basket-line-padding, 16px 10px);
  border-bottom: 1px solid var(--mini-basketc-line);
  border-radius: var(--mini-basket-line-radius, var(--radius-md));
  transition: opacity 160ms var(--mini-basketc-ease);
}
.nova-mini-basket__line:last-child { border-bottom: 0; }
.nova-mini-basket__line.is-busy { opacity: 0.45; pointer-events: none; }
/* The line just added (opened from the "added" pop-over): a brief tint so it's easy to find in the list. */
.nova-mini-basket__line.is-new { animation: nova-mini-basket-new 2.4s var(--mini-basketc-ease); }
@keyframes nova-mini-basket-new {
  0%, 40% { background: color-mix(in srgb, var(--color-success) 10%, transparent); }
  100% { background: transparent; }
}
.nova-mini-basket__media {
  display: block;
  aspect-ratio: var(--mini-basket-media-ratio, var(--product-image-ratio));
  border: var(--mini-basket-media-border, 0);
  border-radius: var(--mini-basket-media-radius, var(--radius-sm));
  background: var(--mini-basket-media-bg, var(--mini-basketc-tile));
  overflow: hidden;
}
.nova-mini-basket__media img {
  width: 100%;
  height: 100%;
  object-fit: var(--mini-basket-media-fit, contain);
  mix-blend-mode: var(--mini-basket-media-blend, multiply);
}
.nova-mini-basket__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nova-mini-basket__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--mini-basket-name-font, inherit);
  font-size: var(--mini-basket-name-size, 15px);
  font-weight: var(--mini-basket-name-weight, 600);
  line-height: var(--mini-basket-name-lh, 1.35);
  color: var(--mini-basketc-ink);
  text-decoration: none;
}
.nova-mini-basket__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.nova-mini-basket__meta { margin: 0; font-size: var(--mini-basket-meta-size, 13px); color: var(--mini-basketc-muted); }
.nova-mini-basket__note { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: var(--color-warning); }
.nova-mini-basket__note.is-out { color: var(--mini-basketc-sale); }
.nova-mini-basket__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; }
.nova-mini-basket__qty { font-size: 13px; color: var(--mini-basketc-muted); }
.nova-mini-basket__remove { margin: 0; }
/* The button is the theme's link (or text) button; only its size and colour change here. */
.nova-mini-basket__remove button {
  font-size: var(--mini-basket-remove-size, 13px);
  color: var(--mini-basket-remove-color, var(--mini-basketc-ink));
}
.nova-mini-basket__stepper {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: var(--mini-basket-stepper-border, 1px solid var(--mini-basketc-line-strong));
  border-radius: var(--mini-basket-stepper-radius, var(--radius-md));
  background: var(--mini-basket-stepper-bg, var(--mini-basketc-surface));
}
.nova-mini-basket__step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mini-basketc-ink);
  font-size: var(--mini-basket-step-size, 16px);
  cursor: pointer;
}
.nova-mini-basket__step-btn:hover:not([disabled]) { background: var(--mini-basketc-subtle); }
.nova-mini-basket__step-btn[disabled] { color: var(--color-gray-400); cursor: not-allowed; }
.nova-mini-basket__step-value {
  --qty-input-width: var(--mini-basket-step-input-width, 2.2em);
  min-width: var(--mini-basket-step-value-width, 26px);
  text-align: center;
  font-family: var(--mini-basket-step-value-font, inherit);
  font-size: 14px;
  font-weight: var(--mini-basket-step-value-weight, 650);
  font-variant-numeric: var(--mini-basket-step-value-numeric, tabular-nums);
  color: var(--mini-basketc-ink);
}
/* Scoped to the content so it wins over the theme's <ns>-num, which loads later. */
.nova-mini-basket__content .nova-mini-basket__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--mini-basket-price-font, inherit);
  font-size: var(--mini-basket-price-size, 15px);
  font-weight: var(--mini-basket-price-weight, 700);
  color: var(--mini-basketc-ink);
  white-space: nowrap;
}
.nova-mini-basket__was { font-size: 13px; font-weight: 500; color: var(--mini-basketc-muted); }
.nova-mini-basket__now.is-sale { color: var(--mini-basketc-sale); }

.nova-mini-basket .is-loading > span:first-child { display: none; }
.nova-mini-basket .is-loading [data-n]::before {
  content: "";
  display: inline-block;
  width: 3.4em;
  height: 0.85em;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--mini-basketc-tile) 25%, var(--mini-basketc-line) 50%, var(--mini-basketc-tile) 75%) 0 0 / 200% 100%;
  vertical-align: -0.05em;
  animation: nova-mini-basket-shimmer 1.2s linear infinite;
}
@keyframes nova-mini-basket-shimmer { to { background-position: -200% 0; } }

.nova-mini-basket__foot {
  display: grid;
  gap: 10px;
  padding: var(--mini-basket-foot-padding, 16px 24px calc(20px + env(safe-area-inset-bottom)));
  border-top: var(--mini-basket-foot-border, 1px solid var(--mini-basketc-line));
  background: var(--mini-basket-foot-bg, var(--mini-basketc-surface));
  box-shadow: var(--mini-basket-foot-shadow, 0 -12px 24px -20px rgba(19, 23, 20, 0.35));
}
.nova-mini-basket__promise {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: var(--mini-basket-promise-padding, 10px 12px);
  border: var(--mini-basket-promise-border, 0);
  border-radius: var(--mini-basket-promise-radius, var(--radius-md));
  background: var(--mini-basket-promise-bg, var(--mini-basketc-subtle));
  font-size: var(--mini-basket-promise-size, 13px);
  font-weight: var(--mini-basket-promise-weight, inherit);
  color: var(--mini-basket-promise-color, var(--mini-basketc-ink));
}
.nova-mini-basket__promise svg { flex: none; font-size: 18px; }
.nova-mini-basket__totals { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.nova-mini-basket__totals dt {
  font-family: var(--mini-basket-total-label-font, inherit);
  font-size: var(--mini-basket-total-label-size, 16px);
  font-weight: var(--mini-basket-total-label-weight, 600);
  letter-spacing: var(--mini-basket-total-label-ls, inherit);
  text-transform: var(--mini-basket-total-label-case, inherit);
  color: var(--mini-basketc-ink);
}
.nova-mini-basket__totals dd {
  margin: 0;
  font-family: var(--mini-basket-total-font, inherit);
  font-size: var(--mini-basket-total-size, 21px);
  font-weight: var(--mini-basket-total-weight, 750);
  line-height: var(--mini-basket-total-lh, inherit);
  color: var(--mini-basketc-ink);
}
.nova-mini-basket__small { margin: -6px 0 4px; font-size: 13px; color: var(--mini-basketc-muted); }

/* Clear basket: a quiet text toggle that opens the question in place */
.nova-mini-basket__clear { text-align: center; }
.nova-mini-basket__clear-toggle {
  display: inline-block;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--mini-basket-clear-size, 13px);
  letter-spacing: var(--mini-basket-clear-ls, inherit);
  text-transform: var(--mini-basket-clear-case, inherit);
  color: var(--mini-basket-clear-color, var(--mini-basketc-muted));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nova-mini-basket__clear-toggle::-webkit-details-marker { display: none; }
.nova-mini-basket__clear-close, .nova-mini-basket__clear[open] .nova-mini-basket__clear-open { display: none; }
.nova-mini-basket__clear[open] .nova-mini-basket__clear-close { display: inline; }
.nova-mini-basket__clear-form { display: grid; gap: 8px; }
.nova-mini-basket__clear-form p { margin: 0; font-size: 14px; font-weight: var(--mini-basket-clear-question-weight, 600); }

.nova-mini-basket__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-block: auto;
  padding: 48px 32px;
  text-align: center;
}
.nova-mini-basket__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: var(--mini-basketc-tile);
  color: var(--mini-basketc-muted);
  font-size: 32px;
}
.nova-mini-basket__empty-title {
  margin: 0;
  font-family: var(--mini-basket-empty-title-font, inherit);
  font-size: var(--mini-basket-empty-title-size, 18px);
  font-weight: var(--mini-basket-empty-title-weight, 700);
  color: var(--mini-basketc-ink);
}
.nova-mini-basket__empty-body { margin: 0 0 12px; color: var(--mini-basketc-muted); }

@media (max-width: 479px) {
  .nova-mini-basket__head { padding: var(--mini-basket-head-padding-phone, 14px 14px 14px 16px); }
  .nova-mini-basket__lines { padding-inline: 16px; }
  .nova-mini-basket__foot { padding: var(--mini-basket-foot-padding-phone, 16px 16px calc(20px + env(safe-area-inset-bottom))); }
  .nova-mini-basket__alert { margin-inline: 16px; }
  .nova-mini-basket__line {
    grid-template-columns: var(--mini-basket-line-columns-phone, 64px minmax(0, 1fr) auto);
    gap: var(--mini-basket-line-gap-phone, 12px);
  }
}

/* --- ui: facet rail (ui/facet-rail.html) --- */
/* Block nova-facetrail: .nova-facet-rail is Nova's own listing column. Defaults are Brock's look. */
.nova-facetrail {
  --facet-railc-ink: var(--facet-rail-ink, var(--color-gray-900));
  --facet-railc-text: var(--facet-rail-text, var(--color-gray-700));
  --facet-railc-muted: var(--facet-rail-muted, var(--color-gray-500));
  --facet-railc-line: var(--facet-rail-line, var(--color-gray-200));
  --facet-railc-line-strong: var(--facet-rail-line-strong, var(--color-gray-300));
  --facet-railc-surface: var(--facet-rail-surface, var(--color-surface, #fff));
  --facet-railc-ease: var(--facet-rail-ease, ease);
  --facet-railc-control: var(--facet-rail-control, 44px);
}
.nova-facetrail__group { border-bottom: var(--facet-rail-group-border, 1px solid var(--facet-railc-line)); }
.nova-facetrail__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--facet-rail-title-min-height, 52px);
  cursor: pointer;
  list-style: none;
  font-family: var(--facet-rail-title-font, inherit);
  font-size: var(--facet-rail-title-size, 15px);
  font-weight: var(--facet-rail-title-weight, 650);
  line-height: var(--facet-rail-title-line-height, inherit);
  letter-spacing: var(--facet-rail-title-ls, inherit);
  text-transform: var(--facet-rail-title-case, inherit);
  color: var(--facet-rail-title-color, var(--facet-railc-ink));
}
.nova-facetrail__title::-webkit-details-marker { display: none; }
.nova-facetrail__title > span:first-child { flex: 1 1 auto; }
.nova-facetrail__selected {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: var(--facet-rail-badge-border, 0);
  border-radius: 999px;
  background: var(--facet-rail-badge-bg, var(--facet-railc-ink));
  color: var(--facet-rail-badge-color, var(--facet-railc-surface));
  font-size: 12px;
  font-weight: 700;
}
.nova-facetrail__chevron { font-size: 18px; color: var(--facet-rail-chevron-color, var(--facet-railc-muted)); transition: transform 200ms var(--facet-railc-ease); }
.nova-facetrail__group[open] .nova-facetrail__chevron { transform: rotate(180deg); }
.nova-facetrail__values {
  display: var(--facet-rail-values-display, block);
  flex-wrap: var(--facet-rail-values-wrap, nowrap);
  gap: var(--facet-rail-values-gap, normal);
  margin: 0;
  padding: var(--facet-rail-values-padding, 0 0 14px);
  list-style: none;
}
/* A long group folds to six values once facet-sheet.js has marked it (data-facet-folded) and shown its
   "Show all", which adds .is-expanded; without the script every value is listed */
.nova-facetrail__values.is-long[data-facet-folded]:not(.is-expanded) li:nth-child(n+7) { display: none; }
.nova-facetrail__value {
  display: var(--facet-rail-value-display, flex);
  align-items: center;
  gap: var(--facet-rail-value-gap, 12px);
  min-height: var(--facet-rail-value-min-height, 40px);
  padding: var(--facet-rail-value-padding, 4px 0);
  border: var(--facet-rail-value-border, 0);
  border-radius: var(--facet-rail-value-radius, 0);
  background: var(--facet-rail-value-bg, transparent);
  box-shadow: var(--facet-rail-value-shadow, none);
  color: var(--facet-rail-value-color, var(--facet-railc-text));
  font-size: var(--facet-rail-value-size, 15px);
  font-weight: var(--facet-rail-value-weight, inherit);
  text-decoration: none;
  transition: var(--facet-rail-value-transition, color var(--transition-fast));
}
.nova-facetrail__value:hover {
  color: var(--facet-rail-value-hover-color, var(--facet-railc-ink));
  transform: var(--facet-rail-value-hover-transform, none);
  box-shadow: var(--facet-rail-value-hover-shadow, var(--facet-rail-value-shadow, none));
}
.nova-facetrail__box {
  flex: none;
  display: var(--facet-rail-box-display, inline-flex);
  align-items: center;
  justify-content: center;
  width: var(--facet-rail-box-size, 20px);
  height: var(--facet-rail-box-size, 20px);
  border: 1.5px solid var(--facet-railc-line-strong);
  border-radius: var(--facet-rail-box-radius, var(--radius-sm));
  background: var(--facet-rail-box-bg, var(--facet-railc-surface));
  color: transparent;
  font-size: var(--facet-rail-box-icon-size, 14px);
  transition: border-color 150ms var(--facet-railc-ease), background-color 150ms var(--facet-railc-ease);
}
.nova-facetrail__box svg { stroke-width: 2.5; }
.nova-facetrail__value:hover .nova-facetrail__box { border-color: var(--facet-rail-box-hover-border, var(--facet-railc-ink)); }
.is-selected > .nova-facetrail__value {
  background: var(--facet-rail-selected-bg, var(--facet-rail-value-bg, transparent));
  box-shadow: var(--facet-rail-selected-shadow, var(--facet-rail-value-shadow, none));
  color: var(--facet-rail-selected-color, var(--facet-railc-ink));
  font-weight: var(--facet-rail-selected-weight, 600);
  transform: var(--facet-rail-selected-transform, none);
}
.is-selected > .nova-facetrail__value .nova-facetrail__box {
  background: var(--facet-rail-box-checked-bg, var(--facet-railc-ink));
  border-color: var(--facet-rail-box-checked-border, var(--facet-railc-ink));
  color: var(--facet-rail-box-checked-color, var(--facet-railc-surface));
}
.nova-facetrail__label { flex: var(--facet-rail-label-flex, 1 1 auto); min-width: 0; overflow-wrap: anywhere; }
.nova-facetrail__count {
  flex: none;
  color: var(--facet-rail-count-color, var(--facet-railc-muted));
  font-family: var(--facet-rail-count-font, inherit);
  font-size: var(--facet-rail-count-size, 13px);
  font-weight: var(--facet-rail-count-weight, inherit);
  font-variant-numeric: tabular-nums;
}
.is-selected > .nova-facetrail__value .nova-facetrail__count {
  color: var(--facet-rail-count-selected-color, var(--facet-rail-count-color, var(--facet-railc-muted)));
}
.nova-facetrail__more {
  margin: -6px 0 16px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--facet-rail-more-color, var(--facet-railc-ink));
  font-family: var(--facet-rail-more-font, inherit);
  font-size: var(--facet-rail-more-size, 14px);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Filters the results chose show first; the rest sit behind "More filters (n)" */
.nova-facetrail__more-groups { border-bottom: var(--facet-rail-more-groups-border, 1px solid var(--facet-railc-line)); }
.nova-facetrail__more-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--facet-rail-more-toggle-min-height, 52px);
  cursor: pointer;
  list-style: none;
  color: var(--facet-railc-ink);
  font-size: var(--facet-rail-more-toggle-size, 15px);
  font-weight: var(--facet-rail-more-toggle-weight, 600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nova-facetrail__more-toggle::-webkit-details-marker { display: none; }
.nova-facetrail__more-toggle > span { flex: 1 1 auto; }
.nova-facetrail__more-groups[open] > .nova-facetrail__more-toggle .nova-facetrail__chevron { transform: rotate(180deg); }
.nova-facetrail__more-groups > .nova-facetrail__group:last-child { border-bottom: 0; }
/* Min/max inputs with their captions above, the dash and Go on the input row */
.nova-facetrail__range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  grid-template-rows: auto var(--facet-railc-control);
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  padding: 0 0 16px;
}
.nova-facetrail__range-field { display: contents; }
.nova-facetrail__range-caption { grid-row: 1; color: var(--facet-railc-muted); font-size: 12px; }
.nova-facetrail__range-field:first-of-type .nova-facetrail__range-caption { grid-column: 1; }
.nova-facetrail__range-field:last-of-type .nova-facetrail__range-caption { grid-column: 3; }
.nova-facetrail__range-input {
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--facet-railc-control);
  padding: var(--facet-rail-range-input-padding, 0 10px);
  border: var(--facet-rail-range-input-border, 1px solid var(--facet-railc-line-strong));
  border-radius: var(--facet-rail-range-input-radius, var(--radius-md));
  background: var(--facet-railc-surface);
}
.nova-facetrail__range-field:first-of-type .nova-facetrail__range-input { grid-column: 1; }
.nova-facetrail__range-field:last-of-type .nova-facetrail__range-input { grid-column: 3; }
.nova-facetrail__range-input:focus-within {
  border-color: var(--facet-railc-ink);
  box-shadow: var(--facet-rail-focus-ring, 0 0 0 3px var(--color-gray-200));
}
.nova-facetrail__range-symbol { color: var(--facet-railc-muted); font-size: 14px; }
.nova-facetrail__range-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--facet-railc-ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.nova-facetrail__range-to { grid-row: 2; grid-column: 2; color: var(--facet-railc-muted); }
.nova-facetrail__range-go { grid-row: 2; grid-column: 4; height: var(--facet-railc-control); }

/* --- ui: button (ui/button.html) --- */
/* .nova-button: the shared button (contract: the header of ui/button.html). The root and each variant
   resolve the look into --buttonc-* on the element, and the rules read only those. A variant token
   falls back to the theme's base token (--button-bg ...), then to the default here, the way a theme's
   variant rule used to override only what it set; a hover token falls back to the base hover token,
   then to the variant at rest; a size falls back to the base size. The defaults are Brock's look on
   Nova's semantic tokens. Nova's own .nova-btn reads --button-* tokens too, in the BUTTONS section
   near the top: a theme sets those on .nova-btn and these on .nova-button. */
.nova-button {
  --buttonc-height: var(--button-height, 48px);
  --buttonc-padding: var(--button-padding, 0 20px);
  --buttonc-font-size: var(--button-font-size, 15px);
  --buttonc-font-weight: var(--button-font-weight, 600);
  --buttonc-letter-spacing: var(--button-letter-spacing, -0.005em);
  --buttonc-decoration: var(--button-text-decoration, none);
  --buttonc-underline-offset: var(--button-underline-offset, auto);
  --buttonc-bg: var(--button-bg, transparent);
  --buttonc-color: var(--button-color, var(--color-text-strong));
  --buttonc-border-color: var(--button-border-color, transparent);
  --buttonc-shadow: var(--button-shadow, none);
  --buttonc-hover-bg: var(--button-hover-bg, var(--buttonc-bg));
  --buttonc-hover-color: var(--button-hover-color, var(--buttonc-color));
  --buttonc-hover-border-color: var(--button-hover-border-color, var(--buttonc-border-color));
  --buttonc-hover-shadow: var(--button-hover-shadow, var(--buttonc-shadow));
  --buttonc-active-shadow: var(--button-active-shadow, var(--buttonc-hover-shadow));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap, 8px);
  min-height: var(--buttonc-height);
  padding: var(--buttonc-padding);
  border: var(--button-border-width, 1.5px) var(--button-border-style, solid) var(--buttonc-border-color);
  border-radius: var(--button-radius, var(--radius-md));
  background: var(--buttonc-bg);
  color: var(--buttonc-color);
  box-shadow: var(--buttonc-shadow);
  font: var(--buttonc-font-weight) var(--buttonc-font-size)/var(--button-line-height, 1.1) var(--button-font-family, var(--font-family-base));
  letter-spacing: var(--buttonc-letter-spacing);
  text-transform: var(--button-text-transform, none);
  text-decoration: var(--buttonc-decoration);
  text-underline-offset: var(--buttonc-underline-offset);
  white-space: var(--button-white-space, nowrap);
  cursor: pointer;
  transition: var(--button-transition, background-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1), color 150ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 150ms cubic-bezier(0.2, 0.7, 0.2, 1));
}

.nova-button--buy {
  --buttonc-bg: var(--button-buy-bg, var(--button-bg, var(--color-primary)));
  --buttonc-color: var(--button-buy-color, var(--button-color, var(--color-on-primary)));
  --buttonc-border-color: var(--button-buy-border-color, var(--button-border-color, transparent));
  --buttonc-shadow: var(--button-buy-shadow, var(--button-shadow, none));
  --buttonc-font-weight: var(--button-buy-font-weight, var(--button-font-weight, 600));
  --buttonc-hover-bg: var(--button-buy-hover-bg, var(--button-hover-bg, var(--color-primary-dark)));
  --buttonc-hover-color: var(--button-buy-hover-color, var(--button-hover-color, var(--buttonc-color)));
  --buttonc-hover-border-color: var(--button-buy-hover-border-color, var(--button-hover-border-color, var(--buttonc-border-color)));
  --buttonc-hover-shadow: var(--button-buy-hover-shadow, var(--button-hover-shadow, var(--buttonc-shadow)));
  --buttonc-active-shadow: var(--button-buy-active-shadow, var(--button-active-shadow, var(--buttonc-hover-shadow)));
}

.nova-button--ink {
  --buttonc-bg: var(--button-ink-bg, var(--button-bg, var(--color-text-strong)));
  --buttonc-color: var(--button-ink-color, var(--button-color, var(--color-surface)));
  --buttonc-border-color: var(--button-ink-border-color, var(--button-border-color, transparent));
  --buttonc-shadow: var(--button-ink-shadow, var(--button-shadow, none));
  --buttonc-font-weight: var(--button-ink-font-weight, var(--button-font-weight, 600));
  --buttonc-hover-bg: var(--button-ink-hover-bg, var(--button-hover-bg, var(--color-gray-800)));
  --buttonc-hover-color: var(--button-ink-hover-color, var(--button-hover-color, var(--buttonc-color)));
  --buttonc-hover-border-color: var(--button-ink-hover-border-color, var(--button-hover-border-color, var(--buttonc-border-color)));
  --buttonc-hover-shadow: var(--button-ink-hover-shadow, var(--button-hover-shadow, var(--buttonc-shadow)));
  --buttonc-active-shadow: var(--button-ink-active-shadow, var(--button-active-shadow, var(--buttonc-hover-shadow)));
}

.nova-button--outline {
  --buttonc-bg: var(--button-outline-bg, var(--button-bg, var(--color-surface)));
  --buttonc-color: var(--button-outline-color, var(--button-color, var(--color-text-strong)));
  --buttonc-border-color: var(--button-outline-border-color, var(--button-border-color, var(--color-text-strong)));
  --buttonc-shadow: var(--button-outline-shadow, var(--button-shadow, none));
  --buttonc-font-weight: var(--button-outline-font-weight, var(--button-font-weight, 600));
  --buttonc-hover-bg: var(--button-outline-hover-bg, var(--button-hover-bg, var(--color-text-strong)));
  --buttonc-hover-color: var(--button-outline-hover-color, var(--button-hover-color, var(--color-surface)));
  --buttonc-hover-border-color: var(--button-outline-hover-border-color, var(--button-hover-border-color, var(--buttonc-border-color)));
  --buttonc-hover-shadow: var(--button-outline-hover-shadow, var(--button-hover-shadow, var(--buttonc-shadow)));
  --buttonc-active-shadow: var(--button-outline-active-shadow, var(--button-active-shadow, var(--buttonc-hover-shadow)));
}

.nova-button--quiet {
  --buttonc-bg: var(--button-quiet-bg, var(--button-bg, var(--color-gray-50)));
  --buttonc-color: var(--button-quiet-color, var(--button-color, var(--color-text-strong)));
  --buttonc-border-color: var(--button-quiet-border-color, var(--button-border-color, var(--color-gray-200)));
  --buttonc-shadow: var(--button-quiet-shadow, var(--button-shadow, none));
  --buttonc-font-weight: var(--button-quiet-font-weight, var(--button-font-weight, 600));
  --buttonc-hover-bg: var(--button-quiet-hover-bg, var(--button-hover-bg, var(--color-gray-100)));
  --buttonc-hover-color: var(--button-quiet-hover-color, var(--button-hover-color, var(--buttonc-color)));
  --buttonc-hover-border-color: var(--button-quiet-hover-border-color, var(--button-hover-border-color, var(--color-gray-300)));
  --buttonc-hover-shadow: var(--button-quiet-hover-shadow, var(--button-hover-shadow, var(--buttonc-shadow)));
  --buttonc-active-shadow: var(--button-quiet-active-shadow, var(--button-active-shadow, var(--buttonc-hover-shadow)));
}

.nova-button--text {
  --buttonc-bg: var(--button-text-bg, var(--button-bg, transparent));
  --buttonc-color: var(--button-text-color, var(--button-color, var(--color-gray-600)));
  --buttonc-border-color: var(--button-text-border-color, var(--button-border-color, transparent));
  --buttonc-shadow: var(--button-text-shadow, var(--button-shadow, none));
  --buttonc-font-weight: var(--button-text-font-weight, var(--button-font-weight, 600));
  --buttonc-letter-spacing: var(--button-text-letter-spacing, var(--button-letter-spacing, -0.005em));
  --buttonc-decoration: var(--button-text-text-decoration, underline);
  --buttonc-underline-offset: var(--button-text-underline-offset, 3px);
  --buttonc-hover-bg: var(--button-text-hover-bg, var(--button-hover-bg, var(--buttonc-bg)));
  --buttonc-hover-color: var(--button-text-hover-color, var(--button-hover-color, var(--color-text-strong)));
  --buttonc-hover-border-color: var(--button-text-hover-border-color, var(--button-hover-border-color, var(--buttonc-border-color)));
  --buttonc-hover-shadow: var(--button-text-hover-shadow, var(--button-hover-shadow, var(--buttonc-shadow)));
  --buttonc-active-shadow: var(--button-text-active-shadow, var(--button-active-shadow, var(--buttonc-hover-shadow)));
}

.nova-button--ghost {
  --buttonc-bg: var(--button-ghost-bg, var(--button-bg, transparent));
  --buttonc-color: var(--button-ghost-color, var(--button-color, white));
  --buttonc-border-color: var(--button-ghost-border-color, var(--button-border-color, rgba(255, 255, 255, 0.75)));
  --buttonc-shadow: var(--button-ghost-shadow, var(--button-shadow, none));
  --buttonc-font-weight: var(--button-ghost-font-weight, var(--button-font-weight, 600));
  --buttonc-hover-bg: var(--button-ghost-hover-bg, var(--button-hover-bg, rgba(255, 255, 255, 0.12)));
  --buttonc-hover-color: var(--button-ghost-hover-color, var(--button-hover-color, var(--buttonc-color)));
  --buttonc-hover-border-color: var(--button-ghost-hover-border-color, var(--button-hover-border-color, var(--buttonc-border-color)));
  --buttonc-hover-shadow: var(--button-ghost-hover-shadow, var(--button-hover-shadow, var(--buttonc-shadow)));
  --buttonc-active-shadow: var(--button-ghost-active-shadow, var(--button-active-shadow, var(--buttonc-hover-shadow)));
}

.nova-button--light {
  --buttonc-bg: var(--button-light-bg, var(--button-bg, white));
  --buttonc-color: var(--button-light-color, var(--button-color, var(--color-primary-dark)));
  --buttonc-border-color: var(--button-light-border-color, var(--button-border-color, transparent));
  --buttonc-shadow: var(--button-light-shadow, var(--button-shadow, none));
  --buttonc-font-weight: var(--button-light-font-weight, var(--button-font-weight, 600));
  --buttonc-hover-bg: var(--button-light-hover-bg, var(--button-hover-bg, var(--color-gray-100)));
  --buttonc-hover-color: var(--button-light-hover-color, var(--button-hover-color, var(--buttonc-color)));
  --buttonc-hover-border-color: var(--button-light-hover-border-color, var(--button-hover-border-color, var(--buttonc-border-color)));
  --buttonc-hover-shadow: var(--button-light-hover-shadow, var(--button-hover-shadow, var(--buttonc-shadow)));
  --buttonc-active-shadow: var(--button-light-active-shadow, var(--button-active-shadow, var(--buttonc-hover-shadow)));
}

.nova-button--sm {
  --buttonc-height: var(--button-sm-height, var(--button-height, 38px));
  --buttonc-padding: var(--button-sm-padding, var(--button-padding, 0 14px));
  --buttonc-font-size: var(--button-sm-font-size, var(--button-font-size, 14px));
}

.nova-button--lg {
  --buttonc-height: var(--button-lg-height, var(--button-height, 56px));
  --buttonc-padding: var(--button-lg-padding, var(--button-padding, 0 24px));
  --buttonc-font-size: var(--button-lg-font-size, var(--button-font-size, 16px));
}

.nova-button--block {
  display: var(--button-block-display, flex);
  width: 100%;
}

.nova-button:hover {
  background: var(--buttonc-hover-bg);
  border-color: var(--buttonc-hover-border-color);
  color: var(--buttonc-hover-color);
  box-shadow: var(--buttonc-hover-shadow);
  transform: var(--button-hover-transform, none);
}

.nova-button:active {
  transform: var(--button-active-transform, translateY(1px));
  box-shadow: var(--buttonc-active-shadow);
}

.nova-button[disabled],
.nova-button[aria-disabled="true"] {
  opacity: var(--button-disabled-opacity, 0.45);
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--button-disabled-shadow, var(--buttonc-shadow));
}

.nova-button[aria-busy="true"] {
  opacity: var(--button-busy-opacity, 0.7);
  cursor: var(--button-busy-cursor, progress);
}

/* --- ui: footer (ui/footer.html) --- */
/* Classes are .nova-sitefooter*: .nova-footer* is Nova's own footer design. The reassurance row, the
   content block, the legal strip and the payment marks, all against --footer-* tokens (see the header
   of ui/footer.html). Defaults are Brock's. */
.nova-sitefooter {
  margin-top: var(--footer-margin-top, 0);
  border-top: var(--footer-border-top, 0);
}

.nova-sitefooter__assure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--footer-assure-gap, 16px 32px);
  max-width: var(--footer-assure-max-width, var(--container-max-width));
  margin: 0 auto;
  padding: var(--footer-assure-padding, 36px var(--container-padding));
  list-style: none;
  border-top: var(--footer-assure-border-top, 1px solid var(--color-gray-200));
  background: var(--footer-assure-bg, transparent);
}
.nova-sitefooter__assure-item {
  display: flex;
  align-items: center;
  gap: var(--footer-assure-gap-item, 14px);
  color: var(--footer-assure-color, var(--color-gray-900));
  font-family: var(--footer-assure-font, inherit);
  font-size: var(--footer-assure-size, 15px);
  font-weight: var(--footer-assure-weight, 550);
  line-height: var(--footer-assure-lh, 1.35);
  letter-spacing: var(--footer-assure-ls, inherit);
}
/* two classes: the theme's own icon class (.brock-icon) sets stroke-width and loads after this file */
.nova-sitefooter .nova-sitefooter__assure-icon {
  font-size: var(--footer-assure-icon-size, 28px);
  color: var(--footer-assure-icon-color, inherit);
  stroke-width: var(--footer-assure-icon-stroke, 1.5);
}

.nova-sitefooter__main {
  background: var(--footer-main-bg, var(--color-gray-900));
  color: var(--footer-main-color, rgba(255, 255, 255, 0.72));
  padding: var(--footer-main-padding, 56px 0 40px);
  font-size: var(--footer-main-size, 15px);
  border-top: var(--footer-main-border-top, 0);
}
.nova-sitefooter__main a { color: var(--footer-link-color, var(--color-on-dark)); }
.nova-sitefooter__main a:hover {
  color: var(--footer-hover-color, var(--color-on-dark));
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Target size (WCAG 2.5.8): a link that is a list item on its own (the footer slot's link columns)
   is at least 24px high, so the rows of a column don't crowd each other's tap area. A column whose
   type sets its rows closer than that (Depot's 13px, Brock's 15px) grows by the difference. */
.nova-sitefooter__main li > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.nova-sitefooter__main :is(h1, h2, h3, h4, h5, h6) {
  color: var(--footer-heading-color, var(--color-on-dark));
  font-family: var(--footer-heading-font, var(--font-family-display));
  font-size: var(--footer-heading-size, 15px);
  font-weight: var(--footer-heading-weight, var(--font-weight-heading));
  line-height: var(--footer-heading-lh, var(--line-height-tight));
  letter-spacing: var(--footer-heading-ls, 0);
  text-transform: var(--footer-heading-case, none);
  margin-bottom: var(--footer-heading-margin, 12px);
}
.nova-sitefooter__brand {
  margin: var(--footer-brand-margin, 0 0 16px);
  color: var(--footer-brand-color, var(--color-on-dark));
  font-family: var(--footer-brand-font, inherit);
  font-size: var(--footer-brand-size, 20px);
  font-weight: var(--footer-brand-weight, 750);
  letter-spacing: var(--footer-brand-ls, -0.03em);
  text-transform: var(--footer-brand-case, none);
}

.nova-sitefooter__base {
  background: var(--footer-base-bg, var(--color-gray-900));
  color: var(--footer-base-color, rgba(255, 255, 255, 0.58));
  font-family: var(--footer-base-font, inherit);
  font-size: var(--footer-base-size, 13px);
}
/* with no reassurance row or content block above it (checkout), the strip is the footer's first child */
.nova-sitefooter > .nova-sitefooter__base:first-child { border-top: var(--footer-base-first-border, 0); }
.nova-sitefooter__base-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--footer-base-gap, 16px 32px);
  padding-block: var(--footer-base-padding, 20px 28px);
  border-top: var(--footer-base-border-top, 1px solid rgba(255, 255, 255, 0.1));
}
.nova-sitefooter__legal p { margin: 0; }
.nova-sitefooter__legal p + p { margin-top: 4px; }
/* two classes: the themes' running-copy link rule (:where(p, li) > a:not([class])) sets a thickness */
.nova-sitefooter .nova-sitefooter__legal a {
  color: var(--footer-legal-link-color, rgba(255, 255, 255, 0.82));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nova-sitefooter__pay {
  display: flex;
  flex-wrap: wrap;
  gap: var(--footer-pay-gap, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--footer-pay-color, rgba(255, 255, 255, 0.7));
  font-size: var(--footer-pay-size, 26px);
}
.nova-sitefooter__pay li { display: inline-flex; }
.nova-sitefooter__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nova-sitefooter__edit-exit {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  background: var(--color-gray-50);
  box-shadow: var(--shadow-md);
  color: var(--color-gray-700);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
}

/* --- ui: rail (ui/rail.html) --- */
.nova-rail {
  --railc-gutter: var(--rail-gutter, var(--container-padding));
  padding-block: var(--rail-padding-block, 48px);
}
.nova-rail__wrap {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--railc-gutter);
}
.nova-rail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--rail-head-align, baseline);
  justify-content: space-between;
  gap: var(--rail-head-gap, 4px 24px);
  margin-bottom: var(--rail-head-margin, 20px);
}
/* font, weight and line height default to what the base h2 rule gives */
.nova-rail__title {
  margin: 0;
  color: var(--rail-title-color, var(--color-text-strong));
  font-family: var(--rail-title-font, var(--font-family-display));
  font-size: var(--rail-title-size, clamp(22px, 1vw + 16px, 28px));
  font-weight: var(--rail-title-weight, var(--font-weight-heading));
  line-height: var(--rail-title-lh, var(--line-height-tight));
  letter-spacing: var(--rail-title-ls, -0.025em);
  text-transform: var(--rail-title-case, none);
}
.nova-rail__subtitle {
  margin: 0;
  max-width: var(--rail-subtitle-max-width, none);
  color: var(--rail-subtitle-color, var(--color-gray-500));
  font-size: var(--rail-subtitle-size, 15px);
  font-weight: var(--rail-subtitle-weight, inherit);
}
.nova-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-col-phone, minmax(160px, 42%));
  gap: var(--rail-gap, 16px);
  margin-inline: calc(var(--railc-gutter) * -1);
  padding: var(--rail-track-padding, 0 var(--railc-gutter) 8px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--railc-gutter);
  scrollbar-width: none;
}
.nova-rail__track::-webkit-scrollbar { display: none; }
.nova-rail__track > * { scroll-snap-align: start; }
@media (min-width: 720px) { .nova-rail__track { grid-auto-columns: var(--rail-col-tablet, minmax(180px, 28%)); } }
@media (min-width: 1100px) {
  .nova-rail:not(.nova-rail--stagger) .nova-rail__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-columns: auto;
    margin-inline: 0;
    padding: var(--rail-track-padding-desktop, 0);
    overflow: visible;
    gap: var(--rail-gap-desktop, 24px);
  }
  .nova-rail:not(.nova-rail--stagger) .nova-rail__track > :nth-child(n+6) { display: none; }
}
/* stagger: flex on phones, from 900px four columns at staggered heights, every card shown */
.nova-rail--stagger .nova-rail__track { display: flex; }
.nova-rail--stagger .nova-rail__track > * { flex: 0 0 var(--rail-item-basis, 62%); }
@media (min-width: 900px) {
  .nova-rail--stagger .nova-rail__track {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    align-items: start;
  }
  .nova-rail--stagger .nova-rail__track > * { flex: none; }
  .nova-rail--stagger .nova-rail__track > :nth-child(even) { margin-top: var(--rail-stagger-offset, 64px); }
  .nova-rail--stagger .nova-rail__track > :nth-child(3) { margin-top: var(--rail-stagger-offset-third, 24px); }
}

/* --- ui: menu (ui/menu.html) --- */

/* --- ui: collection chooser (ui/collection-chooser.html) --- */

/* --- ui: search bar (ui/search-bar.html) --- */

/* --- ui: hero (nova/extensions/hero) --- */
/* The hero extension's presets (extensions/hero/main and the files it inserts). Not a ui/
   component: the hero is one shared Nova template with no theme forks, and its merchant values
   (the background photo, a split hero's colours) arrive per instance as custom properties on the
   section (--hero-bg-image, --hero-bg, --hero-text), which ui/ may not carry. The public tokens
   and their defaults are listed in extensions/hero/main.html. The type of the slots' JSON
   components is styled in "Hero Extension" further up. Rules here are anchored on the hero (two
   classes), as the inline styles they replace kept page-level rules out. */
@keyframes nova-hero-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The section */
.nova-hero.nova-hero--centered,
.nova-hero.nova-hero--gradient,
.nova-hero.nova-hero--minimal,
.nova-hero.nova-hero--video-bg,
.nova-hero.nova-hero--split {
  position: relative;
  overflow: hidden;
}
.nova-hero.nova-hero--centered,
.nova-hero.nova-hero--gradient,
.nova-hero.nova-hero--minimal,
.nova-hero.nova-hero--video-bg {
  display: flex;
  align-items: center;
}
.nova-hero.nova-hero--centered,
.nova-hero.nova-hero--minimal,
.nova-hero.nova-hero--video-bg {
  justify-content: center;
}
.nova-hero.nova-hero--centered,
.nova-hero.nova-hero--gradient,
.nova-hero.nova-hero--split {
  min-height: var(--hero-min-height, 70vh);
}
.nova-hero.nova-hero--minimal {
  min-height: var(--hero-min-height, 55vh);
  background: var(--hero-light-surface, var(--color-surface));
}
.nova-hero.nova-hero--video-bg {
  min-height: var(--hero-min-height, 75vh);
  background: var(--hero-video-surface, var(--color-dark-surface));
}
/* No photo: the brief's brand gradient, darkened for light text, else a primary-tinted dark wash */
.nova-hero.nova-hero--centered.nova-hero--brand {
  background: var(--hero-dark-surface, var(--gradient-brand-dark, linear-gradient(135deg, var(--color-dark-surface) 0%, color-mix(in srgb, var(--color-primary) 35%, var(--color-dark-surface)) 100%)));
}
.nova-hero.nova-hero--gradient.nova-hero--brand {
  background: var(--hero-dark-surface, var(--gradient-brand-dark, linear-gradient(135deg, var(--color-dark-surface) 0%, color-mix(in srgb, var(--color-primary) 55%, var(--color-dark-surface)) 100%)));
}
/* backgroundImage: only the image longhands, so a theme's background colour still shows through */
.nova-hero.nova-hero--photo {
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
}
.nova-hero.nova-hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--hero-bg, var(--hero-light-surface, var(--color-surface)));
}
.nova-hero.nova-hero--split.nova-hero--text-colour {
  color: var(--hero-text);
}

/* Background layers */
.nova-hero .nova-hero__overlay,
.nova-hero .nova-hero__glow,
.nova-hero .nova-hero__texture,
.nova-hero .nova-hero__vignette,
.nova-hero .nova-hero__image-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nova-hero--centered .nova-hero__overlay--dark {
  background: var(--hero-overlay-dark, linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 100%));
}
.nova-hero--centered .nova-hero__overlay--medium {
  background: var(--hero-overlay-medium, linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%));
}
.nova-hero--centered .nova-hero__overlay--light {
  background: var(--hero-overlay-light, linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.25) 100%));
}
.nova-hero--video-bg .nova-hero__overlay--dark {
  background: var(--hero-overlay-dark, linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.7) 100%));
}
.nova-hero--video-bg .nova-hero__overlay--medium {
  background: var(--hero-overlay-medium, linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.5) 100%));
}
.nova-hero--video-bg .nova-hero__overlay--light {
  background: var(--hero-overlay-light, linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.3) 100%));
}
/* Gradient preset: over the brand gradient a soft accent glow; over a photo a dark sweep from the left */
.nova-hero--gradient .nova-hero__overlay--gradient {
  background: radial-gradient(ellipse at 85% 20%, color-mix(in srgb, var(--hero-glow-color, var(--color-on-dark-accent)) 18%, transparent) 0%, transparent 55%);
}
.nova-hero--gradient:is(.nova-hero--photo, .nova-hero--slideshow) .nova-hero__overlay--gradient {
  background: var(--hero-overlay-photo, linear-gradient(105deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.15) 70%, transparent 100%));
}
.nova-hero--centered .nova-hero__glow {
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--hero-glow-color, var(--color-on-dark-accent)) 15%, transparent) 0%, transparent 60%);
}
.nova-hero--gradient .nova-hero__glow {
  inset: auto;
  top: 20%;
  left: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-glow-color, var(--color-on-dark-accent)) 12%, transparent) 0%, transparent 70%);
}
.nova-hero--minimal .nova-hero__texture {
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--color-primary) 7%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--color-secondary) 6%, transparent) 0%, transparent 55%);
}
.nova-hero--video-bg .nova-hero__vignette {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.3) 100%);
}
.nova-hero .nova-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bottom fade into the page background (the brief's surface colour) */
.nova-hero .nova-hero__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--hero-fade-height, 100px);
  background: linear-gradient(transparent, var(--hero-fade-to, var(--color-surface)));
  pointer-events: none;
}
.nova-hero--centered .nova-hero__fade {
  height: var(--hero-fade-height, 120px);
}
.nova-hero .nova-hero__baseline {
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hero-baseline-color, var(--color-gray-200)), transparent);
}

/* Optional animated background (background-effect.html): the mask fades it out behind the copy */
.nova-hero .nova-hero__effect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.nova-hero .nova-hero__effect--left {
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 40%, black 75%);
  mask-image: linear-gradient(100deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 40%, black 75%);
}
.nova-hero .nova-hero__effect--center {
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,0.3) 0%, black 100%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,0.3) 0%, black 100%);
}

/* The copy */
.nova-hero--centered .nova-hero__content,
.nova-hero--minimal .nova-hero__content,
.nova-hero--video-bg .nova-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: var(--hero-content-max-width, 860px);
  padding: var(--space-16, 64px) var(--space-6, 24px);
}
/* An 880px measure keeps a long headline to three or four lines */
.nova-hero--gradient .nova-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--hero-content-max-width, 880px);
  padding: var(--space-16, 64px) var(--space-6, 24px) var(--space-16, 64px) var(--space-12, 48px);
}
.nova-hero--split .nova-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-16, 64px) var(--space-12, 48px) var(--space-16, 64px) var(--space-14, 56px);
}
.nova-hero .nova-hero__accent {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: var(--space-8, 32px);
}
.nova-hero--gradient .nova-hero__accent {
  background: var(--hero-accent, var(--color-on-dark-accent));
}
.nova-hero--split .nova-hero__accent {
  background: var(--hero-accent, var(--color-primary));
}
.nova-hero .nova-hero__eyebrow {
  margin-bottom: var(--space-4, 16px);
}
.nova-hero--centered .nova-hero__title {
  animation: nova-hero-fade-up 0.8s ease-out both;
}
.nova-hero--gradient .nova-hero__title {
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.nova-hero--video-bg .nova-hero__title {
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.nova-hero--centered .nova-hero__subtitle,
.nova-hero--gradient .nova-hero__subtitle,
.nova-hero--video-bg .nova-hero__subtitle,
.nova-hero--split .nova-hero__subtitle {
  margin-top: var(--space-5, 20px);
}
.nova-hero--centered .nova-hero__subtitle,
.nova-hero--minimal .nova-hero__subtitle,
.nova-hero--video-bg .nova-hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}
.nova-hero--centered .nova-hero__subtitle {
  max-width: 640px;
  animation: nova-hero-fade-up 0.8s ease-out 0.15s both;
}
.nova-hero--gradient .nova-hero__subtitle {
  max-width: 680px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.nova-hero--video-bg .nova-hero__subtitle {
  max-width: 600px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}
.nova-hero--minimal .nova-hero__subtitle {
  max-width: 520px;
}
.nova-hero--split .nova-hero__subtitle {
  max-width: 480px;
}
.nova-hero .nova-hero__cta {
  margin-top: var(--space-10, 40px);
}
.nova-hero--centered .nova-hero__cta {
  animation: nova-hero-fade-up 0.8s ease-out 0.3s both;
}
.nova-hero .nova-hero__divider {
  width: 40px;
  height: 2px;
  background: var(--hero-divider-color, var(--color-gray-300));
  margin: var(--space-6, 24px) auto;
}

/* Optional slots (slots.html) */
.nova-hero .nova-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hero-actions-gap, var(--space-3, 12px));
}
.nova-hero .nova-hero__actions--center {
  justify-content: center;
}
.nova-hero .nova-hero__actions--start {
  justify-content: flex-start;
}
.nova-hero .nova-hero__stats {
  margin-top: var(--space-10, 40px);
  padding-top: var(--hero-stats-padding-top, var(--space-6, 24px));
  border-top: 1px solid var(--hero-stats-rule, color-mix(in srgb, currentColor 25%, transparent));
}

/* Gradient preset, contentAlign "container": the copy starts where the page's content column does
   (the section's spare width either side of the container, plus the container's gutter), so on a
   wide screen it sits under the logo instead of at the window's edge. */
@media (min-width: 1024px) {
  .nova-hero--contained .nova-hero--gradient-content {
    margin-left: max(0px, (100% - var(--container-max-width, 1280px)) / 2);
    padding-left: var(--container-padding, var(--space-6, 24px)) !important;
  }
}
@media (max-width: 1023px) {
  .nova-hero--gradient-content {
    max-width: 100% !important;
    padding: var(--space-12, 48px) var(--space-6, 24px) !important;
  }
}

/* Split image preset: the image column */
.nova-hero--split .nova-hero__image {
  position: relative;
  overflow: hidden;
}
.nova-hero .nova-hero__image-fill {
  position: absolute;
  inset: 0;
}
.nova-hero .nova-hero__placeholder {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nova-hero .nova-hero__placeholder-body {
  text-align: center;
  color: var(--color-gray-400);
}
.nova-hero .nova-hero__placeholder-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
}
.nova-hero .nova-hero__placeholder-hint {
  font-size: var(--font-size-sm);
  margin: 0;
}
.nova-hero .nova-hero__image-shade {
  box-shadow: inset 0 0 80px rgba(0,0,0,0.06);
}
/* A tinted hero (backgroundColor/textColor in the config): copy in the chosen colour, a bigger headline,
   and on a phone the copy first so the buttons stay above the fold. */
.nova-hero--tinted .nova-hero__title { --nova-hero-title-size: clamp(2.75rem, 1.2rem + 4.6vw, 5.25rem); }
.nova-hero--tinted .nova-hero__title .json-heading,
.nova-hero--tinted .nova-hero__subtitle .json-text,
.nova-hero--tinted .nova-hero__subtitle .json-text * { color: inherit !important; }
.nova-hero--tinted .nova-hero__title .json-heading { text-transform: uppercase; line-height: 0.98; }
.nova-hero--tinted .nova-hero__subtitle { max-width: 520px !important; font-weight: 500; }
@media (max-width: 1023px) {
  .nova-hero--tinted .nova-hero--split-image { order: 1; min-height: min(100vw, 480px) !important; }
  .nova-hero--tinted .nova-hero--split-text { padding-bottom: var(--space-8, 32px) !important; }
}
/* Lift the copy above the optional background-effect canvas (z-index 0). */
.nova-hero--split-text > :not(.nova-hero__effect) {
  position: relative;
  z-index: 1;
}
/* Fill the column whatever the image's shape; height:auto left a gap under wide images. */
.nova-hero--split-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}
/* contentAlign "container": the text column's copy starts where the page's content column
   does, so on a wide screen it sits under the logo instead of at the window's edge. The
   column is half the section, so the offset is measured against the whole section (200%). */
@media (min-width: 1024px) {
  .nova-hero--contained .nova-hero--split-text {
    padding-left: max(var(--container-padding, var(--space-6, 24px)),
                      (200% - var(--container-max-width, 1280px)) / 2 + var(--container-padding, var(--space-6, 24px))) !important;
  }
}
@media (max-width: 1023px) {
  .nova-hero--split {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .nova-hero--split-image {
    order: -1;
    min-height: 320px !important;
  }
  .nova-hero--split-text {
    padding: var(--space-10, 40px) var(--space-6, 24px) !important;
  }
}

/* Slideshow background (slideshow.html) */
.nova-hero .nova-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-dark-surface);
}
.nova-hero .nova-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nova-hero .nova-hero__slide-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-6, 24px);
  z-index: 2;
  pointer-events: none;
}
.nova-hero__slide-controls .nova-hero__slide-bar {
  max-width: var(--container-max-width, 1280px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  flex-wrap: wrap;
}
.nova-hero__slide-controls .nova-hero__slide-caption,
.nova-hero__slide-controls .nova-hero__slide-buttons {
  pointer-events: auto;
  border-radius: var(--radius-full, 999px);
  background: var(--hero-controls-bg, rgba(0,0,0,0.45));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.nova-hero__slide-controls .nova-hero__slide-caption {
  margin: 0;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  color: var(--hero-controls-color, white);
  font-size: var(--font-size-sm, 14px);
  line-height: 1.3;
}
.nova-hero__slide-controls .nova-hero__slide-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.nova-hero__slide-controls .nova-hero__slide-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px);
}
.nova-hero__slide-controls .nova-hero__slide-dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* The pause button shows play once pressed (hero-slideshow.js sets aria-pressed) */
.nova-hero__slide-pause[aria-pressed="true"] .nova-hero__icon-pause,
.nova-hero__slide-pause:not([aria-pressed="true"]) .nova-hero__icon-play {
  display: none;
}

/* --- ui: scene (nova/extensions/animationScene) --- */
/* An animation scene's container (extensions/animationScene/scene.html): the canvas block's size
   from the first paint, from the --scene-* values AnimationSceneExtension writes on it. The
   runtime (animation-runtime.js) writes the same values inline once it loads. */
.nova-scene {
  position: relative;
  overflow: hidden;
  height: var(--scene-height, auto);
  width: var(--scene-width, auto);
  background: var(--scene-background, none);
  padding: var(--scene-padding, 0);
}

/* --- ui: capture (nova/extensions/emailCaptureExtension) --- */
/* The email capture dock (extensions/emailCaptureExtension/popup.html): a tab docked at the foot of
   the window that opens into the sign-up card. Its script shows the dock and opens the body with
   inline display and transform. The tokens are listed in the template's header. */
.nova-capture {
  display: none;
  position: fixed;
  bottom: 0;
  right: var(--capture-offset, var(--space-4));
  width: var(--capture-width, 360px);
  max-width: calc(100vw - 2 * var(--capture-offset, var(--space-4)));
  z-index: var(--capture-z, 1000);
  transform: translateY(100%);
  transition: transform var(--transition-base);
}
.nova-capture .nova-capture__card {
  background: var(--capture-bg, white);
  border-radius: var(--capture-radius, var(--radius-xl)) var(--capture-radius, var(--radius-xl)) 0 0;
  box-shadow: var(--capture-shadow, var(--shadow-xl));
  border: var(--capture-border, 1px solid var(--color-gray-200));
  border-bottom: 0;
}
.nova-capture .nova-capture__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
}
.nova-capture .nova-capture__peek {
  flex: 1;
  text-align: left;
  background: none;
  border: 0;
  padding: var(--space-2) 0;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  color: var(--capture-text, var(--color-gray-900));
}
.nova-capture .nova-capture__close {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--font-size-xl);
  line-height: 1;
  color: var(--capture-close-color, var(--color-gray-500));
  padding: var(--space-1) var(--space-2);
}
.nova-capture .nova-capture__body {
  display: none;
  padding: var(--space-2) var(--space-4) var(--space-4);
}
.nova-capture .nova-capture__outcome {
  margin: 0 0 var(--space-4);
  font-weight: var(--font-weight-semibold);
  color: var(--capture-text, var(--color-gray-900));
}
.nova-capture .nova-capture__welcome {
  color: var(--capture-text, var(--color-gray-900));
  font-size: var(--font-size-base);
  margin-bottom: var(--space-4);
}
.nova-capture .nova-capture__field {
  margin-bottom: var(--space-3);
}
.nova-capture .nova-capture__label {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--capture-text, var(--color-gray-900));
  margin-bottom: var(--space-2);
}
.nova-capture .nova-capture__input {
  width: 100%;
}
/* Honeypot: off screen, never seen or reached by people */
.nova-capture .nova-capture__trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.nova-capture .nova-capture__consent {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--capture-note-color, var(--color-gray-600));
}
/* The privacy link has no class, so a theme's rule for links in running copy (a:not([class])) still
   reaches it */
.nova-capture .nova-capture__consent a {
  color: inherit;
  text-decoration: underline;
}
.nova-capture .nova-capture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}
/* Three classes: themes set .nova-btn's padding at two (Diorama's :root .nova-btn) */
.nova-capture .nova-capture__actions .nova-capture__no {
  padding: var(--space-3) var(--space-5);
}
.nova-capture .nova-capture__actions .nova-capture__submit {
  padding: var(--space-3) var(--space-6);
}

/* --- ui: product card (ui/product-card.html) --- */
/* No rules yet: the card is built from each theme's own atoms (card, badge, price, stock, stepper,
   button), which its product page and basket share, so each theme styles it in its own stylesheet. */

/* --- ui: listing (ui/listing.html) --- */
/* No rules yet: the toolbar, applied filters, filter panel and grid are the theme's classes, shared
   with its collection page, so each theme styles them in its own stylesheet. */

/* --- ui: page shell (ui/page-shell.html) --- */
/* No rules: the page, main and wrap classes are the theme's own layout, used by all its pages. */