/* Imported AI try-on styles, isolated from workshop and museum layouts. */
.tryon-reference-layout{display:grid;grid-template-columns:330px 350px minmax(0,1fr);gap:22px;align-items:stretch}.tryon-reference-panel{padding:24px 22px 28px}.tryon-reference-src{display:flex;gap:14px}.tryon-reference-src>*{flex:1}.tryon-reference-group{display:flex;align-items:center;gap:10px;margin:16px 0 10px;font-size:13px;color:#6d6350;letter-spacing:3px}.tryon-reference-group:after{content:"";height:1px;background:var(--line);flex:1}.tryon-reference-tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tryon-reference-tpl{border:2px solid var(--line);border-radius:9px;padding:5px;background:#fff;color:var(--ink);min-width:0}.tryon-reference-tpl.active{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}.tryon-reference-tpl>span{display:block;aspect-ratio:1/1.2;overflow:hidden;border-radius:5px}.tryon-reference-tpl>span+span{display:block;text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:4px}.tryon-reference-preview{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.tryon-reference-preview>img{display:block;width:100%;height:auto}.tryon-reference-band{position:absolute;z-index:2;display:grid;grid-template-rows:repeat(3,1fr);aspect-ratio:15/3;overflow:hidden;border:2px solid #c9a24b;border-radius:8px;box-shadow:0 3px 10px #0005;background:#ead8be}.tryon-reference-band .wearable-row{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));min-height:0}.tryon-reference-band .wearable-cell{min-width:0;min-height:0;overflow:hidden}.tryon-reference-band .wearable-cell img{width:100%;height:100%;object-fit:cover}.tryon-reference-parts{display:flex;flex-wrap:wrap;gap:9px}.tryon-reference-scene{position:relative;border:1px solid var(--line);border-radius:9px;overflow:hidden}.tryon-reference-scene .crop,.tryon-reference-scene>img{display:block;width:100%;aspect-ratio:1.75;object-fit:cover}.tryon-reference-scene>span{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:20px;background:#17334ccc;color:#f2d9a0;font-size:12px}.tryon-reference-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tryon-reference-feedback{display:grid;gap:8px;margin-top:10px;padding:12px;background:#f3ecdc;border:1px dashed #cbb98f;border-radius:9px}.tryon-reference-feedback textarea{min-height:90px;resize:vertical;border:1px solid #d8cdb4;border-radius:7px;padding:9px;font:inherit}
.tryon-reference-tpl{display:grid;grid-template-rows:auto 38px;gap:6px;align-content:start;overflow:hidden}.tryon-reference-tpl>span+span{min-height:38px;display:-webkit-box;align-items:center;justify-content:center;white-space:normal;line-height:1.25;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tryon-reference-tpl-grid+.button{margin-top:18px}.tryon-reference-band{touch-action:none;user-select:none;cursor:grab}.tryon-reference-band:active{cursor:grabbing}.tryon-reference-band img{pointer-events:none}
.tryon-reference-feedback{visibility:hidden;opacity:0;min-height:154px}.tryon-reference-feedback.open{visibility:visible;opacity:1}.tryon-reference-actions button:disabled{opacity:.45;cursor:not-allowed}
.tryon-reference-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr) minmax(0,1.48fr)}
.tryon-reference-panel{min-width:0}
/* Screen presentation is independent of the generated image dimensions. */
:root .tryon-reference-scene{aspect-ratio:auto;height:clamp(360px,65vh,620px)}
:root .tryon-reference-scene>img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
@media(max-width:1250px){
  .tryon-reference-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tryon-reference-panel:last-child{grid-column:1/-1}
}
@media(max-width:620px){
  .tryon-reference-layout{grid-template-columns:minmax(0,1fr);gap:14px}
  .tryon-reference-panel{padding:20px 16px}
  .tryon-reference-panel:last-child{grid-column:auto}
  :root .tryon-reference-scene{height:clamp(280px,60vh,480px)}
}

/* Small grid rows must not inherit text line boxes: their baseline can push
   inline motif images below the clipped row when the ribbon is narrowed. */
.tryon-reference-band .wearable-row{grid-template-rows:minmax(0,1fr);line-height:0}
.tryon-reference-band .wearable-cell{display:block;position:relative;line-height:0}
.tryon-reference-band .wearable-cell img{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.tryon-template-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));aspect-ratio:1;overflow:hidden;border-radius:5px}.tryon-template-band img{display:block;width:100%;height:100%;object-fit:cover}.tryon-reference-tpl .tryon-template-band{aspect-ratio:1}.tryon-reference-feedback:not(.open){display:none}.tryon-reference-feedback.open{display:grid}.tryon-reference-band[hidden]{display:none}.tryon-reference-layout .field input[type="range"]{max-width:100%}