/* Katana Merch Studio v3 */
.ks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;padding-top:40px}
@media(min-width:1024px){.ks-grid{grid-template-columns:repeat(3,1fr)}}
.ks-panel{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:22px 24px;display:grid;gap:16px;max-width:820px}
.ks-row{display:grid;grid-template-columns:130px 1fr;gap:10px 16px;align-items:center}
@media(max-width:640px){.ks-row{grid-template-columns:1fr;gap:6px}}
.ks-lab{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.ks-in{width:100%;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);border-radius:12px;padding:11px 14px;font:inherit;font-size:.9rem;outline:none;transition:border-color .2s}
.ks-in:focus{border-color:#E1121D}
.ks-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ks-inline .ks-in{flex:1;min-width:180px}
.ks-hint{font-size:.76rem;color:var(--muted);grid-column:2}
@media(max-width:640px){.ks-hint{grid-column:1}}
.ks-seg{display:inline-flex;justify-self:start;border:1px solid var(--line);background:var(--bg);border-radius:99px;padding:2px}
.ks-upload{position:relative;display:inline-flex;align-items:center;border:1px dashed var(--line-2);border-radius:12px;padding:9px 14px;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--fg);transition:border-color .2s}
.ks-upload:hover{border-color:#E1121D}
.ks-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.ks-sizes{gap:22px}
.ks-step{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.ks-step b{min-width:44px;text-align:center;color:var(--fg);font-variant-numeric:tabular-nums}
.ks-step button{width:30px;height:30px;border-radius:99px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);font-size:1rem;font-weight:700;cursor:pointer;line-height:1;transition:all .15s}
.ks-step button:hover{border-color:#E1121D;color:#E1121D}
.ks-step button:active{transform:scale(.94)}

.ks-stage{position:relative;perspective:1200px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;aspect-ratio:1/1;display:grid;place-items:center;cursor:grab;user-select:none;touch-action:pan-y}
.ks-stage:active{cursor:grabbing}
.ks-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.65,.05,.2,1)}
.ks-flip.is-back{transform:rotateY(180deg)}
.ks-face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:6%}
.ks-back{transform:rotateY(180deg)}
.ks-imgbox{position:relative;max-width:100%;max-height:100%;width:100%;container-type:inline-size}
.ks-imgbox canvas{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.18))}
.ks-ov{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;aspect-ratio:1/1}
.ks-ov-both{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;aspect-ratio:1/1.25}
.ks-ov-both .ks-logo-top{height:auto;max-height:64%;width:100%}
.ks-logo{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.ks-logo.on-dark{filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}
.ks-text{font-weight:800;letter-spacing:-.02em;white-space:nowrap;line-height:1;text-align:center;font-family:"Archivo Variable",system-ui,sans-serif;opacity:.94}
.ks-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:.8rem;color:var(--muted-2)}
.ks-swatches{display:flex;gap:8px;flex-wrap:wrap}
.ks-sw{width:26px;height:26px;border-radius:99px;border:1px solid var(--line-2);cursor:pointer;transition:transform .15s,box-shadow .15s}
.ks-sw:hover{transform:scale(1.08)}
.ks-sw[data-on=true]{border-color:#E1121D;box-shadow:0 0 0 2px var(--surface),0 0 0 4px #E1121D}
.ks-card{animation:ksIn .5s cubic-bezier(.2,.8,.2,1) both}
@media(prefers-reduced-motion:reduce){.ks-card{animation:none}.ks-flip{transition:none}}
@keyframes ksIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ks-card:nth-child(2){animation-delay:.05s}.ks-card:nth-child(3){animation-delay:.1s}.ks-card:nth-child(4){animation-delay:.15s}.ks-card:nth-child(5){animation-delay:.2s}.ks-card:nth-child(6){animation-delay:.25s}.ks-card:nth-child(7){animation-delay:.3s}.ks-card:nth-child(8){animation-delay:.35s}

.ks-inline .ks-seg{justify-self:auto}
.ks-title{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;border-radius:8px}
.ks-title:hover div:first-child{color:#E1121D}

/* v3: draggable branding items */
.ks-layer{position:absolute;inset:0}
.ks-it{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));touch-action:none;cursor:grab;line-height:0;outline:1.5px dashed transparent;outline-offset:4px;border-radius:3px;transition:outline-color .15s}
.ks-it:hover{outline-color:rgba(225,18,29,.45)}
.ks-it.ks-drag{cursor:grabbing}
.ks-it.ks-sel{outline-color:#E1121D}
.ks-it:focus-visible{outline-color:#E1121D}
.ks-it .ks-logo{width:100%;height:auto;display:block;pointer-events:none}
.ks-it .ks-text{display:block;pointer-events:none;line-height:1.05}
.ks-h{position:absolute;right:-10px;bottom:-10px;width:14px;height:14px;border-radius:99px;background:#E1121D;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);display:none;cursor:nwse-resize}
.ks-h::before{content:"";position:absolute;inset:-10px}
.ks-it.ks-sel .ks-h{display:block}
.ks-flip:not(.is-back) .ks-back,.ks-flip.is-back .ks-front{pointer-events:none}
.ks-stage{touch-action:pan-y}
.ks-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px}
.ks-cardsize{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--muted)}
.ks-cardsize b{min-width:40px;text-align:center;color:var(--fg);font-variant-numeric:tabular-nums;font-size:.78rem}
.ks-cardsize button,.ks-rot button{height:28px;min-width:28px;padding:0 9px;border-radius:99px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;line-height:1;transition:border-color .15s,color .15s}
.ks-cardsize button{padding:0;font-size:.95rem}
.ks-cardsize button:hover,.ks-rot button:hover{border-color:#E1121D;color:#E1121D}
.ks-rot{display:flex;gap:6px}
.ks-tip-hint{text-align:center;font-size:.66rem;color:var(--muted-2);margin:8px 0 2px}
.ks-tiprow{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.ks-title{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;border-radius:8px}
.ks-title:hover .ks-name{color:#E1121D}
.ks-card.ks-focus{border-color:#E1121D!important;box-shadow:0 0 0 3px rgba(225,18,29,.18)}
.ks-tool{font:inherit;font-size:.8rem;font-weight:600;padding:9px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);cursor:pointer;transition:border-color .15s,color .15s,opacity .15s}
.ks-tool:hover:not([disabled]){border-color:#E1121D;color:#E1121D}
.ks-tool[disabled]{opacity:.45;cursor:not-allowed}
.ks-tool[data-on=true]{border-color:#E1121D;color:#E1121D}
/* crop dialog */
.ks-cropov{position:fixed;inset:0;z-index:9999;background:rgba(10,10,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.ks-crop{width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:22px;padding:20px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ks-crop-h{display:flex;align-items:center;justify-content:space-between;font-size:1.1rem}
.ks-crop-x{width:34px;height:34px;border-radius:99px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.ks-crop-sub{font-size:.8rem;color:var(--muted);margin:4px 0 14px}
.ks-crop-stage{display:grid;place-items:center;border-radius:14px;padding:14px;background:repeating-conic-gradient(#d9d9d9 0 25%,#fff 0 50%) 0 0/16px 16px}
.ks-crop-wrap{position:relative;display:inline-block;line-height:0;touch-action:none;user-select:none}
.ks-crop-wrap img{max-width:100%;max-height:50vh;display:block}
.ks-crop-box{position:absolute;border:2px solid #E1121D;box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:move;touch-action:none}
.ks-crop-box i{position:absolute;width:16px;height:16px;background:#E1121D;border:2px solid #fff;border-radius:99px}
.ks-crop-box i::before{content:"";position:absolute;inset:-10px}
.ks-crop-box i[data-c=nw]{left:-9px;top:-9px;cursor:nwse-resize}.ks-crop-box i[data-c=ne]{right:-9px;top:-9px;cursor:nesw-resize}
.ks-crop-box i[data-c=sw]{left:-9px;bottom:-9px;cursor:nesw-resize}.ks-crop-box i[data-c=se]{right:-9px;bottom:-9px;cursor:nwse-resize}
.ks-crop-stage{overflow:hidden}
.ks-crop-msg{font-size:.78rem;color:#E1121D;min-height:1.1em;margin-top:10px;font-weight:600}
.ks-crop-f{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.ks-sidetog{position:absolute;top:10px;right:10px;z-index:6}
.ks-rot button{font-size:.95rem;padding:0 8px}
.ks-rot button[data-reset]{font-size:.74rem;padding:0 11px}
@media(max-width:420px){.ks-tools{gap:6px}.ks-cardsize{gap:4px}.ks-cardsize b{min-width:34px}}
/* v26: zoom, text colour */
.ks-zoom{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--muted)}
.ks-zoom button{height:28px;min-width:28px;padding:0;border-radius:99px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;line-height:1}
.ks-zoom button:hover{border-color:#E1121D;color:#E1121D}.ks-zoom b{min-width:30px;text-align:center;font-size:.74rem;color:var(--fg)}
.ks-imgbox{transition:transform .25s cubic-bezier(.2,.8,.2,1);transform-origin:center center}
.ks-stage.zoomed{cursor:move}.ks-stage.zoomed .ks-imgbox{transition:none}
.ks-txtsw .ks-sw.on{outline:2px solid #E1121D;outline-offset:2px}
