/* ═══════════════════════════════════════════════════════════════════════
   NPsearch — Premium AJAX Search by Neuroplugin
   A Doofinder-killer UI with Apple polish, Stripe spacing, Linear motion
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (scoped to prevent theme overrides) ────── */

#nps-root,
#nps-root *,
.vp-search-overlay,
.vp-search-overlay *,
.vp-search-widget,
.vp-search-widget *,
.nps-mobile-fab,
.nps-popular-widget,
.nps-popular-widget * {
  /* Primary palette */
  --vps-primary: #6C3AED;
  --vps-primary-light: #EDE9FE;
  --vps-primary-dark: #5B21B6;
  --vps-primary-ring: rgba(108, 58, 237, 0.3);
  --vps-primary-ghost: rgba(108, 58, 237, 0.06);

  /* Surfaces */
  --vps-bg: #F8FAFC;
  --vps-card: #FFFFFF;
  --vps-surface: #F8FAFC;

  /* Text */
  --vps-text: #1E293B;
  --vps-muted: #64748B;
  --vps-text-faint: #94A3B8;

  /* Borders & shadows */
  --vps-border: #E2E8F0;
  --vps-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --vps-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --vps-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08);
  --vps-shadow-card-hover: 0 8px 24px rgba(108, 58, 237, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);

  /* Semantic */
  --vps-success: #059669;
  --vps-success-bg: #ECFDF5;
  --vps-warning: #D97706;
  --vps-warning-bg: #FFFBEB;
  --vps-error: #DC2626;
  --vps-error-bg: #FEF2F2;

  /* Accent (backward compat) — now purple */
  --vps-accent: #6C3AED;

  /* Radii */
  --vps-radius: 8px;
  --vps-radius-lg: 12px;
  --vps-radius-xl: 20px;
  --vps-radius-pill: 999px;

  /* Transitions */
  --vps-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --vps-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --vps-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography */
  --vps-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Scoped Reset — prevent theme bleed ───────────────────────────── */

.vp-search-overlay,
.vp-search-overlay *,
.vp-search-overlay *::before,
.vp-search-overlay *::after,
#nps-root,
#nps-root *,
#nps-root *::before,
#nps-root *::after {
  box-sizing: border-box !important;
  vertical-align: baseline;
  text-decoration: none;
  list-style: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset common elements inside our overlay */
.vp-search-overlay a,
.vp-search-overlay a:hover,
.vp-search-overlay a:visited,
.vp-search-overlay a:active {
  color: inherit !important;
  text-decoration: none !important;
  
}

.vp-search-overlay img {
  max-width: 100%;
  height: auto;
  border: none !important;
  display: block;
  box-shadow: none !important;
  outline: none !important;
}

.vp-search-overlay button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  padding: 0;
}

.vp-search-overlay input {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

.vp-search-overlay select {
  font: inherit;
  cursor: pointer;
}

.vp-search-overlay h1,
.vp-search-overlay h2,
.vp-search-overlay h3,
.vp-search-overlay h4,
.vp-search-overlay p,
.vp-search-overlay span,
.vp-search-overlay div {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Block theme's global selectors from affecting us */
.vp-search-overlay .container,
.vp-search-overlay .row,
.vp-search-overlay .col {
  all: unset !important;
  display: block !important;
}

/* ── Base Typography on overlay ───────────────────────────────────── */

.vp-search-overlay {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--vps-text) !important;
  -webkit-text-size-adjust: 100%;
}

/* ── Reset & Base ──────────────────────────────────────────────────── */

.vp-search-overlay,
.vp-search-overlay *,
.vp-search-widget,
.vp-search-widget * {
  box-sizing: border-box !important;
  font-family: var(--vps-font) !important;
}

/* ── Search widget isolation (sits inside theme header) ───────────── */

#vp-search-widget,
#vp-search-widget * {
  box-sizing: border-box !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#vp-search-widget .vp-search__input {
  all: unset !important;
  width: 100% !important;
  flex: 1 !important;
  height: auto !important;
  padding: 10px 6px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--vps-text) !important;
  background: transparent !important;
  border: none !important;
  border-radius: inherit !important;
  outline: none !important;
  line-height: 1.5 !important;
  letter-spacing: 0!important;
  min-width: 0 !important;
}

/* Native theme search remains usable until the NP widget mounts. The small
   optional npsearch-hide-native.css asset is loaded only when the merchant
   enables replacement, and JavaScript removes native controls only after a
   verified mount. This is the storefront fail-open path. */

/* Hide body scroll when overlay open */
body.vp-search-overlay-open {
  overflow: hidden !important;
}

/* Placeholder to reserve space when form is reparented */
.vp-search__placeholder {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 1: Search Widget (Header Bar)
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search-widget {
  display: block !important;
  flex: 1;
  max-width: 520px;
  min-width: 0;
  width: 100%;
}

.vp-search-widget.nps-mounted {
  display: block !important;
  flex: 1 1 280px;
}

.vp-search-widget.nps-mounted--native,
.vp-search-widget.nps-mounted--custom,
.vp-search-widget.nps-mounted--header {
  width: 100%;
  max-width: min(520px, 100%);
}

.vp-search-widget.nps-mounted--body {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

html.nps-native-replaced .nps-native-hidden {
  display: none !important;
}

.vp-search__form {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: var(--vps-bg) !important;
  border: 1.5px solid var(--vps-border) !important;
  border-radius: var(--vps-radius-pill) !important;
  padding: 3px 5px 3px 16px;
  transition:
    border-color var(--vps-transition),
    box-shadow var(--vps-transition),
    background var(--vps-transition);
}

.vp-search__form:focus-within {
  background: var(--vps-card) !important;
  border-color: var(--vps-primary) !important;
  box-shadow: 0 0 0 3px var(--vps-primary-ring) !important;
}

.vp-search__input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  padding: 10px 6px;
  font-size: 16px !important;
  font-weight: 400 !important;
  min-width: 0;
  color: var(--vps-text) !important;
  outline: none !important;
  border-radius: inherit !important;
  line-height: 1.5;
  letter-spacing: 0;
}

.vp-search__input:focus-visible,
.vp-search__btn:focus-visible {
  outline: none !important;
}

.vp-search__btn:focus-visible {
  box-shadow: 0 0 0 3px var(--vps-primary-ring);
}

.vp-search__input::placeholder {
  color: var(--vps-text-faint);
  font-weight: 400;
  transition: opacity var(--vps-transition);
}

.vp-search__input:focus::placeholder {
  opacity: 0.5;
}

.vp-search__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none !important;
  background: var(--vps-primary) !important;
  color: #fff !important;
  border-radius: 50% !important;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--vps-transition),
    transform var(--vps-transition-fast);
}

.vp-search__btn:hover {
  background: var(--vps-primary-dark) !important;
  transform: scale(1.05);
}

.vp-search__btn:active {
  transform: scale(0.95);
}

.vp-search__btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 2: Overlay / Backdrop
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: none !important;
}

.vp-search-overlay.is-open {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
}

/* Frosted glass backdrop */
.vp-search-overlay__backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  animation: vps-backdropIn 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Main panel — centered modal on desktop */
.vp-search-overlay__panel {
  position: relative !important;
  z-index: 1 !important;
  width: 92%;
  max-width: 1060px;
  max-height: 85vh;
  margin-top: 48px;
  background: var(--vps-card) !important;
  border-radius: 20px !important;
  box-shadow:
    0 25px 65px rgba(0, 0, 0, 0.15),
    0 10px 25px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: vps-panelIn 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Header */
.vp-search-overlay__header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 16px !important;
  border-bottom: 1px solid var(--vps-border) !important;
  flex-shrink: 0;
  background: var(--vps-card) !important;
}

.vp-search-overlay__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--vps-text) !important;
  letter-spacing: 0;
}

.vp-search-overlay__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none !important;
  background: var(--vps-surface) !important;
  color: var(--vps-muted) !important;
  border-radius: 50% !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vp-search-overlay__close:hover {
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary) !important;
  transform: scale(1.1);
}

.vp-search-overlay__close:active {
  transform: scale(0.9);
}

.vp-search-overlay__close .material-icons {
  font-size: 20px;
}

/* Search slot inside overlay */
.vp-search-overlay__slot {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--vps-border);
  flex-shrink: 0;
  position: relative;
}

.vp-search-overlay__slot .vp-search__form {
  max-width: 100%;
  background: var(--vps-bg) !important;
  border-color: var(--vps-border) !important;
  padding: 4px 6px 4px 18px;
}

.vp-search-overlay__slot .vp-search__form:focus-within {
  background: var(--vps-card) !important;
  border-color: var(--vps-primary) !important;
  box-shadow: 0 0 0 3px var(--vps-primary-ring) !important;
}

.vp-search-overlay__slot .vp-search__input {
  padding: 12px 8px;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

.vp-search-overlay__slot .vp-search__btn {
  width: 40px;
  height: 40px;
}

/* Body / scrollable area */
.vp-search-overlay__body {
  flex: 1;
  overflow: hidden;
  padding: 20px 24px !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0;
  background: var(--vps-card) !important;
}

/* ── Two-column results layout ────────────────────────────────────── */
.vp-search__results-layout {
  display: flex !important;
  gap: 24px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.vp-search__facets-sidebar {
  width: 220px;
  flex-shrink: 0;
  overflow-y: auto;
  padding-right: 16px;
  border-right: 1px solid var(--vps-border);
  -webkit-overflow-scrolling: touch;
}

.vp-search__results-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Footer hint — subtle, desktop only */
.vp-search-overlay__hint {
  padding: 8px 20px;
  border-top: 1px solid var(--vps-border) !important;
  font-size: 10px !important;
  color: var(--vps-text-faint) !important;
  opacity: 0.3;
  text-align: center;
  flex-shrink: 0;
  background: var(--vps-bg) !important;
}

.vp-search__kbd {
  display: inline-block !important;
  padding: 2px 7px;
  border: 1px solid var(--vps-border) !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-family: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace !important;
  background: var(--vps-card) !important;
  margin-left: 4px;
  box-shadow: 0 1px 0 var(--vps-border) !important;
  color: var(--vps-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 3: Summary / Results Count
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search__summary {
  margin-bottom: 16px;
  flex-shrink: 0;
}

.vp-search__results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--vps-border);
}

.vp-search__results-count {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--vps-muted) !important;
  line-height: 1.5;
}

.vp-search__results-count strong {
  color: var(--vps-text) !important;
  font-weight: 600 !important;
}

.vp-search__results-sort select {
  padding: 6px 12px;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1.5px solid var(--vps-border) !important;
  border-radius: 8px !important;
  background: var(--vps-card) !important;
  color: var(--vps-text) !important;
  cursor: pointer;
  font-family: var(--vps-font) !important;
  outline: none !important;
  transition: border-color var(--vps-transition);
}

.vp-search__results-sort select:focus {
  border-color: var(--vps-primary);
}

.vp-search__count {
  font-size: 13px;
  font-weight: 500;
  color: var(--vps-muted);
  line-height: 1.5;
}

.vp-search__count strong {
  color: var(--vps-text);
  font-weight: 600;
}

.vp-search__empty-copy {
  margin-top: 6px;
  font-size: 13px;
  color: var(--vps-muted);
  line-height: 1.5;
}

/* Active filters bar */
.vp-search__active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.vp-search__active-filter {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 12px;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: var(--vps-primary) !important;
  color: #fff !important;
  border-radius: var(--vps-radius-pill) !important;
  animation: vps-chipIn 200ms var(--vps-transition-spring) forwards;
}

.vp-search__active-filter button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  transition: color var(--vps-transition-fast);
  display: inline-flex;
  align-items: center;
}

.vp-search__active-filter button:hover {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 4: Facets / Filter Chips
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search__facets {
  margin-bottom: 0;
}

.vp-search__facet-group {
  margin-bottom: 4px;
  border-bottom: 1px solid var(--vps-border);
  padding-bottom: 4px;
}

/* Facet group separators (handled by border-bottom on .facet-group now) */

/* (Mobile facet compact overrides removed — now handled by sidebar layout) */

/* Facet header — clickable collapse toggle */
.vp-search__facet-header {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 0 8px;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--vps-muted) !important;
  cursor: pointer;
  background: none !important;
  border: none !important;
  font-family: var(--vps-font) !important;
  transition: color 0.15s ease;
}

.vp-search__facet-header:hover {
  color: var(--vps-primary);
}

.vp-search__facet-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.vp-search__facet-header[aria-expanded="false"] .vp-search__facet-chevron {
  transform: rotate(-90deg);
}

/* Facet body — collapsible content */
.vp-search__facet-body {
  overflow: hidden;
  padding-bottom: 4px;
}

.vp-search__facet-body .vp-search__chip {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  font-size: 13px;
  width: 100%;
  justify-content: flex-start;
  border-radius: var(--vps-radius);
  padding: 5px 10px;
}

/* Facet label (legacy) */
.vp-search__facet-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--vps-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}

/* Facet "more" button in sidebar */
.vp-search__facet-more {
  font-size: 12px;
  margin-top: 2px;
  margin-bottom: 4px;
}

/* Chip base */
.vp-search__chip {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: var(--vps-card) !important;
  color: var(--vps-text) !important;
  border: 1px solid var(--vps-border) !important;
  border-radius: var(--vps-radius-pill) !important;
  cursor: pointer;
  transition:
    all var(--vps-transition),
    transform var(--vps-transition-spring);
  white-space: nowrap;
  line-height: 1.4;
}

.vp-search__chip:hover {
  border-color: var(--vps-primary) !important;
  color: var(--vps-primary) !important;
  background: var(--vps-primary-ghost) !important;
}

.vp-search__chip:active {
  transform: scale(0.96);
}

/* Chip primary */
.vp-search__chip--primary {
  background: var(--vps-primary) !important;
  color: #fff !important;
  border-color: var(--vps-primary) !important;
}

.vp-search__chip--primary:hover {
  color: #fff !important;
  background: var(--vps-primary-dark) !important;
  border-color: var(--vps-primary-dark) !important;
}

/* Chip active */
.vp-search__chip--active {
  background: var(--vps-primary) !important;
  color: #fff !important;
  border-color: var(--vps-primary) !important;
  box-shadow: 0 2px 8px rgba(108, 58, 237, 0.25) !important;
  animation: vps-chipPop 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vp-search__chip--active:hover {
  color: #fff !important;
  background: var(--vps-primary-dark) !important;
  border-color: var(--vps-primary-dark) !important;
}

/* Chip hidden */
.vp-search__chip--hidden,
.vp-search__facets-sidebar .vp-search__chip--hidden {
  display: none;
}

/* Chip toggle (+N more) */
.vp-search__chip--toggle {
  background: transparent;
  border-style: dashed;
  border-color: var(--vps-primary);
  color: var(--vps-primary);
  font-weight: 600;
  cursor: pointer;
}

.vp-search__chip--toggle:hover {
  background: var(--vps-primary-ghost);
  border-style: dashed;
}

/* Chip clear */
.vp-search__chip--clear {
  background: transparent;
  border-style: dashed;
  color: var(--vps-muted);
  border-color: var(--vps-border);
}

.vp-search__chip--clear:hover {
  border-color: var(--vps-error);
  color: var(--vps-error);
  background: rgba(220, 38, 38, 0.04);
}

/* Chip count badge */
.vp-search__chip-count {
  font-size: 11px;
  color: var(--vps-text-faint);
  font-weight: 400;
}

/* ── Color Swatches ────────────────────────────────────────────────── */

.vp-search__color-swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--vps-border);
  vertical-align: middle;
  flex-shrink: 0;
  transition:
    border-color var(--vps-transition),
    box-shadow var(--vps-transition);
}

.vp-search__chip--color {
  gap: 6px;
  padding: 5px 12px 5px 6px;
}

.vp-search__chip--color:hover .vp-search__color-swatch {
  border-color: var(--vps-primary);
}

.vp-search__chip--color.vp-search__chip--active .vp-search__color-swatch {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--vps-primary);
}

/* ── Price Filter ──────────────────────────────────────────────────── */

.vp-search__price-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.vp-search__facets-sidebar .vp-search__price-input {
  width: 70px;
  padding: 6px 8px;
  font-size: 12px;
}

.vp-search__facets-sidebar .vp-search__price-apply {
  padding: 6px 10px !important;
  font-size: 12px !important;
  width: 100%;
  margin-top: 4px;
}

.vp-search__price-input {
  width: 90px;
  padding: 8px 12px;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1.5px solid var(--vps-border) !important;
  border-radius: var(--vps-radius) !important;
  background: var(--vps-card) !important;
  color: var(--vps-text) !important;
  outline: none !important;
  transition:
    border-color var(--vps-transition),
    box-shadow var(--vps-transition);
  -moz-appearance: textfield;
  font-family: var(--vps-font) !important;
}

.vp-search__price-input::-webkit-inner-spin-button,
.vp-search__price-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.vp-search__price-input:focus {
  border-color: var(--vps-primary);
  box-shadow: 0 0 0 3px var(--vps-primary-ring);
}

.vp-search__price-sep {
  color: var(--vps-text-faint);
  font-size: 14px;
  font-weight: 500;
}

.vp-search__price-apply {
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--vps-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--vps-radius) !important;
  cursor: pointer;
  transition: background var(--vps-transition) !important;
}

.vp-search__price-apply:hover {
  background: var(--vps-primary-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 5: Product Grid
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px;
}

@media (min-width: 640px) {
  .vp-search__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 6: Product Cards
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search__card {
  display: flex !important;
  flex-direction: column !important;
  padding: 14px;
  background: var(--vps-card) !important;
  border: 1px solid var(--vps-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: var(--vps-text) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  animation: vps-cardReveal 0.3s ease forwards;
}

.vp-search__card:hover {
  transform: translateY(-3px);
  border-color: var(--vps-primary) !important;
  box-shadow: 0 8px 30px rgba(108, 58, 237, 0.12), 0 2px 8px rgba(0,0,0,0.04) !important;
}

.vp-search__card:active {
  transform: translateY(-1px);
}

/* Staggered card animation — JS can set --card-index or use nth-child */
.vp-search__card:nth-child(1) { animation-delay: 0ms; }
.vp-search__card:nth-child(2) { animation-delay: 40ms; }
.vp-search__card:nth-child(3) { animation-delay: 80ms; }
.vp-search__card:nth-child(4) { animation-delay: 120ms; }
.vp-search__card:nth-child(5) { animation-delay: 160ms; }
.vp-search__card:nth-child(6) { animation-delay: 200ms; }
.vp-search__card:nth-child(7) { animation-delay: 240ms; }
.vp-search__card:nth-child(8) { animation-delay: 280ms; }
.vp-search__card:nth-child(9) { animation-delay: 320ms; }
.vp-search__card:nth-child(10) { animation-delay: 360ms; }
.vp-search__card:nth-child(11) { animation-delay: 400ms; }
.vp-search__card:nth-child(12) { animation-delay: 440ms; }

/* Card image wrapper */
.vp-search__card-img-wrap {
  aspect-ratio: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--vps-surface) 0%, var(--vps-surface) 100%) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 12px;
  position: relative !important;
}

/* Card image */
.vp-search__card-img {
  max-width: 85%;
  max-height: 85%;
  border-radius: 10px !important;
  object-fit: contain !important;
  transition: transform 0.3s ease;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.vp-search__card:hover .vp-search__card-img {
  transform: scale(1.05);
}

.vp-search__card-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--vps-text-faint);
}

.vp-search__card-noimg .material-icons {
  font-size: 48px;
  opacity: 0.25;
}

/* Card body */
.vp-search__card-body {
  padding: 10px 12px 14px;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
  flex: 1;
}

/* Brand */
.vp-search__card-brand {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--vps-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* Product name */
.vp-search__card-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35;
  color: var(--vps-text) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0;
  margin-bottom: 8px;
  min-height: 36px;
}

.vp-search__card-name mark {
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary) !important;
  padding: 0 2px;
  border-radius: 3px !important;
  font-weight: 700 !important;
}

/* Price */
.vp-search__card-price {
  color: var(--vps-primary) !important;
  font-weight: 800;
  font-size: 16px;
  margin-top: 4px;
  letter-spacing: 0;
  line-height: 1.3;
}

/* ── Stock Badge ───────────────────────────────────────────────────── */

.vp-search__badge {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--vps-radius-pill) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  width: fit-content;
  margin-top: 6px;
  line-height: 1.4;
}

.vp-search__stock--in {
  background: var(--vps-success-bg) !important;
  color: var(--vps-success) !important;
}

.vp-search__stock--in::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vps-success);
  flex-shrink: 0;
}

.vp-search__stock--out {
  background: var(--vps-error-bg) !important;
  color: var(--vps-error) !important;
}

.vp-search__stock--out::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vps-error);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 7: Empty State — recovery-first, on-brand
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search__empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--vps-muted);
}

.vp-search__empty--recovery {
  position: relative;
  text-align: left;
  padding: 36px 28px 28px;
  margin-top: 8px;
  border: 1px solid var(--vps-border);
  border-radius: var(--vps-radius-lg);
  background:
    radial-gradient(900px 280px at 50% -40%, var(--vps-primary-ghost), transparent 60%),
    var(--vps-card);
  box-shadow: var(--vps-shadow-sm);
  overflow: hidden;
}

.vp-search__empty--recovery::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--vps-primary), var(--vps-primary-dark));
}

.vp-search__empty-head {
  text-align: center;
  padding: 4px 8px 4px;
  margin-bottom: 18px;
}

.vp-search__empty-icon {
  display: block;
  margin: 0 auto 14px;
  width: 56px;
  height: 56px;
  color: var(--vps-primary);
  opacity: 0.85;
  filter: drop-shadow(0 4px 12px rgba(108, 58, 237, 0.18));
}

.vp-search__empty p {
  margin: 6px 0;
  line-height: 1.5;
  font-size: 14px;
}

.vp-search__empty-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--vps-text);
  text-wrap: balance;
  max-width: 36ch;
  margin: 0 auto 6px;
}

.vp-search__empty strong,
.vp-search__empty-title strong {
  color: var(--vps-primary-dark);
  font-weight: 700;
}

.vp-search__empty-hint {
  font-size: 13.5px;
  margin: 0 auto;
  max-width: 42ch;
  color: var(--vps-muted);
  line-height: 1.55;
}

/* "Did you mean…" inline pill */
.vp-search__empty-suggest {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 22px;
  padding: 10px 16px;
  background: var(--vps-primary-light);
  border: 1px solid color-mix(in srgb, var(--vps-primary) 18%, transparent);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--vps-text);
  text-align: center;
  width: fit-content;
  display: flex;
  justify-content: center;
}

.vp-search__empty--recovery .vp-search__empty-suggest {
  margin-left: auto;
  margin-right: auto;
}

.vp-search__empty-suggest-icon {
  flex-shrink: 0;
  color: var(--vps-primary);
}

.vp-search__empty-suggest-link {
  margin: 0 2px;
  padding: 0;
  background: none;
  border: none;
  color: var(--vps-primary-dark);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  font-size: inherit;
}

.vp-search__empty-suggest-link:hover {
  color: var(--vps-primary);
}

.vp-search__empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.vp-search__empty-actions--universal {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px dashed var(--vps-border);
}

.vp-search__empty-section {
  margin-top: 24px;
}

.vp-search__empty-section + .vp-search__empty-section {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--vps-border) 70%, transparent);
}

.vp-search__empty-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vps-text);
}

.vp-search__empty-section-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vps-primary);
  box-shadow: 0 0 0 3px var(--vps-primary-ghost);
  flex-shrink: 0;
}

.vp-search__grid--recovery {
  margin-top: 0;
}

@media (max-width: 600px) {
  .vp-search__empty--recovery {
    padding: 28px 18px 22px;
  }
  .vp-search__empty-title {
    font-size: 15.5px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 8: Pagination
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search__pag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 0 10px;
}

.vp-search__pag-btn {
  padding: 10px 20px;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--vps-card) !important;
  color: var(--vps-text) !important;
  border: 1.5px solid var(--vps-border) !important;
  border-radius: var(--vps-radius) !important;
  cursor: pointer;
  transition:
    all var(--vps-transition),
    transform var(--vps-transition-fast);
  font-family: var(--vps-font) !important;
}

.vp-search__pag-btn:hover {
  border-color: var(--vps-primary) !important;
  color: var(--vps-primary) !important;
  background: var(--vps-primary-ghost) !important;
  transform: translateY(-1px);
}

.vp-search__pag-btn:active {
  transform: translateY(0);
}

.vp-search__pag-info {
  font-size: 13px;
  font-weight: 500;
  color: var(--vps-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 9: Quick Panel (empty state / initial)
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search__quick-section {
  margin-bottom: 24px;
}

.vp-search__quick-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--vps-muted);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vp-search__quick-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vp-search__quick-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none !important;
  background: transparent !important;
  color: var(--vps-text) !important;
  border-radius: var(--vps-radius) !important;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 450 !important;
  text-align: left;
  width: 100%;
  transition:
    background var(--vps-transition),
    color var(--vps-transition);
  font-family: var(--vps-font) !important;
  line-height: 1.4;
}

.vp-search__quick-item:hover {
  background: var(--vps-primary-ghost) !important;
  color: var(--vps-primary) !important;
}

.vp-search__quick-icon {
  font-size: 18px;
  color: var(--vps-text-faint);
  flex-shrink: 0;
}

.vp-search__quick-item:hover .vp-search__quick-icon {
  color: var(--vps-primary);
}

.vp-search__quick-remove {
  margin-left: auto;
  font-size: 16px;
  color: var(--vps-text-faint);
  opacity: 0;
  transition:
    opacity var(--vps-transition),
    color var(--vps-transition);
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
}

.vp-search__quick-item:hover .vp-search__quick-remove {
  opacity: 1;
}

.vp-search__quick-remove:hover {
  color: var(--vps-error);
}

.vp-search__quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vp-search__quick-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--vps-text-faint);
}

.vp-search__quick-empty .material-icons {
  font-size: 48px;
  opacity: 0.2;
  display: block;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 10: Skeleton Loading
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search__card--skeleton {
  pointer-events: none;
}

.vp-search__skeleton {
  background: linear-gradient(
    90deg,
    var(--vps-bg) 0%,
    var(--vps-surface) 40%,
    var(--vps-bg) 80%
  );
  background-size: 300% 100%;
  animation: vps-shimmer 1.8s ease-in-out infinite;
  border-radius: 6px;
}

.vp-search__skeleton--img {
  aspect-ratio: 1;
  width: 100%;
  border-radius: var(--vps-radius-lg) var(--vps-radius-lg) 0 0;
}

.vp-search__skeleton--line {
  height: 12px;
  width: 85%;
  margin: 10px 12px 0;
}

.vp-search__skeleton--short {
  width: 55%;
}

.vp-search__skeleton--price {
  height: 16px;
  width: 40%;
  margin: 8px 12px 14px;
}

.vp-search__skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 640px) {
  .vp-search__skeleton-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

.vp-search__skeleton-card {
  background: var(--vps-card) !important;
  border: 1px solid var(--vps-border) !important;
  border-radius: var(--vps-radius-lg) !important;
  overflow: hidden;
}

.vp-search__skeleton-img {
  aspect-ratio: 1;
  background: linear-gradient(90deg, var(--vps-bg) 0%, var(--vps-surface) 40%, var(--vps-bg) 80%);
  background-size: 300% 100%;
  animation: vps-shimmer 1.8s ease-in-out infinite;
}

.vp-search__skeleton-line {
  height: 12px;
  margin: 10px 12px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--vps-bg) 0%, var(--vps-surface) 40%, var(--vps-bg) 80%);
  background-size: 300% 100%;
  animation: vps-shimmer 1.8s ease-in-out infinite;
}

.vp-search__skeleton-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.vp-search__skeleton-pill {
  display: inline-block;
  width: 80px;
  height: 32px;
  border-radius: var(--vps-radius-pill);
  background: linear-gradient(
    90deg,
    var(--vps-bg) 0%,
    var(--vps-surface) 40%,
    var(--vps-bg) 80%
  );
  background-size: 300% 100%;
  animation: vps-shimmer 1.8s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 11: Fuzzy Fallback Notice
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search__fuzzy-notice {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 14px;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--vps-warning) !important;
  background: var(--vps-warning-bg) !important;
  border: 1px solid #FDE68A !important;
  border-radius: var(--vps-radius-pill) !important;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 12: Popular Searches Widget (homepage)
   ═══════════════════════════════════════════════════════════════════════ */

.nps-popular-widget {
  padding: 48px 24px;
  background: linear-gradient(180deg, var(--vps-surface) 0%, var(--vps-surface) 100%) !important;
  border-top: 1px solid rgba(108, 58, 237, 0.06) !important;
  border-bottom: 1px solid rgba(108, 58, 237, 0.06) !important;
}

.nps-popular-widget,
.nps-popular-widget * {
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.nps-popular-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--vps-text) !important;
  text-align: center;
  margin: 0 0 24px;
  letter-spacing: 0;
  line-height: 1.3;
}

.nps-popular-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.nps-popular-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--vps-primary-dark) !important;
  background: var(--vps-card) !important;
  border: 1.5px solid rgba(108, 58, 237, 0.2) !important;
  border-radius: var(--vps-radius-pill) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    all var(--vps-transition),
    transform var(--vps-transition-spring);
  font-family: var(--vps-font) !important;
}

.nps-popular-tag:hover {
  background: var(--vps-primary) !important;
  color: #fff !important;
  border-color: var(--vps-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(108, 58, 237, 0.3) !important;
}

.nps-popular-tag:active {
  transform: translateY(0);
}

.nps-popular-tag:hover .nps-popular-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.nps-popular-count {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--vps-primary) !important;
  background: var(--vps-primary-light) !important;
  border-radius: var(--vps-radius-pill) !important;
  transition: all var(--vps-transition);
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 13: Suggestions / Autocomplete Dropdown
   ═══════════════════════════════════════════════════════════════════════ */

.nps-suggestions {
  position: absolute !important;
  top: calc(100% + 4px);
  left: 20px;
  right: 20px;
  z-index: 10 !important;
  background: var(--vps-card) !important;
  border: 1px solid var(--vps-border) !important;
  border-radius: var(--vps-radius-lg) !important;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.05) !important;
  max-height: 380px;
  overflow-y: auto;
  animation: vps-suggestionsIn 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Dropdown no-suggestions card — replaces the silent hide on zero results */
.nps-suggestions-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--vps-primary-ghost), transparent 80%);
  border-radius: var(--vps-radius-lg);
}

.nps-suggestions-empty-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 50%;
  background: var(--vps-card);
  border: 1px solid color-mix(in srgb, var(--vps-primary) 20%, transparent);
  color: var(--vps-primary);
}

.nps-suggestions-empty-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.nps-suggestions-empty-title {
  font-size: 13.5px;
  color: var(--vps-muted);
  line-height: 1.4;
}

.nps-suggestions-empty-title strong {
  color: var(--vps-text);
  font-weight: 600;
}

.nps-suggestions-empty-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 14px;
  margin-top: 2px;
  background: var(--vps-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  font-family: var(--vps-font);
}

.nps-suggestions-empty-cta:hover {
  background: var(--vps-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 58, 237, 0.25);
}

.nps-suggestions-empty-cta svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.nps-suggestions-empty-cta:hover svg {
  transform: translateX(2px);
}

/* Query suggestion item */
.nps-suggestion-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none !important;
  color: var(--vps-text) !important;
  border: none !important;
  background: transparent !important;
  width: 100%;
  font-size: 14px !important;
  font-weight: 450 !important;
  text-align: left;
  transition:
    background var(--vps-transition-fast),
    color var(--vps-transition-fast);
  font-family: var(--vps-font) !important;
  line-height: 1.4;
}

.nps-suggestion-item:hover,
.nps-suggestion-item--active {
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary-dark) !important;
}

.nps-suggestion-item:first-child {
  border-radius: var(--vps-radius-lg) var(--vps-radius-lg) 0 0;
}

.nps-suggestion-item:last-child {
  border-radius: 0 0 var(--vps-radius-lg) var(--vps-radius-lg);
}

/* Query suggestion specifics */
.nps-suggestion-item--query .nps-suggestion-icon {
  color: var(--vps-text-faint);
  flex-shrink: 0;
  font-size: 18px;
}

.nps-suggestion-item--query .nps-suggestion-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nps-suggestion-item--query .nps-suggestion-text strong {
  font-weight: 700;
  color: var(--vps-primary);
}

.nps-suggestion-item--query .nps-suggestion-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--vps-primary);
  background: var(--vps-primary-light);
  padding: 2px 8px;
  border-radius: var(--vps-radius-pill);
  flex-shrink: 0;
}

/* Divider */
.nps-suggestion-divider {
  height: 1px;
  background: var(--vps-border);
  margin: 4px 16px;
}

/* Product suggestion item */
.nps-suggestion-item--product {
  gap: 12px;
  padding: 10px 16px;
}

.nps-suggestion-product-img {
  width: 44px;
  height: 44px;
  border-radius: var(--vps-radius);
  object-fit: contain;
  background: var(--vps-surface);
  flex-shrink: 0;
  border: 1px solid var(--vps-border);
}

.nps-suggestion-product-img--empty {
  display: block;
}

.nps-suggestion-product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.nps-suggestion-product-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.nps-suggestion-product-name strong {
  font-weight: 700;
  color: var(--vps-primary);
}

.nps-suggestion-product-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--vps-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 14: Trending Tags in Quick Panel
   ═══════════════════════════════════════════════════════════════════════ */

.nps-trending {
  margin-bottom: 24px;
}

.nps-trending-chips {
  gap: 8px;
}

.nps-trending-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary) !important;
  border: 1.5px solid transparent !important;
  border-radius: 20px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: var(--vps-font) !important;
}

.nps-trending-tag:hover {
  background: var(--vps-primary) !important;
  color: #fff !important;
  border-color: var(--vps-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 58, 237, 0.25) !important;
}

.nps-trending-tag:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 15: Custom Scrollbar
   ═══════════════════════════════════════════════════════════════════════ */

.vp-search-overlay__body::-webkit-scrollbar,
.vp-search__facets-sidebar::-webkit-scrollbar,
.vp-search__results-main::-webkit-scrollbar,
.nps-suggestions::-webkit-scrollbar,
.vp-search__facet-group::-webkit-scrollbar {
  width: 4px;
}

.vp-search-overlay__body::-webkit-scrollbar-track,
.vp-search__facets-sidebar::-webkit-scrollbar-track,
.vp-search__results-main::-webkit-scrollbar-track,
.nps-suggestions::-webkit-scrollbar-track,
.vp-search__facet-group::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

.vp-search-overlay__body::-webkit-scrollbar-thumb,
.vp-search__facets-sidebar::-webkit-scrollbar-thumb,
.vp-search__results-main::-webkit-scrollbar-thumb,
.nps-suggestions::-webkit-scrollbar-thumb,
.vp-search__facet-group::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 4px;
  transition: background 200ms;
}

.vp-search-overlay__body:hover::-webkit-scrollbar-thumb,
.vp-search__facets-sidebar:hover::-webkit-scrollbar-thumb,
.vp-search__results-main:hover::-webkit-scrollbar-thumb,
.nps-suggestions:hover::-webkit-scrollbar-thumb,
.vp-search__facet-group:hover::-webkit-scrollbar-thumb {
  background: var(--vps-primary);
}

/* Firefox scrollbar */
.vp-search-overlay__body,
.vp-search__facets-sidebar,
.vp-search__results-main,
.nps-suggestions,
.vp-search__facet-group {
  scrollbar-width: thin;
  scrollbar-color: var(--vps-border) transparent;
}

.vp-search-overlay__body:hover,
.vp-search__facets-sidebar:hover,
.vp-search__results-main:hover,
.nps-suggestions:hover,
.vp-search__facet-group:hover {
  scrollbar-color: var(--vps-primary) transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 16: Animations & Keyframes
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes vps-backdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes vps-panelIn {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes vps-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vps-slideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vps-shimmer {
  0% { background-position: 300% 0; }
  100% { background-position: -300% 0; }
}

@keyframes vps-cardIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes vps-cardReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes vps-chipPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes vps-chipIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes vps-suggestionsIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes vps-slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 17: Mobile Responsive (max-width: 768px)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Mobile FAB (floating action button) ─────────────────────────── */

.nps-mobile-fab {
  display: none !important;
}

@media (max-width: 768px) {
  .nps-mobile-fab {
    all: initial !important;
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: var(--vps-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(108, 58, 237, 0.3) !important;
    z-index: 2147483646 !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  }

  .nps-mobile-fab:active {
    transform: scale(0.92);
  }

  /* Hide FAB when overlay is open */
  body.vp-search-overlay-open .nps-mobile-fab {
    display: none !important;
  }

  /* Full-screen overlay */
  .vp-search-overlay {
    position: fixed;
    inset: 0;
    border-radius: 0;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
  }

  .vp-search-overlay.is-open {
    align-items: stretch;
  }

  .vp-search-overlay__panel {
    margin-top: 0;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    border-radius: 0 !important;
    animation: vps-slideUp 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .vp-search-overlay__header {
    padding: 12px 16px;
  }

  .vp-search-overlay__slot {
    padding: 12px 16px;
  }

  .vp-search-overlay__slot .vp-search__input {
    padding: 10px 6px;
  }

  .vp-search-overlay__body {
    padding: 16px;
    overflow-y: auto;
    display: block;
  }

  /* Mobile: stack layout vertically */
  .vp-search__results-layout {
    flex-direction: column;
    gap: 12px;
    overflow: visible;
  }

  .vp-search__facets-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--vps-border);
    max-height: none;
    overflow: visible;
    padding-right: 0;
    padding-bottom: 8px;
    display: none; /* Hidden by default on mobile */
  }

  .vp-search__facets-sidebar.nps-mobile-filters-open {
    display: block;
  }

  /* Mobile filter toggle button */
  .nps-mobile-filter-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--vps-border) !important;
    border-radius: 20px !important;
    background: var(--vps-card) !important;
    color: var(--vps-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    margin-bottom: 12px;
  }

  .nps-mobile-filter-toggle:active {
    background: var(--vps-primary-light) !important;
    border-color: var(--vps-primary) !important;
    color: var(--vps-primary) !important;
  }

  .nps-mobile-filter-toggle.active {
    background: var(--vps-primary) !important;
    color: white !important;
    border-color: var(--vps-primary) !important;
  }

  .vp-search__results-main {
    overflow-y: visible;
  }

  /* Two column grid on mobile */
  .vp-search__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .vp-search__card-body {
    padding: 8px 10px 10px;
  }

  .vp-search__card-name {
    font-size: 13px;
  }

  .vp-search__card-price {
    font-size: 15px;
  }

  .vp-search__card-brand {
    font-size: 12px;
  }

  /* Hide footer hint on mobile */
  .vp-search-overlay__hint {
    display: none;
  }

  /* Suggestions full width */
  .nps-suggestions {
    left: 12px;
    right: 12px;
    max-height: 300px;
  }

  .nps-suggestion-item {
    padding: 10px 14px;
    font-size: 14px;
    min-height: 44px;
  }

  /* Touch targets */
  .vp-search__chip {
    padding: 8px 14px;
    min-height: 36px;
  }

  .vp-search__quick-item {
    padding: 12px 12px;
    min-height: 44px;
  }

  /* Popular widget mobile */
  .nps-popular-widget {
    padding: 32px 16px;
  }

  .nps-popular-title {
    font-size: 18px;
    margin-bottom: 18px;
  }

  .nps-popular-tags {
    gap: 8px;
  }

  .nps-popular-tag {
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .vp-search__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vp-search__card {
    flex-direction: row;
    border-radius: var(--vps-radius-lg);
    padding: 8px;
  }

  .vp-search__card-img-wrap {
    width: 110px;
    min-width: 110px;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 8px;
  }

  .vp-search__card-body {
    padding: 10px 14px;
    justify-content: center;
  }

  .vp-search__card-name {
    font-size: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 18: Dark Mode
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  #nps-root,
  #nps-root *,
  .vp-search-overlay,
  .vp-search-overlay *,
  .vp-search-widget,
  .vp-search-widget *,
  .nps-mobile-fab,
  .nps-popular-widget,
  .nps-popular-widget * {
    --vps-bg: #1E1E2E;
    --vps-card: #2A2A3C;
    --vps-surface: #252536;
    --vps-text: #E2E8F0;
    --vps-muted: #94A3B8;
    --vps-text-faint: #64748B;
    --vps-border: #3B3B52;
    --vps-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --vps-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --vps-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
    --vps-shadow-card-hover: 0 8px 24px rgba(108, 58, 237, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
    --vps-primary-light: rgba(108, 58, 237, 0.15);
    --vps-primary-ghost: rgba(108, 58, 237, 0.08);
    --vps-success-bg: rgba(5, 150, 105, 0.12);
    --vps-warning-bg: rgba(217, 119, 6, 0.12);
    --vps-error-bg: rgba(220, 38, 38, 0.12);
  }

  .vp-search-overlay__backdrop {
    background: rgba(0, 0, 0, 0.6);
  }

  .vp-search__skeleton {
    background: linear-gradient(
      90deg,
      var(--vps-bg) 0%,
      #30304A 40%,
      var(--vps-bg) 80%
    );
    background-size: 300% 100%;
  }

  .vp-search__skeleton-pill {
    background: linear-gradient(
      90deg,
      var(--vps-bg) 0%,
      #30304A 40%,
      var(--vps-bg) 80%
    );
    background-size: 300% 100%;
  }

  .nps-popular-widget {
    background: linear-gradient(180deg, #1E1E2E 0%, #252536 100%);
    border-top-color: rgba(108, 58, 237, 0.1);
    border-bottom-color: rgba(108, 58, 237, 0.1);
  }

  .vp-search__card-name mark {
    background: rgba(108, 58, 237, 0.2);
  }

  .nps-suggestion-item--query .nps-suggestion-text strong,
  .nps-suggestion-product-name strong {
    color: #A78BFA;
  }

  .vp-search__fuzzy-notice {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.3);
    color: #FBBF24;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 18b: Premium Polish — Sale Badge, Compare Price, Stock, Facets
   ═══════════════════════════════════════════════════════════════════════ */

/* Sale badge on image */
.vp-search__card-badge-sale {
  position: absolute !important;
  top: 8px;
  right: 8px;
  background: #EF4444 !important;
  color: white !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px;
  border-radius: 6px !important;
  letter-spacing: 0;
  z-index: 1 !important;
}

/* Compare / strikethrough price */
.vp-search__card-price--compare {
  font-size: 12px;
  color: var(--vps-text-faint);
  text-decoration: line-through;
  margin-left: 6px;
  font-weight: 400;
}

/* In-stock text variant */
.vp-search__card-stock--yes {
  font-size: 11px;
  color: var(--vps-success);
  font-weight: 500;
}

/* Close button alias (for .vp-search__close if used) */
.vp-search__close {
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  background: var(--vps-surface) !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vp-search__close:hover {
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary) !important;
}

/* Facet sidebar chip overrides — cleaner list style */
.vp-search__facets-sidebar .vp-search__chip {
  font-size: 13px;
  padding: 5px 0;
  color: var(--vps-text);
  background: none;
  border: none;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
  transition: color 0.15s;
}

.vp-search__facets-sidebar .vp-search__chip:hover {
  color: var(--vps-primary);
}

.vp-search__facets-sidebar .vp-search__chip--active {
  color: var(--vps-primary);
  font-weight: 600;
}

/* Quick panel tag overrides */
.vp-search__quick-tags .vp-search__chip {
  background: var(--vps-surface);
  border: 1px solid var(--vps-border);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--vps-text);
  transition: all 0.15s ease;
}

.vp-search__quick-tags .vp-search__chip:hover {
  border-color: var(--vps-primary);
  color: var(--vps-primary);
  background: var(--vps-primary-ghost);
}

/* Quick panel header alias */
.vp-search__quick-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--vps-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 19: Print
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
  .vp-search-overlay,
  .vp-search-widget,
  .nps-popular-widget {
    display: none !important;
  }
}

/* Hide mobile filter toggle on desktop */
@media (min-width: 769px) {
  .nps-mobile-filter-toggle {
    display: none !important;
  }
}

/* Hide empty facet groups (no chips inside) */
.vp-search__facet-group:empty,
.vp-search__facet-body:empty {
  display: none;
}

/* Limit visible facet groups to first 4, hide the rest */
.vp-search__facets-sidebar .vp-search__facet-group:nth-child(n+5) {
  display: none;
}

.vp-search__facets-sidebar.nps-show-all-facets .vp-search__facet-group:nth-child(n+5) {
  display: block;
}

.nps-facets-expand {
  display: block !important;
  width: 100%;
  padding: 10px 0;
  border: none !important;
  background: none !important;
  color: var(--vps-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.3px;
}

.nps-facets-expand:hover {
  text-decoration: underline;
}

.vp-search__facets-sidebar.nps-show-all-facets .nps-facets-expand {
  display: none;
}

/* ── Quick Panel spacing fix ── */
.vp-search__quick {
  padding: 8px 0 16px;
}

.vp-search__quick-section + .vp-search__quick-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--vps-border);
}

/* Trending tags need gap */
.vp-search__quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION: FINAL VISUAL POLISH — Overrides for premium look
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Overlay panel — glass morphism + depth ── */
.vp-search-overlay__panel {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 
    0 32px 80px rgba(0, 0, 0, 0.18),
    0 12px 32px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* ── Header — clean separator ── */
.vp-search-overlay__header {
  padding: 18px 28px 14px !important;
  background: transparent !important;
  border-bottom: none !important;
}

.vp-search-overlay__header .vp-search__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--vps-text) !important;
  letter-spacing: 0!important;
}

/* ── Search input — elevated pill ── */
.vp-search-overlay__slot {
  padding: 0 24px 18px !important;
  border-bottom: none !important;
  background: transparent !important;
}

.vp-search-overlay__slot .vp-search__form {
  background: var(--vps-surface) !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--vps-border) !important;
  padding: 4px !important;
  transition: all 0.2s ease !important;
}

.vp-search-overlay__slot .vp-search__form:focus-within {
  background: var(--vps-card) !important;
  border-color: var(--vps-primary) !important;
  box-shadow: 0 0 0 4px rgba(108, 58, 237, 0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
}

.vp-search-overlay__slot .vp-search__input {
  height: 44px !important;
  padding: 0 48px 0 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--vps-text) !important;
  background: transparent !important;
  border: none !important;
}

.vp-search-overlay__slot .vp-search__btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: var(--vps-primary) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(108, 58, 237, 0.3) !important;
}

.vp-search-overlay__slot .vp-search__btn:hover {
  background: var(--vps-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(108, 58, 237, 0.4) !important;
}

/* ── Body — subtle background ── */
.vp-search-overlay__body {
  padding: 20px 24px !important;
  background: #FAFBFC !important;
  border-top: 1px solid var(--vps-surface) !important;
}

/* ── Sidebar — with right border ── */
.vp-search__facets-sidebar {
  padding-right: 20px !important;
  border-right: 1px solid var(--vps-border) !important;
}

.vp-search__facet-header {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--vps-text-faint) !important;
  padding: 12px 0 6px !important;
}

.vp-search__facet-header:hover {
  color: var(--vps-primary) !important;
}

.vp-search__facets-sidebar .vp-search__chip {
  font-size: 13px !important;
  padding: 6px 0 !important;
  color: var(--vps-muted) !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.vp-search__facets-sidebar .vp-search__chip:hover {
  color: var(--vps-primary) !important;
}

.vp-search__facets-sidebar .vp-search__chip--active {
  color: var(--vps-primary) !important;
  font-weight: 700 !important;
}

.vp-search__chip-count {
  font-size: 11px !important;
  color: #CBD5E1 !important;
  font-weight: 500 !important;
}

/* ── Product cards — visible container with depth ── */
.vp-search__card {
  background: var(--vps-card) !important;
  border: 1px solid #E8ECF1 !important;
  border-radius: 16px !important;
  padding: 14px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.vp-search__card:hover {
  border-color: #C4B5FD !important;
  box-shadow: 0 8px 32px rgba(108, 58, 237, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-4px) !important;
}

/* ── Card image — proper container ── */
.vp-search__card-img-wrap {
  background: linear-gradient(145deg, var(--vps-surface) 0%, #EFF3F8 100%) !important;
  border-radius: 12px !important;
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  position: relative !important;
}

.vp-search__card-img {
  max-width: 82% !important;
  max-height: 82% !important;
  object-fit: contain !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.vp-search__card:hover .vp-search__card-img {
  transform: scale(1.08) !important;
}

/* ── Card text — clear hierarchy ── */
.vp-search__card-body {
  padding: 0 2px !important;
}

.vp-search__card-vendor {
  display: block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--vps-text-faint) !important;
  margin-bottom: 4px !important;
}

.vp-search__card-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--vps-text) !important;
  margin-bottom: 10px !important;
  min-height: 35px !important;
}

.vp-search__card-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

.vp-search__card-price {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--vps-primary) !important;
  letter-spacing: 0!important;
}

.vp-search__card-price--compare {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #CBD5E1 !important;
  text-decoration: line-through !important;
}

.vp-search__card-stock--yes {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #059669 !important;
}

.vp-search__card-stock--no {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #DC2626 !important;
}

/* ── Results header ── */
.vp-search__results-header {
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--vps-surface) !important;
}

.vp-search__results-count {
  font-size: 13px !important;
  color: var(--vps-text-faint) !important;
  font-weight: 500 !important;
}

.vp-search__results-count strong {
  color: var(--vps-text) !important;
  font-weight: 700 !important;
}

/* ── Grid spacing ── */
.vp-search__grid {
  gap: 18px !important;
}

/* ── Quick panel — breathing room ── */
.vp-search__quick {
  padding: 4px 0 20px !important;
}

.vp-search__quick-section {
  margin-bottom: 24px !important;
}

.vp-search__quick-section + .vp-search__quick-section {
  margin-top: 20px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--vps-surface) !important;
}

.vp-search__quick-header {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--vps-text-faint) !important;
  margin-bottom: 14px !important;
}

/* ── Trending pills — more vibrant ── */
.vp-search__quick-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.nps-trending-tag {
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.nps-trending-tag:hover {
  background: var(--vps-primary) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(108, 58, 237, 0.25) !important;
}

/* ── Category/brand chips in quick panel ── */
.vp-search__quick-tags .vp-search__chip {
  padding: 7px 14px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  background: var(--vps-surface) !important;
  color: var(--vps-muted) !important;
  border: 1px solid var(--vps-border) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.vp-search__quick-tags .vp-search__chip:hover {
  border-color: var(--vps-primary) !important;
  color: var(--vps-primary) !important;
  background: var(--vps-surface) !important;
}

/* ── Close button ── */
.vp-search__close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--vps-surface) !important;
  color: var(--vps-muted) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.vp-search__close:hover {
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary) !important;
}

/* ── Sale badge ── */
.vp-search__card-badge-sale {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: #EF4444 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  z-index: 2 !important;
}

/* More filters link. */
.nps-facets-expand {
  color: var(--vps-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 0 !important;
  cursor: pointer !important;
}

.nps-facets-expand:hover {
  text-decoration: underline !important;
}

/* ── Keyword highlight ── */
.vps-hl {
  color: var(--vps-primary) !important;
  font-weight: 700 !important;
  background: none !important;
}

/* ── Trending tags specificity fix ── */
.vp-search__quick-tags .vp-search__chip.nps-trending-tag,
.nps-trending-chips .nps-trending-tag {
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 7px 14px !important;
  font-weight: 600 !important;
}

.vp-search__quick-tags .vp-search__chip.nps-trending-tag:hover,
.nps-trending-chips .nps-trending-tag:hover {
  background: var(--vps-primary) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(108, 58, 237, 0.25) !important;
}

/* ── Suggestion items need borders ── */
.nps-suggestions {
  border: 1px solid var(--vps-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
  background: var(--vps-card) !important;
  overflow: hidden !important;
}

.nps-suggestion-item {
  padding: 10px 16px !important;
  transition: background 0.1s ease !important;
}

.nps-suggestion-item:hover,
.nps-suggestion-item.active {
  background: var(--vps-surface) !important;
}

.nps-suggestions-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--vps-text-faint) !important;
  padding: 10px 16px 4px !important;
}

.nps-suggestions-divider {
  height: 1px !important;
  background: var(--vps-surface) !important;
  margin: 4px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HOTFIX: Real browser issues
   ═══════════════════════════════════════════════════════════════════════ */

/* Fix 1: Image container — don't crop, let image breathe */
.vp-search__card-img-wrap {
  aspect-ratio: auto !important;
  min-height: 180px !important;
  max-height: 220px !important;
  background: #F4F5F7 !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.vp-search__card-img {
  max-width: 100% !important;
  max-height: 180px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: auto !important;
  display: block !important;
}

/* Fix 2: Force hidden chips to hide regardless of any override */
.vp-search__chip--hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Fix 3: Keyword highlight — purple not green */
.vps-hl,
mark.vps-hl,
span.vps-hl,
strong.vps-hl,
b.vps-hl {
  color: var(--vps-primary) !important;
  font-weight: 700 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Fix 4: In-stock color remains green but is smaller. */
.vp-search__card-stock,
.vp-search__card-stock--yes,
.vp-search__card-stock--no {
  font-size: 12px !important;
  margin-top: 4px !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HOTFIX 2: Detail polish from real browser audit
   ═══════════════════════════════════════════════════════════════════════ */

/* Remove left border/line on sidebar items */
.vp-search__facets-sidebar .vp-search__chip,
.vp-search__facets-sidebar .vp-search__facet-body .vp-search__chip {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
  padding-left: 0 !important;
}

/* Sidebar section titles — slightly larger, darker */
.vp-search__facet-header {
  font-size: 12px !important;
  color: var(--vps-muted) !important;
  padding: 14px 0 8px !important;
}

.vp-search__facet-group {
  border-bottom: 1px solid var(--vps-surface) !important;
  padding-bottom: 4px !important;
  margin-bottom: 4px !important;
}

/* Sort dropdown — more refined */
.vp-search__results-sort select {
  font-size: 13px !important;
  padding: 8px 28px 8px 12px !important;
  border: 1.5px solid var(--vps-border) !important;
  border-radius: 10px !important;
  background: var(--vps-card) !important;
  color: var(--vps-muted) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

.vp-search__results-sort select:focus {
  border-color: var(--vps-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(108,58,237,0.1) !important;
}

/* In-stock dot, smaller. */
.vp-search__card-stock--yes::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #059669 !important;
  margin-right: 4px !important;
  vertical-align: middle !important;
}

/* Zero result recovery cards — add border */
.vp-search__recovery-products .vp-search__card,
.vp-search__results-main .vp-search__card {
  border: 1px solid #E8ECF1 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* "+14 more" and "+ More filters" buttons, styled as links. */
.vp-search__facet-more,
.vp-search__chip--toggle {
  display: block !important;
  color: var(--vps-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}

.vp-search__facet-more:hover,
.vp-search__chip--toggle:hover {
  text-decoration: underline !important;
}

/* Facet chevron — style the expand arrow */
.vp-search__facet-chevron {
  width: 16px !important;
  height: 16px !important;
  color: #CBD5E1 !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
  flex-shrink: 0 !important;
}

.vp-search__facet-header:hover .vp-search__facet-chevron {
  color: var(--vps-primary) !important;
}

.vp-search__facet-header[aria-expanded="false"] .vp-search__facet-chevron {
  transform: rotate(-90deg) !important;
}

/* Results count — cleaner */
.vp-search__results-count {
  font-size: 13px !important;
  color: var(--vps-text-faint) !important;
}

.vp-search__results-count strong {
  color: var(--vps-text) !important;
}

/* Mobile filter toggle button — styled */
.nps-mobile-filter-toggle {
  border: 1.5px solid var(--vps-border) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--vps-muted) !important;
  background: var(--vps-card) !important;
  cursor: pointer !important;
}

.nps-mobile-filter-toggle:hover,
.nps-mobile-filter-toggle.active {
  border-color: var(--vps-primary) !important;
  color: var(--vps-primary) !important;
  background: var(--vps-surface) !important;
}

/* Quick panel recent search items */
.vp-search__quick-item {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  color: var(--vps-muted) !important;
}

.vp-search__quick-item:hover {
  background: var(--vps-surface) !important;
  color: var(--vps-primary) !important;
}

/* ── Load More button ── */
.vp-search__pag-btn--load-more {
  display: block !important;
  width: 100% !important;
  padding: 14px 24px !important;
  border: 2px solid var(--vps-primary, var(--vps-primary)) !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--vps-primary, var(--vps-primary)) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  margin-top: 8px !important;
}

.vp-search__pag-btn--load-more:hover {
  background: var(--vps-primary, var(--vps-primary)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(108, 58, 237, 0.25) !important;
}

.vp-search__pag-btn--load-more:disabled {
  opacity: 0.6 !important;
  cursor: wait !important;
}

.vp-search__pag-count {
  font-weight: 400 !important;
  opacity: 0.7 !important;
}

.vp-search__pag-info {
  display: block !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--vps-text-faint, var(--vps-text-faint)) !important;
  padding: 12px 0 !important;
}

/* ── RTL (Right-to-Left) Support ─────────────────────────────────────── */

[dir="rtl"] .vp-search-overlay,
.vp-search-overlay[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .vp-search__facets-sidebar {
  border-right: none;
  border-left: 1px solid var(--vps-border, var(--vps-border));
  padding-right: 0;
  padding-left: 16px;
}

[dir="rtl"] .vp-search__chip-count {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .vp-search__card-price-row {
  direction: ltr; /* Keep prices LTR */
}

/* ── Prevent layout shift — hide widget until JS initializes ── */
#vp-search-widget {
  opacity: 0;
  transition: opacity 0.2s ease;
  max-height: 50px;
  overflow: hidden;
}

#vp-search-widget.nps-ready {
  opacity: 1;
}

/* ── Image container fix — smaller, tighter ── */
.vp-search__card-img-wrap {
  min-height: 0 !important;
  max-height: none !important;
  padding: 12px !important;
  aspect-ratio: 1 / 1 !important;
  background: var(--vps-surface) !important;
}

.vp-search__card-img {
  max-width: 90% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* Mobile: even more compact */
@media (max-width: 768px) {
  .vp-search__card-img-wrap {
    padding: 10px !important;
    aspect-ratio: 1 / 0.85 !important;
  }
  
  .vp-search__card {
    padding: 10px !important;
  }
  
  .vp-search__card-name {
    font-size: 12.5px !important;
    min-height: 0 !important;
    margin-bottom: 6px !important;
  }
  
  .vp-search__card-vendor {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }
  
  .vp-search__card-price {
    font-size: 15px !important;
  }
  
  .vp-search__card-stock--yes,
  .vp-search__card-stock--no {
    font-size: 10px !important;
  }
  
  /* Grid gap tighter on mobile */
  .vp-search__grid {
    gap: 10px !important;
  }
}

/* ==========================================================================
   SECTION 20: Commercial UI pass - final browser-safe overrides
   ========================================================================== */

#nps-root,
#nps-root *,
.vp-search-overlay,
.vp-search-overlay *,
.vp-search-widget,
.vp-search-widget *,
.nps-mobile-fab,
.nps-popular-widget,
.nps-popular-widget * {
  --vps-primary: #8B1538;
  --vps-primary-light: #FFF1F4;
  --vps-primary-dark: #5F1028;
  --vps-primary-ring: rgba(139, 21, 56, 0.18);
  --vps-primary-ghost: rgba(139, 21, 56, 0.06);
  --vps-border: #DDE4EE;
  --vps-card: #FFFFFF;
  --vps-bg: #F7F9FC;
  --vps-surface: #F3F6FA;
  --vps-text: #172033;
  --vps-muted: #5D6B82;
  --vps-text-faint: #91A0B5;
  --vps-radius: 8px;
  letter-spacing: 0 !important;
}

.vp-search-overlay.is-open {
  align-items: flex-start !important;
  justify-content: center !important;
}

.vp-search-overlay__backdrop {
  background: rgba(10, 15, 26, 0.46) !important;
}

.vp-search-overlay__panel {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: 1120px !important;
  max-height: calc(100dvh - 48px) !important;
  margin: 24px 0 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow:
    0 28px 72px rgba(12, 18, 31, 0.22),
    0 8px 24px rgba(12, 18, 31, 0.12) !important;
}

@supports not (height: 100dvh) {
  .vp-search-overlay__panel {
    max-height: calc(100vh - 48px) !important;
  }
}

.vp-search-overlay__header {
  padding: 18px 28px 12px !important;
}

.vp-search-overlay__title {
  color: var(--vps-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.vp-search-overlay__close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--vps-muted) !important;
}

.vp-search-overlay__close:hover,
.vp-search-overlay__close:focus-visible {
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary) !important;
  box-shadow: 0 0 0 3px var(--vps-primary-ring) !important;
}

.vp-search-overlay__slot {
  padding: 0 24px 16px !important;
}

.vp-search-overlay__slot .vp-search__form {
  min-height: 52px !important;
  border: 1.5px solid var(--vps-border) !important;
  border-radius: 12px !important;
  background: var(--vps-bg) !important;
  box-shadow: none !important;
}

.vp-search-overlay__slot .vp-search__form:focus-within {
  border-color: var(--vps-primary) !important;
  background: var(--vps-card) !important;
  box-shadow: 0 0 0 4px var(--vps-primary-ring) !important;
}

.vp-search-overlay__slot .vp-search__input,
.vp-search-overlay__slot .vp-search__input:focus,
#vp-search-widget .vp-search__input,
#vp-search-widget .vp-search__input:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: var(--vps-text) !important;
}

.vp-search__btn,
.vp-search-overlay__slot .vp-search__btn,
.nps-mobile-fab {
  background: var(--vps-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(139, 21, 56, 0.22) !important;
}

.vp-search__btn:hover,
.vp-search-overlay__slot .vp-search__btn:hover,
.nps-mobile-fab:hover {
  background: var(--vps-primary-dark) !important;
  box-shadow: 0 10px 22px rgba(139, 21, 56, 0.28) !important;
}

.vp-search-overlay__body {
  padding: 20px 24px 22px !important;
  background: #F8FAFD !important;
}

.vp-search__results-layout {
  gap: 24px !important;
}

.vp-search__facets-sidebar {
  border-right: 1px solid var(--vps-border) !important;
}

.vp-search__facet-header,
.vp-search__quick-header,
.nps-suggestions-label,
.vp-search__card-vendor,
.vp-search__card-brand,
.vp-search__empty-section-title {
  letter-spacing: 0 !important;
}

.vp-search__facet-header:hover,
.vp-search__facet-header:hover .vp-search__facet-chevron,
.vp-search__facets-sidebar .vp-search__chip:hover,
.vp-search__facets-sidebar .vp-search__chip--active,
.vp-search__quick-item:hover,
.nps-facets-expand,
.vp-search__facet-more,
.vp-search__chip--toggle,
.vps-hl,
mark.vps-hl,
.vp-search__card-name mark {
  color: var(--vps-primary) !important;
}

.vp-search__card-name mark {
  background: var(--vps-primary-light) !important;
  border-radius: 3px !important;
  padding: 0 2px !important;
}

.vp-search__results-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid #E9EEF5 !important;
}

.vp-search__results-count {
  min-width: 0 !important;
  color: var(--vps-muted) !important;
}

.vp-search__results-count strong {
  color: var(--vps-text) !important;
}

.vp-search__results-sort select {
  border-color: var(--vps-border) !important;
  color: var(--vps-text) !important;
  min-height: 38px !important;
}

.vp-search__results-sort select:focus {
  border-color: var(--vps-primary) !important;
  box-shadow: 0 0 0 3px var(--vps-primary-ring) !important;
}

.vp-search__grid,
.vp-search__skeleton-grid {
  gap: 18px !important;
}

.vp-search__card {
  min-width: 0 !important;
  border-radius: 8px !important;
  border-color: #E3E9F1 !important;
  background: var(--vps-card) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.vp-search__card:hover,
.vp-search__card:focus-visible {
  border-color: rgba(139, 21, 56, 0.38) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10) !important;
}

.vp-search__card-img-wrap {
  border-radius: 6px !important;
  background: #F3F6FA !important;
}

.vp-search__card-body {
  min-width: 0 !important;
}

.vp-search__card-name {
  color: var(--vps-text) !important;
  font-size: 13.25px !important;
  line-height: 1.36 !important;
}

.vp-search__card-price {
  color: var(--vps-primary) !important;
  letter-spacing: 0 !important;
}

.vp-search__chip--active,
.vp-search__chip--primary,
.vp-search__active-filter,
.nps-trending-tag:hover,
.vp-search__quick-tags .vp-search__chip.nps-trending-tag:hover,
.nps-trending-chips .nps-trending-tag:hover {
  background: var(--vps-primary) !important;
  border-color: var(--vps-primary) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.vp-search__chip:hover,
.vp-search__quick-tags .vp-search__chip:hover,
.nps-mobile-filter-toggle:hover,
.nps-mobile-filter-toggle.active {
  border-color: var(--vps-primary) !important;
  color: var(--vps-primary) !important;
  background: var(--vps-primary-light) !important;
}

.nps-trending-tag,
.vp-search__quick-tags .vp-search__chip.nps-trending-tag,
.nps-trending-chips .nps-trending-tag {
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary) !important;
}

.vp-search__pag-btn--load-more {
  border-color: var(--vps-primary) !important;
  color: var(--vps-primary) !important;
}

.vp-search__pag-btn--load-more:hover {
  background: var(--vps-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(139, 21, 56, 0.18) !important;
}

.nps-suggestions {
  left: 24px !important;
  right: 24px !important;
  border-color: var(--vps-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16) !important;
}

.vp-search-overlay.nps-suggestions-open .vp-search-overlay__body {
  min-height: 370px !important;
}

.nps-suggestions-section {
  padding: 4px 0 !important;
}

.nps-suggestions-divider {
  height: 1px !important;
  margin: 4px 0 !important;
  background: #E9EEF5 !important;
}

.nps-suggestion-item:hover,
.nps-suggestion-item--active,
.nps-suggestion-item.active {
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary-dark) !important;
}

.nps-suggestion-item--query .nps-suggestion-text strong,
.nps-suggestion-item--product .nps-suggestion-text strong,
.nps-suggestion-product-name strong {
  color: var(--vps-primary) !important;
}

.nps-suggestion-item--product {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

.nps-suggestion-img,
.nps-suggestion-product-img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  border: 1px solid var(--vps-border) !important;
  background: var(--vps-surface) !important;
  object-fit: contain !important;
}

.nps-suggestion-img--empty,
.nps-suggestion-product-img--empty {
  display: inline-block !important;
}

.nps-suggestion-item--product .nps-suggestion-text,
.nps-suggestion-product-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nps-suggestion-price,
.nps-suggestion-product-price {
  color: var(--vps-primary) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .vp-search-overlay.is-open {
    padding: 0 !important;
  }

  .vp-search-overlay__panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
  }

  .vp-search-overlay__header {
    padding: 16px 24px 12px !important;
  }

  .vp-search-overlay__slot {
    padding: 0 24px 16px !important;
  }

  .vp-search-overlay__body {
    padding: 16px 24px 24px !important;
    overflow-y: auto !important;
  }

  .vp-search__summary {
    margin-bottom: 12px !important;
  }

  .vp-search__results-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    margin-bottom: 14px !important;
  }

  .nps-mobile-filter-toggle {
    grid-column: 1 !important;
    min-height: 44px !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }

  .vp-search__results-count {
    grid-column: 2 !important;
    justify-self: end !important;
    text-align: right !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  .vp-search__results-sort {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .vp-search__results-sort select {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }

  .vp-search__results-layout {
    gap: 14px !important;
  }

  .vp-search__facets-sidebar {
    border-right: 0 !important;
    border-bottom: 1px solid var(--vps-border) !important;
    padding: 0 0 12px !important;
  }

  .vp-search__grid,
  .vp-search__skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .nps-suggestions {
    left: 24px !important;
    right: 24px !important;
    max-height: 320px !important;
  }
}

@media (max-width: 480px) {
  .vp-search-overlay__header,
  .vp-search-overlay__slot,
  .vp-search-overlay__body {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .vp-search__grid,
  .vp-search__skeleton-grid {
    grid-template-columns: 1fr !important;
  }

  .vp-search__card {
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 12px !important;
  }

  .vp-search__card-img-wrap {
    width: 108px !important;
    min-width: 108px !important;
    min-height: 108px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  .vp-search__card-body {
    padding: 2px 0 !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  .vp-search__card-vendor,
  .vp-search__card-brand {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .vp-search__card-name {
    -webkit-line-clamp: 3 !important;
    min-height: 0 !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
    margin-bottom: 4px !important;
  }

  .vp-search__card-price {
    font-size: 15.5px !important;
  }

  .vp-search__card-stock,
  .vp-search__card-stock--yes,
  .vp-search__card-stock--no {
    font-size: 11px !important;
  }

  .nps-suggestion-item--product {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }

  .nps-suggestion-price,
  .nps-suggestion-product-price {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-search-overlay,
  .vp-search-overlay *,
  .vp-search-widget,
  .vp-search-widget *,
  .nps-mobile-fab,
  .nps-popular-widget,
  .nps-popular-widget * {
    animation: none !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

.vp-search-overlay .vp-search__results-main .vp-search__card,
.vp-search-overlay .vp-search__recovery-products .vp-search__card,
.vp-search-overlay .vp-search__card {
  border-radius: 8px !important;
}

.vp-search-overlay .vp-search__card-img-wrap {
  border-radius: 6px !important;
}

.vp-search-overlay .vp-search__empty-actions .vp-search__chip,
.vp-search-overlay .vp-search__empty-actions .vp-search__chip--primary {
  min-height: 40px !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

@media (max-width: 480px) {
  .vp-search-overlay .vp-search__card {
    align-items: center !important;
  }

  .vp-search-overlay .vp-search__card-img-wrap {
    align-self: center !important;
    height: 108px !important;
  }
}

/* Empty result recovery view: compact, wrapped, and commercially presentable. */
.vp-search-overlay .vp-search__empty--recovery {
  display: grid !important;
  gap: 22px !important;
  padding: 30px 32px 32px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.vp-search-overlay .vp-search__empty--recovery::before {
  height: 4px !important;
}

.vp-search-overlay .vp-search__empty-head {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  width: min(100%, 680px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

.vp-search-overlay .vp-search__empty-icon {
  width: 46px !important;
  height: 46px !important;
  margin: 0 0 2px !important;
  opacity: 0.9 !important;
}

.vp-search-overlay .vp-search__empty-title {
  max-width: 48ch !important;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

.vp-search-overlay .vp-search__empty-hint {
  max-width: 52ch !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.vp-search-overlay .vp-search__empty-section {
  margin: 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid #E7EDF5 !important;
}

.vp-search-overlay .vp-search__empty-section + .vp-search__empty-section {
  margin-top: 0 !important;
  padding-top: 18px !important;
}

.vp-search-overlay .vp-search__empty-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--vps-text) !important;
}

.vp-search-overlay .vp-search__empty-section-dot {
  position: static !important;
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  box-shadow: 0 0 0 3px var(--vps-primary-ghost) !important;
}

.vp-search-overlay .vp-search__empty--recovery .vp-search__quick-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.vp-search-overlay .vp-search__empty--recovery .vp-search__quick-chips .vp-search__chip {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding: 7px 11px !important;
  border-radius: 8px !important;
  background: var(--vps-card) !important;
  border: 1px solid var(--vps-border) !important;
  color: var(--vps-text) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  text-align: left !important;
}

.vp-search-overlay .vp-search__empty--recovery .vp-search__chip-count {
  margin-left: 4px !important;
  color: var(--vps-text-faint) !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.vp-search-overlay .vp-search__empty--recovery .vp-search__grid--recovery {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.vp-search-overlay .vp-search__empty--recovery .vp-search__grid--recovery .vp-search__card {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 106px !important;
  padding: 12px !important;
}

.vp-search-overlay .vp-search__empty--recovery .vp-search__grid--recovery .vp-search__card-img-wrap {
  width: 82px !important;
  min-width: 82px !important;
  height: 82px !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 8px !important;
  aspect-ratio: 1 / 1 !important;
}

.vp-search-overlay .vp-search__empty--recovery .vp-search__grid--recovery .vp-search__card-body {
  padding: 0 !important;
  gap: 4px !important;
}

.vp-search-overlay .vp-search__empty--recovery .vp-search__grid--recovery .vp-search__card-name {
  -webkit-line-clamp: 2 !important;
  min-height: 0 !important;
  margin: 0 0 4px !important;
  font-size: 13px !important;
}

.vp-search-overlay .vp-search__empty--recovery .vp-search__grid--recovery .vp-search__card-price {
  font-size: 15px !important;
}

.vp-search-overlay .vp-search__empty--recovery .vp-search__empty-actions--universal {
  justify-content: center !important;
  margin: 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px dashed var(--vps-border) !important;
}

@media (min-width: 1180px) {
  .vp-search-overlay .vp-search__empty--recovery .vp-search__grid--recovery {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .vp-search-overlay .vp-search__empty--recovery .vp-search__grid--recovery .vp-search__card {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    min-height: 96px !important;
  }

  .vp-search-overlay .vp-search__empty--recovery .vp-search__grid--recovery .vp-search__card-img-wrap {
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
  }
}

@media (max-width: 768px) {
  .vp-search-overlay .vp-search__empty--recovery {
    gap: 14px !important;
    padding: 22px 14px 18px !important;
    background: var(--vps-card) !important;
  }

  .vp-search-overlay .vp-search__empty-head {
    gap: 6px !important;
    max-width: 310px !important;
  }

  .vp-search-overlay .vp-search__empty-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .vp-search-overlay .vp-search__empty-title {
    max-width: 30ch !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  .vp-search-overlay .vp-search__empty-hint {
    max-width: 32ch !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  .vp-search-overlay .vp-search__empty-suggest {
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    background: #F7F9FC !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .vp-search-overlay .vp-search__empty-section,
  .vp-search-overlay .vp-search__empty-section + .vp-search__empty-section {
    padding-top: 12px !important;
  }

  .vp-search-overlay .vp-search__empty-section-title {
    margin-bottom: 8px !important;
    font-size: 11.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .vp-search-overlay .vp-search__empty--recovery .vp-search__quick-chips {
    gap: 6px !important;
  }

  .vp-search-overlay .vp-search__empty--recovery .vp-search__quick-chips .vp-search__chip {
    flex: 1 1 calc(50% - 3px) !important;
    justify-content: space-between !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  .vp-search-overlay .vp-search__empty--recovery .vp-search__empty-section--products {
    display: none !important;
  }

  .vp-search-overlay .vp-search__empty--recovery .vp-search__grid--recovery {
    grid-template-columns: 1fr !important;
  }

  .vp-search-overlay .vp-search__empty--recovery .vp-search__empty-actions--universal {
    gap: 8px !important;
    padding-top: 12px !important;
  }

  .vp-search-overlay .vp-search__empty--recovery .vp-search__empty-actions--universal .vp-search__chip {
    flex: 1 1 100% !important;
    justify-content: center !important;
    min-height: 38px !important;
  }
}

/* Header embedding safeguards for Classic/Hummingbird-style PrestaShop themes. */
#header #vp-search-widget,
#_desktop_search_widget #vp-search-widget,
#_mobile_search_widget #vp-search-widget {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
}

#header #vp-search-widget .vp-search__form {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 8px !important;
  background: #F7F9FC !important;
  border-color: #D9E2EE !important;
  box-shadow: none !important;
}

#header #vp-search-widget .vp-search__form:focus-within {
  background: var(--vps-card) !important;
  border-color: var(--vps-primary) !important;
  box-shadow: 0 0 0 3px var(--vps-primary-ring) !important;
}

#header #vp-search-widget .vp-search__btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
}

body.vp-search-overlay-open #header #vp-search-widget {
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* ==========================================================================
   SECTION 21: Premium storefront interaction polish
   ========================================================================== */

.vp-search-overlay .vp-search__loading-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--vps-border) !important;
  border-radius: 8px !important;
  background: var(--vps-card) !important;
  color: var(--vps-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.vp-search-overlay .vp-search__loading-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--vps-primary) !important;
  box-shadow: 0 0 0 0 var(--vps-primary-ring) !important;
  animation: nps-loadingPulse 1.35s ease-out infinite !important;
  flex: 0 0 auto !important;
}

@keyframes nps-loadingPulse {
  0% {
    box-shadow: 0 0 0 0 var(--vps-primary-ring);
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 9px rgba(139, 21, 56, 0);
    opacity: 0.72;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(139, 21, 56, 0);
    opacity: 1;
  }
}

.vp-search-overlay .nps-mobile-filter-toggle {
  white-space: nowrap !important;
}

.vp-search-overlay .nps-mobile-filter-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: var(--vps-primary) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.vp-search-overlay .nps-mobile-filters-head {
  display: none !important;
}

.vp-search-overlay .nps-mobile-filters-title,
.vp-search-overlay .nps-mobile-filters-subtitle {
  display: block !important;
}

.vp-search-overlay .nps-mobile-filters-title {
  color: var(--vps-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.vp-search-overlay .nps-mobile-filters-subtitle {
  margin-top: 2px !important;
  color: var(--vps-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.vp-search-overlay .nps-mobile-filters-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--vps-border) !important;
  border-radius: 8px !important;
  background: var(--vps-card) !important;
  color: var(--vps-muted) !important;
}

.vp-search-overlay .nps-mobile-filters-close:hover,
.vp-search-overlay .nps-mobile-filters-close:focus-visible {
  border-color: var(--vps-primary) !important;
  color: var(--vps-primary) !important;
  box-shadow: 0 0 0 3px var(--vps-primary-ring) !important;
}

.vp-search-overlay .vp-search__facet-group--stock {
  padding-bottom: 12px !important;
}

.vp-search-overlay .vp-search__chip--stock {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--vps-border) !important;
  border-radius: 8px !important;
  background: var(--vps-card) !important;
  color: var(--vps-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.vp-search-overlay .vp-search__chip--stock::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--vps-success) !important;
  flex: 0 0 auto !important;
}

.vp-search-overlay .vp-search__chip--stock.vp-search__chip--active {
  color: #FFFFFF !important;
}

.vp-search-overlay .vp-search__chip--stock.vp-search__chip--active .vp-search__chip-count {
  color: rgba(255, 255, 255, 0.76) !important;
}

.vp-search-overlay .vp-search__card {
  outline: none !important;
}

.vp-search-overlay .vp-search__card:focus-visible,
.vp-search-overlay .vp-search__card--active {
  border-color: var(--vps-primary) !important;
  box-shadow:
    0 0 0 3px var(--vps-primary-ring),
    0 12px 28px rgba(15, 23, 42, 0.10) !important;
  transform: translateY(-2px) !important;
}

.vp-search-overlay .vp-search__card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: auto !important;
  min-width: 0 !important;
}

.vp-search-overlay .vp-search__card-stock {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.vp-search-overlay .vp-search__card-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 5px 9px !important;
  border-radius: 7px !important;
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.vp-search-overlay .vp-search__card:hover .vp-search__card-cta,
.vp-search-overlay .vp-search__card:focus-visible .vp-search__card-cta,
.vp-search-overlay .vp-search__card--active .vp-search__card-cta {
  background: var(--vps-primary) !important;
  color: #FFFFFF !important;
}

.vp-search-overlay .vp-search__empty--error {
  max-width: 560px !important;
  margin: 18px auto !important;
  padding: 34px 24px !important;
  border: 1px solid var(--vps-border) !important;
  border-radius: 8px !important;
  background: var(--vps-card) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.vp-search-overlay .nps-suggestions-empty-cta.nps-suggestion-item--active,
.vp-search-overlay .nps-suggestion-item[aria-selected="true"] {
  background: var(--vps-primary-light) !important;
  color: var(--vps-primary-dark) !important;
}

.vp-search-overlay .nps-suggestions-empty-cta.nps-suggestion-item--active {
  box-shadow: inset 0 0 0 1px rgba(139, 21, 56, 0.18) !important;
}

@media (max-width: 768px) {
  .vp-search-overlay__slot .vp-search__form {
    min-width: 0 !important;
  }

  .vp-search-overlay__slot .vp-search__input {
    min-width: 0 !important;
    padding-right: 44px !important;
  }

  .vp-search-overlay .vp-search__results-count {
    overflow-wrap: anywhere !important;
  }

  .vp-search-overlay.nps-filters-open .vp-search-overlay__body::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 30 !important;
    background: rgba(10, 15, 26, 0.34) !important;
    pointer-events: none !important;
  }

  .vp-search-overlay .vp-search__facets-sidebar {
    display: block !important;
    position: fixed !important;
    top: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    z-index: 40 !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72vh, 620px) !important;
    padding: 14px 16px 16px !important;
    overflow-y: auto !important;
    border: 1px solid var(--vps-border) !important;
    border-radius: 12px !important;
    background: var(--vps-card) !important;
    box-shadow: 0 24px 64px rgba(10, 15, 26, 0.28) !important;
    transform: translateY(calc(100% + 28px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 180ms ease,
      visibility 180ms ease !important;
  }

  .vp-search-overlay .vp-search__facets-sidebar.nps-mobile-filters-open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .vp-search-overlay .nps-mobile-filters-head {
    position: sticky !important;
    top: -14px !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: -14px -16px 12px !important;
    padding: 14px 16px 12px !important;
    border-bottom: 1px solid #E9EEF5 !important;
    background: var(--vps-card) !important;
  }

  .vp-search-overlay .vp-search__facet-header {
    min-height: 40px !important;
  }

  .vp-search-overlay .vp-search__facets-sidebar .vp-search__chip {
    min-height: 38px !important;
  }

  .vp-search-overlay .vp-search__card-footer {
    align-items: flex-end !important;
  }

  .vp-search-overlay .nps-suggestions-empty {
    align-items: flex-start !important;
  }

  .vp-search-overlay .nps-suggestions-empty-cta {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  .vp-search-overlay__header,
  .vp-search-overlay__slot,
  .vp-search-overlay__body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .vp-search-overlay .nps-suggestions {
    left: 16px !important;
    right: 16px !important;
  }

  .vp-search-overlay .vp-search__results-header {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .vp-search-overlay .nps-mobile-filter-toggle {
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .vp-search-overlay .vp-search__card {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  .vp-search-overlay .vp-search__card-img-wrap {
    width: 96px !important;
    min-width: 96px !important;
    height: 96px !important;
    min-height: 96px !important;
  }

  .vp-search-overlay .vp-search__card-footer {
    gap: 6px !important;
  }

  .vp-search-overlay .vp-search__card-stock {
    white-space: normal !important;
  }
}

/* Merchandising banners + redirect row (v2 rules) */
.nps-merch { margin: 0 0 12px; }
.nps-merch-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--nps-line, #e5e0f5);
  border-radius: 12px;
  background: var(--nps-accent-soft, #f4f1ff);
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.nps-merch-banner:hover { border-color: var(--nps-accent, #6b4fd8); text-decoration: none; }
.nps-merch-banner img { max-height: 44px; border-radius: 8px; }
.nps-merch-banner__arrow { margin-left: auto; color: var(--nps-accent, #6b4fd8); }
.nps-merch-banner--redirect { border-style: dashed; }

/* Add-to-cart from results + variant picker */
.vp-search-overlay .vp-search__card-add {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--vps-primary, var(--vps-primary));
  background: var(--vps-primary, var(--vps-primary));
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(30, 20, 60, .10);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
.vp-search-overlay .vp-search__card-add svg { flex: none; }
.vp-search-overlay .vp-search__card-add:hover {
  background: var(--vps-primary-dark, var(--vps-primary-dark));
  border-color: var(--vps-primary-dark, var(--vps-primary-dark));
  box-shadow: 0 4px 14px var(--vps-primary-ring, rgba(108, 58, 237, .3));
  transform: translateY(-1px);
}
.vp-search-overlay .vp-search__card-add:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(30, 20, 60, .10); }
.vp-search-overlay .vp-search__card-add:focus-visible { outline: 2px solid var(--vps-primary-dark, var(--vps-primary-dark)); outline-offset: 2px; }
.vp-search-overlay .vp-search__card-add:disabled { opacity: .7; cursor: default; transform: none; box-shadow: none; }
.vp-search-overlay .vp-search__card-add--ok { background: #1a8f4d !important; border-color: #1a8f4d !important; }
.vp-search-overlay .vp-search__card-add--ghost {
  background: var(--vps-card);
  color: var(--vps-text-soft, #6a6a7a);
  border-color: var(--vps-border, #e5e0f5);
  box-shadow: none;
  font-weight: 600;
}
.vp-search-overlay .vp-search__card:hover .vp-search__card-add--ghost {
  color: var(--vps-primary, var(--vps-primary));
  border-color: var(--vps-primary, var(--vps-primary));
  background: var(--vps-primary-ghost, rgba(108, 58, 237, .06));
}

.vp-search-overlay .nps-variant-picker {
  position: absolute;
  inset: auto 8px 8px 8px;
  z-index: 6;
  background: var(--vps-card);
  border: 1px solid var(--vps-border, #e5e0f5);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(30, 20, 60, .22);
  padding: 12px;
  animation: npsVariantIn .16s ease-out;
}
@keyframes npsVariantIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.vp-search-overlay .nps-variant-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.vp-search-overlay .nps-variant-picker__label { font-size: 12.5px; font-weight: 700; color: var(--vps-text, #1c1c28); }
.vp-search-overlay .nps-variant-picker__x {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: #9a94b0;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 6px;
}
.vp-search-overlay .nps-variant-picker__x:hover { color: var(--vps-text, #1c1c28); }
.vp-search-overlay .nps-variant-picker__select {
  width: 100%;
  padding: 9px 34px 9px 11px;
  border: 1px solid var(--vps-border, #e5e0f5);
  border-radius: 10px;
  font-size: 13px;
  color: var(--vps-text, #1c1c28);
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6a7a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
.vp-search-overlay .nps-variant-picker__select:focus {
  border-color: var(--vps-primary, var(--vps-primary));
  outline: 0;
  box-shadow: 0 0 0 3px var(--vps-primary-ring, rgba(108, 58, 237, .3));
}
.vp-search-overlay .nps-variant-picker__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 9px 1px 0;
}
.vp-search-overlay .nps-variant-picker__price { font-size: 15px; font-weight: 800; color: var(--vps-primary, var(--vps-primary)); }
.vp-search-overlay .nps-variant-picker__stock { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.vp-search-overlay .nps-variant-picker__stock.is-in { color: #1a8f4d; }
.vp-search-overlay .nps-variant-picker__stock.is-out { color: #c0392b; }
.vp-search-overlay .nps-variant-picker__stock.is-in::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a8f4d;
  margin-right: 5px;
}
.vp-search-overlay .nps-variant-picker__confirm { margin-top: 10px; }

/* ═══ Layer display modes (NPS_LAYER_MODE) ═══ */

/* Fullscreen takeover */
.vp-search-overlay--fullscreen .vp-search-overlay__panel {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh;
  height: 100dvh;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
@media (min-width: 1280px) {
  .vp-search-overlay--fullscreen .vp-search__grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Dropdown anchored under the search bar (desktop only; phones fall back).
   The whole point of this mode is that the shop stays visible: no blur,
   barely-there tint — the panel's shadow does the separation. */
.vp-search-overlay--dropdown .vp-search-overlay__backdrop {
  background: rgba(15, 15, 35, 0.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (min-width: 768px) {
  .vp-search-overlay--dropdown .vp-search-overlay__panel {
    border-radius: 16px !important;
    box-shadow:
      0 30px 70px rgba(0, 0, 0, 0.22),
      0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  }
  .vp-search-overlay--dropdown .vp-search__facets-sidebar {
    display: none !important;
  }
  .vp-search-overlay--dropdown .vp-search__results-layout {
    display: block !important;
  }
  .vp-search-overlay--dropdown .vp-search-overlay__hint {
    display: none;
  }
}

/* ═══ Semantic card, dialog, and mobile accessibility hardening ═══ */
.vp-search-overlay .vp-search__card {
  position: relative !important;
}

.vp-search-overlay .vp-search__card-link {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
  outline: 0 !important;
}

.vp-search-overlay .vp-search__card-link:focus-visible {
  border-radius: 6px !important;
  box-shadow: 0 0 0 3px var(--vps-primary-ring) !important;
}

.vp-search-overlay .vp-search__card--active,
.vp-search-overlay .vp-search__card:focus-within {
  border-color: var(--vps-primary) !important;
}

.vp-search-overlay .vp-search__card.nps-has-variant-picker {
  z-index: 8 !important;
  overflow: visible !important;
}

.vp-search-overlay .nps-variant-picker:focus {
  outline: none !important;
}

@media (max-width: 768px) {
  .nps-mobile-fab {
    right: max(20px, env(safe-area-inset-right)) !important;
    bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  .vp-search-overlay__panel {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overscroll-behavior: contain !important;
  }

  .vp-search-overlay__header {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
  }

  .vp-search-overlay__slot,
  .vp-search-overlay__body {
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
  }

  .vp-search-overlay__body {
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain !important;
  }

  .vp-search-overlay .vp-search__facets-sidebar {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    max-height: min(calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 620px) !important;
    overscroll-behavior: contain !important;
  }
}

@media (max-width: 480px) {
  .vp-search-overlay .vp-search__card {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .vp-search-overlay .vp-search__card-link {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .vp-search-overlay .vp-search__card-link .vp-search__card-img-wrap {
    margin: 0 !important;
  }

  .vp-search-overlay .vp-search__card-link .vp-search__card-body {
    align-self: stretch !important;
  }

  .vp-search-overlay .nps-variant-picker {
    inset: auto 6px 6px 6px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-search-overlay .nps-variant-picker,
  .vp-search-overlay .vp-search__card,
  .vp-search-overlay .vp-search__card-link,
  .vp-search-overlay .vp-search__facets-sidebar {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ANTVAPE THEME OVERRIDE — misma estructura/UX NP, piel de la tienda.
   Mismo selector-list que el bloque de tokens original => gana por orden.
   Oscuro (tema por defecto del sitio) + variante clara con html.light.
   ═══════════════════════════════════════════════════════════════════════ */
#nps-root,
#nps-root *,
.vp-search-overlay,
.vp-search-overlay *,
.vp-search-widget,
.vp-search-widget *,
.nps-mobile-fab,
.nps-popular-widget,
.nps-popular-widget * {
  /* Marca antvape */
  --vps-primary: hsl(222 90% 66%);
  --vps-primary-light: hsl(222 90% 66% / 0.14);
  --vps-primary-dark: hsl(222 90% 58%);
  --vps-primary-ring: hsl(222 90% 66% / 0.35);
  --vps-primary-ghost: hsl(222 90% 66% / 0.08);
  --vps-accent: hsl(162 88% 46%);
  /* Superficies (tema oscuro del sitio) */
  --vps-bg: hsl(224 16% 10%);
  --vps-card: hsl(223 15% 14%);
  --vps-surface: hsl(224 16% 10%);
  /* Texto */
  --vps-text: hsl(210 30% 98%);
  --vps-muted: hsl(218 14% 62%);
  --vps-text-faint: hsl(218 14% 48%);
  /* Bordes y sombras */
  --vps-border: hsl(222 14% 20%);
  --vps-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --vps-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --vps-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
  --vps-shadow-card-hover: 0 8px 24px hsl(222 90% 66% / 0.18), 0 2px 8px rgba(0, 0, 0, 0.35);
  /* Semánticos */
  --vps-success: hsl(162 88% 46%);
  --vps-success-bg: hsl(162 88% 46% / 0.12);
  --vps-warning: #f59e0b;
  --vps-warning-bg: hsl(38 92% 50% / 0.12);
  --vps-error: #ef4444;
  --vps-error-bg: hsl(0 84% 60% / 0.12);
  /* Tipografía del sitio */
  --vps-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Tema claro del sitio (html.light) */
html.light #nps-root,
html.light #nps-root *,
html.light .vp-search-overlay,
html.light .vp-search-overlay *,
html.light .vp-search-widget,
html.light .vp-search-widget *,
html.light .nps-mobile-fab,
html.light .nps-popular-widget,
html.light .nps-popular-widget * {
  --vps-primary: hsl(221 83% 53%);
  --vps-primary-light: hsl(221 83% 53% / 0.10);
  --vps-primary-dark: hsl(221 83% 45%);
  --vps-primary-ring: hsl(221 83% 53% / 0.3);
  --vps-primary-ghost: hsl(221 83% 53% / 0.06);
  --vps-accent: hsl(162 84% 36%);
  --vps-bg: hsl(220 20% 96%);
  --vps-card: hsl(0 0% 100%);
  --vps-surface: hsl(220 20% 96%);
  --vps-text: hsl(222 47% 11%);
  --vps-muted: hsl(217 16% 42%);
  --vps-text-faint: hsl(217 16% 58%);
  --vps-border: hsl(220 16% 90%);
  --vps-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --vps-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --vps-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08);
  --vps-shadow-card-hover: 0 8px 24px hsl(221 83% 53% / 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --vps-success: hsl(162 84% 36%);
  --vps-success-bg: hsl(162 84% 36% / 0.10);
}

/* Añadir = CTA esmeralda del sitio (como PDP/drawer), no primary */
.vp-search-overlay .vp-search__card-add {
  background: var(--vps-accent) !important;
  color: hsl(165 70% 6%) !important;
}
html.light .vp-search-overlay .vp-search__card-add {
  color: #fff !important;
}
.vp-search-overlay .vp-search__card-add--ghost {
  background: transparent !important;
  color: var(--vps-muted) !important;
  border: 1.5px solid var(--vps-border) !important;
}
/* Highlight de coincidencia con tinte de marca (como el buscador del sitio) */
.vp-search-overlay mark {
  background: hsl(222 90% 66% / 0.22);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
html.light .vp-search-overlay mark {
  background: hsl(221 83% 53% / 0.16);
}
/* Backdrop más profundo sobre el tema oscuro */
.vp-search-overlay__backdrop {
  background: rgba(4, 6, 10, 0.55) !important;
}


/* ── GLASS THEME-AWARE (pisa la sección FINAL VISUAL POLISH hardcodeada en blanco) ── */
.vp-search-overlay__panel {
  background: hsl(223 15% 14% / 0.97) !important;
  border: 1px solid hsl(0 0% 100% / 0.08) !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 12px 32px rgba(0, 0, 0, 0.35) !important;
}
html.light .vp-search-overlay__panel {
  background: hsl(0 0% 100% / 0.98) !important;
  border: 1px solid hsl(0 0% 100% / 0.85) !important;
  box-shadow:
    0 32px 80px rgba(12, 18, 31, 0.2),
    0 12px 32px rgba(12, 18, 31, 0.1) !important;
}
/* superficies interiores que heredaban blanco de la sección polish */
.vp-search-overlay__header,
.vp-search-overlay__slot,
.vp-search__summary,
.vp-search__facets-sidebar {
  background: transparent !important;
}
.vp-search-overlay__hint {
  background: hsl(224 16% 10% / 0.85) !important;
  color: var(--vps-muted) !important;
  border-top: 1px solid var(--vps-border) !important;
}
html.light .vp-search-overlay__hint {
  background: hsl(220 20% 96% / 0.9) !important;
}


/* superficies del cuerpo (hardcodes near-white restantes, p.ej. #F8FAFD) */
.vp-search-overlay__body,
.vp-search__results-layout,
.vp-search__results-main {
  background: var(--vps-surface) !important;
}