:root{--navy:#14213d;--gold:#b8892d;--gold-l:#e9d8a6;--cream:#faf7f0;--ink:#1d1d1f;--muted:#6b6b70;--line:#e4dccb;--ok:#1b5e20;--bad:#8a1c1c;--r:12px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--cream)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.top{position:sticky;top:0;z-index:30;height:56px;display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--navy);color:#fff}
.brand img{height:40px;width:auto;background:#fff;border-radius:8px;padding:2px 6px}
.title{display:flex;flex-direction:column;line-height:1.15;flex:1;min-width:0}
.title strong{font-size:16px}.title span{font-size:13px;color:var(--gold-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);font-weight:600;cursor:pointer;text-decoration:none}
.btn.small{min-height:36px;padding:6px 12px;font-size:14px}
.btn.primary{background:var(--navy);color:#fff;width:100%;font-size:17px}
.btn.primary[disabled]{opacity:.6}
.btn.ghost{background:transparent;border-color:currentColor}
.top .btn.ghost{color:#fff;min-height:36px;padding:6px 14px}
main{max-width:1180px;margin:0 auto}
.stage{position:sticky;top:56px;z-index:20;background:linear-gradient(#efe8d8,#f6f1e6);border-bottom:1px solid var(--line);padding:6px 8px 0}
.canvas-wrap{height:min(38vh,400px);display:flex;align-items:center;justify-content:center}
#bag{width:100%;height:100%;touch-action:none;cursor:pointer}
.stage-bar{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);height:28px;padding:0 4px}
.mini{display:flex;gap:4px;align-items:center}
.tabs{position:sticky;top:calc(56px + 6px + min(38vh,400px) + 29px);z-index:19;display:flex;gap:4px;overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);padding:6px 8px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;border:0;background:transparent;padding:8px 12px;border-radius:999px;font-weight:600;color:var(--muted);min-height:40px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff}
.panel{padding:14px 14px 28px}
h2{font-size:20px;margin:4px 0 6px}h3{font-size:16px;margin:22px 0 6px}
.muted{color:var(--muted);font-size:14px;margin:4px 0 10px}
.row{display:flex;align-items:center}.gap{gap:8px}.wrap{flex-wrap:wrap}.grow{flex:1}
.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.style-card{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:6px;cursor:pointer;text-align:center;font-weight:600;font-size:14px}
.style-card canvas{width:100%;aspect-ratio:1/1}
.style-card[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-l)}
.parts{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px}
.part{flex:0 0 auto;display:flex;align-items:center;gap:6px;border:2px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px 4px 4px;cursor:pointer;font-size:14px;font-weight:600;min-height:40px}
.part i{width:28px;height:28px;border-radius:50%;background-size:cover;border:1px solid rgba(0,0,0,.2);display:inline-block}
.part b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px}
.part span{display:flex;flex-direction:column;line-height:1.15;text-align:left}.part .pc{font-weight:500;font-size:12px;color:#666}
.part[aria-pressed=true]{border-color:var(--gold);background:#fff8e6}
.current{font-size:14px;margin:8px 0;font-weight:600}
.chips{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:thin}
.chip{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer;min-height:36px;display:flex;align-items:center;gap:6px}
.chip[aria-pressed=true]{border-color:var(--navy);background:var(--navy);color:#fff}
.chip i{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.25)}
.search{width:100%;min-height:44px;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;margin:2px 0 10px;background:#fff}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.swatch-grid.small{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
.sw{border:2px solid transparent;background:#fff;border-radius:10px;padding:3px;cursor:pointer;text-align:center;font-size:11px;line-height:1.2;color:var(--ink)}
.sw span{display:block;aspect-ratio:1/1;border-radius:7px;background-size:cover;background-position:center;margin-bottom:3px}
.sw[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-l)}
.sw small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field{display:block;font-size:14px;font-weight:600;margin:10px 0}
.field input,.field select,.field textarea{display:block;width:100%;margin-top:4px;min-height:44px;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff;font-weight:400;font-size:16px}
.field input[type=range]{padding:0;border:0;background:transparent}
#line1{font-size:22px}
.check{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:15px}
.check input{width:22px;height:22px;flex:0 0 auto;margin-top:1px}
.font-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.font{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:10px;padding:4px;background:#fff;cursor:pointer;text-align:left}
.font img{width:72%;height:auto;border-radius:6px;background:#1f2a44}
.font span{font-weight:700;font-size:14px}
.font[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-l)}
.thread-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.th{border:2px solid transparent;background:#fff;border-radius:10px;padding:4px 2px;cursor:pointer;font-size:11px;text-align:center}
.th i{display:block;width:30px;height:30px;margin:0 auto 2px;border-radius:50%;border:1px solid rgba(0,0,0,.25);box-shadow:inset -3px -3px 6px rgba(0,0,0,.25),inset 2px 2px 4px rgba(255,255,255,.35)}
.th[aria-pressed=true]{border-color:var(--gold)}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.seg button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer;font-weight:600}
.seg button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.photo{border:0;padding:0;background:#fff;border-radius:10px;overflow:hidden;cursor:pointer;text-align:left}
.photo img{aspect-ratio:1/1;object-fit:cover;width:100%}
.photo span{display:block;padding:4px 8px;font-size:13px;font-weight:600}
.photo em{font-style:normal;color:var(--gold);font-size:12px}
.grid2{display:grid;grid-template-columns:1fr;gap:0 12px}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:14px;margin:12px 0}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0}.summary dt{color:var(--muted)}.summary dd{margin:0;font-weight:600}
.proof-fig{margin:12px 0}.proof-fig img,#doneImg{border:1px solid var(--line);border-radius:8px;background:#fff;margin:10px 0}
.approve{background:#fff8e6;border:1px solid var(--gold-l);border-radius:10px;padding:10px}
.error{color:var(--bad);font-weight:600;min-height:1em}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;transition:transform .25s;z-index:50;max-width:90vw;font-size:14px}
.toast.show{transform:translateX(-50%) translateY(0)}
dialog{border:0;border-radius:14px;padding:12px;max-width:min(92vw,640px)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog p{font-weight:600;margin:8px 0}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:16px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.foot a{color:var(--navy)}
@media (min-width:760px){
  main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:20px;padding:12px}
  .stage{grid-column:1;grid-row:1 / span 2;top:72px;align-self:start;border:1px solid var(--line);border-radius:16px}
  .canvas-wrap{height:min(72vh,680px)}
  .tabs{grid-column:2;top:56px;border-radius:12px;border:1px solid var(--line)}
  .panel{grid-column:2}
  .grid2{grid-template-columns:1fr 1fr}
}

/* v2: upload + create-your-own */
.starts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
.start{display:flex;flex-direction:column;gap:2px;text-align:left;border:2px solid var(--gold-l);background:#fff8e6;border-radius:var(--r);padding:10px 12px;cursor:pointer;min-height:44px}
.start b{font-size:15px;color:var(--navy)}.start span{font-size:13px;color:var(--muted);line-height:1.3}
@media (max-width:380px){.starts{grid-template-columns:1fr}}
.upload-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px dashed var(--gold);background:#fff;border-radius:var(--r);padding:22px 12px;text-align:center;cursor:pointer;min-height:110px}
.upload-drop input{position:absolute;width:1px;height:1px;opacity:0}
.upload-drop b{font-size:17px;color:var(--navy)}.upload-drop span{font-size:13px;color:var(--muted)}
.upload-drop:focus-within{outline:3px solid var(--gold);outline-offset:2px}
.up-status{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:12px 0;font-size:15px;line-height:1.4}
.spin{display:inline-block;width:16px;height:16px;border:3px solid var(--gold-l);border-top-color:var(--navy);border-radius:50%;animation:sp 0.9s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}
.readlist{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.readlist button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;min-height:44px}
.readlist li.bad button{border-color:#e0a43a;background:#fff8e6}
.readlist small{grid-column:1 / -1;color:#7a5a12;font-size:13px}
.rl-k{font-size:13px;color:var(--muted);font-weight:600}.rl-v{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.ok-pill,.flag-pill{font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.ok-pill{background:#e3f1e4;color:var(--ok)}.flag-pill{background:#f6c56b;color:#4a3300}
.heb-confirm{margin-top:8px}
.heb-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px}
.heb-big{font-size:40px;line-height:1.25;text-align:center;color:var(--navy);padding:4px 0}
.heb-letters{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:2px 0 4px}
.heb-letters span{min-width:30px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;font:600 20px/1 "Noto Serif Hebrew","David Libre",serif;background:#faf7f0}
.heb-letters span.sp{border:0;background:transparent;color:#bbb;min-width:12px}
.heb-item input{font-size:22px}
.note-warn{background:#fff3e0;border-left:4px solid #e08a1e;border-radius:8px;padding:10px 12px;font-size:14px;line-height:1.4;margin:6px 0 12px;color:#4a3300}
.sel-box{background:#fff;border:1.5px solid var(--gold);border-radius:12px;padding:8px 12px;margin:12px 0}
.sel-box .field{margin:4px 0}
.btn.danger{color:var(--bad)}
.sh{display:inline-block;width:16px;height:16px;border:2px solid currentColor;margin-right:6px;vertical-align:-3px}
.sh-c{border-radius:50%}.sh-d{transform:rotate(45deg) scale(.8)}
#bag.drawing{cursor:crosshair}
.tabs button[data-tab=upload],.tabs button[data-tab=draw]{color:#8a6d1f}
.tabs button[data-tab=upload][aria-selected=true],.tabs button[data-tab=draw][aria-selected=true]{color:#fff}
.fnote{display:block;font-weight:600;font-size:11px;color:#a0522d}
.font span{display:flex;flex-direction:column}

/* v3: English fonts, order key, similar ideas */
.font-list.en .font img{background:#3d4171}
.fkind{display:block;font-weight:500;font-size:11px;color:var(--muted)}
.font-hint{background:#fff8e6;border:1px solid var(--gold-l);border-radius:10px;padding:8px 10px;font-size:14px;margin:6px 0}
#fontLineSeg button{font-size:13px}
.sim-link{border:0;background:transparent;color:var(--navy);font-weight:700;font-size:13px;cursor:pointer;padding:2px 4px;white-space:nowrap}
.stage-bar #hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.stage-bar{gap:6px}
.similar{position:fixed;inset:0;z-index:60;background:rgba(20,33,61,.55);display:flex;align-items:flex-end;justify-content:center}
.similar[hidden]{display:none}
.sim-card{background:#fff;width:min(760px,100%);max-height:92vh;overflow:auto;border-radius:16px 16px 0 0;padding:12px 12px 18px}
@media (min-width:760px){.similar{align-items:center}.sim-card{border-radius:16px}}
.sim-head{margin-bottom:8px}.sim-head .muted{margin:0}
.sim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.sim-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sim{display:flex;flex-direction:column;gap:4px;border:2px solid var(--line);border-radius:12px;background:#faf7f0;padding:6px;cursor:pointer;text-align:left}
.sim:hover,.sim:focus-visible{border-color:var(--gold)}
.sim-cv{width:100%;aspect-ratio:1;height:auto}
.sim span{font-size:12px;color:var(--ink);line-height:1.3}
.sim-note{font-size:12px;margin-top:10px}
.mats{font-size:13px;margin:6px 0;padding:6px 8px;background:#faf7f0;border-radius:8px}
.mats b{color:#8a6d1f}
@media (max-width:520px){.sim-head .muted{display:none}}
.font{flex-wrap:wrap}
.font .fprev{flex-basis:100%;display:block;font-style:normal;font-size:22px;line-height:1.35;color:var(--navy);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.seg[hidden]{display:none}

/* second publish (Oct 11 2026): plaque fonts, make-my-proof, strap swatches */
.plate-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));max-height:360px;overflow:auto;padding:2px}
.plate-list .font{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px}
.plate-list .fname{font-size:12px;font-weight:700;color:var(--muted)}
.plate-list .fprev{display:block;font-size:26px;line-height:1.3;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stage-bar #makeProof{height:28px;min-height:28px;padding:0 12px;font-size:13px;white-space:nowrap}
.proof-dlg{max-width:min(96vw,1100px);width:96vw}
.proof-dlg img{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;margin:8px 0;background:#fff}
#strapSwatches{max-height:260px;overflow:auto}
#addons .check{display:block}
.stage-bar #makeProof{width:auto;flex:0 0 auto}
@media (max-width:640px){.stage-bar{height:auto;min-height:28px;flex-wrap:wrap;row-gap:4px;column-gap:8px}}

/* Oct 11: font groups, flap, charity pouch styles */
.font-list .fgroup{grid-column:1/-1;margin:10px 2px 0;font-size:14px;color:var(--navy)}
.cp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cp-tile{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--line);border-radius:10px;padding:6px;background:#fff;cursor:pointer;font-weight:700;font-size:13px;text-align:center}
.cp-tile img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:6px;background:#fff}
.cp-tile .cp-none{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--muted);background:#f6f4ef;border-radius:6px}
.cp-tile small{display:block;font-weight:500;font-size:11px;color:var(--muted)}
.cp-tile[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-l)}
@media (max-width:520px){.cp-grid{grid-template-columns:repeat(2,1fr)}}
.style-card .new-tag{position:absolute;top:4px;right:4px;background:#b8892d;color:#fff;font-size:10px;font-weight:700;border-radius:6px;padding:1px 5px}

/* locked styles (Sid, Oct 14 2026): printed bags / fixed embroidery */
.lock-note { background:#fff4e5; border:1px solid #e0a040; color:#7a4a00; padding:8px 12px; border-radius:8px; font-weight:600; margin:8px 0; line-height:1.35; }
.canvas-wrap{position:relative}
.stage .lock-note { position:absolute; top:4px; left:8px; right:8px; margin:0; text-align:center; pointer-events:none; font-size:13px; padding:5px 10px; z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.lk-name #nameScale, .lk-name #resetPos, .lk-name #nameRot, .lk-name #nameRotBtns, .lk-name #nameShapeSeg { opacity:.4; pointer-events:none; }
.lk-name-fixed #line1, .lk-name-fixed #line2, .lk-name-fixed #fontLineSeg, .lk-name-fixed #fontLangSeg, .lk-name-fixed #fontList, .lk-name-fixed #threadGrid, .lk-name-fixed #nameWeightSeg { opacity:.4; pointer-events:none; }
.lk-colors #tab-colors .row, .lk-colors #catChips, .lk-colors #swSearch, .lk-colors #swatchGrid { display:none; }
.lk-colors #partChips { opacity:.6; pointer-events:none; }
.lk-design #tab-draw > :not(h2):not(.lock-note) { display:none; }
.lk-bag #flapSeg { opacity:.4; pointer-events:none; }
.lk-on #similarBtn { display:none; }

/* ---- Oct 14 2026 (b): all letters per font, wide desktop, plate on Name step, signature samples only, all threads ---- */
.tabs{top:calc(56px + var(--stageH, calc(6px + min(38vh,400px) + 29px)))}
.alpha{grid-column:1/-1;background:#fff;border:2px solid var(--gold);border-radius:12px;padding:6px 10px 10px;box-shadow:0 0 0 2px var(--gold-l)}
.alpha-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--navy)}
.alpha-x{border:0;background:transparent;font-size:18px;min-width:40px;min-height:40px;cursor:pointer;color:var(--navy)}
.alpha img{width:100%;max-width:760px;height:auto;margin:2px auto 0;border-radius:8px}
.alpha-type{font-size:34px;line-height:1.55;white-space:pre-line;text-align:center;margin:4px 0;color:var(--navy);word-spacing:.12em}
.alpha-cap{display:block;color:var(--muted);font-size:12px;text-align:center;margin-top:4px}
.sig-note{grid-column:1/-1;margin:2px 2px 4px;background:#fff8e6;border:1px solid var(--gold-l);border-radius:10px;padding:8px 10px;font-size:14px}
.font.sig-off{opacity:.55;cursor:not-allowed;filter:grayscale(1);border-style:dashed}
#plaqueSlotName:not(:empty){margin-top:18px;border-top:1px solid var(--line);padding-top:2px}
.threads-dlg{width:min(96vw,900px);max-height:88vh}
.threads-dlg::backdrop{background:rgba(20,33,61,.55)}
.dlg-head{align-items:center;position:sticky;top:-12px;background:#fff;padding:6px 0;z-index:1}
.all-threads{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.tt{border:2px solid var(--line);background:#fff;border-radius:10px;padding:5px 4px;cursor:pointer;text-align:center;font-size:13px}
.tt-sw{display:block;width:100%;aspect-ratio:4/5;border-radius:8px;overflow:hidden;margin-bottom:4px;border:1px solid rgba(0,0,0,.15)}
.tt-sw img{width:100%;height:100%;object-fit:cover}
.tt b{display:block}.tt small{display:block;color:var(--muted);font-size:11px}
.tt[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-l)}
@media (min-width:1100px){
  main{max-width:1760px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr;align-items:start}
  .stage{grid-column:1;grid-row:1 / 3;top:56px;height:calc(100vh - 56px);display:flex;flex-direction:column;border-bottom:0;border-right:1px solid var(--line);padding:10px 12px 6px}
  .canvas-wrap{height:auto;flex:1;min-height:0}
  .tabs{grid-column:2;grid-row:1;top:56px;flex-wrap:wrap}
  .panel{grid-column:2;grid-row:2;padding:16px 22px 40px}
}

/* embroidered thread samples (Sid, Oct 14 2026) */
.th-tabs{display:flex;gap:6px;margin:6px 0 8px}.th-tabs .btn[aria-selected=true]{background:var(--gold);border-color:var(--gold);color:#fff}
.th-tabs .btn[aria-selected=false]{background:#fff;color:inherit}
.tt-emb{display:block;width:100%;aspect-ratio:224/80;border-radius:6px;overflow:hidden;margin-bottom:3px;background:#2b2a28}.tt-emb img{width:100%;height:100%;object-fit:cover;display:block}
.tt-tag{color:var(--gold)!important;font-weight:700}
.emb-photo{overflow:auto;border-radius:10px;background:#1d1c1b;cursor:zoom-in;max-height:70vh}.emb-photo img{display:block;width:100%;height:auto}
.emb-photo.zoom{cursor:zoom-out}.emb-photo.zoom img{width:220%;max-width:none}
.emb-cap{font-size:12px;font-weight:400!important;margin:4px 0 10px!important}
.emb-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important}

/* style search (Sid, Oct 14 2026 1:46 PM) */
.style-find{position:relative;display:flex;gap:8px;align-items:center;margin:4px 0 10px}
.style-find .search{flex:1;margin:0;padding-right:40px;font-size:16px}
.style-find .search::-webkit-search-cancel-button{display:none}
.sf-clear{position:absolute;right:62px;top:50%;transform:translateY(-50%);border:0;background:#e9ebef;color:#333;border-radius:50%;width:28px;height:28px;font-size:18px;line-height:28px;padding:0;cursor:pointer}
.sf-go{min-height:44px;min-width:48px;display:flex;align-items:center;justify-content:center}
.sf-count{margin:-4px 0 8px}

/* ---- phone pass (Sid, Oct 14 2026 1:50 PM "Scrolling is not great"): one page scroll, compact sticky preview, no nested scroll boxes, 44px taps. Desktop/tablet (>=700px) untouched. ---- */
@media (max-width:699px){
  .stage-bar .mini{min-width:0;font-size:11px;gap:3px}
  .stage-bar .sim-link{font-size:11px!important;letter-spacing:-.1px}
  body{overflow-x:clip}
  .stage{padding:4px 6px 0}
  .canvas-wrap{height:min(27vh,240px)}
  .stage-bar{height:34px;min-height:34px;flex-wrap:nowrap;column-gap:6px;padding:0 2px}
  .stage-bar #hint{display:none}
  .stage-bar{justify-content:space-between}
  .stage-bar .sim-link{white-space:nowrap;font-size:12px;flex:0 0 auto;padding:0 2px}
  .stage-bar #makeProof{height:30px;min-height:30px;padding:0 10px;font-size:13px}
  .stage-bar .mini{flex:0 0 auto;font-size:12px}
  .tabs{padding:4px 6px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .tabs button{min-height:44px;padding:8px 12px;scroll-snap-align:center}
  /* the preview is a scroll surface too, except where a finger drags on it (draw, name) */
  #bag{touch-action:pan-y}
  body[data-tab=draw] #bag, body[data-tab=name] #bag{touch-action:none}
  /* side-scrolling chip rows wrap instead */
  .parts,.chips,#liningGroups{flex-wrap:wrap;overflow:visible}
  .part{max-width:100%}
  /* no boxes that scroll inside the page */
  .plate-list,#strapSwatches{max-height:none;overflow:visible}
  /* tap targets */
  .btn.small,.chip,.part,.sf-go{min-height:44px}
  .style-find .search{min-height:44px}
  .check{min-height:44px;align-items:center}
  .check input{width:24px;height:24px}
  .swatch-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
  .style-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .panel{padding:12px 12px 40px}
}

/* New styles tab (Oct 14 2026) */
.ns-intro{margin:2px 0 8px}
.ns-find{max-width:260px}
.ns-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px}
@media (max-width:699px){.ns-grid{grid-template-columns:repeat(2,1fr)}}
.ns-card{border:1.5px solid var(--line);padding:0;background:#fff;border-radius:10px;overflow:hidden;cursor:pointer;text-align:left;display:flex;flex-direction:column}
.ns-card[hidden]{display:none}
.ns-card img{aspect-ratio:1/1;object-fit:contain;width:100%;height:auto;background:#fff;display:block}
.ns-card .ns-cap{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 8px;font-size:14px;font-weight:700;border-top:1px solid var(--line)}
.ns-card em{font-style:normal;font-size:12px;font-weight:700;color:#fff;background:var(--gold);border-radius:999px;padding:2px 8px}
.ns-card.go:active{border-color:var(--gold)}
.ns-sub{margin:18px 0 0}
@media (max-width:699px){body[data-tab=newstyles] .stage{display:none}}

/* Start over button (header) */
.top .btn.start-over{white-space:nowrap}
.top .btn.hist-btn{white-space:nowrap;font-size:15px}
.top .btn.hist-btn span[aria-hidden]{font-size:18px;line-height:1}
.top .btn.hist-btn:disabled{opacity:.4;cursor:default}
@media (max-width:699px){.top .hb-t{display:none}.top .btn.hist-btn{padding:6px 10px;min-width:40px}}
@media (max-width:560px){.top{gap:5px;padding:8px 8px}.brand img{height:32px}.top .btn.ghost{padding:6px 8px;font-size:14px}.top .btn.hist-btn{padding:6px 8px;min-width:38px}.title strong{font-size:13px}.title span{font-size:12px}}
@media (max-width:430px){.title{display:none}}
.top #backBtn{margin-left:auto}

/* narrow phones (Sid's iPhone screenshot, Oct 15 2026: the row under the preview was crowded; at 360px the "numbers" box was cut off):
   shorter "Show me similar" label and tighter spacing so the three controls always fit on one line */
@media (max-width:420px){
  .stage-bar .sim-extra{display:none}
  .stage-bar{column-gap:4px}
  .stage-bar #makeProof{padding:0 9px}
}
@media (max-width:340px){
  .stage-bar .sim-link{font-size:11px!important}
  .stage-bar #makeProof{padding:0 7px;font-size:12px}
  .stage-bar .mini{font-size:11px}
}

/* customer accounts + order tracking (Sid, Oct 15 2026) */
.acct{position:fixed;inset:0;z-index:60;background:rgba(20,33,61,.55);display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow:auto}
.acct[hidden]{display:none}
html.acct-open{overflow:hidden}
.acct-card{background:#fff;border-radius:16px;width:100%;max-width:880px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.acct-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--navy)}
.acct-tabs{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.acct-tabs button{border:0;background:transparent;color:#fff;opacity:.8;padding:8px 14px;border-radius:999px;font-weight:600;min-height:40px;cursor:pointer}
.acct-tabs button[aria-selected=true]{background:#fff;color:var(--navy);opacity:1}
.acct-x{border:0;background:transparent;color:#fff;font-size:20px;min-width:44px;min-height:44px;cursor:pointer}
.acct-body{padding:16px 20px 22px}
.acct-body h2{font-size:20px;margin:6px 0 8px;color:var(--navy)}
.acct-form{max-width:440px;margin:0 auto}
.acct-hint{font-size:14px;margin:0 0 8px}
.acct-form .btn.primary{margin-top:10px}
.acct-err{color:var(--bad);font-size:14px;min-height:1em;margin:8px 0 0}
.acct-err.ok{color:var(--ok)}
.acct-help{font-size:14px;color:var(--muted);margin:16px auto 0;max-width:440px;text-align:center}
.acct-help a,.acct-alt a,.acct-note a{color:var(--navy);font-weight:600}
.acct-alt{text-align:center;font-size:14px;margin:10px 0 0}
.acct-who{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px}
.acct-me{display:flex;flex-direction:column}
.acct-pw{flex-basis:100%;max-width:440px;background:var(--cream);border-radius:12px;padding:8px 14px 14px}
.acct-pw[hidden]{display:none}
.acct-list{display:grid;gap:12px;margin-top:12px}
.acct-order{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:#fffdf8}
.ao-top{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.ao-stage{margin-left:auto;background:var(--navy);color:#fff;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600}
.ao-style{font-size:15px;margin:2px 0 8px}
.acct-steps{list-style:none;display:flex;gap:3px;padding:0;margin:0 0 8px}
.acct-steps li{flex:1;min-width:0;text-align:center;font-size:11px;color:var(--muted)}
.acct-steps li::before{content:"";display:block;height:6px;border-radius:3px;background:var(--line);margin-bottom:4px}
.acct-steps li.done::before{background:var(--gold)}
.acct-steps li.now::before{background:var(--navy)}
.acct-steps li.now{color:var(--navy);font-weight:700}
.acct-steps li span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ao-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.ao-facts dt{font-size:12px;color:var(--muted)}.ao-facts dd{margin:0;font-weight:600}
.ao-eta.eta,.ao-eta.ready{color:var(--ok)}
.ao-photos{display:flex;gap:6px;overflow-x:auto;margin-top:8px}.ao-photos img{height:110px;width:auto;border-radius:8px}
.ao-nophoto{font-size:13px;margin:8px 0 0}
.acct-note{font-size:14px;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 6px}
@media (max-width:560px){.acct{padding:0}.acct-card{border-radius:0;min-height:100%}.acct-body{padding:14px 14px 28px}.acct-steps li span{display:none}.top .acct-btn{padding:6px 9px}}
/* wider designer on desktop (Sid, Oct 15 2026): two columns from 900 px, preview gets half the width, no 1760 px cap */
@media (min-width:760px){
  main{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start}
  .stage{grid-column:1;grid-row:1 / 3;top:56px;height:calc(100vh - 56px);display:flex;flex-direction:column;border-bottom:0;border-right:1px solid var(--line);padding:10px 12px 6px}
  .canvas-wrap{height:auto;flex:1;min-height:0}
  .tabs{grid-column:2;grid-row:1;top:56px;flex-wrap:wrap}
  .panel{grid-column:2;grid-row:2;padding:16px 22px 40px}
}
@media (min-width:1500px){main{grid-template-columns:minmax(0,11fr) minmax(0,9fr)}}

/* Oct 15 2026: Sid's disclaimer (designer footer + submit step) */
.disclaimer{font-size:13px;line-height:1.4;color:var(--muted);margin:8px 0}
.foot .foot-disclaimer{flex:1 0 100%;margin:0 0 4px}
.submit-disclaimer{margin:10px 0 8px}
.commit-line{font-size:14px;margin:6px 0 4px}
.commit{background:#fff8e6;border:1px solid var(--gold-l);border-radius:10px;padding:10px}

/* Oct 15 2026 (Sid 1:38 PM): side by side inside the Shopify page too (its iframe is 799px wide). In a tall iframe 100vh is the
   iframe height, so the sticky preview is capped to a sensible height. */
@media (min-width:760px){.stage{height:min(calc(100vh - 56px),860px)}}
@media (min-width:760px) and (max-width:1099px){.stage{height:min(calc(100vh - 56px),560px)}.stage-bar #hint{display:none}.stage-bar .sim-extra{display:none}.stage-bar{column-gap:6px}}
@media (min-width:760px) and (max-width:1099px){main{column-gap:0;padding:0}.panel{padding:12px 14px 40px}}
@media (min-width:760px) and (max-width:1099px){.tabs{gap:2px;padding:5px 4px;overflow:visible}.tabs button{padding:6px 7px;min-height:34px;font-size:13px}}

.ao-eta .ao-from{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:2px}

/* strap photos (Oct 15 2026) */
.strap-photos{display:flex;gap:8px;overflow-x:auto;margin:4px 0 10px;padding-bottom:2px}.strap-photos[hidden]{display:none}
.sp-thumb{flex:0 0 auto;width:92px;height:92px;padding:0;border:1px solid #d9d2c6;border-radius:8px;overflow:hidden;background:#fff;cursor:zoom-in}
.sp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sp-thumb.sp-lab{position:relative;width:110px;height:110px}.sp-thumb.sp-lab span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:2px 4px;text-align:center}.sp-thumb.on{outline:3px solid #b8860b;outline-offset:-3px}
.arch-curve{align-items:center;margin:6px 0 4px}.arch-curve[hidden]{display:none}.arch-curve strong{min-width:52px;text-align:center}

/* Inspiration search (Sid, Oct 15 2026 3:08 PM) */
.photo-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.photo-tools .seg{margin:6px 0}
.photo-find{position:relative;flex:1 1 200px;max-width:320px}
.photo-find input{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:999px;padding:9px 38px 9px 14px;min-height:40px;font-size:16px;background:#fff}
.photo-find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.photo-find button{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:#eceff3;font-size:20px;line-height:1;cursor:pointer;color:#333}
.photo-find button[hidden]{display:none}
.photo-none{grid-column:1/-1;padding:12px 2px}