.tryon { display: grid; gap: 16px; padding: 18px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(26, 26, 26, 0.07); min-width: 0; }
.tryon [hidden] { display: none !important; }
.tryon-form { display: grid; gap: 16px; }
.tryon-drop { position: relative; display: grid; place-items: center; min-height: 240px; padding: 20px; border-radius: 18px; border: 2px dashed var(--line-strong); background: var(--tint); text-align: center; cursor: pointer; overflow: hidden; }
.tryon-drop:hover, .tryon-drop.is-over { border-color: var(--ink); }
.tryon-drop:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.tryon-drop b { display: block; font-size: 18px; }
.tryon-drop small { display: block; margin-top: 4px; color: var(--muted); font-size: 14.5px; max-width: 22em; }
.tryon-drop img { max-width: 100%; max-height: 340px; border-radius: 12px; }
.tryon-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tryon-styles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tryon-styles legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tryon-styles label { cursor: pointer; }
.tryon-styles input { position: absolute; opacity: 0; }
.tryon-styles span { display: block; padding: 8px 14px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); font-size: 15px; }
.tryon-styles input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tryon-styles input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.tryon-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--soft); cursor: pointer; }
.tryon-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.tryon-go { width: 100%; min-height: 50px; font-size: 17px; }
.tryon-go:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.tryon-status { margin: 0; text-align: center; }
.tryon-status.is-error { color: #a3261d; }
.tryon-result { display: grid; gap: 12px; justify-items: center; }
.tryon-result img { width: 100%; height: auto; border-radius: 18px; }
.tryon-upsell { display: grid; gap: 10px; justify-items: start; padding: 20px; border-radius: 18px; background: var(--band-bg); }
.tryon-upsell h2 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); }
.tryon-upsell p { margin: 0; color: var(--soft); }
.tryon-upsell .label { color: var(--soft); }
.tryon.is-busy .tryon-drop, .tryon.is-busy .tryon-styles, .tryon.is-busy .tryon-consent { opacity: 0.5; pointer-events: none; }
.tryon-drop--ref { min-height: 140px; }
.tryon-drop--ref img { max-height: 200px; }
.tryon.is-busy .tryon-drop--ref { opacity: 0.5; pointer-events: none; }
.tryon-styles--pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tryon-styles--pics legend { grid-column: 1 / -1; }
.tryon-styles--pics span { display: grid; gap: 6px; padding: 5px 5px 8px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); text-align: center; height: 100%; align-content: start; }
.tryon-styles--pics img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; border-radius: 10px; }
.tryon-styles--pics i { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 10px; border: 1.5px dashed var(--line-strong); font-style: normal; font-size: 26px; color: var(--muted); }
.tryon-styles--pics b { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.tryon-styles--pics label:hover span { border-color: var(--ink); }
.tryon-styles--pics input:checked + span { background: var(--card); color: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
@media (max-width: 420px) { .tryon-styles--pics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }