/* ── CRITICAL: prevent button colour flash ─── */
.wpc-customize-product,.btn-choose.wpc-customize-product,a.btn-choose.wpc-customize-product{background:#1A56DB!important;color:#fff!important;}
/* ─────────────────────────────────────────────── */
/*
 * Noid WPD Designer — editor.css  v1.2.3
 * Color scheme: Royal Blue + Red primary | Silver/Black/White secondary
 * Layout: matching Printful/Inkspire 3-column reference
 * By Noid Custom  05.16.2026
 */

/* ══ DESIGN TOKENS ═══════════════════════════════════════════════ */
:root {
  /* Primary palette */
  --nc-blue:        #1A56DB;
  --nc-blue-light:  rgba(26,86,219,.10);
  --nc-blue-hover:  #1544B8;
  --nc-red:         #E02424;
  --nc-red-light:   rgba(224,36,36,.08);
  
  /* Secondary palette */
  --nc-silver:      #9CA3AF;
  --nc-silver-light:#F3F4F6;
  --nc-black:       #111827;
  --nc-white:       #FFFFFF;
  
  /* Surfaces */
  --nc-bg:          #F9FAFB;
  --nc-surface:     #FFFFFF;
  --nc-surface-2:   #F3F4F6;
  --nc-surface-3:   #E5E7EB;
  
  /* Text */
  --nc-text:        #111827;
  --nc-text-2:      #6B7280;
  --nc-text-3:      #9CA3AF;
  
  /* Borders */
  --nc-border:      #E5E7EB;
  --nc-border-2:    #D1D5DB;
  
  /* Shadows */
  --nc-sh1: 0 1px 2px rgba(0,0,0,.05);
  --nc-sh2: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --nc-sh3: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --nc-sh4: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
  
  /* Geometry */
  --nc-r-sm:   6px;
  --nc-r-md:  10px;
  --nc-r-lg:  14px;
  --nc-r-pill:999px;
  
  /* Motion */
  --nc-t: 150ms ease;
  --nc-t-slow: 220ms ease;
  
  /* Font */
  --nc-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  
  /* Layout */
  --nc-header-h:  52px;
  --nc-toolbar-h: 46px;
  --nc-sidebar-w: 230px;
  --nc-right-w:   290px;
}

/* ══ GLOBAL RESET ════════════════════════════════════════════════ */
.wpc-container,
.wpc-container *,
.noid-designer-header,
.noid-designer-header * {
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased;
}

.wpc-container {
  font-family: var(--nc-font) !important;
  color: var(--nc-text);
  background: var(--nc-bg);
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5;
}

/* Kill flexiblegs layout interference inside our editor */
.wpc-container .o-col,
.wpc-container .o-wrap,
.wpc-container .xl-1-1,
.wpc-container .xl-2-3,
.wpc-container .xl-1-3 {
  display: revert !important;
  font-size: revert !important;
}

/* ══ NOID HEADER BAR ═════════════════════════════════════════════ */
.noid-designer-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: var(--nc-header-h);
  padding: 0 16px;
  background: var(--nc-white);
  border-bottom: 1px solid var(--nc-border);
  box-shadow: var(--nc-sh1);
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: var(--nc-font);
  gap: 12px;
  width: 100%;
}

.noid-designer-header__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
}

.noid-designer-header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--nc-t);
}
.noid-designer-header__logo-link:hover { opacity: .75; }
.noid-designer-header__logo-img {
  height: 52px;        /* doubled from 26px */
  width: auto;
  max-width: 240px;    /* doubled from 120px */
  object-fit: contain;
}
.noid-designer-header__site-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--nc-black);
  text-decoration: none;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.noid-designer-header__version {
  font-size: 10px;
  font-weight: 600;
  color: var(--nc-text-3);
  background: var(--nc-surface-2);
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-pill);
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.noid-designer-header__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  white-space: nowrap;
}
.noid-designer-header__product-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nc-text);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
/* Center the product info block relative to the full header */
.noid-designer-header__center {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center;
  pointer-events: none;
}
.noid-designer-header__save-status {
  font-size: 10px;
  color: var(--nc-text-3);
  line-height: 1;
}

.noid-designer-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Header buttons */
.noid-header-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--nc-r-sm);
  font-family: var(--nc-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  border: 1px solid var(--nc-border-2) !important;
  background: var(--nc-white) !important;
  color: var(--nc-text) !important;
  text-decoration: none !important;
  transition: background var(--nc-t), border-color var(--nc-t) !important;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.noid-header-btn:hover {
  background: var(--nc-surface-2) !important;
  border-color: var(--nc-border-2) !important;
  color: var(--nc-text) !important;
}
.noid-header-btn svg {
  width: 13px;
  height: 13px;
  opacity: .65;
  flex-shrink: 0;
}
.noid-header-btn--primary {
  background: var(--nc-blue) !important;
  color: var(--nc-white) !important;
  border-color: var(--nc-blue) !important;
  font-weight: 600 !important;
}
.noid-header-btn--primary:hover {
  background: var(--nc-blue-hover) !important;
  border-color: var(--nc-blue-hover) !important;
}
.noid-header-btn--primary svg { opacity: 1; }

/* ══ TOOLBAR (above canvas) ══════════════════════════════════════ */


/* Toolbar buttons — override all old WPD sprite backgrounds */




/* Keep the sprite background-image but constrain it */





/* Separator within toolbar */
#wpc-buttons-bar .sep {
  width: 1px !important;
  height: 20px !important;
  background: var(--nc-border-2) !important;
  margin: 0 4px !important;
  border-radius: 0 !important;
  pointer-events: none;
  min-width: 1px !important;
  cursor: default !important;
  flex-shrink: 0;
}

/* Toolbar label text next to buttons (Undo/Redo etc) */
#wpc-buttons-bar .wpc-toolbar-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--nc-text-2) !important;
  padding: 0 6px;
  white-space: nowrap;
}

/* ══ MAIN LAYOUT ═════════════════════════════════════════════════ */
.wpc-editor-wrap {
  display: flex !important;
  height: calc(100vh - var(--nc-header-h) - var(--nc-toolbar-h)) !important;
  overflow: hidden !important;
  background: var(--nc-bg);
}

/* ══ LEFT SIDEBAR ════════════════════════════════════════════════ */
/* .wpc-editor-col (first one, not .right) */
div.wpc-editor-col:not(.right) {
  width: var(--nc-sidebar-w) !important;
  min-width: var(--nc-sidebar-w) !important;
  max-width: var(--nc-sidebar-w) !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  background: var(--nc-white) !important;
  border-right: 1px solid var(--nc-border) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important; /* not flex — accordion needs block */
  box-shadow: 1px 0 0 var(--nc-border);
  z-index: 10;
  padding: 6px 0 !important;
}

div.wpc-editor-col:not(.right)::-webkit-scrollbar { width: 0; }

/* Accordion container */
#wpc-tools-box-container.Accordion {
  border: none !important;
  width: 100% !important;
  background: transparent !important;
}

/* Each panel = a section */
.AccordionPanel {
  border: none !important;
  border-bottom: none !important;
  width: 100%;
}

/* TAB = Sidebar nav item */
.AccordionPanelTab {
  display: flex !important;
  flex-direction: column !important;   /* Icon on top, label below */
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% - 8px) !important;
  min-height: 56px !important;
  height: 56px !important;
  padding: 4px 4px !important;
  margin: 1px 4px !important;
  gap: 3px !important;
  border: none !important;
  border-radius: var(--nc-r-sm) !important;
  background: transparent !important;
  background-image: none !important;
  background-size: unset !important;
  background-position: unset !important;
  cursor: pointer !important;
  color: var(--nc-text-2) !important;
  font-family: var(--nc-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  text-align: left !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  transition: background var(--nc-t), color var(--nc-t) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Kill ALL pseudo-elements that show old icon sprite */
.AccordionPanelTab::before,
.AccordionPanelTab::after {
  display: none !important;
  content: none !important;
}

.AccordionPanelTab:hover {
  background: rgba(26,86,219,.08) !important;
  color: var(--nc-blue) !important;
}
.AccordionPanelTab:hover .noid-icon svg { stroke: #16A34A !important; }
.AccordionPanelTab:hover .noid-label { color: #16A34A !important; }

.AccordionPanelOpen > .AccordionPanelTab {
  background: var(--nc-blue) !important;
  color: #FFFFFF !important;
  border-left: none !important;
}
.AccordionPanelOpen > .AccordionPanelTab .noid-icon svg { stroke: #FFFFFF !important; }
.AccordionPanelOpen > .AccordionPanelTab .noid-label { color: #FFFFFF !important; }

/* SVG icons injected via noid-sidebar-icons.js */
.AccordionPanelTab .noid-icon {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  margin: 0 auto 2px !important;
  opacity: .55 !important;
  transition: opacity var(--nc-t) !important;
}
.AccordionPanelTab:hover .noid-icon { opacity: 1 !important; }
.AccordionPanelOpen > .AccordionPanelTab .noid-icon {
  opacity: 1 !important;
  color: var(--nc-blue) !important;
}
.AccordionPanelTab .noid-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tab text label */
.AccordionPanelTab .noid-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: inherit !important;
  line-height: 1 !important;
  white-space: nowrap;
}

/* Panel content — expand inline below tab */
.AccordionPanelContent {
  background: var(--nc-white) !important;
  border-top: 1px solid var(--nc-border) !important;
  border-bottom: 1px solid var(--nc-border) !important;
  overflow: hidden !important;
  padding: 0 !important;
  /* DO NOT set display here — Spry controls open/close via display:none/block */
}

/* When closed, Spry sets height:0 and overflow:hidden — respect that */
.AccordionPanelClosed .AccordionPanelContent {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Inner padding for panel content */
.AccordionPanelContent > div,
.AccordionPanelContent > form,
.AccordionPanelContent > p {
  padding: 10px !important;
}

/* ══ CANVAS CENTER — .wpc-editor-col-2 ══════════════════════════ */
.wpc-editor-col-2 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: #DDDEE0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;           /* reduced padding = more canvas space */
  overflow: auto !important;
  position: relative !important;
  gap: 14px !important;
}

/* Canvas card — full width of center column, canvas content centered inside */
#wpc-editor-container {
  background: var(--nc-white) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.10) !important;
  overflow: visible !important;
  display: flex !important;             /* flex so canvas-container centers */
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 400px !important;         /* minimum visible height */
  min-width: 280px !important;
  margin: 0 !important;
  line-height: 0;
  position: relative !important;
}

/* canvas-container: Fabric sets its pixel dimensions; margin:auto centers it */
#wpc-editor-container .canvas-container {
  display: block !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin: auto !important;   /* center horizontally and vertically within flex card */
}

/* Fabric sets these to position:absolute internally */
#wpc-editor-container .lower-canvas,
#wpc-editor-container .upper-canvas {
  display: block !important;
}

/* Part thumbnails row (Front/Back) */
/* Part switcher: #product-part-container > ul#wpc-parts-bar > li */
#product-part-container {
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

#wpc-parts-bar {
  display: flex !important;
  flex-direction: row !important;       /* HORIZONTAL — side by side */
  flex-wrap: nowrap !important;
  gap: 10px !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#wpc-parts-bar li {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--nc-text-2) !important;
  font-family: var(--nc-font) !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  border-radius: var(--nc-r-md) !important;
  border: 2px solid var(--nc-border-2) !important;
  background: var(--nc-white) !important;
  min-width: 60px !important;
  transition: border-color var(--nc-t), box-shadow var(--nc-t), background var(--nc-t) !important;
}

#wpc-parts-bar li:hover {
  border-color: var(--nc-blue) !important;
  background: rgba(26,86,219,.04) !important;
}

#wpc-parts-bar li.active,
#wpc-parts-bar li[class*="active"] {
  border-color: var(--nc-blue) !important;
  box-shadow: 0 0 0 2px rgba(26,86,219,.18) !important;
  background: rgba(26,86,219,.06) !important;
  color: var(--nc-blue) !important;
}

/* Product image inside each li */
#wpc-parts-bar li img {
  width: 46px !important;
  height: 52px !important;
  object-fit: contain !important;    /* NO STRETCH */
  object-position: center !important;
  display: block !important;
  image-rendering: -webkit-optimize-contrast !important;
}

/* ══ RIGHT PANEL — .wpc-editor-col.right ════════════════════════ */
div.wpc-editor-col.right {
  width: var(--nc-right-w) !important;
  min-width: var(--nc-right-w) !important;
  max-width: var(--nc-right-w) !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  background: var(--nc-white) !important;
  border-left: 1px solid var(--nc-border) !important;
  overflow-y: auto !important;
  display: block !important;
  box-shadow: -1px 0 0 var(--nc-border);
  z-index: 10;
}

/* Edit / Arrange tabs (injected by noid-header.js) */
.noid-right-tabs, .noid-right-tab { display:none!important; }
.noid-right-tab {
  flex: 1 !important;
  text-align: center !important;
  padding: 10px 8px !important;
  font-family: var(--nc-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--nc-text-2) !important;
  cursor: pointer !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: color var(--nc-t), border-color var(--nc-t) !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
.noid-right-tab.active {
  color: var(--nc-blue) !important;
  border-bottom-color: var(--nc-blue) !important;
}
.noid-right-tab:hover { color: var(--nc-text) !important; }

/* Right panel section label */
#wpc-design-btn-box .title,
#wpc-cart-box .title,
#wpc-action-title,
#wpd-cart-title {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--nc-text-3) !important;
  padding: 14px 16px 8px !important;
  background: none !important;
  border: none !important;
  font-family: var(--nc-font) !important;
}

/* ACTION BUTTONS IN RIGHT PANEL — override old dark WPD style */
#wpc-design-btn-box button,
#preview-btn,
#download-btn,
#save-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: calc(100% - 32px) !important;
  margin: 4px 16px !important;
  padding: 9px 14px !important;
  border-radius: var(--nc-r-sm) !important;
  font-family: var(--nc-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid var(--nc-border-2) !important;
  background: var(--nc-white) !important;
  color: var(--nc-text) !important;
  transition: background var(--nc-t), border-color var(--nc-t) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#wpc-design-btn-box button:hover,
#preview-btn:hover,
#download-btn:hover,
#save-btn:hover {
  background: var(--nc-surface-2) !important;
  color: var(--nc-text) !important;
}

/* ADD TO CART — Green (consistent with WooCommerce convention) */
.wpc-add-to-cart-btn,
.btn-wpc-atc,
button.wpc-add-to-cart-btn,
input[type="submit"].wpc-add-to-cart-btn,
#add-to-cart-btn,
.wpd-add-to-cart,
button[id="add-to-cart-btn"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: calc(100% - 32px) !important;
  margin: 8px 16px !important;
  padding: 12px 16px !important;
  border-radius: var(--nc-r-sm) !important;
  background: #16A34A !important;
  color: var(--nc-white) !important;
  border: none !important;
  font-family: var(--nc-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background var(--nc-t), transform var(--nc-t) !important;
  box-shadow: 0 1px 3px rgba(22,163,74,.25) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.wpc-add-to-cart-btn:hover, #add-to-cart-btn:hover {
  background: #15803D !important;
  color: var(--nc-white) !important;
}
.wpc-add-to-cart-btn:active, #add-to-cart-btn:active { transform: scale(.98) !important; }

/* SAVE DESIGN secondary */
.wpc-save-design-btn,
.btn-wpc-secondary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: calc(100% - 32px) !important;
  margin: 4px 16px !important;
  padding: 10px 16px !important;
  border-radius: var(--nc-r-sm) !important;
  background: var(--nc-blue-light) !important;
  color: var(--nc-blue) !important;
  border: none !important;
  font-family: var(--nc-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--nc-t) !important;
  text-transform: none !important;
}
.wpc-save-design-btn:hover { background: rgba(26,86,219,.16) !important; }

/* ══ QTY CONTROL ════════════════════════════════════════════════
   Card layout:
     ┌─────────────────────────────┐
     │      WHITE + 2XL            │  label — full width, centered
     │  [ 0 ]  [ – ]  [ + ]        │  row: number, minus, plus
     │          $0.00               │  price
     └─────────────────────────────┘
   ═══════════════════════════════════════════════════════════════ */

/* Card wrapper */
.wpc-qty-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  margin: 4px 12px !important;
  background: var(--nc-white) !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  transition: border-color 140ms !important;
}
.wpc-qty-container:focus-within,
.wpc-qty-container:hover { border-color: #1A56DB !important; }

/* Variation name — full width, centered, above controls */
.wpc-qty-container > label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--nc-text) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  font-family: var(--nc-font) !important;
  margin: 0 0 2px 0 !important;
}

/* Controls row wrapper — WPD outputs inputs as siblings of label.
   We use an inline-flex on the container plus CSS order/display tricks.
   Since the HTML is: label, input.minus, input.number, input.plus
   we use a sub-wrapper via CSS grid fallback trick:
   All inputs float into a flex row via their own display rules */
.wpc-qty-container > input,
.wpc-qty-container > input[type="number"],
.wpc-qty-container > input[type="button"] {
  /* Create an implicit row by overriding to inline-flex */
  display: inline-flex !important;
  align-self: center !important;
  margin: 0 2px !important;
}

/* Number input — remove BOTH browser spinners */
.wpc-qty-container .wpd-qty,
.wpc-qty-container input.wpd-qty,
.wpc-qty-container input[type="number"],
.wpc-qty-container .wpc-custom-right-quantity-input {
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  width: 52px !important;
  height: 38px !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--nc-text) !important;
  background: var(--nc-surface-2) !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 0 !important;
  font-family: var(--nc-font) !important;
  box-shadow: none !important;
  line-height: 38px !important;
}
/* Hide spinners for all browsers — comprehensive selectors */
.wpc-qty-container input[type="number"]::-webkit-inner-spin-button,
.wpc-qty-container input[type="number"]::-webkit-outer-spin-button,
.wpc-qty-container .wpd-qty::-webkit-inner-spin-button,
.wpc-qty-container .wpd-qty::-webkit-outer-spin-button,
.wpc-qty-container .wpc-custom-right-quantity-input::-webkit-inner-spin-button,
.wpc-qty-container .wpc-custom-right-quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

/* – and + buttons */
.wpc-qty-container .minus,
.wpc-qty-container .plus,
.wpc-qty-container input[type="button"].minus,
.wpc-qty-container input[type="button"].plus,
.wpc-qty-container input.minus,
.wpc-qty-container input.plus {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 8px !important;
  border: none !important;
  background: #F3F4F6 !important;
  color: #374151 !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  line-height: 38px !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 140ms, color 140ms !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Hover = royal blue + white symbol */
.wpc-qty-container .minus:hover,
.wpc-qty-container .plus:hover,
.wpc-qty-container input[type="button"].minus:hover,
.wpc-qty-container input[type="button"].plus:hover,
.wpc-qty-container input.minus:hover,
.wpc-qty-container input.plus:hover {
  background: #1A56DB !important;
  color: #FFFFFF !important;
}

/* Price */
.wpc-qty-container .total-price {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--nc-text-2) !important;
  text-align: center !important;
  font-family: var(--nc-font) !important;
}

/* ══ PRODUCT PAGE ENTRY BUTTONS ══════════════════════════════════ */
.btn-choose.custom, .wpc-customize-product {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1A56DB !important;
  color: var(--nc-white) !important;
  border: none !important;
  border-radius: var(--nc-r-sm) !important;
  font-family: var(--nc-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  transition: background var(--nc-t) !important;
  text-decoration: none !important;
  text-transform: none !important;
}
.btn-choose.custom:hover { background: var(--nc-blue-hover) !important; color: var(--nc-white) !important; }

.btn-choose.tpl, .wpc-upload-product-design {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--nc-blue-light) !important;
  color: var(--nc-blue) !important;
  border: none !important;
  border-radius: var(--nc-r-sm) !important;
  font-family: var(--nc-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 11px 24px !important;
  cursor: pointer !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  transition: background var(--nc-t) !important;
  text-decoration: none !important;
  text-transform: none !important;
}
.btn-choose.tpl:hover { background: rgba(26,86,219,.16) !important; color: var(--nc-blue) !important; }

/* ══ INPUTS ══════════════════════════════════════════════════════ */
.wpc-container input[type="text"],
.wpc-container input[type="number"],
.wpc-container input[type="email"],
.wpc-container input[type="search"],
.wpc-container textarea,
.wpc-container select,
.AccordionPanelContent input[type="text"],
.AccordionPanelContent input[type="number"],
.AccordionPanelContent select {
  width: 100% !important;
  padding: 7px 9px !important;
  background: var(--nc-white) !important;
  border: 1px solid var(--nc-border-2) !important;
  border-radius: var(--nc-r-sm) !important;
  font-family: var(--nc-font) !important;
  font-size: 13px !important;
  color: var(--nc-text) !important;
  outline: none !important;
  transition: border-color var(--nc-t), box-shadow var(--nc-t) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.wpc-container input:focus,
.wpc-container select:focus,
.wpc-container textarea:focus,
.AccordionPanelContent input:focus,
.AccordionPanelContent select:focus {
  border-color: var(--nc-blue) !important;
  box-shadow: 0 0 0 2px rgba(26,86,219,.12) !important;
}

input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: var(--nc-border-2) !important;
  cursor: pointer !important;
  accent-color: var(--nc-blue) !important;
  width: 100% !important;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 16px !important; height: 16px !important;
  border-radius: 50% !important;
  background: var(--nc-white) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.08) !important;
  cursor: grab !important;
}

/* ══ COLOUR PICKER ═══════════════════════════════════════════════ */
.sp-replacer {
  background: var(--nc-white) !important;
  border: 1px solid var(--nc-border-2) !important;
  border-radius: var(--nc-r-sm) !important;
  padding: 4px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}
.sp-replacer:hover { border-color: var(--nc-blue) !important; }
.sp-preview {
  border-radius: 4px !important;
  border: 1px solid var(--nc-border) !important;
  width: 20px !important; height: 20px !important;
}

/* ══ MODAL ═══════════════════════════════════════════════════════ */
.omodal-dialog {
  background: var(--nc-white) !important;
  border-radius: var(--nc-r-lg) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
  border: 1px solid var(--nc-border) !important;
  overflow: hidden !important;
}
.omodal-header {
  padding: 14px 18px 12px !important;
  border-bottom: 1px solid var(--nc-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.omodal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--nc-text) !important;
  font-family: var(--nc-font) !important;
}
.omodal-body { padding: 18px !important; }
.close {
  width: 26px !important; height: 26px !important;
  border-radius: 50% !important;
  background: var(--nc-surface-2) !important;
  border: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; font-size: 15px !important;
  color: var(--nc-text-2) !important;
  opacity: 1 !important; float: none !important;
}
.close:hover { background: var(--nc-surface-3) !important; }

/* ══ CLIPARTS ════════════════════════════════════════════════════ */
.clipart-img-wrap {
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  width: 50px !important; height: 50px !important;
  margin: 3px !important;
  border-radius: var(--nc-r-sm) !important;
  background: var(--nc-surface-2) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: all var(--nc-t) !important;
}
.clipart-img-wrap:hover {
  background: var(--nc-white) !important;
  border-color: var(--nc-blue) !important;
  transform: scale(1.07) !important;
  box-shadow: 0 2px 8px rgba(26,86,219,.15) !important;
}
.clipart-img { width: 100% !important; height: 100% !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }

/* ══ TEMPLATES ═══════════════════════════════════════════════════ */
#wpc-templates-list { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; padding: 10px !important; }
#wpc-templates-list .col-1-4 {
  background: var(--nc-white) !important; border: 1px solid var(--nc-border) !important;
  border-radius: var(--nc-r-md) !important; overflow: hidden !important;
  cursor: pointer !important; padding: 0 !important; text-align: center !important;
  transition: all var(--nc-t-slow) !important;
  display: block !important;
}
#wpc-templates-list .col-1-4:hover {
  box-shadow: 0 0 0 2px var(--nc-blue), var(--nc-sh3) !important;
  transform: translateY(-1px) !important;
}
#wpc-templates-list img { max-height: 80px !important; display: block !important; margin: 6px auto !important; object-fit: contain !important; }
.wpc-tpl-title { font-size: 10px !important; font-weight: 600 !important; color: var(--nc-text-2) !important; border-top: 1px solid var(--nc-border) !important; padding: 5px 6px !important; font-family: var(--nc-font) !important; }

/* ══ UPLOAD ZONE ═════════════════════════════════════════════════ */
.custom-uploader .drop {
  border: 1.5px dashed var(--nc-border-2) !important;
  border-radius: var(--nc-r-lg) !important;
  padding: 20px 14px !important;
  text-align: center !important;
  background: var(--nc-surface-2) !important;
  color: var(--nc-text-2) !important;
  transition: border-color var(--nc-t), background var(--nc-t) !important;
  cursor: pointer !important;
}
.custom-uploader .drop:hover {
  border-color: var(--nc-blue) !important;
  background: rgba(26,86,219,.05) !important;
}
.custom-upload-form .drop input { display: none !important; }
.custom-upload-form .drop a { color: var(--nc-blue) !important; font-weight: 600 !important; text-decoration: none !important; }

/* ══ PROGRESS BAR ════════════════════════════════════════════════ */
.acd-progress-bar { width: 100% !important; height: 4px !important; border-radius: 99px !important; border: none !important; background: var(--nc-border-2) !important; overflow: hidden !important; }
.acd-progress-bar .acd-progress { background: var(--nc-blue) !important; height: 100% !important; border-radius: 99px !important; }

/* ══ LOADER ══════════════════════════════════════════════════════ */
#wpc-loader, .blockUI { background: rgba(249,250,251,.90) !important; }

/* ══ CART PREVIEW ════════════════════════════════════════════════ */
.wpd-cart-preview-wrap { margin-top: 8px !important; font-family: var(--nc-font) !important; }
.wpd-cart-preview-label { display: block !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--nc-text-3) !important; margin-bottom: 5px !important; }
.wpd-cart-preview-strip { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; margin-bottom: 6px !important; }
.wpd-cart-thumb-btn { position: relative !important; width: 52px !important; height: 52px !important; border-radius: var(--nc-r-md) !important; background: var(--nc-surface-2) !important; border: 1.5px solid var(--nc-border-2) !important; overflow: hidden !important; cursor: pointer !important; padding: 0 !important; transition: all var(--nc-t) !important; }
.wpd-cart-thumb-btn:hover { border-color: var(--nc-blue) !important; box-shadow: 0 0 0 2px rgba(26,86,219,.18) !important; transform: scale(1.06) !important; }
.wpd-cart-thumb-btn img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; }
.wpd-cart-thumb-part-name { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; background: rgba(17,24,39,.7) !important; color: #FFF !important; font-size: 8px !important; font-weight: 700 !important; text-align: center !important; padding: 2px !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
.wpd-cart-edit-btn { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--nc-blue) !important; text-decoration: none !important; padding: 5px 10px !important; border-radius: var(--nc-r-pill) !important; background: var(--nc-blue-light) !important; transition: background var(--nc-t) !important; line-height: 1 !important; font-family: var(--nc-font) !important; }
.wpd-cart-edit-btn:hover { background: rgba(26,86,219,.18) !important; color: var(--nc-blue) !important; text-decoration: none !important; }

/* ══ LIGHTBOX ════════════════════════════════════════════════════ */
.wpd-design-lightbox { display: none !important; position: fixed !important; inset: 0 !important; z-index: 99999 !important; background: rgba(0,0,0,.5) !important; align-items: center !important; justify-content: center !important; padding: 20px !important; }
.wpd-design-lightbox.is-open { display: flex !important; }
.wpd-design-lightbox-inner { background: var(--nc-white) !important; border-radius: var(--nc-r-lg) !important; box-shadow: 0 20px 60px rgba(0,0,0,.2) !important; border: 1px solid var(--nc-border) !important; overflow: hidden !important; max-width: 640px !important; width: 100% !important; }
.wpd-design-lightbox-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 18px !important; border-bottom: 1px solid var(--nc-border) !important; }
.wpd-design-lightbox-title { font-size: 16px !important; font-weight: 700 !important; color: var(--nc-text) !important; font-family: var(--nc-font) !important; }
.wpd-design-lightbox-close { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: var(--nc-surface-2) !important; border: none !important; cursor: pointer !important; font-size: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--nc-text-2) !important; }
.wpd-lightbox-part-tabs { display: flex !important; gap: 4px !important; padding: 8px 16px !important; border-bottom: 1px solid var(--nc-border) !important; overflow-x: auto !important; }
.wpd-lightbox-part-tab { padding: 5px 14px !important; border-radius: var(--nc-r-pill) !important; font-size: 12px !important; font-weight: 500 !important; background: var(--nc-surface-2) !important; color: var(--nc-text-2) !important; border: none !important; cursor: pointer !important; font-family: var(--nc-font) !important; }
.wpd-lightbox-part-tab.active { background: var(--nc-blue) !important; color: var(--nc-white) !important; }
.wpd-design-lightbox-body { padding: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 200px !important; background: var(--nc-bg) !important; }
.wpd-design-lightbox-body img { max-width: 100% !important; max-height: 420px !important; object-fit: contain !important; border-radius: var(--nc-r-md) !important; display: block !important; }

/* ══ FOOTER ══════════════════════════════════════════════════════ */
.noid-footer-bar { text-align: center !important; padding: 8px 16px !important; background: var(--nc-white) !important; border-top: 1px solid var(--nc-border) !important; font-family: var(--nc-font) !important; font-size: 10px !important; font-weight: 500 !important; color: var(--nc-text-3) !important; }

/* ══ TOAST ═══════════════════════════════════════════════════════ */
#noid-hotkey-toast { position: fixed !important; bottom: 20px !important; left: 50% !important; transform: translateX(-50%) translateY(8px) !important; background: rgba(17,24,39,.9) !important; color: #FFF !important; font-family: var(--nc-font) !important; font-size: 12px !important; font-weight: 500 !important; padding: 6px 14px !important; border-radius: var(--nc-r-pill) !important; pointer-events: none !important; opacity: 0 !important; z-index: 99997 !important; white-space: nowrap !important; transition: opacity 160ms ease, transform 160ms ease !important; }
#noid-hotkey-toast.is-visible { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }

/* ══ HIDE LEGACY / CONFLICTS ════════════════════════════════════ */
.noid-logo-panel { display: none !important; }
.wpd-buttons-wrap-variation { display: none !important; }
.variation-wpc_data_upl { display: none !important; }
.wpc-editor-menu-box { display: none !important; } /* hide responsive hamburger */
.wpc-container label,
.AccordionPanelContent label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--nc-text-2) !important;
  display: block !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-family: var(--nc-font) !important;
}
.wpc-editor-col [type="checkbox"]:not(:checked)+label:before,
.wpc-editor-col [type="checkbox"]:checked+label:before,
.wpc-editor-col [type="radio"]:not(:checked)+label:before,
.wpc-editor-col [type="radio"]:checked+label:before,
.wpc-editor-col [type="checkbox"]:not(:checked)+label:after,
.wpc-editor-col [type="checkbox"]:checked+label:after,
.wpc-editor-col [type="radio"]:not(:checked)+label:after,
.wpc-editor-col [type="radio"]:checked+label:after { display: none !important; }

/* ══ RESPONSIVE ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  div.wpc-editor-col.right { display: none !important; }
  .noid-designer-header__center { display: none !important; }
}
@media (max-width: 600px) {
  :root { --nc-sidebar-w: 56px !important; }
  .noid-designer-header { padding: 0 10px !important; }
  .noid-header-btn span { display: none !important; }
}

/* ══ HEADER ADD TO CART BUTTON (injected by noid-header.js) ═════ */
.noid-header-btn--atc {
  background: #16A34A !important;
  color: var(--nc-white) !important;
  border-color: #16A34A !important;
  font-weight: 600 !important;
}
.noid-header-btn--atc:hover {
  background: #15803D !important;
  border-color: #15803D !important;
  color: var(--nc-white) !important;
}
.noid-header-btn--atc svg { opacity: 1; }

/* Next button = royal blue */
.noid-header-btn--primary {
  background: #1A56DB !important;
  color: var(--nc-white) !important;
  border-color: #1A56DB !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(26,86,219,.25) !important;
}
.noid-header-btn--primary:hover {
  background: #1544B8 !important;
  border-color: #1544B8 !important;
}

/* ══ LOADING OVERLAY — minimal blockUI ══════════════════════════ */
.blockUI.blockMsg.blockElement,
.blockUI.blockMsg.blockPage {
  font-family: var(--nc-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--nc-text-2) !important;
  background: rgba(249,250,251,.92) !important;
  border: none !important;
  border-radius: var(--nc-r-lg) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
  padding: 16px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.blockUI.blockMsg.blockPage {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  min-width: 120px !important;
}
/* Spinner before the text */
.blockUI.blockMsg::before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important; height: 16px !important;
  border: 2px solid var(--nc-border-2) !important;
  border-top-color: var(--nc-blue) !important;
  border-radius: 50% !important;
  animation: nc-spin .65s linear infinite !important;
  flex-shrink: 0;
}
@keyframes nc-spin { to { transform: rotate(360deg); } }
.blockOverlay {
  background: rgba(249,250,251,.70) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  opacity: 1 !important;
}

/* ══ NOID SPINNER (replaces blockUI "Just a moment" text) ═══════ */
.noid-spinner-wrap {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.noid-spinner-ring {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(26,86,219,.15);
  border-top-color: #1A56DB;
  border-radius: 50%;
  animation: noid-spin 0.65s linear infinite;
}

@keyframes noid-spin {
  to { transform: rotate(360deg); }
}

/* Override blockUI overlay and message box */
.blockUI.blockOverlay {
  z-index: 1035 !important;  /* below omodal backdrop */
  background: rgba(249,250,251,.80) !important;
  /* NO backdrop-filter — it creates stacking context that traps modals */
  opacity: 1 !important;
  cursor: default !important;
}

.blockUI.blockMsg {
  z-index: 1036 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: default !important;
}

/* Hide any h1 text blockUI may render */
.blockUI.blockMsg h1 {
  display: none !important;
}

/* ══ BLOCKUI Z-INDEX FIX — stays below omodal (z:1040/1050) ═════ */
.blockUI.blockOverlay { z-index: 1035 !important; }
.blockUI.blockMsg     { z-index: 1036 !important; }
/* omodal must be above blockUI */
.omodal     { z-index: 1051 !important; }
.omodal-backdrop { z-index: 1040 !important; }

/* ══ SHAPE BUTTONS — pre-loaded common shapes ════════════════════
   The span elements (#square-btn etc) are empty — styled via CSS
   using SVG background-images so they show visible shape icons.
   ═══════════════════════════════════════════════════════════════ */

/* Shape button base */
#square-btn, #r-square-btn, #circle-btn, #triangle-btn,
#heart-btn, .polygon-btn, .star-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 3px !important;
  border-radius: var(--nc-r-sm) !important;
  background-color: var(--nc-surface-2) !important;
  border: 1.5px solid var(--nc-border) !important;
  cursor: pointer !important;
  transition: background var(--nc-t), border-color var(--nc-t), transform var(--nc-t) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 26px 26px !important;
  vertical-align: middle !important;
}

#square-btn:hover, #r-square-btn:hover, #circle-btn:hover, #triangle-btn:hover,
#heart-btn:hover, .polygon-btn:hover, .star-btn:hover {
  background-color: var(--nc-surface) !important;
  border-color: var(--nc-blue) !important;
  transform: scale(1.08) !important;
}

#square-btn:active, #r-square-btn:active, #circle-btn:active,
#triangle-btn:active, #heart-btn:active, .polygon-btn:active, .star-btn:active {
  transform: scale(0.94) !important;
}

/* Square */
#square-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='0' fill='%231A56DB'/%3E%3C/svg%3E") !important;
}

/* Rounded square */
#r-square-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='4' fill='%231A56DB'/%3E%3C/svg%3E") !important;
}

/* Circle */
#circle-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%231A56DB'/%3E%3C/svg%3E") !important;
}

/* Triangle */
#triangle-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,3 22,21 2,21' fill='%231A56DB'/%3E%3C/svg%3E") !important;
}

/* Heart */
#heart-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' fill='%23E02424'/%3E%3C/svg%3E") !important;
}

/* Pentagon (5) */
#polygon5 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 22,9 18,21 6,21 2,9' fill='%231A56DB'/%3E%3C/svg%3E") !important;
}

/* Hexagon (6) */
#polygon6 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 21,7 21,17 12,22 3,17 3,7' fill='%231A56DB'/%3E%3C/svg%3E") !important;
}

/* 7-sided */
#polygon7 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 19.5,6 22,14 17,21 7,21 2,14 4.5,6' fill='%231A56DB'/%3E%3C/svg%3E") !important;
}

/* Octagon (8) */
#polygon8 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='8,2 16,2 22,8 22,16 16,22 8,22 2,16 2,8' fill='%231A56DB'/%3E%3C/svg%3E") !important;
}

/* 9-sided */
#polygon9 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231A56DB'/%3E%3Ctext x='12' y='16' text-anchor='middle' fill='white' font-size='8' font-family='sans-serif'%3E9%3C/text%3E%3C/svg%3E") !important;
}

/* 10-sided */
#polygon10 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231A56DB'/%3E%3Ctext x='12' y='16' text-anchor='middle' fill='white' font-size='7' font-family='sans-serif'%3E10%3C/text%3E%3C/svg%3E") !important;
}

/* Stars */
#star5, #star6, #star7, #star8, #star9, #star10 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 15.1,8.3 22,9.3 17,14.1 18.2,21 12,17.8 5.8,21 7,14.1 2,9.3 8.9,8.3' fill='%23FF9500'/%3E%3C/svg%3E") !important;
}

/* Star label indicator */
#star6::after { content: '6'; font-size: 8px; color: #666; position: absolute; bottom: 1px; right: 3px; }
#star7::after { content: '7'; font-size: 8px; color: #666; position: absolute; bottom: 1px; right: 3px; }

/* Shape container layout */
.img-container.shapes {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  padding: 6px 0 !important;
}

/* ══ CART PREVIEW PLACEMENT LABEL ════════════════════════════════ */
.wpd-cart-placement-label {
  display: block !important;
  font-size: 11px !important;
  color: var(--nc-text-2) !important;
  margin-bottom: 6px !important;
  font-family: var(--nc-font) !important;
}

/* Lightbox footer placements */
.wpd-design-lightbox-footer {
  padding: 8px 18px 14px !important;
  border-top: 1px solid var(--nc-border) !important;
}
.wpd-design-lightbox-placements {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--nc-text-2) !important;
  font-family: var(--nc-font) !important;
}

/* ══ HOVER TEXT — white on dark/colored backgrounds ═════════════ */




/* Fancy select options: blue hover → white */
.fancySelect .options li:hover {
  background: var(--nc-blue) !important;
  color: #FFFFFF !important;
}

/* Template cards: blue border hover but white bg → keep dark text */
/* (handled per-element below) */

/* Clipart hover → stays on light bg, no text to change */

/* Part tabs (front/back): active blue → white text */
#wpc-parts-bar li.active,
#wpc-parts-bar li[class*="active"] {
  color: #FFFFFF !important;
}
#wpc-parts-bar li.active span,
#wpc-parts-bar li[class*="active"] span {
  color: #FFFFFF !important;
}

/* Right panel tabs */
.noid-right-tab.active { color: var(--nc-blue) !important; } /* stays blue on white */

/* Lightbox part tabs: active → white */
.wpd-lightbox-part-tab.active { color: #FFFFFF !important; }
.wpd-lightbox-part-tab:hover:not(.active) {
  background: rgba(0,0,0,.10) !important;
  color: var(--nc-label) !important;
}

/* Header buttons: primary (blue) → white */
.noid-header-btn--primary,
.noid-header-btn--primary span { color: #FFFFFF !important; }
.noid-header-btn--atc,
.noid-header-btn--atc span { color: #FFFFFF !important; }

/* Add to cart (green) → white text always */
.wpc-add-to-cart-btn,
.wpc-add-to-cart-btn *,
#add-to-cart-btn,
#add-to-cart-btn * { color: #FFFFFF !important; }

/* Shape buttons hover: light grey bg → keep dark icons */
#square-btn:hover, #r-square-btn:hover, #circle-btn:hover,
#triangle-btn:hover, #heart-btn:hover, .polygon-btn:hover, .star-btn:hover {
  /* light bg — icon colors stay as-is */
}

/* Nav back link hover stays blue (light bg) */
.noid-designer-header__back:hover { color: var(--nc-blue) !important; }

/* Cart edit button hover: light blue bg → blue text (stays) */
.wpd-cart-edit-btn:hover { color: var(--nc-blue) !important; }

/* Pagination hover: light bg → blue stays */
.wpd-pagination ul.page-numbers li .page-numbers:hover {
  color: var(--nc-blue) !important;
}

/* ══ NOID UX NOTICE (quantity / empty design) ═══════════════════ */
#noid-ux-notice {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1A1A1A;
  color: #FFFFFF;
  font-family: var(--nc-font);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px 10px 14px;
  border-radius: var(--nc-r-pill);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  pointer-events: none;
  opacity: 0;
  z-index: 99996;
  white-space: nowrap;
  transition: opacity 200ms ease, transform 200ms ease;
  max-width: calc(100vw - 48px);
}
#noid-ux-notice.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#noid-ux-notice[data-type="quantity"] { background: #1A56DB; }
#noid-ux-notice[data-type="error"]    { background: #E02424; }
#noid-ux-notice[data-type="success"]  { background: #16A34A; }
.noid-notice-icon { display: flex; align-items: center; flex-shrink: 0; }
.noid-notice-msg  { flex: 1; }
.noid-notice-close {
  background: rgba(255,255,255,.20);
  border: none;
  color: #FFF;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 140ms;
}
.noid-notice-close:hover { background: rgba(255,255,255,.35); }

/* ══ EMPTY CANVAS PROMPT ═════════════════════════════════════════ */
#noid-canvas-prompt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  z-index: 5;
  text-align: center;
  padding: 20px;
  background: transparent;
}
.noid-canvas-prompt-icon {
  color: rgba(26,86,219,.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.noid-canvas-prompt-title {
  font-family: var(--nc-font);
  font-size: 18px;
  font-weight: 700;
  color: rgba(0,0,0,.18);
  margin: 0;
  letter-spacing: -.02em;
}
.noid-canvas-prompt-sub {
  font-family: var(--nc-font);
  font-size: 13px;
  color: rgba(0,0,0,.14);
  margin: 0;
  max-width: 240px;
}


/* ══ TOOLBAR — matching left panel Apple UI ════════════════════ */


/* Every toolbar span = a visible icon button */





/* Separator */


/* ── SVG ICONS for each toolbar button ──────────────────────── */
/* Each button gets an ::after pseudo with an inline SVG icon   */
/* Same style as the left sidebar icons                         */




/* Grid */
#grid-btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E") !important;
}

/* Clear all */
#clear_all_btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E02424' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M9 6V4h6v2'/%3E%3C/svg%3E") !important;
}

/* Delete */
#delete_btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E02424' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E") !important;
}

/* Duplicate / Copy-paste */
#copy_paste_btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1'/%3E%3C/svg%3E") !important;
}

/* Send to back */
#send_to_back_btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2' y='8' width='12' height='12' rx='1' fill='%23dbeafe'/%3E%3Crect x='10' y='4' width='12' height='12' rx='1'/%3E%3C/svg%3E") !important;
}

/* Bring to front */
#bring_to_front_btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2' y='8' width='12' height='12' rx='1'/%3E%3Crect x='10' y='4' width='12' height='12' rx='1' fill='%23dbeafe'/%3E%3C/svg%3E") !important;
}

/* Flip horizontal */
#flip_h_btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M4 7l4 5-4 5'/%3E%3Cpath d='M20 7l-4 5 4 5'/%3E%3C/svg%3E") !important;
}

/* Flip vertical */
#flip_v_btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M7 4l5 4 5-4'/%3E%3Cpath d='M7 20l5-4 5 4'/%3E%3C/svg%3E") !important;
}

/* Center horizontally */
#align_h_btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Crect x='4' y='7' width='6' height='10' rx='1'/%3E%3Crect x='14' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E") !important;
}

/* Center vertically */
#align_v_btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Crect x='7' y='4' width='10' height='6' rx='1'/%3E%3Crect x='9' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E") !important;
}

/* Undo */
#undo-btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7v6h6'/%3E%3Cpath d='M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13'/%3E%3C/svg%3E") !important;
}

/* Redo */
#redo-btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 7v6h-6'/%3E%3Cpath d='M3 17a9 9 0 019-9 9 9 0 016 2.3L21 13'/%3E%3C/svg%3E") !important;
}

/* Tooltip on hover using data-tooltip-title attribute */


/* The label spans full width, forcing inputs onto their own row */
.wpc-qty-container label {
  flex: 0 0 100% !important;
  order: 0 !important;
}
/* Total price also full width */
.wpc-qty-container .total-price {
  flex: 0 0 100% !important;
  order: 9 !important;
  margin-top: 4px !important;
}

/* noid-qty-row: the wrapped flex row containing number + minus + plus */
.noid-qty-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.noid-qty-row input[type="number"],
.noid-qty-row .wpd-qty,
.noid-qty-row .wpc-custom-right-quantity-input {
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  width: 52px !important; height: 38px !important;
  text-align: center !important; font-size: 16px !important;
  font-weight: 600 !important; background: var(--nc-surface-2) !important;
  border: 1.5px solid #E5E7EB !important; border-radius: 8px !important;
  padding: 0 !important; box-shadow: none !important;
  color: var(--nc-text) !important; font-family: var(--nc-font) !important;
}
.noid-qty-row input[type="number"]::-webkit-inner-spin-button,
.noid-qty-row input[type="number"]::-webkit-outer-spin-button { display:none !important; }
.noid-qty-row .minus, .noid-qty-row .plus,
.noid-qty-row input.minus, .noid-qty-row input.plus {
  width: 38px !important; height: 38px !important; border-radius: 8px !important;
  border: none !important; background: #F3F4F6 !important; color: #374151 !important;
  font-size: 22px !important; font-weight: 300 !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; transition: background 140ms, color 140ms !important;
  box-shadow: none !important; padding: 0 !important; line-height: 1 !important;
}
.noid-qty-row .minus:hover, .noid-qty-row .plus:hover,
.noid-qty-row input.minus:hover, .noid-qty-row input.plus:hover {
  background: #1A56DB !important; color: #FFFFFF !important;
}

/* ══ DESIGN FROM SCRATCH BUTTON ═════════════════════════════════
   Change color: update --wpc-scratch-bg and --wpc-scratch-text
   Change text:  WPD → Settings → User Interface → Button Labels
   ═══════════════════════════════════════════════════════════════ */
:root {
  --wpc-scratch-bg:   #1A56DB;   /* ← change button background color here */
  --wpc-scratch-text: #FFFFFF;   /* ← change button text color here */
}

a.btn-choose.wpc-customize-product,
a.btn-choose.wpc-customize-product:link,
a.btn-choose.wpc-customize-product:visited,
.btn-choose.wpc-customize-product {
  background: #1A56DB !important;
  color: #FFFFFF !important;
  border-color: #1A56DB !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--nc-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  border-radius: var(--nc-r-pill) !important;
  text-decoration: none !important;
  transition: background 180ms, box-shadow 180ms !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
  letter-spacing: -.01em !important;
}

a.btn-choose.wpc-customize-product:hover,
.btn-choose.wpc-customize-product:hover {
  background: #16A34A !important;
  border-color: #16A34A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(22,163,74,.30) !important;
  text-decoration: none !important;
}



/* ══ DIRECT PREVIEW OVERLAY ═══════════════════════════════════ */
#noid-direct-preview {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,.65); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: ndp-in 180ms ease;
}
@keyframes ndp-in { from { opacity:0 } to { opacity:1 } }
.ndp-box {
  background: rgba(255,255,255,.97); border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden; max-width: 680px; width: 100%;
  animation: ndp-up 180ms ease;
}
@keyframes ndp-up { from { transform:translateY(20px) scale(.97);opacity:0 } to { transform:none;opacity:1 } }
.ndp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #E5E7EB;
}
.ndp-title { font-size: 17px; font-weight: 700; color: #111827; font-family: var(--nc-font); }
.ndp-x {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.07); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center; color: #6B7280;
}
.ndp-x:hover { background: rgba(0,0,0,.13); }
.ndp-tabs { display: flex; gap: 4px; padding: 8px 14px; border-bottom: 1px solid #E5E7EB; }
.ndp-tab {
  padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(0,0,0,.06); color: #6B7280; border: none; cursor: pointer;
  transition: background 130ms, color 130ms; font-family: var(--nc-font);
}
.ndp-tab.on { background: #1A56DB; color: #fff; }
.ndp-body {
  padding: 24px; background: #F5F5F7; min-height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.ndp-img {
  max-width: 100%; max-height: 500px; object-fit: contain;
  border-radius: 12px; background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,.10);
}
.ndp-spin {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid #E5E7EB; border-top-color: #1A56DB;
  animation: ndp-spin 700ms linear infinite;
}
@keyframes ndp-spin { to { transform: rotate(360deg); } }

/* ══ QTY POPUP (Next button) ════════════════════════════════════ */
#noid-qty-popup {
  position: fixed; inset: 0; z-index: 99997;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
#noid-qty-popup.is-open { pointer-events: auto; }
.nqp-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 220ms ease;
}
#noid-qty-popup.is-open .nqp-overlay { opacity: 1; }

.nqp-sheet {
  position: relative; z-index: 1;
  background: var(--nc-white); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); transition: transform 220ms cubic-bezier(.32,0,.67,0);
  box-shadow: 0 -8px 40px rgba(0,0,0,.15);
  max-height: 85vh; display: flex; flex-direction: column;
}
#noid-qty-popup.is-open .nqp-sheet {
  transform: translateY(0); transition-timing-function: cubic-bezier(.33,1,.68,1);
}

.nqp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--nc-border); flex-shrink: 0;
}
.nqp-title { font-size: 17px; font-weight: 700; color: var(--nc-text); font-family: var(--nc-font); }
.nqp-close {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 28px; border-radius: 999px;
  background: #9CA3AF; border: none;
  color: #FFFFFF; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; font-family: var(--nc-font);
  transition: background 140ms;
  min-width: 120px;
}
.nqp-close:hover { background: #E02424; color: #FFFFFF; }

.nqp-body {
  overflow-y: auto; padding: 8px 0; flex: 1;
}
.nqp-empty { padding: 20px; text-align: center; color: var(--nc-text-2); font-size: 14px; }

.nqp-footer {
  padding: 12px 16px 20px; border-top: 1px solid var(--nc-border);
  flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center;
}

/* ATC button inside popup — full width */
.nqp-atc-btn {
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  font-size: 15px !important;
  border-radius: var(--nc-r-pill) !important;
  background: #16A34A !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-family: var(--nc-font) !important;
}
.nqp-atc-btn:hover { background: #15803D !important; }

/* ══ GRID OVERLAY — toggled by #grid-btn ════════════════════════
   .wpc-canvas-grid is added to .upper-canvas when grid is on.
   CSS background-image draws the grid lines without touching canvas objects.
   ═══════════════════════════════════════════════════════════════ */
.upper-canvas.wpc-canvas-grid {
  background-image:
    linear-gradient(to right,  rgba(26,86,219,.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,86,219,.15) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  background-position: 0 0 !important;
}
/* Active state indicator on the button */
#grid-btn.grid-active {
  background: rgba(26,86,219,.12) !important;
}
#grid-btn.grid-active .noid-tb-icon {
  color: #1A56DB !important;
}

/* ══ LOADING VEIL — hides raw HTML flash before JS runs ═════════ */
#wpc-editor-container-box {
  opacity: 0;
  transition: opacity 300ms ease;
}
#wpc-editor-container-box.noid-ready {
  opacity: 1;
}


/* ── Pre-JS fallback: qty inputs appear in a row before wrap_qty_rows fires ── */
/* pre-js-row-fallback */
.wpc-qty-container > input.minus,
.wpc-qty-container > input[type="number"],
.wpc-qty-container > input.plus {
  display: inline-flex !important;
  vertical-align: middle !important;
  margin: 0 2px !important;
}

.noid-loop-customize-btn:hover{background:#16A34A!important;border-color:#16A34A!important;color:#fff!important;}