.studio{padding-block:var(--space-5) var(--space-8)}.studio__header{margin-bottom:var(--space-3)}.studio__heading{font-size:clamp(1.75rem,4.5vw,3rem)}.studio__intro{max-width:36rem;margin-top:var(--space-2)}.studio__empty{padding-block:var(--space-7);text-align:center}.studio__layout{display:grid;gap:var(--space-3)}.studio__stage-wrap{position:sticky;top:var(--header-height);z-index:4;padding-block:var(--space-2);background:var(--color-bg)}.studio__stage{--stage-h: min(32vh, 17rem);display:grid;place-items:center;height:var(--stage-h);overflow:hidden;background:radial-gradient(65% 75% at 50% 42%,#4a4e5a,#2a2d35 45%,#15161a);border:1px solid var(--color-border);border-radius:var(--radius)}.studio__canvas{--ratio: 1;position:relative;width:min(100%,calc(var(--stage-h) * var(--ratio)));aspect-ratio:var(--ratio)}.studio__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;filter:drop-shadow(0 18px 22px rgb(0 0 0 / .55));transition:opacity .25s var(--ease-out)}.studio__img.is-loading{opacity:0}.studio__canvas .embroidery{position:absolute;top:0;right:0;bottom:0;left:0}.studio__stage-info{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-2);font-size:.875rem}.studio__product-name{font-weight:700}.studio__product-price{color:var(--color-cyan);font-weight:700}.studio__note{display:none;margin-top:var(--space-2);font-size:.75rem}.studio__steps{display:flex;gap:var(--space-2);margin-bottom:var(--space-5)}.studio__steps li{position:relative;flex:1}.studio__steps li+li:before{content:"";position:absolute;top:1.125rem;right:calc(50% + 1.5rem);left:calc(-50% + 1.5rem);height:2px;background:var(--color-border-strong)}.studio__steps li.is-done+li:before,.studio__steps li.is-done+li.is-active:before{background:var(--color-cyan)}.studio__step-btn{display:grid;justify-items:center;gap:.35rem;width:100%;padding:0;border:0;background:none;color:var(--color-text-muted);font-size:.75rem;font-weight:600}.studio__step-btn:disabled{cursor:default;opacity:.55}.studio__step-num{display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid var(--color-border-strong);border-radius:50%;background:var(--color-bg);color:var(--color-text);font-size:.875rem;font-weight:700;transition:background-color var(--duration) var(--ease-out),border-color var(--duration) var(--ease-out),box-shadow var(--duration) var(--ease-out)}.studio__steps li.is-active .studio__step-num{border-color:var(--color-cyan);box-shadow:0 0 16px -2px var(--color-cyan-glow);color:var(--color-cyan)}.studio__steps li.is-active .studio__step-btn{color:var(--color-text)}.studio__steps li.is-done .studio__step-num{border-color:var(--color-cyan);background:var(--color-cyan);color:var(--color-on-accent)}.studio__step{display:grid;gap:var(--space-4);animation:studio-in .35s var(--ease-out) both}.studio__step[hidden]{display:none}@keyframes studio-in{0%{opacity:0;transform:translateY(8px)}}.studio__title{font-size:clamp(1.25rem,3vw,1.625rem)}.studio__title:focus{outline:none}.studio__eyebrow:empty{display:none}.studio__back{display:inline-flex;align-items:center;gap:.25rem;justify-self:start;padding:.25rem .5rem .25rem 0;border:0;background:none;color:var(--color-text-muted);font-size:.875rem;font-weight:600}.studio__back:hover{color:var(--color-text)}.studio__back .icon{width:1.1rem;height:1.1rem}.studio__tiles{display:grid;gap:var(--space-3)}.studio__tiles--products{grid-template-columns:repeat(2,minmax(0,1fr))}.studio__tiles--colors{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}.studio__tile{display:grid;gap:.35rem;padding:var(--space-2) var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);text-align:left;transition:transform var(--duration) var(--ease-out),border-color var(--duration) var(--ease-out),box-shadow var(--duration) var(--ease-out)}.studio__tile:hover:not(:disabled){transform:translateY(-3px);border-color:color-mix(in srgb,var(--color-cyan) 60%,transparent)}.studio__tile[aria-pressed=true]{border-color:var(--color-cyan);box-shadow:0 0 22px -6px var(--color-cyan-glow)}.studio__tile:disabled{cursor:not-allowed;opacity:.5}.studio__tile-media{display:block;aspect-ratio:1;overflow:hidden;border-radius:calc(var(--radius) - 4px);background:radial-gradient(70% 70% at 50% 45%,#1d1e23,#0d0e11)}.studio__tile-media img{width:100%;height:100%;object-fit:contain;padding:6%}.studio__tile-name{padding-inline:.25rem;font-size:.9375rem;font-weight:700;line-height:1.25}.studio__tile-meta{padding-inline:.25rem;color:var(--color-text-muted);font-size:.8125rem}.studio__tile-meta strong{color:var(--color-cyan)}.studio__tiles--colors .studio__tile-name{font-size:.8125rem}.studio__summary{display:flex;flex-wrap:wrap;gap:var(--space-2)}.studio__chip{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border:1px solid var(--color-border-strong);border-radius:999px;background:#ffffff0a;color:var(--color-text);font-size:.8125rem;font-weight:600}.studio__chip:hover{border-color:var(--color-cyan)}.studio__chip small{color:var(--color-cyan);font-size:.6875rem;font-weight:600}.studio__buy{display:flex;align-items:center;gap:var(--space-3)}.studio__atc{flex:1}.studio__done{display:grid;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--color-cyan);border-radius:var(--radius);background:color-mix(in srgb,var(--color-cyan) 8%,transparent)}.studio__done[hidden]{display:none}.studio__done-title{display:flex;align-items:center;gap:var(--space-2);font-weight:700}.studio__done-title .icon{color:var(--color-cyan)}.studio__done-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}.studio__done-actions .btn{min-height:2.5rem;padding:.5rem 1rem;font-size:.875rem}@media(min-width:960px){.studio__layout{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-7);align-items:start}.studio__stage-wrap{top:calc(var(--header-height) + var(--space-4));padding:0;background:none}.studio__stage{--stage-h: min(70vh, 38rem)}.studio__note{display:block}.studio__tiles--products{grid-template-columns:repeat(3,minmax(0,1fr))}}
/*# sourceMappingURL=/cdn/shop/t/14/assets/studio.css.map */