/** Shopify CDN: Minification failed

Line 536:3 Expected ":"

**/
/* ============================================
   NPC CUSTOMIZER — COMPLETE FINAL OVERRIDES
   File: assets/npc-customiser.css
   ============================================ */

/* ── CSS Variable Overrides ── */
#neon-customiser-app {
  --npc-font: var(--font-heading-family, 'Ubuntu', sans-serif);
  --neon-pink: #ff00ef;
  --neon-yellow: #ffce00;
  --primary-neon-colour: #ffce00;
  --secondary-neon-colour: #ffce00;
  --bg-neon-colour: #1a0033;
  --secondary-background-neon-colour: #2d0a54;
  --modal-background-neon-colour: #2d0a54;
  --text-neon-colour: #ffffff;
  --modal-text-neon-colour: #ffffff;
  --button-text-neon-colour: #ffffff;
  --price-label-neon-colour: #ffffff;
  --price-neon-colour: #ffce00;
  --main-price-neon-colour: #ffce00;
  --discount-price-neon-colour:rgb(255, 255, 255);
  --main-discount-price-neon-colour:rgb(255, 255, 255);
  --inclusions-neon-colour: #2d0a54;
  --inclusions-text-neon-colour: #ffffff;
  --outline-neon-colour: #4a148c;
  --selection-number-bg-neon-colour: #ffce00;
  --selection-number-neon-colour: #1a0033;
  --npc-success-colour: #ff00ef
  --npc-pending-colour: #ffce00;
  --form-error-neon-colour: #ff4444;
}


#neon-customiser-app {
  background: #1a0033 !important;
  background-color: #1a0033 !important;
}

/* ── Main containers ── */
#neon-customiser-app .npc-main-container {
  background: #1a0033 !important;
  background-color: #1a0033 !important;
}

#neon-customiser-app .npc-sidebar {
  background: #1a0033 !important;
  background-color: #1a0033 !important;
}

#neon-customiser-app .npc-sidebar-container {
  background: #1a0033 !important;
  background-color: #1a0033 !important;
  padding: 1rem !important;
  margin: 0 !important;
}

#neon-customiser-app .npc-selections {
  background: #1a0033 !important;
  background-color: #1a0033 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

#neon-customiser-app .npc-selections-text,
#neon-customiser-app .npc-selections-font,
#neon-customiser-app .npc-selections-color,
#neon-customiser-app .npc-selections-size,
#neon-customiser-app .npc-selections-backboard,
#neon-customiser-app .npc-selections-backboard-color,
#neon-customiser-app .npc-selections-mounting,
#neon-customiser-app .npc-selections-additional,
#neon-customiser-app .npc-selections-additional-item,
#neon-customiser-app .npc-selections-letter-part-list,
#neon-customiser-app .npc-selections-letter-part-color {
  background: #1a0033 !important;
  background-color: #1a0033 !important;
  padding: 0 !important;
}

/* ── Frame preview ── */
#neon-customiser-app .npc-frame-preview {
  border: 4px solid #4a148c !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}


/* ── Text input area ── */
#neon-customiser-app .npc-text-area,
#neon-customiser-app .npc-selections-text-form,
#neon-customiser-app .npc-text-area *,
#neon-customiser-app .npc-selections-text-form * {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  color: #ff00ef !important;
}

#neon-customiser-app .npc-text-area {
  border: 3px solid #4a148c !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  min-height: 80px !important;
}

#neon-customiser-app .npc-text-area input,
#neon-customiser-app .npc-text-area textarea,
#neon-customiser-app .npc-text-area [contenteditable],
#neon-customiser-app .npc-text-area [contenteditable="true"],
#neon-customiser-app .npc-text-area [contenteditable="plaintext-only"],
#neon-customiser-app .npc-selections-text-form input,
#neon-customiser-app .npc-selections-text-form textarea,
#neon-customiser-app .npc-selections-text-form [contenteditable] {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  color: #ff00ef !important;
  -webkit-text-fill-color: #ff00ef !important;
  caret-color: #ff00ef !important;
  font-size: 16px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Alignment buttons ── */
#neon-customiser-app .npc-alignment {
  display: flex !important;
  gap: 6px !important;
  padding: 6px !important;
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 2px solid #4a148c !important;
  border-radius: 10px !important;
  width: fit-content !important;
  margin-top: 0.5rem !important;
}

#neon-customiser-app .npc-button-icon {
  background: #1a0033 !important;
  background-color: #1a0033 !important;
  border: 2px solid #4a148c !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.7) !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-appearance: none !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

#neon-customiser-app .npc-button-icon:hover,
#neon-customiser-app .npc-button-icon.npc-selected {
  background: #ff00ef !important;
  background-color: #ff00ef !important;
  border-color: #ffce00 !important;
  color: #ffffff !important;
  box-shadow: 3px 3px 0 0 rgba(0,0,0,0.4) !important;
}

/* ── Section titles ── */
#neon-customiser-app .npc-title,
#neon-customiser-app .npc-title-example {
  color: #ffce00 !important;
  -webkit-text-fill-color: #ffce00 !important;
  font-family: var(--font-heading-family, 'Ubuntu', sans-serif) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.85rem !important;
  margin-bottom: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Number markers ── */
#neon-customiser-app .npc-number-marker {
  background: #ffce00 !important;
  background-color: #ffce00 !important;
  color: #1a0033 !important;
  -webkit-text-fill-color: #1a0033 !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  font-size: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ── Number badges ── */
#neon-customiser-app .npc-number-badge {
  background: #ffce00 !important;
  background-color: #ffce00 !important;
  color: #1a0033 !important;
  font-weight: 900 !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  font-size: 0.7rem !important;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.3) !important;
}

/* ── Descriptions ── */
#neon-customiser-app .npc-description,
#neon-customiser-app .npc-selection-description {
  font-size: 0.8rem !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.4 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Font selection button ── */
#neon-customiser-app .npc-selections-font-selection-button,
#neon-customiser-app .npc-selections-input-selection-button {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 3px solid #4a148c !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,0.3) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 0.75rem 1rem !important;
  -webkit-appearance: none !important;
  font-size: 0.9rem !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ── Font buttons ── */
#neon-customiser-app .npc-font-button {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 2px solid #4a148c !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3) !important;
  color: #ffffff !important;
  min-height: 44px !important;
  padding: 0.5rem 0.75rem !important;
  -webkit-appearance: none !important;
  transition: all 0.2s ease !important;
  font-size: 0.85rem !important;
}

#neon-customiser-app .npc-font-button.npc-selected {
  background: #ff00ef !important;
  background-color: #ff00ef !important;
  border-color: #1a0033 !important;
  box-shadow: 4px 4px 0 0 #ffce00 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* ── Base scrollable list ── */
#neon-customiser-app .npc-list--scrollable {
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 8px !important;
  padding-bottom: 4px !important;
  background: transparent !important;
  background-color: transparent !important;
}

#neon-customiser-app .npc-list--scrollable::-webkit-scrollbar {
  display: none !important;
}

/* ══════════════════════════════════════════════
   COLOUR SWATCHES — horizontal scroll on mobile
   ══════════════════════════════════════════════ */

#neon-customiser-app .npc-selections-color-wrapper,
#neon-customiser-app .npc-selections-letter-part-color-previews,
#neon-customiser-app .npc-selections-backboard-color-list {
  width: 100% !important;
  overflow: hidden !important;
}

#neon-customiser-app .npc-selections-color-wrapper .npc-list--scrollable,
#neon-customiser-app .npc-selections-letter-part-color-previews .npc-list--scrollable,
#neon-customiser-app .npc-selections-backboard-color-list .npc-list--scrollable {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#neon-customiser-app .npc-selections-color-wrapper .npc-list--scrollable::-webkit-scrollbar,
#neon-customiser-app .npc-selections-letter-part-color-previews .npc-list--scrollable::-webkit-scrollbar,
#neon-customiser-app .npc-selections-backboard-color-list .npc-list--scrollable::-webkit-scrollbar {
  display: none !important;
}

/* Swatch buttons */
#neon-customiser-app .npc-preview-selector {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 3px solid #4a148c !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  -webkit-appearance: none !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: border-color 0.2s ease !important;
}

#neon-customiser-app .npc-preview-selector.npc-selected {
  border-color: #ff00ef !important;
  box-shadow: none !important;
}

#neon-customiser-app .npc-preview-selector span {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#neon-customiser-app .npc-preview-selector span::before,
#neon-customiser-app .npc-preview-selector span::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* Bigger swatches on mobile */
@media screen and (max-width: 1024px) {
  #neon-customiser-app .npc-preview-selector {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    border-radius: 12px !important;
  }

  #neon-customiser-app .npc-preview-selector span {
    border-radius: 9px !important;
  }
}

/* ══════════════════════════════════════════════
   SIZE BUTTONS — horizontal scroll on mobile
   ══════════════════════════════════════════════ */

#neon-customiser-app .npc-selections-size-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#neon-customiser-app .npc-selections-size-list::-webkit-scrollbar {
  display: none !important;
}

#neon-customiser-app .npc-selection-button {
  flex-shrink: 0 !important;
  min-width: 130px !important;
  width: auto !important;
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 3px solid #4a148c !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,0.3) !important;
  color: #ffffff !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

#neon-customiser-app .npc-selection-button.npc-selected {
  border-color: #ff00ef !important;
  color: #ffce00 !important;
}

#neon-customiser-app .npc-selection-button-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  font-family: var(--font-heading-family, 'Ubuntu', sans-serif) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  background: transparent !important;
  background-color: transparent !important;
}

#neon-customiser-app .npc-selection-button-subtitle {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.75rem !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  background: transparent !important;
  background-color: transparent !important;
}

#neon-customiser-app .npc-button-container {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ══════════════════════════════════════════════
   BACKBOARD / MOUNTING — horizontal scroll on mobile
   ══════════════════════════════════════════════ */

#neon-customiser-app .npc-selection-list-example {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#neon-customiser-app .npc-selection-list-example::-webkit-scrollbar {
  display: none !important;
}

#neon-customiser-app .npc-selection-button-example {
  flex-shrink: 0 !important;
  /*min-width: 200px !important;*/
  width: auto !important;
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 3px solid #4a148c !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,0.3) !important;
  color: #ffffff !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
}

#neon-customiser-app .npc-selection-button-example.npc-selected {
  border-color: #ff00ef  !important;
}

#neon-customiser-app .npc-selection-button-example-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  background: transparent !important;
  background-color: transparent !important;
}

#neon-customiser-app .npc-selection-button-example-subtitle {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.75rem !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  background: transparent !important;
  background-color: transparent !important;
}

#neon-customiser-app .npc-selection-button-example-button {
 /* background: rgba(255,255,255,0.1) !important;
  background-color: rgba(255,255,255,0.1) !important;*/
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 8px !important;
  color: #ffce00 !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  min-height: 30px !important;
  padding: 0.25rem 0.75rem !important;
  -webkit-appearance: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-top: 0.25rem !important;
}

#neon-customiser-app .npc-selection-button-example.npc-selected .npc-selection-button-example-button {
  b/*ackground: rgba(255,255,255,0.2) !important;
  background-color: rgba(255,255,255,0.2) !important;*/
  border-color: #ffce00 !important;
}

/* ══════════════════════════════════════════════
   YES/NO BINARY — horizontal scroll on mobile
   ══════════════════════════════════════════════ */

#neon-customiser-app .npc-list.npc-selections-additional-binary {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#neon-customiser-app .npc-list.npc-selections-additional-binary::-webkit-scrollbar {
  display: none !important;
}

#neon-customiser-app .npc-selection-button-simple {
  flex-shrink: 0 !important;
  min-width: 100px !important;
  width: auto !important;
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 3px solid #4a148c !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3) !important;
  color: #ffffff !important;
  min-height: 44px !important;
  padding: 0.6rem 1.5rem !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-align: center !important;
}

#neon-customiser-app .npc-selection-button-simple.npc-selected {;
  border-color: #ff00ef  !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* ── Select input ── */
#neon-customiser-app .npc-select-input {
  width: 100% !important;
}

#neon-customiser-app .npc-select-input select {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 3px solid #4a148c !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 16px !important;
  min-height: 46px !important;
  padding: 0.75rem 1rem !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
}

/* ── Custom size container ── */
#neon-customiser-app .npc-selections-size-custom-container {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 3px solid #4a148c !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,0.4) !important;
  padding: 1rem !important;
  margin-top: 0.5rem !important;
}

#neon-customiser-app .npc-selections-size-custom-container * {
  background: transparent !important;
  background-color: transparent !important;
}

#neon-customiser-app .npc-selections-size-custom-container button {
  color: #ffce00 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid #4a148c !important;
  border-radius: 8px !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  -webkit-appearance: none !important;
}

/* ── Size slider ── */
#neon-customiser-app .npc-selections-size-slider {
  padding: 0.5rem 0 !important;
}

#neon-customiser-app .npc-selections-slider-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  background: #4a148c !important;
  background-color: #4a148c !important;
  border-radius: 0 !important;
  outline: none !important;
  border: none !important;
}

#neon-customiser-app .npc-selections-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 12px !important;
  background: #ff00ef !important;
  border: 3px solid #ffce00 !important;
  cursor: grab !important;
}

#neon-customiser-app .npc-selections-slider-input::-moz-range-thumb {
  width: 24px !important;
  height: 24px !important;
  border-radius: 12px !important;
  background: #ff00ef !important;
  border: 3px solid #ffce00 !important;
  cursor: grab !important;
}

#neon-customiser-app .npc-selections-size-custom-description {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.8rem !important;
  margin-top: 0.5rem !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Price box ── */
#neon-customiser-app .npc-sidebar-price-box {
  background: #1a0033 !important;
  background-color: #1a0033 !important;
  border: 4px solid #ffce00 !important;
  border-radius: 15px !important;
  box-shadow: 8px 8px 0 0 #ff00ef !important;
  padding: 1rem !important;
  margin: 1rem 0 0 !important;
}

#neon-customiser-app .npc-price {
  color: #ffce00 !important;
  font-weight: 900 !important;
  font-family: var(--font-heading-family, 'Ubuntu', sans-serif) !important;
  font-size: 1.25rem !important;
  background: transparent !important;
  background-color: transparent !important;
}

#neon-customiser-app .npc-sidebar-price-subtotal {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.8rem !important;
  text-decoration: line-through !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Add to bag button ── */
#neon-customiser-app .npc-sidebar-price-button-container {
  width: 100% !important;
  margin-top: 0.75rem !important;
  background: transparent !important;
  background-color: transparent !important;
}

#neon-customiser-app .npc-sidebar-price-button,
#neon-customiser-app .npc-sidebar-price-button-container > button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 0.875rem 2rem !important;
  background: linear-gradient(135deg, #ff00ef, #e605c6) !important;
  background-color: #ff00ef !important;
  color: #ffffff !important;
  font-family: var(--font-heading-family, 'Ubuntu', sans-serif) !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  border-radius: 15px !important;
  box-shadow: 6px 6px 0 0 #ffce00 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  transition: all 0.2s ease !important;
}

#neon-customiser-app .npc-sidebar-price-button:hover,
#neon-customiser-app .npc-sidebar-price-button-container > button:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 9px 9px 0 0 #ffce00 !important;
}

/* ── Custom design link ── */
#neon-customiser-app .npc-link--custom-design {
  color: #ffce00 !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  display: block !important;
  text-align: center !important;
  margin-top: 0.5rem !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Mobile footer sticky bar ── */
#neon-customiser-app .npc-sidebar-mobile-selections-footer {
  background: #1a0033 !important;
  background-color: #1a0033 !important;
  border-top: 4px solid #ff00ef !important;
  padding: 0.75rem !important;
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

#neon-customiser-app .npc-sidebar-mobile-selections-footer > div,
#neon-customiser-app .npc-sidebar-mobile-selections-footer button {
  background: linear-gradient(135deg, #ff00ef, #e605c6) !important;
  background-color: #ff00ef !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 0 #ffce00 !important;
  font-weight: 900 !important;
  min-height: 46px !important;
  padding: 0.75rem 1.25rem !important;
  -webkit-appearance: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ── Notification message ── */
#neon-customiser-app .npc-mcf-message,
#neon-customiser-app .npc-notification-mobile-tap-on-word {
  background: rgba(45,10,84,0.8) !important;
  background-color: rgba(45,10,84,0.8) !important;
  border: 2px solid #4a148c !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  padding: 0.5rem 0.75rem !important;
  text-align: center !important;
  margin: 0.5rem;
}

/* ── Modals ── */
#neon-customiser-app .npc-modal,
#neon-customiser-app .npc-image-modal {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#neon-customiser-app .npc-message-modal {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 4px solid #ff00ef !important;
  border-radius: 15px !important;
  box-shadow: 12px 12px 0 0 #ffce00 !important;
  padding: 1.5rem !important;
  max-width: 90vw !important;
}

#neon-customiser-app .npc-message-modal-content {
  color: #ffffff !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  background: transparent !important;
  background-color: transparent !important;
}

#neon-customiser-app .npc-message-modal-button {
  background: linear-gradient(135deg, #ff00ef, #e605c6) !important;
  background-color: #ff00ef !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 0 #ffce00 !important;
  font-weight: 900 !important;
  min-height: 44px !important;
  padding: 0.75rem 1.5rem !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  margin-top: 1rem !important;
  text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════
   DESKTOP OVERRIDES — restore grid/column layouts
   ══════════════════════════════════════════════ */
@media screen and (min-width: 1025px) {

  /* Colour swatches — 7 column grid */
  #neon-customiser-app .npc-selections-color-wrapper .npc-list--scrollable,
  #neon-customiser-app .npc-selections-letter-part-color-previews .npc-list--scrollable,
  #neon-customiser-app .npc-selections-backboard-color-list .npc-list--scrollable {
    display: grid !important;
    grid-template-columns: repeat(7, 40px) !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    overflow-x: visible !important;
    gap: 8px !important;
  }

  #neon-customiser-app .npc-preview-selector {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  /* Size buttons — 2 column grid */
  #neon-customiser-app .npc-selections-size-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    overflow-x: visible !important;
  }

  #neon-customiser-app .npc-selection-button {
    min-width: unset !important;
    width: 100% !important;
    flex-shrink: unset !important;
  }

  /* Backboard/mounting — stacked column */
  #neon-customiser-app .npc-selection-list-example {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: unset !important;
    overflow-x: visible !important;
  }

  #neon-customiser-app .npc-selection-button-example {
    min-width: unset !important;
    width: 100% !important;
    flex-shrink: unset !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
  }

  #neon-customiser-app .npc-selection-button-example-button {
    margin-top: 0 !important;
  }

  /* Yes/No — 2 column grid */
  #neon-customiser-app .npc-list.npc-selections-additional-binary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    overflow-x: visible !important;
  }

  #neon-customiser-app .npc-selection-button-simple {
    min-width: unset !important;
    width: 100% !important;
    flex-shrink: unset !important;
  }

  /* Desktop layout */
  #neon-customiser-app .npc-main-container {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  #neon-customiser-app .npc-sidebar-container {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 0 1.5rem !important;
    padding: 1.5rem !important;
  }

  #neon-customiser-app .npc-frame-preview {
    position: sticky !important;
    top: 105px !important;
    margin-left: 1.5rem !important;
    margin-top: 2rem !important;
    border-radius: 15px !important;
    border: 4px solid #4a148c !important;
  }

  #neon-customiser-app .npc-sidebar-price-box.display-mode {
    position: relative !important;
    margin: 0 1.5rem !important;
    padding: 1.5rem !important;
    background: #1a0033 !important;
    background-color: #1a0033 !important;
    border: 4px solid #ffce00 !important;
    box-shadow: 8px 8px 0 0 #ff00ef !important;
    border-radius: 15px !important;
  }

  .lg\:tw-overflow-y-auto::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
  }

  .lg\:tw-overflow-y-auto::-webkit-scrollbar-track {
    background: #1a0033 !important;
    border-radius: 10px !important;
  }

  .lg\:tw-overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: #ff00ef !important;
    border-radius: 10px !important;
    border: 2px solid #1a0033 !important;
  }

  .lg\:tw-overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background-color: #ffce00 !important;
  }

  .lg\:tw-overflow-y-auto {
    scrollbar-width: thin !important;
    scrollbar-color: #ffce00 #1a0033 !important;
    margin-right: 1.5rem !important;
    padding-right: 10px !important;
  }
}

/* ── iOS Safari fixes ── */
@supports (-webkit-touch-callout: none) {
  #neon-customiser-app input,
  #neon-customiser-app select,
  #neon-customiser-app textarea,
  #neon-customiser-app button {
    font-size: 16px !important;
    -webkit-appearance: none !important;
  }

  #neon-customiser-app .npc-list--scrollable {
    -webkit-overflow-scrolling: touch !important;
  }

  #neon-customiser-app .npc-text-area {
    background: #2d0a54 !important;
    background-color: #2d0a54 !important;
  }
}

/* ── Control bar pill ── */
#neon-customiser-app .npc-mcf-popover {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 3px solid #4a148c !important;
  border-radius: 15px !important;
  box-shadow: 6px 6px 0 0 #ff00ef !important;
  padding: 0.75rem 1.25rem !important;
  z-index: 9999 !important;
}
/* ── Fix dialog background ── */
#neon-customiser-app [role="dialog"],
#neon-customiser-app .tw-bg-white {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 3px solid #ff00ef !important;
  border-radius: 15px !important;
}

/* ── Protect swatch span colours from nuclear reset ── */
#neon-customiser-app [role="dialog"] .npc-preview-selector span[style],
#neon-customiser-app .npc-mcf-popover .npc-preview-selector span[style] {
  background-color: unset !important;
  background: unset !important;
}

/* Override the Tailwind control bar background variable */
#neon-customiser-app .tw-bg-control-bar-bg {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
}

/* Kill the rounded-full pill shape and replace with our radius */
#neon-customiser-app .tw-rounded-full {
  border-radius: 15px !important;
}


/* Override the Tailwind control bar background variable */
#neon-customiser-app .tw-bg-control-bar-bg {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
}

/* Kill the rounded-full pill shape and replace with our radius */
#neon-customiser-app .tw-rounded-full {
  border-radius: 15px !important;
}

/* Hide the arrow */
#neon-customiser-app .npc-mcf-popover > div:first-child {
  display: none !important;
}

/* ── Popover buttons ── */
#neon-customiser-app .npc-mcf-font-dropdown,
#neon-customiser-app .npc-mcf-color-dropdown {
  background: #1a0033 !important;
  background-color: #1a0033 !important;
  border: 2px solid #4a148c !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  min-height: 40px !important;
  padding: 0.5rem 0.75rem !important;
  -webkit-appearance: none !important;
  transition: all 0.2s ease !important;
}

#neon-customiser-app .npc-mcf-font-dropdown:hover,
#neon-customiser-app .npc-mcf-color-dropdown:hover {
  border-color: #ffce00 !important;
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
}

/* Icons inside popover buttons */
#neon-customiser-app .npc-mcf-popover svg {
  stroke: #ffce00 !important;
}

/* ── Page heading ── */
#neon-customiser-app .npc-heading {
  color: #ffffff !important;
  font-family: var(--font-heading-family, 'Ubuntu', sans-serif) !important;
  font-weight: 900 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Note container ── */
#neon-customiser-app .npc-note-container {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 2px solid #4a148c !important;
  border-radius: 10px !important;
  color: rgb(255, 255, 255) !important;
  font-size: 0.8rem !important;
  padding: 0.75rem 1rem !important;
}

/* ── Frame preview prices ── */
#neon-customiser-app .npc-frame-price,
#neon-customiser-app .npc-frame-price-subtotal {
  color: #ffce00 !important;
  font-weight: 900 !important;
  background: transparent !important;
  background-color: transparent !important;
}

#neon-customiser-app .npc-frame-price-subtotal {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.8rem !important;
  text-decoration: line-through !important;
}

/* ── Form field input ── */
#neon-customiser-app .npc-form-field-input {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 3px solid #4a148c !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 16px !important;
  min-height: 44px !important;
  padding: 0.75rem 1rem !important;
  -webkit-appearance: none !important;
  width: 100% !important;
}

#neon-customiser-app .npc-form-field-input:focus {
  border-color: #ff00ef !important;
  outline: none !important;
}


#neon-customiser-app .npc-selections-background-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 4px !important;
}

#neon-customiser-app .npc-selections-background-list::-webkit-scrollbar {
  display: none !important;
}

/* ── Popover — fix light gray buttons ── */
#neon-customiser-app .npc-mcf-popover button,
#neon-customiser-app .npc-mcf-popover [role="button"] {

  border: 2px solid #4a148c !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
  -webkit-appearance: none !important;
}

#neon-customiser-app .npc-mcf-popover button:hover,
#neon-customiser-app .npc-mcf-popover [role="button"]:hover {
  border-color: #ffce00 !important;

}

/* ── Popover SVG icons ── */
#neon-customiser-app .npc-mcf-popover svg path,
#neon-customiser-app .npc-mcf-popover svg rect,
#neon-customiser-app .npc-mcf-popover svg line {
  stroke: #ffce00 !important;
}

#neon-customiser-app .npc-mcf-popover svg {
  stroke: #ffce00 !important;
  fill: none !important;
}

/* ── Dimension tooltip box ── */
#neon-customiser-app [class*="npc-frame-preview"] > div[style*="background"],
#neon-customiser-app .npc-frame-preview div[style*="rgb(255"],
#neon-customiser-app .npc-frame-preview div[style*="background: rgb"] {
  border-radius: 10px !important;
}

/* Broader catch for the yellow dimension label */
#neon-customiser-app .npc-frame-preview > div > div[style],
#neon-customiser-app .npc-sign-container ~ div {
  border-radius: 10px !important;
}
/* ── Fix white popover dropdown background ── */
#neon-customiser-app [role="dialog"],
#neon-customiser-app [role="dialog"].tw-bg-white {
  background: #2d0a54 !important;
  background-color: #2d0a54 !important;
  border: 3px solid #ff00ef !important;
  border-radius: 15px !important;

}
/* ── Dialog swatch spans — restore inline colours ── */
#neon-customiser-app [role="dialog"] .npc-preview-selector {
  background: transparent !important;
  background-color: transparent !important;
}

#neon-customiser-app [role="dialog"] .npc-preview-selector span {
  background-color: revert-layer !important;
  background: revert-layer !important;
}

/* Prevent tw-bg-white bleeding into swatch spans */
#neon-customiser-app [role="dialog"] .npc-preview-selector span.tw-bg-white,
#neon-customiser-app [role="dialog"] .npc-preview-selector span[class*="tw-bg"] {
  background-color: revert-layer !important;
  background: revert-layer !important;
}
#neon-customiser-app .npc-mcf-popover [class*="tw-bg-white"],
#neon-customiser-app .npc-mcf-popover [class*="tw-bg-control-bar-button"] {
  background: #2d0a54 !important;
  background-color: #2d0a54!important;
  border: 3px solid #4a148c !important;
  border-radius: 10px !important;
}

/* But don't affect swatch buttons inside the dialog */
#neon-customiser-app [role="dialog"] button.tw-bg-white {
  background: transparent !important;
  background-color: transparent !important;
}