#media-viewer{inset:0;margin:auto;width:min(520px,calc(100% - 30px));height:fit-content;max-height:90dvh;border:1px solid var(--line);padding:25px;background:var(--cream);box-shadow:0 20px 100px #0004;overflow:auto}
#media-viewer::backdrop{background:#241a15b3;backdrop-filter:blur(7px)}
.media-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:18px}
.media-heading h2{font-size:35px;letter-spacing:-1px;margin:0}
.media-close{border:0;background:transparent;color:var(--ink);font-size:28px;cursor:pointer;padding:0 5px}
.media-content{text-align:center;padding:32px 0 12px}
.media-content>img{display:block;width:150px;height:150px;margin:15px auto 28px;box-shadow:0 8px 25px #32271f22}
.media-content>p{font-size:11px;line-height:1.7;color:var(--muted);max-width:380px;margin:15px auto}
.media-navigation{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--line)}
.media-navigation button{border:1px solid var(--line);background:transparent;color:var(--ink);width:42px;height:42px;cursor:pointer;font-size:20px}
.media-index{font-size:11px;letter-spacing:2px}
.reel-viewer .media-navigation{display:none}
.media-content iframe{display:block;width:100%;height:min(600px,65dvh);border:0;background:white}
.reel-viewer .media-content{padding-top:15px}
.media-content>img.hair-viewer-photo{width:auto;max-width:100%;height:min(550px,65dvh);margin:0 auto;object-fit:contain;box-shadow:none}
@media(max-width:700px){.media-heading h2{font-size:30px}#media-viewer{padding:20px}}