/* public/widget.css - clean designer stylesheet v58 */

:root {
  --cbd-bg: #fbfaf7;
  --cbd-card: rgba(255,255,255,.96);
  --cbd-text: #171412;
  --cbd-muted: #71685f;
  --cbd-line: rgba(20,20,20,.10);
  --cbd-gold: #d6a84a;
}

html,
body {
  overflow-x: hidden;
}

#crystal-designer-app {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: var(--cbd-bg) !important;
  box-sizing: border-box !important;
}

#crystal-designer-app * {
  box-sizing: border-box;
}

#crystal-designer-app .cbd-root {
  width: 100vw !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cbd-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

#crystal-designer-app .cbd-layout {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: 330px minmax(520px, 1fr) 330px !important;
  gap: 0 !important;
  align-items: stretch !important;
}

#crystal-designer-app .cbd-card {
  height: 100vh !important;
  min-height: 680px !important;
  background: var(--cbd-card) !important;
  border: 0 !important;
  border-right: 1px solid rgba(20,20,20,.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px !important;
  overflow: hidden !important;
}

#crystal-designer-app .cbd-card h2 {
  font-size: 30px !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
  margin: 0 0 14px !important;
  color: #111 !important;
  font-weight: 900 !important;
}

#crystal-designer-app .cbd-left-title {
  color: #a39b91 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  margin: 4px 0 12px !important;
}

#crystal-designer-app .cbd-search-wrap {
  margin: 0 0 10px !important;
}

#crystal-designer-app .cbd-search {
  width: 100% !important;
  border: 1px solid rgba(20,20,20,.12) !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 10px 11px !important;
  font-size: 13px !important;
  outline: none !important;
}

#crystal-designer-app .cbd-search:focus {
  border-color: #111 !important;
  box-shadow: 0 0 0 3px rgba(17,17,17,.07) !important;
}

#crystal-designer-app .cbd-tabs {
  display: flex !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  margin-bottom: 10px !important;
}

#crystal-designer-app .cbd-tabs-scroll {
  max-height: 92px !important;
  overflow-y: auto !important;
  align-content: flex-start !important;
  padding-right: 2px !important;
}

#crystal-designer-app .cbd-tab {
  appearance: none !important;
  border: 1px solid rgba(20,20,20,.12) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #151515 !important;
  padding: 7px 9px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

#crystal-designer-app .cbd-tab.active,
#crystal-designer-app .cbd-tab:hover {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

#crystal-designer-app .cbd-gems-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-height: calc(100vh - 142px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 3px 8px 0 !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  min-height: 108px !important;
  border: 1px solid rgba(20,20,20,.08) !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 8px 5px !important;
  text-align: center !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(20,20,20,.18) !important;
  box-shadow: 0 8px 18px rgba(20,20,20,.10) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem.is-limit {
  opacity: .50 !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem-img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 999px !important;
  flex: none !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem-meta {
  width: 100% !important;
  min-width: 0 !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem b {
  display: block !important;
  max-width: 100% !important;
  font-size: 11.5px !important;
  line-height: 1.12 !important;
  color: #111 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem small {
  display: block !important;
  margin-top: 2px !important;
  font-size: 10px !important;
  color: #777 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#crystal-designer-app .cbd-empty {
  grid-column: 1 / -1 !important;
  border: 1px dashed rgba(20,20,20,.15) !important;
  border-radius: 12px !important;
  padding: 16px 10px !important;
  text-align: center !important;
  color: #777 !important;
  background: rgba(255,255,255,.65) !important;
  font-size: 12px !important;
}

.cbd-floating-tooltip {
  position: fixed !important;
  z-index: 2147483647 !important;
  width: 210px !important;
  max-width: min(210px, 70vw) !important;
  pointer-events: none !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(20,20,20,.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.18) !important;
  padding: 12px !important;
  text-align: left !important;
}

.cbd-floating-tooltip b {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
  color: #111 !important;
}

.cbd-floating-tooltip em {
  display: block !important;
  font-style: normal !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #666 !important;
  margin-bottom: 8px !important;
}

.cbd-floating-tooltip img,
.cbd-floating-tooltip video {
  width: 100% !important;
  max-height: 110px !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #f6f2ea !important;
}

.cbd-toast {
  position: fixed !important;
  left: 50% !important;
  top: 26px !important;
  transform: translate(-50%, -18px) scale(.98) !important;
  z-index: 2147483647 !important;
  min-width: 280px !important;
  max-width: min(440px, calc(100vw - 32px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: var(--cbd-toast-bg, rgba(17,17,17,.94)) !important;
  color: var(--cbd-toast-text, #fff) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.24) !important;
  padding: 14px 16px !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.cbd-toast.show {
  opacity: 1 !important;
  transform: translate(-50%, 0) scale(1) !important;
}

.cbd-toast span {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--cbd-toast-text, rgba(255,255,255,.92)) !important;
}

.cbd-toast.is-error {
  background: rgba(160, 38, 38, .96) !important;
}

#crystal-designer-app .cbd-preview {
  position: relative !important;
  height: 100vh !important;
  min-height: 680px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 45%, #ffffff 0%, #fffdf8 42%, #f3eadb 100%) !important;
}

#crystal-designer-app .cbd-preview::before {
  content: "DESIGN PREVIEW" !important;
  position: absolute !important;
  top: 22px !important;
  left: 26px !important;
  letter-spacing: .22em !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: rgba(20,20,20,.38) !important;
  z-index: 2 !important;
}

#crystal-designer-app .cbd-preview svg {
  width: min(84vh, 780px, 100%) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-width: none !important;
  overflow: visible !important;
  touch-action: none !important;
}

#crystal-designer-app .cbd-preview image,
#crystal-designer-app .cbd-preview img {

  user-select: none !important;
  -webkit-user-drag: none !important;
}

#crystal-designer-app .cbd-preview-bead {
  cursor: grab !important;
  pointer-events: all !important;
  transform-box: fill-box !important;
  transform-origin: center !important;

  user-select: none !important;
  -webkit-user-drag: none !important;
  will-change: transform, opacity !important;
}

#crystal-designer-app .cbd-preview-bead:hover {

}

#crystal-designer-app.cbd-drag-active .cbd-preview-bead.is-drag-source {
  opacity: .04 !important;

}

#crystal-designer-app.cbd-drag-active .cbd-preview-bead.is-drag-target {
  opacity: 1 !important;

}

#crystal-designer-app .cbd-preview-bead.is-rolling {

  will-change: transform !important;
}

#crystal-designer-app .cbd-preview-bead.is-dropped {
  opacity: 1 !important;

  will-change: transform, filter !important;
}

.cbd-drag-ghost {
  position: fixed !important;
  z-index: 2147483647 !important;
  width: 74px !important;
  height: 74px !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(1.12) !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter:
    drop-shadow(0 18px 24px rgba(0,0,0,.32))
    drop-shadow(0 0 12px rgba(214,168,74,.28)) !important;
}

.cbd-drag-ghost img,
.cbd-drag-ghost span {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 999px !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

#crystal-designer-app .cbd-summary-panel {
  overflow-y: auto !important;
}

#crystal-designer-app .cbd-field {
  margin-bottom: 9px !important;
}

#crystal-designer-app .cbd-field label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-bottom: 5px !important;
  color: #171717 !important;
}

#crystal-designer-app .cbd-field input {
  width: 100% !important;
  border: 1px solid rgba(20,20,20,.12) !important;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  outline: none !important;
}

#crystal-designer-app .cbd-size-card {
  background: linear-gradient(135deg, #171717, #3b342d) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 14px !important;
  margin: 10px 0 12px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.16) !important;
}

#crystal-designer-app .cbd-size-card span {
  display: block !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.68) !important;
  font-weight: 900 !important;
  margin-bottom: 8px !important;
}

#crystal-designer-app .cbd-size-card strong {
  display: block !important;
  font-size: 36px !important;
  line-height: .95 !important;
  letter-spacing: -.05em !important;
  margin-bottom: 8px !important;
}

#crystal-designer-app .cbd-size-card small {
  display: block !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  margin-top: 4px !important;
}

#crystal-designer-app .cbd-selected-title {
  margin: 10px 0 8px !important;
  color: #555 !important;
  font-size: 13px !important;
}

#crystal-designer-app .cbd-list {
  list-style: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  max-height: calc(100vh - 535px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#crystal-designer-app .cbd-list li {
  border-bottom: 1px solid rgba(20,20,20,.08) !important;
  padding: 9px 0 !important;
  font-size: 12px !important;
}

#crystal-designer-app .cbd-list li.cbd-selected-group {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
}

#crystal-designer-app .cbd-selected-main {
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
}

#crystal-designer-app .cbd-selected-img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  border-radius: 999px !important;
  display: block !important;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.18)) !important;
}

#crystal-designer-app .cbd-selected-main b {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: #111 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#crystal-designer-app .cbd-selected-main b em {
  font-style: normal !important;
  font-weight: 900 !important;
  color: #d09522 !important;
  margin-left: 4px !important;
}

#crystal-designer-app .cbd-selected-main small {
  display: block !important;
  margin-top: 2px !important;
  font-size: 10px !important;
  color: #777 !important;
}

#crystal-designer-app .cbd-selected-actions {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}

#crystal-designer-app .cbd-mini-btn {
  min-width: 28px !important;
  height: 26px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(20,20,20,.12) !important;
  background: #fff !important;
  color: #111 !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 7px !important;
}

#crystal-designer-app .cbd-mini-btn:hover {
  background: #111 !important;
  color: #fff !important;
}

#crystal-designer-app .cbd-mini-btn.danger {
  color: #b42318 !important;
}

#crystal-designer-app .cbd-mini-btn.danger:hover {
  background: #b42318 !important;
  border-color: #b42318 !important;
  color: #fff !important;
}

#crystal-designer-app .cbd-price-card {
  background: linear-gradient(135deg, #fff7e6, #fff1d6) !important;
  border: 1px solid #f0d292 !important;
  border-radius: 20px !important;
  padding: 14px !important;
  margin: 12px 0 !important;
}

#crystal-designer-app .cbd-price-card p,
#crystal-designer-app .cbd-price-card h3 {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  align-items: baseline !important;
  margin: 0 0 8px !important;
}

#crystal-designer-app .cbd-price-card p span {
  color: #6b6258 !important;
  font-size: 12px !important;
}

#crystal-designer-app .cbd-price-card h3 {
  margin: 12px 0 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(214,168,74,.35) !important;
}

#crystal-designer-app .cbd-price-card h3 span {
  font-size: 13px !important;
  color: #6b6258 !important;
}

#crystal-designer-app .cbd-price-card h3 b {
  font-size: 26px !important;
  letter-spacing: -.04em !important;
}

#crystal-designer-app .cbd-message {
  border: 0 !important;
  border-radius: 14px !important;
  background: #ecf8ef !important;
  color: #218348 !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  margin: 10px 0 !important;
}

#crystal-designer-app .cbd-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

#crystal-designer-app .cbd-actions #cbd-cart {
  grid-column: 1 / -1 !important;
}

#crystal-designer-app .cbd-btn {
  appearance: none !important;
  border: 1px solid #111 !important;
  background: #111 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 11px 14px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
}

#crystal-designer-app .cbd-btn.secondary {
  background: #f1eadf !important;
  border-color: #f1eadf !important;
  color: #111 !important;
}

#crystal-designer-app .cbd-btn:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

#crystal-designer-app .cbd-share {
  display: none !important;
}

#crystal-designer-app .cbd-tabs-scroll::-webkit-scrollbar,
#crystal-designer-app .cbd-gems-grid::-webkit-scrollbar,
#crystal-designer-app .cbd-summary-panel::-webkit-scrollbar,
#crystal-designer-app .cbd-list::-webkit-scrollbar {
  width: 6px !important;
}

#crystal-designer-app .cbd-tabs-scroll::-webkit-scrollbar-thumb,
#crystal-designer-app .cbd-gems-grid::-webkit-scrollbar-thumb,
#crystal-designer-app .cbd-summary-panel::-webkit-scrollbar-thumb,
#crystal-designer-app .cbd-list::-webkit-scrollbar-thumb {
  background: rgba(20,20,20,.20) !important;
  border-radius: 999px !important;
}

@media (max-width: 1180px) {
  #crystal-designer-app .cbd-layout {
    grid-template-columns: 330px 1fr !important;
  }

  #crystal-designer-app .cbd-summary-panel {
    grid-column: 1 / -1 !important;
    height: auto !important;
    min-height: auto !important;
  }
}

@media (max-width: 860px) {
  #crystal-designer-app .cbd-layout {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }

  #crystal-designer-app .cbd-card,
  #crystal-designer-app .cbd-preview {
    height: auto !important;
    min-height: auto !important;
  }

  #crystal-designer-app .cbd-preview {
    order: -1 !important;
    min-height: 520px !important;
  }

  #crystal-designer-app .cbd-preview svg {
    width: min(92vw, 560px) !important;
  }

  #crystal-designer-app .cbd-gems-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-height: 420px !important;
  }

  #crystal-designer-app .cbd-actions {
    grid-template-columns: 1fr !important;
  }

  #crystal-designer-app .cbd-actions #cbd-cart {
    grid-column: auto !important;
  }
}

@media (max-width: 520px) {
  #crystal-designer-app .cbd-gems-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* ===== Designer topbar + loading polish v73 =====
   Current stable baseline only. Topbar is in real render(), not loading. */

#crystal-designer-app .cbd-topbar {
  width: 100% !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 8px 18px !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid rgba(20,20,20,.08) !important;
  box-shadow: 0 1px 0 rgba(20,20,20,.02) !important;
  color: var(--cbd-text) !important;
  position: relative !important;
  z-index: 50 !important;
}

#crystal-designer-app .cbd-topbar-left,
#crystal-designer-app .cbd-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#crystal-designer-app .cbd-topbar-exit {
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #171717 !important;
  text-decoration: none !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

#crystal-designer-app .cbd-topbar-exit:hover {
  background: rgba(20,20,20,.06) !important;
}

#crystal-designer-app .cbd-topbar-title {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color: #171717 !important;
  white-space: nowrap !important;
}

#crystal-designer-app .cbd-topbar-right {
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(20,20,20,.56) !important;
}

#crystal-designer-app .cbd-topbar-right a {
  color: rgba(20,20,20,.82) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(20,20,20,.30) !important;
  line-height: 1.2 !important;
}

#crystal-designer-app .cbd-topbar-right a:hover {
  color: #111 !important;
  border-bottom-color: #111 !important;
}

#crystal-designer-app .cbd-topbar-guide {
  border: 1px solid rgba(20,20,20,.08) !important;
  border-bottom: 1px solid rgba(20,20,20,.08) !important;
  background: #f4f7fb !important;
  color: #4f5d70 !important;
  border-radius: 999px !important;
  padding: 6px 11px !important;
  box-shadow: 0 6px 16px rgba(20,20,20,.04) !important;
}

#crystal-designer-app .cbd-topbar-mode {
  color: #c0783d !important;
  font-weight: 900 !important;
}

#crystal-designer-app .cbd-topbar-divider {
  color: rgba(20,20,20,.38) !important;
  margin: 0 -4px !important;
}

#crystal-designer-app .cbd-topbar + .cbd-layout {
  min-height: calc(100vh - 47px) !important;
}

#crystal-designer-app .cbd-topbar + .cbd-layout .cbd-card,
#crystal-designer-app .cbd-topbar + .cbd-layout .cbd-preview {
  height: calc(100vh - 47px) !important;
  min-height: 640px !important;
}

#crystal-designer-app .cbd-loading-root {
  background: var(--cbd-bg) !important;
}

#crystal-designer-app .cbd-loading-root,
#crystal-designer-app .cbd-loading-root * {
  user-select: none !important;
}

#crystal-designer-app .cbd-loading-card,
#crystal-designer-app .cbd-loading-preview {
  position: relative !important;
  overflow: hidden !important;
}

#crystal-designer-app .cbd-loading-card::after,
#crystal-designer-app .cbd-loading-preview::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.44) 46%, transparent 72%) !important;
  transform: translateX(-120%) !important;
  animation: cbd-loading-shimmer-v73 1.55s ease-in-out infinite !important;
}

#crystal-designer-app .cbd-loading-search,
#crystal-designer-app .cbd-loading-tabs span,
#crystal-designer-app .cbd-loading-orb,
#crystal-designer-app .cbd-loading-line,
#crystal-designer-app .cbd-loading-title,
#crystal-designer-app .cbd-loading-field,
#crystal-designer-app .cbd-loading-size,
#crystal-designer-app .cbd-loading-list span,
#crystal-designer-app .cbd-loading-price span,
#crystal-designer-app .cbd-loading-price strong,
#crystal-designer-app .cbd-loading-actions span {
  display: block !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(20,20,20,.06), rgba(20,20,20,.12), rgba(20,20,20,.06)) !important;
  background-size: 240% 100% !important;
  animation: cbd-loading-pulse-v73 1.35s ease-in-out infinite !important;
}

#crystal-designer-app .cbd-loading-search {
  height: 38px !important;
  border-radius: 12px !important;
  margin-bottom: 11px !important;
}

#crystal-designer-app .cbd-loading-tabs {
  display: flex !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  margin-bottom: 10px !important;
}

#crystal-designer-app .cbd-loading-tabs span {
  width: 68px !important;
  height: 28px !important;
}

#crystal-designer-app .cbd-loading-gems {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-height: calc(100vh - 142px) !important;
  overflow: hidden !important;
}

#crystal-designer-app .cbd-loading-gem {
  min-height: 108px !important;
  border: 1px solid rgba(20,20,20,.07) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.72) !important;
  padding: 10px 7px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#crystal-designer-app .cbd-loading-orb {
  width: 42px !important;
  height: 42px !important;
}

#crystal-designer-app .cbd-loading-line {
  width: 76% !important;
  height: 9px !important;
  border-radius: 8px !important;
}

#crystal-designer-app .cbd-loading-line.short {
  width: 58% !important;
}

#crystal-designer-app .cbd-loading-line.tiny {
  width: 46% !important;
  height: 7px !important;
  opacity: .84 !important;
}

#crystal-designer-app .cbd-loading-ring {
  position: relative !important;
  width: min(58vh, 420px) !important;
  height: min(58vh, 420px) !important;
  border: 2px solid rgba(214,168,74,.28) !important;
  border-radius: 999px !important;
  animation: cbd-loading-spin-v73 2.4s linear infinite !important;
  box-shadow:
    inset 0 0 0 10px rgba(255,255,255,.36),
    0 22px 70px rgba(20,20,20,.08) !important;
}

#crystal-designer-app .cbd-loading-ring span {
  position: absolute !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 30% 25%, #fff 0%, rgba(255,255,255,.75) 24%, rgba(214,168,74,.76) 62%, rgba(135,96,31,.70) 100%) !important;
  box-shadow: 0 10px 18px rgba(20,20,20,.18) !important;
}

#crystal-designer-app .cbd-loading-ring span:nth-child(1) { left: 50% !important; top: -12px !important; transform: translateX(-50%) !important; }
#crystal-designer-app .cbd-loading-ring span:nth-child(2) { right: 10% !important; top: 12% !important; }
#crystal-designer-app .cbd-loading-ring span:nth-child(3) { right: -12px !important; top: 50% !important; transform: translateY(-50%) !important; }
#crystal-designer-app .cbd-loading-ring span:nth-child(4) { right: 12% !important; bottom: 10% !important; }
#crystal-designer-app .cbd-loading-ring span:nth-child(5) { left: 50% !important; bottom: -12px !important; transform: translateX(-50%) !important; }
#crystal-designer-app .cbd-loading-ring span:nth-child(6) { left: -12px !important; top: 50% !important; transform: translateY(-50%) !important; }

#crystal-designer-app .cbd-loading-center {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(280px, 72%) !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  z-index: 3 !important;
}

#crystal-designer-app .cbd-loading-center b {
  display: block !important;
  color: #171717 !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 8px !important;
}

#crystal-designer-app .cbd-loading-center small {
  display: block !important;
  color: rgba(20,20,20,.55) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#crystal-designer-app .cbd-loading-title {
  width: 70% !important;
  height: 30px !important;
  border-radius: 12px !important;
  margin: 4px 0 18px !important;
}

#crystal-designer-app .cbd-loading-field {
  width: 100% !important;
  height: 42px !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
}

#crystal-designer-app .cbd-loading-size {
  height: 132px !important;
  border-radius: 20px !important;
  margin: 10px 0 12px !important;
  background: linear-gradient(135deg, rgba(23,23,23,.88), rgba(59,52,45,.78)) !important;
}

#crystal-designer-app .cbd-loading-list {
  display: grid !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}

#crystal-designer-app .cbd-loading-list span {
  height: 18px !important;
}

#crystal-designer-app .cbd-loading-price {
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #fff7e6, #fff1d6) !important;
  border: 1px solid #f0d292 !important;
  margin: 12px 0 !important;
}

#crystal-designer-app .cbd-loading-price span {
  height: 12px !important;
}

#crystal-designer-app .cbd-loading-price strong {
  width: 86% !important;
  height: 25px !important;
  border-radius: 10px !important;
}

#crystal-designer-app .cbd-loading-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

#crystal-designer-app .cbd-loading-actions span {
  height: 40px !important;
}

#crystal-designer-app .cbd-loading-actions span:nth-child(3) {
  grid-column: 1 / -1 !important;
}

#crystal-designer-app .cbd-loading-error {
  width: min(520px, calc(100vw - 32px)) !important;
  margin: 12vh auto !important;
  background: #fff !important;
  border: 1px solid rgba(20,20,20,.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 50px rgba(20,20,20,.10) !important;
  padding: 26px !important;
  text-align: center !important;
}

#crystal-designer-app .cbd-loading-error b {
  display: block !important;
  font-size: 22px !important;
  margin-bottom: 8px !important;
  color: #111 !important;
}

#crystal-designer-app .cbd-loading-error p {
  color: #666 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 0 18px !important;
}

@keyframes cbd-loading-shimmer-v73 {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes cbd-loading-pulse-v73 {
  0%, 100% { background-position: 0% 50%; opacity: .74; }
  50% { background-position: 100% 50%; opacity: 1; }
}

@keyframes cbd-loading-spin-v73 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1180px) {
  #crystal-designer-app .cbd-topbar + .cbd-layout .cbd-card,
  #crystal-designer-app .cbd-topbar + .cbd-layout .cbd-preview {
    height: auto !important;
  }
}

@media (max-width: 720px) {
  #crystal-designer-app .cbd-topbar {
    align-items: flex-start !important;
    padding: 8px 12px !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    font-size: 13px !important;
  }

  #crystal-designer-app .cbd-topbar-right {
    gap: 7px !important;
    font-size: 11px !important;
  }

  #crystal-designer-app .cbd-topbar-guide {
    padding: 6px 10px !important;
  }

  #crystal-designer-app .cbd-loading-ring {
    width: min(76vw, 360px) !important;
    height: min(76vw, 360px) !important;
  }
}

/* ===== ASTRIS Designer Style + Cart Loading v3 =====
   Based on user's latest uploaded baseline.
   Goals:
   1) Calm left bead card click/hover motion.
   2) Add full-screen add-to-cart loading before redirect.
   3) Make the designer visually consistent with the moonlight loading style.
*/

#crystal-designer-app {
  --cbd-bg: #07111f !important;
  --cbd-card: rgba(255,255,255,.085) !important;
  --cbd-text: #fff7e8 !important;
  --cbd-muted: rgba(255,247,232,.68) !important;
  --cbd-line: rgba(255,255,255,.14) !important;
  --cbd-gold: #f6dca8 !important;
  --cbd-night-1: #07111f;
  --cbd-night-2: #10243d;
  --cbd-night-3: #1c3552;
  --cbd-moon: #f6dca8;
  --cbd-moon-deep: #d8aa4f;
  --cbd-cream: #fbfaf7;
  --cbd-glass: rgba(255,255,255,.09);
  --cbd-glass-strong: rgba(255,255,255,.14);
  --cbd-glass-border: rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 50% 28%, rgba(246,220,170,.18), transparent 32%),
    radial-gradient(circle at 18% 78%, rgba(130,166,255,.13), transparent 28%),
    linear-gradient(135deg, #07111f 0%, #10243d 52%, #f8efe2 145%) !important;
}

#crystal-designer-app .cbd-root {
  color: var(--cbd-text) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(246,220,170,.13), transparent 32%),
    radial-gradient(circle at 16% 86%, rgba(130,166,255,.10), transparent 30%),
    linear-gradient(135deg, rgba(7,17,31,.98), rgba(16,36,61,.98) 58%, rgba(40,53,70,.94)) !important;
}

#crystal-designer-app .cbd-topbar {
  background: rgba(7,17,31,.72) !important;
  border-bottom: 1px solid rgba(246,220,170,.18) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.18) !important;
  color: var(--cbd-text) !important;
}

#crystal-designer-app .cbd-topbar-title,
#crystal-designer-app .cbd-topbar-exit,
#crystal-designer-app .cbd-topbar-right a {
  color: var(--cbd-text) !important;
}

#crystal-designer-app .cbd-topbar-right {
  color: rgba(255,247,232,.62) !important;
}

#crystal-designer-app .cbd-topbar-guide {
  background: rgba(246,220,170,.14) !important;
  border-color: rgba(246,220,170,.24) !important;
  color: var(--cbd-moon) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
}

#crystal-designer-app .cbd-topbar-mode {
  color: var(--cbd-moon) !important;
}

#crystal-designer-app .cbd-topbar-exit:hover,
#crystal-designer-app .cbd-topbar-right a:hover {
  background: rgba(246,220,170,.12) !important;
  color: #fff !important;
  border-bottom-color: var(--cbd-moon) !important;
}

#crystal-designer-app .cbd-card {
  background: rgba(255,255,255,.085) !important;
  border-right: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(18px) !important;
}

#crystal-designer-app .cbd-card h2,
#crystal-designer-app .cbd-selected-main b,
#crystal-designer-app .cbd-field label {
  color: #fff7e8 !important;
}

#crystal-designer-app .cbd-left-title,
#crystal-designer-app .cbd-selected-title {
  color: rgba(246,220,170,.72) !important;
}

#crystal-designer-app .cbd-search,
#crystal-designer-app .cbd-field input {
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff7e8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#crystal-designer-app .cbd-search::placeholder,
#crystal-designer-app .cbd-field input::placeholder {
  color: rgba(255,247,232,.44) !important;
}

#crystal-designer-app .cbd-search:focus,
#crystal-designer-app .cbd-field input:focus {
  border-color: rgba(246,220,170,.66) !important;
  box-shadow:
    0 0 0 3px rgba(246,220,170,.12),
    0 12px 28px rgba(0,0,0,.16) !important;
}

#crystal-designer-app .cbd-tab {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,247,232,.78) !important;
}

#crystal-designer-app .cbd-tab.active,
#crystal-designer-app .cbd-tab:hover {
  background: linear-gradient(135deg, rgba(246,220,170,.95), rgba(216,170,79,.95)) !important;
  border-color: rgba(246,220,170,.78) !important;
  color: #07111f !important;
  box-shadow: 0 10px 24px rgba(216,170,79,.18) !important;
}

/* Calm left bead card movement. Previous v2 hover was too strong. */
#crystal-designer-app .cbd-gems-grid .cbd-gem {
  background: rgba(255,255,255,.105) !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.08) !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    opacity .18s ease !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover {
  transform: translateY(-2px) scale(1.006) !important;
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(246,220,170,.34) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,.14),
    0 0 0 1px rgba(246,220,170,.08) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:active {
  transform: translateY(0) scale(.992) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem::after {
  opacity: .38 !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover .cbd-gem-img {
  transform: rotate(-2deg) scale(1.045) !important;
  filter:
    drop-shadow(0 7px 9px rgba(0,0,0,.20))
    drop-shadow(0 0 9px rgba(246,220,170,.22)) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem b {
  color: #fff7e8 !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem small,
#crystal-designer-app .cbd-selected-main small {
  color: rgba(255,247,232,.56) !important;
}

#crystal-designer-app .cbd-empty {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,247,232,.62) !important;
}

#crystal-designer-app .cbd-preview {
  background:
    radial-gradient(circle at 50% 42%, rgba(246,220,170,.28), transparent 30%),
    radial-gradient(circle at 42% 55%, rgba(255,255,255,.14), transparent 25%),
    radial-gradient(circle at 16% 82%, rgba(130,166,255,.13), transparent 32%),
    linear-gradient(135deg, #07111f 0%, #10243d 58%, #f8efe2 150%) !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
}

#crystal-designer-app .cbd-preview::before {
  color: rgba(246,220,170,.58) !important;
}

#crystal-designer-app .cbd-preview::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(246,220,170,.30), rgba(246,220,170,.12) 36%, transparent 72%) !important;

}

#crystal-designer-app .cbd-preview-svg > circle:first-of-type,
#crystal-designer-app .cbd-preview svg > circle:first-of-type {
  stroke: rgba(246,220,170,.52) !important;

}

#crystal-designer-app .cbd-preview text {
  fill: rgba(255,247,232,.70) !important;
}

#crystal-designer-app .cbd-size-card {
  background:
    radial-gradient(circle at 82% 20%, rgba(246,220,170,.22), transparent 34%),
    linear-gradient(135deg, rgba(7,17,31,.96), rgba(16,36,61,.92)) !important;
  border: 1px solid rgba(246,220,170,.18) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
}

#crystal-designer-app .cbd-price-card {
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.25), transparent 26%),
    linear-gradient(135deg, rgba(246,220,170,.96), rgba(216,170,79,.92)) !important;
  border-color: rgba(246,220,170,.58) !important;
  color: #07111f !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.18) !important;
}

#crystal-designer-app .cbd-price-card p span,
#crystal-designer-app .cbd-price-card h3 span,
#crystal-designer-app .cbd-price-card h3 b,
#crystal-designer-app .cbd-price-card b {
  color: #07111f !important;
}

#crystal-designer-app .cbd-list li {
  border-bottom-color: rgba(255,255,255,.12) !important;
}

#crystal-designer-app .cbd-list li.cbd-selected-group:hover {
  background: rgba(246,220,170,.10) !important;
  box-shadow: inset 3px 0 0 rgba(246,220,170,.44) !important;
}

#crystal-designer-app .cbd-mini-btn {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff7e8 !important;
}

#crystal-designer-app .cbd-mini-btn:hover {
  background: rgba(246,220,170,.95) !important;
  border-color: rgba(246,220,170,.95) !important;
  color: #07111f !important;
}

#crystal-designer-app .cbd-btn {
  border-color: rgba(246,220,170,.90) !important;
  background: linear-gradient(135deg, #f6dca8, #d8aa4f) !important;
  color: #07111f !important;
  box-shadow: 0 14px 30px rgba(216,170,79,.20) !important;
}

#crystal-designer-app .cbd-btn.secondary {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff7e8 !important;
}

#crystal-designer-app .cbd-message {
  background: rgba(246,220,170,.14) !important;
  color: #fff7e8 !important;
  border: 1px solid rgba(246,220,170,.20) !important;
}

.cbd-floating-tooltip {
  background: rgba(7,17,31,.94) !important;
  color: #fff7e8 !important;
  border-color: rgba(246,220,170,.18) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.32) !important;
  backdrop-filter: blur(18px) !important;
}

.cbd-floating-tooltip b {
  color: #fff7e8 !important;
}

.cbd-floating-tooltip em {
  color: rgba(255,247,232,.66) !important;
}

.cbd-floating-tooltip img,
.cbd-floating-tooltip video {
  background: rgba(255,255,255,.08) !important;
}

#crystal-designer-app .cbd-tabs-scroll::-webkit-scrollbar-thumb,
#crystal-designer-app .cbd-gems-grid::-webkit-scrollbar-thumb,
#crystal-designer-app .cbd-summary-panel::-webkit-scrollbar-thumb,
#crystal-designer-app .cbd-list::-webkit-scrollbar-thumb {
  background: rgba(246,220,170,.34) !important;
}

/* Full-screen loading after Confirm Design, before confirmation page opens.
   p2bm-v1: premium Moonsyl confirmation loading UI with orbiting beads. */
html.cbd-cart-loading-lock,
html.cbd-cart-loading-lock body {
  overflow: hidden !important;
}

.cbd-cart-loading-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(248,245,239,.10), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(199,167,108,.16), transparent 26%),
    radial-gradient(circle at 14% 84%, rgba(184,199,216,.13), transparent 30%),
    linear-gradient(145deg, #07111f 0%, #0b1829 48%, #101820 100%) !important;
  color: #f8f5ef !important;
  transition: opacity .24s ease, visibility .24s ease !important;
}

.cbd-cart-loading-overlay::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.020) 1px, transparent 1px) !important;
  background-size: 74px 74px !important;
  mask-image: radial-gradient(circle at 50% 48%, #000 0%, transparent 78%) !important;
  opacity: .48 !important;
}

.cbd-cart-loading-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.cbd-cart-loading-overlay.hide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.cbd-cart-loading-card {
  position: relative !important;
  width: min(460px, calc(100vw - 34px)) !important;
  min-height: 456px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 34px 32px 30px !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,245,239,.88)) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.34), 0 0 0 1px rgba(199,167,108,.10), inset 0 1px 0 rgba(255,255,255,.95) !important;
  color: #07111f !important;
  text-align: center !important;
  overflow: hidden !important;
}

.cbd-cart-loading-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 50% 18%, rgba(199,167,108,.16), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.48), transparent 42%) !important;
}

.cbd-cart-loading-brand {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(199,167,108,.28) !important;
  background: rgba(255,255,255,.72) !important;
  color: rgba(7,17,31,.72) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
}

.cbd-cart-loading-brand::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 35% 35%, #fff4cc 0%, #d6b16a 58%, #a77b2f 100%) !important;
  box-shadow: 0 0 0 4px rgba(199,167,108,.13) !important;
}

.cbd-cart-loading-orbit {
  position: relative !important;
  z-index: 2 !important;
  width: 126px !important;
  height: 126px !important;
  margin: 26px auto 22px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 50% 50%, rgba(199,167,108,.10), transparent 60%) !important;
}

.cbd-cart-loading-orbit::before,
.cbd-cart-loading-orbit::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  border-radius: 999px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.cbd-cart-loading-orbit::before {
  width: 126px !important;
  height: 126px !important;
  border: 1px solid rgba(7,17,31,.06) !important;
  box-shadow: inset 0 0 0 12px rgba(255,255,255,.56), 0 18px 36px rgba(52,36,18,.09) !important;
  background: rgba(255,255,255,.38) !important;
}

.cbd-cart-loading-orbit::after {
  width: 88px !important;
  height: 88px !important;
  border: 1px solid rgba(199,167,108,.20) !important;
}

.cbd-cart-loading-core {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 999px !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle at 34% 28%, #fffefa 0%, #fff6dc 26%, #dcc27f 60%, #b2863d 100%) !important;
  box-shadow: 0 0 26px rgba(199,167,108,.42), 0 14px 28px rgba(52,36,18,.13) !important;
}

.cbd-cart-loading-orbit-ring {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  transform-origin: 50% 50% !important;
}

.cbd-cart-loading-orbit-ring--a {
  animation: cbd-cart-orbit-ring-a-p2bm 3.8s linear infinite !important;
}

.cbd-cart-loading-orbit-ring--b {
  animation: cbd-cart-orbit-ring-b-p2bm 5.4s linear infinite !important;
}

.cbd-cart-loading-orbit-bead {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  border-radius: 999px !important;
  transform-origin: center center !important;
  box-shadow: 0 6px 14px rgba(52,36,18,.12), 0 0 14px rgba(199,167,108,.12) !important;
}

.cbd-cart-loading-orbit-bead--1,
.cbd-cart-loading-orbit-bead--4 {
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #f1f6ff 42%, #d9e1ee 78%, #c8d1dd 100%) !important;
}

.cbd-cart-loading-orbit-bead--2,
.cbd-cart-loading-orbit-bead--6 {
  background: radial-gradient(circle at 34% 28%, #fffef7 0%, #faefc9 34%, #dfc176 74%, #b7883a 100%) !important;
}

.cbd-cart-loading-orbit-bead--3,
.cbd-cart-loading-orbit-bead--5 {
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #efe9ff 36%, #d6c8f0 76%, #c2afd9 100%) !important;
}

.cbd-cart-loading-orbit-bead--1 {
  width: 18px !important; height: 18px !important;
  transform: translate(-50%, -50%) rotate(18deg) translateX(49px) translateY(-4px) !important;
  animation: cbd-cart-orbit-bead-float-a-p2bm 1.9s ease-in-out infinite !important;
}
.cbd-cart-loading-orbit-bead--2 {
  width: 14px !important; height: 14px !important;
  transform: translate(-50%, -50%) rotate(136deg) translateX(38px) translateY(6px) !important;
  animation: cbd-cart-orbit-bead-float-b-p2bm 2.35s ease-in-out infinite -.4s !important;
}
.cbd-cart-loading-orbit-bead--3 {
  width: 11px !important; height: 11px !important;
  transform: translate(-50%, -50%) rotate(258deg) translateX(55px) translateY(2px) !important;
  animation: cbd-cart-orbit-bead-float-c-p2bm 2.1s ease-in-out infinite -.8s !important;
}
.cbd-cart-loading-orbit-bead--4 {
  width: 12px !important; height: 12px !important;
  transform: translate(-50%, -50%) rotate(82deg) translateX(30px) translateY(-2px) !important;
  animation: cbd-cart-orbit-bead-float-b-p2bm 2.2s ease-in-out infinite -.2s !important;
}
.cbd-cart-loading-orbit-bead--5 {
  width: 16px !important; height: 16px !important;
  transform: translate(-50%, -50%) rotate(198deg) translateX(44px) translateY(4px) !important;
  animation: cbd-cart-orbit-bead-float-a-p2bm 2.6s ease-in-out infinite -1s !important;
}
.cbd-cart-loading-orbit-bead--6 {
  width: 9px !important; height: 9px !important;
  transform: translate(-50%, -50%) rotate(314deg) translateX(28px) translateY(1px) !important;
  animation: cbd-cart-orbit-bead-float-c-p2bm 1.8s ease-in-out infinite -.5s !important;
}

.cbd-cart-loading-anchor {
  position: absolute !important;
  left: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
  background: rgba(199,167,108,.84) !important;
  box-shadow: 0 0 0 4px rgba(199,167,108,.10) !important;
}

.cbd-cart-loading-anchor--top { top: 11px !important; }
.cbd-cart-loading-anchor--bottom { bottom: 11px !important; width: 6px !important; height: 6px !important; background: rgba(7,17,31,.20) !important; box-shadow: none !important; }

.cbd-cart-loading-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.cbd-cart-loading-content b {
  display: block !important;
  margin: 0 0 9px !important;
  color: #07111f !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(28px, 4.6vw, 39px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  font-weight: 500 !important;
}

.cbd-cart-loading-content p {
  width: min(330px, 100%) !important;
  margin: 0 auto 22px !important;
  color: rgba(7,17,31,.56) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.cbd-cart-loading-progress-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 0 9px !important;
  color: rgba(7,17,31,.58) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.cbd-cart-loading-progress-top strong {
  color: #8a6128 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.cbd-cart-loading-bar {
  position: relative !important;
  width: 100% !important;
  height: 7px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(7,17,31,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80) !important;
}

.cbd-cart-loading-bar i {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--cbd-cart-loading-progress, 0%) !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #07111f 0%, #8a6a2f 48%, #c7a76c 100%) !important;
  box-shadow: 0 0 16px rgba(199,167,108,.22) !important;
  transition: width .28s ease !important;
}

.cbd-cart-loading-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 15px !important;
}

.cbd-cart-loading-steps span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  border-radius: 999px !important;
  background: rgba(7,17,31,.045) !important;
  color: rgba(7,17,31,.42) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
}

.cbd-cart-loading-steps span i {
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  opacity: .55 !important;
}

.cbd-cart-loading-steps span.is-active {
  background: rgba(199,167,108,.16) !important;
  color: #7a541d !important;
  transform: translateY(-1px) !important;
}

.cbd-cart-loading-steps span.is-done {
  background: rgba(7,17,31,.88) !important;
  color: #fff8ed !important;
}

@keyframes cbd-cart-orbit-ring-a-p2bm {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cbd-cart-orbit-ring-b-p2bm {
  from { transform: rotate(360deg) scale(.94); }
  to { transform: rotate(0deg) scale(1.02); }
}

@keyframes cbd-cart-orbit-bead-float-a-p2bm {
  0%,100% { margin-top: 0; filter: brightness(1); }
  50% { margin-top: -2px; filter: brightness(1.06); }
}

@keyframes cbd-cart-orbit-bead-float-b-p2bm {
  0%,100% { margin-left: 0; transform: inherit; }
  50% { margin-left: 1.5px; }
}

@keyframes cbd-cart-orbit-bead-float-c-p2bm {
  0%,100% { opacity: .92; }
  50% { opacity: 1; }
}

@media (max-width: 760px) {
  .cbd-cart-loading-overlay {
    padding: 14px !important;
    align-items: center !important;
  }

  .cbd-cart-loading-card {
    width: min(390px, calc(100vw - 28px)) !important;
    min-height: 440px !important;
    padding: 30px 22px 24px !important;
    border-radius: 28px !important;
  }

  .cbd-cart-loading-orbit {
    width: 116px !important;
    height: 116px !important;
    margin: 24px auto 20px !important;
  }

  .cbd-cart-loading-orbit::before { width: 116px !important; height: 116px !important; }
  .cbd-cart-loading-orbit::after { width: 80px !important; height: 80px !important; }
  .cbd-cart-loading-content b { font-size: 30px !important; }
  .cbd-cart-loading-steps span { min-height: 28px !important; font-size: 10.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cbd-cart-loading-overlay,
  .cbd-cart-loading-overlay * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ===== ASTRIS Designer Share + Market v4A =====
   Based on user's latest uploaded v3 baseline.
   Goals:
   - Lighter moonlight designer style.
   - Better hover/click/focus effects for all buttons.
   - Share-code modal, creator-code panel, inspiration controls.
   - Clear confirmation modal and marketplace opt-in modal.
*/

#crystal-designer-app {
  --cbd-bg: #f7f1e7 !important;
  --cbd-card: rgba(255,255,255,.74) !important;
  --cbd-text: #182033 !important;
  --cbd-muted: rgba(24,32,51,.62) !important;
  --cbd-line: rgba(48,54,72,.12) !important;
  --cbd-gold: #d6a84a !important;
  --cbd-night-1: #eaf1f8;
  --cbd-night-2: #fff9ee;
  --cbd-night-3: #f5e4c6;
  --cbd-moon: #d6a84a;
  --cbd-moon-deep: #a97424;
  --cbd-cream: #fffaf2;
  --cbd-glass: rgba(255,255,255,.72);
  --cbd-glass-strong: rgba(255,255,255,.86);
  --cbd-glass-border: rgba(214,168,74,.20);
  background:
    radial-gradient(circle at 50% 28%, rgba(246,220,170,.34), transparent 34%),
    radial-gradient(circle at 18% 78%, rgba(130,166,255,.18), transparent 30%),
    linear-gradient(135deg, #eff5fb 0%, #fff8ed 58%, #f4e1bd 130%) !important;
}

#crystal-designer-app .cbd-root {
  color: var(--cbd-text) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(246,220,170,.24), transparent 34%),
    radial-gradient(circle at 14% 86%, rgba(130,166,255,.16), transparent 30%),
    linear-gradient(135deg, rgba(239,245,251,.96), rgba(255,248,237,.96) 56%, rgba(246,230,200,.90)) !important;
}

#crystal-designer-app .cbd-topbar {
  background: rgba(255,255,255,.78) !important;
  border-bottom: 1px solid rgba(214,168,74,.20) !important;
  box-shadow: 0 12px 32px rgba(78,60,32,.09) !important;
  color: #182033 !important;
}

#crystal-designer-app .cbd-topbar-title,
#crystal-designer-app .cbd-topbar-exit,
#crystal-designer-app .cbd-topbar-right a {
  color: #182033 !important;
}

#crystal-designer-app .cbd-topbar-right {
  color: rgba(24,32,51,.58) !important;
}

#crystal-designer-app .cbd-topbar-guide {
  background: rgba(246,220,170,.32) !important;
  border-color: rgba(214,168,74,.28) !important;
  color: #6f4d16 !important;
  box-shadow: 0 8px 20px rgba(163,113,32,.10) !important;
}

#crystal-designer-app .cbd-topbar-mode {
  color: #a97424 !important;
}

#crystal-designer-app .cbd-card {
  background: rgba(255,255,255,.72) !important;
  border-right: 1px solid rgba(214,168,74,.16) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.52) !important;
  backdrop-filter: blur(18px) !important;
}

#crystal-designer-app .cbd-card h2,
#crystal-designer-app .cbd-selected-main b,
#crystal-designer-app .cbd-field label {
  color: #182033 !important;
}

#crystal-designer-app .cbd-left-title,
#crystal-designer-app .cbd-selected-title {
  color: rgba(112,84,37,.76) !important;
}

#crystal-designer-app .cbd-search,
#crystal-designer-app .cbd-field input,
#crystal-designer-app .cbd-code-input-row input {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(70,77,95,.14) !important;
  color: #182033 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62) !important;
}

#crystal-designer-app .cbd-search::placeholder,
#crystal-designer-app .cbd-field input::placeholder,
#crystal-designer-app .cbd-code-input-row input::placeholder {
  color: rgba(24,32,51,.40) !important;
}

#crystal-designer-app .cbd-search:focus,
#crystal-designer-app .cbd-field input:focus,
#crystal-designer-app .cbd-code-input-row input:focus {
  border-color: rgba(214,168,74,.72) !important;
  box-shadow:
    0 0 0 3px rgba(214,168,74,.14),
    0 12px 26px rgba(95,72,35,.08) !important;
}

#crystal-designer-app .cbd-tab {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(70,77,95,.13) !important;
  color: rgba(24,32,51,.76) !important;
}

#crystal-designer-app .cbd-tab.active,
#crystal-designer-app .cbd-tab:hover {
  background: linear-gradient(135deg, #f6dca8, #d8aa4f) !important;
  border-color: rgba(214,168,74,.65) !important;
  color: #172033 !important;
  box-shadow: 0 10px 22px rgba(216,170,79,.16) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(70,77,95,.11) !important;
  box-shadow: 0 8px 20px rgba(86,67,35,.06) !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease,
    opacity .16s ease !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover {
  transform: translateY(-1px) scale(1.002) !important;
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(214,168,74,.32) !important;
  box-shadow:
    0 10px 22px rgba(86,67,35,.09),
    0 0 0 1px rgba(214,168,74,.08) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:active {
  transform: translateY(0) scale(.988) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover .cbd-gem-img {
  transform: rotate(-1deg) scale(1.025) !important;
  filter:
    drop-shadow(0 6px 8px rgba(56,48,33,.15))
    drop-shadow(0 0 8px rgba(214,168,74,.20)) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem b {
  color: #182033 !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem small,
#crystal-designer-app .cbd-selected-main small {
  color: rgba(24,32,51,.56) !important;
}

#crystal-designer-app .cbd-preview {
  background:
    radial-gradient(circle at 50% 42%, rgba(246,220,170,.36), transparent 32%),
    radial-gradient(circle at 42% 55%, rgba(255,255,255,.68), transparent 28%),
    radial-gradient(circle at 16% 82%, rgba(130,166,255,.18), transparent 34%),
    linear-gradient(135deg, #edf5fb 0%, #fff8ed 58%, #f5e2bf 145%) !important;
  border-right: 1px solid rgba(214,168,74,.14) !important;
}

#crystal-designer-app .cbd-preview::before {
  color: rgba(112,84,37,.50) !important;
}

#crystal-designer-app .cbd-preview text {
  fill: rgba(24,32,51,.58) !important;
}

#crystal-designer-app .cbd-preview-svg > circle:first-of-type,
#crystal-designer-app .cbd-preview svg > circle:first-of-type {
  stroke: rgba(214,168,74,.46) !important;

}

#crystal-designer-app .cbd-size-card {
  background:
    radial-gradient(circle at 82% 20%, rgba(246,220,170,.32), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(238,246,252,.86)) !important;
  border: 1px solid rgba(214,168,74,.20) !important;
  color: #182033 !important;
  box-shadow: 0 16px 34px rgba(86,67,35,.10) !important;
}

#crystal-designer-app .cbd-size-card span,
#crystal-designer-app .cbd-size-card small {
  color: rgba(24,32,51,.58) !important;
}

#crystal-designer-app .cbd-size-card strong {
  color: #182033 !important;
}

#crystal-designer-app .cbd-price-card {
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.45), transparent 28%),
    linear-gradient(135deg, #fff3d9, #f6dca8) !important;
  border-color: rgba(214,168,74,.42) !important;
  color: #172033 !important;
  box-shadow: 0 16px 32px rgba(116,80,23,.12) !important;
}

#crystal-designer-app .cbd-list li {
  border-bottom-color: rgba(24,32,51,.10) !important;
}

#crystal-designer-app .cbd-mini-btn {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(70,77,95,.14) !important;
  color: #182033 !important;
}

#crystal-designer-app .cbd-mini-btn:hover,
#crystal-designer-app .cbd-mini-btn:focus-visible {
  background: #f6dca8 !important;
  border-color: rgba(214,168,74,.70) !important;
  color: #172033 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(116,80,23,.12) !important;
}

#crystal-designer-app .cbd-mini-btn:active {
  transform: translateY(0) scale(.96) !important;
}

#crystal-designer-app .cbd-btn,
.cbd-modal-overlay .cbd-btn {
  border-color: rgba(214,168,74,.85) !important;
  background: linear-gradient(135deg, #f8e7bd, #d8aa4f) !important;
  color: #172033 !important;
  box-shadow: 0 12px 26px rgba(157,110,30,.16) !important;
  transition:
    transform .17s ease,
    box-shadow .17s ease,
    filter .17s ease,
    background .17s ease,
    border-color .17s ease !important;
}

#crystal-designer-app .cbd-btn.secondary,
.cbd-modal-overlay .cbd-btn.secondary {
  background: rgba(255,255,255,.74) !important;
  border-color: rgba(70,77,95,.15) !important;
  color: #182033 !important;
}

#crystal-designer-app .cbd-btn:hover,
#crystal-designer-app .cbd-btn:focus-visible,
.cbd-modal-overlay .cbd-btn:hover,
.cbd-modal-overlay .cbd-btn:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px rgba(157,110,30,.20) !important;
  filter: brightness(1.03) !important;
}

#crystal-designer-app .cbd-btn:active,
.cbd-modal-overlay .cbd-btn:active {
  transform: translateY(0) scale(.975) !important;
  box-shadow: 0 8px 18px rgba(157,110,30,.12) !important;
}

#crystal-designer-app .cbd-btn:disabled,
.cbd-modal-overlay .cbd-btn:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

#crystal-designer-app .cbd-inspiration-btn {
  width: 100% !important;
  min-height: 48px !important;
  margin: 10px 0 12px !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
  border-radius: 18px !important;
}

#crystal-designer-app .cbd-code-panel {
  margin: 10px 0 10px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(214,168,74,.20) !important;
  box-shadow: 0 12px 28px rgba(86,67,35,.07) !important;
}

#crystal-designer-app .cbd-code-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

#crystal-designer-app .cbd-code-row span,
#crystal-designer-app .cbd-code-panel label {
  display: block !important;
  color: rgba(24,32,51,.56) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}

#crystal-designer-app .cbd-code-row strong {
  display: block !important;
  font-size: 18px !important;
  letter-spacing: .12em !important;
  color: #172033 !important;
}

#crystal-designer-app .cbd-code-input-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  align-items: center !important;
}

#crystal-designer-app .cbd-code-input-row input {
  height: 38px !important;
  border-radius: 999px !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

#crystal-designer-app .cbd-code-help,
#crystal-designer-app .cbd-code-active {
  margin: 8px 0 0 !important;
  color: rgba(24,32,51,.58) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

#crystal-designer-app .cbd-code-active b {
  color: #a97424 !important;
}

#crystal-designer-app .cbd-code-undo {
  margin-top: 8px !important;
}

.cbd-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(246,220,170,.24), transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(130,166,255,.15), transparent 28%),
    rgba(7,17,31,.52) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .24s ease, visibility .24s ease !important;
  backdrop-filter: blur(14px) !important;
}

.cbd-modal-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.cbd-modal-overlay.hide {
  opacity: 0 !important;
  visibility: hidden !important;
}

.cbd-modal-card {
  position: relative !important;
  width: min(520px, calc(100vw - 34px)) !important;
  border-radius: 30px !important;
  padding: 26px !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(246,220,170,.28), transparent 28%),
    rgba(255,255,255,.90) !important;
  border: 1px solid rgba(246,220,170,.34) !important;
  box-shadow: 0 30px 90px rgba(7,17,31,.26) !important;
  color: #182033 !important;
  transform: translateY(10px) scale(.98) !important;
  animation: cbd-modal-in-v4a .28s ease forwards !important;
}

.cbd-modal-card h3 {
  margin: 0 34px 12px 0 !important;
  color: #182033 !important;
  font-size: clamp(26px, 4vw, 38px) !important;
  line-height: .96 !important;
  letter-spacing: -.06em !important;
}

.cbd-modal-body p {
  color: rgba(24,32,51,.68) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 0 12px !important;
}

.cbd-modal-note {
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(214,168,74,.13) !important;
  border: 1px solid rgba(214,168,74,.22) !important;
}

.cbd-modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(70,77,95,.12) !important;
  background: rgba(255,255,255,.72) !important;
  color: #182033 !important;
  font-size: 22px !important;
  cursor: pointer !important;
  transition: transform .16s ease, background .16s ease !important;
}

.cbd-modal-close:hover {
  transform: rotate(6deg) scale(1.04) !important;
  background: #f6dca8 !important;
}

.cbd-modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 18px !important;
}

.cbd-share-code-box {
  margin: 14px 0 !important;
  padding: 16px !important;
  border-radius: 22px !important;
  text-align: center !important;
  background: linear-gradient(135deg, #fff3d9, #f6dca8) !important;
  border: 1px solid rgba(214,168,74,.42) !important;
}

.cbd-share-code-box span {
  display: block !important;
  margin-bottom: 6px !important;
  color: rgba(24,32,51,.58) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.cbd-share-code-box strong {
  display: block !important;
  color: #172033 !important;
  font-size: clamp(34px, 8vw, 54px) !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
}

.cbd-modal-label {
  display: block !important;
  margin: 12px 0 6px !important;
  color: rgba(24,32,51,.58) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
}

.cbd-modal-link {
  padding: 12px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(70,77,95,.12) !important;
  color: rgba(24,32,51,.72) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  word-break: break-all !important;
}

@keyframes cbd-modal-in-v4a {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-code-input-row {
    grid-template-columns: 1fr !important;
  }

  .cbd-modal-card {
    padding: 22px !important;
  }

  .cbd-modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* ===== ASTRIS Designer Delete Tray + Moonlight UI v5 =====
   Based on user's latest v4A baseline.
   Goals:
   - Remove the right selected-pieces list visually.
   - Add a center-preview trash drop zone for bead deletion.
   - Bring the designer back closer to the Design Lab loading mood without making it too heavy.
   - Smooth, consistent hover / click / focus feedback for all buttons.
*/

#crystal-designer-app {
  --cbd-bg: #081425 !important;
  --cbd-card: rgba(255, 250, 242, .82) !important;
  --cbd-text: #162033 !important;
  --cbd-muted: rgba(22,32,51,.60) !important;
  --cbd-line: rgba(214,168,74,.18) !important;
  --cbd-gold: #d8aa4f !important;
  --cbd-moon: #f6dca8 !important;
  --cbd-moon-deep: #b97a28 !important;
  --cbd-cream: #fff8ed !important;
  --cbd-glass: rgba(255,250,242,.72) !important;
  --cbd-glass-strong: rgba(255,250,242,.90) !important;
  --cbd-glass-border: rgba(246,220,170,.26) !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(246,220,170,.34), transparent 30%),
    radial-gradient(circle at 16% 86%, rgba(130,166,255,.18), transparent 28%),
    linear-gradient(135deg, #07111f 0%, #10243d 48%, #fff2dc 136%) !important;
}

#crystal-designer-app .cbd-root {
  color: var(--cbd-text) !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(246,220,170,.26), transparent 32%),
    radial-gradient(circle at 18% 82%, rgba(130,166,255,.14), transparent 30%),
    linear-gradient(135deg, rgba(7,17,31,.96) 0%, rgba(16,36,61,.92) 41%, rgba(255,248,237,.94) 132%) !important;
}

#crystal-designer-app .cbd-topbar {
  background: rgba(7,17,31,.74) !important;
  border-bottom: 1px solid rgba(246,220,170,.22) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(18px) !important;
}

#crystal-designer-app .cbd-topbar-title,
#crystal-designer-app .cbd-topbar-exit,
#crystal-designer-app .cbd-topbar-right a {
  color: #fff8ed !important;
}

#crystal-designer-app .cbd-topbar-right {
  color: rgba(255,248,237,.68) !important;
}

#crystal-designer-app .cbd-topbar-guide {
  background: rgba(246,220,170,.18) !important;
  border-color: rgba(246,220,170,.30) !important;
  color: #f6dca8 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.16) !important;
}

#crystal-designer-app .cbd-topbar-mode {
  color: #f6dca8 !important;
}

#crystal-designer-app .cbd-card {
  background: rgba(255,250,242,.80) !important;
  border-right: 1px solid rgba(246,220,170,.20) !important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.42),
    0 18px 55px rgba(4,13,27,.08) !important;
  backdrop-filter: blur(20px) !important;
}

#crystal-designer-app .cbd-stone-panel,
#crystal-designer-app .cbd-summary-panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(246,220,170,.20), transparent 34%),
    rgba(255,250,242,.82) !important;
}

#crystal-designer-app .cbd-preview {
  isolation: isolate !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(246,220,170,.36), transparent 28%),
    radial-gradient(circle at 42% 54%, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(circle at 18% 83%, rgba(130,166,255,.16), transparent 32%),
    linear-gradient(135deg, #07111f 0%, #10243d 55%, #fff2dc 148%) !important;
  border-right: 1px solid rgba(246,220,170,.18) !important;
}

#crystal-designer-app .cbd-preview::before {
  color: rgba(246,220,170,.66) !important;

}

#crystal-designer-app .cbd-preview::after {
  content: "" !important;
  position: absolute !important;
  inset: 9% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(246,220,170,.24), rgba(246,220,170,.08) 34%, transparent 70%) !important;

  animation: cbd-v5-preview-glow 3.8s ease-in-out infinite !important;
}

#crystal-designer-app .cbd-preview-svg {
  position: relative !important;
  z-index: 2 !important;
}

#crystal-designer-app .cbd-preview text {
  fill: rgba(255,248,237,.76) !important;

}

#crystal-designer-app .cbd-preview-svg > circle:first-of-type,
#crystal-designer-app .cbd-preview svg > circle:first-of-type {
  stroke: rgba(246,220,170,.58) !important;

}

/* The selected-pieces list was removed from JS. Keep this guard in case cached JS briefly renders it. */
#crystal-designer-app .cbd-selected-title,
#crystal-designer-app .cbd-list {
  display: none !important;
}

#crystal-designer-app .cbd-price-card {
  margin-top: 14px !important;
  background:
    radial-gradient(circle at 86% 14%, rgba(255,255,255,.50), transparent 28%),
    linear-gradient(135deg, #fff6df, #f6dca8 72%, #d8aa4f) !important;
  border-color: rgba(246,220,170,.64) !important;
  box-shadow: 0 18px 38px rgba(116,80,23,.15) !important;
}

#crystal-designer-app .cbd-size-card,
#crystal-designer-app .cbd-code-panel {
  background:
    radial-gradient(circle at 86% 16%, rgba(246,220,170,.26), transparent 32%),
    rgba(255,255,255,.78) !important;
  border: 1px solid rgba(246,220,170,.24) !important;
  box-shadow: 0 15px 34px rgba(4,13,27,.08) !important;
}

#crystal-designer-app .cbd-search,
#crystal-designer-app .cbd-field input,
#crystal-designer-app .cbd-code-input-row input {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(24,32,51,.13) !important;
  color: #162033 !important;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .18s ease !important;
}

#crystal-designer-app .cbd-search:focus,
#crystal-designer-app .cbd-field input:focus,
#crystal-designer-app .cbd-code-input-row input:focus {
  background: #fff !important;
  border-color: rgba(216,170,79,.80) !important;
  box-shadow:
    0 0 0 3px rgba(246,220,170,.20),
    0 12px 28px rgba(4,13,27,.10) !important;
  transform: translateY(-1px) !important;
}

#crystal-designer-app .cbd-tab,
#crystal-designer-app .cbd-mini-btn,
#crystal-designer-app .cbd-btn,
#crystal-designer-app .cbd-topbar-exit,
#crystal-designer-app .cbd-topbar-right a,
.cbd-modal-overlay .cbd-btn {
  position: relative !important;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease,
    filter .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease !important;
}

#crystal-designer-app .cbd-btn,
.cbd-modal-overlay .cbd-btn {
  overflow: hidden !important;
  border: 1px solid rgba(246,220,170,.82) !important;
  background: linear-gradient(135deg, #fff0c9 0%, #f6dca8 44%, #d8aa4f 100%) !important;
  color: #081425 !important;
  box-shadow:
    0 14px 32px rgba(157,110,30,.20),
    inset 0 1px 0 rgba(255,255,255,.40) !important;
}

#crystal-designer-app .cbd-btn.secondary,
.cbd-modal-overlay .cbd-btn.secondary {
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(24,32,51,.14) !important;
  color: #162033 !important;
  box-shadow: 0 10px 24px rgba(4,13,27,.08) !important;
}

#crystal-designer-app .cbd-btn::after,
.cbd-modal-overlay .cbd-btn::after {
  content: "" !important;
  position: absolute !important;
  inset: -55% !important;
  pointer-events: none !important;
  background: linear-gradient(120deg, transparent 34%, rgba(255,255,255,.40), transparent 66%) !important;
  transform: translateX(-130%) rotate(12deg) !important;
  transition: transform .56s ease !important;
}

#crystal-designer-app .cbd-btn:hover,
#crystal-designer-app .cbd-btn:focus-visible,
.cbd-modal-overlay .cbd-btn:hover,
.cbd-modal-overlay .cbd-btn:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow:
    0 20px 42px rgba(157,110,30,.24),
    0 0 0 3px rgba(246,220,170,.14),
    inset 0 1px 0 rgba(255,255,255,.50) !important;
  filter: brightness(1.035) !important;
}

#crystal-designer-app .cbd-btn:hover::after,
#crystal-designer-app .cbd-btn:focus-visible::after,
.cbd-modal-overlay .cbd-btn:hover::after,
.cbd-modal-overlay .cbd-btn:focus-visible::after {
  transform: translateX(130%) rotate(12deg) !important;
}

#crystal-designer-app .cbd-btn:active,
.cbd-modal-overlay .cbd-btn:active,
#crystal-designer-app .cbd-tab:active,
#crystal-designer-app .cbd-mini-btn:active {
  transform: translateY(0) scale(.975) !important;
  box-shadow: 0 8px 18px rgba(4,13,27,.10) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(24,32,51,.11) !important;
  box-shadow: 0 8px 22px rgba(4,13,27,.06) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover,
#crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible {
  transform: translateY(-1px) scale(1.001) !important;
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(246,220,170,.38) !important;
  box-shadow:
    0 12px 26px rgba(4,13,27,.10),
    0 0 0 2px rgba(246,220,170,.09) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:active {
  transform: translateY(0) scale(.988) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover .cbd-gem-img {
  transform: rotate(-1deg) scale(1.018) !important;
  filter:
    drop-shadow(0 6px 8px rgba(4,13,27,.18))
    drop-shadow(0 0 8px rgba(246,220,170,.18)) !important;
}

#crystal-designer-app .cbd-preview-bead {

}

#crystal-designer-app .cbd-preview-bead:hover {
  transform: scale(1.035) !important;

}

#crystal-designer-app.cbd-drag-active .cbd-preview-bead.is-delete-target {
  opacity: .30 !important;

}

.cbd-drag-ghost.is-trash-active {
  filter:
    drop-shadow(0 18px 24px rgba(0,0,0,.32))
    drop-shadow(0 0 22px rgba(246,91,91,.54)) !important;
}

#crystal-designer-app .cbd-preview-trash {
  position: absolute !important;
  left: 50% !important;
  bottom: 24px !important;
  z-index: 8 !important;
  transform: translateX(-50%) !important;
  min-width: 172px !important;
  min-height: 62px !important;
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  align-items: center !important;
  justify-items: start !important;
  padding: 9px 16px 9px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(246,220,170,.34) !important;
  background: rgba(7,17,31,.58) !important;
  color: #fff8ed !important;


  cursor: pointer !important;

}

#crystal-designer-app .cbd-preview-trash-icon {
  grid-row: 1 / span 2 !important;
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(246,220,170,.88) 38%, rgba(216,170,79,.78) 100%) !important;

}

#crystal-designer-app .cbd-preview-trash svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: none !important;
  stroke: #081425 !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#crystal-designer-app .cbd-preview-trash-text {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
}

#crystal-designer-app .cbd-preview-trash small {
  display: block !important;
  margin-top: 2px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  color: rgba(255,248,237,.66) !important;
}

#crystal-designer-app .cbd-preview-trash:hover,
#crystal-designer-app .cbd-preview-trash:focus-visible {
  transform: translateX(-50%) translateY(-3px) scale(1.015) !important;
  border-color: rgba(246,220,170,.62) !important;
  background: rgba(7,17,31,.72) !important;

}

#crystal-designer-app .cbd-preview-trash:active {
  transform: translateX(-50%) translateY(0) scale(.98) !important;
}

#crystal-designer-app .cbd-preview-trash.is-empty {
  opacity: .62 !important;
}

#crystal-designer-app .cbd-preview-trash.is-drop-active,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash {
  transform: translateX(-50%) translateY(-6px) scale(1.08) !important;
  border-color: rgba(255,115,115,.62) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 34%),
    rgba(72,18,27,.78) !important;

}

#crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-preview-trash-icon,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash .cbd-preview-trash-icon {
  background: radial-gradient(circle at 35% 28%, #fff, #ffd4d4 34%, #ff7474 100%) !important;
  animation: cbd-v5-trash-pulse .72s ease-in-out infinite !important;
}

.cbd-floating-tooltip {
  background: rgba(7,17,31,.86) !important;
  color: #fff8ed !important;
  border-color: rgba(246,220,170,.24) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.30) !important;
}

.cbd-modal-overlay .cbd-modal-card,
.cbd-cart-loading-card {
  border-color: rgba(246,220,170,.22) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.32) !important;
}

@keyframes cbd-v5-preview-glow {
  0%, 100% { opacity: .45; transform: scale(.96); }
  50% { opacity: .84; transform: scale(1.04); }
}

@keyframes cbd-v5-trash-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.10); filter: brightness(1.12); }
}

@media (max-width: 1180px) {
  #crystal-designer-app .cbd-preview-trash {
    bottom: 18px !important;
  }
}

@media (max-width: 860px) {
  #crystal-designer-app .cbd-preview-trash {
    min-width: 150px !important;
    min-height: 56px !important;
    bottom: 14px !important;
    padding: 8px 13px 8px 9px !important;
  }

  #crystal-designer-app .cbd-preview-trash-icon {
    width: 38px !important;
    height: 38px !important;
  }
}

@media (max-width: 520px) {
  #crystal-designer-app .cbd-preview-trash {
    left: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    transform: none !important;
    min-width: 52px !important;
    width: 52px !important;
    min-height: 52px !important;
    padding: 5px !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }

  #crystal-designer-app .cbd-preview-trash:hover,
  #crystal-designer-app .cbd-preview-trash:focus-visible,
  #crystal-designer-app .cbd-preview-trash.is-drop-active,
  #crystal-designer-app.cbd-trash-hover .cbd-preview-trash {
    transform: translateY(-2px) scale(1.04) !important;
  }

  #crystal-designer-app .cbd-preview-trash-text,
  #crystal-designer-app .cbd-preview-trash small {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #crystal-designer-app .cbd-preview::after,
  #crystal-designer-app .cbd-preview-trash-icon {
    animation: none !important;
  }
}

/* ===== ASTRIS Designer Refined Motion v7 =====
   Based on the latest uploaded v5/v6 baseline.
   Changes:
   - Remove right-side Clear All button layout.
   - Move trash to lower-right, slightly higher toward the bracelet.
   - Make add/reflow animation feel softer.
   - Fade the center preview glow.
   - Make left/right side panels slightly deeper and closer to the loading mood.
*/

#crystal-designer-app {
  --cbd-card: rgba(246, 236, 220, .88) !important;
  --cbd-glass: rgba(246, 236, 220, .76) !important;
  --cbd-glass-strong: rgba(255, 248, 237, .92) !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(246,220,170,.26), transparent 30%),
    radial-gradient(circle at 16% 86%, rgba(130,166,255,.14), transparent 28%),
    linear-gradient(135deg, #07111f 0%, #10243d 50%, #f1dcc0 138%) !important;
}

#crystal-designer-app .cbd-root {
  background:
    radial-gradient(circle at 50% 28%, rgba(246,220,170,.18), transparent 32%),
    radial-gradient(circle at 18% 82%, rgba(130,166,255,.11), transparent 30%),
    linear-gradient(135deg, rgba(7,17,31,.97) 0%, rgba(16,36,61,.94) 42%, rgba(245,232,212,.96) 132%) !important;
}

#crystal-designer-app .cbd-card,
#crystal-designer-app .cbd-stone-panel,
#crystal-designer-app .cbd-summary-panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(246,220,170,.15), transparent 34%),
    rgba(244,234,218,.90) !important;
  border-right-color: rgba(148,105,42,.22) !important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.38),
    0 18px 52px rgba(4,13,27,.10) !important;
}

#crystal-designer-app .cbd-preview {
  background:
    radial-gradient(circle at 50% 38%, rgba(246,220,170,.20), transparent 30%),
    radial-gradient(circle at 42% 54%, rgba(255,255,255,.10), transparent 26%),
    radial-gradient(circle at 18% 83%, rgba(130,166,255,.10), transparent 34%),
    linear-gradient(135deg, #07111f 0%, #10243d 57%, #f2dec2 154%) !important;
}

#crystal-designer-app .cbd-preview::after {
  inset: 12% !important;
  background: radial-gradient(circle, rgba(246,220,170,.14), rgba(246,220,170,.045) 34%, transparent 72%) !important;

  animation: cbd-v7-preview-glow 4.6s ease-in-out infinite !important;
}

@keyframes cbd-v7-preview-glow {
  0%, 100% { opacity: .24; transform: scale(.98); }
  50% { opacity: .48; transform: scale(1.025); }
}

#crystal-designer-app .cbd-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  margin-top: 12px !important;
}

#crystal-designer-app .cbd-actions #cbd-save,
#crystal-designer-app .cbd-actions #cbd-cart {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 44px !important;
}

#crystal-designer-app .cbd-preview-trash {
  left: auto !important;
  right: clamp(22px, 3.2vw, 42px) !important;
  bottom: clamp(72px, 11vh, 112px) !important;
  transform: none !important;
  min-width: 164px !important;
  min-height: 58px !important;
  background: rgba(7,17,31,.50) !important;
  border-color: rgba(246,220,170,.30) !important;

}

#crystal-designer-app .cbd-preview-trash:hover,
#crystal-designer-app .cbd-preview-trash:focus-visible {
  transform: translateY(-3px) scale(1.012) !important;
  background: rgba(7,17,31,.66) !important;

}

#crystal-designer-app .cbd-preview-trash:active {
  transform: translateY(0) scale(.985) !important;
}

#crystal-designer-app .cbd-preview-trash.is-drop-active,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash {
  transform: translateY(-5px) scale(1.055) !important;
  border-color: rgba(255,115,115,.58) !important;

}

#crystal-designer-app .cbd-preview-bead {

}

#crystal-designer-app .cbd-preview-bead.is-dropped {

}

#crystal-designer-app .cbd-preview-bead.is-rolling {

}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover,
#crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible {
  transform: translateY(-1px) scale(1.0005) !important;
}

@media (max-width: 1180px) {
  #crystal-designer-app .cbd-preview-trash {
    right: 24px !important;
    bottom: 70px !important;
  }
}

@media (max-width: 860px) {
  #crystal-designer-app .cbd-preview-trash {
    right: 18px !important;
    bottom: 58px !important;
    min-width: 146px !important;
  }
}

@media (max-width: 520px) {
  #crystal-designer-app .cbd-preview-trash {
    right: 12px !important;
    bottom: 58px !important;
    transform: none !important;
  }

  #crystal-designer-app .cbd-preview-trash:hover,
  #crystal-designer-app .cbd-preview-trash:focus-visible,
  #crystal-designer-app .cbd-preview-trash.is-drop-active,
  #crystal-designer-app.cbd-trash-hover .cbd-preview-trash {
    transform: translateY(-2px) scale(1.035) !important;
  }
}

/* ===== ASTRIS Designer Style + Motion v8 =====
   Based on user's latest uploaded v7 baseline.
   Changes:
   - Remove Save & Share button visually and keep Add to Cart as the only main action.
   - Rebuild the designer into a cleaner moonlight-glass style closer to the page loading screen.
   - Reduce animation collisions when users add beads quickly.
*/

#crystal-designer-app {
  --cbd-bg: #07111f !important;
  --cbd-text: #fff6e8 !important;
  --cbd-muted: rgba(255,246,232,.68) !important;
  --cbd-line: rgba(246,220,170,.18) !important;
  --cbd-gold: #f6dca8 !important;
  --cbd-moon: #f6dca8 !important;
  --cbd-moon-deep: #d8aa4f !important;
  --cbd-panel: rgba(12, 27, 48, .82);
  --cbd-panel-soft: rgba(18, 39, 64, .78);
  --cbd-panel-line: rgba(246,220,170,.20);
  background:
    radial-gradient(circle at 50% 28%, rgba(246,220,170,.18), transparent 32%),
    radial-gradient(circle at 18% 82%, rgba(130,166,255,.13), transparent 30%),
    linear-gradient(135deg, #07111f 0%, #10243d 56%, #f4dfbf 150%) !important;
}

#crystal-designer-app .cbd-root {
  color: var(--cbd-text) !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(246,220,170,.13), transparent 32%),
    radial-gradient(circle at 20% 86%, rgba(130,166,255,.10), transparent 30%),
    linear-gradient(135deg, rgba(7,17,31,.98) 0%, rgba(16,36,61,.96) 58%, rgba(53,61,70,.90) 132%) !important;
}

#crystal-designer-app .cbd-topbar {
  background: rgba(7,17,31,.78) !important;
  border-bottom: 1px solid rgba(246,220,170,.20) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(18px) !important;
}

#crystal-designer-app .cbd-topbar-title,
#crystal-designer-app .cbd-topbar-exit,
#crystal-designer-app .cbd-topbar-right a {
  color: #fff6e8 !important;
}

#crystal-designer-app .cbd-topbar-right {
  color: rgba(255,246,232,.62) !important;
}

#crystal-designer-app .cbd-topbar-guide {
  background: rgba(246,220,170,.16) !important;
  border-color: rgba(246,220,170,.28) !important;
  color: #f6dca8 !important;
}

#crystal-designer-app .cbd-topbar-mode {
  color: #f6dca8 !important;
}

#crystal-designer-app .cbd-card,
#crystal-designer-app .cbd-stone-panel,
#crystal-designer-app .cbd-summary-panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(246,220,170,.11), transparent 34%),
    linear-gradient(180deg, rgba(16,36,61,.86), rgba(8,20,37,.84)) !important;
  border-right: 1px solid rgba(246,220,170,.17) !important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.06),
    0 20px 58px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(20px) !important;
}

#crystal-designer-app .cbd-card h2,
#crystal-designer-app .cbd-field label,
#crystal-designer-app .cbd-gems-grid .cbd-gem b,
#crystal-designer-app .cbd-code-row strong {
  color: #fff6e8 !important;
}

#crystal-designer-app .cbd-left-title,
#crystal-designer-app .cbd-code-row span,
#crystal-designer-app .cbd-code-panel label {
  color: rgba(246,220,170,.70) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem small,
#crystal-designer-app .cbd-code-help,
#crystal-designer-app .cbd-code-active,
#crystal-designer-app .cbd-size-card span,
#crystal-designer-app .cbd-size-card small {
  color: rgba(255,246,232,.60) !important;
}

#crystal-designer-app .cbd-search,
#crystal-designer-app .cbd-field input,
#crystal-designer-app .cbd-code-input-row input {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff6e8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#crystal-designer-app .cbd-search::placeholder,
#crystal-designer-app .cbd-field input::placeholder,
#crystal-designer-app .cbd-code-input-row input::placeholder {
  color: rgba(255,246,232,.42) !important;
}

#crystal-designer-app .cbd-search:focus,
#crystal-designer-app .cbd-field input:focus,
#crystal-designer-app .cbd-code-input-row input:focus {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(246,220,170,.70) !important;
  box-shadow:
    0 0 0 3px rgba(246,220,170,.13),
    0 14px 30px rgba(0,0,0,.18) !important;
  transform: translateY(-1px) !important;
}

#crystal-designer-app .cbd-tab,
#crystal-designer-app .cbd-mini-btn {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,246,232,.76) !important;
}

#crystal-designer-app .cbd-tab.active,
#crystal-designer-app .cbd-tab:hover,
#crystal-designer-app .cbd-mini-btn:hover,
#crystal-designer-app .cbd-mini-btn:focus-visible {
  background: linear-gradient(135deg, #f6dca8, #d8aa4f) !important;
  border-color: rgba(246,220,170,.70) !important;
  color: #07111f !important;
  box-shadow: 0 12px 26px rgba(216,170,79,.18) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem {
  background:
    radial-gradient(circle at 50% 0%, rgba(246,220,170,.11), transparent 42%),
    rgba(255,255,255,.095) !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover,
#crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible {
  transform: translateY(-1px) scale(1.0001) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(246,220,170,.16), transparent 44%),
    rgba(255,255,255,.13) !important;
  border-color: rgba(246,220,170,.32) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.16),
    0 0 0 2px rgba(246,220,170,.07) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:active {
  transform: translateY(0) scale(.992) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover .cbd-gem-img {
  transform: rotate(-.5deg) scale(1.012) !important;
  filter:
    drop-shadow(0 7px 9px rgba(0,0,0,.20))
    drop-shadow(0 0 8px rgba(246,220,170,.16)) !important;
}

#crystal-designer-app .cbd-preview {
  background:
    radial-gradient(circle at 50% 38%, rgba(246,220,170,.16), transparent 30%),
    radial-gradient(circle at 42% 54%, rgba(255,255,255,.06), transparent 26%),
    radial-gradient(circle at 18% 83%, rgba(130,166,255,.10), transparent 34%),
    linear-gradient(135deg, #07111f 0%, #10243d 58%, #f5e2c3 160%) !important;
  border-right: 1px solid rgba(246,220,170,.16) !important;
}

#crystal-designer-app .cbd-preview::after {
  inset: 13% !important;
  background: radial-gradient(circle, rgba(246,220,170,.10), rgba(246,220,170,.03) 34%, transparent 74%) !important;

  animation: cbd-v8-preview-glow 5.2s ease-in-out infinite !important;
}

#crystal-designer-app .cbd-preview-svg {
  animation: none !important;
}

#crystal-designer-app .cbd-preview text {
  fill: rgba(255,246,232,.72) !important;

}

#crystal-designer-app .cbd-preview-svg > circle:first-of-type,
#crystal-designer-app .cbd-preview svg > circle:first-of-type {
  stroke: rgba(246,220,170,.48) !important;

}

#crystal-designer-app .cbd-code-panel,
#crystal-designer-app .cbd-size-card {
  background:
    radial-gradient(circle at 86% 14%, rgba(246,220,170,.18), transparent 32%),
    rgba(255,255,255,.08) !important;
  border: 1px solid rgba(246,220,170,.20) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.14) !important;
}

#crystal-designer-app .cbd-price-card {
  background:
    radial-gradient(circle at 86% 14%, rgba(255,255,255,.42), transparent 28%),
    linear-gradient(135deg, #fff0c9, #f6dca8 66%, #d8aa4f) !important;
  border-color: rgba(246,220,170,.62) !important;
  color: #07111f !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.18) !important;
}

#crystal-designer-app .cbd-price-card p span,
#crystal-designer-app .cbd-price-card h3 span,
#crystal-designer-app .cbd-price-card b,
#crystal-designer-app .cbd-price-card h3 b {
  color: #07111f !important;
}

#crystal-designer-app .cbd-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

#crystal-designer-app .cbd-actions #cbd-save {
  display: none !important;
}

#crystal-designer-app .cbd-actions #cbd-cart {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
}

#crystal-designer-app .cbd-btn,
.cbd-modal-overlay .cbd-btn {
  border-color: rgba(246,220,170,.82) !important;
  background: linear-gradient(135deg, #fff0c9 0%, #f6dca8 46%, #d8aa4f 100%) !important;
  color: #07111f !important;
  box-shadow:
    0 16px 34px rgba(216,170,79,.20),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

#crystal-designer-app .cbd-btn.secondary,
.cbd-modal-overlay .cbd-btn.secondary {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff6e8 !important;
}

#crystal-designer-app .cbd-btn:hover,
#crystal-designer-app .cbd-btn:focus-visible,
.cbd-modal-overlay .cbd-btn:hover,
.cbd-modal-overlay .cbd-btn:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow:
    0 20px 44px rgba(216,170,79,.24),
    0 0 0 4px rgba(246,220,170,.10),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}

#crystal-designer-app .cbd-btn:active,
.cbd-modal-overlay .cbd-btn:active {
  transform: translateY(0) scale(.978) !important;
}

#crystal-designer-app .cbd-preview-bead {

}

#crystal-designer-app .cbd-preview-bead:hover {
  transform: scale(1.018) !important;

}

#crystal-designer-app .cbd-preview-bead.is-dropped,
#crystal-designer-app .cbd-preview-bead.is-rolling {

}

#crystal-designer-app .cbd-preview-trash {
  background: rgba(7,17,31,.54) !important;
  border-color: rgba(246,220,170,.30) !important;
}

.cbd-floating-tooltip,
.cbd-modal-overlay .cbd-modal-card {
  background:
    radial-gradient(circle at 82% 12%, rgba(246,220,170,.14), transparent 28%),
    rgba(8,20,37,.92) !important;
  border-color: rgba(246,220,170,.22) !important;
  color: #fff6e8 !important;
}

.cbd-modal-card h3,
.cbd-modal-body p,
.cbd-floating-tooltip b {
  color: #fff6e8 !important;
}

.cbd-modal-body p,
.cbd-floating-tooltip em {
  color: rgba(255,246,232,.66) !important;
}

.cbd-modal-note,
.cbd-modal-link {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(246,220,170,.18) !important;
  color: rgba(255,246,232,.72) !important;
}

@keyframes cbd-v8-preview-glow {
  0%, 100% { opacity: .20; transform: scale(.98); }
  50% { opacity: .38; transform: scale(1.02); }
}

@media (max-width: 860px) {
  #crystal-designer-app .cbd-card,
  #crystal-designer-app .cbd-stone-panel,
  #crystal-designer-app .cbd-summary-panel {
    background: rgba(12,27,48,.88) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #crystal-designer-app .cbd-preview::after {
    animation: none !important;
  }
}



/* ===== ASTRIS Designer Panel + Motion v9 =====
   Based on v8.
   Changes:
   - Make the estimated wrist size card readable.
   - Re-group the right sidebar into clear sections.
   - Further unify the designer with the moonlight loading style.
   - Reduce animation conflicts when users add beads quickly.
*/

#crystal-designer-app {
  --cbd-v9-night: #081526 !important;
  --cbd-v9-night-soft: #10243d !important;
  --cbd-v9-cream: #fff8eb !important;
  --cbd-v9-gold: #f6dca8 !important;
  --cbd-v9-gold-deep: #d8aa4f !important;
  --cbd-v9-ink: #0d1729 !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(246,220,170,.24), transparent 31%),
    radial-gradient(circle at 17% 86%, rgba(132,166,220,.14), transparent 29%),
    linear-gradient(135deg, #07111f 0%, #10243d 52%, #e8d1b2 142%) !important;
}

#crystal-designer-app .cbd-root {
  background:
    radial-gradient(circle at 50% 25%, rgba(246,220,170,.16), transparent 34%),
    radial-gradient(circle at 20% 82%, rgba(132,166,220,.10), transparent 30%),
    linear-gradient(135deg, rgba(7,17,31,.98) 0%, rgba(16,36,61,.96) 45%, rgba(238,220,192,.98) 140%) !important;
}

#crystal-designer-app .cbd-topbar {
  background:
    radial-gradient(circle at 50% -40%, rgba(246,220,170,.16), transparent 50%),
    rgba(7,17,31,.82) !important;
  border-bottom-color: rgba(246,220,170,.24) !important;
}

#crystal-designer-app .cbd-card,
#crystal-designer-app .cbd-stone-panel,
#crystal-designer-app .cbd-summary-panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(246,220,170,.14), transparent 36%),
    linear-gradient(180deg, rgba(31,47,65,.92), rgba(22,34,49,.90)) !important;
  border-right-color: rgba(246,220,170,.18) !important;
  color: #fff8eb !important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.06),
    0 20px 58px rgba(4,13,27,.18) !important;
}

#crystal-designer-app .cbd-card h2,
#crystal-designer-app .cbd-field label,
#crystal-designer-app .cbd-gems-grid .cbd-gem b,
#crystal-designer-app .cbd-code-row strong {
  color: #fff8eb !important;
}

#crystal-designer-app .cbd-left-title,
#crystal-designer-app .cbd-section-kicker,
#crystal-designer-app .cbd-code-row span,
#crystal-designer-app .cbd-code-panel label {
  color: rgba(246,220,170,.78) !important;
}

#crystal-designer-app .cbd-search,
#crystal-designer-app .cbd-field input,
#crystal-designer-app .cbd-code-input-row input {
  background: rgba(255,248,235,.12) !important;
  border-color: rgba(255,248,235,.18) !important;
  color: #fff8eb !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#crystal-designer-app .cbd-search::placeholder,
#crystal-designer-app .cbd-field input::placeholder,
#crystal-designer-app .cbd-code-input-row input::placeholder {
  color: rgba(255,248,235,.48) !important;
}

#crystal-designer-app .cbd-search:focus,
#crystal-designer-app .cbd-field input:focus,
#crystal-designer-app .cbd-code-input-row input:focus {
  background: rgba(255,248,235,.18) !important;
  border-color: rgba(246,220,170,.74) !important;
  box-shadow:
    0 0 0 3px rgba(246,220,170,.14),
    0 14px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#crystal-designer-app .cbd-summary-panel {
  padding: 12px !important;
}

#crystal-designer-app .cbd-summary-inner {
  display: grid !important;
  gap: 10px !important;
  min-height: 100% !important;
}

#crystal-designer-app .cbd-panel-section {
  position: relative !important;
  padding: 12px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(246,220,170,.16) !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(246,220,170,.14), transparent 30%),
    rgba(255,248,235,.075) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#crystal-designer-app .cbd-section-kicker {
  margin-bottom: 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

#crystal-designer-app .cbd-section-designer h2 {
  margin-bottom: 12px !important;
}

#crystal-designer-app .cbd-field {
  margin-bottom: 8px !important;
}

#crystal-designer-app .cbd-field:last-child {
  margin-bottom: 0 !important;
}

#crystal-designer-app .cbd-code-panel {
  margin: 0 0 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#crystal-designer-app .cbd-code-help,
#crystal-designer-app .cbd-code-active,
#crystal-designer-app .cbd-gems-grid .cbd-gem small {
  color: rgba(255,248,235,.62) !important;
}

#crystal-designer-app .cbd-code-active b {
  color: #f6dca8 !important;
}

#crystal-designer-app .cbd-mini-btn {
  background: rgba(255,248,235,.12) !important;
  border-color: rgba(255,248,235,.20) !important;
  color: #fff8eb !important;
}

#crystal-designer-app .cbd-mini-btn:hover,
#crystal-designer-app .cbd-mini-btn:focus-visible {
  background: linear-gradient(135deg, #fff0c9, #d8aa4f) !important;
  color: #081526 !important;
  border-color: rgba(246,220,170,.72) !important;
}

#crystal-designer-app .cbd-inspiration-btn {
  margin: 0 !important;
  min-height: 46px !important;
}

#crystal-designer-app .cbd-size-card {
  margin: 0 !important;
  padding: 15px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(246,220,170,.24), transparent 30%),
    linear-gradient(135deg, rgba(8,21,38,.92), rgba(21,38,58,.90)) !important;
  border: 1px solid rgba(246,220,170,.28) !important;
  color: #fff8eb !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#crystal-designer-app .cbd-size-card span {
  color: #f6dca8 !important;
  opacity: 1 !important;
  letter-spacing: .17em !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.24) !important;
}

#crystal-designer-app .cbd-size-card strong {
  color: #fff8eb !important;
  text-shadow:
    0 2px 14px rgba(0,0,0,.36),
    0 0 18px rgba(246,220,170,.20) !important;
}

#crystal-designer-app .cbd-size-card small {
  color: rgba(255,248,235,.84) !important;
  opacity: 1 !important;
  font-weight: 650 !important;
}

#crystal-designer-app .cbd-price-card {
  margin: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(255,255,255,.35), transparent 30%),
    linear-gradient(135deg, #fff0c9 0%, #f6dca8 58%, #d8aa4f 120%) !important;
  border-color: rgba(246,220,170,.72) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.16) !important;
}

#crystal-designer-app .cbd-actions {
  margin-top: 10px !important;
}

#crystal-designer-app .cbd-actions #cbd-cart {
  min-height: 48px !important;
  font-size: 13px !important;
}

#crystal-designer-app .cbd-preview {
  background:
    radial-gradient(circle at 50% 38%, rgba(246,220,170,.17), transparent 31%),
    radial-gradient(circle at 42% 54%, rgba(255,255,255,.08), transparent 27%),
    radial-gradient(circle at 18% 83%, rgba(130,166,255,.10), transparent 34%),
    linear-gradient(135deg, #07111f 0%, #10243d 58%, #e8d1b2 158%) !important;
}

#crystal-designer-app .cbd-preview::after {
  inset: 14% !important;
  background: radial-gradient(circle, rgba(246,220,170,.11), rgba(246,220,170,.035) 35%, transparent 74%) !important;
  animation: cbd-v9-preview-glow 5.2s ease-in-out infinite !important;
}

@keyframes cbd-v9-preview-glow {
  0%, 100% { opacity: .22; transform: scale(.985); }
  50% { opacity: .42; transform: scale(1.018); }
}

#crystal-designer-app .cbd-preview-svg {
  animation: none !important;
}

#crystal-designer-app .cbd-preview-bead {

}

#crystal-designer-app .cbd-preview-bead.is-dropped {

}

#crystal-designer-app .cbd-preview-bead.is-rolling {

}

#crystal-designer-app .cbd-gems-grid .cbd-gem {
  background: rgba(255,248,235,.12) !important;
  border-color: rgba(255,248,235,.16) !important;
  box-shadow: 0 9px 22px rgba(0,0,0,.10) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover,
#crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible {
  background: rgba(255,248,235,.18) !important;
  border-color: rgba(246,220,170,.36) !important;
  box-shadow:
    0 13px 28px rgba(0,0,0,.14),
    0 0 0 2px rgba(246,220,170,.08) !important;
}

#crystal-designer-app .cbd-preview-trash {
  background: rgba(7,17,31,.58) !important;
}

#crystal-designer-app .cbd-message {
  background: rgba(246,220,170,.14) !important;
  border: 1px solid rgba(246,220,170,.20) !important;
  color: #fff8eb !important;
}

@media (max-width: 1180px) {
  #crystal-designer-app .cbd-summary-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #crystal-designer-app .cbd-section-checkout {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-summary-inner {
    grid-template-columns: 1fr !important;
  }
}

/* ===== ASTRIS Right Panel Priority + Readability v10 =====
   Based on v9 panel-motion baseline.
   Goals:
   - Move Bracelet Size and Price Summary to the top of the right panel.
   - Make wrist-size text larger and clearer.
   - Keep the right panel visually consistent with the moonlight loading style.
   - Slightly smooth rapid bead-add batching by reducing visual noise around the preview.
*/

#crystal-designer-app .cbd-summary-panel {
  background:
    radial-gradient(circle at 76% 6%, rgba(246,220,170,.18), transparent 30%),
    radial-gradient(circle at 14% 92%, rgba(130,166,255,.12), transparent 30%),
    rgba(10,24,42,.84) !important;
  border-left: 1px solid rgba(246,220,170,.20) !important;
  border-right: 0 !important;
  color: #fff7e8 !important;
}

#crystal-designer-app .cbd-summary-inner {
  display: grid !important;
  gap: 12px !important;
  padding-bottom: 20px !important;
}

#crystal-designer-app .cbd-panel-section {
  border-radius: 22px !important;
  padding: 12px !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(246,220,170,.12), transparent 32%),
    rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(18px) !important;
}

#crystal-designer-app .cbd-section-priority-size,
#crystal-designer-app .cbd-section-priority-price {
  background:
    radial-gradient(circle at 82% 10%, rgba(246,220,170,.20), transparent 32%),
    rgba(255,255,255,.095) !important;
  border-color: rgba(246,220,170,.20) !important;
}

#crystal-designer-app .cbd-section-kicker {
  margin: 0 0 9px !important;
  color: rgba(246,220,170,.88) !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

#crystal-designer-app .cbd-summary-panel h2 {
  color: #fff7e8 !important;
  text-shadow: 0 8px 24px rgba(0,0,0,.20) !important;
}

#crystal-designer-app .cbd-size-card.cbd-size-card-priority {
  margin: 0 !important;
  padding: 18px 17px !important;
  min-height: 150px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 78% 14%, rgba(246,220,170,.30), transparent 30%),
    radial-gradient(circle at 16% 92%, rgba(130,166,255,.16), transparent 30%),
    linear-gradient(135deg, rgba(12,27,47,.98), rgba(23,48,77,.94)) !important;
  border: 1px solid rgba(246,220,170,.30) !important;
  box-shadow:
    0 20px 44px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

#crystal-designer-app .cbd-size-card.cbd-size-card-priority span {
  color: rgba(246,220,170,.92) !important;
  font-size: 10.5px !important;
  letter-spacing: .18em !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
}

#crystal-designer-app .cbd-size-card.cbd-size-card-priority strong {
  margin: 8px 0 10px !important;
  color: #fff8ed !important;
  font-size: clamp(44px, 4.2vw, 58px) !important;
  line-height: .88 !important;
  letter-spacing: -.075em !important;
  text-shadow:
    0 14px 30px rgba(0,0,0,.28),
    0 0 28px rgba(246,220,170,.20) !important;
}

#crystal-designer-app .cbd-size-card.cbd-size-card-priority small {
  color: rgba(255,248,237,.84) !important;
  font-size: 12px !important;
  line-height: 1.34 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
}

#crystal-designer-app .cbd-price-card.cbd-price-card-priority {
  margin: 0 !important;
  padding: 15px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.36), transparent 30%),
    linear-gradient(135deg, #fff0c9 0%, #f6dca8 52%, #d8aa4f 120%) !important;
  border: 1px solid rgba(246,220,170,.66) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

#crystal-designer-app .cbd-price-card.cbd-price-card-priority p {
  margin-bottom: 8px !important;
}

#crystal-designer-app .cbd-price-card.cbd-price-card-priority p span,
#crystal-designer-app .cbd-price-card.cbd-price-card-priority h3 span {
  color: rgba(8,20,37,.70) !important;
  font-weight: 850 !important;
}

#crystal-designer-app .cbd-price-card.cbd-price-card-priority p b {
  color: #081425 !important;
  font-size: 14px !important;
}

#crystal-designer-app .cbd-price-card.cbd-price-card-priority h3 {
  margin-top: 10px !important;
  padding-top: 11px !important;
  border-top-color: rgba(8,20,37,.16) !important;
}

#crystal-designer-app .cbd-price-card.cbd-price-card-priority h3 b {
  color: #081425 !important;
  font-size: clamp(28px, 2.4vw, 36px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
}

#crystal-designer-app .cbd-section-priority-price .cbd-actions {
  margin-top: 12px !important;
}

#crystal-designer-app .cbd-section-priority-price #cbd-cart {
  min-height: 48px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
}

#crystal-designer-app .cbd-section-designer,
#crystal-designer-app .cbd-section-codes {
  background:
    radial-gradient(circle at 82% 12%, rgba(246,220,170,.10), transparent 32%),
    rgba(255,255,255,.065) !important;
}

#crystal-designer-app .cbd-section-designer .cbd-field label,
#crystal-designer-app .cbd-section-codes label,
#crystal-designer-app .cbd-code-row span,
#crystal-designer-app .cbd-code-help,
#crystal-designer-app .cbd-code-active {
  color: rgba(255,248,237,.72) !important;
}

#crystal-designer-app .cbd-section-designer .cbd-field input,
#crystal-designer-app .cbd-code-input-row input {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff8ed !important;
}

#crystal-designer-app .cbd-section-designer .cbd-field input::placeholder,
#crystal-designer-app .cbd-code-input-row input::placeholder {
  color: rgba(255,248,237,.40) !important;
}

#crystal-designer-app .cbd-section-designer .cbd-field input:focus,
#crystal-designer-app .cbd-code-input-row input:focus {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(246,220,170,.68) !important;
  box-shadow:
    0 0 0 3px rgba(246,220,170,.13),
    0 14px 30px rgba(0,0,0,.16) !important;
}

#crystal-designer-app .cbd-code-panel {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(246,220,170,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#crystal-designer-app .cbd-code-row strong,
#crystal-designer-app .cbd-code-active b {
  color: #f6dca8 !important;
}

#crystal-designer-app .cbd-mini-btn {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff8ed !important;
}

#crystal-designer-app .cbd-mini-btn:hover,
#crystal-designer-app .cbd-mini-btn:focus-visible {
  background: linear-gradient(135deg, #fff0c9, #d8aa4f) !important;
  border-color: rgba(246,220,170,.74) !important;
  color: #081425 !important;
}

#crystal-designer-app .cbd-preview-bead.is-dropped {

}

#crystal-designer-app .cbd-preview-bead.is-rolling {

}

@media (max-width: 1180px) {
  #crystal-designer-app .cbd-summary-panel {
    background: rgba(10,24,42,.92) !important;
  }

  #crystal-designer-app .cbd-summary-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #crystal-designer-app .cbd-section-priority-size,
  #crystal-designer-app .cbd-section-priority-price {
    align-self: stretch !important;
  }
}

@media (max-width: 860px) {
  #crystal-designer-app .cbd-summary-inner {
    grid-template-columns: 1fr !important;
  }

  #crystal-designer-app .cbd-size-card.cbd-size-card-priority strong {
    font-size: clamp(42px, 12vw, 56px) !important;
  }
}


/* ===== ASTRIS Marketplace Rules Link v11 =====
   Adds a clear rules link inside the marketplace opt-in modal.
*/

.cbd-modal-rules-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  margin: 4px 0 8px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(246,220,170,.42) !important;
  background: rgba(246,220,170,.12) !important;
  color: #f7dfad !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease !important;
}

.cbd-modal-rules-link::after {
  content: "↗" !important;
  margin-left: 8px !important;
  font-size: 12px !important;
  opacity: .9 !important;
}

.cbd-modal-rules-link:hover,
.cbd-modal-rules-link:focus-visible {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, rgba(246,220,170,.95), rgba(216,170,79,.92)) !important;
  border-color: rgba(246,220,170,.72) !important;
  color: #081425 !important;
  box-shadow:
    0 18px 42px rgba(157,110,30,.24),
    0 0 0 4px rgba(246,220,170,.12) !important;
}

.cbd-modal-rules-link:active {
  transform: translateY(0) scale(.98) !important;
}


/* ===== ASTRIS Designer Share + Modal Button v12 =====
   Changes:
   - Bigger marketplace modal buttons.
   - Add a proper pre-checkout share-link control so creator code is not confused with design share code.
*/

#crystal-designer-app .cbd-current-share-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 12px 0 12px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 86% 10%, rgba(246,220,170,.18), transparent 32%),
    rgba(7,17,31,.34) !important;
  border: 1px solid rgba(246,220,170,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#crystal-designer-app .cbd-current-share-panel span {
  display: block !important;
  margin: 0 0 4px !important;
  color: rgba(246,220,170,.92) !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

#crystal-designer-app .cbd-current-share-panel p {
  margin: 0 !important;
  color: rgba(255,248,237,.74) !important;
  font-size: 11px !important;
  line-height: 1.38 !important;
}

#crystal-designer-app .cbd-share-current-btn {
  min-width: 104px !important;
  height: 38px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #fff0c9, #d8aa4f) !important;
  border-color: rgba(246,220,170,.72) !important;
  color: #081425 !important;
  box-shadow: 0 10px 22px rgba(216,170,79,.16) !important;
}

#crystal-designer-app .cbd-share-current-btn:hover,
#crystal-designer-app .cbd-share-current-btn:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow:
    0 15px 30px rgba(216,170,79,.22),
    0 0 0 3px rgba(246,220,170,.10) !important;
}

.cbd-modal-overlay .cbd-modal-card {
  width: min(560px, calc(100vw - 34px)) !important;
}

.cbd-modal-overlay .cbd-modal-actions {
  gap: 12px !important;
  margin-top: 22px !important;
}

.cbd-modal-overlay .cbd-modal-actions .cbd-btn,
.cbd-modal-overlay .cbd-modal-rules-link {
  min-width: 178px !important;
  min-height: 48px !important;
  padding: 13px 22px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
  text-decoration: none !important;
}

.cbd-modal-overlay .cbd-modal-actions .cbd-btn:hover,
.cbd-modal-overlay .cbd-modal-actions .cbd-btn:focus-visible,
.cbd-modal-overlay .cbd-modal-rules-link:hover,
.cbd-modal-overlay .cbd-modal-rules-link:focus-visible {
  transform: translateY(-2px) !important;
}

.cbd-modal-overlay .cbd-modal-actions .cbd-btn:active,
.cbd-modal-overlay .cbd-modal-rules-link:active {
  transform: translateY(0) scale(.98) !important;
}

.cbd-modal-overlay .cbd-modal-rules-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin-top: 12px !important;
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-current-share-panel {
    grid-template-columns: 1fr !important;
  }

  #crystal-designer-app .cbd-share-current-btn {
    width: 100% !important;
  }

  .cbd-modal-overlay .cbd-modal-actions {
    grid-template-columns: 1fr !important;
  }

  .cbd-modal-overlay .cbd-modal-actions .cbd-btn,
  .cbd-modal-overlay .cbd-modal-rules-link {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* ===== v14B: Designer info only after share / designer opt-in ===== */
#crystal-designer-app .cbd-section-designer {
  display: none !important;
}

.cbd-modal-overlay .cbd-modal-card {
  width: min(640px, calc(100vw - 34px)) !important;
}

.cbd-modal-lead {
  color: rgba(255,255,255,.90) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.cbd-designer-profile-form {
  display: grid !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(246,220,170,.18) !important;
}

.cbd-designer-profile-form .cbd-field {
  margin: 0 !important;
}

.cbd-designer-profile-form .cbd-field label {
  display: block !important;
  margin-bottom: 7px !important;
  color: rgba(255,248,237,.82) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.cbd-designer-profile-form .cbd-field input {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff8ed !important;
  outline: none !important;
}

.cbd-designer-profile-form .cbd-field input::placeholder {
  color: rgba(255,248,237,.44) !important;
}

.cbd-designer-profile-form .cbd-field input:focus {
  border-color: rgba(246,220,170,.68) !important;
  box-shadow: 0 0 0 3px rgba(246,220,170,.14) !important;
}

.cbd-modal-error {
  min-height: 18px !important;
  color: #ffd8d8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.cbd-modal-overlay .cbd-modal-actions {
  gap: 14px !important;
  margin-top: 24px !important;
}

.cbd-modal-overlay .cbd-modal-actions .cbd-btn,
.cbd-modal-overlay .cbd-modal-rules-link {
  min-width: 220px !important;
  min-height: 56px !important;
  padding: 16px 26px !important;
  font-size: 15px !important;
  border-radius: 999px !important;
}

@media (max-width: 760px) {
  .cbd-modal-overlay .cbd-modal-actions .cbd-btn,
  .cbd-modal-overlay .cbd-modal-rules-link {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* v19F Moonsyl designer preview: stronger 3D crystal depth */
#crystal-designer-app .cbd-preview image,
#crystal-designer-app .cbd-preview img {

}

#crystal-designer-app .cbd-preview-bead {

}

#crystal-designer-app .cbd-preview-bead:hover {

}

#crystal-designer-app .cbd-preview-bead.is-rolling,
#crystal-designer-app .cbd-preview-bead.is-new {

}

#crystal-designer-app .cbd-preview-svg > circle:first-of-type,
#crystal-designer-app .cbd-preview svg > circle:first-of-type {

}


/* Moonsyl v19G: cleaner crystal preview, no artificial white rim */
#crystal-designer-app .cbd-preview image,
#crystal-designer-app .cbd-preview img {
  border: 0 !important;
  outline: 0 !important;

}

#crystal-designer-app .cbd-preview-bead {

}

#crystal-designer-app .cbd-preview-bead rect,
#crystal-designer-app .cbd-preview-bead ellipse {
  stroke: transparent !important;
  stroke-width: 0 !important;
}

#crystal-designer-app .cbd-preview-bead:hover {

}

#crystal-designer-app .cbd-preview-bead.is-rolling,
#crystal-designer-app .cbd-preview-bead.is-dropped {

}

#crystal-designer-app .cbd-preview-svg > circle {
  stroke: rgba(246,220,170,.36) !important;
}

#crystal-designer-app .cbd-modal-actions .cbd-btn {
  font-size: 16px !important;
}


/* Moonsyl v19H - remove preview bead white rim, keep shadow-only 3D */
#crystal-designer-app .cbd-preview-bead,
#crystal-designer-app .cbd-preview-bead *,
#crystal-designer-app .cbd-preview-bead image,
#crystal-designer-app .cbd-preview-bead circle,
#crystal-designer-app .cbd-preview-bead ellipse,
#crystal-designer-app .cbd-preview-bead rect {
  outline: 0 !important;
  stroke: transparent !important;
  stroke-width: 0 !important;

}

#crystal-designer-app .cbd-preview-bead {

}

#crystal-designer-app .cbd-preview-bead:hover {

}

#crystal-designer-app .cbd-preview-bead image {
  transform-box: fill-box !important;
  transform-origin: center !important;
  transform: scale(1.10) !important;

}

#crystal-designer-app .cbd-preview image,
#crystal-designer-app .cbd-preview img {

  border: 0 !important;
  outline: 0 !important;
}

#crystal-designer-app .cbd-preview-svg circle[stroke="#d8d2c6"] {
  stroke: rgba(246,220,170,.30) !important;
  stroke-width: 1.4 !important;
}

#crystal-designer-app .cbd-preview-svg rect,
#crystal-designer-app .cbd-preview-svg ellipse {
  stroke: transparent !important;
  stroke-width: 0 !important;
}


/* v19I: no white rim + more breathing room in center preview */
#crystal-designer-app .cbd-preview-svg .cbd-preview-bead,
#crystal-designer-app .cbd-preview-svg .cbd-preview-bead *,
#crystal-designer-app .cbd-preview-svg image,
#crystal-designer-app .cbd-preview-svg circle,
#crystal-designer-app .cbd-preview-svg rect,
#crystal-designer-app .cbd-preview-svg ellipse {
  outline: none !important;
  border: 0 !important;
  stroke-width: 0 !important;
}

#crystal-designer-app .cbd-preview-svg > circle:first-of-type,
#crystal-designer-app .cbd-preview-svg > circle:nth-of-type(1) {
  stroke-width: 2px !important;
}

#crystal-designer-app .cbd-preview-svg .cbd-preview-bead {

}

#crystal-designer-app .cbd-preview-svg .cbd-preview-bead image {
  transform-origin: center center !important;
  image-rendering: auto !important;

}

#crystal-designer-app .cbd-preview-bead:hover {

}

/* ===== Moonsyl v20G mobile-safe-basic =====
   Conservative mobile layout: no complex drawer rewrite, no desktop changes. */
@media (max-width: 760px) {
  #crystal-designer-app,
  #crystal-designer-app * {
    box-sizing: border-box !important;
  }

  #crystal-designer-app {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background:
      radial-gradient(circle at 50% 12%, rgba(246,220,170,.13), transparent 28%),
      linear-gradient(180deg, #07111f 0%, #10243d 52%, #07111f 100%) !important;
  }

  #crystal-designer-app .cbd-root {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    display: block !important;
  }

  #crystal-designer-app .cbd-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    min-height: 48px !important;
    width: calc(100% - 16px) !important;
    margin: 8px auto 0 !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(16px) !important;
  }

  #crystal-designer-app .cbd-topbar-left,
  #crystal-designer-app .cbd-topbar-right {
    gap: 7px !important;
    min-width: 0 !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    font-size: 14px !important;
    letter-spacing: .18em !important;
    white-space: nowrap !important;
  }

  #crystal-designer-app .cbd-topbar-mode,
  #crystal-designer-app .cbd-topbar-divider {
    display: none !important;
  }

  #crystal-designer-app .cbd-topbar-guide,
  #crystal-designer-app .cbd-topbar-right a,
  #crystal-designer-app .cbd-topbar-exit {
    min-height: 34px !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
  }

  #crystal-designer-app .cbd-layout,
  #crystal-designer-app .cbd-topbar + .cbd-layout {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 10px 10px 96px !important;
    overflow: visible !important;
  }

  #crystal-designer-app .cbd-preview {
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 350px !important;
    max-height: none !important;
    padding: 16px 10px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
      radial-gradient(circle at 50% 48%, rgba(246,220,170,.16), rgba(255,255,255,.05) 38%, rgba(255,255,255,.02) 68%),
      rgba(255,255,255,.07) !important;
  }

  #crystal-designer-app .cbd-preview::before,
  #crystal-designer-app .cbd-preview::after {
    opacity: .45 !important;
  }

  #crystal-designer-app .cbd-preview svg,
  #crystal-designer-app .cbd-preview-svg {
    width: min(96vw, 390px) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 350px !important;
    overflow: visible !important;
  }

  #crystal-designer-app .cbd-summary-panel {
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #crystal-designer-app .cbd-size-card,
  #crystal-designer-app .cbd-price-card,
  #crystal-designer-app .cbd-creator-card,
  #crystal-designer-app .cbd-card {
    width: 100% !important;
    border-radius: 22px !important;
    border: 1px solid rgba(246,220,170,.14) !important;
    background: rgba(255,255,255,.09) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(14px) !important;
  }

  #crystal-designer-app .cbd-size-card {
    padding: 16px !important;
  }

  #crystal-designer-app .cbd-size-card span,
  #crystal-designer-app .cbd-price-card p span,
  #crystal-designer-app .cbd-card h2,
  #crystal-designer-app .cbd-left-title {
    font-size: 12px !important;
    letter-spacing: .13em !important;
  }

  #crystal-designer-app .cbd-size-card strong {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 1 !important;
    color: #fff8ed !important;
  }

  #crystal-designer-app .cbd-size-card small {
    font-size: 13px !important;
    line-height: 1.42 !important;
    color: rgba(255,248,237,.78) !important;
  }

  #crystal-designer-app .cbd-price-card {
    padding: 14px !important;
  }

  #crystal-designer-app .cbd-price-card h3 {
    font-size: 26px !important;
    line-height: 1.08 !important;
  }

  #crystal-designer-app .cbd-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #crystal-designer-app .cbd-actions .cbd-btn,
  #crystal-designer-app .cbd-actions button,
  #crystal-designer-app #cbd-cart,
  #crystal-designer-app .cbd-btn {
    min-height: 50px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  #crystal-designer-app #cbd-cart {
    grid-column: auto !important;
    background: linear-gradient(135deg, #fff0c9, #f6dca8 52%, #d8aa4f) !important;
    color: #07111f !important;
    box-shadow: 0 14px 30px rgba(216,170,79,.22) !important;
  }

  #crystal-designer-app .cbd-card:not(.cbd-summary-panel) {
    order: 3 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  #crystal-designer-app .cbd-left-title {
    margin-bottom: 10px !important;
  }

  #crystal-designer-app .cbd-tabs-scroll,
  #crystal-designer-app .cbd-chip-row,
  #crystal-designer-app .cbd-category-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
  }

  #crystal-designer-app .cbd-tabs-scroll > *,
  #crystal-designer-app .cbd-chip-row > *,
  #crystal-designer-app .cbd-category-row > * {
    flex: 0 0 auto !important;
  }

  #crystal-designer-app .cbd-search,
  #crystal-designer-app input[type="search"],
  #crystal-designer-app input[type="text"] {
    min-height: 44px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
  }

  #crystal-designer-app .cbd-gems-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 92px !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, minmax(96px, auto)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 2px 10px !important;
    scroll-snap-type: x proximity !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    min-width: 92px !important;
    min-height: 96px !important;
    padding: 10px 8px !important;
    scroll-snap-align: start !important;
    border-radius: 16px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 6px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem b {
    font-size: 12px !important;
    line-height: 1.14 !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem small,
  #crystal-designer-app .cbd-gems-grid .cbd-gem-meta {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  #crystal-designer-app .cbd-modal,
  #crystal-designer-app .cbd-dialog,
  #crystal-designer-app .cbd-modal-card {
    width: min(94vw, 440px) !important;
    max-height: min(84svh, 720px) !important;
    overflow-y: auto !important;
    border-radius: 24px !important;
  }

  #crystal-designer-app .cbd-modal-actions,
  #crystal-designer-app .cbd-dialog-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #crystal-designer-app .cbd-modal-actions .cbd-btn,
  #crystal-designer-app .cbd-dialog-actions .cbd-btn {
    min-height: 50px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 390px) {
  #crystal-designer-app .cbd-preview {
    min-height: 318px !important;
  }

  #crystal-designer-app .cbd-preview svg,
  #crystal-designer-app .cbd-preview-svg {
    width: min(98vw, 340px) !important;
    max-height: 318px !important;
  }

  #crystal-designer-app .cbd-gems-grid {
    grid-auto-columns: 86px !important;
    grid-template-rows: repeat(2, minmax(90px, auto)) !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    min-width: 86px !important;
    min-height: 90px !important;
  }
}

/* ===== Moonsyl v20H mobile layout by user wireframe =====
   Keep desktop untouched. Mobile uses a clear top action bar, preview, then material picker. */
#crystal-designer-app .cbd-mobile-top-actions,
#crystal-designer-app .cbd-mobile-statusbar,
#crystal-designer-app .cbd-mobile-inspiration-btn {
  display: none !important;
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  #crystal-designer-app {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 !important;
    background: #f7f5f0 !important;
    color: #181512 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  #crystal-designer-app .cbd-root {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    background: #f7f5f0 !important;
    color: #181512 !important;
  }

  #crystal-designer-app .cbd-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(24,21,18,.16) !important;
    background: rgba(255,255,255,.96) !important;
    color: #181512 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
    backdrop-filter: blur(12px) !important;
  }

  #crystal-designer-app .cbd-topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #crystal-designer-app .cbd-topbar-exit {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #5f5a52 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #191714 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
  }

  #crystal-designer-app .cbd-topbar-right {
    display: none !important;
  }

  #crystal-designer-app .cbd-mobile-top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    appearance: none !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 0 !important;
    border: 1px solid rgba(24,21,18,.22) !important;
    background: #fff !important;
    color: #171512 !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.04) !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    border-color: rgba(216,170,79,.46) !important;
    background: linear-gradient(135deg, #fff7df, #f4d78d) !important;
  }

  #crystal-designer-app .cbd-mobile-share-btn {
    background: #fff !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    appearance: none !important;
    width: 38px !important;
    height: 36px !important;
    min-width: 38px !important;
    border: 0 !important;
    background: transparent !important;
    display: inline-grid !important;
    place-items: center !important;
    gap: 4px !important;
    padding: 7px 4px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn span {
    display: block !important;
    width: 25px !important;
    height: 1.5px !important;
    border-radius: 999px !important;
    background: #7a746b !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar {
    position: sticky !important;
    top: 58px !important;
    z-index: 70 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 10px 6px !important;
    background: rgba(247,245,240,.96) !important;
    border-bottom: 1px solid rgba(24,21,18,.08) !important;
    backdrop-filter: blur(10px) !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar span,
  #crystal-designer-app .cbd-mobile-statusbar strong {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(24,21,18,.20) !important;
    background: rgba(255,255,255,.86) !important;
    color: #211d17 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: .02em !important;
    max-width: calc(50vw - 14px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar strong {
    color: #080807 !important;
    border-color: rgba(216,170,79,.42) !important;
    background: #fff9e8 !important;
  }

  #crystal-designer-app .cbd-layout,
  #crystal-designer-app .cbd-topbar + .cbd-layout {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #f7f5f0 !important;
  }

  #crystal-designer-app .cbd-preview {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 432px !important;
    max-height: none !important;
    padding: 20px 10px 78px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(24,21,18,.14) !important;
    background:
      radial-gradient(circle at 50% 43%, rgba(216,170,79,.16), transparent 31%),
      linear-gradient(180deg, #fff 0%, #fbfaf7 100%) !important;

    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-preview svg,
  #crystal-designer-app .cbd-preview-svg {
    width: min(76vw, 310px) !important;
    max-width: 310px !important;
    height: auto !important;
    max-height: 310px !important;
    display: block !important;
    overflow: visible !important;
    margin: 0 auto !important;
  }

  #crystal-designer-app .cbd-preview-svg text {
    font-size: 12px !important;
    fill: rgba(42,38,32,.50) !important;
    font-weight: 800 !important;
  }

  #crystal-designer-app .cbd-mobile-inspiration-btn {
    position: absolute !important;
    left: 12px !important;
    bottom: 18px !important;
    z-index: 4 !important;
    min-width: 124px !important;
    height: 44px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(24,21,18,.18) !important;
    background: rgba(255,255,255,.94) !important;
    color: #171512 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.08) !important;
  }

  #crystal-designer-app .cbd-preview-trash {
    right: 16px !important;
    bottom: 18px !important;
    z-index: 5 !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;

  }

  #crystal-designer-app .cbd-preview-trash-icon {
    width: 34px !important;
    height: 34px !important;
    background: #0c0b09 !important;
    color: #fff !important;
    border-radius: 10px !important;

  }

  #crystal-designer-app .cbd-preview-trash svg {
    width: 22px !important;
    height: 22px !important;
    fill: currentColor !important;
  }

  #crystal-designer-app .cbd-preview-trash-text,
  #crystal-designer-app .cbd-preview-trash small {
    display: none !important;
  }

  #crystal-designer-app .cbd-summary-panel {
    display: none !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    order: 2 !important;
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 52svh !important;
    padding: 10px 8px 14px !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    grid-template-rows: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    border: 0 !important;
    border-top: 1px solid rgba(24,21,18,.16) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-stone-panel .cbd-left-title {
    display: none !important;
  }

  #crystal-designer-app .cbd-stone-panel .cbd-search-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
  }

  #crystal-designer-app .cbd-search {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(24,21,18,.22) !important;
    background: #fff !important;
    color: #181512 !important;
    padding: 0 15px !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    box-shadow: 0 5px 13px rgba(0,0,0,.04) !important;
  }

  #crystal-designer-app .cbd-stone-panel .cbd-tabs,
  #crystal-designer-app .cbd-stone-panel .cbd-tabs-scroll {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2px 0 8px 0 !important;
    margin: 0 !important;
    border-right: 1px solid rgba(24,21,18,.14) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #crystal-designer-app .cbd-tab {
    flex: 0 0 auto !important;
    width: calc(100% - 8px) !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid rgba(24,21,18,.18) !important;
    color: #171512 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #crystal-designer-app .cbd-tab.active {
    color: #091321 !important;
    border-color: rgba(216,170,79,.65) !important;
    background: linear-gradient(135deg, #fff3cf, #f4d88f) !important;
  }

  #crystal-designer-app .cbd-gems-grid {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-columns: initial !important;
    grid-template-rows: none !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 3px 18px 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: none !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 102px !important;
    padding: 9px 6px !important;
    border-radius: 0 !important;
    background: #fff !important;
    border: 1px solid rgba(24,21,18,.16) !important;
    box-shadow: 0 7px 15px rgba(0,0,0,.04) !important;
    scroll-snap-align: unset !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto 6px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem b {
    font-size: 12.5px !important;
    line-height: 1.15 !important;
    color: #171512 !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem small {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #655e55 !important;
  }

  #crystal-designer-app .cbd-empty {
    grid-column: 1 / -1 !important;
    color: #6d655d !important;
    background: #fbfaf7 !important;
  }

  .cbd-mobile-drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483646 !important;
    background: rgba(0,0,0,.62) !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .cbd-mobile-drawer-panel {
    width: min(82vw, 340px) !important;
    height: 100% !important;
    background: #fff !important;
    color: #171512 !important;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom)) !important;
    box-shadow: -24px 0 60px rgba(0,0,0,.24) !important;
    overflow-y: auto !important;
    position: relative !important;
  }

  .cbd-mobile-drawer-close {
    position: absolute !important;
    right: 14px !important;
    top: 14px !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(24,21,18,.18) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #34302a !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  .cbd-mobile-drawer-kicker {
    margin: 4px 48px 8px 0 !important;
    color: #b08a3c !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
  }

  .cbd-mobile-drawer-panel h3 {
    margin: 0 48px 18px 0 !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
    color: #171512 !important;
  }

  .cbd-mobile-drawer-code {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: #fbfaf7 !important;
    border: 1px solid rgba(24,21,18,.12) !important;
    margin-bottom: 14px !important;
  }

  .cbd-mobile-drawer-code span {
    grid-column: 1 / -1 !important;
    color: #776f65 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  .cbd-mobile-drawer-code strong {
    color: #b08a3c !important;
    font-size: 20px !important;
    letter-spacing: .08em !important;
  }

  .cbd-mobile-drawer-code button,
  .cbd-mobile-drawer-input-row button,
  .cbd-mobile-drawer-inspiration {
    min-height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(24,21,18,.16) !important;
    background: #171512 !important;
    color: #fff !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .cbd-mobile-drawer-links {
    display: grid !important;
    gap: 9px !important;
    margin: 14px 0 18px !important;
  }

  .cbd-mobile-drawer-links a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 15px !important;
    border-radius: 16px !important;
    background: #fbfaf7 !important;
    color: #171512 !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
  }

  .cbd-mobile-drawer-panel label {
    display: block !important;
    margin: 0 0 7px !important;
    color: #776f65 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  .cbd-mobile-drawer-input-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .cbd-mobile-drawer-input-row input {
    min-width: 0 !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(24,21,18,.18) !important;
    padding: 0 14px !important;
    font-size: 16px !important;
    background: #fff !important;
    color: #171512 !important;
  }

  .cbd-mobile-drawer-inspiration {
    width: 100% !important;
    background: linear-gradient(135deg, #fff2c8, #d8aa4f) !important;
    color: #07111f !important;
    border-color: rgba(216,170,79,.54) !important;
  }

  .cbd-modal-overlay .cbd-modal-card {
    width: min(92vw, 430px) !important;
    max-height: 82svh !important;
    overflow-y: auto !important;
    border-radius: 24px !important;
  }

  .cbd-mobile-modal-code-row input {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 390px) {
  #crystal-designer-app .cbd-mobile-top-btn {
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 34px !important;
    min-width: 34px !important;
  }

  #crystal-designer-app .cbd-preview {
    min-height: 390px !important;
  }

  #crystal-designer-app .cbd-preview svg,
  #crystal-designer-app .cbd-preview-svg {
    width: min(78vw, 285px) !important;
    max-width: 285px !important;
    max-height: 285px !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    height: 390px !important;
    min-height: 390px !important;
  }

  #crystal-designer-app .cbd-gems-grid {
    gap: 8px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    min-height: 96px !important;
  }
}

/* ===== Moonsyl v20I mobile tune: wrist info in preview, smaller controls, fixed preview, gem detail camera ===== */
#crystal-designer-app .cbd-gem-detail-icon {
  display: none !important;
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-topbar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 7px 8px !important;
    grid-template-columns: minmax(78px, 1fr) auto !important;
    gap: 5px !important;
  }

  #crystal-designer-app .cbd-topbar-exit {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 19px !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    font-size: 15px !important;
    max-width: 100% !important;
  }

  #crystal-designer-app .cbd-mobile-top-actions {
    gap: 4px !important;
    flex: 0 0 auto !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 33px !important;
    height: 32px !important;
    min-width: 33px !important;
    padding: 7px 4px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn span {
    width: 22px !important;
    height: 1.35px !important;
  }

  #crystal-designer-app .cbd-preview {
    min-height: 408px !important;
    padding: 38px 10px 70px !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  #crystal-designer-app .cbd-preview svg,
  #crystal-designer-app .cbd-preview-svg {
    width: min(78vw, 318px) !important;
    max-width: 318px !important;
    max-height: 318px !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar {
    position: absolute !important;
    left: 9px !important;
    right: 9px !important;
    top: 9px !important;
    z-index: 6 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar span,
  #crystal-designer-app .cbd-mobile-statusbar strong {
    min-height: 22px !important;
    padding: 2px 9px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    max-width: calc(50vw - 16px) !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(24,21,18,.16) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.035) !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar strong {
    background: rgba(255,249,232,.92) !important;
    border-color: rgba(216,170,79,.34) !important;
  }

  #crystal-designer-app .cbd-preview-svg > circle {
    stroke-width: 1 !important;
    opacity: .46 !important;
  }

  #crystal-designer-app .cbd-preview-svg > text {
    font-size: 8px !important;
    opacity: .58 !important;
    letter-spacing: .01em !important;
  }

  #crystal-designer-app .cbd-preview-svg text:not([data-preview-index]) {
    paint-order: normal !important;
  }

  #crystal-designer-app .cbd-mobile-inspiration-btn {
    min-width: 116px !important;
    height: 40px !important;
    bottom: 15px !important;
    font-size: 13px !important;
  }

  #crystal-designer-app .cbd-preview-trash {
    bottom: 15px !important;
  }

  #crystal-designer-app .cbd-preview-trash-icon {
    width: 31px !important;
    height: 31px !important;
    border-radius: 9px !important;
  }

  #crystal-designer-app .cbd-preview-trash svg {
    width: 19px !important;
    height: 19px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    position: relative !important;
    padding-top: 13px !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(24,21,18,.18) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.08) !important;
    color: #171512 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    pointer-events: auto !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon:active {
    transform: scale(.94) !important;
  }
}

@media (max-width: 390px) {
  #crystal-designer-app .cbd-topbar {
    grid-template-columns: minmax(68px, 1fr) auto !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    padding: 0 7px !important;
    font-size: 11.5px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 30px !important;
    min-width: 30px !important;
  }

  #crystal-designer-app .cbd-preview {
    min-height: 386px !important;
    padding-top: 36px !important;
  }

  #crystal-designer-app .cbd-preview svg,
  #crystal-designer-app .cbd-preview-svg {
    width: min(79vw, 292px) !important;
    max-width: 292px !important;
    max-height: 292px !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar span,
  #crystal-designer-app .cbd-mobile-statusbar strong {
    font-size: 10.8px !important;
    padding-inline: 7px !important;
  }
}

/* ===== Moonsyl v20J mobile fixed preview + picker layout =====
   Mobile only: keep wrist/total and bracelet preview visible above the material picker. */
@media (max-width: 760px) {
  html,
  body {
    overscroll-behavior: none !important;
  }

  #crystal-designer-app {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    touch-action: manipulation !important;
  }

  #crystal-designer-app .cbd-root {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-topbar {
    position: relative !important;
    top: auto !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 7px 8px !important;
    grid-template-columns: minmax(96px, 1fr) auto !important;
    gap: 4px !important;
    flex: 0 0 50px !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    font-size: 15px !important;
    max-width: 100% !important;
  }

  #crystal-designer-app .cbd-mobile-top-actions {
    gap: 4px !important;
    max-width: 216px !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    letter-spacing: -.01em !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 7px 3px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn span {
    width: 21px !important;
  }

  #crystal-designer-app .cbd-layout,
  #crystal-designer-app .cbd-topbar + .cbd-layout {
    height: calc(100svh - 50px) !important;
    min-height: 0 !important;
    max-height: calc(100svh - 50px) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(255px, 41svh) minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  #crystal-designer-app .cbd-preview {
    order: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 31px 10px 52px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 46%, rgba(216,170,79,.12), transparent 31%),
      linear-gradient(180deg, #fff 0%, #fbfaf7 100%) !important;
    border-bottom: 1px solid rgba(24,21,18,.13) !important;
    touch-action: manipulation !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar {
    position: absolute !important;
    left: 9px !important;
    right: 9px !important;
    top: 8px !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar span,
  #crystal-designer-app .cbd-mobile-statusbar strong {
    min-height: 21px !important;
    max-width: calc(50vw - 15px) !important;
    padding: 2px 8px !important;
    font-size: 10.8px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #crystal-designer-app .cbd-preview svg,
  #crystal-designer-app .cbd-preview-svg {
    width: min(70vw, 278px) !important;
    max-width: 278px !important;
    height: auto !important;
    max-height: 278px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    touch-action: manipulation !important;
    transform: translateY(2px) !important;
  }

  #crystal-designer-app .cbd-preview-svg > circle {
    stroke-width: .85 !important;
    opacity: .34 !important;
  }

  #crystal-designer-app .cbd-preview-svg > text {
    font-size: 7px !important;
    opacity: .42 !important;
  }

  #crystal-designer-app .cbd-mobile-inspiration-btn {
    left: 11px !important;
    bottom: 12px !important;
    height: 36px !important;
    min-width: 112px !important;
    padding: 0 13px !important;
    font-size: 12.5px !important;
  }

  #crystal-designer-app .cbd-preview-trash {
    right: 14px !important;
    bottom: 9px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  #crystal-designer-app .cbd-preview-trash-icon {
    width: 29px !important;
    height: 29px !important;
    border-radius: 9px !important;
  }

  #crystal-designer-app .cbd-preview-trash svg {
    width: 18px !important;
    height: 18px !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    order: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    grid-template-rows: 44px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px 7px 10px !important;
    overflow: hidden !important;
    background: #fff !important;
    border-top: 1px solid rgba(24,21,18,.16) !important;
  }

  #crystal-designer-app .cbd-tabs-scroll,
  #crystal-designer-app .cbd-tabs {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #crystal-designer-app .cbd-search-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    align-self: center !important;
  }

  #crystal-designer-app .cbd-gems-grid,
  #crystal-designer-app .cbd-gems {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    min-height: 112px !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon {
    width: 23px !important;
    height: 23px !important;
    top: 5px !important;
    right: 5px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 390px) {
  #crystal-designer-app .cbd-topbar {
    grid-template-columns: minmax(76px, 1fr) auto !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    padding: 0 6px !important;
    font-size: 10.8px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 28px !important;
    min-width: 28px !important;
  }

  #crystal-designer-app .cbd-layout,
  #crystal-designer-app .cbd-topbar + .cbd-layout {
    grid-template-rows: minmax(238px, 39svh) minmax(0, 1fr) !important;
  }

  #crystal-designer-app .cbd-preview {
    padding-top: 29px !important;
    padding-bottom: 48px !important;
  }

  #crystal-designer-app .cbd-preview svg,
  #crystal-designer-app .cbd-preview-svg {
    width: min(69vw, 248px) !important;
    max-width: 248px !important;
    max-height: 248px !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }
}

/* ===== Moonsyl v20K mobile layout: strict wireframe preview + picker ===== */
@media (max-width: 760px) {
  html,
  body {
    overscroll-behavior: none !important;
  }

  #crystal-designer-app,
  #crystal-designer-app .cbd-root {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #fbfaf7 !important;
    color: #171412 !important;
    touch-action: manipulation !important;
  }

  #crystal-designer-app .cbd-root {
    display: flex !important;
    flex-direction: column !important;
  }

  #crystal-designer-app .cbd-topbar {
    flex: 0 0 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    border-bottom: 1px solid rgba(18,18,18,.15) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
    z-index: 50 !important;
  }

  #crystal-designer-app .cbd-topbar-left {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
  }

  #crystal-designer-app .cbd-topbar-exit {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    color: #5d5a55 !important;
    font-size: 22px !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    min-width: 0 !important;
    max-width: 118px !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #171412 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
  }

  #crystal-designer-app .cbd-topbar-right {
    display: none !important;
  }

  #crystal-designer-app .cbd-mobile-top-actions {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    min-width: 52px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: #171412 !important;
    background: #fff !important;
    border: 1px solid rgba(20,20,20,.18) !important;
    box-shadow: none !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    background: linear-gradient(135deg, #fff2c9, #efd07a) !important;
    border-color: rgba(216,168,74,.55) !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn span {
    width: 26px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: #736f68 !important;
    display: block !important;
  }

  #crystal-designer-app .cbd-layout {
    flex: 1 1 auto !important;
    height: calc(100dvh - 54px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #fbfaf7 !important;
  }

  #crystal-designer-app .cbd-preview {
    order: 1 !important;
    flex: 0 0 45dvh !important;
    height: 45dvh !important;
    min-height: 295px !important;
    max-height: 390px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(18,18,18,.16) !important;
    background: #fbfaf7 !important;

    overflow: hidden !important;
    touch-action: pan-y !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 8 !important;
    width: auto !important;
    height: 24px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar span,
  #crystal-designer-app .cbd-mobile-statusbar strong {
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    max-width: 47vw !important;
    min-width: 0 !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    color: #171412 !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(20,20,20,.22) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #crystal-designer-app .cbd-preview::before,
  #crystal-designer-app .cbd-preview::after {
    display: none !important;
    content: none !important;
  }

  #crystal-designer-app .cbd-preview .cbd-preview-svg,
  #crystal-designer-app .cbd-preview svg {
    position: absolute !important;
    left: 50% !important;
    top: 48% !important;
    transform: translate(-50%, -50%) !important;
    width: min(64vw, 250px) !important;
    height: min(64vw, 250px) !important;
    max-width: 250px !important;
    max-height: 250px !important;
    min-width: 190px !important;
    min-height: 190px !important;
    margin: 0 !important;
    overflow: visible !important;
    touch-action: none !important;
  }

  #crystal-designer-app .cbd-preview svg > circle {
    stroke-width: 1 !important;
    opacity: .38 !important;
  }

  #crystal-designer-app .cbd-preview svg text {
    font-size: 7px !important;
    fill: rgba(90,84,76,.50) !important;
    font-weight: 700 !important;
  }

  #crystal-designer-app .cbd-preview image,
  #crystal-designer-app .cbd-preview img {

  }

  #crystal-designer-app .cbd-mobile-inspiration-btn {
    position: absolute !important;
    left: 12px !important;
    bottom: 13px !important;
    z-index: 10 !important;
    height: 34px !important;
    min-height: 34px !important;
    width: auto !important;
    min-width: 108px !important;
    max-width: 142px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: #171412 !important;
    background: #fff !important;
    border: 1px solid rgba(20,20,20,.18) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.07) !important;
    white-space: nowrap !important;
  }

  #crystal-designer-app .cbd-preview-trash {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 10 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;

  }

  #crystal-designer-app .cbd-preview-trash-icon {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #090909 !important;
    background: transparent !important;
  }

  #crystal-designer-app .cbd-preview-trash svg {
    width: 31px !important;
    height: 31px !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  #crystal-designer-app .cbd-preview-trash-text,
  #crystal-designer-app .cbd-preview-trash small {
    display: none !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    order: 2 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 94px minmax(0, 1fr) !important;
    grid-template-rows: 48px minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-stone-panel .cbd-left-title {
    display: none !important;
  }

  #crystal-designer-app .cbd-search-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 7px 7px 5px 10px !important;
    display: block !important;
    border-left: 1px solid rgba(18,18,18,.16) !important;
    background: #fff !important;
  }

  #crystal-designer-app .cbd-search {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    padding: 0 13px !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 34px !important;
    color: #171412 !important;
    background: #fff !important;
    border: 1px solid rgba(20,20,20,.22) !important;
    box-shadow: none !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 94px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 8px 20px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-right: 1px solid rgba(18,18,18,.16) !important;
    background: #fff !important;
    scrollbar-width: thin !important;
  }

  #crystal-designer-app .cbd-tab {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    flex: 0 0 auto !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    color: #171412 !important;
    background: #fff !important;
    border: 1px solid rgba(20,20,20,.22) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  #crystal-designer-app .cbd-tab.active {
    background: linear-gradient(135deg, #fff2c9, #efd07a) !important;
    border-color: rgba(216,168,74,.45) !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 7px 90px 10px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 132px !important;
    gap: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #fff !important;
    border-left: 1px solid rgba(18,18,18,.06) !important;
    scrollbar-width: thin !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    width: 100% !important;
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
    padding: 9px 5px 8px !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    background: #fff !important;
    border: 1px solid rgba(20,20,20,.15) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.035) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    object-fit: contain !important;
    margin: 0 auto 2px !important;
    border-radius: 999px !important;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,.18)) !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-meta {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem b {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #171412 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem small {
    display: block !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    color: #6f6861 !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #crystal-designer-app .cbd-gem-detail-btn {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #171412 !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(20,20,20,.16) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.12) !important;
    z-index: 4 !important;
  }

  #crystal-designer-app .cbd-summary-panel {
    display: none !important;
  }

  #crystal-designer-app .cbd-empty {
    grid-column: 1 / -1 !important;
    min-height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 390px) {
  #crystal-designer-app .cbd-topbar-title {
    max-width: 96px !important;
    font-size: 15px !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    min-width: 48px !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 30px !important;
    min-width: 30px !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    width: 86px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    grid-auto-rows: 126px !important;
    gap: 8px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
  }
}


/* ===== Moonsyl v20L mobile exact wireframe fix =====
   Fixes: inline Custom Liquid preview-height override, visible picker area, small trash icon. */
@media (max-width: 760px) {
  #crystal-designer-app,
  #crystal-designer-app .cbd-root {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    height: calc(100dvh - 54px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 54px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Match the Custom Liquid selector specificity so preview no longer takes full screen. */
  #crystal-designer-app .cbd-topbar + .cbd-layout .cbd-preview,
  #crystal-designer-app .cbd-layout .cbd-preview,
  #crystal-designer-app .cbd-preview {
    order: 1 !important;
    flex: 0 0 clamp(250px, 36dvh, 315px) !important;
    height: clamp(250px, 36dvh, 315px) !important;
    min-height: clamp(250px, 36dvh, 315px) !important;
    max-height: clamp(250px, 36dvh, 315px) !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout .cbd-card,
  #crystal-designer-app .cbd-layout .cbd-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Preview content: centered but not oversized, leaving room for picker below. */
  #crystal-designer-app .cbd-preview .cbd-preview-svg,
  #crystal-designer-app .cbd-preview svg {
    left: 50% !important;
    top: 52% !important;
    transform: translate(-50%, -50%) !important;
    width: min(58vw, 218px) !important;
    height: min(58vw, 218px) !important;
    min-width: 178px !important;
    min-height: 178px !important;
    max-width: 218px !important;
    max-height: 218px !important;
  }

  #crystal-designer-app .cbd-preview svg > circle {
    stroke-width: .8 !important;
    opacity: .24 !important;
  }

  #crystal-designer-app .cbd-preview svg text {
    font-size: 6px !important;
    opacity: .55 !important;
  }

  /* Force the lower bead picker to always be visible in the remaining viewport. */
  #crystal-designer-app .cbd-stone-panel {
    order: 2 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 250px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 94px minmax(0, 1fr) !important;
    grid-template-rows: 48px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll,
  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    min-height: 0 !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    grid-auto-rows: 126px !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
  }

  /* Trash: never inherit the old large pill or drag-hover state on mobile. */
  #crystal-designer-app .cbd-preview-trash,
  #crystal-designer-app .cbd-preview-trash:hover,
  #crystal-designer-app .cbd-preview-trash:focus-visible,
  #crystal-designer-app .cbd-preview-trash:active,
  #crystal-designer-app .cbd-preview-trash.is-drop-active,
  #crystal-designer-app.cbd-trash-hover .cbd-preview-trash {
    position: absolute !important;
    left: auto !important;
    right: 14px !important;
    bottom: 13px !important;
    transform: none !important;
    z-index: 12 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 0 !important;

    overflow: hidden !important;
    animation: none !important;
  }

  #crystal-designer-app .cbd-preview-trash-icon,
  #crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-preview-trash-icon,
  #crystal-designer-app.cbd-trash-hover .cbd-preview-trash .cbd-preview-trash-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #080808 !important;
    background: transparent !important;

    animation: none !important;
  }

  #crystal-designer-app .cbd-preview-trash svg,
  #crystal-designer-app .cbd-preview-trash-icon svg {
    width: 27px !important;
    height: 27px !important;
    max-width: 27px !important;
    max-height: 27px !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
  }

  #crystal-designer-app .cbd-preview-trash-text,
  #crystal-designer-app .cbd-preview-trash small {
    display: none !important;
  }
}

@media (max-width: 390px) {
  #crystal-designer-app .cbd-topbar + .cbd-layout .cbd-preview,
  #crystal-designer-app .cbd-layout .cbd-preview,
  #crystal-designer-app .cbd-preview {
    flex-basis: clamp(238px, 35dvh, 298px) !important;
    height: clamp(238px, 35dvh, 298px) !important;
    min-height: clamp(238px, 35dvh, 298px) !important;
    max-height: clamp(238px, 35dvh, 298px) !important;
  }

  #crystal-designer-app .cbd-preview .cbd-preview-svg,
  #crystal-designer-app .cbd-preview svg {
    width: min(56vw, 200px) !important;
    height: min(56vw, 200px) !important;
    max-width: 200px !important;
    max-height: 200px !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    min-height: 246px !important;
  }
}

/* ===== Moonsyl v20M mobile detail tune =====
   User-requested mobile-only tweaks: larger preview, smaller picker, icon buttons, base fee badge. */
@media (max-width: 760px) {
  /* Give the bracelet preview more room and move the picker divider lower. */
  #crystal-designer-app .cbd-topbar + .cbd-layout .cbd-preview,
  #crystal-designer-app .cbd-layout .cbd-preview,
  #crystal-designer-app .cbd-preview {
    flex: 0 0 clamp(306px, 42dvh, 380px) !important;
    height: clamp(306px, 42dvh, 380px) !important;
    min-height: clamp(306px, 42dvh, 380px) !important;
    max-height: clamp(306px, 42dvh, 380px) !important;
  }

  #crystal-designer-app .cbd-preview .cbd-preview-svg,
  #crystal-designer-app .cbd-preview svg {
    top: 54% !important;
    width: min(66vw, 252px) !important;
    height: min(66vw, 252px) !important;
    min-width: 206px !important;
    min-height: 206px !important;
    max-width: 252px !important;
    max-height: 252px !important;
  }

  /* Keep the lower bead picker visible but more compact. */
  #crystal-designer-app .cbd-stone-panel {
    min-height: 206px !important;
    grid-template-rows: 42px minmax(0, 1fr) !important;
  }

  #crystal-designer-app .cbd-stone-panel .cbd-search-wrap {
    min-height: 42px !important;
    padding: 5px 8px 5px 12px !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    grid-auto-rows: 112px !important;
    gap: 8px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    padding: 9px 6px 8px !important;
  }

  #crystal-designer-app .cbd-gem-img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #crystal-designer-app .cbd-gem-meta b {
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  #crystal-designer-app .cbd-gem-meta small {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  /* Top action: show full Add to Cart, but keep it compact. */
  #crystal-designer-app .cbd-mobile-top-btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    letter-spacing: -0.02em !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    min-width: 96px !important;
  }

  #crystal-designer-app .cbd-mobile-share-btn {
    min-width: 72px !important;
  }

  /* Base making fee in the preview area's top-right corner. */
  #crystal-designer-app .cbd-mobile-base-fee {
    display: inline-flex !important;
    position: absolute !important;
    top: 43px !important;
    right: 10px !important;
    z-index: 13 !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 25px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(217, 186, 101, .55) !important;
    background: rgba(255, 246, 218, .94) !important;
    color: #151515 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 22px rgba(120, 90, 20, .12) !important;
    pointer-events: none !important;
  }

  /* True camera icon, smaller hit area. */
  #crystal-designer-app .cbd-gem-detail-icon {
    top: 5px !important;
    right: 5px !important;
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(20,20,20,.18) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.10) !important;
    font-size: 0 !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon svg {
    width: 14px !important;
    height: 14px !important;
    fill: none !important;
    stroke: #171717 !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* True trash icon, compact and no inherited large grey shape. */
  #crystal-designer-app .cbd-preview-trash,
  #crystal-designer-app .cbd-preview-trash:hover,
  #crystal-designer-app .cbd-preview-trash:focus-visible,
  #crystal-designer-app .cbd-preview-trash:active,
  #crystal-designer-app .cbd-preview-trash.is-drop-active,
  #crystal-designer-app.cbd-trash-hover .cbd-preview-trash {
    right: 16px !important;
    bottom: 18px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(0,0,0,.10) !important;

  }

  #crystal-designer-app .cbd-preview-trash-icon,
  #crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-preview-trash-icon,
  #crystal-designer-app.cbd-trash-hover .cbd-preview-trash .cbd-preview-trash-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    color: #101010 !important;
  }

  #crystal-designer-app .cbd-preview-trash svg,
  #crystal-designer-app .cbd-preview-trash-icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* Keep the preview helper text and bracelet guide subtle. */
  #crystal-designer-app .cbd-preview svg > circle {
    stroke-width: .72 !important;
    opacity: .18 !important;
  }

  #crystal-designer-app .cbd-preview svg text {
    font-size: 5.5px !important;
    opacity: .48 !important;
  }
}

@media (max-width: 390px) {
  #crystal-designer-app .cbd-topbar + .cbd-layout .cbd-preview,
  #crystal-designer-app .cbd-layout .cbd-preview,
  #crystal-designer-app .cbd-preview {
    flex-basis: clamp(292px, 41dvh, 350px) !important;
    height: clamp(292px, 41dvh, 350px) !important;
    min-height: clamp(292px, 41dvh, 350px) !important;
    max-height: clamp(292px, 41dvh, 350px) !important;
  }

  #crystal-designer-app .cbd-preview .cbd-preview-svg,
  #crystal-designer-app .cbd-preview svg {
    width: min(64vw, 234px) !important;
    height: min(64vw, 234px) !important;
    min-width: 198px !important;
    min-height: 198px !important;
    max-width: 234px !important;
    max-height: 234px !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    padding: 0 9px !important;
    font-size: 13px !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    min-width: 88px !important;
  }

  #crystal-designer-app .cbd-mobile-base-fee {
    right: 8px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
  }
}


/* ===== Moonsyl v20N mobile final tune =====
   Final mobile-only polish: PC-style UI, fixed viewport, tiny icon hit areas, swipe toast, tighter beads. */
@media (max-width: 760px) {
  html,
  body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: manipulation !important;
  }

  #crystal-designer-app,
  #crystal-designer-app .cbd-root {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background:
      radial-gradient(circle at 50% 32%, rgba(246,220,170,.14), transparent 28%),
      radial-gradient(circle at 20% 86%, rgba(98,129,173,.18), transparent 30%),
      linear-gradient(135deg, #07111f 0%, #10233b 48%, #263a50 100%) !important;
    color: #fff8ed !important;
  }

  #crystal-designer-app .cbd-root * {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Keep the whole mobile designer locked into one viewport; only inner picker scrolls. */
  #crystal-designer-app .cbd-layout {
    height: calc(100dvh - 55px) !important;
    max-height: calc(100dvh - 55px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #crystal-designer-app .cbd-preview {
    flex: 0 0 clamp(318px, 44dvh, 392px) !important;
    height: clamp(318px, 44dvh, 392px) !important;
    min-height: clamp(318px, 44dvh, 392px) !important;
    max-height: clamp(318px, 44dvh, 392px) !important;
    border-color: rgba(246,220,170,.16) !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,248,237,.24), transparent 25%),
      linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.04)) !important;

  }

  #crystal-designer-app .cbd-preview .cbd-preview-svg,
  #crystal-designer-app .cbd-preview svg {
    top: 52% !important;
    width: min(68vw, 262px) !important;
    height: min(68vw, 262px) !important;
    min-width: 210px !important;
    min-height: 210px !important;
    max-width: 262px !important;
    max-height: 262px !important;
  }

  #crystal-designer-app .cbd-preview svg > circle {
    opacity: .14 !important;
    stroke: rgba(246,220,170,.46) !important;
    stroke-width: .6 !important;
  }

  #crystal-designer-app .cbd-preview svg text {
    font-size: 5px !important;
    opacity: .38 !important;
  }

  #crystal-designer-app .cbd-preview-bead image,
  #crystal-designer-app .cbd-preview-bead circle,
  #crystal-designer-app .cbd-preview-bead rect,
  #crystal-designer-app .cbd-preview-bead ellipse {

  }

  /* Lower picker: smaller, dark glass style, internal scroll only. */
  #crystal-designer-app .cbd-stone-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    grid-template-rows: 42px minmax(0, 1fr) !important;
    overflow: hidden !important;
    border-color: rgba(246,220,170,.14) !important;
    background: linear-gradient(135deg, rgba(12,27,46,.94), rgba(31,48,68,.90)) !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    grid-auto-rows: 104px !important;
    gap: 7px !important;
    padding-bottom: 16px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    padding: 8px 5px 7px !important;
    border-color: rgba(246,220,170,.12) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.12) !important;
    color: #fff8ed !important;
  }

  #crystal-designer-app .cbd-gem-img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  #crystal-designer-app .cbd-gem-meta b {
    color: #fff8ed !important;
    font-size: 12px !important;
  }

  #crystal-designer-app .cbd-gem-meta small {
    color: rgba(255,248,237,.68) !important;
    font-size: 10px !important;
  }

  #crystal-designer-app .cbd-search-wrap {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(246,220,170,.12) !important;
  }

  #crystal-designer-app .cbd-search {
    color: #fff8ed !important;
  }

  #crystal-designer-app .cbd-search::placeholder {
    color: rgba(255,248,237,.58) !important;
  }

  #crystal-designer-app .cbd-tab {
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,248,237,.82) !important;
    border-color: rgba(255,255,255,.12) !important;
  }

  #crystal-designer-app .cbd-tab.active {
    background: linear-gradient(135deg, #fff0c9, #e7bd68) !important;
    color: #07111f !important;
    border-color: rgba(246,220,170,.68) !important;
  }

  /* Camera icon: only the icon-sized tap target. */
  #crystal-designer-app .cbd-gem-detail-icon,
  #crystal-designer-app .cbd-gem-detail-icon:hover,
  #crystal-designer-app .cbd-gem-detail-icon:focus-visible,
  #crystal-designer-app .cbd-gem-detail-icon:active {
    top: 5px !important;
    right: 5px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.90) !important;
    border: 1px solid rgba(255,255,255,.46) !important;
    box-shadow: 0 3px 7px rgba(0,0,0,.20) !important;
    line-height: 0 !important;
    font-size: 0 !important;
    cursor: pointer !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon svg {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    max-width: 13px !important;
    max-height: 13px !important;
    display: block !important;
    fill: none !important;
    stroke: #121212 !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
  }

  /* Trash icon: true compact SVG icon. */
  #crystal-designer-app .cbd-preview-trash,
  #crystal-designer-app .cbd-preview-trash:hover,
  #crystal-designer-app .cbd-preview-trash:focus-visible,
  #crystal-designer-app .cbd-preview-trash:active,
  #crystal-designer-app .cbd-preview-trash.is-drop-active,
  #crystal-designer-app.cbd-trash-hover .cbd-preview-trash {
    right: 18px !important;
    bottom: 20px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(255,240,201,.96), rgba(231,189,104,.94)) !important;
    border: 1px solid rgba(246,220,170,.74) !important;

    color: #07111f !important;
    transform: none !important;
  }

  #crystal-designer-app .cbd-preview-trash-icon,
  #crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-preview-trash-icon,
  #crystal-designer-app.cbd-trash-hover .cbd-preview-trash .cbd-preview-trash-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;

    transform: none !important;
    animation: none !important;
    color: #07111f !important;
  }

  #crystal-designer-app .cbd-preview-trash svg,
  #crystal-designer-app .cbd-preview-trash-icon svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
  }

  #crystal-designer-app .cbd-preview-trash-text,
  #crystal-designer-app .cbd-preview-trash small {
    display: none !important;
  }

  /* Toast can be manually swiped away. */
  .cbd-toast {
    touch-action: pan-x !important;
    transform: translateX(var(--cbd-toast-drag-x, 0)) translateY(18px) scale(.98) !important;
    transition: transform .22s ease, opacity .22s ease, visibility .22s ease !important;
    background: linear-gradient(135deg, rgba(12,27,46,.98), rgba(32,48,68,.96)) !important;
    border: 1px solid rgba(246,220,170,.22) !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.30) !important;
  }

  .cbd-toast.show {
    transform: translateX(var(--cbd-toast-drag-x, 0)) translateY(0) scale(1) !important;
  }

  .cbd-toast.is-dragging {
    transition: none !important;
  }

  .cbd-toast.is-dismissing {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(var(--cbd-toast-drag-x, 88px)) translateY(0) scale(.96) !important;
  }

  .cbd-toast small {
    display: block !important;
    margin-top: 3px !important;
    color: rgba(255,248,237,.56) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /* Top bar: PC-style dark/gold while keeping user's wireframe layout. */
  #crystal-designer-app .cbd-mobile-top-actions {
    color: #fff8ed !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    min-width: 118px !important;
    background: linear-gradient(135deg, #fff0c9, #e7bd68) !important;
    color: #07111f !important;
    border-color: rgba(246,220,170,.70) !important;
  }

  #crystal-designer-app .cbd-mobile-share-btn {
    background: rgba(255,255,255,.08) !important;
    color: #fff8ed !important;
    border-color: rgba(255,255,255,.16) !important;
  }

  #crystal-designer-app .cbd-mobile-base-fee {
    background: rgba(15,31,50,.88) !important;
    border-color: rgba(246,220,170,.28) !important;
    color: #ffe7a5 !important;
  }
}

@media (max-width: 390px) {
  #crystal-designer-app .cbd-preview {
    flex-basis: clamp(302px, 43dvh, 362px) !important;
    height: clamp(302px, 43dvh, 362px) !important;
    min-height: clamp(302px, 43dvh, 362px) !important;
    max-height: clamp(302px, 43dvh, 362px) !important;
  }

  #crystal-designer-app .cbd-preview .cbd-preview-svg,
  #crystal-designer-app .cbd-preview svg {
    width: min(66vw, 246px) !important;
    height: min(66vw, 246px) !important;
    max-width: 246px !important;
    max-height: 246px !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    min-width: 106px !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    grid-auto-rows: 100px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
  }
}


/* ===== Moonsyl v20W audited preview fix =====
   Clean final layer only. Do not append older v20O-v20V rules after this block.
   - hides PC/mobile preview extra text labels from pseudo-elements
   - hides mobile-only Base fee on desktop
   - centers SVG through .cbd-preview-stage
   - rotate/zoom affects .cbd-preview-orbit only
   - keeps bead drag ghost large on PC and small on touch devices
*/

#crystal-designer-app .cbd-preview::before,
#crystal-designer-app .cbd-preview::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#crystal-designer-app .cbd-mobile-base-fee {
  display: none !important;
}

#crystal-designer-app .cbd-preview {
  position: relative !important;
  overflow: hidden !important;
}

#crystal-designer-app .cbd-preview-stage {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(82vh, 720px, 100%) !important;
  height: min(82vh, 720px, 100%) !important;
  margin: 0 auto !important;
  overflow: visible !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grab !important;
}

#crystal-designer-app .cbd-preview-stage.is-gesture-active,
#crystal-designer-app .cbd-preview-stage:active {
  cursor: grabbing !important;
}

#crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
#crystal-designer-app .cbd-preview-stage svg {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
  touch-action: none !important;
}

#crystal-designer-app .cbd-preview-orbit {
  transform-box: view-box !important;
  transform-origin: 260px 260px !important;
  will-change: transform !important;
}

#crystal-designer-app .cbd-preview-brand,
#crystal-designer-app .cbd-preview svg .cbd-preview-brand {
  font-weight: 900 !important;
  text-transform: lowercase !important;
  letter-spacing: .26em !important;
  fill: rgba(255,248,237,.30) !important;

  pointer-events: none !important;
  user-select: none !important;
}

#crystal-designer-app .cbd-search-wrap {
  position: relative !important;
}

#crystal-designer-app .cbd-search-wrap::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  z-index: 3 !important;
  width: 18px !important;
  height: 18px !important;
  transform: translateY(-50%) !important;
  background: rgba(24,32,51,.45) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat !important;
  pointer-events: none !important;
}

#crystal-designer-app .cbd-search {
  padding-left: 42px !important;
  font-size: 16px !important;
}

.cbd-drag-ghost.is-mouse {
  width: 88px !important;
  height: 88px !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.cbd-drag-ghost.is-mouse img,
.cbd-drag-ghost.is-mouse span {
  width: 88px !important;
  height: 88px !important;
}

.cbd-drag-ghost.is-touch {
  width: 48px !important;
  height: 48px !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.cbd-drag-ghost.is-touch img,
.cbd-drag-ghost.is-touch span {
  width: 48px !important;
  height: 48px !important;
}

@media (min-width: 761px) {
  #crystal-designer-app .cbd-preview-brand,
  #crystal-designer-app .cbd-preview svg .cbd-preview-brand {
    font-size: 28px !important;
  }
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-preview-stage {
    position: absolute !important;
    left: 50% !important;
    top: 52% !important;
    transform: translate(-50%, -50%) !important;
    width: min(72vw, 300px) !important;
    height: min(72vw, 300px) !important;
    min-width: 224px !important;
    min-height: 224px !important;
    max-width: 300px !important;
    max-height: 300px !important;
    margin: 0 !important;
  }

  #crystal-designer-app .cbd-preview-brand,
  #crystal-designer-app .cbd-preview svg .cbd-preview-brand {
    font-size: 21px !important;
    letter-spacing: .22em !important;
    fill: rgba(7,17,31,.22) !important;
  }

  #crystal-designer-app .cbd-mobile-base-fee {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 38px !important;
    right: 10px !important;
    z-index: 8 !important;
    min-height: 22px !important;
    max-width: 38vw !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    line-height: 22px !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    border-radius: 999px !important;
    background: rgba(15,31,50,.88) !important;
    border: 1px solid rgba(246,220,170,.28) !important;
    color: #ffe7a5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar {
    top: 9px !important;
    left: 10px !important;
    right: 10px !important;
    gap: 6px !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar span,
  #crystal-designer-app .cbd-mobile-statusbar strong {
    min-height: 23px !important;
    height: 23px !important;
    max-width: 42vw !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    line-height: 23px !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 390px) {
  #crystal-designer-app .cbd-preview-stage {
    width: min(70vw, 286px) !important;
    height: min(70vw, 286px) !important;
    max-width: 286px !important;
    max-height: 286px !important;
  }

  #crystal-designer-app .cbd-mobile-base-fee,
  #crystal-designer-app .cbd-mobile-statusbar span,
  #crystal-designer-app .cbd-mobile-statusbar strong {
    font-size: 9.5px !important;
  }
}


/* ===== Moonsyl v20AB bugfix-only stability layer =====
   Purpose: fix accumulated rotate/zoom bugs before reintroducing zoom.
   Rotation and zoom are disabled here by design.
*/
#crystal-designer-app .cbd-preview::before,
#crystal-designer-app .cbd-preview::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#crystal-designer-app .cbd-preview-stage {
  cursor: default !important;
}

#crystal-designer-app .cbd-preview-stage.is-gesture-active,
#crystal-designer-app .cbd-preview-stage:active {
  cursor: default !important;
}

#crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
#crystal-designer-app .cbd-preview-stage svg {
  transform: none !important;
  rotate: none !important;
  scale: none !important;
}

#crystal-designer-app .cbd-preview-orbit {
  transform: none !important;
  transform-origin: 260px 260px !important;
  will-change: auto !important;
}

#crystal-designer-app .cbd-preview-bead {
  pointer-events: all !important;
  cursor: grab !important;
}

#crystal-designer-app .cbd-preview-bead:active {
  cursor: grabbing !important;
}

#crystal-designer-app .cbd-mobile-base-fee {
  display: none !important;
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-mobile-base-fee {
    display: inline-flex !important;
  }
}


/* ===== Moonsyl v20AC mobile bugfix-only final reset =====
   Fixes v20AB mobile regressions only: toast click close, visible categories/search, visible cards.
   No rotate or zoom logic is enabled in this layer.
*/
.cbd-toast {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.cbd-toast small {
  display: none !important;
}
.cbd-toast.show {
  pointer-events: auto !important;
}

@media (max-width: 760px) {
  .cbd-toast {
    left: 50% !important;
    right: auto !important;
    top: calc(env(safe-area-inset-top, 0px) + 92px) !important;
    bottom: auto !important;
    width: min(330px, calc(100vw - 28px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;
    transform: translate(-50%, -8px) scale(.98) !important;
    border-radius: 18px !important;
    padding: 12px 14px !important;
    z-index: 2147483647 !important;
  }

  .cbd-toast.show {
    transform: translate(-50%, 0) scale(1) !important;
  }

  .cbd-toast.is-dismissing {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, -8px) scale(.96) !important;
  }

  .cbd-toast span {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    background: #07111f !important;
    border-top: 1px solid rgba(246,220,170,.18) !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    background: rgba(255,255,255,.92) !important;
    border-right: 1px solid rgba(7,17,31,.14) !important;
    padding: 8px 7px 18px 7px !important;
    gap: 8px !important;
  }

  #crystal-designer-app .cbd-tab,
  #crystal-designer-app .cbd-tab:hover,
  #crystal-designer-app .cbd-tab:focus-visible {
    background: #ffffff !important;
    color: #5d616b !important;
    border: 1px solid rgba(7,17,31,.08) !important;
    box-shadow: 0 6px 16px rgba(7,17,31,.06) !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  #crystal-designer-app .cbd-tab.active,
  #crystal-designer-app .cbd-tab.active:hover,
  #crystal-designer-app .cbd-tab.active:focus-visible {
    background: linear-gradient(135deg, #fff0c9, #e7bd68) !important;
    color: #07111f !important;
    border-color: rgba(246,220,170,.70) !important;
    box-shadow: 0 10px 22px rgba(157,110,30,.16) !important;
  }

  #crystal-designer-app .cbd-search-wrap {
    background: #07111f !important;
    border-left: 1px solid rgba(246,220,170,.12) !important;
    padding: 7px 8px 6px 10px !important;
  }

  #crystal-designer-app .cbd-search-wrap::before {
    left: 24px !important;
    background: rgba(24,32,51,.42) !important;
  }

  #crystal-designer-app .cbd-search {
    background: #ffffff !important;
    color: #172033 !important;
    border: 1px solid rgba(7,17,31,.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70), 0 8px 18px rgba(0,0,0,.10) !important;
    padding-left: 42px !important;
    text-align: center !important;
    opacity: 1 !important;
  }

  #crystal-designer-app .cbd-search::placeholder {
    color: rgba(24,32,51,.42) !important;
    opacity: 1 !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    background: #ffffff !important;
    border-left: 1px solid rgba(7,17,31,.08) !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    background: #ffffff !important;
    color: #172033 !important;
    border: 1px solid rgba(7,17,31,.08) !important;
    box-shadow: 0 8px 20px rgba(7,17,31,.07) !important;
    opacity: 1 !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem b,
  #crystal-designer-app .cbd-gem-meta b {
    color: #07111f !important;
    opacity: 1 !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem small,
  #crystal-designer-app .cbd-gem-meta small {
    color: rgba(24,32,51,.58) !important;
    opacity: 1 !important;
  }
}

/* ===== Moonsyl v20AD UI feedback + tooltip behavior polish =====
   Based on v20AC bugfix-only. No zoom or rotation is enabled here.
   Goals:
   - stronger button/tap feedback on PC and mobile
   - softer loading-style mobile top/preview backgrounds
   - mobile details only from camera icon
   - desktop gem detail appears only after intentional 1s hover via JS
*/
#crystal-designer-app {
  --cbd-ad-ink: #07111f;
  --cbd-ad-cream: #fffaf2;
  --cbd-ad-soft: #f8efe2;
  --cbd-ad-gold: #f3d690;
  --cbd-ad-gold-2: #d8aa4f;
  --cbd-ad-blue: #dfeaf6;
}

#crystal-designer-app button,
#crystal-designer-app .cbd-btn,
#crystal-designer-app .cbd-tab,
#crystal-designer-app .cbd-mini-btn,
#crystal-designer-app .cbd-topbar-exit,
#crystal-designer-app .cbd-gem-detail-icon,
#crystal-designer-app .cbd-preview-trash {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

#crystal-designer-app .cbd-btn,
#crystal-designer-app .cbd-mobile-top-btn,
#crystal-designer-app .cbd-mobile-menu-btn,
#crystal-designer-app .cbd-tab,
#crystal-designer-app .cbd-mini-btn,
#crystal-designer-app .cbd-preview-trash,
#crystal-designer-app .cbd-gem-detail-icon {

}

#crystal-designer-app .cbd-btn:hover,
#crystal-designer-app .cbd-mobile-top-btn:hover,
#crystal-designer-app .cbd-tab:hover,
#crystal-designer-app .cbd-mini-btn:hover,
#crystal-designer-app .cbd-preview-trash:hover,
#crystal-designer-app .cbd-gem-detail-icon:hover {
  transform: translateY(-2px) scale(1.015) !important;

}

#crystal-designer-app .cbd-btn:active,
#crystal-designer-app .cbd-mobile-top-btn:active,
#crystal-designer-app .cbd-mobile-menu-btn:active,
#crystal-designer-app .cbd-tab:active,
#crystal-designer-app .cbd-mini-btn:active,
#crystal-designer-app .cbd-preview-trash:active,
#crystal-designer-app .cbd-gem-detail-icon:active {
  transform: translateY(1px) scale(.94) !important;

}

#crystal-designer-app .cbd-btn:focus-visible,
#crystal-designer-app .cbd-mobile-top-btn:focus-visible,
#crystal-designer-app .cbd-mobile-menu-btn:focus-visible,
#crystal-designer-app .cbd-tab:focus-visible,
#crystal-designer-app .cbd-mini-btn:focus-visible,
#crystal-designer-app .cbd-preview-trash:focus-visible,
#crystal-designer-app .cbd-gem-detail-icon:focus-visible {
  outline: none !important;

}

#crystal-designer-app .cbd-gems-grid .cbd-gem {
  transition:
    transform .16s cubic-bezier(.2,.85,.25,1),
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease,
    opacity .16s ease !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover {
  transform: translateY(-3px) scale(1.012) !important;
  border-color: rgba(216,170,79,.36) !important;
  box-shadow:
    0 14px 30px rgba(7,17,31,.12),
    0 0 0 2px rgba(246,220,170,.18) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:active {
  transform: translateY(1px) scale(.965) !important;
  box-shadow: 0 6px 16px rgba(7,17,31,.10) !important;
}

.cbd-floating-tooltip {
  transition: opacity .14s ease, transform .14s ease !important;
  transform: translateY(0) scale(1) !important;
}

@media (max-width: 760px) {
  #crystal-designer-app,
  #crystal-designer-app .cbd-root {
    background:
      radial-gradient(circle at 50% 4%, rgba(246,220,170,.32), transparent 28%),
      radial-gradient(circle at 14% 86%, rgba(130,166,255,.16), transparent 32%),
      linear-gradient(135deg, #eef5fb 0%, #fff8ed 48%, #f5e2bf 125%) !important;
  }

  #crystal-designer-app .cbd-topbar {
    min-height: 76px !important;
    padding: 12px 18px !important;
    background:
      radial-gradient(circle at 52% -12%, rgba(246,220,170,.50), transparent 44%),
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,250,242,.88)) !important;
    border-bottom: 1px solid rgba(216,170,79,.20) !important;
    box-shadow: 0 10px 28px rgba(7,17,31,.08) !important;
    backdrop-filter: blur(18px) !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    color: #07111f !important;
    text-shadow: none !important;
  }

  #crystal-designer-app .cbd-topbar-exit {
    color: #07111f !important;
    background: rgba(255,255,255,.42) !important;
    box-shadow: 0 6px 16px rgba(7,17,31,.06) !important;
  }

  #crystal-designer-app .cbd-mobile-top-actions {
    gap: 9px !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    min-height: 48px !important;
    border-radius: 20px !important;
    font-weight: 950 !important;
    box-shadow:
      0 10px 22px rgba(157,110,30,.16),
      inset 0 1px 0 rgba(255,255,255,.52) !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    background: linear-gradient(135deg, #fff0c9 0%, #f4d98f 56%, #d8aa4f 100%) !important;
    border-color: rgba(216,170,79,.54) !important;
    color: #07111f !important;
  }

  #crystal-designer-app .cbd-mobile-save-btn {
    background: #11121a !important;
    color: #fffaf2 !important;
    border-color: rgba(17,18,26,.90) !important;
    box-shadow: 0 12px 28px rgba(7,17,31,.22) !important;
  }

  #crystal-designer-app .cbd-mobile-share-btn {
    background: rgba(255,255,255,.72) !important;
    color: #07111f !important;
    border-color: rgba(7,17,31,.10) !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.80) !important;
    border: 1px solid rgba(7,17,31,.10) !important;
    box-shadow: 0 10px 24px rgba(7,17,31,.10) !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn span {
    height: 3px !important;
    background: #07111f !important;
  }

  #crystal-designer-app .cbd-preview {
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.92), rgba(255,255,255,.68) 26%, transparent 54%),
      radial-gradient(circle at 52% 38%, rgba(246,220,170,.42), transparent 38%),
      radial-gradient(circle at 12% 88%, rgba(130,166,255,.18), transparent 34%),
      linear-gradient(135deg, #f4f8fb 0%, #fff8ed 54%, #f4e0bc 136%) !important;
    border-top: 1px solid rgba(216,170,79,.14) !important;
    border-bottom: 1px solid rgba(7,17,31,.14) !important;

  }

  #crystal-designer-app .cbd-preview-stage {

  }

  #crystal-designer-app .cbd-mobile-statusbar span,
  #crystal-designer-app .cbd-mobile-statusbar strong,
  #crystal-designer-app .cbd-mobile-base-fee {
    backdrop-filter: blur(14px) !important;
    box-shadow:
      0 8px 20px rgba(7,17,31,.08),
      inset 0 1px 0 rgba(255,255,255,.64) !important;
  }

  #crystal-designer-app .cbd-mobile-base-fee {
    background: linear-gradient(135deg, rgba(17,27,42,.94), rgba(34,48,70,.90)) !important;
    color: #f8e7bd !important;
    border: 1px solid rgba(246,220,170,.28) !important;
  }

  #crystal-designer-app .cbd-mobile-inspiration-btn {
    background: rgba(255,255,255,.86) !important;
    color: #07111f !important;
    border: 1px solid rgba(7,17,31,.10) !important;
    box-shadow: 0 12px 26px rgba(7,17,31,.10) !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    background:
      radial-gradient(circle at 50% -16%, rgba(246,220,170,.22), transparent 32%),
      linear-gradient(180deg, #0b1729, #07111f) !important;
    border-top: 1px solid rgba(246,220,170,.18) !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    background: rgba(255,255,255,.94) !important;
    box-shadow: inset -1px 0 0 rgba(7,17,31,.12) !important;
  }

  #crystal-designer-app .cbd-tab {
    min-height: 54px !important;
    border-radius: 18px !important;
  }

  #crystal-designer-app .cbd-tab:active {
    transform: scale(.94) !important;
  }

  #crystal-designer-app .cbd-search-wrap {
    background: transparent !important;
    padding-top: 9px !important;
  }

  #crystal-designer-app .cbd-search {
    min-height: 52px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    border-color: rgba(246,220,170,.18) !important;
    box-shadow:
      0 10px 24px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.78) !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    background:
      radial-gradient(circle at 50% 0%, rgba(246,220,170,.10), transparent 28%),
      #ffffff !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    border-radius: 18px !important;
    box-shadow: 0 10px 22px rgba(7,17,31,.08) !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem:hover {
    transform: none !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem:active {
    transform: scale(.965) !important;
    border-color: rgba(216,170,79,.42) !important;
    box-shadow: 0 7px 16px rgba(7,17,31,.10) !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon {
    z-index: 6 !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(7,17,31,.10) !important;
    box-shadow: 0 8px 16px rgba(7,17,31,.13) !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon:active {
    transform: scale(.86) !important;
    background: #fff0c9 !important;
    border-color: rgba(216,170,79,.62) !important;
  }

  .cbd-floating-tooltip {
    max-width: min(280px, calc(100vw - 28px)) !important;
    border-radius: 20px !important;
  }
}

@media (min-width: 761px) {
  #crystal-designer-app .cbd-topbar,
  #crystal-designer-app .cbd-card {
    backdrop-filter: blur(18px) !important;
  }

  #crystal-designer-app .cbd-btn,
  #crystal-designer-app .cbd-topbar-guide,
  #crystal-designer-app .cbd-inspiration-btn {
    box-shadow: 0 12px 28px rgba(157,110,30,.13) !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon {
    opacity: .78 !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem:hover .cbd-gem-detail-icon,
  #crystal-designer-app .cbd-gem-detail-icon:hover {
    opacity: 1 !important;
  }
}


/* ===== Moonsyl v20AE mobile UI reset =====
   Scope: mobile visual layout only. No zoom/rotation logic changes.
   Goals:
   - softer loading-style top and preview backgrounds
   - less crowded topbar
   - cleaner 3-zone mobile layout
   - search row separated from gem cards
   - mobile details only from camera icon; desktop tooltip remains intentional 1s hover in JS
*/
@media (max-width: 760px) {
  html,
  body {
    overscroll-behavior: none !important;
  }

  #crystal-designer-app,
  #crystal-designer-app .cbd-root {
    width: 100vw !important;
    min-height: 100svh !important;
    height: 100svh !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(246,220,170,.26), transparent 32%),
      radial-gradient(circle at 12% 88%, rgba(130,166,255,.13), transparent 30%),
      linear-gradient(135deg, #eef5fb 0%, #fff9ef 52%, #f6e5c5 122%) !important;
  }

  #crystal-designer-app .cbd-topbar {
    position: relative !important;
    z-index: 40 !important;
    width: 100% !important;
    height: 74px !important;
    min-height: 74px !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(104px, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    background:
      radial-gradient(circle at 50% -28%, rgba(246,220,170,.48), transparent 46%),
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,239,.90)) !important;
    border-bottom: 1px solid rgba(216,170,79,.18) !important;
    box-shadow: 0 8px 24px rgba(7,17,31,.07) !important;
    backdrop-filter: blur(16px) !important;
  }

  #crystal-designer-app .cbd-topbar-left {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 7px !important;
    align-items: center !important;
  }

  #crystal-designer-app .cbd-topbar-exit {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.70) !important;
    color: #07111f !important;
    box-shadow: 0 6px 16px rgba(7,17,31,.07) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #07111f !important;
    font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
    font-weight: 950 !important;
    text-shadow: none !important;
  }

  #crystal-designer-app .cbd-mobile-top-actions {
    display: grid !important;
    grid-template-columns: 116px 58px 46px !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: end !important;
    min-width: 0 !important;
  }

  #crystal-designer-app .cbd-mobile-share-btn {
    display: none !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 10px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
    border: 1px solid rgba(7,17,31,.10) !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    width: 116px !important;
    background: linear-gradient(135deg, #fff1c9 0%, #f5dc9b 55%, #d8aa4f 100%) !important;
    color: #07111f !important;
    border-color: rgba(216,170,79,.50) !important;
    box-shadow: 0 9px 18px rgba(157,110,30,.16), inset 0 1px 0 rgba(255,255,255,.58) !important;
  }

  #crystal-designer-app .cbd-mobile-save-btn {
    width: 58px !important;
    background: #10111a !important;
    color: #fffaf2 !important;
    border-color: rgba(16,17,26,.92) !important;
    box-shadow: 0 11px 22px rgba(7,17,31,.20) !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: rgba(255,255,255,.82) !important;
    border: 1px solid rgba(7,17,31,.10) !important;
    box-shadow: 0 9px 20px rgba(7,17,31,.10) !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn span {
    width: 24px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #07111f !important;
  }

  #crystal-designer-app .cbd-topbar-right {
    display: none !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    height: calc(100svh - 74px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-preview {
    order: 1 !important;
    flex: 0 0 clamp(300px, 40svh, 380px) !important;
    height: clamp(300px, 40svh, 380px) !important;
    min-height: 300px !important;
    max-height: 380px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 46%, rgba(255,255,255,.92), rgba(255,255,255,.68) 24%, transparent 54%),
      radial-gradient(circle at 54% 38%, rgba(246,220,170,.34), transparent 40%),
      radial-gradient(circle at 12% 88%, rgba(130,166,255,.13), transparent 34%),
      linear-gradient(135deg, #f4f8fb 0%, #fff8ed 54%, #f3dfba 136%) !important;
    border-top: 1px solid rgba(216,170,79,.10) !important;
    border-bottom: 1px solid rgba(7,17,31,.13) !important;

  }

  #crystal-designer-app .cbd-preview::before,
  #crystal-designer-app .cbd-preview::after {
    display: none !important;
    content: none !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    position: absolute !important;
    inset: 46px 12px 58px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;

  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    width: min(76vw, 310px) !important;
    height: auto !important;
    max-width: 310px !important;
    max-height: 310px !important;
    aspect-ratio: 1 / 1 !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    top: 11px !important;
    z-index: 12 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    pointer-events: none !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar span,
  #crystal-designer-app .cbd-mobile-statusbar strong {
    min-height: 30px !important;
    max-width: 48% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(7,17,31,.12) !important;
    color: #07111f !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 15px rgba(7,17,31,.08), inset 0 1px 0 rgba(255,255,255,.70) !important;
    backdrop-filter: blur(12px) !important;
  }

  #crystal-designer-app .cbd-mobile-base-fee {
    position: absolute !important;
    top: 46px !important;
    right: 11px !important;
    z-index: 12 !important;
    height: 27px !important;
    min-height: 27px !important;
    width: auto !important;
    max-width: 178px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(18,29,46,.94), rgba(31,45,66,.91)) !important;
    color: #f8e7bd !important;
    border: 1px solid rgba(246,220,170,.24) !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    box-shadow: 0 7px 15px rgba(7,17,31,.12), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  #crystal-designer-app .cbd-mobile-inspiration-btn {
    position: absolute !important;
    left: 14px !important;
    bottom: 14px !important;
    z-index: 12 !important;
    width: auto !important;
    min-width: 154px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(7,17,31,.10) !important;
    color: #07111f !important;
    box-shadow: 0 10px 22px rgba(7,17,31,.10), inset 0 1px 0 rgba(255,255,255,.70) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
  }

  #crystal-designer-app .cbd-preview-trash,
  #crystal-designer-app .cbd-preview-trash:hover,
  #crystal-designer-app .cbd-preview-trash:focus-visible,
  #crystal-designer-app .cbd-preview-trash:active {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    left: auto !important;
    z-index: 12 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    background: radial-gradient(circle at 35% 25%, #fff6d7, #f4d88f 58%, #d8aa4f 100%) !important;
    border: 1px solid rgba(216,170,79,.36) !important;

  }

  #crystal-designer-app .cbd-preview-trash-icon {
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;

  }

  #crystal-designer-app .cbd-preview-trash svg {
    width: 24px !important;
    height: 24px !important;
    color: #07111f !important;
    stroke: currentColor !important;
    fill: none !important;
  }

  #crystal-designer-app .cbd-preview-trash-text,
  #crystal-designer-app .cbd-preview-trash small {
    display: none !important;
  }

  #crystal-designer-app .cbd-summary-panel {
    display: none !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    grid-template-rows: 62px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    padding: 10px 12px 12px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 52% -18%, rgba(246,220,170,.18), transparent 32%),
      linear-gradient(180deg, #0c1a2d 0%, #07111f 100%) !important;
    border: 0 !important;
    border-top: 1px solid rgba(246,220,170,.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter: none !important;
  }

  #crystal-designer-app .cbd-left-title {
    display: none !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 86px !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-content: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 2px 10px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #crystal-designer-app .cbd-tab {
    width: 100% !important;
    min-height: 52px !important;
    flex: 0 0 auto !important;
    border-radius: 18px !important;
    padding: 8px 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
    color: rgba(7,17,31,.66) !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(7,17,31,.08) !important;
    box-shadow: 0 7px 16px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.68) !important;
    font-size: 12.5px !important;
    line-height: 1.08 !important;
    font-weight: 920 !important;
  }

  #crystal-designer-app .cbd-tab.active {
    color: #07111f !important;
    background: linear-gradient(135deg, #fff0c9 0%, #f4d98f 65%, #e0b65e 100%) !important;
    border-color: rgba(216,170,79,.45) !important;
    box-shadow: 0 10px 20px rgba(157,110,30,.18), inset 0 1px 0 rgba(255,255,255,.60) !important;
  }

  #crystal-designer-app .cbd-search-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    height: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 2 !important;
  }

  #crystal-designer-app .cbd-search-wrap::before {
    left: 18px !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    transform: translateY(-50%) !important;
    background: rgba(24,32,51,.38) !important;
  }

  #crystal-designer-app .cbd-search {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 15px 0 46px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(246,220,170,.18) !important;
    background: rgba(255,255,255,.94) !important;
    color: #172033 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.78) !important;
    font-size: 16px !important;
    line-height: 54px !important;
    font-weight: 850 !important;
    text-align: left !important;
  }

  #crystal-designer-app .cbd-search::placeholder {
    color: rgba(24,32,51,.42) !important;
    opacity: 1 !important;
    font-weight: 800 !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    align-content: start !important;
    padding: 0 2px 18px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    min-height: 112px !important;
    height: 112px !important;
    border-radius: 17px !important;
    padding: 8px 4px 7px !important;
    gap: 5px !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(7,17,31,.07) !important;
    box-shadow: 0 9px 18px rgba(7,17,31,.10), inset 0 1px 0 rgba(255,255,255,.65) !important;
    color: #07111f !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 47px !important;
    height: 47px !important;
    margin-top: 1px !important;
    filter: drop-shadow(0 6px 8px rgba(7,17,31,.14)) !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem b,
  #crystal-designer-app .cbd-gem-meta b {
    color: #07111f !important;
    opacity: 1 !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem small,
  #crystal-designer-app .cbd-gem-meta small {
    color: rgba(24,32,51,.58) !important;
    opacity: 1 !important;
    font-size: 10.7px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    z-index: 7 !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
    color: #07111f !important;
    border: 1px solid rgba(7,17,31,.10) !important;
    box-shadow: 0 7px 14px rgba(7,17,31,.14) !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon svg {
    width: 15px !important;
    height: 15px !important;
    stroke: currentColor !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem:hover {
    transform: none !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem:active {
    transform: scale(.965) !important;
    border-color: rgba(216,170,79,.42) !important;
    box-shadow: 0 6px 14px rgba(7,17,31,.12), 0 0 0 2px rgba(246,220,170,.16) !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon:active {
    transform: scale(.86) !important;
    background: #fff0c9 !important;
    border-color: rgba(216,170,79,.62) !important;
  }

  .cbd-floating-tooltip {
    max-width: min(280px, calc(100vw - 28px)) !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app .cbd-topbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
    grid-template-columns: minmax(86px, 1fr) auto !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    font-size: 21px !important;
  }

  #crystal-designer-app .cbd-mobile-top-actions {
    grid-template-columns: 104px 52px 42px !important;
    gap: 5px !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    width: 104px !important;
  }

  #crystal-designer-app .cbd-mobile-save-btn {
    width: 52px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 42px !important;
    min-width: 42px !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    grid-template-columns: 80px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    width: 80px !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    gap: 8px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    min-height: 106px !important;
    height: 106px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 43px !important;
    height: 43px !important;
  }
}

/* Desktop keeps v20AD interaction behavior. Add stronger but clean feedback only. */
@media (min-width: 761px) {
  #crystal-designer-app .cbd-gems-grid .cbd-gem:hover {
    transform: translateY(-3px) scale(1.01) !important;
    border-color: rgba(216,170,79,.40) !important;
    box-shadow:
      0 16px 32px rgba(7,17,31,.13),
      0 0 0 2px rgba(246,220,170,.15) !important;
  }

  #crystal-designer-app .cbd-btn:hover,
  #crystal-designer-app .cbd-topbar-guide:hover,
  #crystal-designer-app .cbd-inspiration-btn:hover {
    transform: translateY(-2px) scale(1.012) !important;
    filter: brightness(1.04) !important;
  }

  #crystal-designer-app .cbd-btn:active,
  #crystal-designer-app .cbd-topbar-guide:active,
  #crystal-designer-app .cbd-inspiration-btn:active {
    transform: translateY(1px) scale(.97) !important;
  }
}



/* ===== Moonsyl v20AF mobile preview + compact badge fix =====
   Scope: mobile CSS only. No zoom/rotation logic changes.
   Fixes:
   - preview-stage inherited old translate/left/top/width rules, causing bracelet to drift/crop top-left
   - FIT / TOTAL / Base fee / Get Inspiration were still too large
*/
@media (max-width: 760px) {
  #crystal-designer-app .cbd-preview {
    flex-basis: clamp(292px, 38svh, 358px) !important;
    height: clamp(292px, 38svh, 358px) !important;
    min-height: 292px !important;
    max-height: 358px !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 34px 10px 48px 10px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(70vw, 292px) !important;
    height: min(70vw, 292px) !important;
    max-width: 292px !important;
    max-height: 292px !important;
    margin: 0 auto !important;
    transform: none !important;
    translate: none !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar {
    top: 8px !important;
    left: 9px !important;
    right: 9px !important;
    gap: 6px !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar span,
  #crystal-designer-app .cbd-mobile-statusbar strong {
    min-height: 25px !important;
    height: 25px !important;
    max-width: 46% !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    line-height: 25px !important;
    letter-spacing: 0 !important;
    box-shadow: 0 5px 12px rgba(7,17,31,.07), inset 0 1px 0 rgba(255,255,255,.70) !important;
  }

  #crystal-designer-app .cbd-mobile-base-fee {
    top: 38px !important;
    right: 9px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-width: 150px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    box-shadow: 0 5px 12px rgba(7,17,31,.10), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  #crystal-designer-app .cbd-mobile-inspiration-btn {
    left: 12px !important;
    bottom: 12px !important;
    min-width: 134px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    box-shadow: 0 8px 18px rgba(7,17,31,.09), inset 0 1px 0 rgba(255,255,255,.70) !important;
  }

  #crystal-designer-app .cbd-preview-trash,
  #crystal-designer-app .cbd-preview-trash:hover,
  #crystal-designer-app .cbd-preview-trash:focus-visible,
  #crystal-designer-app .cbd-preview-trash:active {
    right: 12px !important;
    bottom: 12px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  #crystal-designer-app .cbd-preview-trash-icon {
    width: 28px !important;
    height: 28px !important;
  }

  #crystal-designer-app .cbd-preview-trash svg,
  #crystal-designer-app .cbd-preview-trash-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app .cbd-preview-stage {
    inset: 34px 8px 46px 8px !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    width: min(68vw, 274px) !important;
    height: min(68vw, 274px) !important;
    max-width: 274px !important;
    max-height: 274px !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar span,
  #crystal-designer-app .cbd-mobile-statusbar strong {
    font-size: 9.8px !important;
    padding: 0 7px !important;
  }

  #crystal-designer-app .cbd-mobile-base-fee {
    max-width: 136px !important;
    font-size: 9.4px !important;
  }

  #crystal-designer-app .cbd-mobile-inspiration-btn {
    min-width: 122px !important;
    font-size: 12.5px !important;
  }
}


/* ===== v20AH track-aware preview spacing + softer disabled gems =====
   This layer stabilizes the current no-zoom/no-rotate build with track-aware bead spacing.
   - is-limit cards stay readable instead of looking broken/greyed out.
   - add/reorder preview classes are neutralized when leftover inline animation is absent.
*/
#crystal-designer-app .cbd-gems-grid .cbd-gem.is-limit {
  opacity: .78 !important;
  filter: saturate(.82) grayscale(.08) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem.is-limit::before {
  content: "Max" !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 4 !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: rgba(7,17,31,.72) !important;
  color: #fff8ed !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}

#crystal-designer-app .cbd-preview-svg,
#crystal-designer-app .cbd-preview-orbit {
  transform-origin: center center !important;
}

@media (max-width: 860px) {
  #crystal-designer-app .cbd-gems-grid .cbd-gem.is-limit {
    opacity: .82 !important;
  }
}


/* ===== v20AH track-aware spacing guard =====
   Keep SVG beads crisp after the new one-track layout. The layout is now done in JS,
   so CSS only protects rendering and hover states.
*/
#crystal-designer-app .cbd-preview-orbit .cbd-preview-bead {
  vector-effect: non-scaling-stroke !important;
}

#crystal-designer-app .cbd-preview-track-note {
  display: none !important;
}

/* ===== v20AI mobile layout lift + preview-drag click guard =====
   Scope: no zoom / no rotation. Keep v20AH track-aware layout and only:
   - lift/compact the mobile header to give the preview more room
   - enlarge the middle wrist preview area
   - prevent bottom gem cards from showing click/active feedback while reordering preview beads
*/
@media (max-width: 760px) {
  #crystal-designer-app .cbd-topbar {
    height: 64px !important;
    min-height: 64px !important;
    padding: 6px 10px !important;
    grid-template-columns: minmax(96px, 1fr) auto !important;
    gap: 7px !important;
  }

  #crystal-designer-app .cbd-topbar-left {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  #crystal-designer-app .cbd-topbar-exit {
    width: 30px !important;
    height: 30px !important;
    font-size: 21px !important;
    box-shadow: 0 5px 13px rgba(7,17,31,.07) !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    font-size: 22px !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
  }

  #crystal-designer-app .cbd-mobile-top-actions {
    grid-template-columns: 112px 54px 42px !important;
    gap: 6px !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    width: 112px !important;
  }

  #crystal-designer-app .cbd-mobile-save-btn {
    width: 54px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    gap: 4px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn span {
    width: 22px !important;
    height: 3px !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    height: calc(100svh - 64px) !important;
  }

  #crystal-designer-app .cbd-preview {
    flex: 0 0 clamp(326px, 43svh, 420px) !important;
    height: clamp(326px, 43svh, 420px) !important;
    min-height: 326px !important;
    max-height: 420px !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    inset: 34px 8px 50px 8px !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    width: min(78vw, 330px) !important;
    height: min(78vw, 330px) !important;
    max-width: 330px !important;
    max-height: 330px !important;
  }

  /* During preview reorder, do not let the lower gem panel flash :active or receive delayed clicks. */
  #crystal-designer-app.cbd-drag-active .cbd-stone-panel,
  #crystal-designer-app.cbd-preview-reorder-lock .cbd-stone-panel {
    pointer-events: none !important;
  }

  #crystal-designer-app.cbd-drag-active .cbd-gems-grid .cbd-gem,
  #crystal-designer-app.cbd-drag-active .cbd-gems-grid .cbd-gem:active,
  #crystal-designer-app.cbd-preview-reorder-lock .cbd-gems-grid .cbd-gem,
  #crystal-designer-app.cbd-preview-reorder-lock .cbd-gems-grid .cbd-gem:active {
    transform: none !important;


    border-color: rgba(7,17,31,.08) !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app .cbd-topbar {
    height: 62px !important;
    min-height: 62px !important;
    padding: 6px 9px !important;
    grid-template-columns: minmax(82px, 1fr) auto !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    height: calc(100svh - 62px) !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    font-size: 20px !important;
  }

  #crystal-designer-app .cbd-mobile-top-actions {
    grid-template-columns: 102px 50px 40px !important;
    gap: 5px !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn { width: 102px !important; }
  #crystal-designer-app .cbd-mobile-save-btn { width: 50px !important; }
  #crystal-designer-app .cbd-mobile-menu-btn { width: 40px !important; min-width: 40px !important; }

  #crystal-designer-app .cbd-preview {
    flex-basis: clamp(314px, 42svh, 390px) !important;
    height: clamp(314px, 42svh, 390px) !important;
    min-height: 314px !important;
    max-height: 390px !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    width: min(76vw, 310px) !important;
    height: min(76vw, 310px) !important;
    max-width: 310px !important;
    max-height: 310px !important;
  }
}

/* ===== v20AJ mobile top lift + preview room =====
   Scope: mobile layout positioning only.
   - Do not change rotation / zoom / add-to-cart / drag logic.
   - Lift the whole designer upward to reclaim the blank strip above the app header.
   - Give the middle wrist preview a little more vertical room.
*/
@media (max-width: 760px) {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #07111f !important;
  }

  #MainContent,
  main,
  .main-content,
  .page-width,
  .page-inner-width,
  .container,
  .content-container,
  .shopify-section:has(#crystal-designer-app) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #crystal-designer-app {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-root {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-topbar {
    height: 60px !important;
    min-height: 60px !important;
    padding-top: 4px !important;
    padding-bottom: 5px !important;
    margin-top: 0 !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    height: calc(100dvh - 60px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 60px) !important;
  }

  #crystal-designer-app .cbd-preview {
    flex: 0 0 clamp(342px, 45dvh, 438px) !important;
    height: clamp(342px, 45dvh, 438px) !important;
    min-height: 342px !important;
    max-height: 438px !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    inset: 30px 8px 48px 8px !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app .cbd-topbar {
    height: 58px !important;
    min-height: 58px !important;
    padding-top: 4px !important;
    padding-bottom: 5px !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    height: calc(100dvh - 58px) !important;
    max-height: calc(100dvh - 58px) !important;
  }

  #crystal-designer-app .cbd-preview {
    flex-basis: clamp(326px, 44dvh, 410px) !important;
    height: clamp(326px, 44dvh, 410px) !important;
    min-height: 326px !important;
    max-height: 410px !important;
  }
}


/* ===== v20AK mobile preview dominant layout =====
   Scope: mobile CSS only. No rotation / zoom / add-to-cart / drag logic changes.
   Goal: make the middle wrist preview the largest zone and compress the lower gem picker.
*/
@media (max-width: 760px) {
  #crystal-designer-app .cbd-topbar {
    height: 58px !important;
    min-height: 58px !important;
    padding-top: 3px !important;
    padding-bottom: 4px !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    height: calc(100dvh - 58px) !important;
    max-height: calc(100dvh - 58px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Middle area now owns the remaining height. */
  #crystal-designer-app .cbd-preview {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 350px !important;
    max-height: none !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    inset: 28px 6px 44px 6px !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    width: min(83vw, 360px) !important;
    height: min(83vw, 360px) !important;
    max-width: 360px !important;
    max-height: 360px !important;
  }

  /* Lower picker is intentionally shorter and more compact. */
  #crystal-designer-app .cbd-stone-panel {
    flex: 0 0 clamp(258px, 34dvh, 322px) !important;
    height: clamp(258px, 34dvh, 322px) !important;
    max-height: clamp(258px, 34dvh, 322px) !important;
    min-height: 0 !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    grid-template-rows: 50px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 7px !important;
    padding: 8px 10px 9px !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    width: 78px !important;
    gap: 7px !important;
    padding-right: 1px !important;
    padding-bottom: 8px !important;
  }

  #crystal-designer-app .cbd-tab {
    min-height: 45px !important;
    border-radius: 16px !important;
    padding: 6px 5px !important;
    font-size: 11.8px !important;
    line-height: 1.05 !important;
  }

  #crystal-designer-app .cbd-search-wrap {
    height: 48px !important;
    min-height: 48px !important;
  }

  #crystal-designer-app .cbd-search-wrap::before {
    left: 16px !important;
    width: 17px !important;
    height: 17px !important;
  }

  #crystal-designer-app .cbd-search {
    height: 48px !important;
    min-height: 48px !important;
    line-height: 48px !important;
    padding-left: 43px !important;
    font-size: 15.5px !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    gap: 7px !important;
    padding: 0 1px 14px 0 !important;
    align-content: start !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 96px !important;
    min-height: 96px !important;
    border-radius: 15px !important;
    padding: 6px 3px 5px !important;
    gap: 4px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 40px !important;
    height: 40px !important;
    margin-top: 0 !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem b,
  #crystal-designer-app .cbd-gem-meta b {
    font-size: 11.6px !important;
    line-height: 1.05 !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem small,
  #crystal-designer-app .cbd-gem-meta small {
    font-size: 9.9px !important;
    line-height: 1.05 !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon {
    top: 6px !important;
    right: 6px !important;
    width: 22px !important;
    height: 22px !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app .cbd-topbar {
    height: 56px !important;
    min-height: 56px !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
  }

  #crystal-designer-app .cbd-preview {
    min-height: 326px !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    width: min(82vw, 330px) !important;
    height: min(82vw, 330px) !important;
    max-width: 330px !important;
    max-height: 330px !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    flex-basis: clamp(246px, 33dvh, 300px) !important;
    height: clamp(246px, 33dvh, 300px) !important;
    max-height: clamp(246px, 33dvh, 300px) !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    width: 74px !important;
  }

  #crystal-designer-app .cbd-tab {
    min-height: 42px !important;
    font-size: 11.2px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 90px !important;
    min-height: 90px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 37px !important;
    height: 37px !important;
  }
}


/* ===== v20AL mobile layout fill + picker stability fix =====
   Scope: mobile only. No rotation / zoom / add-to-cart / backend logic changes.
   Fixes:
   - dark picker area ending too early and leaving a white blank strip near the browser toolbar
   - bead picker cards being clipped while there is still unused page space
   - middle preview remains the largest zone, but lower picker gets a stable internal scroll area
   - disabled Max cards stay readable, not blacked out
*/
@media (max-width: 760px) {
  html,
  body {
    height: var(--cbd-vh, 100dvh) !important;
    min-height: var(--cbd-vh, 100dvh) !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    overflow: hidden !important;
    background: #07111f !important;
  }

  #MainContent,
  main,
  .main-content,
  .page-width,
  .page-inner-width,
  .container,
  .content-container,
  .shopify-section:has(#crystal-designer-app) {
    height: var(--cbd-vh, 100dvh) !important;
    min-height: var(--cbd-vh, 100dvh) !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    overflow: hidden !important;
    background: #07111f !important;
  }

  #crystal-designer-app {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--cbd-vh, 100dvh) !important;
    min-height: var(--cbd-vh, 100dvh) !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    overflow: hidden !important;
    background: #07111f !important;
  }

  #crystal-designer-app .cbd-root {
    height: var(--cbd-vh, 100dvh) !important;
    min-height: var(--cbd-vh, 100dvh) !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #07111f !important;
  }

  #crystal-designer-app .cbd-topbar {
    flex: 0 0 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding-top: 2px !important;
    padding-bottom: 3px !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    flex: 1 1 auto !important;
    height: calc(var(--cbd-vh, 100dvh) - 56px) !important;
    min-height: 0 !important;
    max-height: calc(var(--cbd-vh, 100dvh) - 56px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) clamp(316px, 36dvh, 388px) !important;
    overflow: hidden !important;
    background: #07111f !important;
  }

  #crystal-designer-app .cbd-preview {
    grid-row: 1 !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    inset: 24px 5px 40px 5px !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    width: min(88vw, 382px) !important;
    height: min(88vw, 382px) !important;
    max-width: 382px !important;
    max-height: 382px !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    grid-row: 2 !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) !important;
    grid-template-rows: 48px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 7px !important;
    padding: 7px 10px max(10px, env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(246,220,170,.08), transparent 36%),
      linear-gradient(180deg, #081525 0%, #07111f 100%) !important;
    border-top: 1px solid rgba(246,220,170,.15) !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    grid-row: 1 / span 2 !important;
    width: 80px !important;
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 8px !important;
    padding: 0 1px 10px 0 !important;
  }

  #crystal-designer-app .cbd-tab {
    min-height: 48px !important;
    border-radius: 17px !important;
    padding: 6px 5px !important;
    font-size: 11.8px !important;
    line-height: 1.06 !important;
  }

  #crystal-designer-app .cbd-search-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
  }

  #crystal-designer-app .cbd-search {
    height: 46px !important;
    min-height: 46px !important;
    line-height: 46px !important;
    padding-left: 42px !important;
    font-size: 15px !important;
  }

  #crystal-designer-app .cbd-search-wrap::before {
    left: 15px !important;
    width: 17px !important;
    height: 17px !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    grid-column: 2 !important;
    grid-row: 2 !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 0 1px 18px 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 104px !important;
    min-height: 104px !important;
    border-radius: 16px !important;
    padding: 7px 4px 6px !important;
    gap: 4px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 42px !important;
    height: 42px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem.is-limit {
    opacity: .90 !important;
    filter: saturate(.88) grayscale(.04) !important;
    background: rgba(255,255,255,.76) !important;
    border-color: rgba(246,220,170,.26) !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem.is-limit::before {
    top: 7px !important;
    left: 7px !important;
    padding: 2px 6px !important;
    background: rgba(7,17,31,.62) !important;
    font-size: 8.5px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem.is-limit b,
  #crystal-designer-app .cbd-gems-grid .cbd-gem.is-limit small,
  #crystal-designer-app .cbd-gems-grid .cbd-gem.is-limit .cbd-gem-img {
    opacity: .82 !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app .cbd-topbar {
    flex-basis: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    height: calc(var(--cbd-vh, 100dvh) - 54px) !important;
    max-height: calc(var(--cbd-vh, 100dvh) - 54px) !important;
    grid-template-rows: minmax(0, 1fr) clamp(300px, 35dvh, 360px) !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    width: 76px !important;
  }

  #crystal-designer-app .cbd-tab {
    min-height: 44px !important;
    font-size: 11.2px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 96px !important;
    min-height: 96px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 38px !important;
    height: 38px !important;
  }
}

/* ===== v20AM mobile preview more space =====
   Scope: mobile CSS only. No rotation / zoom / add-to-cart / backend logic changes.
   Goal: compress the lower bead picker a little more and give the center bracelet preview more height.
*/
@media (max-width: 760px) {
  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    /* v20AL used clamp(316px, 36dvh, 388px). Shrink picker so preview becomes dominant. */
    grid-template-rows: minmax(0, 1fr) clamp(268px, 30dvh, 330px) !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    inset: 18px 4px 30px 4px !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    width: min(92vw, 410px) !important;
    height: min(92vw, 410px) !important;
    max-width: 410px !important;
    max-height: 410px !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-rows: 42px minmax(0, 1fr) !important;
    column-gap: 7px !important;
    row-gap: 6px !important;
    padding: 6px 9px max(8px, env(safe-area-inset-bottom)) !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    width: 76px !important;
    gap: 7px !important;
    padding-bottom: 8px !important;
  }

  #crystal-designer-app .cbd-tab {
    min-height: 42px !important;
    border-radius: 16px !important;
    padding: 5px 4px !important;
    font-size: 11.2px !important;
  }

  #crystal-designer-app .cbd-search-wrap {
    height: 40px !important;
    min-height: 40px !important;
  }

  #crystal-designer-app .cbd-search {
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    padding-left: 38px !important;
    font-size: 14.5px !important;
  }

  #crystal-designer-app .cbd-search-wrap::before {
    left: 14px !important;
    width: 15px !important;
    height: 15px !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    gap: 7px !important;
    padding-bottom: 12px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 94px !important;
    min-height: 94px !important;
    border-radius: 15px !important;
    padding: 6px 4px 5px !important;
    gap: 3px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 38px !important;
    height: 38px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem b {
    font-size: 11.2px !important;
    line-height: 1.08 !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem small {
    font-size: 9.6px !important;
    line-height: 1.08 !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon {
    width: 20px !important;
    height: 20px !important;
    right: 6px !important;
    top: 6px !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon svg {
    width: 13px !important;
    height: 13px !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    grid-template-rows: minmax(0, 1fr) clamp(250px, 29dvh, 300px) !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: 38px minmax(0, 1fr) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    width: 72px !important;
  }

  #crystal-designer-app .cbd-tab {
    min-height: 38px !important;
    font-size: 10.8px !important;
  }

  #crystal-designer-app .cbd-search,
  #crystal-designer-app .cbd-search-wrap {
    height: 38px !important;
    min-height: 38px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 86px !important;
    min-height: 86px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 34px !important;
    height: 34px !important;
  }
}

/* ===== v20AN mobile drag hit + centered auto canvas growth =====
   Scope: stable bugfix only. Rotation and manual zoom remain disabled.
   Fixes:
   - top-left / top-right preview beads can be dragged through FIT/TOTAL/Base fee overlays;
   - larger bracelets auto-scale the internal SVG orbit around the moonsyl center;
   - preview stage remains centered and does not fight bottom picker layout.
*/
#crystal-designer-app .cbd-mobile-statusbar,
#crystal-designer-app .cbd-mobile-statusbar span,
#crystal-designer-app .cbd-mobile-statusbar strong,
#crystal-designer-app .cbd-mobile-base-fee {
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

#crystal-designer-app .cbd-preview-stage {
  overflow: visible !important;
}

#crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
#crystal-designer-app .cbd-preview-stage svg {
  overflow: visible !important;
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-preview {
    overflow: visible !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 30px !important;
    bottom: 24px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    z-index: 4 !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    width: min(96vw, 445px) !important;
    height: min(96vw, 445px) !important;
    max-width: 445px !important;
    max-height: 445px !important;
    transform: none !important;
    transform-origin: center center !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  #crystal-designer-app .cbd-preview-bead {
    pointer-events: all !important;
    touch-action: none !important;
  }

  #crystal-designer-app .cbd-mobile-inspiration-btn,
  #crystal-designer-app .cbd-preview-trash {
    z-index: 12 !important;
  }
}


/* ===== Moonsyl v20AP centered auto-shrink fix =====
   Fixes automatic preview shrink drifting right/down.
   The SVG itself must stay centered; only the internal orbit group may transform.
*/
#crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
#crystal-designer-app .cbd-preview-stage svg {
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  transform-origin: center center !important;
}

#crystal-designer-app .cbd-preview-orbit {
  transform-box: view-box !important;
  transform-origin: 260px 260px !important;
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-preview-stage {
    position: absolute !important;
    inset: 28px 0 22px 0 !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    overflow: visible !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(92vw, 430px) !important;
    height: min(92vw, 430px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 430px !important;
    max-height: 430px !important;
    margin: 0 auto !important;
    transform: none !important;
    overflow: visible !important;
  }
}


/* ===== v20AR center lock + mobile layout gap fix =====
   Scope: no rotation, no manual zoom. Fixes:
   1) preview artwork must stay centered; remove SVG/orbit shrink drift;
   2) the dark blank band above the picker belongs to preview, not picker;
   3) picker remains compact and internally scrollable.
*/
#crystal-designer-app .cbd-preview-orbit {
  transform-origin: 260px 260px !important;
  transform-box: view-box !important;
}

@media (max-width: 760px) {
  #crystal-designer-app,
  #crystal-designer-app .cbd-root {
    height: var(--cbd-vh, 100dvh) !important;
    min-height: var(--cbd-vh, 100dvh) !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-topbar {
    flex: 0 0 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) clamp(242px, 27dvh, 308px) !important;
    height: calc(var(--cbd-vh, 100dvh) - 56px) !important;
    min-height: 0 !important;
    max-height: calc(var(--cbd-vh, 100dvh) - 56px) !important;
    overflow: hidden !important;
    background: #07111f !important;
  }

  #crystal-designer-app .cbd-preview {
    grid-row: 1 !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 20px !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 4 !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(92vw, 420px) !important;
    height: min(92vw, 420px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 420px !important;
    max-height: 420px !important;
    margin: 0 auto !important;
    transform: none !important;
    transform-origin: center center !important;
    overflow: visible !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    grid-row: 2 !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    padding: 6px 9px max(8px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(246,220,170,.08), transparent 34%),
      linear-gradient(180deg, #081525 0%, #07111f 100%) !important;
    border-top: 1px solid rgba(246,220,170,.15) !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    width: 76px !important;
    height: 100% !important;
    max-height: none !important;
    gap: 7px !important;
    padding: 0 1px 8px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #crystal-designer-app .cbd-tab {
    min-height: 40px !important;
    border-radius: 16px !important;
    padding: 5px 4px !important;
    font-size: 11px !important;
  }

  #crystal-designer-app .cbd-search-wrap,
  #crystal-designer-app .cbd-search {
    height: 40px !important;
    min-height: 40px !important;
  }

  #crystal-designer-app .cbd-search {
    line-height: 40px !important;
    padding-left: 38px !important;
    font-size: 14.5px !important;
  }

  #crystal-designer-app .cbd-search-wrap::before {
    left: 14px !important;
    width: 15px !important;
    height: 15px !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-content: start !important;
    gap: 7px !important;
    padding: 0 1px 12px 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem {
    height: 90px !important;
    min-height: 90px !important;
    border-radius: 15px !important;
    padding: 6px 4px 5px !important;
    gap: 3px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem-img {
    width: 36px !important;
    height: 36px !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem b {
    font-size: 11px !important;
    line-height: 1.06 !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem small {
    font-size: 9.4px !important;
    line-height: 1.06 !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app .cbd-topbar {
    flex-basis: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    grid-template-rows: minmax(0, 1fr) clamp(226px, 25dvh, 280px) !important;
    height: calc(var(--cbd-vh, 100dvh) - 54px) !important;
    max-height: calc(var(--cbd-vh, 100dvh) - 54px) !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    width: min(91vw, 390px) !important;
    height: min(91vw, 390px) !important;
    max-width: 390px !important;
    max-height: 390px !important;
  }
}


/* ===== v20AS mobile preview cover gap fix =====
   Scope: mobile CSS only.
   User request: do not change other functions; only let the middle bracelet preview visually cover
   the extra dark band above the bead picker.
*/
@media (max-width: 760px) {
  /* Keep the actual picker logic untouched; only extend the preview background downward. */
  #crystal-designer-app .cbd-preview {
    position: relative !important;
    z-index: 6 !important;
    overflow: visible !important;
    border-bottom: 0 !important;
  }

  /* This visually belongs to the preview area, so the dark picker header band disappears. */
  #crystal-designer-app .cbd-preview::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -76px !important;
    height: 76px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 50% -12%, rgba(255,255,255,.86), rgba(255,255,255,.56) 30%, transparent 62%),
      radial-gradient(circle at 52% 10%, rgba(246,220,170,.34), transparent 48%),
      linear-gradient(180deg, rgba(255,248,237,.96) 0%, rgba(255,246,231,.88) 54%, rgba(12,26,45,0) 100%) !important;

    animation: none !important;
    border-bottom: 1px solid rgba(246,220,170,.12) !important;
  }

  /* Make sure preview controls stay above the extended preview background. */
  #crystal-designer-app .cbd-mobile-statusbar,
  #crystal-designer-app .cbd-mobile-base-fee,
  #crystal-designer-app .cbd-mobile-inspiration-btn,
  #crystal-designer-app .cbd-preview-trash {
    z-index: 12 !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    z-index: 4 !important;
  }

  /* Let the picker content stay above only where it actually starts; no functional changes. */
  #crystal-designer-app .cbd-stone-panel {
    position: relative !important;
    z-index: 3 !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll,
  #crystal-designer-app .cbd-search-wrap,
  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    position: relative !important;
    z-index: 8 !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app .cbd-preview::after {
    bottom: -66px !important;
    height: 66px !important;
  }
}

/* ===== v20AT REAL mobile gap fix =====
   Scope: mobile layout only.
   Fix the exact dark blank band between preview and bead picker.
   Root cause: that band belongs to the top of .cbd-stone-panel, so extending
   .cbd-preview::after cannot cover it because the picker panel sits above it.
   Solution: use a hard mobile split: preview occupies all space above picker;
   picker is pinned to bottom and its content starts at the top of its own area.
   No JS / cart / add / drag / tooltip logic changes.
*/
@media (max-width: 760px) {
  #crystal-designer-app {
    --cbd-mobile-topbar-h: 54px;
    --cbd-mobile-picker-h: clamp(292px, 32dvh, 344px);
  }

  #crystal-designer-app,
  #crystal-designer-app .cbd-root {
    height: var(--cbd-vh, 100dvh) !important;
    min-height: var(--cbd-vh, 100dvh) !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-topbar {
    flex: 0 0 var(--cbd-mobile-topbar-h) !important;
    height: var(--cbd-mobile-topbar-h) !important;
    min-height: var(--cbd-mobile-topbar-h) !important;
    max-height: var(--cbd-mobile-topbar-h) !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: calc(var(--cbd-vh, 100dvh) - var(--cbd-mobile-topbar-h)) !important;
    min-height: 0 !important;
    max-height: calc(var(--cbd-vh, 100dvh) - var(--cbd-mobile-topbar-h)) !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 54% 38%, rgba(246,220,170,.20), transparent 38%),
      linear-gradient(135deg, #f8fbfd 0%, #fffaf1 62%, #f8e8c8 132%) !important;
  }

  #crystal-designer-app .cbd-preview {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: var(--cbd-mobile-picker-h) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 2 !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(246,220,170,.16) !important;
    background:
      radial-gradient(circle at 52% 44%, rgba(255,255,255,.76), transparent 32%),
      radial-gradient(circle at 70% 78%, rgba(246,220,170,.28), transparent 40%),
      linear-gradient(135deg, #f8fbfd 0%, #fffaf1 62%, #f8e8c8 132%) !important;
  }

  /* Remove the previous fake cover strip; it cannot solve the gap because the picker panel is above it. */
  #crystal-designer-app .cbd-preview::after {
    content: none !important;
    display: none !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    position: absolute !important;
    inset: 10px 0 4px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 4 !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: min(92vw, 420px) !important;
    height: min(92vw, 420px) !important;
    max-width: 420px !important;
    max-height: 420px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: var(--cbd-mobile-picker-h) !important;
    min-height: 0 !important;
    max-height: var(--cbd-mobile-picker-h) !important;
    margin: 0 !important;
    padding: 6px 9px max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 8 !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 7px !important;
    align-content: start !important;
    align-items: start !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(246,220,170,.18) !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(246,220,170,.08), transparent 34%),
      linear-gradient(180deg, #081525 0%, #07111f 100%) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #crystal-designer-app .cbd-stone-panel .cbd-left-title {
    display: none !important;
  }

  #crystal-designer-app .cbd-tabs,
  #crystal-designer-app .cbd-tabs-scroll {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 76px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 1px 8px 0 !important;
    gap: 7px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
  }

  #crystal-designer-app .cbd-search-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: stretch !important;
    position: relative !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
  }

  #crystal-designer-app .cbd-search {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    margin: 0 !important;
    padding: 0 12px 0 38px !important;
    font-size: 14.5px !important;
  }

  #crystal-designer-app .cbd-search-wrap::before {
    left: 14px !important;
    top: 50% !important;
    width: 15px !important;
    height: 15px !important;
    transform: translateY(-50%) !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 1px 12px 0 !important;
    gap: 7px !important;
    align-content: start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app { --cbd-mobile-picker-h: clamp(270px, 30dvh, 318px); }
}


/* ===== v20AU HARD mobile split gap fix =====
   ONLY fixes the dark empty band between preview and picker on mobile.
   No JS logic changes. No add/cart/drag/search/tooltip changes.
   Important: use CSS grid rows instead of the older absolute/flex stacked rules,
   so the preview row ends exactly where the picker row starts.
*/
@media (max-width: 760px) {
  #crystal-designer-app {
    --cbd-mobile-topbar-h: 54px !important;
    --cbd-mobile-picker-h: clamp(296px, 32dvh, 344px) !important;
  }

  #crystal-designer-app,
  #crystal-designer-app .cbd-root {
    width: 100vw !important;
    height: var(--cbd-vh, 100dvh) !important;
    min-height: var(--cbd-vh, 100dvh) !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    overflow: hidden !important;
    background: #07111f !important;
  }

  #crystal-designer-app .cbd-topbar {
    position: relative !important;
    flex: 0 0 var(--cbd-mobile-topbar-h) !important;
    height: var(--cbd-mobile-topbar-h) !important;
    min-height: var(--cbd-mobile-topbar-h) !important;
    max-height: var(--cbd-mobile-topbar-h) !important;
    margin: 0 !important;
    z-index: 30 !important;
  }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) var(--cbd-mobile-picker-h) !important;
    gap: 0 !important;
    width: 100vw !important;
    height: calc(var(--cbd-vh, 100dvh) - var(--cbd-mobile-topbar-h)) !important;
    min-height: 0 !important;
    max-height: calc(var(--cbd-vh, 100dvh) - var(--cbd-mobile-topbar-h)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #07111f !important;
  }

  #crystal-designer-app .cbd-preview {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: initial !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(246,220,170,.16) !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 52% 43%, rgba(255,255,255,.78), transparent 32%),
      radial-gradient(circle at 72% 82%, rgba(246,220,170,.28), transparent 42%),
      linear-gradient(135deg, #f8fbfd 0%, #fffaf1 62%, #f8e8c8 132%) !important;

    transform: none !important;
  }

  #crystal-designer-app .cbd-preview::before,
  #crystal-designer-app .cbd-preview::after {
    content: none !important;
    display: none !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    position: absolute !important;
    inset: 6px 0 54px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 4 !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: min(92vw, 420px) !important;
    height: min(92vw, 420px) !important;
    max-width: 420px !important;
    max-height: 420px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  #crystal-designer-app .cbd-stone-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: initial !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    z-index: 8 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px 9px max(8px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 7px !important;
    align-content: start !important;
    align-items: start !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(246,220,170,.18) !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(246,220,170,.08), transparent 34%),
      linear-gradient(180deg, #081525 0%, #07111f 100%) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #crystal-designer-app .cbd-stone-panel .cbd-left-title {
    display: none !important;
  }

  #crystal-designer-app .cbd-stone-panel .cbd-tabs,
  #crystal-designer-app .cbd-stone-panel .cbd-tabs-scroll {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    position: relative !important;
    width: 76px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 1px 8px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-right: 0 !important;
    transform: none !important;
    z-index: 2 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #crystal-designer-app .cbd-stone-panel .cbd-search-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    align-self: start !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  #crystal-designer-app .cbd-search {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    margin: 0 !important;
    padding: 0 12px 0 38px !important;
    font-size: 14.5px !important;
    border-radius: 999px !important;
  }

  #crystal-designer-app .cbd-search-wrap::before {
    left: 14px !important;
    top: 50% !important;
    width: 15px !important;
    height: 15px !important;
    transform: translateY(-50%) !important;
  }

  #crystal-designer-app .cbd-gems,
  #crystal-designer-app .cbd-gems-grid {
    grid-column: 2 !important;
    grid-row: 2 !important;
    position: relative !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 1px 12px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-content: start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    z-index: 2 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #crystal-designer-app .cbd-summary-panel {
    display: none !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app { --cbd-mobile-picker-h: clamp(270px, 30dvh, 318px) !important; }
}

/* ===== v20AV REAL root fix: remove the mobile dark gap above picker content =====
   Only touches mobile layout placement. No JS logic, drag, add-to-cart, search,
   tooltip, preview math, or desktop rules are changed.
   Root cause fixed here: previous fixes changed the parent split, but old high-specificity
   height/min-height/padding rules still left picker contents lower inside the stone panel.
   This block makes the mobile app a fixed absolute stack and pins picker children to the
   top of the picker panel, so there is no empty dark band between preview and search. */
@media (max-width: 760px) {
  #crystal-designer-app {
    --cbd-mobile-topbar-h: 54px !important;
    --cbd-mobile-picker-h: clamp(296px, 32dvh, 344px) !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--cbd-vh, 100dvh) !important;
    min-height: var(--cbd-vh, 100dvh) !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #07111f !important;
  }

  #crystal-designer-app .cbd-root {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--cbd-vh, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #07111f !important;
  }

  #crystal-designer-app .cbd-root > .cbd-topbar {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: var(--cbd-mobile-topbar-h) !important;
    min-height: var(--cbd-mobile-topbar-h) !important;
    max-height: var(--cbd-mobile-topbar-h) !important;
    margin: 0 !important;
    z-index: 30 !important;
  }

  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-root > .cbd-layout {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--cbd-mobile-topbar-h) !important;
    bottom: 0 !important;
    inset: var(--cbd-mobile-topbar-h) 0 0 0 !important;
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #07111f !important;
    transform: none !important;
  }

  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card.cbd-preview,
  #crystal-designer-app .cbd-root > .cbd-layout > .cbd-card.cbd-preview {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: var(--cbd-mobile-picker-h) !important;
    inset: 0 0 var(--cbd-mobile-picker-h) 0 !important;
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(246,220,170,.16) !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 52% 43%, rgba(255,255,255,.78), transparent 32%),
      radial-gradient(circle at 72% 82%, rgba(246,220,170,.28), transparent 42%),
      linear-gradient(135deg, #f8fbfd 0%, #fffaf1 62%, #f8e8c8 132%) !important;

    transform: none !important;
    z-index: 2 !important;
  }

  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card.cbd-stone-panel,
  #crystal-designer-app .cbd-root > .cbd-layout > .cbd-card.cbd-stone-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    inset: auto 0 0 0 !important;
    display: block !important;
    width: 100vw !important;
    height: var(--cbd-mobile-picker-h) !important;
    min-height: 0 !important;
    max-height: var(--cbd-mobile-picker-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(246,220,170,.18) !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(246,220,170,.08), transparent 34%),
      linear-gradient(180deg, #081525 0%, #07111f 100%) !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 8 !important;
  }

  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-left-title,
  #crystal-designer-app .cbd-root > .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-left-title {
    display: none !important;
  }

  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-tabs,
  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-tabs-scroll,
  #crystal-designer-app .cbd-root > .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-tabs,
  #crystal-designer-app .cbd-root > .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-tabs-scroll {
    position: absolute !important;
    left: 10px !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 76px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 1px 8px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    z-index: 2 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-search-wrap,
  #crystal-designer-app .cbd-root > .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-search-wrap {
    position: absolute !important;
    left: 96px !important;
    right: 12px !important;
    top: 8px !important;
    bottom: auto !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
    z-index: 3 !important;
  }

  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-gems,
  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-gems-grid,
  #crystal-designer-app .cbd-root > .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-gems,
  #crystal-designer-app .cbd-root > .cbd-layout > .cbd-card.cbd-stone-panel > .cbd-gems-grid {
    position: absolute !important;
    left: 96px !important;
    right: 12px !important;
    top: 56px !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 1px 12px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-content: start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    z-index: 2 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #crystal-designer-app .cbd-summary-panel {
    display: none !important;
  }
}


/* ===== v20AY zoom + top bead drag hit fix =====
   Safe layer only: no render recursion, no rotation. */
#crystal-designer-app .cbd-preview-stage {
  touch-action: none !important;
}

#crystal-designer-app .cbd-preview-hit {
  pointer-events: all !important;
  cursor: grab !important;
  opacity: 0 !important;
}

#crystal-designer-app.cbd-drag-active .cbd-preview-hit {
  pointer-events: none !important;
}

#crystal-designer-app .cbd-mobile-fit,
#crystal-designer-app .cbd-mobile-total,
#crystal-designer-app .cbd-mobile-base-fee {
  pointer-events: none !important;
}

#crystal-designer-app .cbd-preview-zoom-controls {
  position: absolute !important;
  left: 50% !important;
  bottom: 74px !important;
  z-index: 12 !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(24,32,51,.10) !important;


}

#crystal-designer-app .cbd-preview-zoom-btn,
#crystal-designer-app .cbd-preview-zoom-readout {
  appearance: none !important;
  border: 1px solid rgba(24,32,51,.12) !important;
  background: rgba(255,255,255,.92) !important;
  color: #07111f !important;
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  cursor: pointer !important;

}

#crystal-designer-app .cbd-preview-zoom-readout {
  min-width: 60px !important;
  background: linear-gradient(135deg, #fff2c8, #f3ce70) !important;
  border-color: rgba(214,168,74,.56) !important;
  font-size: 13px !important;
}

#crystal-designer-app .cbd-preview-zoom-btn:hover,
#crystal-designer-app .cbd-preview-zoom-readout:hover,
#crystal-designer-app .cbd-preview-zoom-btn:focus-visible,
#crystal-designer-app .cbd-preview-zoom-readout:focus-visible {
  transform: translateY(-1px) !important;

}

#crystal-designer-app .cbd-preview-zoom-btn:active,
#crystal-designer-app .cbd-preview-zoom-readout:active {
  transform: scale(.94) !important;
}

#crystal-designer-app .cbd-preview-zoom-indicator {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 18 !important;
  transform: translate(-50%, -50%) scale(.96) !important;
  min-width: 92px !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
  color: #07111f !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(214,168,74,.30) !important;


  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .16s ease, transform .16s ease !important;
}

#crystal-designer-app .cbd-preview-zoom-indicator.show {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

@media (max-width: 860px) {
  #crystal-designer-app .cbd-preview-zoom-controls {
    bottom: 62px !important;
    padding: 5px !important;
    gap: 6px !important;
  }

  #crystal-designer-app .cbd-preview-zoom-btn,
  #crystal-designer-app .cbd-preview-zoom-readout {
    min-width: 31px !important;
    height: 31px !important;
    font-size: 15px !important;
  }

  #crystal-designer-app .cbd-preview-zoom-readout {
    min-width: 55px !important;
    font-size: 12px !important;
  }
}


/* ===== v20AY zoom center fix =====
   - remove +/- zoom controls completely
   - zoom is applied through SVG viewBox from JS, not CSS transform, so it stays centered
   - preserve transparent hit area for top-left/top-right bead dragging
*/
#crystal-designer-app .cbd-preview-zoom-controls {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#crystal-designer-app .cbd-preview-stage,
#crystal-designer-app .cbd-preview {
  touch-action: none !important;
}

#crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
#crystal-designer-app .cbd-preview-stage svg {
  transform: none !important;
  scale: none !important;
  rotate: none !important;
}

#crystal-designer-app .cbd-preview-orbit {
  transform: none !important;
  transform-box: view-box !important;
  transform-origin: 260px 260px !important;
}

#crystal-designer-app .cbd-preview-hit {
  pointer-events: all !important;
  cursor: grab !important;
  opacity: 0 !important;
}

#crystal-designer-app.cbd-drag-active .cbd-preview-hit {
  pointer-events: none !important;
}

#crystal-designer-app .cbd-mobile-fit,
#crystal-designer-app .cbd-mobile-total,
#crystal-designer-app .cbd-mobile-base-fee {
  pointer-events: none !important;
}

#crystal-designer-app .cbd-preview-zoom-indicator {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 50 !important;
  transform: translate(-50%, -50%) scale(.96) !important;
  min-width: 82px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
  color: #07111f !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(214,168,74,.30) !important;


  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .16s ease, transform .16s ease !important;
}

#crystal-designer-app .cbd-preview-zoom-indicator.show {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-preview-zoom-indicator {
    min-width: 74px !important;
    padding: 9px 14px !important;
    font-size: 17px !important;
  }
}


/* ===== v20AZ safe centered zoom + drag boundary fix =====
   Only fixes:
   1) large bracelet stays inside the mobile preview safe area;
   2) top-left/top-right beads can be dragged through the status badges.
   No layout rewrite, no rotation.
*/
#crystal-designer-app .cbd-mobile-statusbar,
#crystal-designer-app .cbd-mobile-statusbar *,
#crystal-designer-app .cbd-mobile-base-fee {
  pointer-events: none !important;
}

#crystal-designer-app .cbd-preview,
#crystal-designer-app .cbd-preview-stage {
  touch-action: none !important;
}

#crystal-designer-app .cbd-preview-svg {
  overflow: visible !important;
}

#crystal-designer-app .cbd-preview-orbit {
  transform: none !important;
  transform-origin: 260px 260px !important;
  transform-box: view-box !important;
}

#crystal-designer-app .cbd-preview-hit {
  pointer-events: all !important;
  opacity: 0 !important;
  fill: transparent !important;
  stroke: transparent !important;
  cursor: grab !important;
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-preview {
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    overflow: visible !important;
  }
}

/* ===== v20BA mobile preview lower drag fix =====
   Only change: move the bracelet canvas slightly downward on mobile so the
   top-left/top-right beads are no longer under the FIT/TOTAL/Base fee badges.
   Keep all existing zoom/add/cart/picker logic unchanged. */
@media (max-width: 760px) {
  #crystal-designer-app .cbd-preview-stage {
    inset: 34px 0 22px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    transform: none !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar,
  #crystal-designer-app .cbd-mobile-statusbar *,
  #crystal-designer-app .cbd-mobile-base-fee {
    pointer-events: none !important;
  }
}


/* ===== v20BA-panzoom1 mobile canvas pan state =====
   Only shows the internal pan state while a zoomed mobile preview is being dragged.
   It does not change bead layout, add-to-cart, search, trash, or bracelet sizing. */
#crystal-designer-app.cbd-preview-pan-active .cbd-preview {
  cursor: grabbing !important;
}

/* ===== Moonsyl v20BA regressionfix1 =====
   Fixes only the current regressions:
   - toast must disappear on tap and must not leave an invisible touch blocker;
   - mobile/iPhone search must keep the keyboard stable;
   - preview pinch/pan state must not allow bead drag to steal the gesture.
*/
.cbd-toast:not(.show),
.cbd-toast.is-dismissing {
  pointer-events: none !important;
  visibility: hidden !important;
}

.cbd-toast.show {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

#crystal-designer-app .cbd-search {
  -webkit-text-size-adjust: 100% !important;
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-search {
    font-size: 16px !important;
  }

  #crystal-designer-app.cbd-preview-gesture-lock .cbd-preview-bead,
  #crystal-designer-app.cbd-preview-gesture-lock .cbd-preview-hit {
    pointer-events: none !important;
  }
}

/* ===== Moonsyl v20BA-regressionfix2: iOS search overlay + header/gesture polish =====
   Scope: mobile UI and interaction only. No cart/detail/server/database logic. */
.cbd-ios-search-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 10px !important;
  background: rgba(7,17,31,.16) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .16s ease !important;
}

.cbd-ios-search-overlay.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.cbd-ios-search-panel {
  width: min(520px, calc(100vw - 20px)) !important;
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 6px 7px 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(216,170,79,.30) !important;
  box-shadow: 0 18px 50px rgba(7,17,31,.22) !important;
  backdrop-filter: blur(18px) !important;
}

.cbd-ios-search-icon {
  color: rgba(7,17,31,.40) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-align: center !important;
}

.cbd-ios-search-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #07111f !important;
  font-size: 16px !important;
  line-height: 40px !important;
  font-weight: 850 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.cbd-ios-search-input::placeholder {
  color: rgba(7,17,31,.34) !important;
}

.cbd-ios-search-done {
  appearance: none !important;
  height: 40px !important;
  min-width: 62px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  background: linear-gradient(135deg, #fff0c9, #d8aa4f) !important;
  color: #07111f !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: 0 8px 18px rgba(157,110,30,.16) !important;
}

@media (max-width: 760px) {
  #crystal-designer-app {
    --cbd-mobile-topbar-h: 56px !important;
  }

  #crystal-designer-app .cbd-root > .cbd-topbar,
  #crystal-designer-app .cbd-topbar {
    height: var(--cbd-mobile-topbar-h) !important;
    min-height: var(--cbd-mobile-topbar-h) !important;
    max-height: var(--cbd-mobile-topbar-h) !important;
    padding: 6px 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-root > .cbd-layout,
  #crystal-designer-app .cbd-topbar + .cbd-layout {
    top: var(--cbd-mobile-topbar-h) !important;
    inset: var(--cbd-mobile-topbar-h) 0 0 0 !important;
  }

  #crystal-designer-app .cbd-topbar-left {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-topbar-exit {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 24px !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(18px, 5.2vw, 22px) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
  }

  #crystal-designer-app .cbd-mobile-top-actions {
    display: grid !important;
    grid-template-columns: 86px 52px 38px !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: end !important;
    min-width: 0 !important;
  }

  #crystal-designer-app .cbd-mobile-share-btn {
    display: none !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    border-radius: 17px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    width: 86px !important;
  }

  #crystal-designer-app .cbd-mobile-save-btn {
    width: 52px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 38px !important;
    height: 42px !important;
    min-width: 38px !important;
    border-radius: 17px !important;
  }

  #crystal-designer-app .cbd-search {
    font-size: 16px !important;
  }

  #crystal-designer-app .cbd-search[readonly] {
    cursor: pointer !important;
    caret-color: transparent !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app .cbd-mobile-top-actions {
    grid-template-columns: 78px 48px 36px !important;
    gap: 4px !important;
  }

  #crystal-designer-app .cbd-mobile-cart-btn {
    width: 78px !important;
  }

  #crystal-designer-app .cbd-mobile-save-btn {
    width: 48px !important;
  }

  #crystal-designer-app .cbd-mobile-menu-btn {
    width: 36px !important;
    min-width: 36px !important;
  }

  #crystal-designer-app .cbd-mobile-top-btn {
    font-size: 13px !important;
    padding: 0 6px !important;
  }

  #crystal-designer-app .cbd-topbar-left {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  #crystal-designer-app .cbd-topbar-title {
    font-size: 18px !important;
  }
}


/* ===== v20BA-nobasefee1: remove base-fee UI + mobile performance cleanup =====
   Only removes the base-fee badge/row and reduces expensive mobile effects.
   Pricing is now selected pieces only; PC/mobile layout and checkout remain intact. */
#crystal-designer-app .cbd-mobile-base-fee {
  display: none !important;
}

@media (max-width: 760px) {
  #crystal-designer-app {
    --cbd-mobile-topbar-h: 52px !important;
  }

  #crystal-designer-app .cbd-mobile-statusbar {
    top: 8px !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    inset: 18px 0 50px !important;
  }

  #crystal-designer-app .cbd-root,
  #crystal-designer-app .cbd-topbar,
  #crystal-designer-app .cbd-card,
  #crystal-designer-app .cbd-stone-panel,
  #crystal-designer-app .cbd-summary-panel,
  #crystal-designer-app .cbd-code-panel,
  .cbd-modal-card,
  .cbd-modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #crystal-designer-app .cbd-preview::after,
  #crystal-designer-app .cbd-gems-grid .cbd-gem::after,
  #crystal-designer-app .cbd-btn::after,
  .cbd-modal-overlay .cbd-btn::after {
    animation: none !important;
    transition: none !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem,
  #crystal-designer-app .cbd-tab,
  #crystal-designer-app .cbd-btn,
  #crystal-designer-app .cbd-mini-btn,
  #crystal-designer-app .cbd-mobile-top-btn,
  #crystal-designer-app .cbd-mobile-menu-btn,
  #crystal-designer-app .cbd-preview-trash,
  #crystal-designer-app .cbd-mobile-inspiration-btn {
    transition: transform .08s ease, opacity .08s ease, background-color .08s ease, border-color .08s ease !important;
  }

  #crystal-designer-app .cbd-gems-grid .cbd-gem:hover,
  #crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible,
  #crystal-designer-app .cbd-gems-grid .cbd-gem:hover .cbd-gem-img,
  #crystal-designer-app .cbd-preview-bead:hover {
    transform: none !important;

  }

  #crystal-designer-app .cbd-preview image,
  #crystal-designer-app .cbd-preview img,
  #crystal-designer-app .cbd-preview-bead,
  #crystal-designer-app .cbd-gems-grid .cbd-gem-img,
  #crystal-designer-app .cbd-selected-img {

  }

  #crystal-designer-app.cbd-drag-active .cbd-preview-bead.is-drag-target {

  }

  .cbd-drag-ghost {
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.22)) !important;
  }
}

/* ===== Moonsyl Design Lab Premium UI v1 =====
   Scope: visual/layout shell only. Keeps existing add, drag, zoom, search, share, save and cart logic. */
#crystal-designer-app {
  --cbd-bg: #F8F5EF !important;
  --cbd-bg-2: #EFEAE1 !important;
  --cbd-text: #101820 !important;
  --cbd-muted: rgba(16, 24, 32, .62) !important;
  --cbd-line: rgba(16, 24, 32, .10) !important;
  --cbd-gold: #C7A76C !important;
  --cbd-deep: #07111F !important;
  --cbd-lav: #C9B8D8 !important;
  --cbd-blue: #B8C7D8 !important;
  background: #F8F5EF !important;
  color: var(--cbd-text) !important;
}

#crystal-designer-app .cbd-root {
  min-height: var(--cbd-vh, 100dvh) !important;
  height: var(--cbd-vh, 100dvh) !important;
  overflow: hidden !important;
  color: var(--cbd-text) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.92), transparent 34%),
    radial-gradient(circle at 80% 20%, rgba(184,199,216,.18), transparent 28%),
    linear-gradient(180deg, #fbf8f1 0%, #f3eee6 100%) !important;
}

#crystal-designer-app .cbd-topbar {
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 14px clamp(18px, 2vw, 28px) !important;
  background: rgba(255, 253, 248, .88) !important;
  border-bottom: 1px solid rgba(16,24,32,.10) !important;
  box-shadow: 0 8px 32px rgba(16,24,32,.05) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  position: relative !important;
  z-index: 50 !important;
}

#crystal-designer-app .cbd-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-width: 0 !important;
}

#crystal-designer-app .cbd-topbar-exit {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background: rgba(255,255,255,.72) !important;
  color: var(--cbd-deep) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 24px rgba(16,24,32,.06) !important;
}

#crystal-designer-app .cbd-topbar-exit svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#crystal-designer-app .cbd-topbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--cbd-deep) !important;
  text-decoration: none !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(22px, 1.8vw, 30px) !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

#crystal-designer-app .cbd-topbar-mark {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  color: var(--cbd-gold) !important;
}

#crystal-designer-app .cbd-topbar-mark svg { width: 100% !important; height: 100% !important; fill: currentColor !important; }
#crystal-designer-app .cbd-topbar-rule { width: 1px !important; height: 34px !important; background: rgba(16,24,32,.16) !important; }

#crystal-designer-app .cbd-topbar-title {
  color: var(--cbd-deep) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(32px, 2.3vw, 44px) !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

#crystal-designer-app .cbd-mobile-top-actions { display: none !important; }

#crystal-designer-app .cbd-topbar-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

#crystal-designer-app .cbd-topbar-action {
  appearance: none !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 11px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background: rgba(255,255,255,.62) !important;
  color: var(--cbd-deep) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 26px rgba(16,24,32,.045) !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

#crystal-designer-app .cbd-topbar-action:hover { transform: translateY(-1px) !important; box-shadow: 0 16px 34px rgba(16,24,32,.08) !important; }
#crystal-designer-app .cbd-topbar-action svg { width: 19px !important; height: 19px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
#crystal-designer-app .cbd-topbar-confirm { min-width: 188px !important; background: linear-gradient(135deg, #101820, #07111F) !important; color: #fff8ed !important; border-color: rgba(7,17,31,.92) !important; box-shadow: 0 16px 34px rgba(7,17,31,.18) !important; }
#crystal-designer-app .cbd-topbar-confirm .cbd-topbar-arrow { margin-left: 8px !important; }

#crystal-designer-app .cbd-topbar + .cbd-layout,
#crystal-designer-app .cbd-layout {
  height: calc(var(--cbd-vh, 100dvh) - 76px) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: clamp(300px, 21vw, 340px) minmax(0, 1fr) clamp(326px, 23vw, 378px) !important;
  gap: 14px !important;
  padding: 14px !important;
  background:
    radial-gradient(circle at 50% 3%, rgba(255,255,255,.86), transparent 28%),
    linear-gradient(180deg, #F8F5EF 0%, #EFEAE1 100%) !important;
}

#crystal-designer-app .cbd-card,
#crystal-designer-app .cbd-topbar + .cbd-layout .cbd-card,
#crystal-designer-app .cbd-topbar + .cbd-layout .cbd-preview {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 28px !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background: rgba(255,253,248,.66) !important;



  color: var(--cbd-text) !important;
  overflow: hidden !important;
}

#crystal-designer-app .cbd-stone-panel {
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#crystal-designer-app .cbd-left-title {
  margin: 0 !important;
  color: var(--cbd-deep) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 22px !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
#crystal-designer-app .cbd-left-title span { color: var(--cbd-gold) !important; font-family: inherit !important; }

#crystal-designer-app .cbd-search-wrap { margin: 0 !important; position: relative !important; }
#crystal-designer-app .cbd-search-wrap::before { content: "⌕" !important; position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; color: rgba(16,24,32,.38) !important; z-index: 2 !important; font-size: 20px !important; }
#crystal-designer-app .cbd-search {
  height: 44px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(16,24,32,.11) !important;
  background: rgba(255,255,255,.72) !important;
  color: var(--cbd-text) !important;
  padding: 0 14px 0 42px !important;
  font-size: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !important;
}
#crystal-designer-app .cbd-search::placeholder { color: rgba(16,24,32,.40) !important; }
#crystal-designer-app .cbd-search:focus { border-color: rgba(199,167,108,.78) !important; box-shadow: 0 0 0 4px rgba(199,167,108,.13) !important; }

#crystal-designer-app .cbd-tabs,
#crystal-designer-app .cbd-tabs-scroll {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 4px !important;
  border-radius: 18px !important;
  background: rgba(239,234,225,.66) !important;
}
#crystal-designer-app .cbd-tab {
  height: 36px !important;
  padding: 0 6px !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(16,24,32,.68) !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  box-shadow: none !important;
}
#crystal-designer-app .cbd-tab.active,
#crystal-designer-app .cbd-tab:hover { background: var(--cbd-deep) !important; color: #fff8ed !important; box-shadow: 0 10px 22px rgba(7,17,31,.14) !important; }

#crystal-designer-app .cbd-gems-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow-y: auto !important;
  padding: 2px 3px 8px 0 !important;
  align-content: start !important;
}
@media (min-width: 1280px) { #crystal-designer-app .cbd-gems-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

#crystal-designer-app .cbd-gems-grid .cbd-gem {
  min-height: 132px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background: rgba(255,255,255,.64) !important;
  padding: 14px 10px 12px !important;
  box-shadow: 0 12px 30px rgba(16,24,32,.055) !important;
  gap: 9px !important;
}
#crystal-designer-app .cbd-gems-grid .cbd-gem:hover { transform: translateY(-3px) !important; border-color: rgba(199,167,108,.38) !important; box-shadow: 0 18px 44px rgba(16,24,32,.10) !important; background: rgba(255,255,255,.82) !important; }
#crystal-designer-app .cbd-gems-grid .cbd-gem-img { width: 58px !important; height: 58px !important; filter: drop-shadow(0 10px 12px rgba(16,24,32,.18)) !important; }
#crystal-designer-app .cbd-gems-grid .cbd-gem b { color: var(--cbd-text) !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.18 !important; }
#crystal-designer-app .cbd-gems-grid .cbd-gem small { color: rgba(16,24,32,.56) !important; font-size: 12px !important; }
#crystal-designer-app .cbd-gem-detail-icon { top: 10px !important; right: 10px !important; width: 24px !important; height: 24px !important; border-radius: 8px !important; background: rgba(255,255,255,.80) !important; border: 1px solid rgba(16,24,32,.12) !important; color: rgba(16,24,32,.72) !important; }
#crystal-designer-app .cbd-gem-detail-icon svg { width: 16px !important; height: 16px !important; }

#crystal-designer-app .cbd-preview {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 50% 21%, rgba(255,255,255,.92) 0, rgba(255,255,255,.62) 11%, transparent 23%),
    radial-gradient(circle at 50% 63%, rgba(255,255,255,.76), transparent 35%),
    radial-gradient(circle at 17% 25%, rgba(184,199,216,.26), transparent 30%),
    linear-gradient(180deg, #F8F5EF 0%, #eee7dd 58%, #e4dacb 100%) !important;
  isolation: isolate !important;
}
#crystal-designer-app .cbd-preview::before { content: "" !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse at 50% 70%, rgba(199,167,108,.22), transparent 42%) !important; opacity: .94 !important; z-index: 0 !important; pointer-events: none !important; }
#crystal-designer-app .cbd-preview::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 13% !important; width: min(62%, 680px) !important; height: min(24%, 220px) !important; transform: translateX(-50%) !important; border-radius: 50% !important; background: radial-gradient(ellipse, rgba(255,255,255,.70), rgba(199,167,108,.18) 58%, transparent 72%) !important;
 z-index: 0 !important; pointer-events: none !important; }

#crystal-designer-app .cbd-preview-stage {
  position: absolute !important;
  inset: 108px 6% 94px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  touch-action: none !important;
}
#crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
#crystal-designer-app .cbd-preview-stage svg { width: min(74vh, 82%, 760px) !important; height: auto !important; max-width: none !important; overflow: visible !important; }
#crystal-designer-app .cbd-preview image,
#crystal-designer-app .cbd-preview img {
 }
#crystal-designer-app .cbd-preview text { fill: rgba(16,24,32,.40) !important; }

#crystal-designer-app .cbd-mobile-statusbar {
  position: absolute !important;
  left: clamp(16px, 3vw, 44px) !important;
  right: clamp(16px, 3vw, 44px) !important;
  top: 34px !important;
  z-index: 12 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  pointer-events: none !important;
}
#crystal-designer-app .cbd-mobile-fit,
#crystal-designer-app .cbd-mobile-total,
#crystal-designer-app .cbd-preview-trash,
#crystal-designer-app .cbd-mobile-inspiration-btn {
  border-radius: 22px !important;
  border: 1px solid rgba(16,24,32,.12) !important;
  background: rgba(255,255,255,.58) !important;
  color: var(--cbd-text) !important;



}
#crystal-designer-app .cbd-mobile-fit,
#crystal-designer-app .cbd-mobile-total { min-width: 142px !important; padding: 16px 18px !important; display: grid !important; gap: 6px !important; }
#crystal-designer-app .cbd-mobile-fit span,
#crystal-designer-app .cbd-mobile-total span { color: rgba(16,24,32,.62) !important; font-size: 12px !important; font-weight: 860 !important; letter-spacing: .12em !important; text-transform: uppercase !important; }
#crystal-designer-app .cbd-mobile-fit strong,
#crystal-designer-app .cbd-mobile-total strong { color: var(--cbd-deep) !important; font-family: Georgia, 'Times New Roman', serif !important; font-size: clamp(26px, 2.2vw, 36px) !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: -.04em !important; }
#crystal-designer-app .cbd-mobile-fit small,
#crystal-designer-app .cbd-mobile-total small { color: rgba(16,24,32,.58) !important; font-size: 12px !important; line-height: 1.25 !important; }

#crystal-designer-app .cbd-mobile-inspiration-btn {
  position: absolute !important;
  left: clamp(18px, 3vw, 44px) !important;
  bottom: 28px !important;
  z-index: 12 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 176px !important;
  height: 56px !important;
  padding: 0 22px !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  cursor: pointer !important;
}
#crystal-designer-app .cbd-preview-trash {
  right: clamp(18px, 3vw, 44px) !important;
  bottom: 28px !important;
  z-index: 12 !important;
  width: auto !important;
  min-width: 158px !important;
  height: 56px !important;
  padding: 0 18px !important;
  display: inline-grid !important;
  grid-template-columns: 26px auto !important;
  align-items: center !important;
  gap: 11px !important;
  cursor: pointer !important;
}
#crystal-designer-app .cbd-preview-trash small { display: none !important; }
#crystal-designer-app .cbd-preview-trash-text { display: inline !important; color: var(--cbd-text) !important; font-size: 15px !important; font-weight: 760 !important; }
#crystal-designer-app .cbd-preview-trash-icon svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; }

#crystal-designer-app .cbd-summary-panel {
  padding: 18px !important;
  overflow-y: auto !important;
  background: rgba(255,253,248,.72) !important;
}
#crystal-designer-app .cbd-summary-inner { min-height: 100% !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
#crystal-designer-app .cbd-summary-heading { padding: 2px 0 10px !important; border-bottom: 1px solid rgba(16,24,32,.10) !important; }
#crystal-designer-app .cbd-summary-heading span { display: block !important; color: var(--cbd-deep) !important; font-family: Georgia, 'Times New Roman', serif !important; font-size: 24px !important; line-height: 1 !important; letter-spacing: -.025em !important; }
#crystal-designer-app .cbd-summary-heading small { display: block !important; margin-top: 6px !important; color: rgba(16,24,32,.50) !important; font-size: 12px !important; font-weight: 740 !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
#crystal-designer-app .cbd-panel-section { margin: 0 !important; }
#crystal-designer-app .cbd-summary-metrics { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
#crystal-designer-app .cbd-summary-metric { padding: 14px !important; border-radius: 20px !important; background: rgba(255,255,255,.62) !important; border: 1px solid rgba(16,24,32,.09) !important; }
#crystal-designer-app .cbd-summary-metric--wide { grid-column: 1 / -1 !important; }
#crystal-designer-app .cbd-summary-metric span { display: block !important; color: rgba(16,24,32,.56) !important; font-size: 12px !important; font-weight: 820 !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
#crystal-designer-app .cbd-summary-metric strong { display: block !important; margin-top: 7px !important; color: var(--cbd-deep) !important; font-family: Georgia, 'Times New Roman', serif !important; font-size: 25px !important; line-height: 1 !important; font-weight: 500 !important; }
#crystal-designer-app .cbd-summary-metric small { display: block !important; margin-top: 6px !important; color: rgba(16,24,32,.52) !important; font-size: 12px !important; line-height: 1.35 !important; }
#crystal-designer-app .cbd-section-row-title { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 8px !important; }
#crystal-designer-app .cbd-section-row-title span { color: var(--cbd-deep) !important; font-size: 15px !important; font-weight: 820 !important; }
#crystal-designer-app .cbd-section-row-title b { color: rgba(16,24,32,.54) !important; font-size: 12px !important; font-weight: 780 !important; }
#crystal-designer-app .cbd-list { max-height: min(34vh, 360px) !important; margin: 0 !important; padding: 0 !important; overflow-y: auto !important; border-radius: 20px !important; background: rgba(255,255,255,.50) !important; border: 1px solid rgba(16,24,32,.08) !important; }
#crystal-designer-app .cbd-list li { padding: 11px 12px !important; border-bottom: 1px solid rgba(16,24,32,.075) !important; }
#crystal-designer-app .cbd-list li:last-child { border-bottom: 0 !important; }
#crystal-designer-app .cbd-selected-main { grid-template-columns: 42px 1fr !important; }
#crystal-designer-app .cbd-selected-img { width: 38px !important; height: 38px !important; filter: drop-shadow(0 8px 9px rgba(16,24,32,.16)) !important; }
#crystal-designer-app .cbd-selected-main b { color: var(--cbd-deep) !important; font-size: 13px !important; font-weight: 740 !important; }
#crystal-designer-app .cbd-selected-main b em { color: var(--cbd-gold) !important; }
#crystal-designer-app .cbd-selected-main small { color: rgba(16,24,32,.50) !important; font-size: 11px !important; }
#crystal-designer-app .cbd-mini-btn { border-radius: 999px !important; background: rgba(255,255,255,.76) !important; border-color: rgba(16,24,32,.11) !important; color: var(--cbd-deep) !important; }
#crystal-designer-app .cbd-mini-btn:hover { background: var(--cbd-deep) !important; color: #fff8ed !important; }
#crystal-designer-app .cbd-price-card { margin: 0 !important; border-radius: 22px !important; background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(248,245,239,.78)) !important; border: 1px solid rgba(199,167,108,.22) !important; box-shadow: none !important; }
#crystal-designer-app .cbd-price-card p span,
#crystal-designer-app .cbd-price-card h3 span { color: rgba(16,24,32,.60) !important; }
#crystal-designer-app .cbd-price-card h3 b { color: var(--cbd-deep) !important; font-family: Georgia, 'Times New Roman', serif !important; font-size: 34px !important; font-weight: 500 !important; }
#crystal-designer-app .cbd-actions { display: block !important; margin-top: 12px !important; }
#crystal-designer-app .cbd-actions #cbd-cart,
#crystal-designer-app .cbd-btn { min-height: 52px !important; width: 100% !important; border-radius: 18px !important; border: 0 !important; background: linear-gradient(135deg, #101820, #07111F) !important; color: #fff8ed !important; font-size: 15px !important; font-weight: 820 !important; box-shadow: 0 18px 36px rgba(7,17,31,.18) !important; }
#crystal-designer-app .cbd-trust-row { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px 12px !important; margin-top: 12px !important; color: rgba(16,24,32,.50) !important; font-size: 11px !important; font-weight: 740 !important; }
#crystal-designer-app .cbd-trust-row span::before { content: "•"; margin-right: 8px; color: var(--cbd-gold); }
#crystal-designer-app .cbd-code-details { border-radius: 18px !important; border: 1px solid rgba(16,24,32,.08) !important; background: rgba(255,255,255,.42) !important; padding: 10px 12px !important; }
#crystal-designer-app .cbd-code-details summary { cursor: pointer !important; color: rgba(16,24,32,.62) !important; font-size: 13px !important; font-weight: 800 !important; }
#crystal-designer-app .cbd-code-panel { margin-top: 10px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

@media (max-width: 1180px) and (min-width: 761px) {
  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout { grid-template-columns: 310px minmax(0, 1fr) 330px !important; gap: 10px !important; padding: 10px !important; }
  #crystal-designer-app .cbd-topbar-brand span:last-child { display: none !important; }
  #crystal-designer-app .cbd-topbar-title { font-size: 32px !important; }
  #crystal-designer-app .cbd-topbar-action { padding: 10px 12px !important; }
}

@media (max-width: 760px) {
  html, body { overflow: hidden !important; background: #F8F5EF !important; }
  #crystal-designer-app { --cbd-mobile-topbar-h: 64px !important; --cbd-mobile-picker-h: clamp(304px, 38dvh, 392px) !important; }
  #crystal-designer-app,
  #crystal-designer-app .cbd-root { width: 100vw !important; height: var(--cbd-vh, 100dvh) !important; min-height: 0 !important; max-height: var(--cbd-vh, 100dvh) !important; overflow: hidden !important; background: #F8F5EF !important; }

  #crystal-designer-app .cbd-topbar {
    height: var(--cbd-mobile-topbar-h) !important;
    min-height: var(--cbd-mobile-topbar-h) !important;
    max-height: var(--cbd-mobile-topbar-h) !important;
    position: relative !important;
    display: block !important;
    padding: 0 !important;
    background: rgba(255,253,248,.94) !important;
    border-bottom: 1px solid rgba(16,24,32,.10) !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  #crystal-designer-app .cbd-topbar-brand,
  #crystal-designer-app .cbd-topbar-rule,
  #crystal-designer-app .cbd-topbar-right { display: none !important; }
  #crystal-designer-app .cbd-topbar-left { display: block !important; min-width: 0 !important; }
  #crystal-designer-app .cbd-topbar-exit { position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 999px !important; background: rgba(255,255,255,.80) !important; z-index: 4 !important; }
  #crystal-designer-app .cbd-topbar-title { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; max-width: calc(100vw - 250px) !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; font-size: clamp(27px, 7vw, 36px) !important; letter-spacing: -.055em !important; z-index: 2 !important; }
  #crystal-designer-app .cbd-mobile-top-actions { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 5px !important; z-index: 5 !important; }
  #crystal-designer-app .cbd-mobile-top-btn,
  #crystal-designer-app .cbd-mobile-menu-btn { width: 54px !important; height: 52px !important; min-width: 54px !important; min-height: 52px !important; padding: 4px 3px !important; border: 0 !important; border-radius: 16px !important; background: transparent !important; color: var(--cbd-deep) !important; box-shadow: none !important; display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; font-size: 11px !important; font-weight: 760 !important; line-height: 1.05 !important; }
  #crystal-designer-app .cbd-mobile-top-btn svg { width: 23px !important; height: 23px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
  #crystal-designer-app .cbd-mobile-share-btn { display: inline-flex !important; }
  #crystal-designer-app .cbd-mobile-menu-btn span { width: 4px !important; height: 4px !important; border-radius: 999px !important; background: currentColor !important; display: inline-block !important; margin: 0 2px !important; }
  #crystal-designer-app .cbd-mobile-menu-btn { flex-direction: row !important; flex-wrap: wrap !important; align-content: center !important; }
  #crystal-designer-app .cbd-mobile-menu-btn em { display: block !important; width: 100% !important; font-style: normal !important; font-size: 11px !important; line-height: 1 !important; margin-top: 0 !important; }

  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-layout { position: absolute !important; left: 0 !important; right: 0 !important; top: var(--cbd-mobile-topbar-h) !important; bottom: 0 !important; inset: var(--cbd-mobile-topbar-h) 0 0 0 !important; display: block !important; width: 100vw !important; height: auto !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; background: #F8F5EF !important; }

  #crystal-designer-app .cbd-card,
  #crystal-designer-app .cbd-topbar + .cbd-layout .cbd-card,
  #crystal-designer-app .cbd-topbar + .cbd-layout .cbd-preview { border-radius: 0 !important;


 }
  #crystal-designer-app .cbd-preview { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: var(--cbd-mobile-picker-h) !important; width: 100vw !important; height: auto !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; background:
      radial-gradient(circle at 50% 10%, rgba(255,255,255,.82), transparent 17%),
      radial-gradient(circle at 46% 55%, rgba(246,220,168,.26), transparent 33%),
      linear-gradient(180deg, #172130 0%, #0f1a27 46%, #07111F 100%) !important; z-index: 2 !important; }
  #crystal-designer-app .cbd-preview::before { background: radial-gradient(ellipse at 50% 70%, rgba(255,255,255,.16), transparent 48%) !important; opacity: 1 !important; }
  #crystal-designer-app .cbd-preview::after { bottom: 15% !important; width: 86% !important; height: 20% !important; background: radial-gradient(ellipse, rgba(255,255,255,.20), rgba(199,167,108,.12) 55%, transparent 74%) !important;
 }
  #crystal-designer-app .cbd-preview-stage { inset: 86px 0 72px !important; z-index: 5 !important; }
  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg { width: min(100vw, 58vh) !important; max-width: 116vw !important; }
  #crystal-designer-app .cbd-preview text { fill: rgba(255,248,237,.52) !important; }

  #crystal-designer-app .cbd-mobile-statusbar { left: 10px !important; right: 10px !important; top: 14px !important; gap: 8px !important; z-index: 12 !important; }
  #crystal-designer-app .cbd-mobile-fit,
  #crystal-designer-app .cbd-mobile-total { min-width: 0 !important; width: calc(50% - 4px) !important; padding: 12px 13px !important; border-radius: 18px !important; background: rgba(7,17,31,.38) !important; border-color: rgba(255,255,255,.22) !important; color: #fff8ed !important; box-shadow: 0 16px 36px rgba(0,0,0,.20) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }
  #crystal-designer-app .cbd-mobile-fit span,
  #crystal-designer-app .cbd-mobile-total span { color: rgba(255,248,237,.82) !important; font-size: 12px !important; }
  #crystal-designer-app .cbd-mobile-fit strong,
  #crystal-designer-app .cbd-mobile-total strong { color: #fff8ed !important; font-size: clamp(25px, 7vw, 34px) !important; }
  #crystal-designer-app .cbd-mobile-fit small,
  #crystal-designer-app .cbd-mobile-total small { color: rgba(255,248,237,.74) !important; font-size: 12px !important; }
  #crystal-designer-app .cbd-mobile-inspiration-btn { left: 12px !important; bottom: 14px !important; min-width: 150px !important; height: 52px !important; border-radius: 18px !important; background: rgba(7,17,31,.36) !important; color: #fff8ed !important; border-color: rgba(255,255,255,.22) !important; box-shadow: 0 16px 36px rgba(0,0,0,.18) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }
  #crystal-designer-app .cbd-preview-trash { right: 12px !important; bottom: 14px !important; min-width: 112px !important; width: auto !important; height: 52px !important; border-radius: 18px !important; background: rgba(7,17,31,.36) !important; color: #fff8ed !important; border-color: rgba(255,255,255,.22) !important; grid-template-columns: 24px auto !important;


 }
  #crystal-designer-app .cbd-preview-trash-text { color: #fff8ed !important; }

  #crystal-designer-app .cbd-stone-panel { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100vw !important; height: var(--cbd-mobile-picker-h) !important; min-height: 0 !important; max-height: var(--cbd-mobile-picker-h) !important; margin: 0 !important; padding: 12px 12px 12px 96px !important; overflow: hidden !important; border: 0 !important; border-radius: 28px 28px 0 0 !important; background: linear-gradient(180deg, #fffaf2 0%, #F8F5EF 100%) !important; z-index: 8 !important; }
  #crystal-designer-app .cbd-stone-panel .cbd-left-title { display: none !important; }
  #crystal-designer-app .cbd-stone-panel .cbd-tabs,
  #crystal-designer-app .cbd-stone-panel .cbd-tabs-scroll { position: absolute !important; left: 10px !important; top: 12px !important; bottom: 12px !important; width: 76px !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 8px !important; padding: 0 2px 8px 0 !important; margin: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; background: transparent !important; border-radius: 0 !important; z-index: 3 !important; }
  #crystal-designer-app .cbd-tab { width: 70px !important; min-height: 64px !important; height: auto !important; flex: 0 0 auto !important; border-radius: 18px !important; background: rgba(255,255,255,.72) !important; border: 1px solid rgba(16,24,32,.08) !important; color: rgba(16,24,32,.78) !important; font-size: 12px !important; line-height: 1.1 !important; white-space: normal !important; padding: 7px 6px !important; box-shadow: 0 10px 24px rgba(16,24,32,.055) !important; }
  #crystal-designer-app .cbd-tab.active { background: var(--cbd-deep) !important; color: #fff8ed !important; border-color: var(--cbd-deep) !important; }
  #crystal-designer-app .cbd-stone-panel .cbd-search-wrap { position: absolute !important; left: 96px !important; right: 12px !important; top: 12px !important; height: 46px !important; margin: 0 !important; z-index: 3 !important; }
  #crystal-designer-app .cbd-search { height: 46px !important; border-radius: 16px !important; background: rgba(255,255,255,.78) !important; color: var(--cbd-text) !important; font-size: 16px !important; }
  #crystal-designer-app .cbd-stone-panel .cbd-gems-grid,
  #crystal-designer-app .cbd-stone-panel .cbd-gems { position: absolute !important; left: 96px !important; right: 12px !important; top: 70px !important; bottom: 12px !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 2px 12px 0 !important; overflow-y: auto !important; overflow-x: hidden !important; align-content: start !important; z-index: 2 !important; }
  #crystal-designer-app .cbd-gems-grid .cbd-gem { min-height: 136px !important; border-radius: 20px !important; background: rgba(255,255,255,.72) !important; padding: 12px 8px 10px !important; }
  #crystal-designer-app .cbd-gems-grid .cbd-gem-img { width: 70px !important; height: 70px !important; filter: none !important; }
  #crystal-designer-app .cbd-gems-grid .cbd-gem b { font-size: 14px !important; }
  #crystal-designer-app .cbd-gems-grid .cbd-gem small { font-size: 12px !important; }
  #crystal-designer-app .cbd-summary-panel { display: none !important; }
  #crystal-designer-app .cbd-preview-zoom-indicator { z-index: 30 !important; }
}

@media (min-width: 560px) and (max-width: 760px) {
  #crystal-designer-app .cbd-stone-panel .cbd-gems-grid,
  #crystal-designer-app .cbd-stone-panel .cbd-gems { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 390px) {
  #crystal-designer-app .cbd-topbar-title { font-size: 26px !important; max-width: calc(100vw - 236px) !important; }
  #crystal-designer-app .cbd-mobile-top-btn,
  #crystal-designer-app .cbd-mobile-menu-btn { width: 50px !important; min-width: 50px !important; font-size: 10px !important; }
  #crystal-designer-app .cbd-preview-stage { inset: 86px -6px 70px !important; }
  #crystal-designer-app .cbd-gems-grid .cbd-gem-img { width: 62px !important; height: 62px !important; }
}


/* ===== Moonsyl Design Lab v1 Popup + Detail + Loading Polish 1 =====
   Scope: UI only. No behavior, no API, no cart/save/share logic changed. */
#crystal-designer-app {
  --ms-polish-cream: #F8F5EF;
  --ms-polish-soft: #EFEAE1;
  --ms-polish-ink: #101820;
  --ms-polish-night: #07111F;
  --ms-polish-gold: #C7A76C;
  --ms-polish-line: rgba(16,24,32,.10);
  --ms-polish-shadow: 0 24px 70px rgba(16,24,32,.12);
}

/* Right side share / inspiration panel: clearer, less washed out, same functions. */
#crystal-designer-app .cbd-section-codes {
  margin-top: 0 !important;
}
#crystal-designer-app .cbd-code-details {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(16,24,32,.09) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(199,167,108,.15), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,245,239,.72)) !important;
  box-shadow: 0 18px 44px rgba(16,24,32,.07), inset 0 1px 0 rgba(255,255,255,.76) !important;
  padding: 14px !important;
}
#crystal-designer-app .cbd-code-details::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  top: 52px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(16,24,32,.10), transparent) !important;
  pointer-events: none !important;
}
#crystal-designer-app .cbd-code-details summary {
  position: relative !important;
  z-index: 2 !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  cursor: pointer !important;
  list-style: none !important;
  color: var(--ms-polish-ink) !important;
  font-size: 14px !important;
  font-weight: 860 !important;
  letter-spacing: .02em !important;
}
#crystal-designer-app .cbd-code-details summary::-webkit-details-marker { display: none !important; }
#crystal-designer-app .cbd-code-details summary::after {
  content: "⌄" !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(16,24,32,.60) !important;
  background: rgba(255,255,255,.70) !important;
  border: 1px solid rgba(16,24,32,.08) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transition: transform .18s ease, background .18s ease !important;
}
#crystal-designer-app .cbd-code-details[open] summary::after { transform: rotate(180deg) !important; }
#crystal-designer-app .cbd-code-panel {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  gap: 14px !important;
  margin-top: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#crystal-designer-app .cbd-code-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(16,24,32,.075) !important;
}
#crystal-designer-app .cbd-code-row span,
#crystal-designer-app .cbd-code-panel label {
  display: block !important;
  margin: 0 0 5px !important;
  color: rgba(16,24,32,.50) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}
#crystal-designer-app .cbd-code-row strong {
  display: block !important;
  color: var(--ms-polish-gold) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: .10em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.80) !important;
}
#crystal-designer-app .cbd-current-share-panel {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 13px !important;
  min-height: 112px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(199,167,108,.24) !important;
  background:
    radial-gradient(circle at 86% 24%, rgba(255,255,255,.65), transparent 32%),
    linear-gradient(135deg, rgba(199,167,108,.92), rgba(174,146,93,.72)) !important;
  color: #fff8ed !important;
  box-shadow: 0 18px 42px rgba(199,167,108,.18) !important;
}
#crystal-designer-app .cbd-current-share-panel::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.24) 48%, transparent 70%) !important;
  transform: translateX(-75%) !important;
  opacity: .48 !important;
}
#crystal-designer-app .cbd-current-share-panel > * { position: relative !important; z-index: 2 !important; }
#crystal-designer-app .cbd-current-share-panel span {
  display: block !important;
  margin: 0 0 7px !important;
  color: #fff8ed !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
#crystal-designer-app .cbd-current-share-panel p {
  max-width: 230px !important;
  margin: 0 !important;
  color: rgba(255,248,237,.86) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 680 !important;
}
#crystal-designer-app .cbd-share-current-btn {
  min-width: 112px !important;
  height: 44px !important;
  padding: 0 17px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  color: var(--ms-polish-night) !important;
  box-shadow: 0 16px 34px rgba(16,24,32,.16) !important;
  font-size: 13px !important;
  font-weight: 920 !important;
  letter-spacing: -.01em !important;
}
#crystal-designer-app .cbd-share-current-btn:hover,
#crystal-designer-app .cbd-share-current-btn:focus-visible {
  transform: translateY(-1px) !important;
  background: #fff !important;
  box-shadow: 0 20px 42px rgba(16,24,32,.20) !important;
}
#crystal-designer-app .cbd-code-input-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items: center !important;
}
#crystal-designer-app .cbd-code-input-row input,
.cbd-modal-overlay .cbd-code-input-row input,
.cbd-mobile-drawer-input-row input,
.cbd-mobile-modal-code-row input {
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16,24,32,.11) !important;
  background: rgba(255,255,255,.78) !important;
  color: var(--ms-polish-ink) !important;
  padding: 0 16px !important;
  outline: none !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74) !important;
}
#crystal-designer-app .cbd-code-input-row input::placeholder,
.cbd-modal-overlay .cbd-code-input-row input::placeholder,
.cbd-mobile-drawer-input-row input::placeholder,
.cbd-mobile-modal-code-row input::placeholder {
  color: rgba(16,24,32,.35) !important;
}
#crystal-designer-app .cbd-code-input-row input:focus,
.cbd-modal-overlay .cbd-code-input-row input:focus,
.cbd-mobile-drawer-input-row input:focus,
.cbd-mobile-modal-code-row input:focus {
  border-color: rgba(199,167,108,.58) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(199,167,108,.14), inset 0 1px 0 rgba(255,255,255,.90) !important;
}
#crystal-designer-app .cbd-code-help,
#crystal-designer-app .cbd-code-active {
  margin: -4px 2px 0 !important;
  color: rgba(16,24,32,.52) !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
}
#crystal-designer-app .cbd-code-active b { color: var(--ms-polish-gold) !important; }
#crystal-designer-app .cbd-code-undo { width: 100% !important; min-height: 38px !important; }

/* Uniform mini buttons inside panels. */
#crystal-designer-app .cbd-code-panel .cbd-mini-btn,
#crystal-designer-app .cbd-code-row .cbd-mini-btn,
#crystal-designer-app .cbd-code-input-row .cbd-mini-btn {
  min-height: 38px !important;
  min-width: 58px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  color: var(--ms-polish-night) !important;
  box-shadow: 0 10px 24px rgba(16,24,32,.07) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
#crystal-designer-app .cbd-code-panel .cbd-mini-btn:hover,
#crystal-designer-app .cbd-code-panel .cbd-mini-btn:focus-visible {
  background: var(--ms-polish-night) !important;
  color: #fff8ed !important;
  border-color: var(--ms-polish-night) !important;
}

/* Modal redesign: cream glass, luxury spacing, same action buttons and callbacks. */
.cbd-modal-overlay {
  z-index: 2147483647 !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(199,167,108,.20), transparent 34%),
    rgba(7,17,31,.34) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
  padding: 18px !important;
}
.cbd-modal-overlay .cbd-modal-card {
  width: min(620px, calc(100vw - 34px)) !important;
  max-height: min(82vh, 720px) !important;
  overflow: auto !important;
  border-radius: 30px !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(199,167,108,.18), transparent 32%),
    linear-gradient(180deg, rgba(255,253,248,.96), rgba(248,245,239,.93)) !important;
  color: var(--ms-polish-ink) !important;
  box-shadow: 0 34px 110px rgba(7,17,31,.24), inset 0 1px 0 rgba(255,255,255,.82) !important;
  padding: clamp(24px, 4vw, 34px) !important;
}
.cbd-modal-overlay .cbd-modal-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, rgba(255,255,255,.42), transparent 44%) !important;
  opacity: .70 !important;
}
.cbd-modal-overlay .cbd-modal-card > * { position: relative !important; z-index: 2 !important; }
.cbd-modal-overlay .cbd-modal-close,
.cbd-mobile-drawer-close {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background: rgba(255,255,255,.72) !important;
  color: var(--ms-polish-ink) !important;
  box-shadow: 0 12px 28px rgba(16,24,32,.08) !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
.cbd-modal-overlay .cbd-modal-close:hover,
.cbd-modal-overlay .cbd-modal-close:focus-visible,
.cbd-mobile-drawer-close:hover,
.cbd-mobile-drawer-close:focus-visible {
  background: var(--ms-polish-night) !important;
  color: #fff8ed !important;
}
.cbd-modal-card h3,
.cbd-modal-overlay .cbd-modal-card h3 {
  margin: 0 42px 12px 0 !important;
  color: var(--ms-polish-ink) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(28px, 4.4vw, 42px) !important;
  line-height: 1.03 !important;
  letter-spacing: -.045em !important;
  font-weight: 500 !important;
}
.cbd-modal-body,
.cbd-modal-body p,
.cbd-modal-lead,
.cbd-modal-note,
.cbd-modal-link {
  color: rgba(16,24,32,.68) !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
}
.cbd-modal-lead { margin: 0 0 16px !important; }
.cbd-modal-note {
  border-radius: 18px !important;
  border: 1px solid rgba(199,167,108,.24) !important;
  background: rgba(199,167,108,.10) !important;
  padding: 12px 14px !important;
  color: rgba(16,24,32,.68) !important;
}
.cbd-modal-label,
.cbd-modal-overlay label {
  display: block !important;
  margin: 14px 0 7px !important;
  color: rgba(16,24,32,.58) !important;
  font-size: 11px !important;
  font-weight: 920 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}
.cbd-share-code-box,
.cbd-modal-link {
  border-radius: 22px !important;
  background: rgba(255,255,255,.70) !important;
  border: 1px solid rgba(16,24,32,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
  padding: 14px 16px !important;
}
.cbd-share-code-box span {
  display: block !important;
  color: rgba(16,24,32,.46) !important;
  font-size: 11px !important;
  font-weight: 920 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}
.cbd-share-code-box strong {
  display: block !important;
  margin-top: 6px !important;
  color: var(--ms-polish-gold) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: clamp(22px, 4vw, 31px) !important;
  letter-spacing: .12em !important;
}
.cbd-modal-link {
  color: rgba(16,24,32,.72) !important;
  word-break: break-all !important;
}
.cbd-modal-overlay .cbd-modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 22px !important;
}
.cbd-modal-overlay .cbd-modal-actions .cbd-btn,
.cbd-modal-overlay .cbd-modal-rules-link {
  min-width: 150px !important;
  min-height: 48px !important;
  width: auto !important;
  padding: 13px 21px !important;
  border-radius: 999px !important;
  border: 1px solid var(--ms-polish-night) !important;
  background: linear-gradient(135deg, #101820, #07111F) !important;
  color: #fff8ed !important;
  box-shadow: 0 18px 36px rgba(7,17,31,.18) !important;
  font-size: 13px !important;
  font-weight: 920 !important;
  text-decoration: none !important;
}
.cbd-modal-overlay .cbd-modal-actions .cbd-btn.secondary,
.cbd-modal-overlay .cbd-modal-rules-link {
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(16,24,32,.10) !important;
  color: var(--ms-polish-night) !important;
  box-shadow: 0 12px 28px rgba(16,24,32,.08) !important;
}
.cbd-modal-overlay .cbd-modal-actions .cbd-btn:hover,
.cbd-modal-overlay .cbd-modal-actions .cbd-btn:focus-visible,
.cbd-modal-overlay .cbd-modal-rules-link:hover,
.cbd-modal-overlay .cbd-modal-rules-link:focus-visible {
  transform: translateY(-2px) !important;
  filter: brightness(1.02) !important;
}

/* Designer profile modal form follows the same light premium style. */
.cbd-designer-profile-form {
  gap: 13px !important;
  margin-top: 16px !important;
  padding: 16px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(16,24,32,.08) !important;
  background: rgba(255,255,255,.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !important;
}
.cbd-designer-profile-form .cbd-field label {
  color: rgba(16,24,32,.56) !important;
}
.cbd-designer-profile-form .cbd-field input,
.cbd-designer-profile-form .cbd-field textarea,
.cbd-modal-overlay input,
.cbd-modal-overlay textarea,
.cbd-modal-overlay select {
  min-height: 46px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(16,24,32,.11) !important;
  background: rgba(255,255,255,.78) !important;
  color: var(--ms-polish-ink) !important;
  padding: 12px 14px !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.cbd-designer-profile-form .cbd-field input::placeholder,
.cbd-designer-profile-form .cbd-field textarea::placeholder,
.cbd-modal-overlay input::placeholder,
.cbd-modal-overlay textarea::placeholder {
  color: rgba(16,24,32,.36) !important;
}
.cbd-designer-profile-form .cbd-field input:focus,
.cbd-designer-profile-form .cbd-field textarea:focus,
.cbd-modal-overlay input:focus,
.cbd-modal-overlay textarea:focus,
.cbd-modal-overlay select:focus {
  border-color: rgba(199,167,108,.58) !important;
  box-shadow: 0 0 0 4px rgba(199,167,108,.14), inset 0 1px 0 rgba(255,255,255,.90) !important;
}
.cbd-modal-error {
  color: #9f2f2f !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

/* Gem detail hover / camera tooltip: cream card with polished media. */
.cbd-floating-tooltip {
  width: min(260px, calc(100vw - 30px)) !important;
  max-width: min(260px, calc(100vw - 30px)) !important;
  padding: 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(199,167,108,.16), transparent 34%),
    rgba(255,253,248,.96) !important;
  color: var(--ms-polish-ink) !important;
  box-shadow: 0 24px 70px rgba(7,17,31,.18), inset 0 1px 0 rgba(255,255,255,.82) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.cbd-floating-tooltip b {
  color: var(--ms-polish-ink) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
  font-weight: 520 !important;
  letter-spacing: -.02em !important;
}
.cbd-floating-tooltip em {
  color: rgba(16,24,32,.62) !important;
  font-size: 12.5px !important;
  line-height: 1.48 !important;
}
.cbd-floating-tooltip img,
.cbd-floating-tooltip video {
  max-height: 150px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #fff, #efeae1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82) !important;
}
#crystal-designer-app .cbd-gem-detail-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  color: var(--ms-polish-night) !important;
  box-shadow: 0 8px 18px rgba(16,24,32,.10) !important;
}
#crystal-designer-app .cbd-gem-detail-icon:hover,
#crystal-designer-app .cbd-gem-detail-icon:focus-visible {
  background: var(--ms-polish-night) !important;
  color: #fff8ed !important;
  transform: translateY(-1px) !important;
}

/* Toasts / notices: no invisible blocking layer, same click/swipe behavior. */
.cbd-toast {
  border-radius: 999px !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background: rgba(255,253,248,.95) !important;
  color: var(--ms-polish-ink) !important;
  box-shadow: 0 20px 60px rgba(7,17,31,.18), inset 0 1px 0 rgba(255,255,255,.80) !important;
  padding: 13px 18px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.cbd-toast::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  margin-right: 10px !important;
  background: var(--ms-polish-gold) !important;
  box-shadow: 0 0 0 5px rgba(199,167,108,.14) !important;
  vertical-align: middle !important;
}
.cbd-toast span {
  display: inline !important;
  color: var(--ms-polish-ink) !important;
  font-size: 13px !important;
  font-weight: 780 !important;
}
.cbd-toast.is-error {
  background: rgba(255,246,245,.96) !important;
  color: #8f2424 !important;
  border-color: rgba(143,36,36,.18) !important;
}
.cbd-toast.is-error::before { background: #b94646 !important; box-shadow: 0 0 0 5px rgba(185,70,70,.14) !important; }
.cbd-toast.is-error span { color: #8f2424 !important; }

/* Mobile drawer / menu panel polished but functional. */
.cbd-mobile-drawer-overlay {
  background:
    radial-gradient(circle at 50% 0%, rgba(199,167,108,.18), transparent 34%),
    rgba(7,17,31,.36) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.cbd-mobile-drawer-panel {
  border-radius: 30px 30px 0 0 !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(199,167,108,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,253,248,.98), rgba(248,245,239,.98)) !important;
  color: var(--ms-polish-ink) !important;
  box-shadow: 0 -24px 90px rgba(7,17,31,.22), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.cbd-mobile-drawer-kicker,
.cbd-mobile-drawer-panel label {
  color: rgba(16,24,32,.54) !important;
}
.cbd-mobile-drawer-panel h3 {
  color: var(--ms-polish-ink) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  letter-spacing: -.04em !important;
}
.cbd-mobile-drawer-code,
.cbd-mobile-drawer-links a {
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(16,24,32,.08) !important;
  color: var(--ms-polish-ink) !important;
}
.cbd-mobile-drawer-code span { color: rgba(16,24,32,.50) !important; }
.cbd-mobile-drawer-code strong { color: var(--ms-polish-gold) !important; }
.cbd-mobile-drawer-code button,
.cbd-mobile-drawer-input-row button,
.cbd-mobile-drawer-save,
.cbd-mobile-drawer-inspiration {
  border-radius: 999px !important;
  background: var(--ms-polish-night) !important;
  color: #fff8ed !important;
  border: 1px solid var(--ms-polish-night) !important;
  box-shadow: 0 14px 30px rgba(7,17,31,.16) !important;
}
.cbd-mobile-drawer-inspiration {
  background: linear-gradient(135deg, rgba(199,167,108,.96), rgba(169,132,68,.96)) !important;
  border-color: rgba(199,167,108,.60) !important;
  color: #fff8ed !important;
}

/* Trash / drag-to-delete feedback, styled like the white pill in the reference. */
#crystal-designer-app .cbd-preview-trash.is-drop-active,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash {
  background: rgba(255,253,248,.94) !important;
  color: var(--ms-polish-night) !important;
  border-color: rgba(199,167,108,.38) !important;

  transform: translateY(-2px) scale(1.02) !important;
}
#crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-preview-trash-icon,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash .cbd-preview-trash-icon {
  background: rgba(199,167,108,.30) !important;
  color: var(--ms-polish-night) !important;
}
#crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-preview-trash-text,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash .cbd-preview-trash-text {
  color: var(--ms-polish-night) !important;
  font-weight: 900 !important;
}
.cbd-drag-ghost.is-trash-active {
  filter: drop-shadow(0 20px 26px rgba(7,17,31,.26)) drop-shadow(0 0 18px rgba(199,167,108,.42)) !important;
}

/* Confirm-design / cart loading overlay also matches the new UI language. */
.cbd-cart-loading-overlay {
  background:
    radial-gradient(circle at 50% 12%, rgba(199,167,108,.20), transparent 32%),
    linear-gradient(135deg, rgba(248,245,239,.96), rgba(239,234,225,.96)) !important;
}
.cbd-cart-loading-card {
  border-radius: 32px !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background: rgba(255,253,248,.76) !important;
  color: var(--ms-polish-ink) !important;
  box-shadow: 0 34px 110px rgba(16,24,32,.16), inset 0 1px 0 rgba(255,255,255,.82) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}
.cbd-cart-loading-content b,
.cbd-cart-loading-progress-top strong { color: var(--ms-polish-ink) !important; }
.cbd-cart-loading-content p,
.cbd-cart-loading-progress-top span { color: rgba(16,24,32,.62) !important; }
.cbd-cart-loading-moon {
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fffaf0 28%, #dbc99f 58%, #c7a76c 100%) !important;
  box-shadow: 0 0 52px rgba(199,167,108,.34) !important;
}
.cbd-cart-loading-thread::before { background: rgba(16,24,32,.10) !important; }
.cbd-cart-loading-thread i.is-loaded,
.cbd-cart-loading-thread i.is-active { background: linear-gradient(135deg, #101820, #C7A76C) !important; }

@media (max-width: 760px) {
  #crystal-designer-app .cbd-code-details {
    border-radius: 20px !important;
    padding: 13px !important;
  }
  #crystal-designer-app .cbd-code-row,
  #crystal-designer-app .cbd-current-share-panel,
  #crystal-designer-app .cbd-code-input-row {
    grid-template-columns: 1fr !important;
  }
  #crystal-designer-app .cbd-current-share-panel {
    min-height: 0 !important;
    padding: 16px !important;
  }
  #crystal-designer-app .cbd-current-share-panel p { max-width: none !important; }
  #crystal-designer-app .cbd-share-current-btn,
  #crystal-designer-app .cbd-code-panel .cbd-mini-btn {
    width: 100% !important;
    min-height: 42px !important;
  }
  .cbd-modal-overlay {
    align-items: flex-end !important;
    padding: 10px !important;
  }
  .cbd-modal-overlay .cbd-modal-card {
    width: 100% !important;
    max-height: 86vh !important;
    border-radius: 28px !important;
    padding: 22px !important;
  }
  .cbd-modal-overlay .cbd-modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .cbd-modal-overlay .cbd-modal-actions .cbd-btn,
  .cbd-modal-overlay .cbd-modal-rules-link {
    width: 100% !important;
    min-width: 0 !important;
  }
  .cbd-floating-tooltip {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
  .cbd-toast {
    top: 14px !important;
    border-radius: 20px !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }
  .cbd-cart-loading-card {
    width: calc(100vw - 24px) !important;
    border-radius: 28px !important;
  }
}


/* ===== v1 icon + top whitespace + trash polish fix ===== */
#crystal-designer-app,
#crystal-designer-app .cbd-root {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#crystal-designer-app .cbd-topbar {
  min-height: 68px !important;
  padding: 8px 18px !important;
  border-bottom: 1px solid rgba(16,24,32,.08) !important;
}
#crystal-designer-app .cbd-topbar + .cbd-layout,
#crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout {
  min-height: calc(var(--cbd-vh, 100vh) - 68px) !important;
}
#crystal-designer-app .cbd-topbar + .cbd-layout .cbd-card,
#crystal-designer-app .cbd-topbar + .cbd-layout .cbd-preview,
#crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card,
#crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card.cbd-preview {
  height: calc(var(--cbd-vh, 100vh) - 68px) !important;
}

#crystal-designer-app .cbd-mobile-inspiration-btn,
#crystal-designer-app #cbd-cart,
#crystal-designer-app .cbd-code-details > summary,
#crystal-designer-app .cbd-share-current-btn,
#crystal-designer-app .cbd-mobile-drawer-save,
#crystal-designer-app .cbd-mobile-drawer-inspiration {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}

#crystal-designer-app .cbd-mobile-inspiration-btn::before,
#crystal-designer-app #cbd-cart::before,
#crystal-designer-app .cbd-code-details > summary::before,
#crystal-designer-app .cbd-share-current-btn::before,
#crystal-designer-app .cbd-mobile-drawer-save::before,
#crystal-designer-app .cbd-mobile-drawer-inspiration::before {
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  display: inline-block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

#crystal-designer-app .cbd-mobile-inspiration-btn::before,
#crystal-designer-app .cbd-mobile-drawer-inspiration::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23101820" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3 1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3Z"/><path d="M5 18h.01"/><path d="M19 18h.01"/></svg>') !important;
}
#crystal-designer-app #cbd-cart::before,
#crystal-designer-app .cbd-mobile-drawer-save::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff8ed" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M7 8h10l1 13H6L7 8Z"/><path d="M9 8a3 3 0 0 1 6 0"/></svg>') !important;
}
#crystal-designer-app .cbd-code-details > summary::before,
#crystal-designer-app .cbd-share-current-btn::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23101820" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/><path d="M12 16V4"/><path d="M8 8l4-4 4 4"/></svg>') !important;
}

#crystal-designer-app .cbd-code-details > summary {
  font-weight: 800 !important;
  color: #101820 !important;
}
#crystal-designer-app #cbd-cart {
  justify-content: center !important;
}

#crystal-designer-app .cbd-preview-trash {
  min-height: 64px !important;
  padding: 10px 18px 10px 10px !important;
  gap: 10px !important;
  border-radius: 24px !important;
  background: rgba(255,253,248,.92) !important;
  border: 1px solid rgba(16,24,32,.10) !important;

}
#crystal-designer-app .cbd-preview-trash-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(244,230,191,.98), rgba(199,167,108,.94)) !important;
  color: #07111F !important;

}
#crystal-designer-app .cbd-preview-trash svg {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 2.15 !important;
}
#crystal-designer-app .cbd-preview-trash-text {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #101820 !important;
}
#crystal-designer-app .cbd-preview-trash small {
  margin-top: 1px !important;
  font-size: 11px !important;
  color: rgba(16,24,32,.56) !important;
}
#crystal-designer-app .cbd-preview-trash:hover,
#crystal-designer-app .cbd-preview-trash:focus-visible {
  transform: translateY(-1px) !important;

}
#crystal-designer-app .cbd-preview-trash.is-drop-active,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash {
  transform: translateY(-1px) scale(1.01) !important;
}

#crystal-designer-app .cbd-trust-row span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 32%, #fff, #c7a76c 62%, #a27c38 100%);
  vertical-align: -1px;
}

@media (max-width: 980px) {
  #crystal-designer-app .cbd-topbar {
    min-height: 62px !important;
    padding: 6px 12px !important;
  }
  #crystal-designer-app .cbd-topbar + .cbd-layout,
  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout {
    min-height: calc(var(--cbd-vh, 100vh) - 62px) !important;
  }
  #crystal-designer-app .cbd-topbar + .cbd-layout .cbd-card,
  #crystal-designer-app .cbd-topbar + .cbd-layout .cbd-preview,
  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card,
  #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card.cbd-preview {
    height: auto !important;
  }
}

@media (max-width: 760px) {
  #crystal-designer-app .cbd-mobile-inspiration-btn::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff8ed" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3 1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3Z"/></svg>') !important;
  }
  #crystal-designer-app .cbd-code-details > summary,
  #crystal-designer-app .cbd-share-current-btn,
  #crystal-designer-app #cbd-cart,
  #crystal-designer-app .cbd-mobile-drawer-save,
  #crystal-designer-app .cbd-mobile-drawer-inspiration {
    justify-content: center !important;
  }
  #crystal-designer-app .cbd-preview-trash {
    min-height: 54px !important;
    padding: 8px 14px 8px 8px !important;
    border-radius: 20px !important;
  }
  #crystal-designer-app .cbd-preview-trash-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
}


/* ===== fix2: real trash restyle + tighter top spacing ===== */
html body #crystal-designer-app,
html body #crystal-designer-app .cbd-root {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body #crystal-designer-app .cbd-root > .cbd-topbar,
html body #crystal-designer-app .cbd-topbar {
  min-height: 62px !important;
  height: 62px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
html body #crystal-designer-app .cbd-topbar + .cbd-layout,
html body #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout {
  min-height: calc(var(--cbd-vh, 100vh) - 62px) !important;
  height: calc(var(--cbd-vh, 100vh) - 62px) !important;
}
html body #crystal-designer-app .cbd-topbar + .cbd-layout > .cbd-card,
html body #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card {
  height: calc(var(--cbd-vh, 100vh) - 62px) !important;
}

html body #crystal-designer-app .cbd-preview-trash,
html body #crystal-designer-app .cbd-preview #cbd-preview-trash,
html body #crystal-designer-app button.cbd-preview-trash {
  min-width: 154px !important;
  min-height: 58px !important;
  height: 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 8px 16px 8px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16,24,32,.12) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,245,239,.92)) !important;
  color: #101820 !important;

  text-align: left !important;
  opacity: 1 !important;
}
html body #crystal-designer-app .cbd-preview-trash-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle at 34% 26%, #fff7dc 0%, #edd08b 45%, #c7a76c 100%) !important;
  color: #07111F !important;

}
html body #crystal-designer-app .cbd-preview-trash-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #07111F !important;
  stroke-width: 2.25 !important;
}
html body #crystal-designer-app .cbd-preview-trash-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  line-height: 1.05 !important;
}
html body #crystal-designer-app .cbd-preview-trash-text {
  display: block !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
  color: #101820 !important;
  white-space: nowrap !important;
}
html body #crystal-designer-app .cbd-preview-trash-copy small {
  display: block !important;
  margin-top: 4px !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  color: rgba(16,24,32,.52) !important;
  white-space: nowrap !important;
}
html body #crystal-designer-app .cbd-preview-trash:hover,
html body #crystal-designer-app .cbd-preview-trash:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(199,167,108,.44) !important;

}
html body #crystal-designer-app .cbd-preview-trash.is-drop-active,
html body #crystal-designer-app.cbd-trash-hover .cbd-preview-trash {
  background: linear-gradient(180deg, #fffaf0, #f3dfaa) !important;
  border-color: rgba(199,167,108,.62) !important;
  transform: translateY(-2px) scale(1.025) !important;

}
html body #crystal-designer-app.cbd-trash-hover .cbd-preview-trash-text::after,
html body #crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-preview-trash-text::after {
  content: " · Release" !important;
  color: #8a6932 !important;
  font-weight: 900 !important;
}
@media (max-width: 980px) {
  html body #crystal-designer-app .cbd-root > .cbd-topbar,
  html body #crystal-designer-app .cbd-topbar {
    min-height: 58px !important;
    height: 58px !important;
  }
  html body #crystal-designer-app .cbd-topbar + .cbd-layout,
  html body #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout {
    height: calc(var(--cbd-vh, 100vh) - 58px) !important;
    min-height: calc(var(--cbd-vh, 100vh) - 58px) !important;
  }
  html body #crystal-designer-app .cbd-topbar + .cbd-layout > .cbd-card,
  html body #crystal-designer-app .cbd-root > .cbd-topbar + .cbd-layout > .cbd-card {
    height: auto !important;
  }
}
@media (max-width: 760px) {
  html body #crystal-designer-app .cbd-preview-trash,
  html body #crystal-designer-app .cbd-preview #cbd-preview-trash,
  html body #crystal-designer-app button.cbd-preview-trash {
    min-width: 132px !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 6px 12px 6px 6px !important;
  }
  html body #crystal-designer-app .cbd-preview-trash-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
  html body #crystal-designer-app .cbd-preview-trash-copy small {
    display: none !important;
  }
}


/* ===== v1 fix3: remove redundant code panel, fix modal close, stronger track/logo/trash ===== */
#crystal-designer-app .cbd-section-codes,
#crystal-designer-app .cbd-code-details {
  display: none !important;
}

.cbd-modal-overlay .cbd-modal-card {
  position: relative !important;
  padding-top: clamp(32px, 4vw, 40px) !important;
}
.cbd-modal-overlay .cbd-modal-close,
.cbd-modal-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 20 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background: rgba(255,255,255,.82) !important;
  color: #101820 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 14px 32px rgba(16,24,32,.10), inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.cbd-modal-overlay .cbd-modal-close::before,
.cbd-modal-overlay .cbd-modal-close::after,
.cbd-modal-close::before,
.cbd-modal-close::after {
  content: "" !important;
  position: absolute !important;
  width: 16px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}
.cbd-modal-overlay .cbd-modal-close::before,
.cbd-modal-close::before { transform: rotate(45deg) !important; }
.cbd-modal-overlay .cbd-modal-close::after,
.cbd-modal-close::after { transform: rotate(-45deg) !important; }
.cbd-modal-overlay .cbd-modal-close:hover,
.cbd-modal-overlay .cbd-modal-close:focus-visible,
.cbd-modal-close:hover,
.cbd-modal-close:focus-visible {
  background: #07111F !important;
  color: #fff8ed !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 42px rgba(7,17,31,.18) !important;
}
.cbd-modal-card h3,
.cbd-modal-overlay .cbd-modal-card h3 {
  margin-right: 56px !important;
}

#crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
#crystal-designer-app .cbd-preview-stage svg {
  overflow: visible !important;
}
#crystal-designer-app .cbd-preview-orbit .cbd-preview-track,
#crystal-designer-app .cbd-preview-svg .cbd-preview-track {
  stroke-width: 0 !important;
  vector-effect: non-scaling-stroke !important;
  pointer-events: none !important;
}
#crystal-designer-app .cbd-preview-orbit .cbd-preview-track-outer,
#crystal-designer-app .cbd-preview-svg .cbd-preview-track-outer {
  stroke: rgba(199,167,108,.54) !important;
  stroke-width: 4.5px !important;
  stroke-linecap: round !important;

}
#crystal-designer-app .cbd-preview-orbit .cbd-preview-track-inner,
#crystal-designer-app .cbd-preview-svg .cbd-preview-track-inner {
  stroke: rgba(16,24,32,.24) !important;
  stroke-width: 2px !important;
  stroke-dasharray: 5 8 !important;
  stroke-linecap: round !important;
  opacity: .82 !important;
}
#crystal-designer-app .cbd-preview-brand,
#crystal-designer-app .cbd-preview svg .cbd-preview-brand {
  display: block !important;
  opacity: 1 !important;
  fill: rgba(16,24,32,.20) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: .26em !important;
  text-transform: lowercase !important;
  paint-order: stroke !important;
  stroke: rgba(255,253,248,.56) !important;
  stroke-width: .8px !important;
}

#crystal-designer-app .cbd-preview-trash {
  display: inline-grid !important;
  grid-template-columns: 46px auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  min-width: 178px !important;
  min-height: 66px !important;
  padding: 10px 18px 10px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,253,248,.96) !important;
  border: 1px solid rgba(16,24,32,.12) !important;
  color: #101820 !important;

}
#crystal-designer-app .cbd-preview-trash-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  grid-row: 1 / span 2 !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 34% 28%, #fff8e8 0%, #e7ca8e 48%, #c7a76c 100%) !important;
  color: #07111F !important;

}
#crystal-designer-app .cbd-preview-trash svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.3px !important;
}
#crystal-designer-app .cbd-preview-trash-copy {
  display: grid !important;
  gap: 2px !important;
  text-align: left !important;
  min-width: 0 !important;
}
#crystal-designer-app .cbd-preview-trash-text {
  color: #101820 !important;
  font-size: 15px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
}
#crystal-designer-app .cbd-preview-trash small {
  color: rgba(16,24,32,.58) !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
}
#crystal-designer-app .cbd-preview-trash .cbd-trash-release { display: none !important; }
#crystal-designer-app .cbd-preview-trash:hover,
#crystal-designer-app .cbd-preview-trash:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(199,167,108,.42) !important;

}
#crystal-designer-app .cbd-preview-trash.is-drop-active,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash {
  background: #07111F !important;
  color: #fff8ed !important;
  border-color: rgba(199,167,108,.58) !important;
  transform: translateY(-2px) scale(1.025) !important;

}
#crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-preview-trash-icon,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash .cbd-preview-trash-icon {
  background: radial-gradient(circle at 34% 28%, #fff 0%, #f2d496 45%, #c7a76c 100%) !important;
  color: #07111F !important;
}
#crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-preview-trash-text,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash .cbd-preview-trash-text,
#crystal-designer-app .cbd-preview-trash.is-drop-active small,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash small {
  color: #fff8ed !important;
}
#crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-trash-rest,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash .cbd-trash-rest { display: none !important; }
#crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-trash-release,
#crystal-designer-app.cbd-trash-hover .cbd-preview-trash .cbd-trash-release { display: inline !important; }

@media (max-width: 760px) {
  .cbd-modal-overlay .cbd-modal-close,
  .cbd-modal-close {
    top: 14px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
  .cbd-modal-card h3,
  .cbd-modal-overlay .cbd-modal-card h3 {
    margin-right: 54px !important;
  }
  #crystal-designer-app .cbd-preview-brand,
  #crystal-designer-app .cbd-preview svg .cbd-preview-brand {
    fill: rgba(255,248,237,.30) !important;
    stroke: rgba(7,17,31,.28) !important;
    font-size: 17px !important;
  }
  #crystal-designer-app .cbd-preview-orbit .cbd-preview-track-outer,
  #crystal-designer-app .cbd-preview-svg .cbd-preview-track-outer {
    stroke: rgba(199,167,108,.62) !important;
    stroke-width: 4px !important;
  }
  #crystal-designer-app .cbd-preview-orbit .cbd-preview-track-inner,
  #crystal-designer-app .cbd-preview-svg .cbd-preview-track-inner {
    stroke: rgba(255,248,237,.28) !important;
    stroke-width: 1.7px !important;
  }
  #crystal-designer-app .cbd-preview-trash {
    min-width: 142px !important;
    min-height: 56px !important;
    grid-template-columns: 38px auto !important;
    padding: 8px 13px 8px 8px !important;
  }
  #crystal-designer-app .cbd-preview-trash-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
  #crystal-designer-app .cbd-preview-trash-text { font-size: 13px !important; }
  #crystal-designer-app .cbd-preview-trash small { font-size: 10px !important; }
}


/* ===== Upload-based fix5: default 170 preview centering + modal/trash/loading polish guard ===== */
html body #crystal-designer-app .cbd-preview-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 5 !important;
}
html body #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
html body #crystal-designer-app .cbd-preview-stage svg {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  margin: auto !important;
  width: min(78vh, 82%, 780px) !important;
  height: auto !important;
  max-width: none !important;
  transform: none !important;
  overflow: visible !important;
}
html body #crystal-designer-app .cbd-preview-orbit .cbd-preview-track-outer,
html body #crystal-designer-app .cbd-preview-svg .cbd-preview-track-outer {
  stroke: rgba(199,167,108,.62) !important;
  stroke-width: 5px !important;
  vector-effect: non-scaling-stroke !important;

}
html body #crystal-designer-app .cbd-preview-orbit .cbd-preview-track-inner,
html body #crystal-designer-app .cbd-preview-svg .cbd-preview-track-inner {
  stroke: rgba(16,24,32,.28) !important;
  stroke-width: 2.2px !important;
  stroke-dasharray: 5 8 !important;
  vector-effect: non-scaling-stroke !important;
}
html body #crystal-designer-app .cbd-preview-brand,
html body #crystal-designer-app .cbd-preview svg .cbd-preview-brand {
  display: block !important;
  opacity: 1 !important;
  fill: rgba(16,24,32,.22) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 21px !important;
  letter-spacing: .26em !important;
  text-transform: lowercase !important;
  paint-order: stroke !important;
  stroke: rgba(255,253,248,.62) !important;
  stroke-width: .8px !important;
}

/* Keep the close button away from modal titles. */
.cbd-modal-overlay .cbd-modal-card {
  position: relative !important;
  padding-top: clamp(34px, 4vw, 42px) !important;
}
.cbd-modal-overlay .cbd-modal-close,
.cbd-modal-close {
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  color: #101820 !important;
  box-shadow: 0 14px 34px rgba(16,24,32,.12) !important;
  font-size: 0 !important;
}
.cbd-modal-overlay .cbd-modal-close::before,
.cbd-modal-overlay .cbd-modal-close::after,
.cbd-modal-close::before,
.cbd-modal-close::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 16px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}
.cbd-modal-overlay .cbd-modal-close::before,
.cbd-modal-close::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
.cbd-modal-overlay .cbd-modal-close::after,
.cbd-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg) !important; }
.cbd-modal-overlay .cbd-modal-close:hover,
.cbd-modal-overlay .cbd-modal-close:focus-visible,
.cbd-modal-close:hover,
.cbd-modal-close:focus-visible {
  background: #07111F !important;
  color: #fff8ed !important;
  transform: translateY(-1px) !important;
}
.cbd-modal-overlay .cbd-modal-card h3,
.cbd-modal-card h3 { margin-right: 62px !important; }

/* The right-side share/code block is redundant because Share already exists in the top bar. */
html body #crystal-designer-app .cbd-section-codes,
html body #crystal-designer-app .cbd-code-details {
  display: none !important;
}

/* Trash guard: make sure the latest uploaded HTML structure still looks like the white pill. */
html body #crystal-designer-app .cbd-preview-trash {
  display: inline-grid !important;
  grid-template-columns: 46px auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  min-width: 178px !important;
  min-height: 66px !important;
  padding: 10px 18px 10px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,253,248,.96) !important;
  border: 1px solid rgba(16,24,32,.12) !important;
  color: #101820 !important;

}
html body #crystal-designer-app .cbd-preview-trash-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 34% 28%, #fff8e8 0%, #e7ca8e 48%, #c7a76c 100%) !important;
  color: #07111F !important;

}
html body #crystal-designer-app .cbd-preview-trash svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.3px !important;
}
html body #crystal-designer-app .cbd-preview-trash-text {
  color: #101820 !important;
  font-size: 15px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
}
html body #crystal-designer-app .cbd-preview-trash small {
  color: rgba(16,24,32,.58) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}
html body #crystal-designer-app.cbd-trash-hover .cbd-preview-trash,
html body #crystal-designer-app .cbd-preview-trash.is-drop-active {
  background: #07111F !important;
  color: #fff8ed !important;
  border-color: rgba(199,167,108,.58) !important;

}
html body #crystal-designer-app.cbd-trash-hover .cbd-preview-trash .cbd-preview-trash-text,
html body #crystal-designer-app .cbd-preview-trash.is-drop-active .cbd-preview-trash-text,
html body #crystal-designer-app.cbd-trash-hover .cbd-preview-trash small,
html body #crystal-designer-app .cbd-preview-trash.is-drop-active small {
  color: #fff8ed !important;
}

@media (max-width: 760px) {
  html body #crystal-designer-app .cbd-preview-stage {
    inset: 0 !important;
  }
  html body #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app .cbd-preview-stage svg {
    width: min(100vw, 58vh) !important;
    max-width: 116vw !important;
  }
  html body #crystal-designer-app .cbd-preview-trash {
    min-width: 142px !important;
    min-height: 56px !important;
    grid-template-columns: 38px auto !important;
    padding: 8px 13px 8px 8px !important;
  }
  html body #crystal-designer-app .cbd-preview-trash-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
}


/* ===== v1-upload-fix7: loading match, numeric consistency, no bead-list shake, solid twin track ===== */
#crystal-designer-app,
#crystal-designer-app * {
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* Keep all live numbers visually consistent: no mixed serif / small-large digit feel. */
#crystal-designer-app .cbd-summary-metric strong,
#crystal-designer-app .cbd-price-card b,
#crystal-designer-app .cbd-price-card h3 b,
#crystal-designer-app .cbd-size-card strong,
#crystal-designer-app .cbd-mobile-fit strong,
#crystal-designer-app .cbd-mobile-total strong,
#crystal-designer-app .cbd-mobile-total b,
#crystal-designer-app .cbd-total strong,
#crystal-designer-app .cbd-preview-stat strong,
#crystal-designer-app [class*="total"] strong,
#crystal-designer-app [class*="price"] b {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-weight: 760 !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}
#crystal-designer-app .cbd-summary-metric strong {
  font-size: 24px !important;
}
#crystal-designer-app .cbd-summary-metric--wide strong {
  font-size: 26px !important;
}
#crystal-designer-app .cbd-price-card h3 b {
  font-size: 32px !important;
}
#crystal-designer-app .cbd-price-card p b {
  font-size: 15px !important;
}
#crystal-designer-app .cbd-mobile-fit strong,
#crystal-designer-app .cbd-mobile-total strong,
#crystal-designer-app .cbd-mobile-total b {
  font-size: clamp(25px, 5.4vw, 34px) !important;
}

/* Stop the bead picker from visually jumping while the user scrolls. */
#crystal-designer-app .cbd-gems-grid {
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  contain: layout paint !important;
  transform: translateZ(0) !important;
  will-change: scroll-position !important;
}
#crystal-designer-app .cbd-gems-grid .cbd-gem,
#crystal-designer-app .cbd-gems-grid .cbd-gem-img {
  will-change: auto !important;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease !important;
}
#crystal-designer-app .cbd-gems-grid .cbd-gem:hover,
#crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible,
#crystal-designer-app .cbd-gems-grid .cbd-gem:active {
  transform: none !important;
}
#crystal-designer-app .cbd-gems-grid .cbd-gem:hover .cbd-gem-img,
#crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible .cbd-gem-img,
#crystal-designer-app .cbd-gems-grid .cbd-gem:active .cbd-gem-img {
  transform: none !important;
}
#crystal-designer-app .cbd-preview-bead:hover {
  transform: none !important;
}

/* Solid double bracelet track: closer, both solid, track-like. */
html body #crystal-designer-app .cbd-preview-orbit .cbd-preview-track,
html body #crystal-designer-app .cbd-preview-svg .cbd-preview-track {
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
  stroke-dasharray: none !important;
}
html body #crystal-designer-app .cbd-preview-orbit .cbd-preview-track-outer,
html body #crystal-designer-app .cbd-preview-svg .cbd-preview-track-outer {
  stroke: rgba(199,167,108,.68) !important;
  stroke-width: 4.8px !important;

}
html body #crystal-designer-app .cbd-preview-orbit .cbd-preview-track-inner,
html body #crystal-designer-app .cbd-preview-svg .cbd-preview-track-inner {
  stroke: rgba(199,167,108,.38) !important;
  stroke-width: 3px !important;
  stroke-dasharray: none !important;

}

/* ===== Moonsyl loading + gemstone visual enhancement v1 =====
   Scope: visual-only update for loading and bracelet beads.
   Do not touch drag, zoom, add-to-cart, share, save, or data logic. */

html body #crystal-designer-app .cbd-premium-loading-root {
  position: relative !important;
  width: 100vw !important;
  height: var(--cbd-vh, 100vh) !important;
  min-height: var(--cbd-vh, 100vh) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(199,167,108,0.16), transparent 36%),
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.86), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(184,199,216,.18), transparent 32%),
    linear-gradient(135deg, #F8F5EF 0%, #EFEAE1 55%, #F8F5EF 100%) !important;
  color: #101820 !important;
}
html body #crystal-designer-app .cbd-premium-loading-root::before {
  content: "" !important;
  position: absolute !important;
  inset: 8% 12% !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.54), transparent 58%) !important;
  filter: blur(14px) !important;
  pointer-events: none !important;
}
html body #crystal-designer-app .cbd-premium-loading-shell {
  position: relative !important;
  z-index: 2 !important;
  width: min(420px, calc(100vw - 48px)) !important;
  min-height: 338px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 30px 32px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,0.58) !important;
  border: 1px solid rgba(199,167,108,0.24) !important;
  box-shadow: 0 26px 82px rgba(7,17,31,0.11), inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
  text-align: center !important;
  overflow: hidden !important;
}
html body #crystal-designer-app .cbd-premium-loading-shell::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(120deg, transparent 12%, rgba(255,255,255,.38) 42%, transparent 66%) !important;
  transform: translateX(-125%) !important;
  animation: cbd-premium-loader-sheen-v1 4.4s ease-in-out infinite !important;
}
html body #crystal-designer-app .cbd-premium-loading-icon {
  position: relative !important;
  width: 86px !important;
  height: 86px !important;
  margin: 0 auto 18px !important;
}
html body #crystal-designer-app .cbd-premium-loading-ring {
  position: absolute !important;
  inset: 7px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(199,167,108,.54) !important;
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.42), 0 0 34px rgba(199,167,108,.18) !important;
  animation: cbd-premium-loader-breathe-v1 3.6s ease-in-out infinite !important;
}
html body #crystal-designer-app .cbd-premium-loading-moon {
  position: absolute !important;
  inset: 19px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fff8e8 34%, #ead8ab 68%, #c7a76c 100%) !important;
  box-shadow: 0 0 28px rgba(199,167,108,.32), 0 10px 30px rgba(7,17,31,.08) !important;
}
html body #crystal-designer-app .cbd-premium-loading-moon::after {
  content: "" !important;
  position: absolute !important;
  width: 28px !important;
  height: 28px !important;
  right: -2px !important;
  top: -2px !important;
  border-radius: 999px !important;
  background: #F8F5EF !important;
  box-shadow: -8px 8px 16px rgba(255,255,255,.38) !important;
}
html body #crystal-designer-app .cbd-premium-loading-icon i {
  position: absolute !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 30% 25%, #fff 0%, #f8e7bd 34%, #c7a76c 100%) !important;
  box-shadow: 0 8px 14px rgba(7,17,31,.14) !important;
  animation: cbd-premium-loader-bead-v1 3.2s ease-in-out infinite !important;
}
html body #crystal-designer-app .cbd-premium-loading-icon i:nth-of-type(1){left:50%;top:0;transform:translateX(-50%);animation-delay:0s!important;}
html body #crystal-designer-app .cbd-premium-loading-icon i:nth-of-type(2){right:10px;top:18px;animation-delay:.18s!important;}
html body #crystal-designer-app .cbd-premium-loading-icon i:nth-of-type(3){right:8px;bottom:18px;animation-delay:.36s!important;}
html body #crystal-designer-app .cbd-premium-loading-icon i:nth-of-type(4){left:50%;bottom:0;transform:translateX(-50%);animation-delay:.54s!important;}
html body #crystal-designer-app .cbd-premium-loading-icon i:nth-of-type(5){left:8px;bottom:18px;animation-delay:.72s!important;}
html body #crystal-designer-app .cbd-premium-loading-icon i:nth-of-type(6){left:10px;top:18px;animation-delay:.90s!important;}
html body #crystal-designer-app .cbd-premium-loading-wordmark {
  margin: 0 0 9px !important;
  color: rgba(16,24,32,.52) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .24em !important;
}
html body #crystal-designer-app .cbd-premium-loading-shell b {
  display: block !important;
  color: #101820 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 22px !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -.035em !important;
}
html body #crystal-designer-app .cbd-premium-loading-shell small {
  display: block !important;
  margin-top: 9px !important;
  color: rgba(16,24,32,.58) !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
}
html body #crystal-designer-app .cbd-premium-loading-thread {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: min(260px, 84%) !important;
  height: 30px !important;
  margin-top: 22px !important;
}
html body #crystal-designer-app .cbd-premium-loading-thread::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent, rgba(199,167,108,.72), transparent) !important;
}
html body #crystal-designer-app .cbd-premium-loading-thread span {
  position: relative !important;
  z-index: 2 !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 32% 24%, #fff 0%, #f8e7bd 38%, #c7a76c 100%) !important;
  box-shadow: 0 7px 13px rgba(7,17,31,.12) !important;
  animation: cbd-premium-loader-thread-v1 2.8s ease-in-out infinite !important;
}
html body #crystal-designer-app .cbd-premium-loading-thread span:nth-child(2){animation-delay:.14s!important;}
html body #crystal-designer-app .cbd-premium-loading-thread span:nth-child(3){animation-delay:.28s!important;}
html body #crystal-designer-app .cbd-premium-loading-thread span:nth-child(4){animation-delay:.42s!important;}
html body #crystal-designer-app .cbd-premium-loading-thread span:nth-child(5){animation-delay:.56s!important;}

@keyframes cbd-premium-loader-sheen-v1 { 0%, 62% { transform: translateX(-125%); } 100% { transform: translateX(125%); } }
@keyframes cbd-premium-loader-breathe-v1 { 0%,100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.035); opacity: 1; } }
@keyframes cbd-premium-loader-bead-v1 { 0%,100% { opacity: .72; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.12); } }
@keyframes cbd-premium-loader-thread-v1 { 0%,100% { transform: translateY(0) scale(.92); opacity: .70; } 50% { transform: translateY(-3px) scale(1); opacity: 1; } }

/* More grounded, premium moonlight preview surface. */
html body #crystal-designer-app .cbd-preview {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.76), transparent 26%),
    radial-gradient(circle at 50% 52%, rgba(199,167,108,.27), transparent 34%),
    radial-gradient(circle at 16% 82%, rgba(184,199,216,.16), transparent 31%),
    linear-gradient(135deg, #F8F5EF 0%, #EFEAE1 58%, #F8F5EF 100%) !important;
}
html body #crystal-designer-app .cbd-preview-stage {

  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}
html body #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
html body #crystal-designer-app .cbd-preview-stage svg {
  shape-rendering: geometricPrecision !important;
  text-rendering: geometricPrecision !important;
}
html body #crystal-designer-app .cbd-preview-orbit {

}

/* Individual bead material depth. Pointer events remain on original preview groups. */
html body #crystal-designer-app .cbd-preview-bead,
html body #crystal-designer-app .cbd-preview-bead-premium {
  transform-box: fill-box !important;
  transform-origin: center !important;
  backface-visibility: hidden !important;
  will-change: transform, filter, opacity !important;
}
html body #crystal-designer-app .cbd-preview-bead-img,
html body #crystal-designer-app .cbd-preview-bead image {
  image-rendering: auto !important;
}
html body #crystal-designer-app .cbd-preview-bead-glass,
html body #crystal-designer-app .cbd-preview-bead-spark,
html body #crystal-designer-app .cbd-preview-bead-soft-glow {
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}
html body #crystal-designer-app .cbd-preview-bead-glass {
  opacity: .84 !important;
}
html body #crystal-designer-app .cbd-preview-bead-spark {
  opacity: .62 !important;

}
html body #crystal-designer-app .cbd-preview-bead-soft-glow {
  opacity: .44 !important;
}
html body #crystal-designer-app .cbd-preview-bead:hover {
}
html body #crystal-designer-app.cbd-drag-active .cbd-preview-bead.is-drag-source {
  opacity: .06 !important;

}
html body #crystal-designer-app .cbd-preview-bead.is-drag-target {
}
html body #crystal-designer-app .cbd-preview-bead.is-dropped,
html body #crystal-designer-app .cbd-preview-bead.is-rolling {
}
html body .cbd-drag-ghost {
  filter: drop-shadow(0 18px 24px rgba(7,17,31,.28)) drop-shadow(0 0 14px rgba(199,167,108,.20)) !important;
}

@media (max-width: 760px) {
  html body #crystal-designer-app .cbd-premium-loading-root {
    padding: 18px !important;
  }
  html body #crystal-designer-app .cbd-premium-loading-shell {
    width: min(360px, calc(100vw - 48px)) !important;
    min-height: 312px !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }
  html body #crystal-designer-app .cbd-premium-loading-icon {
    width: 74px !important;
    height: 74px !important;
    margin-bottom: 16px !important;
  }
  html body #crystal-designer-app .cbd-premium-loading-shell b {
    font-size: 18px !important;
  }
  html body #crystal-designer-app .cbd-premium-loading-shell small {
    font-size: 13px !important;
  }
  html body #crystal-designer-app .cbd-preview-stage {

  }
  html body #crystal-designer-app .cbd-preview-bead,
  html body #crystal-designer-app .cbd-preview-bead-premium {
  }
  html body #crystal-designer-app .cbd-preview-bead-glass { opacity: .58 !important; }
  html body #crystal-designer-app .cbd-preview-bead-spark { opacity: .48 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body #crystal-designer-app .cbd-premium-loading-root *,
  .crystal-custom-loader * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ===== Moonsyl motion stability v2 =====
   Scope: loading timing support + bead add/reorder motion only.
   Important: the outer SVG bead group owns position only; scale feedback lives
   on .cbd-preview-bead-visual so drag, swap, and zoom cannot leave size drift. */
#crystal-designer-app.cbd-boot-loading {
  min-height: var(--cbd-vh, 100vh) !important;
  background: #F8F5EF !important;
}

html body #crystal-designer-app .cbd-preview-bead,
html body #crystal-designer-app .cbd-preview-bead-premium {
  transform-box: fill-box !important;
  transform-origin: center !important;

  will-change: transform, opacity, filter !important;
}

html body #crystal-designer-app .cbd-preview-bead-visual {
  transform-box: fill-box !important;
  transform-origin: center center !important;
  pointer-events: none !important;

  will-change: transform, opacity, filter !important;
}

html body #crystal-designer-app .cbd-preview-bead.is-new-bead .cbd-preview-bead-visual,
html body #crystal-designer-app .cbd-preview-bead-visual.is-entering {
  animation: cbd-preview-bead-enter-v2 360ms cubic-bezier(.22,1,.36,1) both !important;
}

html body #crystal-designer-app .cbd-preview-bead.is-dropped .cbd-preview-bead-visual,
html body #crystal-designer-app .cbd-preview-bead-visual.is-drop-settle {
  animation: cbd-preview-bead-settle-v2 280ms cubic-bezier(.22,1,.36,1) both !important;
}

html body #crystal-designer-app .cbd-preview-bead.is-rolling {
}

html body #crystal-designer-app .cbd-preview-bead.is-rolling .cbd-preview-bead-visual {
  animation: none !important;
  transform: none !important;
}

html body #crystal-designer-app.cbd-drag-active .cbd-preview-bead.is-drag-source {
  opacity: .10 !important;

}

html body #crystal-designer-app.cbd-drag-active .cbd-preview-bead.is-drag-source .cbd-preview-bead-visual {
  transform: none !important;
  animation: none !important;
}

html body #crystal-designer-app .cbd-preview-bead.is-drag-target .cbd-preview-bead-visual {
  transform: none !important;
}

html body .cbd-drag-ghost {
  transform: translate(-50%, -50%) scale(1) !important;
  border-radius: 999px !important;
  opacity: .96 !important;
  filter: drop-shadow(0 16px 22px rgba(7,17,31,.24)) drop-shadow(0 0 12px rgba(199,167,108,.18)) !important;
}

html body .cbd-drag-ghost img,
html body .cbd-drag-ghost span {
  transform: none !important;
}

@keyframes cbd-preview-bead-enter-v2 {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.93);
    filter: brightness(.98) saturate(.96);
  }
  68% {
    opacity: 1;
    transform: translateY(-1px) scale(1.012);
    filter: brightness(1.035) saturate(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

@keyframes cbd-preview-bead-settle-v2 {
  0% {
    opacity: .96;
    transform: translateY(2px) scale(.996);
    filter: brightness(1.015);
  }
  62% {
    opacity: 1;
    transform: translateY(-.6px) scale(1.006);
    filter: brightness(1.035);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

@media (max-width: 760px) {
  html body #crystal-designer-app .cbd-preview-bead.is-new-bead .cbd-preview-bead-visual,
  html body #crystal-designer-app .cbd-preview-bead-visual.is-entering {
    animation-duration: 320ms !important;
  }

  html body #crystal-designer-app .cbd-preview-bead.is-dropped .cbd-preview-bead-visual,
  html body #crystal-designer-app .cbd-preview-bead-visual.is-drop-settle {
    animation-duration: 240ms !important;
  }

  html body .cbd-drag-ghost {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: .94 !important;
  }
}

/* ===== Moonsyl type-aware rail layout + bead size picker v1 =====
   Scope: preview item rendering and size picker only. Bead, spacer and charm
   now have independent visual classes; accessory styles intentionally avoid
   round clipping / sphere highlight rules used by true beads. */
html body #crystal-designer-app .design-item--bead {
}

html body #crystal-designer-app .design-item--spacer,
html body #crystal-designer-app .design-item--charm {
  filter: drop-shadow(0 7px 10px rgba(7,17,31,.16)) !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}

html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-visual,
html body #crystal-designer-app .design-item--charm .cbd-preview-bead-visual {
  pointer-events: none !important;
  transform: none !important;
  animation: none !important;
}

html body #crystal-designer-app .design-item--spacer .cbd-preview-accessory-img,
html body #crystal-designer-app .design-item--charm .cbd-preview-accessory-img {
  clip-path: none !important;
  border-radius: 0 !important;
  object-fit: contain !important;

  image-rendering: auto !important;
}

html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-glass,
html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-spark,
html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-soft-glow,
html body #crystal-designer-app .design-item--charm .cbd-preview-bead-glass,
html body #crystal-designer-app .design-item--charm .cbd-preview-bead-spark,
html body #crystal-designer-app .design-item--charm .cbd-preview-bead-soft-glow {
  display: none !important;
}

html body #crystal-designer-app .cbd-preview-spacer-color {
  fill: rgba(226,218,203,.94) !important;
  stroke: rgba(110,95,68,.32) !important;
  stroke-width: 1 !important;
}

html body #crystal-designer-app .cbd-preview-spacer-line {
  stroke: rgba(255,255,255,.72) !important;
  stroke-width: 1.2 !important;
  stroke-linecap: round !important;
}

html body #crystal-designer-app .cbd-preview-charm-link {
  stroke: rgba(163,126,59,.62) !important;
  stroke-width: 1.3 !important;
  stroke-linecap: round !important;
}

html body #crystal-designer-app .cbd-preview-charm-anchor {
  fill: rgba(255,255,255,.82) !important;
  stroke: rgba(163,126,59,.70) !important;
  stroke-width: 1.2 !important;
}

html body #crystal-designer-app .cbd-preview-charm-placeholder {
  fill: rgba(220,211,196,.88) !important;
  stroke: rgba(116,105,86,.36) !important;
  stroke-width: 1 !important;
}

html body #crystal-designer-app .design-item--spacer:hover,
html body #crystal-designer-app .design-item--charm:hover {
  filter: drop-shadow(0 9px 13px rgba(7,17,31,.20)) drop-shadow(0 0 7px rgba(199,167,108,.16)) !important;
}

html body #crystal-designer-app .design-item--spacer.is-rolling,
html body #crystal-designer-app .design-item--charm.is-rolling,
html body #crystal-designer-app .design-item--spacer.is-dropped,
html body #crystal-designer-app .design-item--charm.is-dropped {
  filter: drop-shadow(0 11px 15px rgba(7,17,31,.20)) drop-shadow(0 0 10px rgba(199,167,108,.20)) !important;
}

html body #crystal-designer-app .cbd-preview-track-outer {
  stroke: rgba(199,167,108,.38) !important;
  stroke-width: 2.2 !important;
}
html body #crystal-designer-app .cbd-preview-track-inner {
  stroke: rgba(7,17,31,.12) !important;
  stroke-width: 1.1 !important;
}

html body #crystal-designer-app .cbd-gem--spacer .cbd-gem-img,
html body #crystal-designer-app .cbd-gem--charm .cbd-gem-img {
  border-radius: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 5px 7px rgba(7,17,31,.12)) !important;
}

html body #crystal-designer-app .cbd-gem--bead .cbd-gem-img,
html body #crystal-designer-app .cbd-gem--letter .cbd-gem-img {
  border-radius: 999px !important;
}

.cbd-size-picker-popover,
.cbd-size-picker-popover * {
  box-sizing: border-box !important;
}
.cbd-size-picker-popover {
  position: fixed !important;
  z-index: 2147483647 !important;
  width: max-content !important;
  max-width: min(320px, calc(100vw - 28px)) !important;
  pointer-events: auto !important;
  animation: cbd-size-picker-in-v1 180ms cubic-bezier(.22,1,.36,1) both !important;
}
.cbd-size-picker-card {
  min-width: 214px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(199,167,108,.26) !important;
  box-shadow: 0 18px 50px rgba(7,17,31,.18), inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.cbd-size-picker-card > span {
  display: block !important;
  margin: 0 0 9px !important;
  color: rgba(16,24,32,.58) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
.cbd-size-picker-options {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(48px, 1fr)) !important;
  gap: 7px !important;
}
.cbd-size-picker-options button {
  min-width: 0 !important;
  height: 36px !important;
  border: 1px solid rgba(16,24,32,.12) !important;
  border-radius: 999px !important;
  background: #fbfaf7 !important;
  color: #101820 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}
.cbd-size-picker-options button:hover,
.cbd-size-picker-options button:focus-visible {
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg,#f8e7bd,#d8aa4f) !important;
  border-color: rgba(199,167,108,.72) !important;
  box-shadow: 0 8px 18px rgba(116,80,23,.13) !important;
  outline: none !important;
}
.cbd-size-picker-options button:active {
  transform: translateY(0) scale(.97) !important;
}

html body .cbd-drag-ghost--spacer,
html body .cbd-drag-ghost--charm {
  border-radius: 0 !important;
}
html body .cbd-drag-ghost--spacer img,
html body .cbd-drag-ghost--charm img {
  object-fit: contain !important;
  border-radius: 0 !important;
}
html body .cbd-drag-ghost--bead img,
html body .cbd-drag-ghost--letter img,
html body .cbd-drag-ghost--bead span,
html body .cbd-drag-ghost--letter span {
  border-radius: 999px !important;
}

@keyframes cbd-size-picker-in-v1 {
  from { opacity: 0; margin-top: 6px; }
  to { opacity: 1; margin-top: 0; }
}

@media (max-width: 760px) {
  .cbd-size-picker-popover.is-mobile {
    width: min(340px, calc(100vw - 32px)) !important;
  }
  .cbd-size-picker-card {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }
  .cbd-size-picker-options button {
    height: 40px !important;
    font-size: 13px !important;
  }
  html body #crystal-designer-app .design-item--spacer,
  html body #crystal-designer-app .design-item--charm {
    filter: drop-shadow(0 5px 8px rgba(7,17,31,.13)) !important;
  }
}


/* ===== Moonsyl preview rail slot P0-B =====
   Scope: center bracelet preview only. Hide anchor/debug markers and keep
   spacer/charm artwork un-clipped while the SVG layout anchors them to rail. */
html body #crystal-designer-app .cbd-preview-charm-anchor,
html body #crystal-designer-app .cbd-preview-debug-dot,
html body #crystal-designer-app .cbd-preview-anchor-debug,
html body #crystal-designer-app .cbd-preview-rail-debug,
html body #crystal-designer-app .cbd-preview-point-debug {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body #crystal-designer-app .cbd-preview-hit {
  pointer-events: all !important;
  opacity: 0 !important;
}

html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-visual,
html body #crystal-designer-app .design-item--charm .cbd-preview-bead-visual {
  transform-origin: 0 0 !important;
}

html body #crystal-designer-app .cbd-preview-spacer-img,
html body #crystal-designer-app .cbd-preview-charm-img {
  overflow: visible !important;
  clip-path: none !important;
  border-radius: 0 !important;
}


/* ===== Moonsyl preview rail slot P0-C =====
   Scope: center bracelet preview only. No right summary styles here. */
html body #crystal-designer-app .cbd-preview-hit {
  fill: transparent !important;
  stroke: none !important;
  opacity: 0 !important;
  pointer-events: all !important;
}

html body #crystal-designer-app .cbd-preview-charm-anchor,
html body #crystal-designer-app .cbd-preview-debug-dot,
html body #crystal-designer-app .cbd-preview-anchor-debug,
html body #crystal-designer-app .cbd-preview-rail-debug,
html body #crystal-designer-app .cbd-preview-point-debug {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-glass,
html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-spark,
html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-soft-glow,
html body #crystal-designer-app .design-item--charm .cbd-preview-bead-glass,
html body #crystal-designer-app .design-item--charm .cbd-preview-bead-spark,
html body #crystal-designer-app .design-item--charm .cbd-preview-bead-soft-glow {
  display: none !important;
}

html body #crystal-designer-app .design-item--spacer .cbd-preview-accessory-img,
html body #crystal-designer-app .design-item--charm .cbd-preview-accessory-img,
html body #crystal-designer-app .cbd-preview-spacer-img,
html body #crystal-designer-app .cbd-preview-charm-img {
  clip-path: none !important;
  border-radius: 0 !important;
  overflow: visible !important;

}

html body #crystal-designer-app .cbd-preview-charm-bail {
  fill: rgba(248,245,239,.92) !important;
  stroke: rgba(163,126,59,.72) !important;
  stroke-width: 1.15 !important;
}

html body #crystal-designer-app .cbd-preview-charm-link {
  stroke: rgba(163,126,59,.64) !important;
  stroke-width: 1.15 !important;
  stroke-linecap: round !important;
}


/* ===== Moonsyl preview accessory clarity P0-D =====
   Scope: center Bracelet Preview only. Do not touch right Design Summary. */
html body #crystal-designer-app .cbd-preview-charm-bail,
html body #crystal-designer-app .cbd-preview-charm-link,
html body #crystal-designer-app .cbd-preview-charm-anchor,
html body #crystal-designer-app .cbd-preview-debug-dot,
html body #crystal-designer-app .cbd-preview-anchor-debug,
html body #crystal-designer-app .cbd-preview-rail-debug,
html body #crystal-designer-app .cbd-preview-point-debug {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body #crystal-designer-app .cbd-preview-hit {
  fill: rgba(0,0,0,0) !important;
  stroke: none !important;
  opacity: 0 !important;
  pointer-events: all !important;
}

html body #crystal-designer-app .design-item--charm {
  opacity: 1 !important;
  filter: drop-shadow(0 8px 14px rgba(7,17,31,.18)) drop-shadow(0 0 6px rgba(199,167,108,.10)) !important;
}

html body #crystal-designer-app .design-item--spacer {
  opacity: 1 !important;
  filter: drop-shadow(0 5px 10px rgba(7,17,31,.15)) !important;
}

html body #crystal-designer-app .design-item--charm .cbd-preview-bead-visual,
html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-visual {
  opacity: 1 !important;
}

html body #crystal-designer-app .cbd-preview-charm-img,
html body #crystal-designer-app .cbd-preview-spacer-img {
  opacity: 1 !important;
  clip-path: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  object-fit: contain !important;
}

html body #crystal-designer-app .cbd-preview-charm-img {

}

html body #crystal-designer-app .cbd-preview-spacer-img {

}

html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-glass,
html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-spark,
html body #crystal-designer-app .design-item--spacer .cbd-preview-bead-soft-glow,
html body #crystal-designer-app .design-item--charm .cbd-preview-bead-glass,
html body #crystal-designer-app .design-item--charm .cbd-preview-bead-spark,
html body #crystal-designer-app .design-item--charm .cbd-preview-bead-soft-glow {
  display: none !important;
}


/* ===== Moonsyl preview radius/anchor P0-E =====
   Scope: center Bracelet Preview only. No right Design Summary changes. */
html body #crystal-designer-app .cbd-preview-hit {
  fill: transparent !important;
  stroke: transparent !important;
  opacity: 0 !important;
  pointer-events: all !important;
}
html body #crystal-designer-app .cbd-preview-charm-bail,
html body #crystal-designer-app .cbd-preview-charm-link,
html body #crystal-designer-app .cbd-preview-charm-anchor,
html body #crystal-designer-app .cbd-preview-debug-dot,
html body #crystal-designer-app .cbd-preview-anchor-debug,
html body #crystal-designer-app .cbd-preview-rail-debug,
html body #crystal-designer-app .cbd-preview-point-debug,
html body #crystal-designer-app .cbd-preview-marker {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
html body #crystal-designer-app .design-item--charm .cbd-preview-accessory-img,
html body #crystal-designer-app .design-item--spacer .cbd-preview-accessory-img {
  clip-path: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}


/* ===== P0-F Geometry Debug Preview =====
   Only visible when the page URL includes ?previewDebug=1 or ?previewGeometryDebug=1. */
#crystal-designer-app .cbd-preview-svg--geometry-debug .cbd-preview-debug-item {
  pointer-events: none !important;
}
#crystal-designer-app .cbd-preview-svg--geometry-debug .cbd-preview-debug-label {
  pointer-events: none !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-weight: 800 !important;
  opacity: .84 !important;
}


/* ===== P0-H Real PNG Preview Debug Overlay =====
   ?previewDebug=1 shows rail anchor/thread points and direction arrows on real PNGs.
   Production mode has data-preview-debug-overlay="0", so these never appear. */
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-live-debug,
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-live-debug {
  display: none !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-live-debug {
  display: inline !important;
  pointer-events: none !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-debug-bead-point {
  fill: #101820 !important;
  stroke: #fffaf2 !important;
  stroke-width: 1.2 !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-debug-spacer-point {
  fill: #1f6feb !important;
  stroke: #fffaf2 !important;
  stroke-width: 1.2 !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-debug-anchor-point {
  fill: #dc2626 !important;
  stroke: #fffaf2 !important;
  stroke-width: 1.2 !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-debug-anchor-ring {
  fill: none !important;
  stroke: #dc2626 !important;
  stroke-width: 1.1 !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-debug-outward {
  stroke: #dc2626 !important;
  stroke-width: 1.4 !important;
  stroke-linecap: round !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-debug-tangent {
  stroke: #1f6feb !important;
  stroke-width: 1.4 !important;
  stroke-linecap: round !important;
}


/* ===== P0-J Real PNG preview final calibration =====
   Scope: center Bracelet Preview only. No Design Summary / Cart / Confirm changes.
   Debug markers are hidden unless the SVG has data-preview-debug-overlay="1". */
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-live-debug,
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-live-debug,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-debug-bead-point,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-debug-spacer-point,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-debug-anchor-point,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-debug-anchor-ring,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-debug-outward,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-debug-tangent {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#crystal-designer-app .design-item--charm .cbd-preview-charm-img,
#crystal-designer-app .cbd-preview-charm-img {
  opacity: .98 !important;
  clip-path: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  object-fit: contain !important;

}

#crystal-designer-app .design-item--spacer .cbd-preview-spacer-img,
#crystal-designer-app .cbd-preview-spacer-img {
  opacity: 1 !important;
  clip-path: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  object-fit: contain !important;

}

#crystal-designer-app .design-item--charm,
#crystal-designer-app .design-item--spacer {
  opacity: 1 !important;
}

#crystal-designer-app .design-item--charm .cbd-preview-bead-glass,
#crystal-designer-app .design-item--charm .cbd-preview-bead-spark,
#crystal-designer-app .design-item--charm .cbd-preview-bead-soft-glow,
#crystal-designer-app .design-item--spacer .cbd-preview-bead-glass,
#crystal-designer-app .design-item--spacer .cbd-preview-bead-spark,
#crystal-designer-app .design-item--spacer .cbd-preview-bead-soft-glow {
  display: none !important;
}


/* ===== P0-K anchor/rail alignment fix =====
   Scope: center Bracelet Preview only. No right Summary / Cart / Confirm changes. */
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-debug-rail-target {
  fill: none !important;
  stroke: #f59e0b !important;
  stroke-width: 1.2 !important;
  stroke-dasharray: 2 2 !important;
  pointer-events: none !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-debug-rail-target,
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-debug-rail-target {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
#crystal-designer-app .design-item--charm .cbd-preview-charm-img,
#crystal-designer-app .cbd-preview-charm-img {
  opacity: 1 !important;
  overflow: visible !important;
  clip-path: none !important;
  border-radius: 0 !important;

}
#crystal-designer-app .design-item--spacer .cbd-preview-spacer-img,
#crystal-designer-app .cbd-preview-spacer-img {
  opacity: 1 !important;
  overflow: visible !important;
  clip-path: none !important;
  border-radius: 0 !important;

}


/* ===== P0-L unified rail / anchor debug correction =====
   Scope: center Bracelet Preview only. No right Summary / Cart / Confirm changes.
   The item rail is layout.rail; visible rail lines are decorative offsets around it. */
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-track-center-debug {
  stroke: rgba(245,158,11,.62) !important;
  stroke-width: 1 !important;
  stroke-dasharray: 4 4 !important;
  pointer-events: none !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-track-center-debug,
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-track-center-debug {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
/* Older CSS scaled all preview images around their center. That breaks the
   meaning of accessory anchor/thread offsets, so accessories must opt out. */
#crystal-designer-app .design-item--charm .cbd-preview-accessory-img,
#crystal-designer-app .design-item--charm .cbd-preview-charm-img,
#crystal-designer-app .design-item--spacer .cbd-preview-accessory-img,
#crystal-designer-app .design-item--spacer .cbd-preview-spacer-img {
  transform: none !important;
  transform-origin: 0 0 !important;
}
/* In preview debug mode, geometry must not be visually shifted by hover/enter
   transforms while validating rail-point equality. */
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .design-item--charm,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .design-item--spacer,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .design-item--bead,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-bead-visual {
  transition: none !important;
  animation: none !important;
}


/* ===== P0-M final unified rail / accessory anchor lock =====
   Scope: center Bracelet Preview only. Do not affect Summary, Cart, Confirm, Save. */
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-track-center-debug {
  stroke: rgba(245,158,11,.70) !important;
  stroke-width: 1.15 !important;
  stroke-dasharray: 4 4 !important;
  pointer-events: none !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-track-center-debug,
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-track-center-debug,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-live-debug,
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-live-debug {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
/* Bead images may keep their material-depth scale; accessories must never inherit it. */
#crystal-designer-app .design-item--bead .cbd-preview-bead-img {
  transform-box: fill-box !important;
  transform-origin: center center !important;
}
#crystal-designer-app .design-item--charm image,
#crystal-designer-app .design-item--charm .cbd-preview-accessory-img,
#crystal-designer-app .design-item--charm .cbd-preview-charm-img,
#crystal-designer-app .design-item--spacer image,
#crystal-designer-app .design-item--spacer .cbd-preview-accessory-img,
#crystal-designer-app .design-item--spacer .cbd-preview-spacer-img,
#crystal-designer-app .design-item--letter image {
  transform: none !important;
  transform-box: fill-box !important;
  transform-origin: 0 0 !important;
  clip-path: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
#crystal-designer-app .cbd-preview-accessory-local {
  transform-box: view-box !important;
  transform-origin: 0 0 !important;
}
#crystal-designer-app .design-item--charm .cbd-preview-charm-img,
#crystal-designer-app .cbd-preview-charm-img {
  opacity: 1 !important;

}
#crystal-designer-app .design-item--spacer .cbd-preview-spacer-img,
#crystal-designer-app .cbd-preview-spacer-img {
  opacity: 1 !important;

}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-debug-rail-target {
  fill: rgba(255,250,242,.20) !important;
  stroke: #f59e0b !important;
  stroke-width: 1.25 !important;
  stroke-dasharray: 2 2 !important;
  pointer-events: none !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-debug-rail-target,
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-debug-rail-target {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .design-item--charm,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .design-item--spacer,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .design-item--bead,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-bead-visual,
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-accessory-local {
  transition: none !important;
  animation: none !important;
}


/* ===== P0-O bead tangent + tight rail spacing final patch =====
   Scope: center Bracelet Preview only. No Summary / Cart / Confirm / Save changes. */
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="1"] .cbd-preview-debug-bead-tangent {
  stroke: rgba(16,24,32,.60) !important;
  stroke-width: 1.2 !important;
  stroke-dasharray: 2 2 !important;
  pointer-events: none !important;
}
#crystal-designer-app .cbd-preview-svg[data-preview-debug-overlay="0"] .cbd-preview-debug-bead-tangent,
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-debug-bead-tangent {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
/* Bead images may rotate with tangent and keep their center scale; accessories remain unscaled by CSS. */
#crystal-designer-app .design-item--bead .cbd-preview-bead-img {
  transform-box: fill-box !important;
  transform-origin: center center !important;
}
#crystal-designer-app .design-item--charm image,
#crystal-designer-app .design-item--charm .cbd-preview-accessory-img,
#crystal-designer-app .design-item--charm .cbd-preview-charm-img,
#crystal-designer-app .design-item--spacer image,
#crystal-designer-app .design-item--spacer .cbd-preview-accessory-img,
#crystal-designer-app .design-item--spacer .cbd-preview-spacer-img,
#crystal-designer-app .design-item--letter image {
  transform: none !important;
  transform-box: fill-box !important;
  transform-origin: 0 0 !important;
}

/* ===== P0-P even-to-tight bracelet spacing + larger accessory visuals =====
   Scope: center Bracelet Preview only. No Summary / Cart / Confirm / Save changes. */
#crystal-designer-app .design-item--charm .cbd-preview-charm-img,
#crystal-designer-app .cbd-preview-charm-img {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  border-radius: 0 !important;

}
#crystal-designer-app .design-item--spacer .cbd-preview-spacer-img,
#crystal-designer-app .cbd-preview-spacer-img {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  border-radius: 0 !important;

}
#crystal-designer-app .design-item--charm image,
#crystal-designer-app .design-item--charm .cbd-preview-accessory-img,
#crystal-designer-app .design-item--spacer image,
#crystal-designer-app .design-item--spacer .cbd-preview-accessory-img,
#crystal-designer-app .design-item--letter image {
  transform: none !important;
  transform-box: fill-box !important;
  transform-origin: 0 0 !important;
}
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-live-debug,
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-debug-bead-tangent,
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-debug-rail-target,
#crystal-designer-app .cbd-preview-svg:not([data-preview-debug-overlay="1"]) .cbd-preview-track-center-debug {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ===== P0-S Design Lab generic category + material animation system =====
   Scope: category tabs, material grid/card motion, and tiny visual feedback only.
   Category-name agnostic: any future category rendered as .cbd-tab[data-type]
   and .cbd-gem automatically inherits this system. No preview geometry changes. */
#crystal-designer-app {
  --cbd-ease-luxury: cubic-bezier(0.22, 1, 0.36, 1) !important;
  --cbd-motion-fast: 220ms !important;
  --cbd-motion-mid: 300ms !important;
  --cbd-motion-slow: 360ms !important;
}

#crystal-designer-app .cbd-tabs {
  position: relative !important;
  isolation: isolate !important;
  align-items: center !important;
}

#crystal-designer-app .cbd-tabs::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--cbd-active-w, 0px) !important;
  height: var(--cbd-active-h, 30px) !important;
  min-height: 28px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  opacity: .98 !important;
  transform: translate3d(var(--cbd-active-x, 0px), var(--cbd-active-y, 0px), 0) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.58), transparent 42%),
    linear-gradient(135deg, #fff1c9 0%, #f2d18c 46%, #c7a76c 100%) !important;
  border: 1px solid rgba(199,167,108,.50) !important;
  box-shadow:
    0 12px 28px rgba(95,72,35,.13),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
  transition:
    transform var(--cbd-motion-slow) var(--cbd-ease-luxury),
    width var(--cbd-motion-slow) var(--cbd-ease-luxury),
    height var(--cbd-motion-slow) var(--cbd-ease-luxury),
    opacity var(--cbd-motion-fast) var(--cbd-ease-luxury),
    box-shadow var(--cbd-motion-mid) var(--cbd-ease-luxury) !important;
}

#crystal-designer-app .cbd-tab {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  transform: translate3d(0,0,0) !important;
  will-change: transform, background, border-color, box-shadow, color !important;
  transition:
    transform 280ms var(--cbd-ease-luxury),
    opacity 240ms var(--cbd-ease-luxury),
    background 260ms var(--cbd-ease-luxury),
    border-color 260ms var(--cbd-ease-luxury),
    color 260ms var(--cbd-ease-luxury),
    box-shadow 260ms var(--cbd-ease-luxury),
    filter 260ms var(--cbd-ease-luxury) !important;
}

#crystal-designer-app .cbd-tab::after {
  content: "" !important;
  position: absolute !important;
  inset: -45% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(120deg, transparent 36%, rgba(255,255,255,.36), transparent 64%) !important;
  transform: translateX(-120%) rotate(10deg) !important;
  opacity: 0 !important;
  transition: transform 520ms var(--cbd-ease-luxury), opacity 240ms var(--cbd-ease-luxury) !important;
}

#crystal-designer-app .cbd-tab:hover,
#crystal-designer-app .cbd-tab:focus-visible {
  transform: translateY(-2px) !important;
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(199,167,108,.34) !important;
  box-shadow:
    0 10px 24px rgba(7,17,31,.08),
    0 0 0 2px rgba(199,167,108,.08) !important;
  color: #101820 !important;
}

#crystal-designer-app .cbd-tab:hover::after,
#crystal-designer-app .cbd-tab:focus-visible::after {
  transform: translateX(120%) rotate(10deg) !important;
  opacity: 1 !important;
}

#crystal-designer-app .cbd-tab.active,
#crystal-designer-app .cbd-tab.active:hover,
#crystal-designer-app .cbd-tab.active:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  color: #081425 !important;
  box-shadow: none !important;
  transform: translateY(0) !important;
  filter: none !important;
}

#crystal-designer-app .cbd-tab:active,
#crystal-designer-app .cbd-tab.active:active {
  transform: translateY(0) scale(.975) !important;
}

#crystal-designer-app .cbd-gems-grid {
  opacity: 1 !important;
  transform: translate3d(0,0,0) !important;
  will-change: opacity, transform, filter !important;
  contain: layout paint !important;
  transition:
    transform 240ms var(--cbd-ease-luxury),
    opacity 220ms var(--cbd-ease-luxury),
    filter 220ms var(--cbd-ease-luxury) !important;
}

#crystal-designer-app .cbd-gems-grid.is-leaving {
  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) !important;
  filter: blur(1.4px) saturate(.98) !important;
}

#crystal-designer-app .cbd-gems-grid.is-entering {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: none !important;
}

#crystal-designer-app .cbd-gems-grid.is-entering .cbd-gem {
  animation: cbd-gem-card-enter-p0s 340ms var(--cbd-ease-luxury) both !important;
  animation-delay: calc(var(--cbd-card-index, 0) * 24ms) !important;
}

@keyframes cbd-gem-card-enter-p0s {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.985);
    filter: blur(1.2px) saturate(.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
}

#crystal-designer-app .cbd-gems-grid .cbd-gem {
  transform: translate3d(0,0,0) scale(1) !important;
  will-change: transform, background, border-color, box-shadow, filter !important;
  transition:
    transform 280ms var(--cbd-ease-luxury),
    opacity 240ms var(--cbd-ease-luxury),
    background 260ms var(--cbd-ease-luxury),
    border-color 260ms var(--cbd-ease-luxury),
    box-shadow 260ms var(--cbd-ease-luxury),
    filter 260ms var(--cbd-ease-luxury) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle at 28% 12%, rgba(255,255,255,.55), transparent 38%),
    linear-gradient(135deg, rgba(199,167,108,.10), transparent 64%) !important;
  transition: opacity 260ms var(--cbd-ease-luxury) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover,
#crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible {
  transform: translate3d(0, -3px, 0) scale(1.006) !important;
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(199,167,108,.38) !important;
  box-shadow:
    0 16px 34px rgba(7,17,31,.12),
    0 0 0 1px rgba(199,167,108,.14),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover::before,
#crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible::before {
  opacity: 1 !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:active,
#crystal-designer-app .cbd-gems-grid .cbd-gem.is-pressing {
  transform: translate3d(0, -1px, 0) scale(.982) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem.is-pressing {
  animation: cbd-gem-press-p0s 260ms var(--cbd-ease-luxury) both !important;
}

@keyframes cbd-gem-press-p0s {
  0% { transform: translate3d(0, -2px, 0) scale(1); }
  42% { transform: translate3d(0, 0, 0) scale(.982); }
  100% { transform: translate3d(0, -2px, 0) scale(1); }
}

#crystal-designer-app .cbd-gems-grid .cbd-gem-img {
  transform: translate3d(0,0,0) scale(1) !important;
  transition:
    transform 300ms var(--cbd-ease-luxury),
    filter 280ms var(--cbd-ease-luxury),
    opacity 240ms var(--cbd-ease-luxury) !important;
  will-change: transform, filter !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover .cbd-gem-img,
#crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible .cbd-gem-img {
  transform: translate3d(0, -1px, 0) scale(1.035) !important;
  filter:
    drop-shadow(0 9px 12px rgba(7,17,31,.17))
    drop-shadow(0 0 10px rgba(199,167,108,.18)) !important;
}

#crystal-designer-app .cbd-gem-detail-icon {
  transform: translate3d(0,0,0) scale(1) !important;
  transition:
    transform 260ms var(--cbd-ease-luxury),
    background 260ms var(--cbd-ease-luxury),
    border-color 260ms var(--cbd-ease-luxury),
    color 260ms var(--cbd-ease-luxury),
    box-shadow 260ms var(--cbd-ease-luxury),
    opacity 220ms var(--cbd-ease-luxury) !important;
  will-change: transform, background, box-shadow !important;
}

#crystal-designer-app .cbd-gem-detail-icon:hover,
#crystal-designer-app .cbd-gem-detail-icon:focus-visible {
  transform: translate3d(0, -2px, 0) scale(1.06) !important;
  background: #101820 !important;
  border-color: rgba(16,24,32,.78) !important;
  color: #fff8ed !important;
  box-shadow:
    0 12px 24px rgba(7,17,31,.18),
    0 0 0 3px rgba(199,167,108,.14) !important;
}

#crystal-designer-app .cbd-gem-detail-icon:active {
  transform: translate3d(0, 0, 0) scale(.94) !important;
}

@media (prefers-reduced-motion: reduce) {
  #crystal-designer-app .cbd-tabs::before,
  #crystal-designer-app .cbd-tab,
  #crystal-designer-app .cbd-tab::after,
  #crystal-designer-app .cbd-gems-grid,
  #crystal-designer-app .cbd-gems-grid .cbd-gem,
  #crystal-designer-app .cbd-gems-grid .cbd-gem::before,
  #crystal-designer-app .cbd-gems-grid .cbd-gem-img,
  #crystal-designer-app .cbd-gem-detail-icon {
    animation: none !important;
    transition-duration: .001ms !important;
  }
}


/* ===== P0-T Bracelet Preview motion guard =====
   Emergency fix after p0s: keep all category/material animations, but never let
   preview items replay enter/fade/FLIP/position transitions during render.
   The SVG transform attributes remain the sole source of bracelet geometry. */
#crystal-designer-app .cbd-preview .cbd-preview-orbit,
#crystal-designer-app .cbd-preview .cbd-preview-track,
#crystal-designer-app .cbd-preview .cbd-preview-track-outer,
#crystal-designer-app .cbd-preview .cbd-preview-track-inner,
#crystal-designer-app .cbd-preview .cbd-preview-bead,
#crystal-designer-app .cbd-preview .cbd-preview-bead-premium,
#crystal-designer-app .cbd-preview .cbd-preview-bead-visual,
#crystal-designer-app .cbd-preview .cbd-preview-bead-img,
#crystal-designer-app .cbd-preview .cbd-preview-accessory-img,
#crystal-designer-app .cbd-preview .cbd-preview-charm-img,
#crystal-designer-app .cbd-preview .cbd-preview-spacer-img,
#crystal-designer-app .cbd-preview .cbd-preview-bead-glass,
#crystal-designer-app .cbd-preview .cbd-preview-bead-spark {
  transition: none !important;
  animation: none !important;
  animation-delay: 0ms !important;
}

#crystal-designer-app .cbd-preview .cbd-preview-bead.is-new-bead .cbd-preview-bead-visual,
#crystal-designer-app .cbd-preview .cbd-preview-bead-visual.is-entering,
#crystal-designer-app .cbd-preview .cbd-preview-bead.is-dropped .cbd-preview-bead-visual,
#crystal-designer-app .cbd-preview .cbd-preview-bead-visual.is-drop-settle,
#crystal-designer-app .cbd-preview .cbd-preview-bead.is-rolling .cbd-preview-bead-visual {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* ===== P0-U Library / Design render boundary guard =====
   Bracelet reorder/add/delete must not cause the left material library to move,
   flash, or replay its category/grid/card entrance animation. Category/search
   changes still use the existing scoped material animations. */
#crystal-designer-app .cbd-stone-panel {
  contain: layout paint !important;
  overflow-anchor: none !important;
}

#crystal-designer-app .cbd-stone-panel .cbd-tabs,
#crystal-designer-app .cbd-stone-panel .cbd-tabs-scroll,
#crystal-designer-app .cbd-stone-panel .cbd-gems-grid {
  overflow-anchor: none !important;
}

body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel,
body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-tabs,
body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-tabs-scroll,
body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-tab,
body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-gems-grid,
body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-gem,
body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-gem-img,
body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-gem-detail-icon,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-tabs,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-tabs-scroll,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-tab,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-gems-grid,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-gem,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-gem-img,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-gem-detail-icon {
  animation: none !important;
  transition-duration: .001ms !important;
  transition-delay: 0ms !important;
}

body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel,
body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-tabs,
body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-tabs-scroll,
body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-gems-grid,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-tabs,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-tabs-scroll,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-gems-grid {
  transform: none !important;
}

body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-gems-grid.is-entering,
body.cbd-is-reordering #crystal-designer-app .cbd-stone-panel .cbd-gems-grid.is-leaving,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-gems-grid.is-entering,
#crystal-designer-app.cbd-drag-active .cbd-stone-panel .cbd-gems-grid.is-leaving {
  opacity: 1 !important;
  transform: none !important;
  min-height: inherit !important;
}

/* ===== P0-V Stable bracelet drag overlay guard =====
   Drag reorder is now overlay-only while moving: no preview re-render, no
   placeholder clone, no layout transform transition. Existing preview items
   stay in place; the reorder is committed once on pointerup. */
html body .cbd-drag-ghost,
html body .cbd-drag-overlay {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translate(-50%, -50%) !important;
  opacity: .96 !important;
  margin: 0 !important;
  padding: 0 !important;
  contain: layout paint style !important;
  will-change: left, top !important;
  transition: none !important;
  animation: none !important;
}

html body .cbd-drag-ghost img,
html body .cbd-drag-overlay img,
html body .cbd-drag-ghost span,
html body .cbd-drag-overlay span {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  transition: none !important;
  animation: none !important;
}

html body #crystal-designer-app .cbd-preview [data-layout-ready="false"] {
  display: none !important;
}

html body #crystal-designer-app.cbd-drag-active .cbd-preview-bead.is-drag-source,
html body.cbd-is-reordering #crystal-designer-app .cbd-preview-bead.is-drag-source {
  opacity: .35 !important;
}

html body #crystal-designer-app.cbd-drag-active .cbd-preview-bead.is-delete-target {
  opacity: .28 !important;
}

body.cbd-is-reordering #crystal-designer-app .cbd-preview,
body.cbd-is-reordering #crystal-designer-app .cbd-preview *,
#crystal-designer-app.cbd-drag-active .cbd-preview,
#crystal-designer-app.cbd-drag-active .cbd-preview * {
  animation: none !important;
  transition: none !important;
  transition-delay: 0ms !important;
}

body.cbd-is-reordering #crystal-designer-app .cbd-preview-bead,
body.cbd-is-reordering #crystal-designer-app .cbd-preview-bead-premium,
body.cbd-is-reordering #crystal-designer-app .cbd-preview-bead-visual,
body.cbd-is-reordering #crystal-designer-app .cbd-preview-accessory-local,
#crystal-designer-app.cbd-drag-active .cbd-preview-bead,
#crystal-designer-app.cbd-drag-active .cbd-preview-bead-premium,
#crystal-designer-app.cbd-drag-active .cbd-preview-bead-visual,
#crystal-designer-app.cbd-drag-active .cbd-preview-accessory-local {
  animation: none !important;
  transition: none !important;
}

body.cbd-is-reordering #crystal-designer-app .cbd-preview-bead.is-drag-target,
#crystal-designer-app.cbd-drag-active .cbd-preview-bead.is-drag-target {
  opacity: 1 !important;

}

/* ===== p0w-v1 Bracelet Pointer Drag Manager hard guard =====
   Dragging bracelet items now uses one pointer manager only:
   no HTML5 drag ghost, no stage clone, no placeholder, no live reorder.
   The stage stays stable until pointerup commits one reorder. */
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview *,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead *,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead-visual,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-accessory-local {
  animation: none !important;
  transition: none !important;
}

html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead-premium,
html body.ms-is-bracelet-dragging #crystal-designer-app .ms-preview-item {
  transition: none !important;
  will-change: auto !important;
}

html body #crystal-designer-app .cbd-preview-bead.ms-drag-source,
html body #crystal-designer-app .cbd-preview-bead.is-drag-source,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead.ms-drag-source,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead.is-drag-source {
  opacity: .35 !important;

}

html body #crystal-designer-app .cbd-preview-bead.is-drop-target .cbd-preview-bead-visual,
html body #crystal-designer-app .cbd-preview-bead.is-drag-target .cbd-preview-bead-visual {

}

html body #crystal-designer-app .cbd-preview-bead[data-layout-ready="false"],
html body #crystal-designer-app .cbd-preview [data-layout-ready="false"] {
  display: none !important;
}


/* ===== p0x-v1 Bracelet Pointer Drag Manager final guard =====
   Restores bead/charm/spacer reorder while preventing mid-drag render, stage
   placeholder, native ghost, and unpositioned charm/spacer/bead residue. */
html body #crystal-designer-app .ms-preview-item,
html body #crystal-designer-app .cbd-preview-bead,
html body #crystal-designer-app .cbd-preview-bead-premium {
  pointer-events: auto !important;
  cursor: grab !important;
  -webkit-user-drag: none !important;
  touch-action: none !important;
}

html body #crystal-designer-app .ms-preview-item image,
html body #crystal-designer-app .ms-preview-item img,
html body #crystal-designer-app .cbd-preview-bead image,
html body #crystal-designer-app .cbd-preview-bead img {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

html body #crystal-designer-app .cbd-preview-hit,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-hit {
  pointer-events: all !important;
}

html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview *,
html body.ms-is-bracelet-dragging #crystal-designer-app .ms-preview-item,
html body.ms-is-bracelet-dragging #crystal-designer-app .ms-preview-item *,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead * {
  animation: none !important;
  transition: none !important;
  transition-delay: 0ms !important;
}

html body #crystal-designer-app .ms-preview-item.ms-drag-source,
html body #crystal-designer-app .cbd-preview-bead.ms-drag-source,
html body.ms-is-bracelet-dragging #crystal-designer-app .ms-preview-item.ms-drag-source,
html body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead.ms-drag-source {
  opacity: .35 !important;

  cursor: grabbing !important;
}

html body #crystal-designer-app .ms-preview-item.ms-drop-target .cbd-preview-bead-visual,
html body #crystal-designer-app .ms-preview-item.is-drop-target .cbd-preview-bead-visual,
html body #crystal-designer-app .cbd-preview-bead.ms-drop-target .cbd-preview-bead-visual,
html body #crystal-designer-app .cbd-preview-bead.is-drop-target .cbd-preview-bead-visual {

}


#crystal-designer-app .ms-item-just-added {
  animation: msPreviewItemAddIn 240ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  transform-box: fill-box !important;
  transform-origin: center center !important;
}

@keyframes msPreviewItemAddIn {
  from {
    opacity: 0;
    transform: scale(.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

body.ms-is-bracelet-dragging #crystal-designer-app .ms-item-just-added {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

#crystal-designer-app .ms-preview-item.ms-drop-target .cbd-preview-bead-visual image,
#crystal-designer-app .ms-preview-item.is-drop-target .cbd-preview-bead-visual image,
#crystal-designer-app .cbd-preview-bead.ms-drop-target .cbd-preview-bead-visual image,
#crystal-designer-app .cbd-preview-bead.is-drop-target .cbd-preview-bead-visual image {
  transform: scale(1.025) !important;
  transform-box: fill-box !important;
  transform-origin: center center !important;
}

#crystal-designer-app .cbd-gems-grid {
  scroll-behavior: smooth !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(16,24,32,.18) transparent !important;
  overflow-anchor: none !important;
}

#crystal-designer-app .cbd-gems-grid::-webkit-scrollbar {
  width: 6px !important;
}

#crystal-designer-app .cbd-gems-grid::-webkit-scrollbar-thumb {
  background: rgba(16,24,32,.18) !important;
  border-radius: 999px !important;
}

#crystal-designer-app .cbd-gems-grid::-webkit-scrollbar-track {
  background: transparent !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem {
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover,
#crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(7,17,31,.10), 0 0 0 1px rgba(199,167,108,.12) !important;
  border-color: rgba(199,167,108,.42) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem-img {
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#crystal-designer-app .cbd-gems-grid .cbd-gem:hover .cbd-gem-img,
#crystal-designer-app .cbd-gems-grid .cbd-gem:focus-visible .cbd-gem-img {
  transform: scale(1.025) !important;
}

#crystal-designer-app .cbd-gem-detail-icon {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#crystal-designer-app .cbd-gem-detail-icon:hover,
#crystal-designer-app .cbd-gem-detail-icon:focus-visible {
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 8px 18px rgba(7,17,31,.12) !important;
}

/* p0z-v1 target highlight also covers charm/spacer SVG image nodes. */
#crystal-designer-app .ms-preview-item.ms-drop-target .cbd-preview-accessory-img,
#crystal-designer-app .ms-preview-item.is-drop-target .cbd-preview-accessory-img,
#crystal-designer-app .cbd-preview-bead.ms-drop-target .cbd-preview-accessory-img,
#crystal-designer-app .cbd-preview-bead.is-drop-target .cbd-preview-accessory-img {
  transform: scale(1.025) !important;
  transform-box: fill-box !important;
  transform-origin: center center !important;
}


/* ===== p1c-v1: ON-WRIST 1:1 bracelet drag overlay for bead / charm / spacer =====
   Drag overlay size comes from the visible on-wrist item rect in JS.
   For beads this uses the visible bead circle, not the oversized clipped texture image.
   No natural size, no material size, no slot size, no max-size, no scale. */
html body .ms-bracelet-drag-overlay,
html body.ms-is-bracelet-dragging .ms-bracelet-drag-overlay {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  overflow: visible !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
  transform: translate3d(var(--drag-x, -9999px), var(--drag-y, -9999px), 0) !important;
  will-change: transform !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  animation: none !important;
  transition: none !important;
  contain: none !important;
}

html body .ms-bracelet-drag-overlay-inner,
html body.ms-is-bracelet-dragging .ms-bracelet-drag-overlay-inner {
  display: block !important;
  overflow: visible !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
}

html body .ms-bracelet-drag-overlay img,
html body.ms-is-bracelet-dragging .ms-bracelet-drag-overlay img {
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: visible !important;
  transform: none !important;
  transform-origin: center center !important;
  opacity: .96 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
  filter: drop-shadow(0 10px 22px rgba(7,17,31,.18)) !important;
  animation: none !important;
  transition: none !important;
}


/* add-fly-uploadbase-p1h-v1: safe add-item fly animation only. No layout / slot / drag data changes. */
#crystal-designer-app .ms-item-arriving-hidden,
#crystal-designer-app .ms-item-arriving-hidden * {
  visibility: hidden !important;
}

body .cbd-add-fly-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 999999;
  overflow: visible !important;
  transform-origin: top left;
  will-change: transform, width, height, left, top;
}

body .cbd-add-fly-overlay img,
body .cbd-add-fly-overlay .cbd-add-fly-overlay-fallback {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 12px 24px rgba(7, 17, 31, 0.16));
}

body .cbd-add-fly-overlay .cbd-add-fly-overlay-fallback {
  border-radius: 999px;
}


/* add-fly-fixedsize-uploadbase-p1m-v1: add fly uses fixed final on-wrist size from start to finish. */
#crystal-designer-app .ms-item-just-added {
  animation: msPreviewItemFadeInFixedSizeP1M 180ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  transform: none !important;
  transform-origin: center center !important;
}

@keyframes msPreviewItemFadeInFixedSizeP1M {
  from {
    opacity: .86;
  }
  to {
    opacity: 1;
  }
}

body .cbd-add-fly-overlay {
  transform-origin: top left !important;
}

body .cbd-add-fly-overlay img,
body .cbd-add-fly-overlay .cbd-add-fly-overlay-fallback {
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}


/* drop-rotate-uploadbase-p1n-v1: drop rotation transition only. No scale, no layout transition, no external overlay. */
#crystal-designer-app .ms-preview-item [class*="cbd-preview-"] {
  transform-box: fill-box;
  transform-origin: center center;
}

body.ms-is-bracelet-dragging #crystal-designer-app .ms-preview-item [class*="cbd-preview-"] {
  animation: none !important;
  transition: none !important;
}


/* drop-rotate-all-uploadbase-p1o-v1: extend drop rotation transition to charm and spacer local groups. */
#crystal-designer-app .cbd-preview-accessory-local,
#crystal-designer-app .cbd-preview-charm-local,
#crystal-designer-app .cbd-preview-spacer-local {
  transform-origin: 0 0;
}

body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-accessory-local,
body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-charm-local,
body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-spacer-local {
  transition: none !important;
  animation: none !important;
}


/* drop-rotate-dragged-uploadbase-p1p-v1: drop rotation is limited to the dragged item only. Other shifted items do not rotate. */


/* drop-move-bead-layer-uploadbase-p1w-v1: real SVG bead motion layer. Movement happens before bead layout rotate. */
#crystal-designer-app .cbd-preview-motion-layer,
#crystal-designer-app .cbd-preview-bead-motion-layer,
#crystal-designer-app .cbd-preview-bead-layout {
  transform-box: fill-box;
  transform-origin: center center;
}

body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-motion-layer,
body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead-motion-layer,
body.ms-is-bracelet-dragging #crystal-designer-app .cbd-preview-bead-layout {
  animation: none !important;
  transition: none !important;
}

/* mobile-ratio-10-50-40-p2r-v1
   Mobile screen ratio lock:
   top header 10%, middle preview 50%, bottom materials 40%.
   JS unchanged. PC/default CSS before mobile-dom-layout block unchanged. */
@media (max-width: 768px) {
  html,
  body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background: #fbfaf7 !important;
  }

  body:has(#crystal-designer-app) {
    overflow: hidden !important;
    background: #fbfaf7 !important;
  }

  #crystal-designer-app,
  #crystal-designer-app * {
    box-sizing: border-box !important;
  }

  #crystal-designer-app {
    width: 100vw !important;
    height: var(--cbd-vh, 100dvh) !important;
    min-height: 100svh !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    overflow: hidden !important;
    background: #fbfaf7 !important;
    color: #101820 !important;
  }

  /* The real mobile page is now one strict 3-row screen. */
  #crystal-designer-app .cbd-mobile-layout-root,
  #crystal-designer-app .cbd-mobile-layout-p2j {
    width: 100% !important;
    height: var(--cbd-vh, 100dvh) !important;
    min-height: 100svh !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: minmax(72px, 10fr) minmax(330px, 50fr) minmax(250px, 40fr) !important;
    grid-template-columns: 100% !important;
    background: #fbfaf7 !important;
  }

  /* Allow children inside shell to become row 2 and row 3 of the page grid. */
  #crystal-designer-app .cbd-mobile-shell {
    display: contents !important;
  }

  /* ===== TOP 10% ===== */
  #crystal-designer-app .cbd-mobile-header {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: env(safe-area-inset-top) 10px 6px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 154px !important;
    gap: 6px !important;
    align-items: center !important;
    position: relative !important;
    z-index: 90 !important;
    overflow: hidden !important;
    background: rgba(251,250,247,.96) !important;
    border-bottom: 1px solid rgba(16,24,32,.08) !important;
    box-shadow: 0 8px 18px rgba(7,17,31,.045) !important;
  }

  #crystal-designer-app .cbd-mobile-header-back {
    grid-column: 1 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    color: #101820 !important;
    background: rgba(255,255,255,.84) !important;
    border: 1px solid rgba(16,24,32,.08) !important;
    box-shadow: 0 8px 18px rgba(7,17,31,.07) !important;
    text-decoration: none !important;
  }

  #crystal-designer-app .cbd-mobile-header-back svg {
    width: 30px !important;
    height: 30px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  #crystal-designer-app .cbd-mobile-header-title {
    grid-column: 2 !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: 33px 13px !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-mobile-logo-text {
    display: block !important;
    font-family: Georgia, "Times New Roman", "Cormorant Garamond", serif !important;
    font-size: clamp(28px, 7.1vw, 38px) !important;
    line-height: .92 !important;
    font-weight: 400 !important;
    letter-spacing: -.045em !important;
    color: #101820 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  #crystal-designer-app .cbd-mobile-header-title small {
    display: block !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    letter-spacing: .20em !important;
    text-transform: uppercase !important;
    color: rgba(16,24,32,.48) !important;
  }

  #crystal-designer-app .cbd-mobile-header-actions {
    grid-column: 3 !important;
    width: 154px !important;
    min-width: 154px !important;
    height: 58px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 50px) !important;
    gap: 1px !important;
    align-items: center !important;
    justify-content: end !important;
    overflow: visible !important;
  }

  #crystal-designer-app .cbd-mobile-header .cbd-mobile-top-btn,
  #crystal-designer-app .cbd-mobile-header .cbd-mobile-menu-btn {
    width: 50px !important;
    height: 58px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #101820 !important;
    display: grid !important;
    grid-template-rows: 34px 18px !important;
    place-items: center !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
  }

  #crystal-designer-app .cbd-mobile-header .cbd-mobile-top-btn svg {
    width: 29px !important;
    height: 29px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  #crystal-designer-app .cbd-mobile-header .cbd-mobile-menu-btn .cbd-mobile-more-icon {
    width: 31px !important;
    height: 31px !important;
    fill: #101820 !important;
    stroke: none !important;
  }

  #crystal-designer-app .cbd-mobile-header .cbd-mobile-menu-btn > span {
    display: none !important;
  }

  #crystal-designer-app .cbd-mobile-header .cbd-mobile-menu-btn em {
    display: block !important;
    font-style: normal !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    margin-top: -3px !important;
    color: #101820 !important;
  }

  /* ===== MIDDLE 50% ===== */
  #crystal-designer-app .cbd-mobile-preview-zone {
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
    overflow: hidden !important;
    background: #fbfaf7 !important;
  }

  #crystal-designer-app .cbd-mobile-preview-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 33%, rgba(255,255,255,0) 54%),
      linear-gradient(180deg, #fbfaf7 0%, #f8f1e7 100%) !important;
  }

  #crystal-designer-app .cbd-mobile-preview-card::before,
  #crystal-designer-app .cbd-mobile-preview-card::after {
    display: none !important;
    content: none !important;
  }

  /* Four corner controls are positioned against the middle area itself. */
  #crystal-designer-app .cbd-mobile-statusbar {
    position: absolute !important;
    top: 12px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    pointer-events: none !important;
    z-index: 40 !important;
  }

  #crystal-designer-app .cbd-mobile-fit,
  #crystal-designer-app .cbd-mobile-total {
    position: static !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: calc(50% - 8px) !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.16) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-mobile-fit span,
  #crystal-designer-app .cbd-mobile-total span,
  #crystal-designer-app .cbd-mobile-fit small,
  #crystal-designer-app .cbd-mobile-total small {
    display: none !important;
  }

  #crystal-designer-app .cbd-mobile-fit strong,
  #crystal-designer-app .cbd-mobile-total strong {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #101820 !important;
  }

  /* Bracelet is centered in the 50% middle area. */
  #crystal-designer-app .cbd-preview-stage {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: min(66vw, 315px) !important;
    height: min(66vw, 315px) !important;
    max-width: 315px !important;
    max-height: 315px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    z-index: 12 !important;
    pointer-events: auto !important;
  }

  #crystal-designer-app .cbd-preview-stage .cbd-preview-svg,
  #crystal-designer-app .cbd-preview-stage svg {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 315px !important;
    max-height: 315px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  #crystal-designer-app .cbd-preview-brand {
    opacity: .10 !important;
    pointer-events: none !important;
  }

  #crystal-designer-app .cbd-preview-zoom-indicator {
    display: none !important;
  }

  #crystal-designer-app .cbd-mobile-inspiration-btn,
  #crystal-designer-app .cbd-preview-trash {
    position: absolute !important;
    bottom: 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.16) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;

    z-index: 40 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-mobile-inspiration-btn {
    left: 12px !important;
    right: auto !important;
    width: 128px !important;
    max-width: calc(42% - 12px) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-overflow: ellipsis !important;
  }

  #crystal-designer-app .cbd-preview-trash {
    right: 12px !important;
    left: auto !important;
    width: 88px !important;
    max-width: calc(34% - 12px) !important;
  }

  #crystal-designer-app .cbd-preview-trash-copy small {
    display: none !important;
  }

  #crystal-designer-app .cbd-preview-trash-text {
    color: #101820 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  #crystal-designer-app .cbd-preview-trash-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px !important;
  }

  #crystal-designer-app .cbd-preview-trash-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #101820 !important;
  }

  #crystal-designer-app .cbd-mobile-camera-btn {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 12px !important;
    transform: translateX(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #101820 !important;
    color: #fff !important;
    box-shadow: none !important;
    z-index: 42 !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-mobile-camera-btn svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* ===== BOTTOM 40% ===== */
  #crystal-designer-app .cbd-mobile-materials-zone {
    grid-row: 3 !important;
    grid-column: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    background: #07111f !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-mobile-main-cats {
    grid-column: 1 !important;
    width: 96px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px 8px calc(18px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }

  #crystal-designer-app .cbd-mobile-main-cats::-webkit-scrollbar {
    display: none !important;
  }

  #crystal-designer-app .cbd-mobile-main-cat {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 54px !important;
    min-height: 54px !important;
    flex: 0 0 54px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
  }

  #crystal-designer-app .cbd-mobile-main-cat.active {
    background: #f8f5ef !important;
    color: #101820 !important;
    border-color: #f8f5ef !important;
  }

  #crystal-designer-app .cbd-mobile-materials-main {
    grid-column: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 44px 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px 10px 0 0 !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-search-wrap {
    grid-row: 1 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #crystal-designer-app .cbd-search {
    height: 44px !important;
    min-height: 44px !important;
    width: 100% !important;
    border-radius: 999px !important;
    padding: 0 15px !important;
    font-size: 15px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.92) !important;
    color: #101820 !important;
  }

  #crystal-designer-app .cbd-mobile-subcats {
    grid-row: 2 !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  #crystal-designer-app .cbd-mobile-subcats::-webkit-scrollbar {
    display: none !important;
  }

  #crystal-designer-app .cbd-mobile-subcat {
    height: 26px !important;
    min-height: 26px !important;
    line-height: 26px !important;
    flex: 0 0 auto !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  #crystal-designer-app .cbd-mobile-subcat.active {
    background: #f8f5ef !important;
    color: #101820 !important;
    border-color: #f8f5ef !important;
  }

  #crystal-designer-app .cbd-gems-grid {
    grid-row: 3 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom)) !important;
    align-content: start !important;
  }

  #crystal-designer-app .cbd-gem {
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
    grid-template-rows: 66px minmax(0, 1fr) !important;
    padding: 7px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    overflow: hidden !important;
    position: relative !important;
    text-align: center !important;
  }

  #crystal-designer-app .cbd-gem-img {
    width: 62px !important;
    height: 62px !important;
    object-fit: contain !important;
    border-radius: 999px !important;
    justify-self: center !important;
    align-self: center !important;
  }

  #crystal-designer-app .cbd-gem-meta b {
    display: block !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    max-height: 30px !important;
    overflow: hidden !important;
  }

  #crystal-designer-app .cbd-gem-meta small {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(255,255,255,.68) !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.88) !important;
    color: #101820 !important;
    z-index: 4 !important;
  }

  #crystal-designer-app .cbd-gem-detail-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  #crystal-designer-app .cbd-mobile-hidden-summary {
    display: none !important;
  }
}

@media (max-width: 380px) {
  #crystal-designer-app .cbd-mobile-layout-root,
  #crystal-designer-app .cbd-mobile-layout-p2j {
    grid-template-rows: minmax(70px, 10fr) minmax(315px, 50fr) minmax(250px, 40fr) !important;
  }

  #crystal-designer-app .cbd-mobile-header {
    grid-template-columns: 54px minmax(0, 1fr) 140px !important;
    padding-left: 8px !important;
    padding-right: 6px !important;
  }

  #crystal-designer-app .cbd-mobile-logo-text {
    font-size: 26px !important;
  }

  #crystal-designer-app .cbd-mobile-header-actions {
    width: 140px !important;
    min-width: 140px !important;
    grid-template-columns: repeat(3, 46px) !important;
  }

  #crystal-designer-app .cbd-mobile-header .cbd-mobile-top-btn,
  #crystal-designer-app .cbd-mobile-header .cbd-mobile-menu-btn {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    font-size: 10px !important;
  }

  #crystal-designer-app .cbd-preview-stage {
    width: min(62vw, 282px) !important;
    height: min(62vw, 282px) !important;
    max-width: 282px !important;
    max-height: 282px !important;
  }

  #crystal-designer-app .cbd-mobile-inspiration-btn {
    width: 112px !important;
    font-size: 12px !important;
  }

  #crystal-designer-app .cbd-preview-trash {
    width: 78px !important;
    min-width: 78px !important;
  }

  #crystal-designer-app .cbd-mobile-materials-zone {
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }

  #crystal-designer-app .cbd-mobile-main-cats {
    width: 86px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  #crystal-designer-app .cbd-mobile-main-cat {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    font-size: 11px !important;
  }
}

/* mobile-final-namespace-p2s-v1
   Final mobile namespace override.
   This layer is intentionally high specificity to beat old leftover mobile CSS:
   html body #crystal-designer-app .cbd-mobile-ui-final ...
   PC does not have .cbd-mobile-ui-final, so PC is not affected. */
@media (max-width: 768px) {
  html body #crystal-designer-app .cbd-mobile-ui-final {
    width: 100vw !important;
    height: var(--cbd-vh, 100dvh) !important;
    min-height: 100svh !important;
    max-height: var(--cbd-vh, 100dvh) !important;
    display: grid !important;
    grid-template-rows: 10fr 50fr 40fr !important;
    grid-template-columns: 100% !important;
    overflow: hidden !important;
    background: #fbfaf7 !important;
    color: #101820 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 154px !important;
    align-items: center !important;
    gap: 6px !important;
    padding: env(safe-area-inset-top) 10px 6px !important;
    overflow: hidden !important;
    background: rgba(251,250,247,.96) !important;
    border-bottom: 1px solid rgba(16,24,32,.08) !important;
    box-shadow: 0 8px 18px rgba(7,17,31,.045) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header-back {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.84) !important;
    border: 1px solid rgba(16,24,32,.08) !important;
    box-shadow: 0 8px 18px rgba(7,17,31,.07) !important;
    color: #101820 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header-back svg {
    width: 30px !important;
    height: 30px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header-title {
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: 33px 13px !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-logo-text {
    display: block !important;
    font-family: Georgia, "Times New Roman", "Cormorant Garamond", serif !important;
    font-size: clamp(28px, 7.1vw, 38px) !important;
    line-height: .92 !important;
    font-weight: 400 !important;
    letter-spacing: -.045em !important;
    color: #101820 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header-title small {
    display: block !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    letter-spacing: .20em !important;
    text-transform: uppercase !important;
    color: rgba(16,24,32,.48) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header-actions {
    width: 154px !important;
    min-width: 154px !important;
    height: 58px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 50px) !important;
    gap: 1px !important;
    align-items: center !important;
    justify-content: end !important;
    overflow: visible !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header .cbd-mobile-top-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header .cbd-mobile-menu-btn {
    width: 50px !important;
    height: 58px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #101820 !important;
    display: grid !important;
    grid-template-rows: 34px 18px !important;
    place-items: center !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header .cbd-mobile-top-btn svg {
    width: 29px !important;
    height: 29px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.85 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header .cbd-mobile-menu-btn .cbd-mobile-more-icon {
    width: 31px !important;
    height: 31px !important;
    fill: #101820 !important;
    stroke: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header .cbd-mobile-menu-btn > span {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header .cbd-mobile-menu-btn em {
    display: block !important;
    font-style: normal !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    margin-top: -3px !important;
    color: #101820 !important;
  }

  /* Make shell transparent to root grid so preview/material become true row 2 and row 3. */
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-shell {
    display: contents !important;
  }

  /* Row 2: middle preview 50% */
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-zone {
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
    overflow: hidden !important;
    background: #fbfaf7 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 33%, rgba(255,255,255,0) 54%),
      linear-gradient(180deg, #fbfaf7 0%, #f8f1e7 100%) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-card::before,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-card::after {
    display: none !important;
    content: none !important;
  }

  /* Top left / top right */
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-statusbar {
    position: absolute !important;
    top: 12px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    pointer-events: none !important;
    z-index: 70 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total {
    position: static !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: calc(50% - 8px) !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.16) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total small {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total strong {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #101820 !important;
  }

  /* Bracelet stage centered in middle row */
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: min(66vw, 315px) !important;
    height: min(66vw, 315px) !important;
    max-width: 315px !important;
    max-height: 315px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    z-index: 30 !important;
    pointer-events: auto !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage svg {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 315px !important;
    max-height: 315px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-brand {
    opacity: .10 !important;
    pointer-events: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-zoom-indicator {
    display: none !important;
  }

  /* Bottom left / bottom center / bottom right */
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash {
    position: absolute !important;
    bottom: 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.16) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;

    z-index: 70 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn {
    left: 12px !important;
    right: auto !important;
    width: 128px !important;
    max-width: calc(42% - 12px) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-overflow: ellipsis !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash {
    right: 12px !important;
    left: auto !important;
    width: 88px !important;
    max-width: calc(34% - 12px) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-copy small {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-text {
    color: #101820 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #101820 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-camera-btn {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 12px !important;
    transform: translateX(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #101820 !important;
    color: #fff !important;
    box-shadow: none !important;
    z-index: 72 !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-camera-btn svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* Row 3: material bottom 40% */
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-zone {
    grid-row: 3 !important;
    grid-column: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    background: #07111f !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cats {
    grid-column: 1 !important;
    width: 96px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px 8px calc(18px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cats::-webkit-scrollbar {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cat {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 54px !important;
    min-height: 54px !important;
    flex: 0 0 54px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cat.active {
    background: #f8f5ef !important;
    color: #101820 !important;
    border-color: #f8f5ef !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main {
    grid-column: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 44px 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px 10px 0 0 !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-search-wrap {
    grid-row: 1 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-search {
    height: 44px !important;
    min-height: 44px !important;
    width: 100% !important;
    border-radius: 999px !important;
    padding: 0 15px !important;
    font-size: 15px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.92) !important;
    color: #101820 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-subcats {
    grid-row: 2 !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-subcats::-webkit-scrollbar {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-subcat {
    height: 26px !important;
    min-height: 26px !important;
    line-height: 26px !important;
    flex: 0 0 auto !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-subcat.active {
    background: #f8f5ef !important;
    color: #101820 !important;
    border-color: #f8f5ef !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-gems-grid {
    grid-row: 3 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom)) !important;
    align-content: start !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-gem {
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
    grid-template-rows: 66px minmax(0, 1fr) !important;
    padding: 7px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    overflow: hidden !important;
    position: relative !important;
    text-align: center !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-gem-img {
    width: 62px !important;
    height: 62px !important;
    object-fit: contain !important;
    border-radius: 999px !important;
    justify-self: center !important;
    align-self: center !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-gem-detail-icon {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.88) !important;
    color: #101820 !important;
    z-index: 4 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-gem-detail-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-hidden-summary {
    display: none !important;
  }
}

@media (max-width: 380px) {
  html body #crystal-designer-app .cbd-mobile-ui-final {
    grid-template-rows: 10fr 50fr 40fr !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header {
    grid-template-columns: 54px minmax(0, 1fr) 140px !important;
    padding-left: 8px !important;
    padding-right: 6px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-logo-text {
    font-size: 26px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header-actions {
    width: 140px !important;
    min-width: 140px !important;
    grid-template-columns: repeat(3, 46px) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header .cbd-mobile-top-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-header .cbd-mobile-menu-btn {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    font-size: 10px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage {
    width: min(62vw, 282px) !important;
    height: min(62vw, 282px) !important;
    max-width: 282px !important;
    max-height: 282px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn {
    width: 112px !important;
    font-size: 12px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash {
    width: 78px !important;
    min-width: 78px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-zone {
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cats {
    width: 86px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cat {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    font-size: 11px !important;
  }
}

/* mobile-middle-center-p2t-v1
   Middle-area correction only.
   Keeps 10/50/40 ratio from p2s, but forces the bracelet SVG into the true
   center of the middle area and locks the four corner controls to that area.
   Uses both mobile root selectors so old preview-stage rules cannot win. */
@media (max-width: 768px) {
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-preview-zone,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-zone {
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
    overflow: hidden !important;
    background: #fbfaf7 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-preview-card,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 34%, rgba(255,255,255,0) 56%),
      linear-gradient(180deg, #fbfaf7 0%, #f8f1e7 100%) !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-preview-card::before,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-preview-card::after,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-card::before,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-card::after {
    display: none !important;
    content: none !important;
  }

  /* Top corners: FIT / TOTAL. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-statusbar,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-statusbar {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    pointer-events: none !important;
    z-index: 80 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total {
    position: static !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(50% - 8px) !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.16) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit span,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total span,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit small,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total small {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total strong {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #101820 !important;
  }

  /* Bracelet: stage fills the safe center zone, SVG is flex-centered inside it. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-stage,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage {
    position: absolute !important;
    left: 0 !important;
    top: 42px !important;
    right: 0 !important;
    bottom: 56px !important;
    inset: 42px 0 56px 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 30 !important;
    pointer-events: auto !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-stage svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage svg {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: min(66vw, 308px) !important;
    height: min(66vw, 308px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 308px !important;
    max-height: 308px !important;
    margin: 0 auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-orbit,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-orbit {
    transform-origin: center center !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-brand,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-brand {
    opacity: .10 !important;
    pointer-events: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-zoom-indicator,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-zoom-indicator {
    display: none !important;
  }

  /* Bottom corners + camera. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-inspiration-btn,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash {
    position: absolute !important;
    bottom: 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.16) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;

    z-index: 80 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-inspiration-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn {
    left: 12px !important;
    right: auto !important;
    width: 128px !important;
    max-width: calc(42% - 12px) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-overflow: ellipsis !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash {
    right: 12px !important;
    left: auto !important;
    width: 88px !important;
    max-width: calc(34% - 12px) !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-copy small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-copy small {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-text,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-text {
    color: #101820 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-icon,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-icon svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #101820 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-camera-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-camera-btn {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 12px !important;
    transform: translateX(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #101820 !important;
    color: #fff !important;
    box-shadow: none !important;
    z-index: 82 !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-camera-btn svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-camera-btn svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}

@media (max-width: 380px) {
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-stage svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage svg {
    width: min(62vw, 278px) !important;
    height: min(62vw, 278px) !important;
    max-width: 278px !important;
    max-height: 278px !important;
  }
}

/* mobile-corner-controls-p2u-v1
   Final cleanup for middle-area corner controls only.
   Fixes truncated FIT/TOTAL text and Trash icon/text overlap.
   Keeps p2t middle layout and 10/50/40 ratio untouched. */
@media (max-width: 768px) {
  /* Top corner pills: readable label + value, no ellipsis-only display. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-statusbar,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-statusbar {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    pointer-events: none !important;
    z-index: 90 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total {
    position: static !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 112px !important;
    max-width: calc(50vw - 22px) !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 11px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.16) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;
    box-shadow: 0 5px 12px rgba(7,17,31,.035) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit span,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total span {
    display: inline-block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(16,24,32,.58) !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit span {
    font-size: 0 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit span::after,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit span::after {
    content: "FIT" !important;
    font-size: 10px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total span {
    font-size: 0 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total span::after,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total span::after {
    content: "TOTAL" !important;
    font-size: 10px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total strong {
    display: inline-block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 84px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #101820 !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit small,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total small {
    display: none !important;
  }

  /* Bottom-left Inspiration: clean text and no inherited oversized styles. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-inspiration-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn {
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    width: 148px !important;
    max-width: calc(44vw - 12px) !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.16) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 5px 12px rgba(7,17,31,.035) !important;
    z-index: 90 !important;
  }

  /* Bottom-center camera: keep compact icon, no black rectangle. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-camera-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-camera-btn {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 12px !important;
    transform: translateX(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #101820 !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(7,17,31,.10) !important;
    z-index: 92 !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-camera-btn svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-camera-btn svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Bottom-right Trash: icon and text never overlap. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash {
    right: 12px !important;
    left: auto !important;
    bottom: 12px !important;
    width: 118px !important;
    max-width: calc(38vw - 12px) !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.16) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    z-index: 90 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-icon,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-icon {
    position: static !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #101820 !important;
    transform: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-icon svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
    transform: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-copy,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-copy {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 64px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-text,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-text {
    display: inline-block !important;
    position: static !important;
    color: #101820 !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    transform: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-text::after,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-text::after {
    content: none !important;
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-copy small,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-copy small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash small {
    display: none !important;
  }
}

@media (max-width: 380px) {
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total {
    min-width: 104px !important;
    max-width: calc(50vw - 18px) !important;
    padding: 0 9px !important;
    gap: 5px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total strong {
    max-width: 74px !important;
    font-size: 12px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-inspiration-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn {
    width: 126px !important;
    font-size: 12px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash {
    width: 96px !important;
    gap: 5px !important;
  }
}

/* mobile-corner-neat-p2v-v1
   Make middle corner controls neat:
   no nested pills, no child borders/backgrounds, no trash icon/text overlap. */
@media (max-width: 768px) {
  /* TOP LEFT / TOP RIGHT outer pills */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total {
    position: static !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 124px !important;
    max-width: 156px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.14) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;
    box-shadow: 0 5px 12px rgba(7,17,31,.035) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  /* Remove old nested-pills from label/value children. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit span,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total span,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total strong {
    position: static !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: inherit !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit span,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total span {
    color: rgba(16,24,32,.56) !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit span {
    font-size: 0 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit span::after,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit span::after {
    content: "FIT" !important;
    font-size: 10px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total span,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total span {
    font-size: 0 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total span::after,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total span::after {
    content: "TOTAL" !important;
    font-size: 10px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total strong {
    color: #101820 !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 92px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit small,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total small {
    display: none !important;
  }

  /* Bottom-left Inspiration: single clean pill. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-inspiration-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn {
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    width: 156px !important;
    max-width: calc(44vw - 8px) !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.14) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 5px 12px rgba(7,17,31,.035) !important;
  }

  /* Bottom-center camera: single square, icon centered. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-camera-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-camera-btn {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 12px !important;
    transform: translateX(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 11px !important;
    border: 0 !important;
    background: #101820 !important;
    color: #fff !important;
    overflow: hidden !important;
    box-shadow: 0 6px 14px rgba(7,17,31,.10) !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-camera-btn svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-camera-btn svg,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-camera-btn svg *,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-camera-btn svg * {
    width: 20px !important;
    height: 20px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Bottom-right Trash: text-only clean pill to remove icon overlap completely. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash {
    right: 12px !important;
    left: auto !important;
    bottom: 12px !important;
    width: 128px !important;
    max-width: calc(40vw - 8px) !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.14) !important;
    background: rgba(255,255,255,.94) !important;
    color: #101820 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-icon,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-icon {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-copy,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-copy {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;

  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-text,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-text {
    position: static !important;
    display: inline-block !important;
    color: #101820 !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-copy small,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-copy small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash small {
    display: none !important;
  }
}

@media (max-width: 380px) {
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total {
    min-width: 112px !important;
    max-width: calc(50vw - 18px) !important;
    padding: 0 10px !important;
    gap: 5px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-total strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-fit strong,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-total strong {
    max-width: 74px !important;
    font-size: 12px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-inspiration-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn {
    width: 134px !important;
    font-size: 12px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash {
    width: 102px !important;
  }
}

/* mobile-bottom-controls-p2z-v1
   Clean final mobile bottom controls.
   Removes the p2w/p2x/p2y conflict chain and overrides old button rules with
   high-specificity mobile namespace selectors.
   Scope: Get Inspiration + Trash only. PC/JS/layout/bracelet untouched. */
@media (max-width: 768px) {
  /* Get Inspiration: smaller, clean, premium gradient, pure CSS sparkle cluster. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-inspiration-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn {
    position: absolute !important;
    left: 14px !important;
    right: auto !important;
    bottom: 14px !important;
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(199,167,108,.26) !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(249,245,236,.98) 54%, rgba(238,223,184,.72) 100%) !important;
    color: #07111f !important;
    box-shadow:
      0 8px 18px rgba(7,17,31,.065),
      inset 0 1px 0 rgba(255,255,255,.82) !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: -.015em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    z-index: 94 !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-inspiration-btn::before,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn::before {
    content: "✦" !important;
    position: relative !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #c7a76c !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    transform: none !important;
    filter: drop-shadow(0 1px 1px rgba(199,167,108,.14)) !important;
    text-shadow:
      -6px -4px 0 rgba(246,231,188,.95),
       6px -3px 0 rgba(199,167,108,.64),
       4px  6px 0 rgba(238,208,141,.86) !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-inspiration-btn::after,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn::after {
    content: none !important;
    display: none !important;
  }

  /* Trash: icon-only gold circular button with subtle breathing effect. */
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash:hover,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash:focus-visible,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash:active,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash.is-drop-active,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash:hover,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash:focus-visible,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash:active,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash.is-drop-active,
  html body #crystal-designer-app.cbd-trash-hover .cbd-mobile-ui-final .cbd-preview-trash,
  html body #crystal-designer-app.cbd-trash-hover .cbd-mobile-layout-root .cbd-preview-trash {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    bottom: 14px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(216,170,79,.34) !important;
    background:
      radial-gradient(circle at 32% 24%, #fff7dc 0%, #f4d88f 56%, #d8aa4f 100%) !important;
    color: #07111f !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    z-index: 94 !important;
    transform: none !important;
    animation: cbd-mobile-trash-breathe-p2z 1.9s ease-in-out infinite !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash::before,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash::after,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash::before,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash::after {
    content: none !important;
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-icon,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-icon {
    position: static !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;

    color: #07111f !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash svg,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-icon svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-icon svg {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    display: block !important;
    color: #07111f !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-copy,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash-text,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash small,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-copy,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash-text,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash small {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }

  @keyframes cbd-mobile-trash-breathe-p2z {
    0% {
      transform: translateY(0) scale(1) !important;
      box-shadow:
        0 8px 18px rgba(157,110,30,.16),
        inset 0 1px 0 rgba(255,255,255,.45) !important;
    }
    50% {
      transform: translateY(-1px) scale(1.035) !important;
      box-shadow:
        0 10px 21px rgba(157,110,30,.23),
        0 0 0 4px rgba(244,216,143,.10),
        inset 0 1px 0 rgba(255,255,255,.50) !important;
    }
    100% {
      transform: translateY(0) scale(1) !important;
      box-shadow:
        0 8px 18px rgba(157,110,30,.16),
        inset 0 1px 0 rgba(255,255,255,.45) !important;
    }
  }
}

@media (max-width: 380px) {
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-inspiration-btn,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-inspiration-btn {
    left: 12px !important;
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 11px !important;
    gap: 7px !important;
    font-size: 12px !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-trash:hover,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-trash:hover {
    right: 12px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
}

/* mobile-trash-reset-p2ab-v1
   Mobile trash UI reset + rebuild.
   This intentionally deletes the visual result of older trash styles using all: unset,
   then rebuilds the button to match the reference: white circle, grey trash icon,
   soft shadow. Camera placeholder is removed from mobile DOM and hidden here as backup. */
@media (max-width: 768px) {
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-camera-btn,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-camera-btn,
  html body #crystal-designer-app .cbd-mobile-preview-card .cbd-mobile-camera-btn,
  html body #crystal-designer-app .cbd-mobile-preview-zone .cbd-mobile-camera-btn,
  html body #crystal-designer-app button.cbd-mobile-camera-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash.cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash.cbd-preview-trash,
  html body #crystal-designer-app #cbd-preview-trash.cbd-preview-trash {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    right: 24px !important;
    left: auto !important;
    bottom: 14px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(142, 151, 165, 0.16) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    color: #8C96A3 !important;

    cursor: pointer !important;
    overflow: hidden !important;
    z-index: 96 !important;
    animation: cbd-mobile-trash-soft-pulse-p2ab 2.6s ease-in-out infinite !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash.cbd-preview-trash::before,
  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash.cbd-preview-trash::after,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash.cbd-preview-trash::before,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash.cbd-preview-trash::after,
  html body #crystal-designer-app #cbd-preview-trash.cbd-preview-trash::before,
  html body #crystal-designer-app #cbd-preview-trash.cbd-preview-trash::after {
    content: none !important;
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash .cbd-preview-trash-icon,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash .cbd-preview-trash-icon,
  html body #crystal-designer-app #cbd-preview-trash .cbd-preview-trash-icon {
    all: unset !important;
    box-sizing: border-box !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: grid !important;
    place-items: center !important;
    color: #8C96A3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash .cbd-preview-trash-icon svg,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash .cbd-preview-trash-icon svg,
  html body #crystal-designer-app #cbd-preview-trash .cbd-preview-trash-icon svg {
    all: unset !important;
    box-sizing: border-box !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    display: block !important;
    color: #8C96A3 !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash .cbd-preview-trash-copy,
  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash .cbd-preview-trash-text,
  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash small,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash .cbd-preview-trash-copy,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash .cbd-preview-trash-text,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash small,
  html body #crystal-designer-app #cbd-preview-trash .cbd-preview-trash-copy,
  html body #crystal-designer-app #cbd-preview-trash .cbd-preview-trash-text,
  html body #crystal-designer-app #cbd-preview-trash small {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash.cbd-preview-trash:active,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash.cbd-preview-trash:active,
  html body #crystal-designer-app #cbd-preview-trash.cbd-preview-trash:active {
    transform: translateY(1px) scale(0.98) !important;
  }

  @keyframes cbd-mobile-trash-soft-pulse-p2ab {
    0% {
      transform: translateY(0) scale(1);
      box-shadow:
        0 10px 24px rgba(7, 17, 31, 0.10),
        0 2px 6px rgba(7, 17, 31, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
    }
    50% {
      transform: translateY(-1px) scale(1.012);
      box-shadow:
        0 12px 27px rgba(7, 17, 31, 0.12),
        0 3px 8px rgba(7, 17, 31, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    }
    100% {
      transform: translateY(0) scale(1);
      box-shadow:
        0 10px 24px rgba(7, 17, 31, 0.10),
        0 2px 6px rgba(7, 17, 31, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
    }
  }
}

@media (max-width: 380px) {
  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash.cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash.cbd-preview-trash,
  html body #crystal-designer-app #cbd-preview-trash.cbd-preview-trash {
    right: 18px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }
}

/* mobile-trash-style-p2ac-v1
   Mobile trash visual polish only.
   Make the trash button slightly larger and closer to Moonsyl style:
   moon-ivory glass, champagne border/glow, deep navy icon. */
@media (max-width: 768px) {
  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash.cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash.cbd-preview-trash,
  html body #crystal-designer-app #cbd-preview-trash.cbd-preview-trash {
    right: 22px !important;
    bottom: 13px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(199, 167, 108, 0.26) !important;
    background:
      radial-gradient(circle at 32% 24%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.80) 34%, rgba(255,255,255,0) 56%),
      linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(248,245,239,0.98) 54%, rgba(239,229,207,0.92) 100%) !important;
    color: #101820 !important;

    animation: cbd-mobile-trash-moonsyl-pulse-p2ac 2.8s ease-in-out infinite !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash .cbd-preview-trash-icon,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash .cbd-preview-trash-icon,
  html body #crystal-designer-app #cbd-preview-trash .cbd-preview-trash-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    color: #101820 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash .cbd-preview-trash-icon svg,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash .cbd-preview-trash-icon svg,
  html body #crystal-designer-app #cbd-preview-trash .cbd-preview-trash-icon svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    color: #101820 !important;
    stroke: currentColor !important;
    stroke-width: 1.95 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash.cbd-preview-trash:active,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash.cbd-preview-trash:active,
  html body #crystal-designer-app #cbd-preview-trash.cbd-preview-trash:active {
    transform: translateY(1px) scale(0.97) !important;
  }

  @keyframes cbd-mobile-trash-moonsyl-pulse-p2ac {
    0% {
      transform: translateY(0) scale(1);
      box-shadow:
        0 12px 28px rgba(7, 17, 31, 0.115),
        0 0 0 1px rgba(255,255,255,0.52) inset,
        0 0 18px rgba(199, 167, 108, 0.10);
    }
    50% {
      transform: translateY(-1px) scale(1.018);
      box-shadow:
        0 14px 31px rgba(7, 17, 31, 0.14),
        0 0 0 1px rgba(255,255,255,0.60) inset,
        0 0 22px rgba(199, 167, 108, 0.16);
    }
    100% {
      transform: translateY(0) scale(1);
      box-shadow:
        0 12px 28px rgba(7, 17, 31, 0.115),
        0 0 0 1px rgba(255,255,255,0.52) inset,
        0 0 18px rgba(199, 167, 108, 0.10);
    }
  }
}

@media (max-width: 380px) {
  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash.cbd-preview-trash,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash.cbd-preview-trash,
  html body #crystal-designer-app #cbd-preview-trash.cbd-preview-trash {
    right: 18px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
}

/* mobile-size-picker-shadow-p2ah-v1
   Fixes:
   1) Mobile material cards no longer show size/price clutter for beads; they show Select size.
   2) Size picker buttons show each size with its price underneath.
   3) Mobile lower panel remains soft moon-ivory, not deep moon background.
   4) Preview shadows are applied with highest mobile namespace specificity and native SVG filter attrs from JS.
   PC card price lines are kept. */

/* PC + general card price readability */
#crystal-designer-app .cbd-gem-meta .cbd-gem-size-line,
#crystal-designer-app .cbd-gem-meta .cbd-gem-price-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#crystal-designer-app .cbd-gem-meta .cbd-gem-size-line {
  opacity: .72;
}

#crystal-designer-app .cbd-gem-meta .cbd-gem-price-line {
  margin-top: 2px;
  color: rgba(199, 167, 108, .96);
  font-weight: 800;
}

/* Size picker: size on top, price underneath. */
#crystal-designer-app .cbd-size-picker-popover .cbd-size-picker-options button,
.cbd-size-picker-popover .cbd-size-picker-options button {
  display: inline-grid !important;
  grid-template-rows: auto auto !important;
  place-items: center !important;
  gap: 3px !important;
  min-width: 70px !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
}

#crystal-designer-app .cbd-size-picker-popover .cbd-size-picker-options button span,
.cbd-size-picker-popover .cbd-size-picker-options button span {
  display: block !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}

#crystal-designer-app .cbd-size-picker-popover .cbd-size-picker-options button small,
.cbd-size-picker-popover .cbd-size-picker-options button small {
  display: block !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: rgba(199, 167, 108, .98) !important;
}

@media (max-width: 768px) {
  /* ===== Preview clarity: max specificity + native SVG filter attr in JS ===== */
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-track-outer,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-track-outer,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-orbit .cbd-preview-track-outer,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-orbit .cbd-preview-track-outer {
    stroke-width: 1.45px !important;
    stroke-opacity: .70 !important;
    vector-effect: non-scaling-stroke !important;

  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-track-inner,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-track-inner,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-orbit .cbd-preview-track-inner,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-orbit .cbd-preview-track-inner {
    stroke-width: .72px !important;
    stroke-opacity: .58 !important;
    vector-effect: non-scaling-stroke !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-bead-premium,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-bead-premium,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-motion-layer,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-motion-layer,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-bead-visual,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-bead-visual,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-accessory-local,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-accessory-local {

  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-bead-img,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-accessory-img,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-bead-color,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-charm-placeholder,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-spacer-color,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-bead-img,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-accessory-img,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-bead-color,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-charm-placeholder,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-spacer-color {

  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-svg .cbd-preview-bead-glass,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-svg .cbd-preview-bead-glass {
    opacity: .95 !important;
  }

  /* Trash drop feedback stronger. */
  html body #crystal-designer-app .cbd-mobile-ui-final #cbd-preview-trash.cbd-preview-trash.is-drop-active,
  html body #crystal-designer-app .cbd-mobile-layout-root #cbd-preview-trash.cbd-preview-trash.is-drop-active,
  html body #crystal-designer-app.cbd-trash-hover .cbd-mobile-ui-final #cbd-preview-trash.cbd-preview-trash,
  html body #crystal-designer-app.cbd-trash-hover .cbd-mobile-layout-root #cbd-preview-trash.cbd-preview-trash {
    transform: translateY(-5px) scale(1.16) !important;
    border-color: rgba(199,167,108,.58) !important;

  }

  /* ===== Lower material panel: soft moon-ivory style ===== */
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-zone,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-zone {
    all: unset !important;
    box-sizing: border-box !important;
    grid-row: 3 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
    color: #101820 !important;
    background:
      radial-gradient(circle at 88% 0%, rgba(199,167,108,.16) 0%, rgba(199,167,108,0) 34%),
      radial-gradient(circle at 18% 100%, rgba(201,184,216,.12) 0%, rgba(201,184,216,0) 36%),
      linear-gradient(180deg, #f8f5ef 0%, #efeae1 100%) !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow:
      0 -12px 28px rgba(7,17,31,.08),
      inset 0 1px 0 rgba(255,255,255,.70) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cats,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-main-cats {
    all: unset !important;
    box-sizing: border-box !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 13px 7px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cats::-webkit-scrollbar,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-main-cats::-webkit-scrollbar {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cat,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-main-cat {
    all: unset !important;
    box-sizing: border-box !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 50px !important;
    min-height: 50px !important;
    flex: 0 0 50px !important;
    display: grid !important;
    place-items: center !important;
    padding: 6px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(16,24,32,.09) !important;
    background: rgba(255,255,255,.52) !important;
    color: rgba(16,24,32,.64) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 11px !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cat.active,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-main-cat.active {
    background: linear-gradient(135deg, #101820 0%, #1b2836 100%) !important;
    color: #f8f5ef !important;
    border-color: rgba(199,167,108,.34) !important;
    box-shadow:
      0 8px 18px rgba(7,17,31,.16),
      inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main {
    all: unset !important;
    box-sizing: border-box !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 40px 30px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 12px 10px 0 2px !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-search-wrap,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-search-wrap {
    all: unset !important;
    box-sizing: border-box !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    display: block !important;
    position: relative !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-search,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-search {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    display: block !important;
    border-radius: 999px !important;
    padding: 0 15px 0 36px !important;
    border: 1px solid rgba(199,167,108,.22) !important;
    background:
      radial-gradient(circle at 16px 50%, rgba(16,24,32,.24) 0 5px, rgba(16,24,32,0) 6px),
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,245,239,.96) 100%) !important;
    color: #101820 !important;
    box-shadow: 0 7px 16px rgba(7,17,31,.08), inset 0 1px 0 rgba(255,255,255,.76) !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 40px !important;
    font-weight: 760 !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-subcats,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-subcats {
    all: unset !important;
    box-sizing: border-box !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-subcats::-webkit-scrollbar,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-subcats::-webkit-scrollbar {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-subcat,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-subcat {
    all: unset !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    height: 24px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16,24,32,.08) !important;
    background: rgba(255,255,255,.50) !important;
    color: rgba(16,24,32,.62) !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 820 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-subcat.active,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-subcat.active {
    background: linear-gradient(135deg, #101820 0%, #1b2836 100%) !important;
    border-color: rgba(199,167,108,.30) !important;
    color: #f8f5ef !important;
    box-shadow: 0 5px 12px rgba(7,17,31,.13) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gems-grid,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gems-grid {
    all: unset !important;
    box-sizing: border-box !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-content: start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gems-grid::-webkit-scrollbar,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gems-grid::-webkit-scrollbar {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
    display: grid !important;
    grid-template-rows: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 6px 5px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(16,24,32,.075) !important;
    background:
      radial-gradient(circle at 50% 12%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 48%),
      linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.50) 100%) !important;
    color: #101820 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.62),
      0 7px 16px rgba(7,17,31,.075) !important;
    overflow: hidden !important;
    text-align: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem:active,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem:active {
    transform: translateY(1px) scale(.985) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem-img,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem-img {
    all: unset !important;
    box-sizing: border-box !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 999px !important;
    justify-self: center !important;
    align-self: center !important;
    filter: drop-shadow(0 6px 8px rgba(7,17,31,.18)) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem--charm .cbd-gem-img,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem--charm .cbd-gem-img,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem--spacer .cbd-gem-img,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem--spacer .cbd-gem-img,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem--letter .cbd-gem-img,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem--letter .cbd-gem-img {
    border-radius: 12px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem-meta,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem-meta {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    row-gap: 2px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem-meta b,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem-meta b {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    color: #101820 !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    max-height: 22px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Mobile bead cards: don't show 6mm/8mm or prices on the card, just "Select size". */
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem--bead .cbd-gem-size-line,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem--bead .cbd-gem-size-line {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    margin-top: 3px !important;
    color: #9b7540 !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 9.2px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem--bead .cbd-gem-size-line::after,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem--bead .cbd-gem-size-line::after {
    content: "Select size" !important;
    font-size: 9.2px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem--bead .cbd-gem-price-line,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem--bead .cbd-gem-price-line {
    display: none !important;
  }

  /* Fixed-size materials may still show price only. */
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem:not(.cbd-gem--bead) .cbd-gem-size-line,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem:not(.cbd-gem--bead) .cbd-gem-size-line {
    display: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem:not(.cbd-gem--bead) .cbd-gem-price-line,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem:not(.cbd-gem--bead) .cbd-gem-price-line {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    margin-top: 3px !important;
    width: 100% !important;
    color: #9b7540 !important;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem-detail-icon,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem-detail-icon {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.88) !important;
    color: #101820 !important;
    box-shadow: 0 3px 8px rgba(7,17,31,.10) !important;
    z-index: 5 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem-detail-icon svg,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem-detail-icon svg {
    width: 11px !important;
    height: 11px !important;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.9 !important;
  }

  .cbd-floating-tooltip {
    width: min(250px, calc(100vw - 28px)) !important;
    max-width: min(250px, calc(100vw - 28px)) !important;
    padding: 11px !important;
    border-radius: 17px !important;
    box-shadow: 0 18px 44px rgba(7,17,31,.18), inset 0 1px 0 rgba(255,255,255,.78) !important;
  }

  .cbd-floating-tooltip b {
    font-size: 13px !important;
    line-height: 1.12 !important;
  }

  .cbd-floating-tooltip em {
    font-size: 10.5px !important;
    line-height: 1.34 !important;
  }

  .cbd-floating-tooltip img,
  .cbd-floating-tooltip video {
    max-height: 82px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 380px) {
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-zone,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-zone {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cats,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-main-cats {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cat,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-main-cat {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 48px !important;
    min-height: 48px !important;
    flex-basis: 48px !important;
    font-size: 10.4px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main {
    grid-template-rows: 38px 28px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 11px 9px 0 0 !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-search,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-search {
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    font-size: 13.5px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gems-grid,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gems-grid {
    gap: 6px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    grid-template-rows: 50px minmax(0, 1fr) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem-img,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem-img {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }
}

/* preview-hard-no-shadow-p2ar-v1
   Absolute clean baseline: no visible shadow effect anywhere inside the center preview.
   Applies to PC and mobile. This intentionally resets filter / box-shadow / text-shadow
   on the preview container, SVG, bracelet pieces, overlays, trash, hover, drag, rolling,
   dropped and all child pseudo-elements. Left library, right summary, cart and backend are untouched. */
html body #crystal-designer-app .cbd-preview,
html body #crystal-designer-app .cbd-preview *,
html body #crystal-designer-app .cbd-preview::before,
html body #crystal-designer-app .cbd-preview::after,
html body #crystal-designer-app .cbd-preview *::before,
html body #crystal-designer-app .cbd-preview *::after,
html body #crystal-designer-app.cbd-drag-active .cbd-preview *,
html body #crystal-designer-app.cbd-trash-hover .cbd-preview *,
html body #crystal-designer-app .cbd-preview-bead,
html body #crystal-designer-app .cbd-preview-bead:hover,
html body #crystal-designer-app .cbd-preview-bead.is-rolling,
html body #crystal-designer-app .cbd-preview-bead.is-dropped,
html body #crystal-designer-app .cbd-preview-bead.is-drag-source,
html body #crystal-designer-app .cbd-preview-bead.is-drag-target,
html body #crystal-designer-app .cbd-preview-bead.is-delete-target,
html body #crystal-designer-app .cbd-preview-trash,
html body #crystal-designer-app .cbd-preview-trash *,
html body #crystal-designer-app .cbd-preview-trash::before,
html body #crystal-designer-app .cbd-preview-trash::after,
html body #crystal-designer-app .cbd-drag-ghost,
html body #crystal-designer-app .cbd-drag-ghost *,
html body .cbd-drag-ghost,
html body .cbd-drag-ghost * {
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #crystal-designer-app .cbd-preview::after,
html body #crystal-designer-app .cbd-preview-natural-shadow,
html body #crystal-designer-app .cbd-preview-bead-natural-shadow,
html body #crystal-designer-app .cbd-preview-spacer-natural-shadow,
html body #crystal-designer-app .cbd-preview-charm-natural-shadow,
html body #crystal-designer-app .cbd-preview-bead-soft-glow,
html body #crystal-designer-app .cbd-preview-bead-shadow,
html body #crystal-designer-app .cbd-preview-cast-shadow,
html body #crystal-designer-app .cbd-preview [class*="natural-shadow"],
html body #crystal-designer-app .cbd-preview [class*="cast-shadow"],
html body #crystal-designer-app .cbd-preview [class*="soft-glow"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  fill-opacity: 0 !important;
  stroke-opacity: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview *,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview::before,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview::after,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview *,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview::before,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview::after {
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview::after,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview::after,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview [class*="natural-shadow"],
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview [class*="natural-shadow"],
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview [class*="cast-shadow"],
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview [class*="cast-shadow"],
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview [class*="soft-glow"],
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview [class*="soft-glow"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    fill-opacity: 0 !important;
    stroke-opacity: 0 !important;
  }
}

/* preview-natural-directional-shadow-p2at-v1
   Stronger natural directional light with size-adaptive shadows.
   The only allowed filters are on the independent light layer: light-pool ellipses
   and blurred duplicate silhouettes for spacer/charm. Real bead/charm/spacer images
   still have no CSS drop-shadow / box-shadow. */
html body #crystal-designer-app .cbd-preview .cbd-preview-light-layer,
html body #crystal-designer-app .cbd-preview .cbd-preview-light-layer *,
html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview .cbd-preview-light-layer,
html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview .cbd-preview-light-layer *,
html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview .cbd-preview-light-layer,
html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview .cbd-preview-light-layer * {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-light-layer {
  mix-blend-mode: multiply !important;
  isolation: auto !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool,
html body #crystal-designer-app .cbd-preview .cbd-preview-shape-shadow {
  stroke: none !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
  pointer-events: none !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool--ambient {
  filter: url(#cbd-preview-directional-ambient-blur) !important;
  -webkit-filter: url(#cbd-preview-directional-ambient-blur) !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool--core {
  filter: url(#cbd-preview-directional-core-blur) !important;
  -webkit-filter: url(#cbd-preview-directional-core-blur) !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-shape-shadow {
  filter: url(#cbd-preview-directional-shape-blur) !important;
  -webkit-filter: url(#cbd-preview-directional-shape-blur) !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--charm .cbd-preview-light-pool--ambient,
html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--spacer .cbd-preview-light-pool--ambient {
  transform: translate(1px, 1px) scale(1.02) !important;
}

@media (max-width: 768px) {
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview .cbd-preview-light-pool--ambient,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview .cbd-preview-light-pool--ambient {
    filter: url(#cbd-preview-directional-ambient-blur) !important;
    -webkit-filter: url(#cbd-preview-directional-ambient-blur) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview .cbd-preview-light-pool--core,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview .cbd-preview-light-pool--core {
    filter: url(#cbd-preview-directional-core-blur) !important;
    -webkit-filter: url(#cbd-preview-directional-core-blur) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview .cbd-preview-shape-shadow,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview .cbd-preview-shape-shadow {
    filter: url(#cbd-preview-directional-shape-blur) !important;
    -webkit-filter: url(#cbd-preview-directional-shape-blur) !important;
  }
}


/* preview-light-material-separation-p2au-v1
   Light / white / transparent materials can disappear against the ivory preview.
   This adds a controlled separation layer behind selected pieces only: soft warm backing,
   a very fine low-opacity rim, and alpha-based backing for pale spacer/charm shapes.
   Real bead/charm/spacer images still keep filter:none and no CSS drop-shadow. */
html body #crystal-designer-app .cbd-preview .cbd-preview-clarity-layer,
html body #crystal-designer-app .cbd-preview .cbd-preview-clarity-layer *,
html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview .cbd-preview-clarity-layer,
html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview .cbd-preview-clarity-layer *,
html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview .cbd-preview-clarity-layer,
html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview .cbd-preview-clarity-layer * {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-clarity-layer {
  mix-blend-mode: multiply !important;
  isolation: auto !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-clarity-backing,
html body #crystal-designer-app .cbd-preview .cbd-preview-clarity-rim,
html body #crystal-designer-app .cbd-preview .cbd-preview-clarity-silhouette {
  pointer-events: none !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-clarity-silhouette,
html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview .cbd-preview-clarity-silhouette,
html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview .cbd-preview-clarity-silhouette {
  filter: url(#cbd-preview-clarity-alpha-backing) !important;
  -webkit-filter: url(#cbd-preview-clarity-alpha-backing) !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-clarity-node--soft {
  opacity: .92 !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-clarity-node--light {
  opacity: 1 !important;
}

@media (max-width: 768px) {
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview .cbd-preview-clarity-layer,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview .cbd-preview-clarity-layer {
    mix-blend-mode: multiply !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gem-img,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gem-img {
    background:
      radial-gradient(circle at 34% 24%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.74) 36%, rgba(239,233,222,.52) 72%, rgba(207,197,181,.26) 100%) !important;
    border: 1px solid rgba(16,24,32,.055) !important;
  }
}


/* ===== preview-dynamic-rail-size-p2av-v1 =====
   Dynamic bracelet rail sizing is handled in designer-widget.js.
   CSS intentionally keeps the p2au shadow + light-material separation visuals unchanged. */


/* ===== Moonsyl preview-mobile-resizable-panel-p2aw-v1 =====
   Mobile only. Adds a draggable lower material panel:
   bottom 10% / 40% / 70%, preview auto-fills 80% / 50% / 20%.
   PC layout and business logic are untouched. */
@media (max-width: 768px) {
  html body #crystal-designer-app {
    --cbd-mobile-panel-ratio: 40%;
    --cbd-mobile-preview-stage-size: 315px;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final {
    grid-template-rows: 10% calc(90% - var(--cbd-mobile-panel-ratio, 40%)) var(--cbd-mobile-panel-ratio, 40%) !important;
    transition: grid-template-rows .22s cubic-bezier(.2,.75,.25,1) !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-resizing .cbd-mobile-ui-final {
    transition: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-zone {
    min-height: 0 !important;
    height: 100% !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-card {
    min-height: 0 !important;
    height: 100% !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage {
    width: min(78vw, var(--cbd-mobile-preview-stage-size, 315px)) !important;
    height: min(78vw, var(--cbd-mobile-preview-stage-size, 315px)) !important;
    max-width: min(78vw, var(--cbd-mobile-preview-stage-size, 315px)) !important;
    max-height: min(78vw, var(--cbd-mobile-preview-stage-size, 315px)) !important;
    transition: width .22s cubic-bezier(.2,.75,.25,1), height .22s cubic-bezier(.2,.75,.25,1) !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-resizing .cbd-mobile-ui-final .cbd-preview-stage {
    transition: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-zone,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-zone {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 24px 24px 0 0 !important;
  }

  html body #crystal-designer-app .cbd-mobile-panel-resize-handle {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    left: 50% !important;
    top: 5px !important;
    width: 86px !important;
    height: 24px !important;
    transform: translateX(-50%) !important;
    z-index: 80 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    cursor: ns-resize !important;
    touch-action: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body #crystal-designer-app .cbd-mobile-panel-resize-handle span {
    width: 52px !important;
    height: 5px !important;
    border-radius: 999px !important;
    display: block !important;
    background: rgba(16,24,32,.34) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.68) !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-resizing .cbd-mobile-panel-resize-handle span {
    width: 62px !important;
    background: rgba(16,24,32,.56) !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-main-cats,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-main-cats {
    padding-top: 24px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main {
    padding-top: 24px !important;
    grid-template-rows: 38px 28px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-search,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-search {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 13px !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-subcats,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-subcats {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-compact .cbd-mobile-ui-final .cbd-mobile-materials-main,
  html body #crystal-designer-app.cbd-mobile-panel-compact .cbd-mobile-layout-root .cbd-mobile-materials-main {
    grid-template-rows: 34px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-compact .cbd-mobile-ui-final .cbd-mobile-subcats,
  html body #crystal-designer-app.cbd-mobile-panel-compact .cbd-mobile-layout-root .cbd-mobile-subcats {
    display: none !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-compact .cbd-mobile-ui-final .cbd-mobile-materials-main .cbd-gems-grid,
  html body #crystal-designer-app.cbd-mobile-panel-compact .cbd-mobile-layout-root .cbd-mobile-materials-main .cbd-gems-grid {
    grid-row: 2 !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-ui-final .cbd-preview-stage {
    width: min(68vw, var(--cbd-mobile-preview-stage-size, 180px)) !important;
    height: min(68vw, var(--cbd-mobile-preview-stage-size, 180px)) !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-ui-final .cbd-mobile-statusbar {
    top: 8px !important;
    height: 26px !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-ui-final .cbd-mobile-fit,
  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-ui-final .cbd-mobile-total {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 8px !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-ui-final .cbd-mobile-inspiration-btn,
  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-ui-final #cbd-preview-trash.cbd-preview-trash {
    bottom: 8px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-compact .cbd-mobile-ui-final .cbd-preview-stage {
    width: min(82vw, var(--cbd-mobile-preview-stage-size, 340px)) !important;
    height: min(82vw, var(--cbd-mobile-preview-stage-size, 340px)) !important;
  }
}


/* ===== Moonsyl preview-mobile-center-zoom-p2ax-v1 =====
   Mobile fixes only:
   1) Center the bracelet in the real safe middle preview area after the lower panel is resized.
   2) Keep the preview stage responsive while mobile zoom cap is raised in JS to 350%.
   PC layout is untouched. */
@media (max-width: 768px) {
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-zone,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-preview-zone {
    display: block !important;
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-mobile-preview-card,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-mobile-preview-card {
    display: block !important;
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-stage {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: clamp(34px, 8vh, 48px) !important;
    bottom: clamp(48px, 9vh, 64px) !important;
    inset: clamp(34px, 8vh, 48px) 0 clamp(48px, 9vh, 64px) 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 30 !important;
    pointer-events: auto !important;
  }

  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-stage svg,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-stage svg {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: min(82vw, var(--cbd-mobile-preview-stage-size, 315px)) !important;
    height: min(82vw, var(--cbd-mobile-preview-stage-size, 315px)) !important;
    max-width: min(82vw, var(--cbd-mobile-preview-stage-size, 315px)) !important;
    max-height: min(82vw, var(--cbd-mobile-preview-stage-size, 315px)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
    transform-origin: center center !important;
    overflow: visible !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-ui-final .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-ui-final .cbd-preview-stage svg,
  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-layout-root .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-layout-root .cbd-preview-stage svg {
    width: min(74vw, var(--cbd-mobile-preview-stage-size, 180px)) !important;
    height: min(74vw, var(--cbd-mobile-preview-stage-size, 180px)) !important;
    max-width: min(74vw, var(--cbd-mobile-preview-stage-size, 180px)) !important;
    max-height: min(74vw, var(--cbd-mobile-preview-stage-size, 180px)) !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-compact .cbd-mobile-ui-final .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app.cbd-mobile-panel-compact .cbd-mobile-ui-final .cbd-preview-stage svg,
  html body #crystal-designer-app.cbd-mobile-panel-compact .cbd-mobile-layout-root .cbd-preview-stage .cbd-preview-svg,
  html body #crystal-designer-app.cbd-mobile-panel-compact .cbd-mobile-layout-root .cbd-preview-stage svg {
    width: min(86vw, var(--cbd-mobile-preview-stage-size, 350px)) !important;
    height: min(86vw, var(--cbd-mobile-preview-stage-size, 350px)) !important;
    max-width: min(86vw, var(--cbd-mobile-preview-stage-size, 350px)) !important;
    max-height: min(86vw, var(--cbd-mobile-preview-stage-size, 350px)) !important;
  }
}


/* ===== Moonsyl preview-mobile-zoom-readout-p2ay-v1 =====
   Adds a visible zoom ratio reminder in the lower-middle of the preview area.
   Logic, dragging, panel resize, shadows, dynamic rail size and PC layout stay unchanged. */
#crystal-designer-app .cbd-preview-zoom-indicator {
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: 88px !important;
  z-index: 68 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 96px !important;
  height: 34px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  color: #101820 !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(199,167,108,.30) !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 8px) scale(.96) !important;
  transition: opacity .18s ease, transform .18s ease !important;
  white-space: nowrap !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

#crystal-designer-app .cbd-preview-zoom-indicator.show {
  opacity: 1 !important;
  transform: translate(-50%, 0) scale(1) !important;
}

@media (max-width: 768px) {
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-zoom-indicator,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-zoom-indicator {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: clamp(52px, 9vh, 72px) !important;
    z-index: 72 !important;
    display: inline-flex !important;
    min-width: 88px !important;
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(199,167,108,.32) !important;
    color: #101820 !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: translate(-50%, 8px) scale(.96) !important;
    pointer-events: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-zoom-indicator.show,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-zoom-indicator.show {
    opacity: 1 !important;
    transform: translate(-50%, 0) scale(1) !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-layout-root .cbd-preview-zoom-indicator,
  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-ui-final .cbd-preview-zoom-indicator {
    bottom: 42px !important;
    height: 28px !important;
    font-size: 11.5px !important;
  }
}


/* ===== Moonsyl preview-ios-zoom-readout-p2az-v1 =====
   Zoom readout stays in the lower-middle of the preview only while zooming.
   Toast notices can be dismissed by dragging in any of the four directions.
   This does not touch bracelet layout, shadows, panel resizing, cart, price or summary logic. */
#crystal-designer-app .cbd-preview-zoom-indicator {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 88px !important;
  z-index: 74 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 74px !important;
  height: 34px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  color: #101820 !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(199,167,108,.32) !important;
  box-shadow: 0 10px 28px rgba(16,24,32,.08) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 8px) scale(.96) !important;
  transition: opacity .18s ease, transform .18s ease !important;
  white-space: nowrap !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

#crystal-designer-app .cbd-preview-zoom-indicator.show {
  opacity: 1 !important;
  transform: translate(-50%, 0) scale(1) !important;
}

.cbd-toast.show {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grab !important;
  opacity: var(--cbd-toast-drag-opacity, 1) !important;
  transform:
    translate(calc(-50% + var(--cbd-toast-drag-x, 0px)), var(--cbd-toast-drag-y, 0px))
    scale(1) !important;
  transition: opacity .20s ease, transform .20s ease, visibility .20s ease !important;
  will-change: transform, opacity !important;
}

.cbd-toast.is-dragging {
  cursor: grabbing !important;
  transition: none !important;
}

.cbd-toast.is-swipe-dismiss,
.cbd-toast.is-dismissing.is-swipe-dismiss {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform:
    translate(calc(-50% + var(--cbd-toast-dismiss-x, 0px)), var(--cbd-toast-dismiss-y, 0px))
    scale(.94) !important;
  transition: opacity .24s ease, transform .24s ease, visibility .24s ease !important;
}

.cbd-toast:not(.show),
.cbd-toast.is-dismissing {
  pointer-events: none !important;
}

@media (max-width: 768px) {
  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-zoom-indicator,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-zoom-indicator {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: clamp(52px, 9vh, 72px) !important;
    z-index: 78 !important;
    display: inline-flex !important;
    min-width: 68px !important;
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    background: rgba(255,255,255,.90) !important;
    border: 1px solid rgba(199,167,108,.34) !important;
    color: #101820 !important;
    box-shadow: 0 8px 22px rgba(16,24,32,.08) !important;
    opacity: 0 !important;
    transform: translate(-50%, 8px) scale(.96) !important;
    pointer-events: none !important;
  }

  html body #crystal-designer-app .cbd-mobile-layout-root .cbd-preview-zoom-indicator.show,
  html body #crystal-designer-app .cbd-mobile-ui-final .cbd-preview-zoom-indicator.show {
    opacity: 1 !important;
    transform: translate(-50%, 0) scale(1) !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-layout-root .cbd-preview-zoom-indicator,
  html body #crystal-designer-app.cbd-mobile-panel-expanded .cbd-mobile-ui-final .cbd-preview-zoom-indicator {
    bottom: 42px !important;
    height: 28px !important;
    font-size: 11.5px !important;
  }
}


/* ===== Moonsyl preview-ios-zoom-readout-p2az-v1 =====
   Fixes iOS Safari not showing the zoom percentage during pinch.
   Android's existing in-preview readout stays unchanged; iOS gets a fixed body-level mirror. */
#crystal-designer-app .cbd-preview-zoom-indicator {
  visibility: hidden !important;
  -webkit-transform: translate(-50%, 8px) scale(.96) !important;
}

#crystal-designer-app .cbd-preview-zoom-indicator.show {
  visibility: visible !important;
  -webkit-transform: translate(-50%, 0) scale(1) !important;
}

body > .cbd-preview-zoom-indicator--floating {
  position: fixed !important;
  left: 50vw !important;
  top: 50vh !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483647 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 72px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  color: #101820 !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(199,167,108,.36) !important;
  box-shadow: 0 8px 22px rgba(16,24,32,.10) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, 8px) scale(.96) !important;
  -webkit-transform: translate(-50%, 8px) scale(.96) !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  white-space: nowrap !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  will-change: transform, opacity !important;
}

body > .cbd-preview-zoom-indicator--floating.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) scale(1) !important;
  -webkit-transform: translate(-50%, 0) scale(1) !important;
}


/* ===== Moonsyl preview-single-zoom-readout-p2ba-v1 =====
   iOS now uses only the body-level floating zoom readout; the in-preview readout stays for Android/desktop. */
body > .cbd-preview-zoom-indicator--floating {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

/* preview-accessory-shadow-soften-p2bb-v1
   Keep bead shadows unchanged, but make charm/spacer accessory silhouette and ellipse shadows lighter.
   JS already lowers fill-opacity; these rules prevent any older CSS from visually amplifying accessory shadows. */
html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--charm .cbd-preview-light-pool,
html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--spacer .cbd-preview-light-pool,
html body #crystal-designer-app .cbd-preview .cbd-preview-shape-shadow-group--charm .cbd-preview-shape-shadow,
html body #crystal-designer-app .cbd-preview .cbd-preview-shape-shadow-group--spacer .cbd-preview-shape-shadow {
  mix-blend-mode: multiply !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--charm .cbd-preview-light-pool--ambient,
html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--spacer .cbd-preview-light-pool--ambient {
  transform: translate(.5px, .5px) scale(1.005) !important;
}

/* ===== p2bc-v1: Disable long-press selection / image callout in Design Lab =====
   Scope only the Design Lab shell. Inputs/textareas are whitelisted. */
#crystalDesignLabPremiumShell,
#crystalDesignLabPremiumShell * ,
#crystal-designer-app,
#crystal-designer-app * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

#crystalDesignLabPremiumShell img,
#crystalDesignLabPremiumShell svg,
#crystalDesignLabPremiumShell image,
#crystal-designer-app img,
#crystal-designer-app svg,
#crystal-designer-app image {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

#crystalDesignLabPremiumShell input,
#crystalDesignLabPremiumShell textarea,
#crystalDesignLabPremiumShell select,
#crystalDesignLabPremiumShell [contenteditable="true"],
#crystal-designer-app input,
#crystal-designer-app textarea,
#crystal-designer-app select,
#crystal-designer-app [contenteditable="true"],
#crystal-designer-app .cbd-allow-select {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}


/* ===== Moonsyl Design Lab preview-orbit-rotate-p2bd-v1 =====
   Visual-only bracelet rail rotation. Do not affect material list, cart,
   summary, dynamic rail size, shadow, or zoom logic. */
#crystal-designer-app .cbd-preview-orbit-rotating .cbd-preview-stage,
#crystal-designer-app.cbd-preview-orbit-rotating .cbd-preview-stage {
  cursor: grabbing !important;
}

#crystal-designer-app .cbd-preview-orbit-rotating .cbd-preview-svg,
#crystal-designer-app.cbd-preview-orbit-rotating .cbd-preview-svg {
  touch-action: none !important;
}

#crystal-designer-app .cbd-preview-stage {
  cursor: grab;
}

#crystal-designer-app .cbd-preview-stage [data-preview-index],
#crystal-designer-app .cbd-preview-stage [data-preview-item-id] {
  cursor: grab !important;
}


/* ===== preview-final-svg-flyin-p2bf-v1 =====
   All material add animations use final on-wrist size from the first frame.
   No scale pop for bead / spacer / charm / future material types. */
body .cbd-add-fly-overlay,
body .cbd-add-fly-overlay.cbd-add-fly-overlay--fixed-size {
  width: var(--fly-w, auto);
  height: var(--fly-h, auto);
  overflow: visible !important;
  transform-origin: top left !important;
  will-change: transform, opacity !important;
}

body .cbd-add-fly-overlay-inner {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  transform-origin: center center !important;
  will-change: transform !important;
  animation: none !important;
  transition: none !important;
}

body .cbd-add-fly-overlay img,
body .cbd-add-fly-overlay .cbd-add-fly-overlay-fallback {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

#crystal-designer-app .ms-item-just-added,
#crystal-designer-app .ms-item-just-added * {
  transform: none !important;
  scale: 1 !important;
}

#crystal-designer-app .ms-item-just-added {
  animation: msPreviewMaterialFadeInFixedP2BE 140ms ease-out both !important;
  transform-box: fill-box !important;
  transform-origin: center center !important;
}

@keyframes msPreviewMaterialFadeInFixedP2BE {
  from { opacity: .92; }
  to { opacity: 1; }
}

.cbd-size-picker-popover {
  touch-action: manipulation !important;
}

.cbd-size-picker-popover .cbd-size-picker-options button {
  touch-action: manipulation !important;
}


/* ===== preview-final-svg-flyin-p2bf-v1 =====
   Fly-in ghost is now the final SVG preview item clone, not the material card image.
   This keeps bead / spacer / charm / future material types at the exact final size
   through the whole add animation and removes the final shrink. */
#crystal-designer-app .cbd-preview-fly-clone,
#crystal-designer-app .cbd-preview-fly-clone * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#crystal-designer-app .cbd-preview-fly-clone {
  overflow: visible !important;
  will-change: transform, opacity !important;
}

#crystal-designer-app .cbd-preview-fly-clone-turn {
  transform-origin: center center !important;
  will-change: transform !important;
}

#crystal-designer-app .cbd-preview-fly-clone-item,
#crystal-designer-app .cbd-preview-fly-clone-item * {
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
}

#crystal-designer-app .ms-item-arriving-hidden,
#crystal-designer-app .ms-item-arriving-hidden * {
  visibility: hidden !important;
}


/* ===== preview-charm-anchor-restore-p2bh-v1 =====
   Restores stable p2bf charm anchor/orientation behavior. No visual CSS changes. */

/* ===== Moonsyl More Drawer UI p2bk-v1 =====
   Balanced replacement for p2bj. Same isolated ms-more-* namespace.
   Goals:
   - Calmer proportions, less heavy title/code sizes.
   - No cramped copy button or visible harsh scrollbar.
   - Footer actions feel connected to the panel instead of covering content.
*/
.ms-more-overlay,
.ms-more-overlay * {
  box-sizing: border-box !important;
}

.ms-more-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  background:
    linear-gradient(90deg, rgba(7,17,31,.46) 0%, rgba(7,17,31,.28) 44%, rgba(7,17,31,.10) 100%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.02) !important;
  backdrop-filter: blur(8px) saturate(1.02) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.ms-more-overlay.ms-more-show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.ms-more-overlay.ms-more-hide {
  opacity: 0 !important;
  pointer-events: none !important;
}

.ms-more-panel {
  --ms-more-bg: #fbfaf7;
  --ms-more-card: rgba(255,255,255,.76);
  --ms-more-ink: #101820;
  --ms-more-soft: #f7f2e8;
  --ms-more-muted: rgba(16,24,32,.50);
  --ms-more-line: rgba(16,24,32,.09);
  --ms-more-gold: #c7a76c;
  position: relative !important;
  width: min(80vw, 340px) !important;
  max-width: calc(100vw - 48px) !important;
  height: var(--cbd-vh, 100dvh) !important;
  min-height: var(--cbd-vh, 100dvh) !important;
  max-height: var(--cbd-vh, 100dvh) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 0 !important;
  padding: max(18px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  color: var(--ms-more-ink) !important;
  background:
    radial-gradient(circle at 78% 8%, rgba(255,255,255,.86), transparent 20%),
    radial-gradient(circle at 8% 0%, rgba(199,167,108,.12), transparent 30%),
    linear-gradient(180deg, rgba(255,253,248,.97) 0%, rgba(248,245,239,.985) 48%, rgba(242,236,225,.99) 100%) !important;
  border-left: 1px solid rgba(199,167,108,.20) !important;
  border-top-left-radius: 30px !important;
  border-bottom-left-radius: 22px !important;
  box-shadow:
    -20px 0 58px rgba(7,17,31,.20),
    inset 1px 0 0 rgba(255,255,255,.74) !important;
  transform: translateX(20px) !important;
  transition: transform .22s cubic-bezier(.2,.82,.2,1) !important;
}

.ms-more-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 10px 10px auto auto !important;
  width: 118px !important;
  height: 118px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(199,167,108,.12), transparent 68%) !important;
  pointer-events: none !important;
}

.ms-more-show .ms-more-panel {
  transform: translateX(0) !important;
}

.ms-more-close {
  position: absolute !important;
  right: 16px !important;
  top: max(16px, env(safe-area-inset-top)) !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16,24,32,.085) !important;
  background: rgba(255,255,255,.76) !important;
  color: rgba(16,24,32,.58) !important;
  box-shadow: 0 10px 22px rgba(16,24,32,.055), inset 0 1px 0 rgba(255,255,255,.86) !important;
  cursor: pointer !important;
  transition: transform .17s ease, color .17s ease, background .17s ease, box-shadow .17s ease !important;
}

.ms-more-close svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
}

.ms-more-close:hover,
.ms-more-close:focus-visible {
  transform: rotate(4deg) scale(1.035) !important;
  color: #101820 !important;
  background: #fff !important;
  box-shadow: 0 14px 30px rgba(16,24,32,.09), 0 0 0 4px rgba(199,167,108,.09) !important;
}

.ms-more-head {
  position: relative !important;
  z-index: 1 !important;
  padding: 36px 50px 16px 0 !important;
}

.ms-more-head p {
  margin: 0 0 10px !important;
  color: rgba(16,24,32,.48) !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  font-weight: 920 !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
}

.ms-more-head h3 {
  margin: 0 !important;
  max-width: 240px !important;
  color: rgba(16,24,32,.70) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(29px, 7.1vw, 36px) !important;
  line-height: .98 !important;
  letter-spacing: -.062em !important;
  font-weight: 500 !important;
}

.ms-more-scroll {
  position: relative !important;
  z-index: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 0 12px 0 !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.ms-more-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.ms-more-code-card {
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  padding: 15px 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(16,24,32,.085) !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(255,255,255,.90), transparent 30%),
    rgba(255,255,255,.70) !important;
  box-shadow: 0 12px 28px rgba(16,24,32,.052), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.ms-more-code-card div {
  min-width: 0 !important;
}

.ms-more-code-card span,
.ms-more-share label {
  display: block !important;
  margin: 0 0 9px !important;
  color: rgba(16,24,32,.52) !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 930 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.ms-more-code-card strong {
  display: block !important;
  max-width: 100% !important;
  color: rgba(16,24,32,.74) !important;
  font-size: clamp(23px, 6.1vw, 27px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.ms-more-code-card button,
.ms-more-share-row button {
  appearance: none !important;
  border: 1px solid rgba(16,24,32,.11) !important;
  background: #101820 !important;
  color: #fff8ed !important;
  border-radius: 999px !important;
  min-height: 42px !important;
  padding: 0 15px !important;
  box-shadow: 0 12px 24px rgba(16,24,32,.13) !important;
  font-size: 13px !important;
  font-weight: 920 !important;
  cursor: pointer !important;
}

.ms-more-nav {
  display: grid !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
}

.ms-more-link {
  min-height: 56px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 9px 13px 9px 9px !important;
  border-radius: 19px !important;
  background: rgba(255,255,255,.66) !important;
  border: 1px solid rgba(16,24,32,.075) !important;
  color: var(--ms-more-ink) !important;
  box-shadow: 0 9px 21px rgba(16,24,32,.04), inset 0 1px 0 rgba(255,255,255,.76) !important;
  text-decoration: none !important;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.ms-more-link i {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  background: rgba(199,167,108,.115) !important;
  color: #8f6d2c !important;
}

.ms-more-link svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ms-more-link span {
  min-width: 0 !important;
  display: block !important;
}

.ms-more-link b {
  display: block !important;
  color: rgba(16,24,32,.74) !important;
  font-size: 15.5px !important;
  line-height: 1.08 !important;
  font-weight: 920 !important;
  letter-spacing: -.012em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ms-more-link small {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(16,24,32,.42) !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ms-more-link em {
  color: rgba(16,24,32,.30) !important;
  font-style: normal !important;
  font-size: 23px !important;
  line-height: 1 !important;
  font-weight: 340 !important;
}

.ms-more-link:hover,
.ms-more-link:focus-visible {
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(199,167,108,.24) !important;
  box-shadow: 0 14px 28px rgba(16,24,32,.07), 0 0 0 3px rgba(199,167,108,.075) !important;
}

.ms-more-share {
  margin: 0 !important;
  padding: 10px 0 0 !important;
}

.ms-more-share-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

.ms-more-share-row input {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16,24,32,.10) !important;
  background: rgba(255,255,255,.76) !important;
  color: rgba(16,24,32,.74) !important;
  padding: 0 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 7px 18px rgba(16,24,32,.035) !important;
  outline: none !important;
  font-size: 15px !important;
  font-weight: 780 !important;
}

.ms-more-share-row input::placeholder {
  color: rgba(16,24,32,.32) !important;
}

.ms-more-share-row input:focus {
  border-color: rgba(199,167,108,.54) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(199,167,108,.12), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.ms-more-share-row button {
  min-width: 76px !important;
}

.ms-more-actions {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(16,24,32,.075) !important;
  background:
    linear-gradient(180deg, rgba(248,245,239,0), rgba(248,245,239,.92) 26%, rgba(248,245,239,.99) 100%) !important;
}

.ms-more-save,
.ms-more-inspiration {
  appearance: none !important;
  width: 100% !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 15.5px !important;
  line-height: 1 !important;
  font-weight: 920 !important;
  letter-spacing: -.01em !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.ms-more-save {
  border: 1px solid rgba(16,24,32,.12) !important;
  background: rgba(255,255,255,.75) !important;
  color: rgba(16,24,32,.72) !important;
  box-shadow: 0 9px 20px rgba(16,24,32,.052), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.ms-more-inspiration {
  border: 1px solid rgba(199,167,108,.50) !important;
  background: linear-gradient(135deg, #d9b66e 0%, #b88e47 100%) !important;
  color: #fff8ed !important;
  box-shadow: 0 13px 27px rgba(133,94,35,.18), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.ms-more-code-card button:hover,
.ms-more-code-card button:focus-visible,
.ms-more-share-row button:hover,
.ms-more-share-row button:focus-visible,
.ms-more-save:hover,
.ms-more-save:focus-visible,
.ms-more-inspiration:hover,
.ms-more-inspiration:focus-visible {
  transform: translateY(-1px) !important;
  filter: brightness(1.025) !important;
}

.ms-more-code-card button:active,
.ms-more-share-row button:active,
.ms-more-save:active,
.ms-more-inspiration:active,
.ms-more-link:active {
  transform: scale(.975) !important;
}

@media (max-width: 420px) {
  .ms-more-panel {
    width: min(80vw, 330px) !important;
    max-width: calc(100vw - 52px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .ms-more-head {
    padding-top: 34px !important;
    padding-bottom: 14px !important;
  }

  .ms-more-head h3 {
    font-size: 31px !important;
    max-width: 220px !important;
  }

  .ms-more-link small {
    display: none !important;
  }

  .ms-more-code-card {
    min-height: 86px !important;
    padding: 14px 13px !important;
  }

  .ms-more-code-card strong {
    font-size: 24px !important;
    letter-spacing: .045em !important;
  }

  .ms-more-code-card button {
    min-height: 40px !important;
    padding: 0 13px !important;
  }
}

@media (max-height: 740px) {
  .ms-more-panel {
    padding-top: max(14px, env(safe-area-inset-top)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  .ms-more-head {
    padding-top: 30px !important;
    padding-bottom: 12px !important;
  }

  .ms-more-head p {
    margin-bottom: 8px !important;
    font-size: 11px !important;
  }

  .ms-more-head h3 {
    font-size: 29px !important;
  }

  .ms-more-code-card {
    min-height: 80px !important;
    margin-bottom: 10px !important;
  }

  .ms-more-code-card span,
  .ms-more-share label {
    margin-bottom: 7px !important;
    font-size: 10.5px !important;
  }

  .ms-more-nav {
    gap: 7px !important;
    margin-bottom: 12px !important;
  }

  .ms-more-link {
    min-height: 52px !important;
  }

  .ms-more-link i {
    width: 34px !important;
    height: 34px !important;
  }

  .ms-more-save,
  .ms-more-inspiration {
    min-height: 45px !important;
  }
}


/* ===== Moonsyl accessory-shadow-medium-p2bh-v1 =====
   Step 1 adjustment: keep bead shadows unchanged; make charm/spacer shadows medium-light. */
html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--charm,
html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--spacer {
  opacity: .94 !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-shape-shadow-group--charm,
html body #crystal-designer-app .cbd-preview .cbd-preview-shape-shadow-group--spacer {
  opacity: .84 !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--charm .cbd-preview-light-pool--ambient,
html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--spacer .cbd-preview-light-pool--ambient {
  transform: translate(.35px, .35px) scale(1) !important;
}

html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--charm .cbd-preview-light-pool--core,
html body #crystal-designer-app .cbd-preview .cbd-preview-light-pool-group--spacer .cbd-preview-light-pool--core {
  transform: scale(.985) !important;
}



/* ===== Moonsyl mobile-panel-recenter-p2bi-v1 =====
   Step 2 uses JS to re-center the bracelet after the mobile material panel is resized.
   No visual CSS changes are required in this step. */


/* ===== Moonsyl mobile-performance-p2bj-v1 =====
   Mobile-only performance mode: reduce expensive SVG filter work during gestures.
   PC visual quality remains unchanged. */
@media (max-width: 860px) {
  html body #crystal-designer-app.cbd-mobile-panel-resizing .cbd-preview-shape-shadow-group--charm,
  html body #crystal-designer-app.cbd-mobile-panel-resizing .cbd-preview-shape-shadow-group--spacer,
  html body #crystal-designer-app.cbd-drag-active .cbd-preview-shape-shadow-group--charm,
  html body #crystal-designer-app.cbd-drag-active .cbd-preview-shape-shadow-group--spacer {
    display: none !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-resizing .cbd-preview-light-pool-group--charm,
  html body #crystal-designer-app.cbd-mobile-panel-resizing .cbd-preview-light-pool-group--spacer,
  html body #crystal-designer-app.cbd-drag-active .cbd-preview-light-pool-group--charm,
  html body #crystal-designer-app.cbd-drag-active .cbd-preview-light-pool-group--spacer {
    opacity: .54 !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-resizing .cbd-preview-stage {
    will-change: transform !important;
  }

  html body #crystal-designer-app.cbd-mobile-panel-resizing .cbd-preview-svg {
    transform: translateZ(0) !important;
  }
}


/* ===== Moonsyl restore-reorder-motion-p2bk-v1 =====
   Keeps mobile performance optimizations, but restores immediate SVG render
   on drag-drop reorder so surrounding beads animate to their new positions. */