/* Avatar Studio: scrollable catalog, native touch controls, and a real fitting room. */
#shop{padding:18px;z-index:55;background:#082b39b8;backdrop-filter:blur(12px);touch-action:auto}
#shop .studio-panel{width:min(1280px,100%);height:min(920px,96dvh);max-height:96dvh;overflow:hidden;display:flex;flex-direction:column;border:1px solid #a7ddcf3b;border-radius:24px;background:#103641;color:#eff8f2;box-shadow:0 30px 100px #051c32a6}
#shop button,#shop input,#shop select{font:inherit}#shop button{cursor:pointer}#shop button:disabled{cursor:default;opacity:.48}#shop button:focus-visible,#shop input:focus-visible,#shop select:focus-visible{outline:3px solid #ffd991;outline-offset:2px}
#shop .studio-head{flex:none;padding:19px 24px;background:#173e49;border-bottom:1px solid #bde1d01f;gap:16px}#shop h2{font-size:26px;letter-spacing:-1px;margin:4px 0 0}#shop .studio-head>div:first-child{flex:1}#shop .pill{margin-left:0;white-space:nowrap;background:#ffffff10}#shop .studio-eyebrow{color:#9ccaba;font-size:10px;letter-spacing:1.8px;font-weight:800}#shop .studio-beta{display:inline-block;vertical-align:middle;font-size:9px;letter-spacing:1px;border:1px solid #98cbbb55;border-radius:5px;padding:5px 7px;margin-left:12px;color:#b4dfce}
#shop .studio-layout{display:grid;grid-template-columns:330px minmax(0,1fr);flex:1;min-height:0;overflow:hidden}
#shop .studio-fitting{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:18px;gap:11px;border-right:1px solid #bde1d022;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#5d8b85 transparent}
#shop .studio-stage{position:relative;background:radial-gradient(ellipse at 50% 38%,#faf3e5,#deded5 70%,#bcd4cc);border-radius:16px;overflow:hidden;min-height:285px;height:340px;flex:none;color:#456963}
#shop .stage-label{position:absolute;top:16px;left:0;right:0;text-align:center;font-size:9px;font-weight:800;letter-spacing:2px;pointer-events:none;z-index:1}#studioCanvas{width:100%;height:100%;touch-action:none;cursor:grab}#studioCanvas:active{cursor:grabbing}#studioCanvas canvas{display:block;width:100%!important;height:100%!important;touch-action:none}#shop .stage-caption{position:absolute;bottom:15px;left:0;right:0;font-size:10px;text-align:center;pointer-events:none}#shop .stage-turn{position:absolute;left:11px;bottom:37px;border:1px solid #76978d50;border-radius:50%;background:#f5f2e2b5;color:#365c56;width:36px;height:36px;font-size:23px}#shop .stage-turn.back{left:auto;right:11px}
#shop .studio-camera,#shop .studio-motion{display:flex;align-items:center;gap:6px}#shop .studio-camera button,#shop .studio-motion button{font-size:11px;white-space:nowrap;min-height:34px;background:transparent;border:1px solid #7faf9f33;border-radius:7px;color:#b7d4cb;padding:6px 9px}#shop .studio-camera .on,#shop .studio-motion .on{background:#d3e9dc;color:#19423d;border-color:#d3e9dc}#shop .studio-camera label{display:flex;gap:6px;align-items:center;margin-left:auto;font-size:10px;color:#aacac0}#shop input[type=range]{width:65px;accent-color:#91d9bf;min-height:30px;padding:0;border:0}#shop .studio-motion button{flex:1}
#shop .studio-selection{min-height:106px;padding:4px 2px}#shop .studio-selection h3{font-size:18px;letter-spacing:-.4px;margin:6px 0}#shop .studio-selection p{color:#b2ccc4;font-size:12px;line-height:1.55;margin:0 0 7px}#studioSelectionMeta{font-size:11px;color:#f2d391;font-weight:700}#shop .studio-tools{display:flex;gap:5px}#shop .studio-tools .btn{padding:8px 9px;font-size:10px;flex:1;white-space:nowrap}#shop .studio-wearing{display:flex;flex-wrap:wrap;gap:5px}#shop .wearing-chip{max-width:100%;border:1px solid #779c914d;border-radius:20px;background:#ffffff08;padding:5px 8px;font-size:10px;color:#c3dfd4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#shop .studio-save{display:flex;gap:6px;margin-top:5px}#shop .studio-save input{min-width:0;width:0;flex:1;border:1px solid #88b0a755;background:#0b2d36;border-radius:8px;color:#edf5ed;font-size:11px;padding:9px}#shop .studio-save .btn{font-size:10px;padding:9px}#shop .studio-local-note{font-size:10px;color:#9cbbb3;margin:0}#shop .studio-perform{font-size:11px;min-height:36px}
#shop .studio-catalog{min-height:0;min-width:0;display:flex;flex-direction:column;padding:20px 22px 0;background:linear-gradient(135deg,#123b44,#10333e)}
#shop .studio-tabs{display:flex;gap:5px;overflow-x:auto;flex:none;touch-action:pan-x;scrollbar-width:none;padding-bottom:14px}#shop .studio-tabs button{flex:none;border:0;padding:8px 11px;border-radius:8px;background:transparent;font-size:12px;color:#a5c8be;font-weight:700;white-space:nowrap;min-height:36px}#shop .studio-tabs button.on{background:#d8eee1;color:#17473f}
#shop .studio-toolbar{display:flex;gap:9px;flex:none}#shop .studio-search{display:flex;align-items:center;gap:9px;background:#092a345e;border:1px solid #749e923f;border-radius:10px;flex:1;min-width:0;padding:0 12px}#shop .studio-search span{font-size:25px;color:#aacbc0}#shop .studio-search input{background:transparent;border:0;padding:12px 0;min-width:0;width:100%;font-size:12px;color:#eff5ef;outline:0}#shop input::placeholder{color:#9cb6b1}#shop select{background:#183f47;color:#cbe0d8;border:1px solid #779c913f;border-radius:8px;padding:9px 8px;font-size:11px;min-height:38px;max-width:180px}#shop select option{background:#173e49;color:#fff}#shop .studio-filters{display:flex;gap:7px;padding:10px 0;flex:none}#shop .studio-filters select{font-size:10px;min-height:32px;padding:5px 7px}#shop .studio-link{background:transparent;border:0;color:#afd8c5;text-decoration:underline;font-size:10px;margin-left:auto}
#shop #cats{display:flex;flex-direction:row;flex:none;width:auto;gap:6px;overflow-x:auto;overflow-y:hidden;padding:3px 0 11px;border:0;border-bottom:1px solid #9fc4b329;background:transparent;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#547c74 transparent}#shop #cats button{flex:none;font-size:10px;padding:8px 10px;min-height:34px;background:#91b8a90b;border:1px solid #9cbfaa30;border-radius:20px;color:#bbd4c9;white-space:nowrap}#shop #cats button.on{color:#f4d898;border-color:#e3cd8a88;background:#dcc0800d}
#shop .studio-results{display:flex;justify-content:space-between;gap:10px;align-items:center;flex:none;padding:17px 0 12px}#shop .studio-results strong{font-size:15px;letter-spacing:-.2px}#shop .studio-results span{font-size:10px;color:#a6c2b8;text-align:right}#shop .studio-scroll{overflow-y:auto;min-height:0;flex:1;padding:0 2px 20px;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#608b80 transparent}#shop #items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow:visible;padding:0;align-content:start}
#shop .studio-card{min-width:0;position:relative;padding:0;background:#244a50;border:1px solid #769e8745;border-radius:13px;overflow:hidden;transition:border-color .15s,transform .15s}#shop .studio-card.selected{border-color:#e8d091;box-shadow:0 0 0 1px #e8d09160}#shop .studio-card .card-try{display:flex;flex-direction:column;width:100%;text-align:left;color:inherit;padding:0;background:none;border:0}#shop .card-art{position:relative;width:100%;aspect-ratio:1/1.1;background:radial-gradient(ellipse at 50% 33%,#ebede1,#bdcfc4);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#648479}#shop .card-art>img{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0}#shop .card-placeholder{font-size:36px;font-family:serif;opacity:.6}#shop .card-favorite{position:absolute;right:6px;top:6px;width:31px;height:31px;border-radius:50%;border:1px solid #588d7938;background:#f5f4e3df;color:#587a6b;font-size:21px;line-height:1;z-index:1}#shop .card-favorite.on{color:#b55a77}#shop .card-badge{position:absolute;bottom:8px;left:8px;background:#234e46df;border:1px solid #c9e4d633;color:#e3f6e6;padding:4px 6px;border-radius:5px;font-size:8px;font-weight:800;letter-spacing:.5px}#shop .card-copy{padding:11px 10px 10px;width:100%;box-sizing:border-box}#shop .card-name{font-size:11px;font-weight:800;line-height:1.4;min-height:31px;display:block}#shop .card-cost{display:flex;justify-content:space-between;gap:5px;color:#bbcec1;font-size:10px;margin-top:6px}#shop .card-cost strong{color:#e7d298;font-weight:600}#shop .card-delete{font-size:10px;border:0;background:#173d45;color:#d6b9b1;padding:8px;width:100%}#shop .studio-swatch{width:65%;aspect-ratio:1;border-radius:50%;box-shadow:inset -9px -14px 22px #0002,inset 5px 5px 12px #fff5,0 10px 15px #43615322}
#shop .studio-empty{text-align:center;color:#b9cec3;line-height:1.6;padding:36px 20px;font-size:13px}#shop #studioMore{display:block;margin:20px auto 0;font-size:12px;padding:10px 25px}#shop [hidden]{display:none!important}
#shop .studio-checkout{flex:none;display:flex;align-items:center;gap:16px;justify-content:space-between;padding:15px 24px;border-top:1px solid #8abda440;background:#1c4249}#shop .studio-checkout strong{font-size:13px;display:block;margin-bottom:4px}#shop .studio-checkout span{font-size:11px;color:#aec8bc;display:block}#shop .studio-checkout .btn{padding:12px 24px;background:#d6e9b7;color:#213e37;border:0;box-shadow:none;font-size:13px;min-height:44px;white-space:nowrap}#shop .studio-wallet{flex:none;font-size:10px;color:#a8c7bd;padding:7px 24px;background:#11353c;max-height:150px;overflow-y:auto;touch-action:pan-y}#shop .studio-wallet summary{cursor:pointer;padding:2px}#shop .studio-wallet>div{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:9px 0}#shop .studio-wallet .btn{font-size:10px;padding:7px}#shop #bWipe{margin-left:auto}#shop .studio-mobile-switch{display:none}
@media(min-width:1200px){#shop .studio-stage{height:365px}}
@media(max-width:1100px){#shop #items{grid-template-columns:repeat(3,minmax(0,1fr))}#shop .studio-layout{grid-template-columns:290px minmax(0,1fr)}#shop .studio-fitting{padding:13px}#shop .studio-stage{height:310px}#shop .studio-camera button{font-size:10px;padding:6px}#shop .studio-catalog{padding:16px 15px 0}}
@media(max-width:760px){#shop{padding:0}#shop .studio-panel{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}#shop .studio-head{padding:calc(12px + env(safe-area-inset-top)) 14px 12px;gap:9px}#shop h2{font-size:22px}#shop .studio-beta{display:none}#shop .studio-head .pill{padding:7px 9px;font-size:12px}#shop .studio-eyebrow{font-size:8px;letter-spacing:1.4px}#shop .studio-mobile-switch{display:flex;gap:6px;padding:8px 14px;background:#173e49;border-bottom:1px solid #91bea32b;flex:none}#shop .studio-mobile-switch button{flex:1;border:1px solid #afcdb336;border-radius:8px;padding:9px;background:transparent;color:#bad8ca;font-size:12px;min-height:38px}#shop .studio-mobile-switch .on{background:#d6e9d9;color:#164238}#shop .studio-layout{display:flex}#shop .studio-catalog{width:100%;padding:12px 14px 0}#shop .studio-fitting{display:none;border:0;width:100%;padding:14px 18px 22px}#shop.fitting .studio-fitting{display:flex}#shop.fitting .studio-catalog{display:none}#shop .studio-stage{min-height:320px;height:40dvh;max-height:440px;width:min(440px,100%);align-self:center}#shop .studio-tabs{gap:2px;padding-bottom:10px}#shop .studio-tabs button{font-size:11px;padding:7px 10px}#shop .studio-toolbar{gap:6px}#shop .studio-toolbar select{max-width:126px;font-size:10px;padding:8px 5px}#shop .studio-search{padding:0 9px}#shop .studio-search input{font-size:12px}#shop .studio-results{padding:12px 0 9px}#shop .studio-results strong{font-size:13px}#shop .studio-checkout{padding:12px 14px;gap:10px}#shop .studio-checkout strong{font-size:11px}#shop .studio-checkout span{font-size:10px;line-height:1.4}#shop .studio-checkout .btn{font-size:12px;padding:11px 15px}#shop .studio-wallet{padding:7px 14px calc(7px + env(safe-area-inset-bottom))}#shop .studio-selection{min-height:0}#shop .studio-tools .btn,#shop .studio-save input,#shop .studio-save .btn,#shop .wearing-chip{font-size:12px;min-height:40px}#shop .studio-camera button,#shop .studio-motion button{min-height:40px;font-size:12px}#shop input[type=range]{width:110px}#shop .card-name{font-size:12px}#shop .card-favorite{width:35px;height:35px}#shop .studio-wearing{max-height:140px;overflow-y:auto;touch-action:pan-y}}
@media(max-width:480px){#shop #items{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#shop .card-art{aspect-ratio:1/1.06}#shop .studio-filters{gap:5px}#shop .studio-filters select{max-width:118px}#shop .studio-camera label{font-size:10px}#shop input[type=range]{width:75px}}
@media(max-height:550px) and (min-width:761px){#shop{padding:0}#shop .studio-panel{height:100dvh;max-height:100dvh;border-radius:0}#shop .studio-head{padding:8px 16px}#shop .studio-stage{height:285px}#shop .studio-checkout{padding:8px 16px}#shop .studio-catalog{padding-top:8px}#shop .studio-results{padding:8px 0}}
@media(prefers-reduced-motion:reduce){#shop .studio-card{transition:none}}
/* Keep iOS from zooming the viewport when a search, filter or outfit name is focused. */
@media(max-width:760px){#shop .studio-search input,#shop .studio-save input,#shop .studio-toolbar select,#shop .studio-filters select{font-size:16px}#shop .studio-search input,#shop .studio-save input{user-select:text;-webkit-user-select:text}}
