/* public/editor/editor.css — STX Product Personalizer */
.stxp { --ink:#14213d; --soft:#4a5468; --line:#dfe2e8; --accent:#00aaff; --accent-d:#0090e0; --ok:#2e7d32; --code:#101418;
  /* inherit the storefront font (Dawn exposes --font-body-family); Archivo is the demo fallback */
  --stxp-font: var(--font-body-family, "Archivo", system-ui, sans-serif);
  font-family:var(--stxp-font); color:var(--ink);
  /* center the widget and keep it off the page edges (matches the storefront's content width) */
  width:min(1180px, calc(100% - 48px)); margin:24px auto;
  display:grid; grid-template-columns:1.1fr 1fr; background:#fff; border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:0 8px 30px rgba(20,33,61,.07); }
@media (max-width:800px){ .stxp{ grid-template-columns:1fr; } }

.stxp-stage-col{ border-right:1px solid var(--line); background:#fafbfc; padding:16px; display:flex; flex-direction:column; align-items:center; }
@media (max-width:800px){ .stxp-stage-col{ border-right:none; border-bottom:1px solid var(--line); } }
.stxp-tabs{ display:flex; gap:6px; margin-bottom:12px; align-self:flex-start; }
.stxp-tab{ font:600 11.5px/1 var(--stxp-font); letter-spacing:.05em; padding:7px 15px; border-radius:999px; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--soft); }
.stxp-tab.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.stxp-tab:focus-visible,.stxp-sw:focus-visible,.stxp-qty:focus-visible,.stxp-atc:focus-visible,.stxp-upload:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

.stxp-stage{ position:relative; width:100%; max-width:560px; touch-action:none; }
.stxp-stage img.stxp-shirt{ width:100%; display:block; border-radius:10px; }
.stxp-pending{ position:absolute; top:8px; right:8px; font:700 10px/1 var(--stxp-font); letter-spacing:.08em; background:#fff3cd; color:#7a5900; padding:5px 10px; border-radius:999px; display:none; }
.stxp-zone{ position:absolute; overflow:hidden; outline:1.5px dashed var(--accent); border-radius:3px; }
.stxp-zone.quiet{ outline-color:transparent; }
.stxp-ztag{ position:absolute; text-align:center; font:700 9.5px/1 var(--stxp-font); letter-spacing:1.5px; color:var(--accent); pointer-events:none; }
/* alignment guides (.stxp-guide.v / .stxp-guide.h) are styled INLINE from
   editor.js — the JS owns the visuals so a stale cached stylesheet can never
   leave them invisible. No rules for them here on purpose. */
.stxp-logo{ position:absolute; cursor:grab; touch-action:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.stxp-logo.drag{ cursor:grabbing; }
.stxp-logo img{ width:100%; height:100%; display:block; pointer-events:none; }
.stxp-logo .sel{ position:absolute; inset:-6px; border:1.2px dashed #4a90d9; pointer-events:none; }
.stxp-logo .sel i{ position:absolute; width:8px; height:8px; background:#4a90d9; border-radius:50%; }
.stxp-logo .sel i:nth-child(1){left:-4px;top:-4px}.stxp-logo .sel i:nth-child(2){right:-4px;top:-4px}
.stxp-logo .sel i:nth-child(3){left:-4px;bottom:-4px}.stxp-logo .sel i:nth-child(4){right:-4px;bottom:-4px}
.stxp-hint{ font-size:11px; color:var(--soft); margin-top:9px; letter-spacing:.03em; }

/* Front + Back preview (read-only, both mockups side by side) */
.stxp-both{ display:flex; gap:14px; width:100%; max-width:560px; }
.stxp-mini{ flex:1 1 0; min-width:0; margin:0; }
.stxp-mini figcaption{ text-align:center; font:700 10px/1 var(--stxp-font); letter-spacing:.08em; text-transform:uppercase; color:var(--soft); margin-top:7px; }
.stxp-mstage{ position:relative; }
.stxp-mshirt{ width:100%; display:block; border-radius:10px; }
.stxp-mzone{ position:absolute; overflow:hidden; }
.stxp-mlogo{ position:absolute; transform:translate(-50%,-50%); filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }

.stxp-panel{ padding:26px 28px 24px; }
@media (max-width:800px){ .stxp-panel{ padding:20px 16px; } }
.stxp-title{ font:900 24px/1.05 var(--stxp-font); font-stretch:82%; margin:0 0 4px; }
.stxp-pricetop{ font-size:13.5px; color:var(--soft); margin-bottom:16px; }
.stxp-step{ margin-bottom:17px; }
.stxp-lbl{ display:flex; align-items:baseline; gap:8px; font:800 12px/1 var(--stxp-font); letter-spacing:.09em; text-transform:uppercase; margin-bottom:9px; }
.stxp-lbl .n{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:4px; background:var(--ink); color:#fff; font-size:10.5px; }
.stxp-lbl .val{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--soft); }

.stxp-sws{ display:flex; gap:10px; flex-wrap:wrap; }
.stxp-sw{ width:36px; height:36px; border-radius:50%; cursor:pointer; border:2px solid transparent; padding:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); transition:transform .12s; }
.stxp-sw:hover{ transform:scale(1.12); }
.stxp-sw.on{ border-color:var(--ink); box-shadow:inset 0 0 0 2px #fff; }

.stxp-upload{ width:100%; font-family:inherit; border:2px dashed var(--line); border-radius:12px; padding:13px; text-align:center; cursor:pointer; font-size:13.5px; color:var(--soft); background:#fbfbfc; }
.stxp-upload:hover{ border-color:var(--accent); color:var(--ink); }
.stxp-chip{ display:inline-flex; margin-top:8px; font:600 11.5px/1.4 var(--stxp-font); background:#e9f5ea; color:var(--ok); padding:3px 10px; border-radius:999px; }
.stxp-chip.warn{ background:#fdeeee; color:#b02a2a; }

.stxp-sizer{ display:flex; align-items:center; gap:12px; font-size:13px; }
.stxp-sizer input[type=range]{ flex:1; accent-color:var(--accent); }
.stxp-sizer .pct{ width:44px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.stxp-micro{ font-size:11.5px; color:var(--soft); margin-top:6px; }

.stxp-backrow{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; background:#fff; font:600 13.5px/1 var(--stxp-font); width:100%; text-align:left; color:var(--ink); }
.stxp-backrow .box{ width:18px; height:18px; border-radius:5px; border:2px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:12px; color:#fff; flex:none; }
.stxp-backrow.on{ border-color:var(--ink); }
.stxp-backrow.on .box{ background:var(--accent); border-color:var(--accent); }
.stxp-backrow .pr{ margin-left:auto; color:var(--soft); font-size:12.5px; font-weight:500; }

.stxp-qtys{ display:flex; gap:8px; }
.stxp-qty{ font:700 13.5px/1 var(--stxp-font); padding:9px 0; flex:1; border-radius:10px; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:var(--soft); }
.stxp-qty.on{ border-color:var(--ink); background:var(--ink); color:#fff; }

.stxp-pricebox{ border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; background:#fbfbfc; }
.stxp-chips{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:8px; font-size:12.5px; color:var(--soft); }
.stxp-chips .dot{ width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.stxp-chips .fc{ font:700 11px/1 var(--stxp-font); color:#7a3ce8; background:#f1e9ff; padding:3px 9px; border-radius:999px; }
.stxp-pline{ font-size:13.5px; }
.stxp-pline b{ font-weight:800; }
.stxp-pline .per{ color:var(--soft); font-size:12px; }
.stxp-verify{ font-size:10.5px; color:var(--soft); margin-top:5px; }
.stxp-verify.ok{ color:var(--ok); }

.stxp-atc{ width:100%; margin-top:14px; padding:15px; font:800 15px/1 var(--stxp-font); letter-spacing:.04em; text-transform:uppercase; border:none; border-radius:12px; cursor:pointer; background:var(--accent); color:#fff; }
.stxp-atc:hover{ background:var(--accent-d); }
.stxp-atc.added{ background:var(--ok); }
.stxp-atc:disabled{ opacity:.6; cursor:wait; }
.stxp-sub{ font-size:11.5px; color:var(--soft); text-align:center; margin-top:8px; }

/* sizes & quantity — per-size number inputs (min-12 order) */
.stxp-sizegrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
@media (max-width:520px){ .stxp-sizegrid{ grid-template-columns:repeat(3,1fr); } }
.stxp-sizecell{ display:flex; flex-direction:column; gap:5px; }
.stxp-sizecell .sz{ font:800 11.5px/1 var(--stxp-font); color:var(--soft); text-transform:uppercase; letter-spacing:.03em; display:flex; align-items:baseline; gap:4px; }
.stxp-sizecell .sz i{ font-style:normal; font-size:9.5px; font-weight:700; color:var(--accent); }
.stxp-sizecell input{ width:100%; font:700 15px/1 var(--stxp-font); text-align:center; padding:9px 4px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); -moz-appearance:textfield; }
.stxp-sizecell input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,170,255,.15); }
.stxp-sizecell input::-webkit-outer-spin-button,.stxp-sizecell input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stxp-micro.warn{ color:#b02a2a; font-weight:700; }
.stxp-tierhint{ font-size:11.5px; color:#a8631a; margin-top:6px; font-weight:600; }
.stxp-tierhint b{ color:var(--ok); font-weight:800; }

/* DTF: print-size slot buttons (Small / Medium / Large) */
.stxp-dtfsizes{ display:flex; gap:8px; }
.stxp-dtfsize{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; position:relative;
  font-family:var(--stxp-font); padding:10px 4px; border-radius:10px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--soft); }
.stxp-dtfsize b{ font-size:13px; color:var(--ink); }
.stxp-dtfsize span{ font-size:10.5px; }
.stxp-dtfsize.on{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,170,255,.15); }
.stxp-dtfsize.has i{ position:absolute; top:-7px; right:-6px; font-style:normal; width:18px; height:18px;
  border-radius:50%; background:var(--ok); color:#fff; font-size:11px; line-height:18px; text-align:center; }
.stxp-dtfsize:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

/* DTF: read-only overlays for the other slots holding artwork (click to edit) */
.stxp-ghost{ position:absolute; overflow:hidden; cursor:pointer; opacity:.85; }
.stxp-ghost:hover{ outline:1.5px dashed rgba(0,170,255,.55); }
.stxp-ghost img{ position:absolute; transform:translate(-50%,-50%); filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }

/* print-color count dropdown */
.stxp-colorcount{ width:100%; font:700 14px/1 var(--stxp-font); padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); cursor:pointer; }
.stxp-colorcount:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,170,255,.15); }

/* design notes textarea */
.stxp-note{ width:100%; font:500 13.5px/1.45 var(--stxp-font); color:var(--ink); border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; resize:vertical; min-height:64px; background:#fff; box-sizing:border-box; }
.stxp-note:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,170,255,.15); }
.stxp-note::placeholder{ color:#9aa2b1; }

/* contact fields (name + email) — required before checkout */
.stxp-contact{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:520px){ .stxp-contact{ grid-template-columns:1fr; } }
.stxp-cf{ width:100%; font:500 13.5px/1 var(--stxp-font); color:var(--ink); border:1.5px solid var(--line); border-radius:10px; padding:11px 12px; background:#fff; box-sizing:border-box; }
.stxp-cf:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,170,255,.15); }
.stxp-cf::placeholder{ color:#9aa2b1; }
.stxp-cf.warn{ border-color:#b02a2a; background:#fdf6f6; }

/* contact-required disclaimer above Add to Cart */
.stxp-disclaim{ font-size:11.5px; color:var(--soft); text-align:center; margin-top:14px; text-transform:uppercase; letter-spacing:.04em; }
.stxp-disclaim.warn{ color:#b02a2a; font-weight:700; }