.shirt-piece:before{inset:0 -5.55556%;background:url('./shirt-ribbons.webp') center/100% 100% no-repeat;opacity:1;mask-image:linear-gradient(to bottom,transparent 9%,#000 35%,#000 97%,transparent)}
.shirt-viewer{grid-column:2;grid-row:1;min-width:0;position:relative}
[data-shirt-stage]{height:570px;position:relative;cursor:grab;touch-action:pan-y;outline-offset:-4px}
[data-shirt-stage]:active{cursor:grabbing}
[data-shirt-stage]:focus-visible{outline:2px solid var(--teal)}
[data-shirt-stage] canvas{display:block;width:100%;height:100%}
.shirt-fallback{position:absolute;inset:8% 0;pointer-events:none}
.shirt-fallback img{display:block;width:100%;height:100%;object-fit:contain}
[data-shirt-stage].ready .shirt-fallback,[data-shirt-stage].ready .shirt-status{display:none}
[data-shirt-stage].failed canvas{visibility:hidden}
.shirt-status{position:absolute;bottom:12px;left:8%;right:8%;text-align:center;font-size:13px;background:var(--paper);padding:8px}
.shirt-controls [data-spin]{font-size:12px;font-weight:400;min-height:36px;padding:4px 12px;border-top:1px solid var(--line);border-radius:0;width:100%;margin-top:6px}
.shirt-controls [data-spin]:disabled{display:none}
@media(max-width:899px){
 .shirt-piece:before{background-size:auto 650px;background-position:center calc(100% + 60px);mask-image:linear-gradient(to bottom,transparent 36%,#000 65%,#000 97%,transparent)}
 .shirt-viewer{grid-column:1;grid-row:auto;margin:0}
 [data-shirt-stage]{height:430px}
}
@media(max-width:430px){[data-shirt-stage]{height:380px}.shirt-piece:before{background-size:auto 540px}}
@media(max-width:700px){.shirt-piece:before{left:-20px;right:-20px}}
@media(max-width:360px){.shirt-piece:before{left:-16px;right:-16px}[data-shirt-stage]{height:335px}}

@media(min-width:900px){
 .shirt-piece:before{background-image:linear-gradient(90deg,#f3eadb 0%,#f3eadbd9 32%,#f3eadb00 58%),url('./shirt-ribbons.webp')}
}