.tryon-wrap { max-width: 920px; margin: 0 auto; padding: 64px 20px 96px; }
.tryon-h1 { margin: 8px 0 12px; }
.tryon-sub { color: #555; max-width: 56ch; margin: 0 0 32px; }
/* Portrait frame — selfies are 1:1 to 9:16, so default tall and centered. */
.tryon-stage { max-width: 460px; margin: 24px auto 40px; }
.tryon-drop { display: flex; align-items: center; justify-content: center; min-height: 520px;
  position: relative; border: 1px solid #ddd; cursor: pointer; border-radius: 2px; }
.tryon-drop.has-photo { min-height: 0; padding: 8px; background: #f5f5f5; }
/* Show the whole selfie, scaled to fit (no cropping). */
.tryon-preview { display: block; max-width: 100%; max-height: 560px; margin: 0 auto; }
/* `display: block` above defeats the `hidden` attribute, so the empty img would
   stay in the flex row and shove the label aside — restore hidden = removed. */
.tryon-preview[hidden] { display: none; }
.tryon-drop.has-photo .tryon-drop-label { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(0,0,0,.6); color: #fff; padding: 6px 14px; border-radius: 2px; }
.tryon-drop-label { font: 500 15px/1.2 'Helvetica Neue', sans-serif; letter-spacing: .02em; }
.tryon-compare { position: relative; max-width: 520px; margin: 0 auto; }
.tryon-compare img { display: block; width: 100%; }
.tryon-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.tryon-slider { position: absolute; left: 0; right: 0; bottom: -28px; width: 100%; }
.tryon-pick { font: 500 13px/1 'Helvetica Neue', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #9c7a2a; margin: 8px 0 16px; }
.tryon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.tryon-style { border: 1px solid #eee; background: #fff; padding: 0; cursor: pointer; border-radius: 2px; overflow: hidden; }
.tryon-style img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.tryon-style span { display: block; padding: 8px 6px; font: 400 12px/1.2 'Helvetica Neue', sans-serif; }
.tryon-style.selected { outline: 2px solid #9c7a2a; outline-offset: -1px; }
.tryon-actions { margin: 32px 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.tryon-msg { color: #9c7a2a; min-height: 1.2em; margin: 0; text-align: center; }
.tryon-app-cta { display: none; border-top: 1px solid #eee; margin-top: 40px; padding-top: 28px; text-align: center; }
.tryon-app-cta.show { display: block; }
.tryon-app-cta p { font: 400 20px/1.3 'Instrument Serif', Georgia, serif; margin: 0 0 16px; }
@media (max-width: 600px) { .tryon-wrap { padding: 40px 16px 72px; } }