/* The same aspect ratios and image geometry are used in the editor and on the site. */
.alignment-frame { position:relative; overflow:hidden; background:#e8e0d5; aspect-ratio:8/5; }
.alignment-frame[data-device="mobile"] { aspect-ratio:5/4; }
.alignment-layer { position:absolute; inset:0; overflow:hidden; }
.alignment-frame img.alignment-image { position:absolute; inset:auto; left:50%; top:50%; width:100%; height:100%; max-width:none; margin:0; object-fit:cover; object-position:50% 35%; transform:translate(-50%,-50%); transition:none; pointer-events:none; user-select:none; }
.before-after.alignment-frame { min-height:0; }
.before-after[data-photo-mode="none"],.alignment-layer[hidden] { display:none!important; }
.alignment-frame[data-photo-mode="after"] .compare-before-layer,.alignment-frame[data-photo-mode="before"] .compare-after-layer { display:none; }
.before-after:not([data-photo-mode="both"]) :is(.compare-range,.compare-line,.compare-label,.treatment-info) { display:none; }
.alignment-frame:not([data-photo-mode="both"]) :is(.compare-after-layer,.alignment-layer-after) { opacity:1; clip-path:none!important; mask-image:none!important; -webkit-mask-image:none!important; }
.alignment-preview:not([data-photo-mode="both"]) :is(.alignment-preview-label,.alignment-divider) { display:none; }
.alignment-empty { display:none; }
.alignment-preview[data-photo-mode="none"] .alignment-empty { display:grid; position:absolute; inset:0; place-content:center; padding:1.5rem; margin:0; text-align:center; color:#746e66; font:400 .85rem/1.5 Arial,sans-serif; }
.treatment-photo { min-width:0; }
.treatment-photo [hidden] { display:none!important; }
.treatment-photo>label { display:grid; gap:.65rem; }
.treatment-photo .remove-photo { margin-top:.65rem; padding:.6rem .8rem; border:1px solid #cfb493; background:#fff; color:#704b33; cursor:pointer; }
.treatment-photo .remove-photo:disabled { opacity:.45; cursor:default; }
.photo-status { margin:.5rem 0 0; font:400 .8rem/1.45 Arial,sans-serif; color:#795c38; }
.photo-status.is-error { color:#a32424; }
@media (max-width:720px) { .before-after.alignment-frame { aspect-ratio:5/4; } }

.alignment-editor { margin-top:1.5rem; padding:1.25rem; border:1px solid var(--line,#d9d0c3); background:#fff; color:#292722; }
.alignment-heading h4 { margin:0 0 .4rem; font:400 1.3rem Georgia,serif; }
.alignment-heading p { margin:0 0 1rem; color:#746e66; font:400 .8rem/1.5 Arial,sans-serif; }
.alignment-toolbar { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-bottom:1rem; }
.alignment-choice>span { display:block; margin-bottom:.4rem; font:600 .68rem Arial,sans-serif; color:#746e66; text-transform:uppercase; letter-spacing:.08em; }
.alignment-choice>div { display:flex; gap:.35rem; }
.alignment-editor button { min-height:2.6rem; border:1px solid #d9c5a8; background:#fff; color:#6c5030; padding:.55rem 1rem; font:600 .76rem Arial,sans-serif; cursor:pointer; transition:background-color .18s,color .18s; }
.alignment-editor button[aria-pressed="true"] { background:#a78a60; color:#fff; border-color:#a78a60; }
.alignment-editor button:hover:not([aria-pressed="true"]) { background:#f6eee2; }
.alignment-editor button:focus-visible,.alignment-preview:focus-visible { outline:2px solid #8b663b; outline-offset:3px; }
.alignment-workspace { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(15rem,1fr); gap:1.25rem; align-items:start; }
.alignment-preview-column { min-width:0; }
.alignment-preview { width:100%; outline:1px solid #ded3c4; border-radius:.4rem; cursor:grab; touch-action:none; }
.alignment-preview.is-dragging { cursor:grabbing; }
.alignment-preview[data-device="mobile"] { width:min(100%,22rem); margin-inline:auto; }
.alignment-preview[data-photo-mode="both"][data-view="overlay"] .alignment-layer-after { opacity:var(--overlay-opacity,.5); }
.alignment-preview[data-photo-mode="both"][data-view="split"] .alignment-layer-after { clip-path:inset(0 0 0 var(--split-position,50%)); }
@supports (mask-image:linear-gradient(90deg,transparent,#000)) {
  .alignment-preview[data-photo-mode="both"][data-view="split"] .alignment-layer-after { clip-path:none; mask-image:linear-gradient(90deg,transparent calc(var(--split-position,50%) - 1%),#000 calc(var(--split-position,50%) + 1%)); }
}
.alignment-grid { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 33.1%,#ffffff66 33.2%,#ffffff66 33.4%,transparent 33.5%,transparent 66.4%,#ffffff66 66.5%,#ffffff66 66.7%,transparent 66.8%),linear-gradient(transparent 33.1%,#ffffff66 33.2%,#ffffff66 33.4%,transparent 33.5%,transparent 66.4%,#ffffff66 66.5%,#ffffff66 66.7%,transparent 66.8%); }
.alignment-preview[data-view="split"] .alignment-grid { display:none; }
.alignment-preview-label { position:absolute; bottom:.7rem; padding:.35rem .65rem; background:#fffffff0; color:#3d3224; border-radius:2rem; font:500 .6rem Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; pointer-events:none; }
.alignment-label-before { left:.7rem; }.alignment-label-after { right:.7rem; }
.alignment-preview[data-view="overlay"] .alignment-preview-label { display:none; }
.alignment-divider { display:none; position:absolute; inset-block:0; left:var(--split-position,50%); width:1px; background:#ffffff66; pointer-events:none; }
.alignment-preview[data-photo-mode="both"][data-view="split"] .alignment-divider { display:block; }
.alignment-preview-options { display:grid; gap:.85rem; margin-top:1rem; }
.alignment-editor label { display:grid; gap:.4rem; margin:0; color:#635b51; font:500 .73rem Arial,sans-serif; letter-spacing:0; }
.alignment-editor select { width:100%; min-width:0; padding:.65rem; background:#fff; border:1px solid #d9d0c3; color:#292722; font:400 .78rem Arial,sans-serif; }
.alignment-editor input[type="range"] { width:100%; min-width:0; margin:.2rem 0; padding:0; accent-color:#a78a60; }
.alignment-editor [hidden] { display:none!important; }
.alignment-controls { display:grid; gap:.85rem; min-width:0; }
.alignment-editing { margin:0 0 .1rem; padding:.65rem .75rem; background:#f5eee4; color:#795c38; font:600 .8rem Arial,sans-serif; }
.alignment-control { display:grid; grid-template-columns:minmax(0,1fr) 5.4rem; gap:.65rem; align-items:end; }
.alignment-editor .alignment-number { display:flex; gap:0; align-items:center; border:1px solid #d9d0c3; background:#fff; }
.alignment-number input { width:100%; min-width:0; padding:.55rem .25rem .55rem .45rem; border:0; background:transparent; color:#292722; font:400 .8rem Arial,sans-serif; text-align:right; }
.alignment-number>span:last-child { padding-right:.4rem; color:#81776a; }
.alignment-controls .alignment-reset { margin-top:.25rem; }
.alignment-tip,.alignment-status { margin:0; color:#746e66; font:400 .72rem/1.5 Arial,sans-serif; }
.alignment-status { color:#87673e; }
.alignment-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:900px) { .alignment-workspace { grid-template-columns:1fr; }.alignment-controls { grid-template-columns:1fr 1fr; }.alignment-editing,.alignment-reset,.alignment-tip,.alignment-status { grid-column:1/-1; } }
@media(max-width:560px) { .alignment-editor { padding:.85rem; }.alignment-toolbar { gap:.75rem 1.25rem; }.alignment-controls { grid-template-columns:1fr; }.alignment-editor button { padding:.55rem .8rem; } }