/* ============================================================
   CustomGoods Advanced Sign Designer — Frontend Styles
   ============================================================ */

/* ── Reset / Base ──────────────────────────────────────────── */
.cgas-wrap *,
.cgas-wrap *::before,
.cgas-wrap *::after {
  box-sizing: border-box;
}

.cgas-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #222;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 24px 48px;
}

/* ── Header ────────────────────────────────────────────────── */
.cgas-header {
  text-align: center;
  padding: 32px 0 20px;
}
.cgas-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1a1a2e;
}
.cgas-subtitle {
  color: #666;
  margin: 0;
}

/* ── Templates Bar ─────────────────────────────────────────── */
.cgas-templates-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  background: #f0f4ff;
  border-radius: 8px;
  margin-bottom: 20px;
}
.cgas-templates-label {
  font-weight: 600;
  color: #444;
  margin-right: 4px;
}
.cgas-tpl-btn {
  background: #fff;
  border: 1px solid #c0c8e0;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.cgas-tpl-btn:hover {
  background: linear-gradient(180deg, #efeae4 0%, #e8e0d9 100%);
  color: #fff;
  border-color: #1a1a2e;
}

/* ── Main Layout ───────────────────────────────────────────── */
.cgas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .cgas-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Preview Panel ─────────────────────────────────────────── */
.cgas-preview-panel {
  position: sticky;
  top: 80px;
}
.cgas-preview-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.cgas-mode-btn {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.cgas-mode-btn.active {
  background: #1a1a2e;
  color: #fff;
  border-color: #1a1a2e;
}
.cgas-size-label {
  margin-left: auto;
  font-size: 13px;
  color: #666;
}

/* ── Preview Stage ─────────────────────────────────────────── */
.cgas-preview-stage {
  position: relative;
  width: 100%;
  min-height: 72vh;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a2e;
  transition: background 0.4s;
}
.cgas-preview-stage.daytime {
  background: linear-gradient(180deg, #f5f5f5 0%, #ececec 100%);
}
.cgas-scene-bg {
  position: absolute;
  inset: 0;
  background-size: 85% auto;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease, background-image 0.25s ease;
}
.cgas-backboard {
  position: relative;
  z-index: 1;
  padding: 30px 50px;
  border-radius: 12px;
  background: rgba(0,0,0,0.6);
  transition: background 0.3s, border-radius 0.3s, width 0.2s ease, min-height 0.2s ease, padding 0.2s ease;
  max-width: 94%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(1px);
  box-sizing: border-box;
}
.cgas-backboard.shape-none {
  background: transparent;
}
.cgas-backboard.shape-cut_to_letter {
  padding: 10px 14px;
  background: rgba(200,230,255,0.18);
  border-radius: 22px;
}
.cgas-backboard.shape-cut_to_shape {
  border-radius: 50px;
}
.cgas-sign-text {
  text-align: center;
  display: inline-block;
}
.cgas-text-layer {
  display: block;
  font-family: 'Pacifico', cursive;
  font-size: clamp(28px, 5vw, 72px);
  color: #fff8fb;
  -webkit-text-stroke: 0.75px #ff7bdc;
  paint-order: stroke fill;
  text-shadow: 0 0 1.5px rgba(255,255,255,.96), 0 0 4px rgba(255,123,220,.36), 0 0 8px rgba(255,123,220,.20), 0 0 13px rgba(255,123,220,.08);
  line-height: 1.2;
  transition: all 0.2s;
  white-space: pre-wrap;
  word-break: break-word;
}
.cgas-preview-stage.daytime .cgas-text-layer {
  text-shadow: none;
  color: #333;
}

/* ── Preview Actions ───────────────────────────────────────── */
.cgas-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
#cgas-share-result {
  margin-top: 10px;
  padding: 10px;
  background: #f0f4ff;
  border-radius: 6px;
}

/* ── Options Panel ─────────────────────────────────────────── */
.cgas-options-panel {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}

/* ── Sections ──────────────────────────────────────────────── */
.cgas-section {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.cgas-section:last-child {
  border-bottom: none;
}
.cgas-section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1a1a2e;
  margin: 0 0 14px;
}

/* ── Fields ────────────────────────────────────────────────── */
.cgas-field {
  margin-bottom: 12px;
}
.cgas-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 5px;
}
.cgas-input,
.cgas-select,
.cgas-field input[type="text"],
.cgas-field input[type="email"],
.cgas-field input[type="tel"],
.cgas-field input[type="number"],
.cgas-field select,
.cgas-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
  background: #fff;
}
.cgas-input:focus,
.cgas-select:focus,
.cgas-field input:focus,
.cgas-field select:focus,
.cgas-field textarea:focus {
  border-color: #1a1a2e;
  outline: none;
}
.cgas-text-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}
.cgas-text-input:focus {
  border-color: #1a1a2e;
  outline: none;
}
.cgas-mt {
  margin-top: 12px;
}
.cgas-desc {
  font-size: 12px;
  color: #777;
  margin: 0 0 10px;
  line-height: 1.5;
}

/* ── Font Grid ─────────────────────────────────────────────── */
.cgas-font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.cgas-font-swatch {
  padding: 10px 8px;
  border: 2px solid #eee;
  border-radius: 6px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: #fafafa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cgas-font-swatch:hover {
  border-color: #1a1a2e;
  background: #f0f4ff;
}
.cgas-font-swatch.active {
  border-color: #1a1a2e;
  background: #e8eeff;
}

/* ── Color Grid ────────────────────────────────────────────── */
.cgas-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cgas-color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform 0.2s, border-color 0.2s;
}
.cgas-color-swatch:hover {
  transform: scale(1.15);
}
.cgas-color-swatch.active {
  border-color: #1a1a2e;
  transform: scale(1.15);
}

/* ── Option Grid (backboard / mounting) ────────────────────── */
.cgas-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.cgas-option-card {
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: #fafafa;
}
.cgas-option-card:hover {
  border-color: #1a1a2e;
  background: #f0f4ff;
}
.cgas-option-card.active {
  border-color: #1a1a2e;
  background: #e8eeff;
}
.cgas-option-card-title {
  font-size: 12px;
  font-weight: 600;
  color: #333;
}
.cgas-option-card-price {
  font-size: 11px;
  color: #0073aa;
  margin-top: 3px;
}

/* ── Size Grid ─────────────────────────────────────────────── */
.cgas-size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.cgas-size-card {
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
  background: #fafafa;
}
.cgas-size-card:hover {
  border-color: #1a1a2e;
  background: #f0f4ff;
}
.cgas-size-card.active {
  border-color: #1a1a2e;
  background: #e8eeff;
}
.cgas-size-price {
  display: block;
  font-size: 12px;
  color: #0073aa;
  margin-top: 3px;
}

/* ── Add-ons ───────────────────────────────────────────────── */
.cgas-addons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cgas-addon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.cgas-addon input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── Price Summary ─────────────────────────────────────────── */
.cgas-price-summary {
  background: #f8f9ff;
  border-radius: 8px;
  padding: 16px;
  margin: 0 20px;
}
.cgas-price-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
}
.cgas-price-total {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  border-top: 1px solid #ddd;
  padding-top: 8px;
  margin-top: 8px;
}

/* ── Actions ───────────────────────────────────────────────── */
.cgas-actions {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cgas-btn-primary {
  display: block;
  width: 100%;
  padding: 14px;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
  text-decoration: none;
}
.cgas-btn-primary:hover {
  background: #2d2d5e;
}
.cgas-btn-secondary {
  display: inline-block;
  padding: 10px 18px;
  background: #fff;
  color: #1a1a2e;
  border: 2px solid #1a1a2e;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-align: center;
  text-decoration: none;
}
.cgas-btn-secondary:hover {
  background: #1a1a2e;
  color: #fff;
}

/* ── Quote Form ────────────────────────────────────────────── */
#cgas-quote-form-wrap {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
}
#cgas-quote-form-wrap h3 {
  margin: 0 0 16px;
  font-size: 16px;
}

/* ── Messages ──────────────────────────────────────────────── */
#cgas-messages {
  padding: 0 20px 10px;
}
.cgas-msg-success {
  background: #d4edda;
  color: #155724;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
}
.cgas-msg-error {
  background: #f8d7da;
  color: #721c24;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
}

/* ── Configure Button (product page) ──────────────────────── */
.cgas-configure-btn {
  display: inline-block;
  margin-bottom: 12px;
  padding: 12px 24px;
  background: #1a1a2e;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.cgas-configure-btn:hover {
  background: #2d2d5e;
}

/* ── UV Upload ─────────────────────────────────────────────── */
.cgas-uv-section {
  background: #fffbf0;
  border-left: 3px solid #f0a500;
}

/* ── Upload Preview ────────────────────────────────────────── */
#cgas-upload-preview {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#cgas-upload-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* ── Admin Order Panel ─────────────────────────────────────── */
.cgas-order-config-panel {
  margin-top: 20px;
  padding: 16px;
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}


/* ── Scene Presets ─────────────────────────────────────────── */
.cgas-scene-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cgas-scene-preset {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  border: 1px solid #d9deec;
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  cursor: pointer;
  transition: all .2s ease;
}
.cgas-scene-preset img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}
.cgas-scene-preset span {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-align: center;
}
.cgas-scene-preset.active {
  border-color: #1a1a2e;
  box-shadow: 0 0 0 2px rgba(26,26,46,0.08);
}
@media (max-width: 900px) {
  .cgas-wrap {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 0 12px 32px;
  }
  .cgas-preview-panel {
    position: static;
  }
  .cgas-preview-stage {
    min-height: 360px;
  }
  .cgas-scene-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* v1.1.1: reduce preview background/scene image scale by 15% */
.cgas-preview-stage .cgas-scene-bg {
  background-size: 85% auto !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* v1.1.4: Backboard option descriptions */
.cgas-option-card-desc {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: #666;
  font-weight: 400;
}
.cgas-option-card.active .cgas-option-card-desc {
  color: #374151;
}
#cgas-backboard-grid .cgas-option-card {
  min-height: 86px;
  align-items: flex-start;
  justify-content: flex-start;
}


/* v1.1.8: customer wall dimensions resize the whole designer background canvas */
.cgas-preview-stage.cgas-has-wall-size {
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  max-height: 82vh;
}
.cgas-preview-stage.cgas-has-wall-size .cgas-scene-bg {
  background-size: cover !important;
  background-position: center center !important;
}
.cgas-wall-size-label {
  display: none;
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 4;
  font-size: 12px;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(26,26,46,0.82);
  color: #fff;
  pointer-events: none;
}
.cgas-install-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cgas-field-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}
.cgas-field-group input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
}
@media (max-width: 700px) {
  .cgas-install-fields {
    grid-template-columns: 1fr;
  }
}


/* v1.1.9: safer wall-size preview behavior */
.cgas-preview-stage.cgas-has-wall-size {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cgas-preview-stage.cgas-has-wall-size .cgas-backboard {
  transform-origin: center center !important;
  will-change: transform;
}
.cgas-wall-size-label {
  max-width: calc(100% - 28px);
  white-space: nowrap;
}


/* v1.2.0: optional buyer-controlled wall size fields */
.cgas-wall-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: #1a1a2e;
  margin: 10px 0 12px;
}
.cgas-wall-toggle input {
  margin-top: 2px;
}
#cgas-install-fields {
  margin-top: 12px;
}


/* v1.2.1: selected sign size visibly changes the design preview */
.cgas-backboard {
  transition: background 0.3s, border-radius 0.3s, width 0.2s ease, min-height 0.2s ease, padding 0.2s ease, transform 0.22s ease !important;
  transform-origin: center center;
}
.cgas-preview-stage {
  padding: 48px;
}
@media (max-width: 700px) {
  .cgas-preview-stage {
    padding: 24px;
  }
}


/* v1.2.2: auto-fit text width/font based on selected sign size */
.cgas-sign-text {
  margin-left: auto;
  margin-right: auto;
}
.cgas-text-layer {
  white-space: nowrap;
  word-break: normal !important;
  overflow-wrap: normal !important;
  max-width: 100%;
}
.cgas-preview-stage {
  padding: 56px;
}
@media (max-width: 700px) {
  .cgas-preview-stage {
    padding: 28px;
  }
}


/* v1.3.0: UV printed logo/graphic neon workflow */
.cgas-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cgas-design-type-card {
  border: 1px solid #d8ddec;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: all .18s ease;
}
.cgas-design-type-card strong {
  display: block;
  color: #1a1a2e;
  font-size: 14px;
  margin-bottom: 5px;
}
.cgas-design-type-card span {
  display: block;
  color: #666;
  font-size: 12px;
  line-height: 1.35;
}
.cgas-design-type-card.active {
  border-color: #1a1a2e;
  background: #eef2ff;
  box-shadow: 0 0 0 2px rgba(26,26,46,.08);
}
.cgas-proof-notice {
  border-left: 4px solid #1a1a2e;
  background: #f7f7fb;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cgas-proof-notice p {
  margin: 6px 0 0;
  color: #555;
  font-size: 13px;
  line-height: 1.45;
}
@media (max-width: 700px) {
  .cgas-mode-grid {
    grid-template-columns: 1fr;
  }
}


/* v1.3.2: size selection changes design view with measurement overlay */
.cgas-size-max {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.25;
  color: #777;
}
.cgas-size-card.active .cgas-size-max {
  color: #374151;
}
.cgas-measure {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  color: #fff;
  font-size: 13px;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.cgas-measure-width {
  height: 18px;
  border-top: 2px solid rgba(255,255,255,.92);
  text-align: center;
}
.cgas-measure-width:before,
.cgas-measure-width:after {
  content: "";
  position: absolute;
  top: -5px;
  width: 2px;
  height: 10px;
  background: rgba(255,255,255,.92);
}
.cgas-measure-width:before { left: 0; }
.cgas-measure-width:after { right: 0; }
.cgas-measure-width span {
  position: relative;
  top: 6px;
  background: rgba(0,0,0,.28);
  padding: 2px 7px;
  border-radius: 999px;
}
.cgas-measure-height {
  width: 18px;
  border-left: 2px solid rgba(255,255,255,.92);
}
.cgas-measure-height:before,
.cgas-measure-height:after {
  content: "";
  position: absolute;
  left: -5px;
  width: 10px;
  height: 2px;
  background: rgba(255,255,255,.92);
}
.cgas-measure-height:before { top: 0; }
.cgas-measure-height:after { bottom: 0; }
.cgas-measure-height span {
  position: absolute;
  left: -46px;
  top: 35%;
  width: 42px;
  text-align: right;
  background: rgba(0,0,0,.28);
  padding: 2px 5px;
  border-radius: 999px;
}
.cgas-max-letters-note {
  display: inline-block;
  margin-left: 10px;
  color: #666;
  font-size: 12px;
}
.cgas-warning-note {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff2f2;
  color: #c01818;
  font-size: 13px;
  font-weight: 600;
}


/* v1.3.3: stronger design-board dimension overlay */
.cgas-measure {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 5px rgba(0,0,0,.75);
}
.cgas-measure-width {
  height: 20px;
  border-top: 2px solid rgba(255,255,255,.96);
  text-align: center;
}
.cgas-measure-width:before,
.cgas-measure-width:after {
  content: "";
  position: absolute;
  top: -6px;
  width: 2px;
  height: 12px;
  background: rgba(255,255,255,.96);
}
.cgas-measure-width:before { left: 0; }
.cgas-measure-width:after { right: 0; }
.cgas-measure-width span {
  position: relative;
  top: 7px;
  background: rgba(0,0,0,.34);
  padding: 3px 8px;
  border-radius: 999px;
}
.cgas-measure-height {
  width: 20px;
  border-left: 2px solid rgba(255,255,255,.96);
}
.cgas-measure-height:before,
.cgas-measure-height:after {
  content: "";
  position: absolute;
  left: -6px;
  width: 12px;
  height: 2px;
  background: rgba(255,255,255,.96);
}
.cgas-measure-height:before { top: 0; }
.cgas-measure-height:after { bottom: 0; }
.cgas-measure-height span {
  position: absolute;
  left: -56px;
  top: 36%;
  min-width: 48px;
  text-align: right;
  background: rgba(0,0,0,.34);
  padding: 3px 6px;
  border-radius: 999px;
}
.cgas-measure-size-badge {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  color: #fff;
  background: rgba(26,26,46,.78);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  display: none;
}


/* v1.3.4: measurement dimensions are based on rendered text/font ratio */
.cgas-measure-size-badge {
  max-width: calc(100% - 28px);
  white-space: nowrap;
}
.cgas-measure-height span {
  min-width: 52px;
}


/* v1.3.5: preview redraw feedback when selected size changes */
.cgas-preview-stage.cgas-size-changing .cgas-backboard,
.cgas-preview-stage.cgas-size-changing .cgas-sign-text,
.cgas-preview-stage.cgas-size-changing .cgas-measure {
  transition: all .22s ease !important;
}


/* v1.3.7: stronger neon tube brightness and glow */
.cgas-text-layer {
  font-weight: 700;
  opacity: 1 !important;
  filter: brightness(1.45) saturate(1.35);
  -webkit-text-stroke: 0.35px rgba(255,255,255,0.45);
}
.cgas-preview-stage:not(.daytime) .cgas-text-layer {
  filter: brightness(1.7) saturate(1.55) drop-shadow(0 0 3px currentColor) drop-shadow(0 0 7px currentColor);
}
.cgas-preview-stage.daytime .cgas-text-layer {
  filter: brightness(1.28) saturate(1.25) drop-shadow(0 0 2px currentColor);
}

/* Prevent selected scene/wall images from washing out the LED effect too much */
.cgas-preview-stage .cgas-scene-bg {
  opacity: 0.48 !important;
}
.cgas-preview-stage.daytime .cgas-scene-bg {
  opacity: 0.36 !important;
}

/* Acrylic backing should not cover the LED too strongly */
.cgas-backboard {
  background-color: rgba(200,230,255,0.10);
}
.cgas-backboard.shape-cut_to_shape,
.cgas-backboard.shape-cut_to_letter,
.cgas-backboard.shape-custom_shape {
  backdrop-filter: blur(0.5px);
}


/* v1.3.8: reduce neon bloom and keep letters readable */
.cgas-text-layer {
  font-weight: 700;
  opacity: 1 !important;
  filter: brightness(1.16) saturate(1.08) !important;
  -webkit-text-stroke: 0.18px rgba(255,255,255,0.28) !important;
}
.cgas-preview-stage:not(.daytime) .cgas-text-layer {
  filter: brightness(1.22) saturate(1.12) drop-shadow(0 0 2px currentColor) drop-shadow(0 0 6px currentColor) !important;
}
.cgas-preview-stage.daytime .cgas-text-layer {
  filter: brightness(1.12) saturate(1.08) drop-shadow(0 0 2px currentColor) !important;
}

/* Text size adjustment slider */
.cgas-font-scale-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#cgas-font-scale {
  flex: 1;
  width: 100%;
}
#cgas-font-scale-value {
  min-width: 52px;
  text-align: right;
  font-weight: 700;
  color: #1a1a2e;
}


/* v1.3.9: keep brightness, sharply reduce bloom/spread */
.cgas-text-layer {
  font-weight: 800 !important;
  opacity: 1 !important;
  filter: brightness(1.55) saturate(1.35) !important;
  -webkit-text-stroke: 0.25px rgba(255,255,255,0.55) !important;
}
.cgas-preview-stage:not(.daytime) .cgas-text-layer {
  filter: var(--cgas-text-filter-night, brightness(1.65) saturate(1.45) drop-shadow(0 0 2px currentColor)) !important;
}
.cgas-preview-stage.daytime .cgas-text-layer {
  filter: var(--cgas-text-filter-day, brightness(1.35) saturate(1.25) drop-shadow(0 0 1px currentColor)) !important;
}


/* v1.5.0: draggable sign placement + multi-color text */
.cgas-preview-stage {
  position: relative;
  overflow: hidden;
}
.cgas-backboard {
  position: absolute !important;
  left: 50%;
  top: 50%;
  cursor: move;
  user-select: none;
  touch-action: none;
  z-index: 3;
}
.cgas-preview-stage.cgas-dragging {
  cursor: grabbing;
}
.cgas-drag-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(26,26,46,.72);
  color: #fff;
  font-size: 12px;
  pointer-events: none;
}
.cgas-color-part {
  display: inline-block;
  margin: 0 .08em;
}
.cgas-multicolor-fields {
  border: 1px solid #e4e7f0;
  border-radius: 12px;
  padding: 12px;
  background: #fbfcff;
}
.cgas-color-part-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}
@media (max-width: 700px) {
  .cgas-color-part-row {
    grid-template-columns: 1fr;
  }
  .cgas-drag-hint {
    left: 14px;
    right: auto;
    bottom: 12px;
  }
}


/* v1.5.1: bigger text scaling + reliable drag positioning */
.cgas-preview-stage {
  position: relative !important;
  overflow: hidden !important;
  touch-action: none;
}
.cgas-backboard {
  position: absolute !important;
  left: 50%;
  top: 50%;
  cursor: grab !important;
  user-select: none;
  touch-action: none;
  overflow: visible !important;
  z-index: 3;
}
.cgas-sign-text,
.cgas-text-layer,
.cgas-color-part {
  overflow: visible !important;
  pointer-events: auto;
}
.cgas-preview-stage.cgas-dragging,
.cgas-preview-stage.cgas-dragging .cgas-backboard {
  cursor: grabbing !important;
}
#cgas-font-scale {
  accent-color: #1a1a2e;
}


/* v1.5.2: font-width normalization so different fonts keep similar overall sign length */
.cgas-sign-text {
  max-width: none !important;
}
.cgas-text-layer {
  transform-origin: center center;
}


/* v1.5.3: keep selected sign width consistent while normalizing font visual width */
.cgas-sign-text {
  max-width: none !important;
  overflow: visible !important;
}
.cgas-text-layer {
  transform-origin: center center !important;
  overflow: visible !important;
}
.cgas-color-part {
  transform-origin: center center !important;
}


/* Glow strength slider */
.cgas-glow-strength-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cgas-glow-strength-row input[type=range] {
  flex: 1;
  width: 100%;
}
.cgas-glow-strength-label {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}
#cgas-glow-strength-value {
  min-width: 68px;
  text-align: right;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
}


/* v1.6.3: collapsed font picker like CustomNeon-style dropdown */
.cgas-font-picker-toggle {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  border: 1px solid #d9dde7;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}
.cgas-selected-font-label {
  font-size: 28px;
  line-height: 1;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cgas-font-picker-arrow {
  font-family: Arial, sans-serif;
  font-size: 26px;
  line-height: 1;
  color: #1a1a2e;
  flex: 0 0 auto;
}
#cgas-font-grid.cgas-font-grid-collapsed {
  display: none !important;
}
#cgas-font-grid.cgas-font-grid-open {
  display: grid !important;
  margin-top: 12px;
}
#cgas-font-grid .cgas-font-swatch {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1.05;
}
#cgas-font-grid .cgas-font-swatch.active {
  background: #2563ff;
  color: #fff;
  border-color: #2563ff;
}


/* v1.6.4: CustomNeon-style step sections and special effects */
.cgas-options-panel form {
  counter-reset: cgasStep;
}
.cgas-options-panel .cgas-section {
  position: relative;
}
.cgas-options-panel .cgas-section > .cgas-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cgas-options-panel .cgas-section > .cgas-section-title::before {
  counter-increment: cgasStep;
  content: counter(cgasStep);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #2563ff;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  flex: 0 0 24px;
}
.cgas-effect-list {
  display: grid;
  gap: 10px;
}
.cgas-effect-card {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid #e2e6ef;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.cgas-effect-card input {
  display: none;
}
.cgas-effect-radio {
  width: 19px;
  height: 19px;
  border: 2px solid #a5adbd;
  border-radius: 50%;
  margin-top: 2px;
  box-sizing: border-box;
}
.cgas-effect-card.active {
  border-color: #2563ff;
  background: #f4f7ff;
  box-shadow: 0 6px 18px rgba(37,99,255,.12);
}
.cgas-effect-card.active .cgas-effect-radio {
  border-color: #2563ff;
  box-shadow: inset 0 0 0 4px #fff;
  background: #2563ff;
}
.cgas-effect-copy strong {
  display: block;
  color: #111827;
  font-size: 15px;
}
.cgas-effect-copy small {
  display: block;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 3px;
}
.cgas-effect-note {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border-left: 3px solid #2563ff;
  border-radius: 8px;
  color: #475569;
  font-size: 12px;
}
.cgas-text-color-parts-section {
  background: #fbfcff;
  border-left: 3px solid #2563ff;
}
.cgas-part-count-buttons {
  display: flex;
  gap: 8px;
}
.cgas-part-count-btn {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #d9dde7;
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}
.cgas-part-count-btn.active {
  background: #2563ff;
  border-color: #2563ff;
  color: #fff;
}
.cgas-logo-proof-cta {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg,#3157ff,#664dff);
  color: #fff;
}
.cgas-logo-proof-cta strong {
  display: block;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.cgas-logo-proof-cta p {
  margin: 6px 0 12px;
  color: rgba(255,255,255,.88);
  font-size: 12px;
  line-height: 1.4;
}
.cgas-logo-proof-btn,
#cgas-btn-quote {
  border-radius: 999px;
  font-weight: 800;
}
.cgas-logo-proof-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
}
.cgas-logo-proof-btn:hover {
  background: rgba(255,255,255,.22);
}
#cgas-btn-quote {
  border-color: #2563ff;
  color: #2563ff;
}
#cgas-btn-quote:hover {
  background: #2563ff;
  color: #fff;
}


/* v1.6.5: Product page becomes designer-first, like CustomNeon create page */
body.cgas-embedded-product-designer.single-product .product .summary,
body.cgas-embedded-product-designer.single-product .product .woocommerce-product-gallery,
body.cgas-embedded-product-designer.single-product .product .images,
body.cgas-embedded-product-designer.single-product .product .product_title,
body.cgas-embedded-product-designer.single-product .product .price,
body.cgas-embedded-product-designer.single-product .product form.cart {
  display: none !important;
}

body.cgas-embedded-product-designer.single-product .product {
  display: block !important;
}

.cgas-product-designer-hero {
  width: 100%;
  clear: both;
  margin: 0 0 34px;
  padding: 0;
}

.cgas-product-designer-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

/* Make the embedded designer feel like the main hero/banner area. */
body.cgas-embedded-product-designer .cgas-wrap {
  max-width: none;
  width: 100%;
  margin: 0 auto 28px;
  padding-top: 0;
}

body.cgas-embedded-product-designer .cgas-layout {
  min-height: 680px;
}

/* Put product description/tabs below the designer as normal content. */
body.cgas-embedded-product-designer.single-product .woocommerce-tabs,
body.cgas-embedded-product-designer.single-product .related.products,
body.cgas-embedded-product-designer.single-product .upsells.products {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

body.cgas-embedded-product-designer.single-product .woocommerce-tabs {
  padding-top: 24px;
}

@media (max-width: 900px) {
  body.cgas-embedded-product-designer .cgas-layout {
    min-height: auto;
  }
  .cgas-product-designer-hero {
    margin-bottom: 22px;
  }
}


/* v1.6.9: stronger embedded product-page designer mode */
body.cgas-embedded-product-designer.single-product div.product > .summary,
body.cgas-embedded-product-designer.single-product div.product > .images,
body.cgas-embedded-product-designer.single-product div.product > .woocommerce-product-gallery,
body.cgas-embedded-product-designer.single-product .single-product-wrapper .summary,
body.cgas-embedded-product-designer.single-product .single-product-wrapper .images,
body.cgas-embedded-product-designer.single-product .product-summary,
body.cgas-embedded-product-designer.single-product .product-info,
body.cgas-embedded-product-designer.single-product .entry-summary {
  display: none !important;
}

body.cgas-embedded-product-designer.single-product .cgas-product-designer-hero {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  clear: both !important;
}


/* v1.7.0: collapsed Special Effects selector */
.cgas-special-effect-toggle {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid #d9dde7;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}
.cgas-selected-effect-copy strong {
  display: block;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
}
.cgas-selected-effect-copy small {
  display: block;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 3px;
}
.cgas-special-effect-arrow {
  font-family: Arial, sans-serif;
  font-size: 26px;
  line-height: 1;
  color: #1a1a2e;
  flex: 0 0 auto;
}
#cgas-special-effects-list.cgas-effect-list-collapsed {
  display: none !important;
}
#cgas-special-effects-list.cgas-effect-list-open {
  display: grid !important;
  margin-top: 12px;
}
#cgas-special-effects-list .cgas-effect-card.active {
  border-color: #2563ff;
  background: #f4f7ff;
}


/* v1.7.1: Mobile CustomNeon-style sticky preview + scrollable options */
.cgas-mobile-preview-total {
  display: none;
}

@media (max-width: 768px) {
  body.cgas-embedded-product-designer,
  body.cgas-embedded-product-designer.single-product {
    overflow-x: hidden;
  }

  body.cgas-embedded-product-designer .cgas-header,
  body.cgas-embedded-product-designer .cgas-templates-bar,
  body.cgas-embedded-product-designer .cgas-preview-actions,
  body.cgas-embedded-product-designer #cgas-share-result {
    display: none !important;
  }

  body.cgas-embedded-product-designer .cgas-wrap {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.cgas-embedded-product-designer .cgas-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
  }

  body.cgas-embedded-product-designer .cgas-preview-panel {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: #111827 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
  }

  body.admin-bar.cgas-embedded-product-designer .cgas-preview-panel {
    top: 46px !important;
  }

  body.cgas-embedded-product-designer .cgas-preview-toolbar {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 10;
    margin: 0 !important;
  }

  body.cgas-embedded-product-designer .cgas-preview-toolbar .cgas-size-label {
    display: none !important;
  }

  body.cgas-embedded-product-designer .cgas-mode-btn {
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,.85) !important;
    color: #111827 !important;
  }

  body.cgas-embedded-product-designer .cgas-mode-btn.active {
    background: #fff !important;
    color: #39d353 !important;
    border-color: #fff !important;
  }

  body.cgas-embedded-product-designer .cgas-mobile-preview-total {
    display: flex !important;
    position: absolute;
    right: 14px;
    top: 10px;
    z-index: 10;
    align-items: baseline;
    gap: 8px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.45);
    pointer-events: none;
  }

  body.cgas-embedded-product-designer .cgas-mobile-preview-total span {
    font-size: 18px;
    font-weight: 500;
    opacity: .92;
  }

  body.cgas-embedded-product-designer .cgas-mobile-preview-total strong {
    font-size: clamp(30px, 8vw, 48px);
    font-weight: 500;
    letter-spacing: .01em;
  }

  body.cgas-embedded-product-designer .cgas-preview-stage {
    height: 46vh !important;
    min-height: 330px !important;
    max-height: 430px !important;
    border-radius: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.cgas-embedded-product-designer .cgas-scene-bg {
    background-size: cover !important;
    background-position: center !important;
  }

  body.cgas-embedded-product-designer .cgas-wall-size-label {
    display: none !important;
  }

  body.cgas-embedded-product-designer .cgas-drag-hint {
    display: none !important;
  }

  body.cgas-embedded-product-designer .cgas-options-panel {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  body.cgas-embedded-product-designer .cgas-options-panel form {
    margin: 0 !important;
    padding: 0 14px 120px !important;
    background: transparent !important;
  }

  body.cgas-embedded-product-designer .cgas-options-panel .cgas-section,
  body.cgas-embedded-product-designer .cgas-price-summary,
  body.cgas-embedded-product-designer .cgas-actions,
  body.cgas-embedded-product-designer #cgas-quote-form-wrap {
    background: #fff !important;
    border-radius: 18px !important;
    margin: 0 0 12px !important;
    padding: 18px !important;
    box-shadow: 0 3px 12px rgba(15,23,42,.08);
  }

  body.cgas-embedded-product-designer .cgas-options-panel .cgas-section:first-of-type {
    margin-top: -10px !important;
  }

  body.cgas-embedded-product-designer .cgas-section-title {
    font-size: 24px !important;
    text-transform: uppercase;
    letter-spacing: .01em;
  }

  body.cgas-embedded-product-designer .cgas-options-panel .cgas-section > .cgas-section-title::before {
    width: 34px !important;
    height: 34px !important;
    border-radius: 7px !important;
    font-size: 20px !important;
    flex-basis: 34px !important;
    background: #4b5cff !important;
  }

  body.cgas-embedded-product-designer .cgas-color-grid,
  body.cgas-embedded-product-designer .cgas-size-grid,
  body.cgas-embedded-product-designer .cgas-backboard-grid,
  body.cgas-embedded-product-designer .cgas-mount-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.cgas-embedded-product-designer .cgas-price-summary {
    display: none !important;
  }

  body.cgas-embedded-product-designer .cgas-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 -14px !important;
    box-shadow: 0 -6px 18px rgba(15,23,42,.16) !important;
  }
}

@media (max-width: 390px) {
  body.cgas-embedded-product-designer .cgas-preview-stage {
    height: 43vh !important;
    min-height: 300px !important;
  }

  body.cgas-embedded-product-designer .cgas-mobile-preview-total strong {
    font-size: 34px;
  }
}


/* v1.7.2: Mobile fixed preview correction
   Preview stays fixed under the site header, options scroll underneath.
   This also fixes the issue where the preview was only visible as a thin left strip. */
@media (max-width: 768px) {
  body.cgas-embedded-product-designer .cgas-product-designer-hero,
  body.cgas-embedded-product-designer .cgas-product-designer-inner,
  body.cgas-embedded-product-designer .cgas-wrap,
  body.cgas-embedded-product-designer .cgas-layout {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.cgas-embedded-product-designer .cgas-layout {
    display: block !important;
    position: relative !important;
  }

  body.cgas-embedded-product-designer .cgas-preview-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--cgas-mobile-header-offset, 96px) !important;
    width: 100vw !important;
    height: var(--cgas-mobile-preview-height, 355px) !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 9998 !important;
    background: #111827 !important;
    overflow: hidden !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.28) !important;
  }

  body.admin-bar.cgas-embedded-product-designer .cgas-preview-panel {
    top: calc(var(--cgas-mobile-header-offset, 96px) + 46px) !important;
  }

  body.cgas-embedded-product-designer .cgas-preview-stage {
    width: 100vw !important;
    height: var(--cgas-mobile-preview-height, 355px) !important;
    min-height: var(--cgas-mobile-preview-height, 355px) !important;
    max-height: var(--cgas-mobile-preview-height, 355px) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.cgas-embedded-product-designer .cgas-options-panel {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: calc(var(--cgas-mobile-preview-height, 355px) + 10px) !important;
    position: relative !important;
    z-index: 2 !important;
    background: #f5f5f5 !important;
    overflow: visible !important;
  }

  body.cgas-embedded-product-designer .cgas-options-panel form {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.cgas-embedded-product-designer .cgas-backboard {
    max-width: 92vw !important;
  }

  body.cgas-embedded-product-designer .cgas-mobile-preview-total {
    display: flex !important;
    position: absolute !important;
    right: 14px !important;
    top: 12px !important;
    z-index: 12 !important;
  }

  body.cgas-embedded-product-designer .cgas-preview-toolbar {
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    z-index: 12 !important;
  }
}

@media (max-width: 390px) {
  body.cgas-embedded-product-designer {
    --cgas-mobile-preview-height: 320px;
  }
}


/* v1.7.6: prominent customer background-image upload button */
.cgas-bg-upload-top-btn {
  color: #ff6a00 !important;
  border-color: #ff6a00 !important;
  font-weight: 900 !important;
  background: #fff7ed !important;
  cursor: pointer;
}
.cgas-bg-upload-top-btn:hover {
  background: #ff6a00 !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  body.cgas-embedded-product-designer .cgas-preview-actions {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--cgas-mobile-header-offset, 96px) + var(--cgas-mobile-preview-height, 355px)) !important;
    width: 100vw !important;
    z-index: 9999 !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.16) !important;
  }

  body.admin-bar.cgas-embedded-product-designer .cgas-preview-actions {
    top: calc(var(--cgas-mobile-header-offset, 96px) + 46px + var(--cgas-mobile-preview-height, 355px)) !important;
  }

  body.cgas-embedded-product-designer .cgas-preview-actions #cgas-btn-export-svg,
  body.cgas-embedded-product-designer .cgas-preview-actions #cgas-btn-share,
  body.cgas-embedded-product-designer .cgas-preview-actions #cgas-btn-reset-position {
    display: none !important;
  }

  body.cgas-embedded-product-designer .cgas-preview-actions .cgas-bg-upload-top-btn {
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ff6a00 !important;
    border-radius: 12px !important;
    color: #ff6a00 !important;
    background: #fff7ed !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
  }

  body.cgas-embedded-product-designer .cgas-options-panel {
    padding-top: calc(var(--cgas-mobile-preview-height, 355px) + 72px) !important;
  }
}

/* ── v1.8.0 Template Gallery + Locked Layer ───────────────────────── */
.cgas-template-gallery-wrap {
  margin: 0 0 24px;
  padding: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  border: 1px solid #e5e7f0;
  border-radius: 16px;
}
.cgas-template-gallery-head h3 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  color: #1a1a2e;
}
.cgas-template-gallery-head p {
  margin: 0 0 14px;
  color: #666;
}
.cgas-template-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.cgas-template-filter {
  border: 1px solid #d3d7e6;
  background: #fff;
  color: #1f2937;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
}
.cgas-template-filter.active,
.cgas-template-filter:hover {
  background: #ff7a00;
  border-color: #ff7a00;
  color: #fff;
}
.cgas-template-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.cgas-template-card {
  min-width: 0;
}
.cgas-template-card .cgas-tpl-btn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #e1e5ef;
  border-radius: 14px;
  background: #fff;
  padding: 10px;
  cursor: pointer;
  text-align: left;
  color: #111827;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cgas-template-card .cgas-tpl-btn:hover,
.cgas-template-card.active .cgas-tpl-btn {
  transform: translateY(-2px);
  border-color: #ff7a00;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.cgas-template-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #111827;
}
.cgas-template-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cgas-template-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  color: #fff;
  text-align: center;
}
.cgas-template-card strong {
  font-size: 14px;
  line-height: 1.25;
}
.cgas-template-card em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #ff7a00;
}
.cgas-locked-template-image {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: 78%;
  max-height: 78%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.25));
}
.cgas-backboard.cgas-has-template-image .cgas-sign-text {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}
@media (max-width: 640px) {
  .cgas-template-gallery-wrap {
    padding: 14px;
    margin-left: -8px;
    margin-right: -8px;
  }
  .cgas-template-gallery {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
  }
  .cgas-template-card {
    flex: 0 0 150px;
  }
  .cgas-template-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }
  .cgas-template-filter {
    flex: 0 0 auto;
  }
}


/* v1.8.1: category template grids + related templates under designer */
.cgas-public-template-gallery,
.cgas-related-template-gallery-wrap {
  max-width: 1280px;
  margin: 34px auto;
  padding: 0 20px;
}
.cgas-public-template-head,
.cgas-template-gallery-head {
  text-align: center;
  margin-bottom: 18px;
}
.cgas-public-template-head h3,
.cgas-template-gallery-head h3 {
  font-size: clamp(24px, 3vw, 38px);
  margin: 0 0 8px;
  color: #111827;
}
.cgas-public-template-head p,
.cgas-template-gallery-head p {
  margin: 0;
  color: #6b7280;
}
.cgas-public-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}
.cgas-public-template-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  text-decoration: none !important;
  color: #111827;
  box-shadow: 0 5px 18px rgba(15,23,42,.06);
  transition: transform .16s ease, box-shadow .16s ease;
}
.cgas-public-template-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15,23,42,.12);
}
.cgas-public-template-thumb,
.cgas-template-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}
.cgas-public-template-thumb img,
.cgas-template-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cgas-public-template-card strong {
  font-size: 15px;
}
.cgas-public-template-card em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: #2563ff;
  color: #fff;
  font-style: normal;
  font-weight: 800;
  font-size: 13px;
}
.cgas-related-template-toggle {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  border: 2px dashed #2563ff;
  border-radius: 18px;
  background: #f4f7ff;
  color: #111827;
  cursor: pointer;
}
.cgas-related-template-toggle span {
  font-size: 22px;
  font-weight: 900;
}
.cgas-related-template-toggle em {
  color: #5b6475;
  font-style: normal;
}
.cgas-related-template-panel {
  margin-top: 18px;
}
@media (max-width: 768px) {
  .cgas-public-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .cgas-related-template-gallery-wrap {
    margin-top: 18px;
    padding: 0 14px 110px;
  }
}


/* v1.8.2: Template mode fix
   Thumbnail is for category cards only. Locked Design Image is full locked artwork.
   Customer edits only the predefined text area. */
.cgas-backboard.cgas-has-template-image {
  min-width: min(92vw, 620px);
  min-height: 220px;
  background: rgba(255,255,255,0.08) !important;
  overflow: hidden;
}

.cgas-backboard.cgas-has-template-image .cgas-locked-template-image {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  transform: none;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  filter: none;
}

.cgas-backboard.cgas-has-template-image .cgas-sign-text.cgas-template-editable-text {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 78%;
  max-width: 86%;
  pointer-events: none;
}

.cgas-backboard.cgas-has-template-image .cgas-text-layer {
  display: block;
  text-align: center;
}

.cgas-template-editing-notice {
  padding: 10px 12px;
  margin: 0 0 12px;
  border-left: 4px solid #ff7a00;
  border-radius: 8px;
  background: #fff7ed;
  color: #7c2d12;
  font-size: 13px;
}

.cgas-template-editing-notice strong {
  color: #ea580c;
}

@media (max-width: 768px) {
  .cgas-backboard.cgas-has-template-image {
    min-width: 84vw;
    min-height: 150px;
  }

  .cgas-backboard.cgas-has-template-image .cgas-sign-text.cgas-template-editable-text {
    width: 82%;
  }
}


/* v1.8.3 admin template placement editor */
.cgas-template-admin-preview {
  position: relative;
  width: min(720px, 100%);
  height: 360px;
  background: #111827;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  border: 1px solid #d1d5db;
}
.cgas-template-admin-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cgas-template-preview-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  cursor: grab;
  font-weight: 700;
  text-shadow: 0 0 3px currentColor, 0 0 8px currentColor;
  border: 1px dashed rgba(255,122,0,.65);
  padding: 4px 8px;
  border-radius: 4px;
}
.cgas-template-preview-text.dragging {
  cursor: grabbing;
  border-color: #ff7a00;
  background: rgba(255,122,0,.08);
}


/* v1.8.4 template font selector */
.cgas-template-font-preview {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid #d7dce7;
  border-radius: 10px;
  background: #fff;
  font-size: 34px;
  line-height: 1.1;
  color: #111827;
  max-width: 520px;
}
#cgas-template-font-select option {
  font-size: 18px;
}


/* v1.8.5: force editable template words to show above locked artwork */
.cgas-template-admin-preview {
  isolation: isolate;
}
.cgas-template-admin-preview img {
  position: relative;
  z-index: 1;
}
.cgas-template-preview-text {
  z-index: 20 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.cgas-backboard.cgas-has-template-image {
  isolation: isolate;
}
.cgas-backboard.cgas-has-template-image .cgas-locked-template-image {
  z-index: 1 !important;
}
.cgas-backboard.cgas-has-template-image .cgas-sign-text.cgas-template-editable-text {
  z-index: 50 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.cgas-backboard.cgas-has-template-image .cgas-sign-text.cgas-template-editable-text .cgas-text-layer {
  z-index: 51 !important;
  position: relative;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* v1.8.6 template builder layout: left preview, right options */
.cgas-template-builder-layout {
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(520px, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}

.cgas-template-builder-sticky {
  position: sticky;
  top: 32px;
}

.cgas-template-builder-title {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.15;
}

.cgas-template-builder-subtitle {
  margin: 0 0 14px;
  color: #6b7280;
}

.cgas-template-builder-options-col {
  min-width: 0;
}

.cgas-template-builder-options-col .form-table {
  margin-top: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
}

.cgas-template-builder-options-col .form-table th,
.cgas-template-builder-options-col .form-table td {
  padding: 14px 16px;
  vertical-align: top;
  border-bottom: 1px solid #eef2f7;
}

.cgas-template-builder-options-col .form-table tr:last-child th,
.cgas-template-builder-options-col .form-table tr:last-child td {
  border-bottom: 0;
}

.cgas-template-builder-options-col .form-table th {
  width: 220px;
  background: #fafbfc;
  font-weight: 700;
}

.cgas-template-placement-row-legacy {
  display: none !important;
}

.cgas-template-admin-preview {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 360px;
  min-height: 360px;
  background: #111827;
  border-radius: 14px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  border: 1px solid #d1d5db;
  box-shadow: 0 8px 24px rgba(15,23,42,.10);
}

.cgas-template-admin-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.cgas-template-preview-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.cgas-template-builder-help {
  margin-top: 10px !important;
  display: block;
}

.cgas-template-form .regular-text,
.cgas-template-form input[type="url"],
.cgas-template-form input[type="text"],
.cgas-template-form select {
  max-width: 100%;
}

@media (max-width: 1200px) {
  .cgas-template-builder-layout {
    grid-template-columns: 420px 1fr;
  }
}

@media (max-width: 960px) {
  .cgas-template-builder-layout {
    grid-template-columns: 1fr;
  }

  .cgas-template-builder-sticky {
    position: static;
  }

  .cgas-template-admin-preview {
    max-width: 100%;
    height: 320px;
    min-height: 320px;
  }

  .cgas-template-builder-options-col .form-table th,
  .cgas-template-builder-options-col .form-table td {
    display: block;
    width: auto;
  }

  .cgas-template-builder-options-col .form-table th {
    padding-bottom: 6px;
  }
}




/* Custom Design 3.1.3 — selected-color core neon renderer.
   Target: CustomNeon-style text: light selected-color center, darker selected-color edge, soft haze.
   No pure white center line. Text remains one continuous horizontal layer. */
.cgas-preview-stage {
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.08), rgba(0,0,0,0.35)),
    #2d2d2d;
}

.cgas-preview-stage .cgas-text-layer,
.cgas-preview-stage.daytime .cgas-text-layer,
.cgas-preview-stage .cgas-color-part,
.cg-neon-text {
  display: inline-block !important;
  position: relative !important;

  white-space: pre-wrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;

  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;

  font-family:
    var(--cg-selected-font, Pacifico),
    "Poppins Rounded",
    "Nunito",
    "Noto Sans KR",
    "Malgun Gothic",
    Arial,
    sans-serif !important;

  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 1px !important;

  /* IMPORTANT: the letter body is NOT white. It is a light tint of the selected color. */
  color: var(--neon-core-color, #7df9ff) !important;
  -webkit-text-fill-color: var(--neon-core-color, #7df9ff) !important;
  -webkit-text-stroke: 0.45px var(--neon-edge-color, #0072ff) !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;

  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;

  /* Bright selected-color center + darker selected-color edge + restrained haze. */
  text-shadow:
    0 0 1px var(--neon-core-color, #7df9ff),
    0 0 3px var(--neon-core-color, #7df9ff),
    0 0 5px var(--neon-color, var(--cgas-neon-color, #39ff14)),
    0 0 9px var(--neon-color, var(--cgas-neon-color, #39ff14)),
    0 0 14px var(--neon-edge-color, var(--neon-color, #39ff14)),
    0 0 22px var(--neon-edge-color, var(--neon-color, #39ff14)),
    0 0 34px var(--neon-haze-color, var(--neon-color, #39ff14)),
    0 0 52px var(--neon-haze-color, var(--neon-color, #39ff14)) !important;

  filter: blur(0.04px) brightness(1.12) saturate(1.22) !important;
  transform: translateZ(0);
  pointer-events: auto;
  paint-order: stroke fill !important;
  --neon-color: var(--cgas-neon-color, #39ff14);
  --neon-core-color: var(--cgas-neon-core-color, #a9ff9a);
  --neon-edge-color: var(--cgas-neon-edge-color, #18b900);
  --neon-haze-color: var(--cgas-neon-haze-color, rgba(57,255,20,.70));
}

.cgas-preview-stage .cgas-text-layer *,
.cgas-preview-stage .cgas-color-part * {
  color: var(--neon-core-color, #7df9ff) !important;
  -webkit-text-fill-color: var(--neon-core-color, #7df9ff) !important;
  -webkit-text-stroke: 0.45px var(--neon-edge-color, #0072ff) !important;
  background-image: none !important;
  text-shadow: inherit !important;
  filter: inherit !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
}

/* Custom Design 3.1.0: Templates admin layout = 50% preview / 50% settings */
.cgas-template-builder-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.cgas-template-builder-preview-col,
.cgas-template-builder-options-col {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.cgas-template-admin-preview {
  width: 100% !important;
  height: clamp(460px, 52vw, 680px) !important;
  min-height: 460px !important;
}
.cgas-template-builder-options-col input.regular-text,
.cgas-template-builder-options-col input[type="url"],
.cgas-template-builder-options-col input[type="text"],
.cgas-template-builder-options-col input[type="number"],
.cgas-template-builder-options-col select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.cgas-template-builder-options-col .small-text {
  width: 120px !important;
  max-width: 120px !important;
}
@media (max-width: 1200px) {
  .cgas-template-builder-layout { grid-template-columns: 1fr !important; }
  .cgas-template-admin-preview { height: 420px !important; min-height: 420px !important; }
}


/* Custom Design 3.1.4 — FINAL CustomNeon-style selected-color neon.
   Center is a bright tint of the selected color, not white.
   Edge is a darker selected-color rim.
   Outer glow is soft mist, not a thick white line. */
.cgas-preview-stage .cgas-text-layer,
.cgas-preview-stage.daytime .cgas-text-layer,
.cgas-preview-stage .cgas-color-part,
.cg-neon-text {
  color: var(--neon-core-color, var(--cgas-neon-core-color, #7df9ff)) !important;
  -webkit-text-fill-color: var(--neon-core-color, var(--cgas-neon-core-color, #7df9ff)) !important;
  -webkit-text-stroke: 0.62px var(--neon-edge-color, var(--cgas-neon-edge-color, #004fb8)) !important;
  text-shadow:
    0 0 1px var(--neon-core-color, var(--cgas-neon-core-color, #7df9ff)),
    0 0 2.5px var(--neon-core-color, var(--cgas-neon-core-color, #7df9ff)),
    0 0 5px var(--neon-color, var(--cgas-neon-color, #39ff14)),
    0 0 8px var(--neon-color, var(--cgas-neon-color, #39ff14)),
    0 0 13px var(--neon-edge-color, var(--cgas-neon-edge-color, #18b900)),
    0 0 20px var(--neon-haze-color, var(--cgas-neon-haze-color, rgba(57,255,20,.62))),
    0 0 30px var(--neon-haze-color, var(--cgas-neon-haze-color, rgba(57,255,20,.44))),
    0 0 44px var(--neon-haze-color, var(--cgas-neon-haze-color, rgba(57,255,20,.22))) !important;
  filter: blur(0.03px) brightness(1.08) saturate(1.18) !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
.cgas-preview-stage .cgas-text-layer *,
.cgas-preview-stage .cgas-color-part * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-text-stroke: inherit !important;
  text-shadow: inherit !important;
  filter: inherit !important;
  background-image: none !important;
}


/* Custom Design 3.1.5 — bright neon color readability fallback.
   JS automatically darkens the rim and reduces haze for white/yellow/pastel colors.
   These defaults keep bright colors readable even before JS finishes applying inline variables. */
.cgas-preview-stage .cgas-text-layer,
.cgas-preview-stage.daytime .cgas-text-layer,
.cgas-preview-stage .cgas-color-part,
.cg-neon-text {
  text-rendering: geometricPrecision !important;
}

/* Custom Design 3.1.7 — fixed physical LED neon tube thickness.
   Real LED neon tubing is approximately 1cm wide. The JS converts that physical
   width to preview pixels from the selected sign width, so changing font, text
   size, or text length does not make the tube body thicker/thinner. */
.cgas-preview-stage .cgas-text-layer,
.cgas-preview-stage.daytime .cgas-text-layer,
.cgas-preview-stage .cgas-color-part,
.cg-neon-text {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-width: var(--cgas-fixed-tube-width, 4px) !important;
  -webkit-text-stroke-color: var(--neon-tube-color, var(--cgas-neon-tube-color, var(--neon-color, #39ff14))) !important;
  paint-order: stroke fill !important;
  text-shadow: var(--cgas-neon-shadow,
    0 0 1px var(--neon-tube-color, var(--neon-color, #39ff14)),
    0 0 4px var(--neon-color, #39ff14),
    0 0 10px var(--neon-edge-color, var(--neon-color, #39ff14)),
    0 0 22px var(--neon-haze-color, rgba(57,255,20,.45))
  ) !important;
}
.cgas-preview-stage .cgas-text-layer *,
.cgas-preview-stage .cgas-color-part * {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-width: var(--cgas-fixed-tube-width, 4px) !important;
  -webkit-text-stroke-color: var(--neon-tube-color, var(--cgas-neon-tube-color, var(--neon-color, #39ff14))) !important;
  text-shadow: inherit !important;
  filter: inherit !important;
  paint-order: stroke fill !important;
}

/* Custom Design 3.1.7 — real-size tube correction.
   A 1cm real tube on a 24in/60.96cm sign is about 1/61 of sign width.
   Browser text-stroke visually doubles because it is drawn on both sides of the glyph,
   so JS supplies a half-width stroke. This fallback is intentionally thin. */
.cgas-preview-stage .cgas-text-layer,
.cgas-preview-stage.daytime .cgas-text-layer,
.cgas-preview-stage .cgas-color-part,
.cg-neon-text {
  -webkit-text-stroke-width: var(--cgas-fixed-tube-width, 2px) !important;
  text-shadow: var(--cgas-neon-shadow,
    0 0 0.5px var(--neon-tube-color, var(--neon-color, #39ff14)),
    0 0 2px var(--neon-color, #39ff14),
    0 0 6px var(--neon-edge-color, var(--neon-color, #39ff14)),
    0 0 14px var(--neon-haze-color, rgba(57,255,20,.35))
  ) !important;
}
.cgas-preview-stage .cgas-text-layer *,
.cgas-preview-stage .cgas-color-part * {
  -webkit-text-stroke-width: var(--cgas-fixed-tube-width, 2px) !important;
}


/* Custom Design 3.1.9 — TRUE thin tube + 20% lower text brightness.
   The tube preview now uses a much thinner JS-calculated stroke: approx. 0.18cm browser stroke
   to represent about 1cm physical LED neon tubing after CSS stroke expansion. */
.cgas-preview-stage .cgas-text-layer,
.cgas-preview-stage.daytime .cgas-text-layer,
.cgas-preview-stage .cgas-color-part,
.cg-neon-text {
  -webkit-text-stroke-width: var(--cgas-fixed-tube-width, 1.1px) !important;
  filter: var(--cgas-neon-filter, brightness(0.86) saturate(1.02)) !important;
  text-shadow: var(--cgas-neon-shadow,
    0 0 0.25px var(--neon-tube-color, var(--neon-color, #39ff14)),
    0 0 1.8px rgba(57,255,20,.34),
    0 0 4px rgba(57,255,20,.22),
    0 0 8px rgba(57,255,20,.13)
  ) !important;
}
.cgas-preview-stage .cgas-text-layer *,
.cgas-preview-stage .cgas-color-part * {
  -webkit-text-stroke-width: var(--cgas-fixed-tube-width, 1.1px) !important;
  filter: var(--cgas-neon-filter, brightness(0.86) saturate(1.02)) !important;
}


/* Custom Design 3.1.9 — extra-thin fixed tube + lower brightness.
   Final override: the preview stroke is not tied to font weight. JS calculates
   --cgas-fixed-tube-width from selected real sign width; this fallback stays thin. */
.cgas-preview-stage .cgas-text-layer,
.cgas-preview-stage.daytime .cgas-text-layer,
.cgas-preview-stage .cgas-color-part,
.cg-neon-text {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-width: var(--cgas-fixed-tube-width, 0.65px) !important;
  -webkit-text-stroke-color: var(--neon-tube-color, var(--cgas-neon-tube-color, var(--neon-color, #39ff14))) !important;
  filter: var(--cgas-neon-filter, brightness(0.74) saturate(0.94)) !important;
  text-shadow: var(--cgas-neon-shadow,
    0 0 0.18px var(--neon-tube-color, var(--neon-color, #39ff14)),
    0 0 0.45px var(--neon-edge-color, var(--neon-color, #39ff14)),
    0 0 1.2px rgba(57,255,20,.22),
    0 0 2.8px rgba(57,255,20,.14),
    0 0 5.5px rgba(57,255,20,.08)
  ) !important;
  paint-order: stroke fill !important;
}
.cgas-preview-stage .cgas-text-layer *,
.cgas-preview-stage .cgas-color-part * {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-width: var(--cgas-fixed-tube-width, 0.65px) !important;
  -webkit-text-stroke-color: var(--neon-tube-color, var(--cgas-neon-tube-color, var(--neon-color, #39ff14))) !important;
  filter: var(--cgas-neon-filter, brightness(0.74) saturate(0.94)) !important;
  text-shadow: inherit !important;
  paint-order: stroke fill !important;
}


/* Custom Design 3.2.0 — FINAL FIX
   1) A single input line must stay one physical sign line. Spaces must NOT wrap.
   2) Keep the tube thin, but bring back a visible soft glow.
   This block is intentionally last so it beats older 3.1.x overrides. */
.cgas-preview-stage .cgas-sign-text,
.cgas-preview-stage #cgas-sign-text {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  max-width: none !important;
}
.cgas-preview-stage .cgas-text-layer,
.cgas-preview-stage.daytime .cgas-text-layer,
.cgas-preview-stage .cgas-color-part,
.cg-neon-text {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  max-width: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-width: var(--cgas-fixed-tube-width, 0.75px) !important;
  -webkit-text-stroke-color: var(--neon-tube-color, var(--cgas-neon-tube-color, var(--neon-color, #39ff14))) !important;
  filter: var(--cgas-neon-filter, brightness(0.82) saturate(1.04)) !important;
  text-shadow: var(--cgas-neon-shadow,
    0 0 0.30px var(--neon-tube-color, var(--neon-color, #39ff14)),
    0 0 0.80px var(--neon-edge-color, var(--neon-color, #39ff14)),
    0 0 2.8px rgba(57,255,20,.38),
    0 0 6.5px rgba(57,255,20,.26),
    0 0 13px rgba(57,255,20,.16),
    0 0 22px rgba(57,255,20,.09)
  ) !important;
  paint-order: stroke fill !important;
}
.cgas-preview-stage .cgas-text-layer *,
.cgas-preview-stage .cgas-color-part * {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-width: var(--cgas-fixed-tube-width, 0.75px) !important;
  -webkit-text-stroke-color: var(--neon-tube-color, var(--cgas-neon-tube-color, var(--neon-color, #39ff14))) !important;
  filter: inherit !important;
  text-shadow: inherit !important;
  paint-order: stroke fill !important;
}

/* Custom Design v4.0.0 — SVG physical-size preview engine
   - Line 1 never auto-wraps.
   - Line 2 is shown only when the customer enters Line 2.
   - Each line is fitted to the selected sign width with SVG textLength.
   - Tube preview thickness is calculated in JS from actual sign width, not font weight. */
#cgas-sign-text.cgas-v4-engine-active,
.cgas-sign-text.cgas-v4-engine-active {
  display: block !important;
  position: relative !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  overflow: visible !important;
  text-align: center !important;
  line-height: 1 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: none !important;
}

#cgas-sign-text.cgas-v4-engine-active .cgas-text-layer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#cgas-v4-neon-svg,
.cgas-v4-neon-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}

#cgas-v4-neon-svg text,
.cgas-v4-neon-svg text {
  white-space: pre !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-rendering: geometricPrecision;
  shape-rendering: geometricPrecision;
}

.cgas-backboard .cgas-v4-neon-svg {
  z-index: 60;
  position: relative;
}


/* v4.1.2 start flow and true SVG/upload layers */
.cgas-header,
.cgas-start-method,
.cgas-start-method button,
.cgas-start-method h3,
.cgas-start-method h4,
.cgas-start-method p,
.cgas-start-method strong,
.cgas-start-method span,
.cgas-start-method small {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.cgas-header{max-width:1180px;margin:34px auto 28px;text-align:center;padding:0 20px}
.cgas-header .cgas-title{margin:0;color:#111827;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;font-size:clamp(34px,4vw,54px)!important;line-height:1.12!important;font-weight:800!important;letter-spacing:-1.5px!important;text-transform:none!important}
.cgas-header .cgas-subtitle{margin:16px 0 0;color:#64748b;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;font-size:clamp(16px,1.7vw,21px)!important;line-height:1.45!important;font-weight:500!important;font-style:normal!important}
.cgas-start-method{box-sizing:border-box;max-width:1240px;margin:24px auto 42px;padding:32px 28px 26px;border:1px solid #dbe2ea;border-radius:18px;background:#fff;text-align:center;box-shadow:0 1px 2px rgba(15,23,42,.025)}
.cgas-start-heading h3{margin:0;color:#111827;font-size:clamp(25px,2.5vw,34px)!important;line-height:1.2!important;font-weight:800!important}
.cgas-start-heading p{margin:11px auto 0;max-width:760px;color:#64748b;font-size:17px!important;line-height:1.5!important;font-weight:500!important}
.cgas-start-method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:30px}
.cgas-start-card{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;min-height:350px;margin:0;border:1px solid #dbe2ea!important;border-radius:14px!important;background:#fff!important;padding:22px 28px 26px!important;cursor:pointer;text-align:center!important;color:#111827!important;box-shadow:0 1px 3px rgba(15,23,42,.03)!important;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important}
.cgas-start-card:hover,.cgas-start-card:focus-visible,.cgas-start-card.active{transform:translateY(-4px);border-color:#a9b8ca!important;box-shadow:0 14px 32px rgba(15,23,42,.10)!important;outline:0}
.cgas-start-icon{display:flex!important;align-items:center;justify-content:center;width:110px;height:110px;margin:0 auto 20px;border-radius:999px}
.cgas-start-icon svg{width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cgas-start-card-template .cgas-start-icon{color:#7c3aed;background:linear-gradient(145deg,#f4eaff,#eee6ff)}
.cgas-start-card-upload .cgas-start-icon{color:#1473e6;background:linear-gradient(145deg,#e9f3ff,#e4f0ff)}
.cgas-start-card-text .cgas-start-icon{color:#16a34a;background:linear-gradient(145deg,#eaf9ef,#dff5e7)}
.cgas-start-card strong{display:block!important;margin:0!important;color:#111827!important;font-size:22px!important;line-height:1.25!important;font-weight:800!important}
.cgas-start-card .cgas-start-description{display:block!important;min-height:53px;margin:13px auto 20px;color:#64748b!important;font-size:16px!important;line-height:1.55!important;font-weight:500!important}
.cgas-start-cta{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:auto;border-radius:6px;color:#fff!important;font-size:17px!important;line-height:1.2!important;font-weight:750!important;box-shadow:0 5px 12px rgba(15,23,42,.10)}
.cgas-start-card-template .cgas-start-cta{background:linear-gradient(135deg,#8b35e8,#7427d5)}
.cgas-start-card-upload .cgas-start-cta{background:linear-gradient(135deg,#1484f4,#096bd2)}
.cgas-start-card-text .cgas-start-cta{background:linear-gradient(135deg,#20b75d,#0f9c49)}
.cgas-benefit-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:30px;padding:20px 10px;border:1px solid #dbe2ea;border-radius:12px;background:#fff}
.cgas-benefit-strip>div{position:relative;display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;padding:3px 16px}
.cgas-benefit-strip>div:not(:last-child):after{content:"";position:absolute;right:0;top:8%;height:84%;width:1px;background:#e5eaf0}
.cgas-benefit-strip>div>span{grid-row:1/3;font-size:27px!important;line-height:1;color:#6d28d9}
.cgas-benefit-strip>div:nth-child(2)>span,.cgas-benefit-strip>div:nth-child(6)>span{color:#1473e6}
.cgas-benefit-strip>div:nth-child(3)>span,.cgas-benefit-strip>div:nth-child(5)>span{color:#16a34a}
.cgas-benefit-strip>div:nth-child(4)>span{color:#f97316}
.cgas-benefit-strip strong{color:#111827;font-size:13px!important;line-height:1.25!important;font-weight:800!important}
.cgas-benefit-strip small{margin-top:4px;color:#64748b;font-size:11px!important;line-height:1.3!important;font-weight:500!important}
.cgas-how-it-works{margin-top:28px;padding:24px 26px;border:1px solid #dbe2ea;border-radius:12px;text-align:left;background:#fff}
.cgas-how-it-works h4{margin:0 0 18px;color:#111827;font-size:24px!important;line-height:1.2!important;font-weight:800!important}
.cgas-how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cgas-how-grid>div{display:flex;align-items:center;min-height:68px;padding:12px 16px;border:1px solid #e3e8ef;border-radius:10px;color:#111827;background:#fff}
.cgas-how-grid span{display:flex!important;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;margin-right:14px;border-radius:999px;color:#fff!important;background:#7c3aed;font-size:17px!important;font-weight:800!important;box-shadow:0 0 0 6px #f0e8ff}
.cgas-how-grid>div:nth-child(2) span{background:#1473e6;box-shadow:0 0 0 6px #e5f1ff}
.cgas-how-grid>div:nth-child(3) span{background:#16a34a;box-shadow:0 0 0 6px #e4f7ea}
.cgas-how-grid strong{font-size:16px!important;line-height:1.3!important;font-weight:800!important}
.cgas-template-svg-layer,.cgas-upload-art-layer{position:absolute;inset:5%;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cgas-template-svg-layer svg,.cgas-upload-art-layer svg,.cgas-upload-art-layer img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;overflow:visible}
.cgas-file-placeholder{padding:24px;border:2px dashed rgba(255,255,255,.6);border-radius:12px;background:rgba(0,0,0,.35);color:#fff;text-align:center}.cgas-file-placeholder strong,.cgas-file-placeholder span{display:block}.cgas-file-placeholder span{font-size:12px;margin-top:8px}
.cgas-upload-file-name{margin-top:6px;padding:7px 10px;background:#f5f5f5;border-radius:6px;font-size:12px}
.cgas-has-inline-svg .cgas-sign-text{z-index:3}
@media(max-width:1100px){.cgas-benefit-strip{grid-template-columns:repeat(3,1fr);row-gap:18px}.cgas-benefit-strip>div:nth-child(3):after,.cgas-benefit-strip>div:nth-child(6):after{display:none}}
@media(max-width:768px){.cgas-header{margin-top:24px}.cgas-header .cgas-title{font-size:34px!important}.cgas-start-method{padding:24px 16px}.cgas-start-method-grid,.cgas-how-grid{grid-template-columns:1fr}.cgas-start-card{min-height:310px}.cgas-benefit-strip{grid-template-columns:repeat(2,1fr)}.cgas-benefit-strip>div:nth-child(2n):after{display:none}.cgas-benefit-strip>div:nth-child(3):after{display:block}}
@media(max-width:480px){.cgas-header .cgas-title{font-size:30px!important;letter-spacing:-.7px!important}.cgas-header .cgas-subtitle{font-size:16px!important}.cgas-start-heading h3{font-size:25px!important}.cgas-start-heading p{font-size:15px!important}.cgas-start-card{padding:20px!important}.cgas-benefit-strip{grid-template-columns:1fr}.cgas-benefit-strip>div:after{display:none!important}.cgas-how-it-works{padding:20px 16px}}

/* ======================================================================
   CustomGoods Sign Designer 5.0 — production UI system
   Theme-safe typography, modern cards, responsive layout.
   ====================================================================== */
:root{
  --cgas5-ink:#111827;
  --cgas5-muted:#667085;
  --cgas5-line:#e4e7ec;
  --cgas5-soft:#f8fafc;
  --cgas5-blue:#2563eb;
  --cgas5-blue-soft:#eff6ff;
  --cgas5-radius:14px;
  --cgas5-shadow:0 10px 30px rgba(15,23,42,.07);
}

/* Isolate the application UI from theme fonts. Neon preview and font samples
   keep their selected decorative font via explicit exclusions below. */
#cgas-designer,
#cgas-designer button,
#cgas-designer input,
#cgas-designer select,
#cgas-designer textarea,
#cgas-designer label,
#cgas-designer h1,
#cgas-designer h2,
#cgas-designer h3,
#cgas-designer h4,
#cgas-designer h5,
#cgas-designer h6,
#cgas-designer p,
#cgas-designer span,
#cgas-designer strong,
#cgas-designer small,
#cgas-designer div {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-style: normal;
  text-transform: none;
}
#cgas-designer .cgas-sign-text,
#cgas-designer .cgas-sign-text *,
#cgas-designer .cgas-text-layer,
#cgas-designer .cgas-color-part,
#cgas-designer .cgas-v4-neon-svg text {
  font-family: var(--cgas-selected-font, var(--cg-selected-font, inherit)) !important;
}

/* Each font tile carries its own inline font-family. Never replace all tiles
   with the currently selected font. */
#cgas-designer .cgas-font-swatch,
#cgas-designer .cgas-selected-font-label {
  font-style: normal !important;
  text-transform: none !important;
}

body.cgas-embedded-product-designer .cgas-product-designer-inner,
body.cgas-embedded-product-designer .cgas-wrap{
  width:min(100%,1440px)!important;
  max-width:1440px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.cgas-embedded-product-designer .cgas-wrap{
  padding:0 24px 48px!important;
  box-sizing:border-box!important;
}

.cgas-header{
  margin:26px auto 22px!important;
  padding:0 12px!important;
}
.cgas-header .cgas-title{
  color:var(--cgas5-ink)!important;
  font-size:clamp(32px,3.1vw,48px)!important;
  font-weight:800!important;
  line-height:1.12!important;
  letter-spacing:-.035em!important;
}
.cgas-header .cgas-subtitle{
  margin-top:10px!important;
  color:var(--cgas5-muted)!important;
  font-size:16px!important;
  font-weight:500!important;
  line-height:1.5!important;
}

.cgas-layout{
  grid-template-columns:minmax(0,1.55fr) minmax(380px,.85fr)!important;
  gap:22px!important;
  align-items:start!important;
}
.cgas-preview-panel{
  top:96px!important;
}
.cgas-preview-stage{
  min-height:560px!important;
  height:min(68vh,720px)!important;
  border-radius:var(--cgas5-radius)!important;
  border:1px solid rgba(15,23,42,.08)!important;
  box-shadow:var(--cgas5-shadow)!important;
}
.cgas-preview-toolbar{
  margin-bottom:12px!important;
}
.cgas-mode-btn,
.cgas-btn-secondary{
  min-height:38px!important;
  padding:8px 14px!important;
  border:1px solid var(--cgas5-line)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#344054!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.2!important;
  box-shadow:0 1px 2px rgba(16,24,40,.04)!important;
}
.cgas-mode-btn.active{
  background:var(--cgas5-ink)!important;
  border-color:var(--cgas5-ink)!important;
  color:#fff!important;
}
.cgas-preview-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:12px!important;
}

.cgas-options-panel{
  border:1px solid var(--cgas5-line)!important;
  border-radius:var(--cgas5-radius)!important;
  background:#fff!important;
  box-shadow:var(--cgas5-shadow)!important;
  overflow:hidden!important;
}
.cgas-options-panel .cgas-section{
  padding:22px!important;
  border-bottom:1px solid #edf0f3!important;
  background:#fff!important;
}
.cgas-options-panel .cgas-section-title{
  margin:0 0 14px!important;
  color:var(--cgas5-ink)!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1.3!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.cgas-options-panel .cgas-section>.cgas-section-title::before{
  width:25px!important;
  height:25px!important;
  flex:0 0 25px!important;
  border-radius:7px!important;
  background:var(--cgas5-blue)!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:0 3px 8px rgba(37,99,235,.22)!important;
}
.cgas-desc,
.cgas-field-note,
.cgas-field small{
  color:var(--cgas5-muted)!important;
  font-size:12px!important;
  line-height:1.55!important;
}
.cgas-field label{
  color:#344054!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.35!important;
}
.cgas-input,
.cgas-select,
.cgas-text-input,
.cgas-field input[type="text"],
.cgas-field input[type="email"],
.cgas-field input[type="tel"],
.cgas-field input[type="number"],
.cgas-field select,
.cgas-field textarea{
  min-height:42px!important;
  padding:10px 12px!important;
  border:1px solid #d0d5dd!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--cgas5-ink)!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.4!important;
  box-shadow:0 1px 2px rgba(16,24,40,.04)!important;
}
.cgas-field textarea{min-height:92px!important;resize:vertical!important}
.cgas-input:focus,
.cgas-select:focus,
.cgas-text-input:focus,
.cgas-field input:focus,
.cgas-field select:focus,
.cgas-field textarea:focus{
  border-color:#84adff!important;
  outline:3px solid rgba(37,99,235,.12)!important;
  box-shadow:none!important;
}

.cgas-option-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
}
.cgas-option-card,
.cgas-size-card,
.cgas-effect-card,
.cgas-design-type-card{
  border:1px solid var(--cgas5-line)!important;
  border-radius:11px!important;
  background:#fff!important;
  color:var(--cgas5-ink)!important;
  box-shadow:0 1px 2px rgba(16,24,40,.03)!important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease!important;
}
.cgas-option-card{
  min-height:90px!important;
  padding:12px 9px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
.cgas-option-card:hover,
.cgas-size-card:hover,
.cgas-effect-card:hover,
.cgas-design-type-card:hover{
  border-color:#9db9ff!important;
  box-shadow:0 5px 16px rgba(37,99,235,.09)!important;
  transform:translateY(-1px)!important;
}
.cgas-option-card.active,
.cgas-size-card.active,
.cgas-effect-card.active,
.cgas-design-type-card.active{
  border-color:var(--cgas5-blue)!important;
  background:var(--cgas5-blue-soft)!important;
  box-shadow:0 0 0 2px rgba(37,99,235,.10)!important;
}
.cgas-option-card-title{
  color:var(--cgas5-ink)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.3!important;
}
.cgas-option-card-desc{
  margin-top:5px!important;
  color:var(--cgas5-muted)!important;
  font-size:10px!important;
  line-height:1.35!important;
}
.cgas-option-card-price{
  margin-top:6px!important;
  color:var(--cgas5-blue)!important;
  font-size:11px!important;
  font-weight:800!important;
}
.cgas-size-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
}
.cgas-size-card{
  min-height:61px!important;
  margin:0!important;
  padding:10px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:12px!important;
  font-weight:800!important;
}
.cgas-color-grid{gap:10px!important}
.cgas-color-swatch{
  width:31px!important;
  height:31px!important;
  border:2px solid #fff!important;
  box-shadow:0 0 0 1px #cfd4dc!important;
}
.cgas-color-swatch.active{
  border-color:#fff!important;
  box-shadow:0 0 0 3px var(--cgas5-blue)!important;
  transform:scale(1.04)!important;
}

.cgas-price-summary{
  margin:0!important;
  padding:20px 22px!important;
  border-top:1px solid var(--cgas5-line)!important;
  background:#f8fafc!important;
}
.cgas-price-row{
  padding:7px 0!important;
  color:#475467!important;
  font-size:13px!important;
  font-weight:600!important;
}
.cgas-price-total{
  margin-top:7px!important;
  padding-top:13px!important;
  border-top:1px solid #dfe3e8!important;
  color:var(--cgas5-ink)!important;
  font-size:18px!important;
  font-weight:800!important;
}
.cgas-actions{
  padding:0 22px 22px!important;
  background:#f8fafc!important;
}
#cgas-add-to-cart,
.cgas-add-to-cart,
.cgas-btn-primary{
  width:100%!important;
  min-height:52px!important;
  border:0!important;
  border-radius:9px!important;
  background:#111827!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.01em!important;
  box-shadow:0 7px 18px rgba(17,24,39,.18)!important;
}
#cgas-add-to-cart:hover,
.cgas-add-to-cart:hover,
.cgas-btn-primary:hover{
  background:#000!important;
  transform:translateY(-1px)!important;
}

.cgas-uv-section{
  background:#fffbeb!important;
}

@media(max-width:1180px){
  .cgas-layout{grid-template-columns:minmax(0,1.35fr) minmax(360px,.9fr)!important}
  .cgas-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
  body.cgas-embedded-product-designer .cgas-wrap{padding:0 14px 40px!important}
  .cgas-layout{grid-template-columns:1fr!important}
  .cgas-preview-panel{position:relative!important;top:auto!important}
  .cgas-preview-stage{height:480px!important;min-height:420px!important}
  .cgas-option-grid,.cgas-size-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:768px){
  #cgas-designer .cgas-options-panel .cgas-section-title{
    font-size:17px!important;
    letter-spacing:0!important;
    text-transform:none!important;
  }
  body.cgas-embedded-product-designer .cgas-options-panel .cgas-section>.cgas-section-title::before{
    width:27px!important;height:27px!important;flex-basis:27px!important;font-size:14px!important
  }
  body.cgas-embedded-product-designer .cgas-options-panel form{padding-left:12px!important;padding-right:12px!important}
  body.cgas-embedded-product-designer .cgas-options-panel .cgas-section,
  body.cgas-embedded-product-designer .cgas-price-summary,
  body.cgas-embedded-product-designer .cgas-actions{
    border-radius:13px!important;
    padding:17px!important;
  }
  .cgas-option-grid,.cgas-size-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:480px){
  .cgas-option-grid,.cgas-size-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cgas-option-card{min-height:84px!important}
}

/* v5.0.3 — single-face neon renderer.
   Avoid the doubled/outlined LED appearance caused by tracing both glyph edges. */
#cgas-sign-text.cgas-v4-engine-active > .cgas-text-layer {
  display: none !important;
}
#cgas-sign-text.cgas-v4-engine-active .cgas-v4-neon-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  filter: none !important;
}
#cgas-sign-text.cgas-v4-engine-active .cgas-v4-neon-svg text {
  -webkit-text-fill-color: initial !important;
  -webkit-text-stroke: 0 transparent !important;
  text-shadow: none !important;
  filter: none;
}
#cgas-sign-text.cgas-v4-engine-active .cgas-v4-neon-svg .cgas-v4-glow-near {
  filter: url(#cgas-v4-glow-near-filter) !important;
}
#cgas-sign-text.cgas-v4-engine-active .cgas-v4-neon-svg .cgas-v4-glow-far {
  filter: url(#cgas-v4-glow-far-filter) !important;
}


/* v5.0.4 — fixed-width flexible-neon font policy */
.cgas-font-neon-note{margin:10px 0 8px;padding:9px 11px;border-left:3px solid #2563eb;background:#f4f7fb;color:#475569;font:500 12px/1.45 Inter,Arial,sans-serif!important;}
.cgas-font-swatch.cgas-channel-only-font{position:relative;opacity:.45;cursor:not-allowed!important;background:#f8fafc!important;}
.cgas-font-swatch.cgas-channel-only-font:hover{border-color:#d7dce5!important;box-shadow:none!important;transform:none!important;}
.cgas-font-type-badge{display:block;margin-top:2px;font:700 8px/1 Inter,Arial,sans-serif!important;letter-spacing:.05em;text-transform:uppercase;color:#64748b;}
.cgas-font-swatch.cgas-neon-safe-font{opacity:1;}