:root{--bg:#f2f3ee;--card:#fff;--ink:#16191f;--mute:#5d6470;--acc:#2f45d6;--acc-deep:#1f2f9e;--acc-soft:#dfe3fb;--line:#dfe1da;--display:"Bricolage Grotesque",Figtree,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:Figtree,system-ui,sans-serif;background:var(--bg);color:var(--ink)}
[hidden]{display:none!important}

/* ---------- Customizer (customize.html): product stage left, one numbered column of choices right ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;padding:40px 20px 0;max-width:1150px;margin:auto;align-items:start}
.stage{display:flex;flex-direction:column;align-items:stretch;position:sticky;top:76px}
.product-bar{display:flex;gap:16px;align-items:end;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.product-bar h1{font-size:clamp(32px,4vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1;margin:0}
.prod-pick{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--mute)}
.prod-pick select{flex:none;min-width:200px;font-weight:600;color:var(--ink)}
.sides{margin-bottom:12px;align-self:flex-start}
.canvas-wrap{position:relative;width:100%;max-width:560px;margin:0 auto;background:#fff;border-radius:4px}
.canvas-wrap .canvas-container{width:100%!important;height:auto!important;aspect-ratio:500/560}
.canvas-wrap canvas{width:100%!important;height:100%!important;border-radius:4px}
.badge.big{font-size:12px;top:10px;left:10px}
.note{color:#1f4f82;font-size:14px;margin:10px 0 0}
.hint{color:var(--mute);font-size:13px;margin:12px 0 0;text-align:center}
.save{color:var(--mute)}
.save:not(:empty)::before{content:"· "}

/* Tool row: quiet text buttons, not a wall of boxes */
.toolbar{display:flex;flex-wrap:wrap;gap:2px;align-items:center;margin-bottom:10px}
.tb{border:0;background:none;border-radius:6px;padding:6px 8px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;min-width:32px}
.tb:hover:not(:disabled){background:#e6e8e0}.tb:disabled{opacity:.35;cursor:default}
.toolbar .sep{width:1px;height:18px;background:#cfd2c8;margin:0 6px}
.warn{background:#fff4e5;color:#8a4b00;font-size:14px;padding:10px 14px;border-radius:6px;margin:0 0 10px;border-left:3px solid #e8a33d}

/* Choice column */
.panel{display:flex;flex-direction:column}
.ps{padding:22px 0;border-top:1px solid var(--line)}
.ps:first-child{border-top:0;padding-top:4px}
.ps h2{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 14px;display:flex;align-items:baseline;gap:10px}
.ps h2 .n{font-size:15px;color:var(--acc);font-weight:800}
.ps h2 small{font-family:Figtree,system-ui,sans-serif;font-size:14px;font-weight:500;color:var(--mute);letter-spacing:0}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0}
.swatches button.on{outline:2.5px solid var(--acc);outline-offset:3px}
.seg{display:inline-flex;gap:4px;background:#e6e8e0;border-radius:8px;padding:4px;flex-wrap:wrap}
.seg button{border:none;background:none;border-radius:6px;padding:8px 16px;font:inherit;font-size:15px;font-weight:600;color:var(--mute);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg button:disabled{color:#a8aca2;cursor:not-allowed}
.rules{font-size:14px;color:var(--mute);margin:10px 0 0}
.row{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.row.small{font-size:14px;color:var(--mute)}.row.small label{display:flex;gap:6px;align-items:center}
.or{margin:12px 0 0;font-size:13px;color:var(--mute)}
input[type=text],select,input[type=number]{padding:10px 12px;border:1.5px solid #cfd2c8;border-radius:6px;background:#fff;font:inherit;font-size:16px;flex:1;min-width:0;color:var(--ink)}
input[type=text]:focus,select:focus,input[type=number]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.row.small select{font-size:14px;padding:7px 8px;flex:1 1 120px}
input[type=color]{width:34px;height:34px;border:none;background:none;padding:0;cursor:pointer}
.btn{display:inline-block;padding:10px 16px;border-radius:6px;border:1.5px solid var(--ink);background:transparent;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn:hover{background:var(--ink);color:#fff}
.btn.file{display:block;width:100%;text-align:center;padding:14px 16px;border:1.5px dashed var(--acc);color:var(--acc);background:#fff}
.btn.file:hover{background:var(--acc-soft);color:var(--acc-deep)}
.layers{list-style:none;margin:12px 0 0;padding:0;font-size:14px}
.layers li{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;cursor:pointer}
.layers li>span:first-child{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layers li>span:last-child{flex:none}
.layers li.on{background:var(--acc-soft)}
.layers li button{border:none;background:none;cursor:pointer;color:var(--mute);padding:2px 6px}
.layers .empty{display:none}

/* Sizes: one small box per size, quantity typed underneath */
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.sz{display:flex;flex-direction:column;align-items:stretch;gap:4px;font-size:13px;font-weight:700;text-align:center}
.sz input{width:100%;text-align:center;padding:9px 2px;-moz-appearance:textfield}
.sz input::-webkit-inner-spin-button{opacity:.4}
.sz input.has{border-color:var(--acc);background:var(--acc-soft);font-weight:700}
.sizes.one{grid-template-columns:160px}
.sizes.one .sz{text-align:left}

.ps-price{border-top:1.5px solid var(--ink)}
.price{margin-bottom:18px}
.ps-price .cta-block{margin-top:4px}
.added{margin-top:16px}
.added p{margin:0 0 12px;font-weight:600}
.added p::before{content:"✓ ";color:#17803d}
.added .added-more{margin:12px 0 0;font-weight:400;font-size:14px;color:var(--mute)}
.added .added-more::before{content:none}
.added-more a{color:var(--acc);font-weight:600}
.linkbtn{background:none;border:none;color:var(--mute);text-decoration:underline;font:inherit;font-size:13px;cursor:pointer}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:28px;padding:24px 16px 0}
  .stage{position:static}
}
@media (max-width:480px){
  .product-bar{gap:12px}.prod-pick,.prod-pick select{width:100%}
  .sides{align-self:stretch;display:flex}.sides button{flex:1;padding:8px 6px}
  .tb{padding:6px 6px}
  .toolbar .sep{margin:0 2px}
}

/* preset picker */
.presets { margin: 0 0 12px; }
.presets > summary { list-style: none; cursor: pointer; display: block; text-align: center; }
.presets > summary::-webkit-details-marker { display: none; }
.preset-cats { flex-wrap: wrap; margin: 10px 0 8px; }
.preset-cats button[aria-pressed="true"] { background: #1d1d1f; color: #fff; }
.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preset { background: #8a8a8a linear-gradient(135deg, #2a2a2a 50%, #e9e9e6 50%); border: 1px solid #ccc; border-radius: 8px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.preset img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.preset span { font-size: 11px; line-height: 1.2; color: #fff; background: rgba(0,0,0,.55); border-radius: 4px; padding: 1px 4px; }
.preset:hover, .preset:focus-visible { outline: 2px solid #2a52be; }

/* ---- Bring your own garment + HTV material picker ---- */
.byo { margin-top: 12px; border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 10px 12px; }
.byo-t { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; cursor: pointer; }
.byo-t small { color: var(--mute, #666); }
.byo-terms { font-size: 13px; margin-top: 8px; }
.byo-terms ul { margin: 6px 0 0; padding-left: 18px; } .byo-terms li { margin: 3px 0; }
.matpick { margin-top: 12px; } .mat-h { margin: 0 0 6px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.mat { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line, #ccc); border-radius: 8px; background: #fff; font-size: 12px; text-align: left; cursor: pointer; }
.mat small { margin-left: auto; color: #777; } .mat.on { border-color: #2f45d6; box-shadow: 0 0 0 2px #2f45d633; }
.mat-tag { color: #777; font-size: 11px; }
.pr-sub { color: #666; padding-left: 10px; font-size: 13px; }
.sw { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1px solid #0002; background: #333; }
.sw-matte { background: #555; }
.sw-glitter { background: radial-gradient(circle at 30% 30%, #fff 0 1px, transparent 2px) 0 0/5px 5px, radial-gradient(circle at 70% 60%, #ffe9a8 0 1px, transparent 2px) 0 0/7px 7px, #b08d2c; }
.sw-metallic { background: linear-gradient(135deg, #8a8f99, #f4f6fa 45%, #9aa0aa 55%, #e2e5ea); }
.sw-holo { background: linear-gradient(135deg, #ff9adf, #9ad9ff, #b6ff9a, #fff59a, #ff9adf); background-size: 200% 200%; animation: holo 3s linear infinite; }
.sw-flock { background: radial-gradient(#6b2a2a 40%, #4a1c1c); box-shadow: inset 0 0 4px #0008; }
.sw-puff { background: radial-gradient(circle at 35% 30%, #fff, #ddd 50%, #aaa); }
.sw-glow { background: #c9f7a6; box-shadow: 0 0 8px #9cff5c; }
.sw-reflective { background: repeating-linear-gradient(45deg, #c8ccd2 0 3px, #eef0f3 3px 6px); }
@keyframes holo { to { background-position: 200% 200%; } }
@media (prefers-reduced-motion: reduce) { .sw-holo { animation: none; } }
.sw-print { background: conic-gradient(#e63946, #f4a261, #e9c46a, #2a9d8f, #457b9d, #e63946); }
.byo-tag { font-size: 12px; font-weight: 600; background: #fff3c4; color: #6b4e00; border-radius: 6px; padding: 2px 6px; margin-left: 6px; }