.tryon-hero { text-align: center; padding: 40px 0 24px; } .tryon-hero h1 { font-size: 2rem; } .tryon-hero p { color: var(--text-secondary); max-width: 500px; margin: 8px auto 0; font-size: .95rem; } .tryon-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; min-height: 500px; } .tryon-left { background: var(--bg-section); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; position: relative; overflow: hidden; } .tryon-left.has-photo { justify-content: flex-start; } .upload-zone { border: 2px dashed var(--glass-border); border-radius: 16px; padding: 40px; text-align: center; cursor: pointer; width: 100%; transition: .2s; } .upload-zone:hover { border-color: var(--primary); background: var(--primary-light); } .upload-zone i { font-size: 3rem; color: #9ca3af; display: block; margin-bottom: 12px; } .upload-zone p { color: var(--text-secondary); font-size: .9rem; } .upload-zone input { display: none; } .tryon-canvas-wrap { position: relative; width: 100%; height: 100%; min-height: 400px; display: flex; align-items: center; justify-content: center; } #tryonCanvas { max-width: 100%; max-height: 500px; border-radius: 8px; cursor: grab; } #tryonCanvas:active { cursor: grabbing; } .tryon-right { display: flex; flex-direction: column; gap: 12px; } .tryon-item-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; overflow-y: auto; max-height: 500px; padding-right: 4px; } .tryon-item { border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: .2s; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.06); } .tryon-item:hover { border-color: var(--primary-light); } .tryon-item.active { border-color: var(--primary); } .tryon-item img { width: 100%; height: 80px; object-fit: cover; display: block; } .tryon-item span { display: block; padding: 4px 6px 6px; font-size: .72rem; color: var(--text); font-weight: 500; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tryon-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; } .tryon-controls label { font-size: .82rem; color: var(--text-secondary); } .tryon-controls input[type="range"] { flex: 1; min-width: 100px; accent-color: var(--primary); } .tryon-status { font-size: .8rem; color: var(--text-secondary); margin-top: 8px; } .loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--glass-border); border-top-color: var(--primary); border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes spin { to { transform: rotate(360deg); } } .cat-filter { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } .cat-filter button { padding: 5px 14px; border: 1px solid var(--glass-border); border-radius: 20px; background: #fff; font-size: .8rem; cursor: pointer; transition: .2s; } .cat-filter button.active { background: var(--primary); color: #fff; border-color: var(--primary); } @media (max-width: 768px) { .tryon-layout { grid-template-columns: 1fr; } .tryon-left { min-height: 300px; } .tryon-item-list { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); max-height: 300px; } .tryon-hero h1 { font-size: 1.5rem; } }