/* (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: #F59E0B;
  --color-accent-dark: #D97706;
  --color-accent-light: #FDE68A;
  --color-accent-50: #FFFBEB;

  /* 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 */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-error-dark: #DC2626;
  --color-error-ring: rgba(220, 38, 38, 0.1);
  --color-info: #3B82F6;

  /* 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);
  /* 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-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;
  }
}

/* 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-decoration: none;
  transition: color var(--transition-fast);
}

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

/* 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);
  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: #FFFFFF;
  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;
}

.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);
}

.nova-product-card__description {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
  flex: 1;
  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);
  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-400);
  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);
    margin-bottom: var(--space-2);
  }

  .nova-product-card__footer {
    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 {
  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-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-dark);
}

/* ============================================
   BUTTONS
   ============================================ */

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

.nova-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nova-btn-primary {
  background: var(--color-primary);
  color: #FFFFFF;
  box-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(--color-primary-dark);
  color: #FFFFFF;
  box-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: translateY(-2px);
}

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

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

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

.nova-btn-outline:hover:not(:disabled) {
  background: var(--color-primary);
  color: #FFFFFF;
}

.nova-btn-error {
  background: var(--color-error);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

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

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

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

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

.nova-btn-icon {
  display: inline-flex;
  align-items: center;
  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-400);
  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: 1100;
  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);
}

/* 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 */
.nova-variant-label-value:empty::after {
  content: 'select\2026';
  font-style: italic;
  color: var(--color-primary);
}

/* 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;
}

.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: white;
  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: white;
  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-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);
}

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

.nova-collection-sort__select {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color: var(--color-gray-900);
  cursor: pointer;
  transition: all 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);
  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);
}

.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-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-400);
  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);
}

.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;
  }
}

/* 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);
  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);
}

.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-gray-950);
  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);
}

.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);
  }
}

.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-400);
  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);
}

.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: #FFFFFF;
  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);
  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);
}

.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: white;
  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) !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-decoration: none;
  font-size: var(--font-size-sm);
}

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

.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);
}

.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);
}

.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-decoration: none;
}

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

/* ── 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);
}

/* 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: #FFFFFF;
    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: #FFFFFF;
  }

  /* 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-gray-950);
  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-gray-950);
}

.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-gray-950)) 0%, var(--color-gray-950) 45%, color-mix(in srgb, var(--color-secondary) 18%, var(--color-gray-950)) 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-gray-950));
  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);
  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);
  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);
}

.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-decoration: none;
  transition: gap var(--transition-fast);
}

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

.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);
  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;
  }
}

/* ============================================================
   Hero Extension
   ============================================================ */

/* 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);
}

/* 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;
        max-width: 100%;
    }

    .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;
    }
}

/* 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);
}
[aria-pressed="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; }
}

/* 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%; }
}