/* ============================================================
   MIND MATTER — 3D Stage, Customizer Panel, Dock, Placard
   ============================================================ */

/* ---------- THE WALL (Stage) ---------- */
/* Hero intro sits ABOVE the product editor — never inside it */
.stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding-bottom: 0;
  overflow: visible;
}
.stage-hero {
  width: 100%;
  max-width: min(560px, 92vw);
  margin: 0;
  padding: 96px clamp(18px, 4vw, 56px) 18px;
  position: relative; z-index: 3;
  align-self: flex-start;
  pointer-events: none;
}
.stage-hero .kicker { margin-bottom: 14px; }
.stage-hero .cta-row { pointer-events: auto; }
.stage-hero .lede {
  max-width: 48ch;
  margin-bottom: 0;
}
h1.display {
  font: 900 clamp(2rem, 4.8vw, 3.6rem)/1.02 var(--serif);
  letter-spacing: 0.015em; margin-bottom: 12px;
  text-shadow: 0 6px 60px rgba(0, 0, 0, 0.6);
}
h1.display .gold { color: var(--gold); text-shadow: 0 0 46px rgba(255, 45, 111, 0.32); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* Product editor box — 3D product + left placard + right customizer */
.stage-editor {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  width: 100%;
  min-height: min(78vh, 820px);
  height: min(78vh, 820px);
  margin: 0 0 8px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: rgba(5, 10, 20, 0.35);
  overflow: hidden;
  /* room for left studio rail — drawer kept narrow for render space */
  --studio-rail-w: 52px;
  --studio-drawer-w: 232px;
}

/* ---------- Studio rail + Files/Layers drawer (Gelato/Canva-style) ---------- */
.studio-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--studio-rail-w);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 10px 0;
  background: rgba(8, 12, 22, 0.94);
  border-right: 1px solid var(--hair);
  backdrop-filter: blur(10px);
}
.studio-rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 12px 4px;
  border: none;
  background: transparent;
  color: var(--ivory-dim);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.studio-rail-btn:hover {
  color: var(--ivory);
  background: rgba(255, 45, 111, 0.06);
}
.studio-rail-btn.on {
  color: var(--gold);
  background: rgba(255, 45, 111, 0.1);
  box-shadow: inset 2px 0 0 var(--gold);
}
.studio-rail-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.studio-rail-label {
  font: 600 8px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
}

.studio-drawer {
  position: absolute;
  left: var(--studio-rail-w);
  top: 0;
  bottom: 0;
  width: var(--studio-drawer-w);
  z-index: 11;
  display: flex;
  flex-direction: column;
  background: rgba(10, 15, 26, 0.97);
  border-right: 1px solid var(--hair);
  backdrop-filter: blur(14px);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  /* Desktop/tablet: hide when closed (no slide) */
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, visibility 0.18s;
}
.studio-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}
/* Handle + mobile tabs only matter on phone; hide on wider layouts */
.studio-sheet-handle { display: none; }
.studio-sheet-tabs { display: none; }
.studio-sheet-scrim {
  display: none;
}
.studio-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--hair);
  flex: none;
  flex-wrap: wrap;
}
.studio-drawer-title {
  font: 700 11px var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.studio-drawer-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.studio-icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: transparent;
  color: var(--ivory-dim);
  cursor: pointer;
  font-size: 12px;
  transition: 0.15s;
}
.studio-icon-btn:hover { color: var(--ivory); border-color: var(--hair-strong); }
.studio-icon-btn.on {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(255, 45, 111, 0.08);
}

.studio-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: #2a3a55 rgba(7, 12, 23, 0.6);
}
.studio-panel[hidden] { display: none !important; }
.studio-panel::-webkit-scrollbar { width: 8px; }
.studio-panel::-webkit-scrollbar-track { background: rgba(7, 12, 23, 0.55); }
.studio-panel::-webkit-scrollbar-thumb {
  background: #243248;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.studio-choose-file {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a3348, #1a2233);
  color: var(--ivory);
  font: 600 12px var(--sans);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: 0.15s;
}
.studio-choose-file:hover {
  background: linear-gradient(180deg, #35405a, #1e2840);
  color: #fff;
}
.studio-files-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 10px;
  flex-wrap: wrap;
}
.studio-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 10px;
  font: 400 12px var(--sans);
  color: var(--ivory-dim);
  cursor: pointer;
  user-select: none;
}
.studio-check-inline {
  margin: 0;
  font-size: 11px;
  flex: 1 1 auto;
  min-width: 0;
}
.studio-check input { accent-color: var(--gold); }
.studio-thumb-size {
  display: inline-flex;
  border: 1px solid var(--hair);
  border-radius: 6px;
  overflow: hidden;
  flex: none;
}
.studio-size-btn {
  width: 28px;
  height: 26px;
  border: none;
  border-right: 1px solid var(--hair);
  background: transparent;
  color: var(--ivory-dim);
  font: 700 10px var(--mono);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: 0.12s;
}
.studio-size-btn:last-child { border-right: none; }
.studio-size-btn:hover { color: var(--ivory); background: rgba(255,255,255,0.04); }
.studio-size-btn.on {
  color: var(--gold);
  background: rgba(255, 45, 111, 0.12);
}

.studio-thumbs {
  display: grid;
  gap: 8px;
}
/* Thumbnail density: S packs many, L is easy to scan */
.studio-thumbs.size-s {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.studio-thumbs.size-m {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.studio-thumbs.size-l {
  grid-template-columns: 1fr;
  gap: 8px;
}
.studio-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  cursor: grab;
  overflow: hidden;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.studio-thumb:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 45, 111, 0.25);
}
.studio-thumb.dragging { opacity: 0.55; cursor: grabbing; }
.studio-thumb.used::after {
  content: '✓';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 45, 111, 0.92);
  color: #fff;
  font: 700 9px var(--sans);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.studio-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: #0a0f18;
  pointer-events: none;
}
.studio-thumbs.size-l .studio-thumb {
  flex-direction: row;
  align-items: stretch;
}
.studio-thumbs.size-l .studio-thumb img {
  width: 72px;
  aspect-ratio: 1;
  flex: none;
}
.studio-thumbs.size-s .studio-thumb-name { display: none; }
.studio-thumbs.size-m .studio-thumb-name {
  display: block;
  padding: 3px 5px 5px;
  font: 400 8px var(--mono);
}
.studio-thumbs.size-l .studio-thumb-name {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  font: 400 11px var(--sans);
  color: var(--ivory);
  white-space: normal;
  line-height: 1.3;
  flex: 1;
}
.studio-thumb-name {
  display: block;
  padding: 4px 6px 6px;
  font: 400 9px var(--mono);
  color: var(--ivory-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-empty {
  margin: 14px 0 0;
  font: 400 12px/1.5 var(--sans);
  color: var(--ivory-dim);
}
.studio-hint {
  margin: 12px 0 0;
  font: 400 10px/1.45 var(--mono);
  color: var(--ivory-dim);
  opacity: 0.75;
  letter-spacing: 0.02em;
}

.studio-layers { display: flex; flex-direction: column; gap: 8px; }
.studio-layer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--ivory);
  cursor: pointer;
  text-align: left;
  transition: 0.15s;
}
.studio-layer-row:hover { border-color: var(--hair-strong); }
.studio-layer-row.active {
  border-color: var(--gold);
  background: rgba(255, 45, 111, 0.08);
}
.studio-layer-row.muted {
  cursor: default;
  color: var(--ivory-dim);
  font: 400 12px var(--sans);
}
.studio-layer-row.has-art .studio-layer-meta small {
  color: rgba(125, 206, 160, 0.95);
}
.studio-layer-dot.filled {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(255, 45, 111, 0.45);
}
.studio-layer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ivory-dim);
  flex: none;
}
.studio-layer-row.active .studio-layer-dot { background: var(--gold); box-shadow: 0 0 8px rgba(255, 45, 111, 0.6); }
.studio-layer-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.studio-layer-meta b { font: 600 12px var(--sans); }
.studio-layer-meta small {
  font: 400 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.studio-layer-badge {
  font: 700 8px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  flex: none;
}
.studio-layer-row.active .studio-layer-badge { color: var(--gold); }

#canvasStage.studio-drop-target,
.studio-drawer.studio-drop-target {
  outline: 1px dashed rgba(255, 45, 111, 0.55);
  outline-offset: -6px;
}

/*
 * stage-side: left chrome column — placard + face selector.
 * Flex stack so they never overlay; only occupies left strip of the stage.
 */
.stage-side {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 40vw);
  max-width: min(300px, 44vw);
  z-index: 6;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 20px 8px 14px calc(var(--studio-rail-w, 52px) + 14px);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto; /* scroll column if placard + minimap exceed stage height */
  transition: padding-left 0.2s ease;
}
.stage-side .placard,
.stage-side .cz-minimap {
  pointer-events: auto;
}

/* Placard in the left column — compact card, never squeezed into overlapping layers */
.stage-editor .placard {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  min-width: 0;
  max-width: min(280px, 100%);
  flex: 0 0 auto; /* size to content; don't crush children */
  max-height: none;
  overflow: visible;
  margin: 0;
}
/* Hide Now Hanging while Files/Layers drawer covers the left column */
.stage-editor.studio-rail-open .placard {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.2s, transform 0.2s;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
}
.stage-editor:not(.studio-rail-open) .placard {
  transition: opacity 0.2s, transform 0.2s;
}
/* When drawer open, shift left column past drawer (minimap stays usable) */
.stage-editor.studio-rail-open .stage-side {
  padding-left: calc(var(--studio-rail-w, 52px) + var(--studio-drawer-w, 232px) + 12px);
  width: min(340px, 48vw);
}

/* Dock: don't sit under rail */
.stage-editor .dock {
  left: calc(var(--studio-rail-w) + clamp(10px, 1.5vw, 18px));
}
.stage-floor { /* legacy alias if any JS still references it */
  position: relative; flex: 1; min-height: 500px; z-index: 2;
}
#canvasStage {
  position: absolute; inset: 0;
  z-index: 1;
  /* Clip all editor chrome (minimap, PFE, frames) to the product canvas only */
  overflow: hidden;
}
#canvasStage canvas {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: grab;
}
#canvasStage canvas:active { cursor: grabbing; }
#canvasStage canvas.is-hover:not(:active) { cursor: zoom-in; }

/* ---------- Stage tools under product (Turntable / Editor / light) ---------- */
.stage-bottom-tools {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(360px, calc(100% - var(--studio-rail-w, 52px) - 48px));
  max-width: 380px;
  pointer-events: none;
}
.stage-bottom-tools[hidden] {
  display: none !important;
}
.stage-tools-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  pointer-events: auto;
}
.stage-tools-btns .cz-toggle-btn,
.stage-tools-btns .cz-editor-btn {
  flex: 1 1 140px;
  min-width: 132px;
  max-width: 180px;
  background: rgba(8, 12, 22, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* Minimal remove — just ✕ next to Editor / Turntable */
.stage-tools-x {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 12, 22, 0.88);
  color: var(--ivory-dim);
  font: 700 16px/1 var(--sans);
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.stage-tools-x:hover:not(:disabled) {
  color: #ff6b8a;
  border-color: rgba(255, 45, 111, 0.45);
  background: rgba(255, 45, 111, 0.1);
}
.stage-tools-x:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.stage-tools-light {
  width: min(280px, 100%);
  pointer-events: auto;
  padding: 8px 12px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 12, 22, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.stage-tools-light .cz-slider-row {
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}
.stage-tools-light .cz-field-label {
  margin-bottom: 0;
  text-align: center;
}
.stage-tools-light .cz-slider-val {
  min-width: 2.6em;
  text-align: center;
}
.stage-tools-slider {
  width: 100%;
  display: block;
  margin: 0 auto;
}
/* Compact die-lines toggle under light slider */
.stage-tools-die {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  cursor: pointer;
  user-select: none;
}
.stage-tools-die input {
  width: 14px;
  height: 14px;
  accent-color: var(--gold, #ff2d6f);
  cursor: pointer;
  flex: none;
}
.stage-tools-die:hover {
  color: var(--ivory);
}
.stage-tools-die.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- Customizer Panel (right side of editor) ---------- */
/* Layout: fixed title + scrollable body + sticky action buttons */
.customizer {
  position: absolute; right: clamp(12px, 2.5vw, 28px); top: 12px;
  width: 300px; z-index: 6;
  background: var(--panel); border: 1px solid var(--hair);
  backdrop-filter: blur(12px);
  max-height: calc(100% - 88px);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* panel never scrolls — body does */
  padding: 0;
}
.customizer::before, .customizer::after {
  content: ''; position: absolute; width: 13px; height: 13px;
  pointer-events: none;
}
.customizer::before { top: -1px; left: -1px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.customizer::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }

.customizer-title {
  flex: 0 0 auto;
  font: 700 10px var(--mono); letter-spacing: 0.3em;
  color: var(--gold); margin: 0; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px 12px;
}
.customizer-title::before { content: ''; width: 24px; height: 1px; background: var(--gold); }

/* Scrollable options only — action buttons stay pinned below */
.customizer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 20px 8px;
  scrollbar-width: thin;
  scrollbar-color: #2a3a55 rgba(7, 12, 23, 0.6);
}
.customizer-body::-webkit-scrollbar { width: 8px; }
.customizer-body::-webkit-scrollbar-track { background: rgba(7, 12, 23, 0.55); border-radius: 4px; }
.customizer-body::-webkit-scrollbar-thumb {
  background: #243248;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.customizer-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 45, 111, 0.7); background-clip: padding-box; }
.customizer-body::-webkit-scrollbar-corner { background: transparent; }

.cz-group { margin-bottom: 16px; }
.cz-group label {
  display: block; font: 700 8.5px var(--mono); letter-spacing: 0.22em;
  color: var(--ivory-dim); margin-bottom: 7px; text-transform: uppercase;
}
.cz-select {
  width: 100%; background: rgba(7, 12, 23, 0.7);
  border: 1px solid var(--hair); color: var(--ivory);
  padding: 10px 12px; font: 400 12px var(--sans);
  border-radius: 3px; cursor: pointer; transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d9a441' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.cz-select:focus { outline: none; border-color: var(--gold); }
.cz-select:hover { border-color: var(--hair-strong); }
.cz-select option { background: #0c1526; color: var(--ivory); }

.cz-divider { height: 1px; background: var(--hair); margin: 14px 0; }

/* Price row removed from editor UI — keep class for safety if re-added later */
.cz-price-row { display: none; }
.cz-price { color: var(--gold); font: 700 1.2rem var(--sans); }
.cz-price.na { color: var(--ivory-dim); font: 700 9px var(--mono); letter-spacing: 0.14em; }

/* Hoodie style dropdown — price suffix readability */
#czHoodieStyle { font-size: 0.92em; }
#czHoodieStyle option { padding: 4px 0; }
#czHoodieStyleHint { margin-top: 0.45rem; line-height: 1.35; }

/* Sticky footer INSIDE the 300px customizer only — never full-viewport width */
.customizer > .cz-actions,
.cz-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--hair);
  background: var(--panel);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  left: auto;
  right: auto;
}
.customizer > .cz-actions .btn,
.cz-actions .btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Gelato Gildan 5000 colorways — scrollable swatch grid */
.cz-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 148px;
  overflow-y: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: #2a3a55 transparent;
}
.cz-swatches::-webkit-scrollbar { width: 6px; }
.cz-swatches::-webkit-scrollbar-track { background: transparent; }
.cz-swatches::-webkit-scrollbar-thumb {
  background: #243248;
  border-radius: 3px;
}
.cz-swatches::-webkit-scrollbar-thumb:hover { background: rgba(255, 45, 111, 0.7); }
.cz-swatches::-webkit-scrollbar-corner { background: transparent; }
.cz-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
  transition: var(--transition);
  position: relative;
  flex: 0 0 auto;
}
.cz-swatch:hover { transform: scale(1.15); z-index: 2; }
.cz-swatch.on {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(255, 45, 111, 0.55), inset 0 0 0 1px rgba(0,0,0,0.15);
}
.cz-swatch[data-color="white"],
.cz-swatch[data-color="ash"],
.cz-swatch[data-color="natural"],
.cz-swatch[data-color="sand"],
.cz-swatch[data-color="light-pink"],
.cz-swatch[data-color="daisy"],
.cz-swatch[data-color="pink"],
.cz-swatch[data-color="stone"],
.cz-swatch[data-color="khaki"],
.cz-swatch[data-color="light-blue"] {
  border-color: rgba(255,255,255,0.28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22);
}
.cz-swatch::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font: 400 9px var(--mono);
  color: #eee;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.9);
  pointer-events: none;
  z-index: 5;
}
.cz-swatch:hover::after { opacity: 1; }

/* Print size slider */
.cz-slider-row { display: flex; align-items: center; gap: 10px; }
.cz-slider-label { font: 600 9px var(--mono); color: var(--ivory-dim); letter-spacing: 0.08em; }
.cz-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 3px; background: var(--hair); border-radius: 2px; outline: none;
  cursor: pointer;
}
.cz-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bg);
  box-shadow: 0 0 6px rgba(255, 45, 111, 0.5);
  transition: transform 0.15s;
}
.cz-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.cz-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bg);
}
.cz-slider-val {
  text-align: center; font: 600 10px var(--mono);
  color: var(--gold); margin-top: 4px; letter-spacing: 0.1em;
}

/* Light Angle */
.cz-field-label {
  display: block;
  font: 600 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 5px;
}
.cz-slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cz-slider-row .cz-field-label { margin-bottom: 0; }
.cz-slider-row .cz-slider-val { margin-top: 0; min-width: 2.4em; text-align: right; }

/* Print quality meter — desktop: normal customizer block */
.cz-print-quality {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.03);
}
.cz-print-quality[hidden] {
  display: none !important;
}

/*
 * Tablet ONLY (.is-stage-float set by JS when ≤1366px):
 * compact card pinned top-right of the stage, just inside the page scroll rail.
 * Desktop never gets this class — quality stays in the right customizer.
 */
.cz-print-quality.is-stage-float {
  position: absolute !important;
  top: 10px !important;
  right: 8px !important; /* stage is already inset by body padding-right for the rail */
  left: auto !important;
  bottom: auto !important;
  z-index: 12 !important;
  width: min(200px, 26vw) !important;
  max-width: 210px !important;
  max-height: min(34vh, 280px) !important;
  margin: 0 !important;
  padding: 8px 9px !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 6px;
  border: 1px solid var(--hair);
  background: rgba(8, 12, 22, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  box-sizing: border-box;
  scrollbar-width: thin;
}
.cz-print-quality.is-stage-float > label {
  display: block;
  font: 700 8px var(--mono);
  letter-spacing: 0.18em;
  color: var(--ivory-dim);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.cz-print-quality.is-stage-float .cz-pq-msg {
  font-size: 10px;
  line-height: 1.35;
  margin-bottom: 4px;
}
.cz-print-quality.is-stage-float .cz-pq-fix {
  font-size: 9px;
  line-height: 1.3;
  margin-bottom: 6px;
}
.cz-print-quality.is-stage-float .cz-pq-badge {
  font-size: 9px;
  padding: 2px 6px;
}
.cz-print-quality.is-stage-float .cz-pq-dpi {
  font-size: 9px;
}
.cz-print-quality.is-stage-float .cz-pq-actions {
  gap: 5px;
}
.cz-print-quality.is-stage-float .cz-pq-enhance,
.cz-print-quality.is-stage-float .cz-pq-autofit,
.cz-print-quality.is-stage-float .cz-pq-cancel {
  padding: 6px 7px;
  font-size: 10px;
}
.cz-print-quality.is-stage-float .cz-pq-device {
  font-size: 9px;
}
.cz-print-quality.is-good {
  border-color: rgba(64, 200, 120, 0.45);
  background: rgba(64, 200, 120, 0.08);
}
.cz-print-quality.is-ok {
  border-color: rgba(230, 180, 40, 0.5);
  background: rgba(230, 180, 40, 0.08);
}
.cz-print-quality.is-poor {
  border-color: rgba(255, 70, 90, 0.55);
  background: rgba(255, 45, 111, 0.1);
}
.cz-pq-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.cz-pq-badge {
  font: 700 10px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--hair);
  color: var(--ivory-dim);
}
.cz-print-quality.is-good .cz-pq-badge {
  color: #5ee09a;
  border-color: rgba(64, 200, 120, 0.5);
}
.cz-print-quality.is-ok .cz-pq-badge {
  color: #f0c94a;
  border-color: rgba(230, 180, 40, 0.55);
}
.cz-print-quality.is-poor .cz-pq-badge {
  color: #ff6b8a;
  border-color: rgba(255, 70, 90, 0.55);
}
.cz-pq-dpi {
  font: 600 10px var(--mono);
  color: var(--ivory-dim);
  letter-spacing: 0.06em;
}
.cz-pq-msg {
  margin: 0 0 6px;
  font: 400 12px/1.45 var(--sans);
  color: var(--ivory);
}
.cz-pq-fix {
  margin: 0 0 8px;
  font: 400 11px/1.4 var(--sans);
  color: var(--ivory-dim);
}
.cz-pq-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.cz-pq-autofit,
.cz-pq-enhance,
.cz-pq-cancel {
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--gold);
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold);
  font: 600 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cz-pq-autofit:hover,
.cz-pq-enhance:hover {
  background: rgba(212, 175, 55, 0.22);
}
.cz-pq-enhance {
  border-color: rgba(120, 200, 255, 0.55);
  background: rgba(80, 160, 255, 0.12);
  color: #9fd0ff;
}
.cz-pq-enhance:hover {
  background: rgba(80, 160, 255, 0.22);
}
.cz-pq-enhance:disabled,
.cz-pq-autofit:disabled {
  opacity: 0.5;
  cursor: wait;
}
.cz-pq-cancel {
  border-color: rgba(255, 100, 120, 0.45);
  background: rgba(255, 45, 111, 0.08);
  color: #ff8aa0;
}
.cz-pq-cancel:hover {
  background: rgba(255, 45, 111, 0.16);
}
.cz-pq-progress {
  margin: 8px 0 0;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.04em;
  color: #9fd0ff;
}
.cz-pq-device {
  margin: 6px 0 0;
  font: 400 10px/1.4 var(--sans);
  color: var(--ivory-dim);
}
.cz-actions .btn.is-blocked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* Design controls (turntable start/stop + editor) */
.cz-design-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cz-die-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
  font: 600 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.cz-die-toggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
  cursor: pointer;
  flex: none;
}
.cz-die-toggle:hover { color: var(--ivory); }
.cz-die-toggle.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.cz-toggle-btn, .cz-editor-btn, .cz-remove-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border: 1px solid var(--hair); border-radius: 4px;
  background: transparent; color: var(--ivory-dim);
  font: 600 9px var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: var(--transition);
  min-width: 0;
}
.cz-remove-btn { flex: 1 1 100%; }
.cz-toggle-btn:hover, .cz-editor-btn:hover {
  border-color: var(--gold); color: var(--ivory);
}
.cz-remove-btn:hover {
  border-color: #e85a5a;
  color: #ffb4b4;
  background: rgba(232, 90, 90, 0.1);
}
.cz-remove-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}
/* Turntable spinning */
.cz-toggle-btn.on {
  border-color: var(--gold); color: var(--gold);
  background: rgba(255, 45, 111, 0.08);
}
/* Editor active — yellow matches design-frame in-bounds chrome */
.cz-editor-btn.on,
.cz-editor-btn.editing {
  border-color: #f5d76e;
  color: #f5d76e;
  background: rgba(245, 215, 110, 0.12);
  box-shadow: 0 0 0 1px rgba(245, 215, 110, 0.25), 0 0 12px rgba(245, 215, 110, 0.18);
}
.cz-editor-btn.on:hover,
.cz-editor-btn.editing:hover {
  border-color: #ffe28a;
  color: #ffe28a;
}
.cz-toggle-icon { font-size: 12px; line-height: 1; }
.cz-hint {
  margin-top: 8px; font: 400 9px/1.4 var(--mono);
  color: var(--ivory-dim); opacity: 0.7; letter-spacing: 0.04em;
}

/* Dad hat embroidery guidelines — easy to scan for shoppers */
.cz-emb-guide {
  margin-top: 6px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(255, 45, 111, 0.32);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(255, 45, 111, 0.09), rgba(0, 0, 0, 0.28));
}
.cz-emb-product {
  font: 600 11px/1.3 var(--sans, system-ui, sans-serif);
  color: var(--gold);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.cz-emb-intro {
  margin: 0 0 10px;
  font: 400 12px/1.45 var(--sans, system-ui, sans-serif);
  color: var(--ivory);
  opacity: 0.92;
}
.cz-emb-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cz-emb-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cz-emb-item-title {
  font: 600 12px/1.3 var(--sans, system-ui, sans-serif);
  color: var(--ivory);
  letter-spacing: 0.01em;
}
.cz-emb-item-text {
  font: 400 11px/1.45 var(--sans, system-ui, sans-serif);
  color: var(--ivory-dim);
  opacity: 0.95;
}

/* ---------- Print Area Selector ---------- */
.cz-technique-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
}
.cz-tab {
  flex: 1; padding: 5px 0; border: 1px solid rgba(255,255,255,0.15);
  background: transparent; color: var(--ivory-dim); cursor: pointer;
  font: 600 9px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 3px; transition: all 0.2s;
}
.cz-tab:hover { border-color: var(--gold); color: var(--gold); }
.cz-tab.active {
  background: rgba(255, 45, 111,0.12); border-color: var(--gold);
  color: var(--gold);
}
.cz-print-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 2px;
  overflow: visible;
}
/*
 * Customize sidebar no longer shows shirt placement tiles — the left-stage
 * mini-map + pips already pick Front/Back/Sleeves/Neck. Keep size readout only.
 */
#czPrintAreaGroup > label,
#czPrintAreaGroup .cz-technique-tabs,
#czPrintAreaGroup .cz-print-areas,
#czPrintAreaGroup #czPrintAreaHint {
  display: none !important;
}
.cz-area-btn.has-art:not(.active) {
  border-color: rgba(125, 206, 160, 0.35);
}
.cz-area-btn .cz-area-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.cz-area-btn .cz-area-name {
  font: 600 9px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}
.cz-area-btn .cz-area-hint {
  font: 400 8px/1.2 var(--sans);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ivory-dim);
  opacity: 0.85;
}
.cz-area-btn.active .cz-area-hint {
  color: rgba(255, 45, 111, 0.85);
}
.cz-area-btn {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 6px 5px 4px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03); border-radius: 4px; cursor: pointer;
  transition: all 0.2s; min-width: 52px;
}
.cz-area-btn:hover { border-color: rgba(255, 45, 111,0.5); background: rgba(255, 45, 111,0.06); }
.cz-area-btn.active {
  border-color: var(--gold); background: rgba(255, 45, 111,0.1);
  box-shadow: 0 0 8px rgba(255, 45, 111,0.2);
}
.cz-area-btn .area-icon { width: 32px; height: 38px; }
.cz-area-btn > span:not(.cz-area-text) {
  font: 500 7px/1 var(--mono); color: var(--ivory-dim);
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.cz-area-btn.active .cz-area-name { color: var(--gold); }

/* ---------- Print-area selector (BODY / SLEEVES · FRONT / BACK) ---------- */
/* Sits in .stage-side flex column under the placard — never overlays it */
.cz-minimap {
  position: relative;
  left: auto;
  bottom: auto;
  top: auto;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 8px 9px 9px;
  background: rgba(7,13,24,0.92);
  border: 1px solid rgba(255, 45, 111,0.4);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  pointer-events: auto;
  width: 100%;
  max-width: min(220px, 100%);
  flex: 0 0 auto;
  margin-top: auto; /* pin to bottom of left column when space allows */
  overflow: hidden;
  box-sizing: border-box;
}
.stage-editor.studio-rail-open .cz-minimap {
  left: auto; /* column padding shifts the whole stack */
}
.cz-minimap-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.cz-minimap-inner { width: 56px; height: 68px; }
.cz-minimap-inner svg { width: 100%; height: 100%; }
.cz-minimap-label {
  font: 600 8px/1 var(--mono); color: var(--gold);
  letter-spacing: 0.1em; text-transform: uppercase;
}
/* Body | Sleeves (or Cap | Sides) — plain language, not DTG/DTF */
.cz-minimap-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.cz-minimap-groups[hidden] {
  display: none !important;
}
.cz-minimap-group {
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ivory-dim);
  font: 700 8px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.cz-minimap-group:hover {
  border-color: rgba(255, 45, 111, 0.4);
  color: var(--ivory);
}
.cz-minimap-group.is-active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 45, 111, 0.12);
}
.cz-minimap-group.is-has-art:not(.is-active) {
  border-color: rgba(125, 206, 160, 0.3);
}
.cz-minimap-group-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-left: 3px;
  vertical-align: middle;
  background: transparent;
}
.cz-minimap-group.is-has-art .cz-minimap-group-dot {
  background: #7dcea0;
  box-shadow: 0 0 4px rgba(125, 206, 160, 0.5);
}
/* Pips for the active group only — equal width, no overflow scroll */
.cz-minimap-pips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-items: stretch;
  gap: 4px;
  width: 100%;
  overflow: hidden;
}
.cz-minimap-pip {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 3px 5px;
  border: 1px solid var(--hair);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ivory-dim);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  font: 700 7px/1.15 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.cz-minimap-pip:hover {
  border-color: rgba(255, 45, 111, 0.45);
  color: var(--ivory);
}
.cz-minimap-pip.is-active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 45, 111, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 45, 111, 0.2);
}
.cz-minimap-pip.is-has-art:not(.is-active) {
  border-color: rgba(125, 206, 160, 0.35);
}
.cz-minimap-pip-icon {
  width: 26px;
  height: 30px;
  flex: none;
  pointer-events: none;
}
.cz-minimap-pip-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cz-minimap-pip-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cz-minimap-pip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  flex: none;
}
.cz-minimap-pip.is-has-art .cz-minimap-pip-dot {
  background: #7dcea0;
  box-shadow: 0 0 5px rgba(125, 206, 160, 0.55);
}
/* Hat: copy-design-to-this-face row (only shown when this face is empty and
   another face — e.g. Front — already has a design). Matches pip styling. */
.cz-minimap-copy {
  width: 100%;
  border: 1px solid rgba(255, 45, 111, 0.45);
  border-radius: 5px;
  background: rgba(255, 45, 111, 0.1);
  color: var(--gold);
  font: 700 8px/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cz-minimap-copy:hover {
  background: rgba(255, 45, 111, 0.22);
  border-color: var(--gold);
  color: var(--ivory);
}
.cz-minimap-pip.is-active .cz-minimap-pip-dot {
  background: var(--gold);
  box-shadow: 0 0 5px rgba(255, 45, 111, 0.5);
}

/* ---------- On-Garment Editor Overlay (Gelato template style) ---------- */
/* Editor overlay: ONLY covers the shirt canvas (#canvasStage), not the whole page.
   Page scroll outside the canvas is free; the box stays on the shirt. */
.decal-overlay {
  position: absolute;
  inset: 0;
  z-index: 6; /* above WebGL canvas */
  pointer-events: none;
  overflow: hidden; /* never draw editor chrome outside the shirt canvas */
}
/*
 * Print ZONE die lines — soft dotted fence (read-only).
 * Shown only in Editor when “Show die lines” is on.
 * Yellow/red design frame stays the interactive art chrome.
 */
.print-zone-frame {
  display: none;
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  border: 1.5px dashed rgba(255, 255, 255, 0.38);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 4;
  transform-origin: center center;
}
.print-zone-frame.is-visible {
  display: block;
}
.print-zone-label {
  display: block;
  position: absolute;
  top: -15px;
  left: 0;
  padding: 0 2px;
  font: 600 8px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
/*
 * DESIGN frame around the uploaded image — Gelato editor chrome only.
 * Yellow = in bounds · Red = outside print zone.
 * Site brand magenta (--gold) is intentionally NOT used here.
 */
.decal-frame {
  --editor-in: #f5d76e;
  --editor-in-glow: rgba(245, 215, 110, 0.55);
  --editor-out: #e74c3c;
  --editor-out-glow: rgba(231, 76, 60, 0.55);
  position: absolute;
  width: 180px;
  height: 180px;
  border: 2px solid var(--editor-in);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 12px var(--editor-in-glow),
    0 4px 16px rgba(0, 0, 0, 0.4);
  cursor: move;
  pointer-events: all;
  transform-origin: center center;
  box-sizing: border-box;
  background: transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
  touch-action: none;
  z-index: 5; /* above soft die lines */
}
/* Gelato: yellow → red when design leaves the printable area */
.decal-frame.out-of-bounds {
  border-color: var(--editor-out);
  box-shadow:
    0 0 0 1px rgba(231, 76, 60, 0.65),
    0 0 18px var(--editor-out-glow),
    inset 0 0 24px rgba(231, 76, 60, 0.18);
}
.decal-frame.out-of-bounds .decal-handle {
  background: var(--editor-out);
  border-color: #fff;
}
.decal-frame.out-of-bounds .decal-rotate-handle {
  border-color: var(--editor-out);
  background: #fff;
}
.decal-frame.out-of-bounds .decal-rotate-handle::after {
  background: var(--editor-out);
}
.decal-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--editor-in, #f5d76e);
  border: 2px solid #1a1a1a;
  border-radius: 3px;
  cursor: nwse-resize;
  pointer-events: all;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  transition: transform 0.12s, background 0.15s;
  touch-action: none;
}
/* Invisible expanded hit target (desktop stays visually small) */
.decal-handle::before {
  content: '';
  position: absolute;
  inset: -6px;
}
.decal-handle:hover { transform: scale(1.3); background: #fff8d6; }
.decal-handle.nw { top: -7px; left: -7px; cursor: nwse-resize; }
.decal-handle.ne { top: -7px; right: -7px; cursor: nesw-resize; }
.decal-handle.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.decal-handle.se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.decal-rotate-handle {
  position: absolute;
  top: -32px;
  left: 50%;
  margin-left: -8px;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid var(--editor-in, #f5d76e);
  border-radius: 50%;
  cursor: grab;
  pointer-events: all;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  touch-action: none;
}
.decal-rotate-handle::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}
#canvasStage canvas {
  touch-action: none;
}

/* ---------- Touch / tablet: larger design-frame chrome (desktop unchanged) ---------- */
@media (max-width: 1024px), (pointer: coarse) {
  .decal-frame {
    border-width: 3px;
    /* Easier to grab the whole design for move */
    min-width: 48px;
    min-height: 48px;
  }
  .decal-handle {
    width: 26px;
    height: 26px;
    border-width: 2.5px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  }
  .decal-handle::before {
    inset: -10px; /* fat finger target without growing the yellow square more */
  }
  .decal-handle.nw { top: -13px; left: -13px; }
  .decal-handle.ne { top: -13px; right: -13px; }
  .decal-handle.sw { bottom: -13px; left: -13px; }
  .decal-handle.se { bottom: -13px; right: -13px; }
  .decal-rotate-handle {
    width: 28px;
    height: 28px;
    top: -44px;
    margin-left: -14px;
    border-width: 3px;
  }
  .decal-rotate-handle::before {
    inset: -14px;
  }
  .decal-rotate-handle::after {
    height: 16px;
  }
}
.decal-rotate-handle::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 14px;
  background: var(--editor-in, #f5d76e);
}
.decal-rotate-handle:hover { background: #fff8d6; cursor: grabbing; }
/* Print area inches readout retired from Customize sidebar */
.cz-print-size {
  display: none !important;
}

/* ---------- Gelato-style Print File Editor (2D) ---------- */
/* Admin Print File Editor — anchored inside #canvasStage only */
.pfe {
  position: absolute;
  left: clamp(10px, 2vw, 20px);
  top: 50%;
  transform: translateY(-50%);
  width: min(280px, 38%);
  max-height: min(72%, 560px);
  overflow: auto;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 10px;
  z-index: 8;
  background: rgba(14, 14, 18, 0.92);
  border: 1px solid rgba(255, 45, 111, 0.35);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  color: #e8e4dc;
  font-size: 12px;
  pointer-events: auto;
}
.pfe-head { margin-bottom: 2px; }
.pfe-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold, #ff2d6f);
}
.pfe-sub {
  font-size: 10px;
  color: #9a958c;
  margin-top: 2px;
}
.pfe-tech {
  display: flex;
  gap: 6px;
}
.pfe-tech-btn {
  flex: 1;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #cfc9be;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pfe-tech-btn.active {
  background: rgba(255, 45, 111, 0.18);
  border-color: rgba(255, 45, 111, 0.7);
  color: #f0d9a0;
}
.pfe-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pfe-area {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: #b8b2a6;
  font-size: 10px;
  cursor: pointer;
}
.pfe-area.active {
  border-color: rgba(255, 45, 111, 0.75);
  color: #f0d9a0;
  background: rgba(255, 45, 111, 0.12);
}
.pfe-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 200 / 240;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(40,40,48,0.9), rgba(10,10,14,0.95));
  border: 1px solid rgba(255,255,255,0.06);
  user-select: none;
  touch-action: none;
}
.pfe-sil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #1a1a1a;
  pointer-events: none;
}
/* Safety print zone (invisible border) — fixed rectangle on the mockup */
.pfe-zone {
  position: absolute;
  box-sizing: border-box;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible; /* handles may sit outside; image is clipped in .pfe-clip */
}
.pfe-zone-label {
  position: absolute;
  left: 0;
  top: -16px;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(154, 149, 140, 0.7);
  white-space: nowrap;
  pointer-events: none;
}
/*
 * HARD CLIP — Gelato print-file editor:
 * Only pixels inside this box are shown. Image outside becomes invisible.
 */
.pfe-clip {
  position: absolute;
  inset: 0;
  overflow: hidden !important;
  border: none;
  outline: none;
  background: transparent;
  pointer-events: none; /* drag via handles layer */
  z-index: 1;
}
/* The uploaded image (positioned freely; clipped by .pfe-clip) */
.pfe-art-img {
  position: absolute;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
  max-width: none;
  max-height: none;
  transition: filter 0.15s;
}
/* Soft red cast on the design when it overflows the print zone (Gelato cue) */
.pfe-art-img.out-of-bounds {
  filter: brightness(0.92) sepia(0.55) hue-rotate(-45deg) saturate(3.2);
}
/* Design editor chrome — yellow in-bounds / red out-of-bounds (not site brand) */
.pfe-art {
  --editor-in: #f5d76e;
  --editor-in-glow: rgba(245, 215, 110, 0.5);
  --editor-out: #e74c3c;
  --editor-out-glow: rgba(231, 76, 60, 0.5);
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--editor-in);
  outline: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 10px var(--editor-in-glow);
  cursor: grab;
  transform-origin: center center;
  background: transparent;
  z-index: 2;
  pointer-events: all;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pfe-art:active { cursor: grabbing; }
.pfe-art.out-of-bounds {
  border-color: var(--editor-out);
  box-shadow:
    0 0 0 1px rgba(231, 76, 60, 0.65),
    0 0 14px var(--editor-out-glow);
}
.pfe-art.out-of-bounds .pfe-h {
  background: var(--editor-out);
}
.pfe-art.out-of-bounds .pfe-rot {
  border-color: var(--editor-out);
}
.pfe-art.out-of-bounds .pfe-rot::after {
  background: var(--editor-out);
}
.pfe-zone.has-overflow .pfe-zone-label {
  color: #e74c3c;
}
.pfe-meta.out-of-bounds {
  color: #e88a80;
}
.pfe-h {
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--editor-in, #f5d76e);
  border: 1.5px solid #1a1a1a;
  border-radius: 2px;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transition: background 0.15s;
}
.pfe-h.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.pfe-h.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.pfe-h.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.pfe-h.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.pfe-rot {
  position: absolute;
  top: -28px;
  left: 50%;
  margin-left: -7px;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid var(--editor-in, #f5d76e);
  border-radius: 50%;
  cursor: grab;
  z-index: 3;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.pfe-rot::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 12px;
  background: var(--editor-in, #f5d76e);
}
.pfe-meta {
  font-size: 10px;
  color: #9a958c;
  line-height: 1.35;
  min-height: 1.3em;
}
.pfe-actions {
  display: flex;
  gap: 6px;
}
.pfe-btn {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 45, 111,0.45);
  background: rgba(255, 45, 111,0.15);
  color: #f0d9a0;
  font-size: 11px;
  cursor: pointer;
}
.pfe-btn.ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.12);
  color: #cfc9be;
}
.pfe-hint {
  margin: 0;
  font-size: 10px;
  color: #7a756c;
  line-height: 1.35;
}
@media (max-width: 900px) {
  .pfe {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 72px;
    transform: none;
    width: auto;
    max-height: 40%;
  }
  .cz-minimap {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: auto;
  }
}

/* ---------- Placard (Now Hanging — left column, above face selector) ---------- */
.placard {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  min-width: 0;
  max-width: min(280px, 100%);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: rgba(10, 15, 26, 0.96);
  border: 1px solid var(--hair);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  padding: 12px 14px;
  z-index: 6;
  overflow: visible;
  box-sizing: border-box;
}

/* Design studio compact upscale chip (menubar actions — not a 4th grid cell) */
.design-upscale-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 45, 111, 0.4);
  background: rgba(255, 45, 111, 0.1);
  color: var(--gold, #ff2d6f);
  font: 600 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.design-upscale-chip[hidden] { display: none !important; }
.design-upscale-mark {
  display: inline-flex;
  width: 16px;
  height: 22px;
}
.design-upscale-mark svg { width: 100%; height: 100%; display: block; }
.ps-status.is-upscaling {
  color: var(--gold, #ff2d6f);
  font-weight: 600;
}
/* While enhancing: mute photo/text entry controls */
.fabric-editor-modal.is-enhancing .ps-tool[data-tool="photo"],
.fabric-editor-modal.is-enhancing .ps-tool[data-tool="text"],
.fabric-editor-modal.is-enhancing .ps-layer-btn.primary,
.fabric-editor-modal.is-enhancing .ps-layer-btn[data-slot-act="text"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
.fabric-editor-modal.is-cropping #fabCrop.is-cropping {
  border-color: rgba(245, 215, 110, 0.65);
  color: #f5d76e;
  background: rgba(245, 215, 110, 0.12);
}

/* Small spinning diamond above product in 3D editor while upscaling */
.placard-upscale {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 45, 111, 0.4);
  background: rgba(8, 12, 22, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.placard-upscale[hidden] {
  display: none !important;
}
.placard-upscale-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #ff2d6f);
  width: 14px;
  height: 18px;
  flex-shrink: 0;
  transform-origin: 50% 50%;
}
.placard-upscale-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.placard-upscale-label {
  font: 600 8px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory, #f2f4f8);
  white-space: nowrap;
}
.p-estimate {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 0;
}
.p-estimate-title {
  font: 700 9px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.p-estimate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font: 400 11px/1.45 var(--sans);
  color: var(--ivory-dim);
  margin-bottom: 0;
  position: relative;
  z-index: 0;
}
.p-estimate-row span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.p-estimate-row strong {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.p-estimate-row.artist strong {
  color: var(--gold);
}
.p-estimate-row.warn strong {
  color: #e85d5d;
}
.p-estimate-row.save strong {
  color: #7dcea0;
}
.p-estimate-row.muted {
  opacity: 0.45;
}
.p-estimate-note {
  margin: 0 0 8px !important;
  font: 400 11px/1.45 var(--sans) !important;
  letter-spacing: 0.01em !important;
  color: var(--ivory-dim) !important;
  text-transform: none !important;
  opacity: 0.95;
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  white-space: normal !important;
}
.p-estimate-note:last-child {
  margin-bottom: 0 !important;
}
.p-sale-edit {
  margin-bottom: 8px;
}
.p-sale-edit label {
  display: block;
  font: 700 8px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 4px;
}
.p-sale-edit-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.p-sale-edit-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: rgba(0,0,0,0.35);
  color: var(--ivory);
  font: 600 13px var(--mono);
  box-sizing: border-box;
}
.p-sale-edit-row .btn {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 9px;
  white-space: nowrap;
}
.placard::before,
.placard::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
}
.placard::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--gold);
  border-left: 2px solid var(--gold);
}
.placard::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}
.placard.flash { animation: placardFlash 0.65s; }
@keyframes placardFlash {
  0% { border-color: var(--gold); box-shadow: 0 0 24px rgba(255, 45, 111, 0.28); }
  100% { box-shadow: none; }
}
/* Header: Now Hanging (left) + compact print quality (right) */
.p-header {
  display: flex;
  align-items: center; /* same baseline row as badge */
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 28px;
}
.p-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 0;
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
}
.p-label::before {
  content: '';
  width: 12px;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.p-label-text {
  display: inline-block;
  min-width: 11ch;
  overflow: visible;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-transform: uppercase;
}
.placard.is-upscaling .p-label-text {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 45, 111, 0.35);
}
.placard.is-upscaling .p-label .mm-mark {
  animation:
    mmMarkSpinFluent 1.6s linear infinite,
    mmMarkGlowPulse 1.6s ease-in-out infinite;
  transform-origin: 50% 50%;
}

/* Compact print quality — ONE row: [TOO SOFT] ~81 DPI (beside Now Hanging) */
.p-print-quality-host {
  flex: 0 0 auto;
  margin: 0;
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
  height: 28px;
}
.p-print-quality-host .cz-print-quality,
.p-print-quality-host .p-pq-compact {
  margin: 0;
  padding: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
}
.p-print-quality-host .cz-print-quality:not([hidden]) {
  display: flex;
  align-items: center;
}
.p-pq-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  height: 28px;
}
.p-print-quality-host .cz-pq-badge {
  font: 700 8px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 8px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid currentColor;
  box-sizing: border-box;
}
.p-print-quality-host .cz-pq-dpi {
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ivory-dim);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 22px;
}
.p-print-quality-host .cz-print-quality.is-good .cz-pq-badge {
  color: #5dff9a;
  border-color: rgba(93, 255, 154, 0.55);
  background: rgba(64, 200, 120, 0.12);
}
.p-print-quality-host .cz-print-quality.is-ok .cz-pq-badge {
  color: #f0c94a;
  border-color: rgba(230, 180, 40, 0.55);
  background: rgba(230, 180, 40, 0.1);
}
.p-print-quality-host .cz-print-quality.is-poor .cz-pq-badge {
  color: #ff5a7a;
  border-color: rgba(255, 45, 111, 0.55);
  background: rgba(255, 45, 111, 0.1);
}
/* Legacy floating chip removed */
.placard-upscale {
  display: none !important;
}
.p-body {
  flex: 0 0 auto;
  min-height: 0;
  position: relative;
  z-index: 0;
}
.p-body h3 {
  font: 700 0.95rem/1.2 var(--serif);
  letter-spacing: 0.01em;
  margin: 0 0 3px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
  overflow: visible;
}
.p-body > p {
  font: 400 9px var(--mono);
  letter-spacing: 0.08em;
  color: var(--ivory-dim);
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
/* Qty + Buy sample — always its own full-width row below estimates */
.p-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  clear: both;
  width: 100%;
  box-sizing: border-box;
}
.p-foot .p-price {
  display: none !important;
}
.p-sample-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.p-qty {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.p-qty-btn {
  flex: none;
  width: 28px;
  border: none;
  background: transparent;
  color: var(--gold);
  font: 700 14px/1 var(--mono);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.p-qty-btn:hover {
  background: rgba(255, 45, 111, 0.12);
  color: var(--ivory);
}
.p-qty-btn:active {
  background: rgba(255, 45, 111, 0.22);
}
.p-qty input {
  width: 32px;
  min-width: 0;
  border: none;
  border-left: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
  background: transparent;
  color: var(--ivory);
  font: 600 12px var(--mono);
  text-align: center;
  padding: 6px 2px;
  -moz-appearance: textfield;
}
.p-qty input::-webkit-outer-spin-button,
.p-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.p-qty input:focus {
  outline: none;
  background: rgba(255, 45, 111, 0.06);
}
.p-sample-row .btn {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 7px 8px;
  white-space: nowrap;
  line-height: 1.2;
}

/* Expandable pricing / sample disclaimers */
.p-details {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--hair);
  flex: 0 0 auto;
  position: relative;
  z-index: 0;
  width: 100%;
}
.p-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: 700 9px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  user-select: none;
  padding: 2px 0;
}
.p-details > summary::-webkit-details-marker {
  display: none;
}
.p-details-chevron {
  font-size: 11px;
  line-height: 1;
  transition: transform 0.18s ease;
  color: var(--gold);
  flex: none;
}
.p-details[open] > summary .p-details-chevron {
  transform: rotate(180deg);
}
.p-details[open] > summary {
  color: var(--gold);
  margin-bottom: 8px;
}
.p-details-body {
  padding-bottom: 2px;
}

/* ---------- Bottom dock retired — size/frame/turntable live in right customizer ---------- */
.dock,
.dock.is-hidden,
.stage-editor .dock,
.stage-editor.is-apparel .dock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Legacy dock styles kept inert (element is empty + hidden) */
.dock-legacy {
  position: absolute;
  left: calc(var(--studio-rail-w, 56px) + clamp(10px, 1.5vw, 18px));
  right: auto;
  transform: none;
  bottom: 14px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(9, 15, 28, 0.9);
  border: 1px solid var(--hair);
  backdrop-filter: blur(10px);
  z-index: 7;
  max-width: min(920px, calc(100% - 48px - var(--studio-rail-w, 56px)));
  overflow-x: auto;
  border-radius: 10px;
  scrollbar-width: none;
}
.dock::-webkit-scrollbar { height: 0; }
.seg { display: flex; border: 1px solid var(--hair-strong); border-radius: 4px; overflow: hidden; flex: none; }
.seg button {
  background: none; border: none; color: var(--ivory-dim);
  font: 700 9px var(--mono); letter-spacing: 0.12em; padding: 9px 12px;
  cursor: pointer; transition: 0.2s; text-transform: uppercase;
  white-space: nowrap; display: inline-flex; align-items: center;
}
.seg button.on { background: var(--gold); color: #141005; }
.seg button:not(.on):hover { color: var(--ivory); }
.seg button.mismatch { opacity: 0.35; cursor: not-allowed; color: var(--ivory-dim); }
.seg button.mismatch:hover { color: var(--ivory-dim); background: none; }
.seg button.mismatch.on { opacity: 1; cursor: pointer; background: var(--gold); color: #141005; }

/* Shape glyphs + frame swatches */
.seg .ic { display: inline-block; border: 1.5px solid currentColor; border-radius: 1px; margin-right: 7px; flex: none; }
.ic-sq { width: 9px; height: 9px; }
.ic-po { width: 8px; height: 11px; }
.ic-la { width: 11px; height: 8px; }
.seg .sw { width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; flex: none; border: 1px solid rgba(255, 255, 255, 0.4); }
.sw-oak { background: #8a5a33; }
.sw-ebony { background: #16120e; }
.sw-gilded { background: #c79a45; }
.dock hr { width: 1px; height: 22px; background: var(--hair); border: none; flex: none; }

.toggle {
  background: none; border: 1px solid var(--hair-strong); color: var(--ivory-dim);
  font: 700 9px var(--mono); letter-spacing: 0.16em; padding: 9px 13px;
  cursor: pointer; border-radius: 4px; display: flex; align-items: center;
  transition: 0.2s; text-transform: uppercase; flex: none;
}
.toggle i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--hair-strong);
  display: inline-block; margin-right: 7px; transition: 0.2s; flex: none;
}
.toggle.on { color: var(--ivory); border-color: var(--hair); }
.toggle.on i { background: var(--gold); box-shadow: 0 0 9px rgba(255, 45, 111, 0.85); }
.dock-hint {
  font: 400 9px var(--mono); letter-spacing: 0.16em;
  color: var(--ivory-dim); white-space: nowrap; flex: none;
}

/* Scroll cue removed — less clutter under the editor */
.cue { display: none !important; }

/* ---------- Responsive Stage ---------- */
@media (max-width: 1250px) {
  .dock-hint { display: none; }
  .dock {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    max-width: calc(100% - 48px);
  }
  .dock hr { display: none; }
  .customizer { width: 260px; }
}
/* Narrow / small screens in PORTRAIT only — landscape tablets use the split layout below */
@media (max-width: 900px) and (orientation: portrait) {
  .stage { min-height: 0; }
  .stage-hero {
    max-width: none;
    padding: 88px 18px 14px;
  }
  .lede { font-size: 0.9rem; }
  .cta-row .btn { flex: 1 1 auto; }
  .stage-editor {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-bottom: none;
    margin-bottom: 0;
    position: relative;
    --studio-drawer-w: 220px;
  }
  #canvasStage {
    position: relative; inset: auto;
    height: 52vh; min-height: 300px; flex: none;
  }
  .customizer {
    position: static; width: auto; margin: 12px 14px 0;
    max-height: min(70vh, 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .customizer-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    align-content: start;
  }
  .customizer-title { grid-column: auto; }
  .cz-actions { grid-column: auto; }
  /* Left column still hosts placard + minimap (no overlay) */
  .stage-side {
    width: min(280px, 38vw);
    padding: 18px 8px 14px calc(var(--studio-rail-w, 52px) + 12px);
  }
  .placard {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: min(42vh, 360px) !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    transform: none !important;
    z-index: 8;
    overflow-y: auto;
  }
  .dock {
    position: static;
    transform: none;
    max-width: none;
    margin: 10px 14px 16px;
    overflow-x: auto;
    left: auto;
    flex-wrap: nowrap;
  }
  .studio-rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--studio-rail-w);
    flex-direction: column;
    border-right: 1px solid var(--hair);
    border-bottom: none;
    padding: 10px 0;
  }
  .studio-rail-btn {
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 12px 4px;
  }
  .studio-drawer {
    position: absolute;
    left: var(--studio-rail-w);
    top: 0;
    bottom: 0;
    width: var(--studio-drawer-w);
    max-height: none;
    border-right: 1px solid var(--hair);
    border-bottom: none;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35);
  }
}
/*
 * Sheet UI (phone + tablet PORTRAIT):
 * bottom nav + Files/Layers bottom sheet — no left rail.
 * Tablet LANDSCAPE keeps the side rail (handled outside this query).
 */
@media (max-width: 640px), (max-width: 1180px) and (orientation: portrait) {
  /* Keep Hang Your Art dock on one horizontal row (scroll if needed) */
  .dock { flex-wrap: nowrap; }
  .seg { flex: 0 0 auto; }
  .seg button { flex: 0 0 auto; justify-content: center; }

  /* Hide left rail — Files/Layers = bottom sheet that slides up */
  .studio-rail { display: none !important; }
  .stage-editor {
    --studio-rail-w: 0px;
    --studio-drawer-w: 100%;
    margin-bottom: 0;
    position: relative;
  }
  /* Phone / portrait: compact left stack — placard then face selector, no overlap */
  .stage-side {
    position: absolute;
    top: 0;
    left: 0;
    bottom: auto;
    width: min(270px, 78vw);
    max-width: 78vw;
    max-height: calc(100% - 12px);
    padding: 10px;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 8;
  }
  .stage-editor.studio-rail-open .stage-side {
    padding-left: 10px;
    width: min(270px, 78vw);
  }
  .cz-minimap,
  .stage-editor.studio-rail-open .cz-minimap {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important; /* stack under placard on short viewports */
    flex: 0 0 auto;
  }

  /* Render stage first */
  #canvasStage {
    position: relative;
    height: 48vh;
    min-height: 280px;
    order: 1;
    z-index: 1;
  }

  /*
   * Now Hanging — compact but readable, stacked above face selector.
   */
  .stage-editor .placard,
  .placard {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 8;
    flex: 0 0 auto;
    gap: 0;
    overflow: visible !important;
    background: rgba(8, 12, 22, 0.94);
    backdrop-filter: blur(8px);
  }
  .stage-editor.studio-rail-open .placard {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
    border-width: 1px;
    padding: 10px 12px !important;
  }
  .placard .p-label {
    font-size: 8px;
    letter-spacing: 0.14em;
    margin-bottom: 5px;
    gap: 5px;
  }
  .placard .p-label::before {
    width: 10px;
  }
  .placard .p-body h3 {
    font-size: 0.9rem;
    line-height: 1.2;
    margin-bottom: 3px;
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }
  .placard .p-body > p {
    font-size: 9px;
    letter-spacing: 0.06em;
    line-height: 1.35;
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }
  .placard .p-estimate-row {
    font-size: 11px;
  }
  .placard .p-foot {
    margin-top: 8px;
    padding-top: 8px;
    position: relative;
    z-index: 1;
  }
  .placard .p-sample-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }
  .placard .p-sample-row .btn {
    flex: 1 1 auto;
    width: auto;
    font-size: 10px;
    letter-spacing: 0.04em;
    padding: 7px 8px;
    min-height: 0;
    white-space: nowrap;
  }
  .placard .p-qty-btn {
    width: 26px;
  }
  .placard .p-qty input {
    width: 30px;
    font-size: 12px;
  }

  /*
   * Customize Your Piece — primary panel, full width, directly under render
   */
  .customizer {
    position: static !important;
    order: 2;
    width: auto !important;
    max-width: none;
    max-height: min(72vh, 720px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    grid-template-columns: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    background: var(--panel);
    z-index: 2;
  }
  .customizer-title {
    grid-column: auto;
    margin-bottom: 0;
    font-size: 11px;
    padding: 16px 14px 10px;
  }
  .customizer-body {
    padding: 0 14px 8px;
  }
  .cz-group {
    margin-bottom: 14px;
  }
  .cz-actions {
    grid-column: auto;
    margin-top: 0;
    padding: 12px 14px 16px;
  }
  .cz-actions .btn {
    width: 100%;
  }

  /* Dock under customizer */
  .stage-editor .dock,
  .dock {
    position: static !important;
    order: 3;
    left: auto !important;
    max-width: none !important;
    margin: 0 0 8px !important;
    width: 100%;
    border-radius: 0;
    box-sizing: border-box;
  }

  /* No full-page glass scrim — product must stay visible & draggable above the sheet */
  .studio-sheet-scrim {
    display: none !important;
  }

  /* Phone: shorter sheet; layering/opacity from app-chrome rules (z-index 140, solid ink) */
  .studio-drawer {
    height: 38vh !important;
    max-height: 300px !important;
    min-height: 200px !important;
  }

  .studio-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 8px 0 0;
    flex: none;
    cursor: grab;
  }
  .studio-sheet-handle span {
    width: 36px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
  }

  /* Compact chrome so thumbs get the space */
  .studio-drawer-head {
    padding: 8px 12px 8px;
  }
  .studio-panel {
    padding: 8px 10px 10px;
  }
  .studio-choose-file {
    padding: 8px 10px;
    font-size: 12px;
  }
  .studio-files-toolbar {
    margin: 8px 0 8px;
  }

  /* Phone thumbs: denser than desktop “S” — 4–5 columns, tiny tiles */
  .studio-thumbs.size-s,
  .studio-thumbs.size-m,
  .studio-thumbs.size-l {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .studio-thumbs .studio-thumb-name {
    display: none !important;
  }
  .studio-thumbs.size-l .studio-thumb {
    flex-direction: column !important;
  }
  .studio-thumbs.size-l .studio-thumb img {
    width: 100% !important;
    aspect-ratio: 1 !important;
  }
  .studio-thumb {
    border-radius: 4px;
  }
  .studio-thumb.used::after {
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    font-size: 8px;
  }
  /* S/M/L still tweak density slightly on phone */
  .studio-thumbs.size-s {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  .studio-thumbs.size-m {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .studio-thumbs.size-l {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  .studio-hint { display: none; }
  .studio-empty {
    font-size: 11px;
    margin-top: 8px;
  }

  /* Title becomes tabs on phone */
  .studio-drawer-title { display: none; }
  .studio-sheet-tabs {
    display: flex;
    flex: 1 1 auto;
    gap: 0;
    border: 1px solid var(--hair);
    border-radius: 8px;
    overflow: hidden;
    min-width: 0;
  }
  .studio-sheet-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ivory-dim);
    font: 700 10px var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 9px 10px;
    cursor: pointer;
  }
  .studio-sheet-tab.on {
    color: var(--gold);
    background: rgba(255, 45, 111, 0.12);
  }
  /* Pin is less useful on phone sheet — hide it */
  .studio-pin-btn { display: none !important; }

  .stage-editor.studio-rail-open .placard {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  body {
    --app-bottom-nav-h: 56px;
    padding-bottom: calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }
  body.studio-sheet-open {
    overflow: hidden;
  }
}

/* ---------- App bottom nav (phone + tablet) — ONE bar only ---------- */
.app-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  /* height = row only; safe-area via padding so we never draw a double band */
  height: auto;
  min-height: 0;
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: rgba(8, 12, 22, 0.98);
  border-top: 1px solid var(--hair);
  backdrop-filter: blur(14px);
  box-sizing: border-box;
}
.app-bottom-nav-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 56px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.app-nav-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--ivory-dim);
  cursor: pointer;
  padding: 6px 2px;
  min-width: 0;
  transition: color 0.15s;
  text-decoration: none;
  font: inherit;
}
.app-nav-btn:hover,
.app-nav-btn:focus-visible {
  color: var(--ivory);
  outline: none;
}
.app-nav-btn.on {
  color: var(--gold);
}
.app-nav-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  position: relative;
}
.app-nav-label {
  font: 600 9px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}
.app-nav-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--gold);
  color: #140810;
  font: 700 9px var(--sans);
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.app-nav-badge.show { display: inline-flex; }

/* Phone + tablet (not large desktop): app chrome */
@media (max-width: 1366px) {
  .app-bottom-nav { display: block; }
  /* Compact header — bottom nav owns cart / primary links */
  #siteHeader .cart-btn { display: none; }
  /* Hide header link row on studio only — buyer + profile keep nav */
  body[data-mm-route="studio"] #siteHeader nav { display: none; }
  body[data-mm-route="profile"] #siteHeader nav { display: flex !important; }
  body {
    --app-bottom-nav-h: 56px;
    padding-bottom: calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  /*
   * Studio sheet: fixed bottom dock ABOVE bottom-nav, solid ink so ticker/gallery
   * never show through — but SHORT so the 3D stage stays visible for drag-up.
   * No blocking scrim: product must remain interactive for drop targets.
   */
  body.is-app-chrome .studio-drawer,
  .stage-editor.is-app-sheet .studio-drawer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important; /* full width; head pads clear the scroll rail */
    top: auto !important;
    bottom: calc(var(--app-bottom-nav-h, 56px) + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    max-width: none !important;
    /* Default short — product stays on screen for drag */
    height: min(34vh, 300px) !important;
    max-height: min(34vh, 300px) !important;
    min-height: 180px !important;
    z-index: 140 !important;
    background: #070d18 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.75) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: translate3d(0, 110%, 0);
    transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.28, 1), height 0.2s ease;
    isolation: isolate;
  }
  /*
   * Customize + Files + Layers: same short height so product + PiP stay fully visible.
   * Content scrolls inside the panel — drawer does not eat the stage.
   */
  body.is-app-chrome .studio-drawer[data-active-panel="customize"],
  body.is-app-chrome .studio-drawer[data-active-panel="files"],
  body.is-app-chrome .studio-drawer[data-active-panel="layers"],
  .stage-editor.is-app-sheet .studio-drawer[data-active-panel="customize"],
  .stage-editor.is-app-sheet .studio-drawer[data-active-panel="files"],
  .stage-editor.is-app-sheet .studio-drawer[data-active-panel="layers"] {
    height: min(30vh, 260px) !important;
    max-height: min(30vh, 260px) !important;
  }
  body.is-app-chrome .studio-drawer.is-open,
  .stage-editor.is-app-sheet .studio-drawer.is-open {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /*
   * No full-page scrim — it blocked drops onto the product.
   * Keep product + placard fully visible and interactive above the sheet.
   */
  body.is-app-chrome .studio-sheet-scrim,
  .stage-editor.is-app-sheet .studio-sheet-scrim,
  body.studio-sheet-open .studio-sheet-scrim {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  /*
   * Sheet open: page does not scroll unless pointer is over the stage/page
   * (JS wheel handler). Drawer panels use overscroll-behavior: contain.
   */
  body.studio-sheet-open {
    overflow-x: hidden;
  }
  body.studio-sheet-open.is-drawer-wheel {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* Solid panels — no ticker bleed through file grid */
  body.is-app-chrome .studio-drawer-head,
  body.is-app-chrome .studio-panel,
  body.is-app-chrome .studio-customize-host {
    background: #070d18 !important;
  }
  body.is-app-chrome .studio-panel {
    isolation: isolate;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
  }
  body.is-app-chrome .studio-thumb {
    background: #0c1526 !important;
  }
  body.is-app-chrome .studio-thumbs {
    background: #070d18;
  }

  /*
   * Files sheet: dense SMALL thumbs so many fit while product stays visible.
   * Compact Choose file (not a full-width fat bar). Close/X clear of page-scroll-rail.
   */
  body.is-app-chrome .studio-drawer-head {
    padding: 6px 28px 8px 10px !important; /* right pad clears custom scroll rail */
    gap: 6px;
    flex-wrap: nowrap;
  }
  body.is-app-chrome .studio-drawer-actions {
    margin-left: 0;
    flex: none;
    order: -1; /* pin/close on the LEFT so never under the right scrollbar */
    gap: 4px;
  }
  body.is-app-chrome .studio-sheet-tabs {
    order: 0;
    flex: 1 1 auto;
  }
  body.is-app-chrome .studio-pin-btn {
    display: none !important; /* pin is desktop-only; sheet has ✕ */
  }
  /*
   * Page scroll rail sits at z-index 200 and was covering drawer chrome (S/M/L, X).
   * While Studio is open, keep the rail under the sheet so controls stay usable.
   */
  body.studio-sheet-open .page-scroll-rail {
    z-index: 120 !important;
  }
  body.is-app-chrome .studio-drawer.is-open {
    z-index: 160 !important;
  }

  body.is-app-chrome .studio-panel[data-panel="files"],
  body.studio-sheet-open .studio-panel[data-panel="files"] {
    display: flex;
    flex-direction: column;
    padding: 8px 28px 10px 10px !important; /* right pad clears scroll rail */
  }
  body.is-app-chrome .studio-panel[data-panel="files"][hidden],
  body.studio-sheet-open .studio-panel[data-panel="files"][hidden] {
    display: none !important;
  }
  body.is-app-chrome .studio-choose-file,
  body.studio-sheet-open .studio-choose-file {
    width: auto !important;
    max-width: max-content;
    align-self: flex-start;
    display: inline-flex !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 600;
    margin: 0 0 6px;
    border-radius: 999px;
    flex: none;
  }
  body.is-app-chrome .studio-files-toolbar,
  body.studio-sheet-open .studio-files-toolbar {
    margin: 4px 0 6px;
    padding-right: 4px;
    flex: none;
    position: relative;
    z-index: 2;
  }
  body.is-app-chrome .studio-thumb-size,
  body.studio-sheet-open .studio-thumb-size {
    flex: none;
    margin-right: 2px;
  }

  /*
   * Square stamp thumbs — never stretch tall in a flex-grown grid row.
   * Grid hugs content (align-content:start); each tile is aspect-ratio 1:1.
   */
  body.is-app-chrome .studio-thumbs.size-s,
  body.is-app-chrome .studio-thumbs.size-m,
  body.is-app-chrome .studio-thumbs.size-l,
  body.is-app-chrome .studio-thumbs,
  body.studio-sheet-open .studio-thumbs.size-s,
  body.studio-sheet-open .studio-thumbs.size-m,
  body.studio-sheet-open .studio-thumbs.size-l,
  body.studio-sheet-open .studio-thumbs {
    display: grid !important;
    grid-template-columns: repeat(3, 64px) !important;
    grid-auto-rows: 64px !important;
    justify-content: start !important;
    align-content: start !important;
    align-items: start !important;
    gap: 8px !important;
    width: 100%;
    flex: 0 1 auto !important; /* do NOT grow — growth was stretching rows tall */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.is-app-chrome .studio-thumbs.size-s,
  body.studio-sheet-open .studio-thumbs.size-s {
    grid-template-columns: repeat(4, 52px) !important;
    grid-auto-rows: 52px !important;
    gap: 6px !important;
  }
  body.is-app-chrome .studio-thumbs.size-l,
  body.studio-sheet-open .studio-thumbs.size-l {
    grid-template-columns: repeat(3, 80px) !important;
    grid-auto-rows: 80px !important;
  }
  body.is-app-chrome .studio-thumbs .studio-thumb-name,
  body.studio-sheet-open .studio-thumbs .studio-thumb-name {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  body.is-app-chrome .studio-thumb,
  body.studio-sheet-open .studio-thumb,
  body.is-app-chrome .studio-thumbs.size-l .studio-thumb,
  body.studio-sheet-open .studio-thumbs.size-l .studio-thumb {
    display: block !important;
    flex-direction: unset !important;
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    align-self: start !important;
    box-sizing: border-box !important;
  }
  body.is-app-chrome .studio-thumbs.size-s .studio-thumb,
  body.studio-sheet-open .studio-thumbs.size-s .studio-thumb {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }
  body.is-app-chrome .studio-thumbs.size-l .studio-thumb,
  body.studio-sheet-open .studio-thumbs.size-l .studio-thumb {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
  }
  body.is-app-chrome .studio-thumb,
  body.studio-sheet-open .studio-thumb {
    background: #0a0f18 !important;
  }
  body.is-app-chrome .studio-thumb img,
  body.studio-sheet-open .studio-thumb img,
  body.is-app-chrome .studio-thumbs.size-l .studio-thumb img,
  body.studio-sheet-open .studio-thumbs.size-l .studio-thumb img,
  body.is-app-chrome .studio-thumbs.size-s .studio-thumb img,
  body.studio-sheet-open .studio-thumbs.size-s .studio-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    /* contain = full image visible (no cropped bottom); letterbox if needed */
    object-fit: contain !important;
    object-position: center !important;
  }
  body.is-app-chrome .studio-thumb.used::after,
  body.studio-sheet-open .studio-thumb.used::after {
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    font-size: 8px;
  }
  body.is-app-chrome .studio-hint {
    display: none;
  }
  body.is-app-chrome .studio-empty {
    font-size: 11px;
    margin-top: 6px;
  }

  /* One bottom chrome only — hide ticker while Studio sheet is open */
  body.studio-sheet-open .ticker {
    visibility: hidden;
    pointer-events: none;
  }
  /* Ensure a single app bottom nav (no stacking / double-paint) */
  body.is-app-chrome .app-bottom-nav {
    display: block !important;
    z-index: 150;
  }
  body.is-app-chrome .dock,
  body.studio-sheet-open .dock {
    display: none !important;
  }

  /*
   * When Studio is open: stage fills ONLY the visible area above the sheet
   * so the 3D product is centered in what the user can actually see.
   */
  body.studio-sheet-open #stageEditor {
    position: relative;
    z-index: 50;
    height: var(--studio-stage-h, min(52vh, 480px)) !important;
    max-height: var(--studio-stage-h, min(52vh, 480px)) !important;
    min-height: 220px !important;
  }
  body.studio-sheet-open #canvasStage {
    z-index: 51;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Customize lives in Studio sheet — hide the always-on side/bottom strip */
  .stage-editor.is-app-sheet > .customizer:not(.is-sheet-panel),
  body.is-app-chrome .stage-editor > .customizer:not(.is-sheet-panel) {
    display: none !important;
  }

  /* Customizer inside Studio sheet — stay opaque with the sheet */
  .customizer.is-sheet-panel {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(70vh, 680px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #070d18 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    right: auto !important;
    top: auto !important;
    z-index: auto !important;
  }
  .customizer.is-sheet-panel::before,
  .customizer.is-sheet-panel::after {
    display: none !important;
  }
  .customizer.is-sheet-panel .customizer-title {
    display: none; /* sheet tab already says Customize */
  }
  .customizer.is-sheet-panel .customizer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 4px 8px;
    background: #070d18;
  }
  .customizer.is-sheet-panel .cz-actions {
    flex: 0 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #070d18;
    padding: 10px 8px 12px;
  }
  .studio-customize-host {
    min-height: 0;
    background: #070d18;
  }

  /*
   * Tablet Customize — equal 3-column grid, two compact option rows:
   *   Row 1: Product type | Size | Style  (equal width)
   *   Row 2: Orientation | Paper / Thickness / Frame… (equal width)
   * Phone stays single column.
   * Grid lives on .customizer-body so .cz-actions can stay a sticky footer.
   */
  @media (min-width: 641px) {
    .customizer.is-sheet-panel .customizer-body {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      column-gap: 12px;
      row-gap: 4px;
      align-content: start;
      align-items: end;
      padding: 4px 20px 8px 8px !important;
    }
    .customizer.is-sheet-panel .cz-group {
      margin-bottom: 6px;
      min-width: 0;
      width: 100%;
      max-width: none;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .customizer.is-sheet-panel #czPrintQualityHost:empty {
      display: none !important;
    }

    /* Row 1 — equal thirds */
    .customizer.is-sheet-panel .customizer-body > .cz-group:has(#czProductType) {
      grid-column: 1 !important;
      grid-row: 1 !important;
    }
    .customizer.is-sheet-panel #czSizeGroup {
      grid-column: 2 !important;
      grid-row: 1 !important;
      width: auto !important;
      max-width: none !important;
    }
    .customizer.is-sheet-panel #czStyleGroup {
      grid-column: 3 !important;
      grid-row: 1 !important;
    }

    /* Row 2 — equal thirds (visible fields only; hidden ones skip) */
    .customizer.is-sheet-panel #czOrientGroup {
      grid-column: auto;
      grid-row: auto;
    }
    .customizer.is-sheet-panel #czPaperGroup {
      grid-column: auto;
      grid-row: auto;
    }
    .customizer.is-sheet-panel #czFrameGroup {
      grid-column: auto;
      grid-row: auto;
    }
    .customizer.is-sheet-panel #czThicknessGroup {
      grid-column: auto;
      grid-row: auto;
    }
    .customizer.is-sheet-panel #czEdgeGroup {
      grid-column: auto;
      grid-row: auto;
    }

    .customizer.is-sheet-panel .cz-group label {
      font-size: 8px;
      margin-bottom: 4px;
      letter-spacing: 0.08em;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 1.15em;
    }
    .customizer.is-sheet-panel .cz-select {
      width: 100% !important;
      max-width: 100% !important;
      height: 36px;
      box-sizing: border-box;
      padding: 0 28px 0 10px;
      font-size: 12px;
      line-height: 36px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Full-width sections inside scroll body */
    .customizer.is-sheet-panel #czColorGroup,
    .customizer.is-sheet-panel #czDesignGroup,
    .customizer.is-sheet-panel #czEmbGuide,
    .customizer.is-sheet-panel .cz-divider {
      grid-column: 1 / -1 !important;
    }

    /* Where to print — tablet sheet uses PiP only */
    .customizer.is-sheet-panel #czPrintAreaGroup {
      display: none !important;
    }


    .customizer.is-sheet-panel .cz-hint {
      display: none;
    }
    .customizer.is-sheet-panel #czDesignHint {
      display: block;
      font-size: 9px;
      line-height: 1.3;
      margin-top: 4px;
    }
    .customizer.is-sheet-panel .cz-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 0;
      padding: 10px 12px 12px;
    }
    .customizer.is-sheet-panel .cz-actions .btn {
      width: 100%;
      padding: 8px 10px;
      font-size: 11px;
    }
    .customizer.is-sheet-panel .cz-design-controls {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
    }
    .customizer.is-sheet-panel .cz-swatches {
      max-height: 56px;
    }
  }
  .studio-sheet-tabs {
    display: flex !important;
    flex: 1 1 auto;
    gap: 4px;
    justify-content: center;
    min-width: 0;
  }
  .studio-sheet-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ivory-dim);
    font: 600 9px var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .studio-sheet-tab.on {
    color: var(--gold);
    border-color: rgba(255, 45, 111, 0.35);
    background: rgba(255, 45, 111, 0.1);
  }
  .studio-drawer-title {
    display: none; /* tabs replace the title on app chrome */
  }
}

/* Custom page scroll rail — desktop/phone hide; tablet media enables (only bar) */
.page-scroll-rail {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  z-index: 200;
  background: #070c17;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: auto;
  touch-action: none;
  box-sizing: border-box;
}
.page-scroll-track {
  position: absolute;
  inset: 10px 3px;
  border-radius: 10px;
  background: #0c1220;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.page-scroll-thumb {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 0;
  height: 72px;
  min-height: 56px;
  border-radius: 9px;
  background: #556985;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  cursor: grab;
  touch-action: none;
}
.page-scroll-thumb:active,
.page-scroll-thumb.is-dragging {
  cursor: grabbing;
  background: #ff2d6f;
}

/*
 * TABLET (portrait + landscape): ONE permanent thick scrollbar only.
 * Hide native page bars so we never double-up with the custom rail.
 * Desktop (>1366) and phone (≤640) keep normal/native scroll behavior.
 */
@media (min-width: 641px) and (max-width: 1366px) {
  /* Float panel: hug the right edge of the stage (rail is outside via body padding) */
  .cz-print-quality.is-stage-float {
    right: 6px !important;
    top: 8px !important;
    width: min(190px, 24vw) !important;
    max-width: 200px !important;
  }

  html {
    overflow-y: scroll !important;
    height: auto !important;
    /* Reserve space for the custom rail only — not a second native bar */
    scrollbar-gutter: auto;
    scrollbar-width: none; /* Firefox: hide native */
  }
  body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100%;
    padding-right: 20px; /* room for the single custom rail */
    scrollbar-width: none;
  }
  body.is-loading {
    overflow: hidden !important;
  }

  /* WebKit/Blink: hide native page scrollbar entirely on tablet */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
  }

  .stage {
    overflow: visible;
    min-height: 0;
  }
  .stage-editor {
    height: min(72vh, 760px);
    min-height: 420px;
    max-height: none;
    overflow: hidden;
  }

  /* Sole always-visible page scrollbar */
  .page-scroll-rail:not([hidden]) {
    display: block !important;
  }
}

/*
 * TABLET LANDSCAPE — split stage (app chrome):
 *  left  ~38%: smaller placard + PiP
 *  right ~62%: 3D render only (full height)
 * Customize is NOT always visible — open via bottom nav Studio → Customize tab.
 */
@media (min-width: 641px) and (max-width: 1180px) and (orientation: landscape) {
  .stage-editor {
    display: grid !important;
    grid-template-columns: minmax(140px, 30%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: min(78vh, 720px) !important;
    min-height: 400px !important;
    overflow: hidden !important;
    --studio-rail-w: 0px;
    --studio-drawer-w: 100%;
    margin-bottom: 0;
  }
  /* No left Files/Layers rail — Studio is the bottom sheet */
  .studio-rail { display: none !important; }

  /* Left column: placard + minimap (not floating over the product) */
  .stage-side {
    position: relative !important;
    inset: auto !important;
    grid-column: 1;
    grid-row: 1;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 8px 8px 8px 10px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
    background: rgba(6, 10, 18, 0.55);
    border-right: 1px solid var(--hair);
  }

  .stage-editor .placard,
  .placard {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1;
    flex: 0 1 auto;
    overflow: visible;
  }
  .stage-editor.studio-rail-open .placard {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* Compact placard — tablet left column (smaller than before) */
  .placard .p-label {
    font-size: 6px;
    letter-spacing: 0.1em;
    margin-bottom: 2px;
    gap: 4px;
  }
  .placard .p-label::before {
    width: 8px;
  }
  .placard .p-body h3 {
    font-size: 0.72rem;
    line-height: 1.15;
    margin-bottom: 1px;
  }
  .placard .p-body > p {
    font-size: 7px;
    letter-spacing: 0.04em;
    line-height: 1.25;
  }
  .placard .p-estimate {
    margin-top: 4px;
    padding-top: 4px;
  }
  .placard .p-estimate-row {
    font-size: 9px;
    margin-bottom: 1px;
    gap: 6px;
    line-height: 1.35;
  }
  .placard .p-sale-edit {
    margin-bottom: 4px;
  }
  .placard .p-sale-edit label {
    font-size: 7px;
    margin-bottom: 2px;
  }
  .placard .p-sale-edit-row {
    gap: 4px;
  }
  .placard .p-sale-edit-row input {
    font-size: 11px;
    padding: 3px 5px;
    min-height: 0;
  }
  .placard .p-sale-edit-row .btn {
    font-size: 8px;
    padding: 4px 6px;
  }
  .placard .p-foot {
    margin-top: 6px;
    padding-top: 6px;
    position: relative;
    z-index: 1;
  }
  .placard .p-sample-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: 100%;
  }
  .placard .p-sample-row .btn {
    flex: 1 1 auto;
    font-size: 9px;
    padding: 6px 6px;
    min-height: 0;
    white-space: nowrap;
  }
  .placard .p-qty-btn {
    width: 24px;
    height: auto;
    font-size: 12px;
  }
  .placard .p-qty input {
    width: 28px;
    font-size: 11px;
    padding: 4px 2px;
  }
  .placard .p-details {
    margin-top: 2px;
  }
  .placard .p-details summary {
    font-size: 8px;
    padding: 2px 0;
  }
  .placard .p-details-body {
    font-size: 9px;
    line-height: 1.35;
  }
  .placard .p-estimate-note {
    font-size: 9px;
    margin: 0 0 4px;
  }

  .cz-minimap,
  .stage-editor.studio-rail-open .cz-minimap {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    margin-top: auto !important; /* pin PiP to bottom of left column */
    flex: 0 0 auto;
    z-index: 1;
    box-sizing: border-box;
  }

  /* Right half: 3D product only */
  #canvasStage {
    grid-column: 2;
    grid-row: 1;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    order: unset;
    z-index: 1;
    overflow: hidden;
    background: rgba(4, 8, 16, 0.35);
  }

  .stage-editor .dock,
  .dock {
    display: none !important; /* controls live in Customize sheet */
  }

  /* Drawer/scrim layering handled in max-width 1366 app-chrome rules */
  .studio-sheet-handle {
    display: flex !important;
    justify-content: center;
    padding: 8px 0 4px;
    flex: none;
  }
  .studio-sheet-handle span {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
  }
  .studio-drawer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 8px;
  }
  .studio-panel {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
}

/* Wider landscape tablets (iPad Pro landscape) — same app split, no always-on customizer */
@media (min-width: 1181px) and (max-width: 1366px) and (orientation: landscape) {
  .stage-editor {
    display: grid !important;
    grid-template-columns: minmax(150px, 28%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: min(78vh, 760px) !important;
    min-height: 440px !important;
    overflow: hidden !important;
    --studio-rail-w: 0px;
  }
  .studio-rail { display: none !important; }
  .stage-side {
    position: relative !important;
    inset: auto !important;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    min-height: 0;
    padding: 12px 12px 12px 14px;
    box-sizing: border-box;
    overflow-y: auto;
    pointer-events: auto;
    background: rgba(6, 10, 18, 0.45);
    border-right: 1px solid var(--hair);
  }
  .stage-editor .placard,
  .placard {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .stage-editor.studio-rail-open .placard {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .cz-minimap,
  .stage-editor.studio-rail-open .cz-minimap {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: auto !important;
  }
  #canvasStage {
    grid-column: 2;
    grid-row: 1;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  /* layering from app-chrome rules */
}

/* Portrait tablet: rail ends above bottom nav */
@media (min-width: 641px) and (max-width: 1180px) and (orientation: portrait) {
  .page-scroll-rail {
    bottom: calc(var(--app-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Studio Text / apparel fonts (Mind Matter vibe) ---------- */
.studio-text-hero {
  margin: 0 0 14px;
  padding: 12px 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 45, 111, 0.18);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255, 45, 111, 0.14), transparent 55%),
    linear-gradient(165deg, rgba(18, 26, 42, 0.95), rgba(6, 10, 18, 0.98));
}
.studio-text-kicker {
  font: 600 9px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.studio-text-lede {
  margin: 0;
  font: 400 12px/1.45 var(--sans);
  color: var(--ivory-dim);
}

.studio-text-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
}
.studio-text-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10px var(--mono);
  color: var(--gold);
  background: rgba(255, 45, 111, 0.14);
  border: 1px solid rgba(255, 45, 111, 0.35);
  flex-shrink: 0;
}
.studio-text-step-title {
  font: 600 10px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory);
}

.studio-text-label {
  display: block;
  margin: 12px 0 6px;
  font: 600 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.studio-text-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: rgba(0, 0, 0, 0.4);
  color: var(--ivory);
  font: 600 15px var(--sans);
  letter-spacing: 0.02em;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.studio-text-input:focus {
  outline: none;
  border-color: rgba(255, 45, 111, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 45, 111, 0.12);
}
.studio-text-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
  font-weight: 500;
}

/* Large live example — matches dark stage vibe */
.studio-text-preview {
  margin: 12px 0 4px;
}
.studio-text-preview-stage {
  position: relative;
  min-height: 110px;
  padding: 18px 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(255, 45, 111, 0.1), transparent 70%),
    linear-gradient(180deg, #0c1220 0%, #060a12 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}
.studio-text-preview-label {
  position: absolute;
  top: 8px;
  left: 10px;
  font: 600 8px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.studio-text-preview-word {
  margin: 8px 0 0;
  max-width: 100%;
  padding: 0 4px;
  font-size: clamp(1.35rem, 4.2vw, 1.85rem);
  line-height: 1.15;
  text-align: center;
  word-break: break-word;
  color: #fff;
  transition: color 0.12s, font-family 0.12s;
}
.studio-text-preview-font {
  font: 600 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
}

.studio-text-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 4px 0 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: rgba(0, 0, 0, 0.22);
}
.studio-text-color {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 10px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.studio-text-color input[type="color"] {
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.studio-text-font-hint {
  margin: 0 0 8px !important;
}

.studio-font-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  max-height: min(38vh, 280px);
  overflow-y: auto;
  margin: 0 0 14px;
  padding: 2px 4px 4px 0;
  scrollbar-width: thin;
  scrollbar-color: #243248 transparent;
}
.studio-font-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  padding: 12px 12px 10px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  color: var(--ivory);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.14s, background 0.14s, transform 0.12s, box-shadow 0.14s;
}
.studio-font-card:hover {
  border-color: rgba(255, 45, 111, 0.45);
  background: rgba(255, 45, 111, 0.08);
  transform: translateY(-1px);
}
.studio-font-card.on {
  border-color: var(--gold);
  background: rgba(255, 45, 111, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 45, 111, 0.25), 0 8px 24px rgba(0, 0, 0, 0.25);
}
.studio-font-sample {
  grid-column: 1 / -1;
  font-size: 1.4rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.5em;
}
.studio-font-name {
  font: 600 10px var(--mono);
  letter-spacing: 0.05em;
  color: var(--ivory-dim);
}
.studio-font-cat {
  font: 500 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  justify-self: end;
}

.studio-text-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff2d6f 0%, #e01858 100%);
  color: #fff;
  font: 700 12px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(255, 45, 111, 0.28);
  transition: filter 0.12s, transform 0.12s;
}
.studio-text-apply:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.studio-text-apply:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}
.studio-text-apply-ico {
  font-size: 0.95rem;
  opacity: 0.95;
}

/* ---------- Design Studio (Photoshop-style print editor) ---------- */
/* Above product rail (z~12) and driver (13k) so one full-screen studio — no double nav */
body.fabric-editor-open { overflow: hidden !important; }
body.fabric-editor-open .studio-rail,
body.fabric-editor-open .studio-drawer,
body.fabric-editor-open .studio-sheet-scrim {
  visibility: hidden !important;
  pointer-events: none !important;
}
.ps-modal.fabric-editor-modal,
.fabric-editor-modal.ps-modal {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: flex;
  align-items: stretch;
  background: #0a0c12;
}
.fabric-editor-modal[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.ps-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #0a0c12;
  color: var(--ivory, #f2f4f8);
  overflow: hidden;
}

/* Top menu bar */
.ps-menubar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #11151f;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  z-index: 2;
}
.ps-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ps-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font: 800 11px var(--mono);
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, #ff2d6f, #c4124a);
  box-shadow: 0 4px 16px rgba(255, 45, 111, 0.35);
}
.ps-brand-kicker {
  font: 600 8px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #ff2d6f);
}
.ps-brand h2 {
  margin: 0;
  font: 600 1.05rem var(--serif, Georgia, serif);
  color: #fff;
  line-height: 1.15;
}
.ps-menubar-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ps-meta {
  font: 500 10px var(--mono);
  letter-spacing: 0.04em;
  color: #9aa3b5;
  text-align: center;
  white-space: nowrap;
}
.ps-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 11px var(--mono);
  color: #c5cddb;
}
.ps-icon-btn {
  width: 30px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #c5cddb;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ps-icon-btn:hover {
  border-color: rgba(255, 45, 111, 0.4);
  color: #fff;
}
.ps-menubar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}
.ps-btn-primary {
  padding: 11px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff2d6f, #e01858);
  color: #fff;
  font: 700 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 45, 111, 0.28);
}
.ps-btn-primary:hover { filter: brightness(1.06); }
.ps-btn-primary.full { width: 100%; margin-top: 10px; }
.ps-btn-ghost {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #9aa3b5;
  font: 600 11px var(--mono);
  cursor: pointer;
}
.ps-btn-ghost:hover { color: #fff; }
.ps-tech {
  padding: 8px 16px;
  font-size: 0.82rem;
  background: rgba(255, 45, 111, 0.1);
  color: #ffc0d4;
  border-bottom: 1px solid rgba(255, 45, 111, 0.22);
  flex-shrink: 0;
}
.ps-tech[hidden] { display: none !important; }

/* 3-column workspace */
.ps-workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(260px, 300px);
  overflow: hidden;
}
@media (max-width: 900px) {
  .ps-workspace {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  .ps-panel {
    grid-column: 1 / -1;
    max-height: 38vh;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  .ps-menubar {
    grid-template-columns: 1fr auto;
  }
  .ps-menubar-center { display: none; }
}

/* Left tool strip */
.ps-tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 10px 6px;
  background: #0e121a;
  border-right: 1px solid rgba(255,255,255,0.07);
  z-index: 1;
}
.ps-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #8b93a5;
  cursor: pointer;
  font: 600 8px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ps-tool:hover {
  color: #fff;
  background: rgba(255,255,255,0.04);
}
.ps-tool.on {
  color: #f5d76e;
  background: rgba(245, 215, 110, 0.1);
  box-shadow: inset 0 0 0 1px rgba(245, 215, 110, 0.35);
}
.ps-tool.ghost { margin-top: 4px; }
.ps-tools-spacer { flex: 1; min-height: 8px; }

/* Center pasteboard */
.ps-pasteboard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 20px 16px 16px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255, 45, 111, 0.05), transparent 65%),
    repeating-conic-gradient(from 0deg, #12161f 0% 25%, #0e1219 0% 50%) 0 0 / 20px 20px;
}
.ps-board-label {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font: 600 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 215, 110, 0.7);
  pointer-events: none;
  white-space: nowrap;
}
.ps-stage-host {
  position: relative;
  display: inline-block;
  border-radius: 4px;
  box-shadow:
    0 0 0 2px rgba(245, 215, 110, 0.75),
    0 0 0 1px rgba(0,0,0,0.5),
    0 32px 80px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(245, 215, 110, 0.08);
}
.ps-stage-host canvas {
  display: block;
  max-width: none;
  max-height: none;
  border-radius: 2px;
}
/* Fabric wraps the board in .canvas-container: the LOWER canvas is the artwork
   surface, the UPPER canvas is the transparent selection overlay stacked on
   top of it. The board background may only ever sit on the lower canvas — an
   opaque background on the upper canvas hides every layer underneath it
   (the "thumb in layers, blank board" bug). */
.ps-stage-host .canvas-container {
  position: relative !important;
  margin: 0 auto;
}
.ps-stage-host .lower-canvas,
.ps-stage-host > canvas {
  background: #121820;
}
.ps-stage-host .upper-canvas {
  background: transparent !important;
  pointer-events: auto !important;
}
.ps-stage-host .lower-canvas {
  pointer-events: none !important;
}
.ps-stage-host .canvas-container .lower-canvas,
.ps-stage-host .canvas-container .upper-canvas {
  max-width: none !important;
  max-height: none !important;
}
.ps-enhance {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 18, 0.72);
  border-radius: 2px;
  pointer-events: auto;
}
.ps-enhance[hidden] { display: none !important; }
.ps-enhance-card {
  text-align: center;
  padding: 22px 26px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 45, 111, 0.35);
  background: #0e1524;
  max-width: 300px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.ps-enhance-card strong {
  display: block;
  margin: 12px 0 6px;
  color: #fff;
  font-size: 0.95rem;
}
.ps-enhance-card p {
  margin: 0;
  font-size: 0.82rem;
  color: #9aa3b5;
  line-height: 1.4;
}
.ps-enhance-eta {
  margin: 10px 0 0 !important;
  font: 500 0.72rem var(--mono, ui-monospace, monospace) !important;
  letter-spacing: 0.04em;
  color: #7a8396 !important;
}
.ps-enhance-cancel {
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #c5cddb;
  font: 600 11px var(--mono, ui-monospace, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ps-enhance-cancel:hover {
  color: #fff;
  border-color: rgba(255, 45, 111, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .ps-mm-spin,
  .design-upscale-mark.mm-mark-spin {
    animation: none !important;
  }
}
/* Upscale loader — Mind Matter diamond spins fluently (Design studio) */
.ps-spin,
.ps-mm-spin {
  width: 48px;
  height: 64px;
  margin: 0 auto 8px;
  color: #ff2d6f;
  display: flex;
  align-items: center;
  justify-content: center;
  animation:
    mmMarkSpinFluent 1.6s linear infinite,
    mmMarkGlowPulse 1.6s ease-in-out infinite;
  will-change: transform, filter;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.ps-spin svg,
.ps-mm-spin svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes mmMarkSpinFluent {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}
@keyframes mmMarkGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 45, 111, 0.55)); }
  50% { filter: drop-shadow(0 0 20px rgba(255, 45, 111, 0.95)); }
}
.ps-status {
  margin: 0;
  font-size: 0.8rem;
  color: #9aa3b5;
  text-align: center;
  min-height: 1.2em;
  max-width: 56ch;
}

/* Right layers panel */
.ps-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #11151f;
  border-left: 1px solid rgba(255,255,255,0.07);
  padding: 12px 12px 14px;
  overflow: hidden;
}
.ps-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 10px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c5cddb;
  margin-bottom: 6px;
}
.ps-panel-count {
  color: var(--gold, #ff2d6f);
  font-weight: 700;
}
.ps-panel-hint {
  margin: 0 0 10px;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #7a8396;
}
.ps-layers {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  min-height: 160px;
}
.ps-layer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(0,0,0,0.18);
}
.ps-layer.empty {
  border: 1px dashed rgba(255,255,255,0.1);
  background: transparent;
  padding: 6px 8px;
}
.ps-layer.filled.on {
  border-color: rgba(245, 215, 110, 0.5);
  background: rgba(245, 215, 110, 0.08);
}
.ps-layer.locked { opacity: 0.92; }
.ps-layer-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.ps-layer-thumb {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  object-fit: cover;
  background: #0a0e16;
  border: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.ps-layer-thumb.large {
  width: 56px;
  height: 56px;
  border-radius: 9px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  object-fit: cover;
  background: #0a0e16;
}
.ps-layer.locked .ps-layer-thumb.large {
  outline: 2px solid rgba(245, 215, 110, 0.55);
  outline-offset: 1px;
}
.ps-layer.photo-first .ps-layer-main {
  gap: 10px;
}
.ps-layer-thumb.placeholder {
  display: grid;
  place-items: center;
  font: 700 11px var(--mono);
  color: #6b7385;
}
.ps-selected-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ps-selected-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0e16;
  border: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.ps-selected-thumb.empty { display: none; }
.ps-selected-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-selected-row .ps-props-name { margin: 0; }

/* Text drawer — same options as product Text panel */
.ps-text-drawer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(4, 8, 14, 0.55);
  backdrop-filter: blur(4px);
}
.ps-text-drawer[hidden] { display: none !important; }
.ps-text-drawer-inner {
  width: min(360px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: 16px 14px 20px;
  background: #11151f;
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ps-text-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ps-text-drawer-head strong {
  font: 600 1rem var(--serif, Georgia, serif);
  color: #fff;
}
.ps-text-input {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #0a0e16;
  color: #fff;
  padding: 10px 12px;
  font: 600 1rem system-ui, sans-serif;
}
.ps-text-preview {
  padding: 16px 12px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,45,111,0.12), transparent 70%), #0a0e16;
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.ps-text-preview span {
  display: block;
  font-size: 1.6rem;
  line-height: 1.2;
  word-break: break-word;
}
.ps-text-preview small {
  display: block;
  margin-top: 8px;
  font: 600 10px var(--mono);
  color: #7a8396;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ps-text-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ps-text-color {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 600 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a8396;
}
.ps-text-color input[type="color"] {
  width: 44px;
  height: 32px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.ps-text-stroke-on {
  font: 600 11px var(--mono);
  color: #c5cddb;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ps-font-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-bottom: 4px;
}
.ps-font-card {
  text-align: left;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.25);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ps-font-card:hover {
  border-color: rgba(255, 45, 111, 0.4);
}
.ps-font-card.on {
  border-color: rgba(245, 215, 110, 0.55);
  background: rgba(245, 215, 110, 0.08);
}
.ps-font-sample {
  font-size: 1.15rem;
  line-height: 1.15;
  min-height: 1.4em;
}
.ps-font-name {
  font: 600 10px var(--mono);
  color: #c5cddb;
}
.ps-font-cat {
  font: 500 9px var(--mono);
  color: #6b7385;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ps-chip:disabled {
  pointer-events: none;
}
.ps-layer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ps-layer-title {
  font-size: 0.82rem;
  color: #eef1f6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-layer-sub {
  font: 500 9px var(--mono);
  color: #7a8396;
}
.ps-layer-empty-label {
  flex: 1;
  font-size: 0.78rem;
  color: #6b7385;
}
.ps-layer-acts {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.ps-layer-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #9aa3b5;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.ps-layer-btn:hover {
  border-color: rgba(255, 45, 111, 0.4);
  color: #fff;
}
.ps-layer-btn.primary {
  border-color: rgba(255, 45, 111, 0.35);
  color: var(--gold, #ff2d6f);
}
.ps-layer-btn.danger:hover {
  color: #f5a9a0;
  border-color: #e74c3c;
}
.ps-props {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.ps-props-label {
  font: 600 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a8396;
  margin-bottom: 4px;
}
.ps-props-name {
  margin: 0 0 8px;
  font: 500 0.95rem var(--serif, Georgia, serif);
  color: #fff;
  min-height: 1.2em;
}
.ps-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 600 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a8396;
  margin-bottom: 8px;
}
.ps-field input[type="range"] {
  width: 100%;
  accent-color: #ff2d6f;
}
.ps-props-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ps-chip {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: #c5cddb;
  font: 600 10px var(--mono);
  cursor: pointer;
}
.ps-chip:hover {
  border-color: rgba(255, 45, 111, 0.4);
  color: #fff;
}
.ps-chip.danger:hover {
  border-color: #e74c3c;
  color: #f5a9a0;
}
.ps-toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  width: min(420px, 92%);
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 45, 111, 0.35);
  background: rgba(12, 16, 28, 0.97);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  z-index: 20;
}
.ps-toast strong {
  display: block;
  color: var(--gold, #ff2d6f);
  margin-bottom: 6px;
}
.ps-toast p {
  margin: 0 0 10px;
  font-size: 0.86rem;
  color: #9aa3b5;
  line-height: 1.45;
}

/* Editor tour (Driver.js) — above Design studio (z 12000) + stage chrome */
.driver-overlay,
div#driver-dummy-element,
.driver-active-element {
  z-index: 13000 !important;
}
.driver-overlay,
div#driver-dummy-element {
  z-index: 14500 !important;
}
.driver-popover.mm-tour-popover {
  z-index: 14510 !important;
  background: #0e1524;
  color: #f2f4f8;
  border: 1px solid rgba(255, 45, 111, 0.35);
  border-radius: 12px;
  max-width: 320px;
  min-height: 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  /* Kill empty double-layer hole in popover body */
  overflow: hidden;
}
.driver-popover.mm-tour-popover .driver-popover-title {
  font: 600 1rem var(--serif, Georgia, serif);
  color: #fff;
}
.driver-popover.mm-tour-popover .driver-popover-description {
  font-size: 0.88rem;
  color: #9aa3b5;
  line-height: 1.45;
  margin-bottom: 0;
}
.driver-popover.mm-tour-popover .driver-popover-footer {
  margin-top: 12px;
  gap: 8px;
}
/* When Design is open, dim product chrome completely under tour too */
body.fabric-editor-open.driver-active .studio-rail {
  visibility: hidden !important;
}
.driver-popover.mm-tour-popover .driver-popover-next-btn,
.driver-popover.mm-tour-popover .driver-popover-done-btn {
  background: #ff2d6f;
  color: #fff;
  border: none;
  text-shadow: none;
  border-radius: 8px;
}
.driver-popover.mm-tour-popover .driver-popover-prev-btn {
  background: transparent;
  color: #9aa3b5;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  text-shadow: none;
}

.studio-collage-cta { margin-top: 14px; }
.studio-help-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: none;
  background: none;
  color: var(--ivory-dim);
  font: 600 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.studio-help-link:hover { color: var(--gold); }

/* Design + Help sit at bottom of rail for discovery */
.studio-rail {
  display: flex;
  flex-direction: column;
}
.studio-rail-help {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.studio-rail-btn[data-action="design"].on,
.studio-rail-btn[data-action="design"]:hover {
  color: var(--gold);
}