#steps{position:sticky;top:12px;z-index:20;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px;margin:0 auto 32px;max-width:620px;background:#fafbf8f5;border:1px solid #d4dcd3;border-radius:8px;box-shadow:0 6px 24px #20231f18;backdrop-filter:blur(12px)}
#steps .step{justify-content:center;gap:8px;padding:10px 5px;min-height:46px;border-radius:5px;color:#596453}
#steps .step.active{background:#263a32;color:white}#steps .step.active b{background:#cef46c;border-color:#cef46c;color:#20231f}#steps .step b{flex-shrink:0}
.more-selection{margin-top:18px;border-top:1px solid #d4dcd3;padding-top:6px}.more-selection>summary{cursor:pointer;padding:14px 0;font-size:15px;font-weight:600}.more-selection>summary span{font-size:13px;font-weight:400;color:#63705c;margin-left:8px}.more-selection[open]>summary{margin-bottom:8px}.more-selection>summary:focus-visible{outline:3px solid #598519;outline-offset:3px}
.is-mini #avatar canvas{outline:none}
.is-mini #avatar[data-renderer="2d"] svg>ellipse{display:none}
#content>.categories{position:sticky;top:var(--category-top,94px);z-index:10;flex-wrap:nowrap;overflow-x:auto;max-width:100%;background:#fafbf8f5;border-bottom:1px solid #d4dcd3;padding:8px 2px;scrollbar-width:thin;backdrop-filter:blur(12px);margin-top:14px}
.category{flex-shrink:0}.garments{max-height:none;overflow:visible;padding:0}.product{border:1px solid #d4d9ce;border-radius:6px;background:white;overflow:hidden;scroll-margin-top:calc(var(--category-top,94px) + 60px)}.product.selected{border-color:#587a2d}.product>.garment{width:100%;border:0;border-radius:0;margin:0}.product-options{padding:0 16px 18px;border-top:1px solid #e0e6d8}.product-options .fit-label{margin-top:16px}.product-options .color-panel{border-top:0;padding-top:0;margin-top:16px}.product-options .recommended-palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px}.product-options .named-swatch span{font-size:13px;overflow-wrap:normal}.accessory-edit{display:block;margin:0 16px 12px;padding:7px 0;border:0;background:none;color:#466327;text-decoration:underline;font-size:14px}.editor>.summary{margin-top:30px;border-top:1px solid #d4d9ce;max-height:none;overflow:visible}.editor:has(.outfit-list)>.summary{display:none}.preview-slot{aspect-ratio:9/16;width:100%;scroll-margin-top:calc(var(--category-top,94px) + 8px)}.preview-expand{display:none}
.editor{scroll-margin-top:102px}.preview-column{top:100px;max-width:390px;width:100%;justify-self:center}.avatar-stage{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden}#avatar{height:100%;width:100%;position:absolute;inset:0}.stage-heading{position:absolute;inset:0 0 auto;z-index:1;padding:12px;pointer-events:none}.stage-footer{position:absolute;inset:auto 0 0;z-index:1;display:flex;max-width:none;padding:12px;pointer-events:none}.stage-heading h2{font-size:16px}.stage-heading>span{font-size:10px}.garment{scroll-margin-top:102px}
@media(min-width:651px){.preview-column{max-width:min(390px,calc((100svh - 150px)*.5625))}}
@media(min-width:851px){.preview-column{position:relative;top:auto}.avatar-stage.is-docked{position:fixed;top:var(--preview-top);left:var(--preview-left);width:var(--preview-width);z-index:3}.preview-column:has(.is-docked) .avatar-note{position:fixed;top:calc(var(--preview-top) + var(--preview-width) * 16 / 9);left:var(--preview-left);width:var(--preview-width);z-index:3;background:#fafbf8}}
@media(max-width:650px){#steps{top:8px;margin-bottom:20px;padding:5px;gap:2px}#steps .step{flex-direction:column;gap:5px;padding:6px 2px;font-size:12px;min-height:60px}#steps .step b{width:24px;height:24px;font-size:11px}#content>.categories{margin-top:24px}.preview-column{position:relative;top:auto;z-index:auto;margin:0 auto;max-width:340px;padding-bottom:0}.avatar-stage{aspect-ratio:9/16}#avatar{height:100%}.stage-heading{inset:0 0 auto;padding:10px}.stage-footer{inset:auto 0 0;padding:10px;font-size:10px}.avatar-note{display:block}.editor{scroll-margin-top:96px}.garment{scroll-margin-top:96px}.workspace{gap:28px}}
@media(max-width:850px){.workspace{display:flex;flex-direction:column;gap:28px}.editor{width:100%;min-width:0}.preview-column{order:-1;position:relative;top:auto;z-index:auto;max-width:340px;width:100%;margin:0 auto;padding:0;background:none}.avatar-stage.is-mini{position:fixed;right:12px;bottom:max(16px,env(safe-area-inset-bottom));width:90px;height:160px;z-index:30;background:transparent!important;border:0;border-radius:0;box-shadow:none}.is-mini .stage-heading,.is-mini .stage-footer{display:none}.is-mini #avatar canvas{pointer-events:none}.is-mini .preview-expand:not([hidden]){display:block;position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:transparent;cursor:pointer}.is-mini .preview-expand:focus-visible{outline-offset:-4px}.avatar-note{display:block}.editor{padding-bottom:175px;scroll-margin-top:calc(var(--category-top,94px) + 8px)}}
