.comparison-stage { position:absolute; inset:0; color:var(--forest); }
.comparison-launch { position:absolute; inset:0; display:block; width:100%; height:100%; padding:0; border:0; background:none; color:inherit; border-radius:inherit; text-align:left; cursor:pointer; overflow:hidden; }
.comparison-launch > .product-photo { transition:opacity .25s ease; }
.hover-product .home-product-label { z-index:5; }
.compare-hint { position:absolute; top:14px; right:14px; padding:6px 10px; background:#fffffff2; border-radius:4px; color:var(--forest); font:11px/1.5 var(--body); pointer-events:none; }
.hint-touch { display:none; }
.comparison-layer { position:absolute; inset:0; padding:42px 14px 89px; background:#fff; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.comparison-prompt { position:absolute; top:15px; left:16px; font-size:10px; line-height:1.4; color:var(--muted); }
.comparison-widget { display:flex; flex-direction:column; flex:1; min-height:0; width:100%; }
.comparison-labels { display:flex; justify-content:space-between; gap:12px; width:100%; font-size:9px; line-height:1.3; padding-bottom:7px; }
.comparison-labels > span { flex:1; }
.comparison-labels > span:last-child { text-align:right; }
.comparison-labels strong { display:block; font-size:13px; font-weight:600; margin-top:2px; }
.comparison-canvas { flex:1; min-height:0; display:flex; justify-content:center; }
.comparison-surface { position:relative; height:100%; aspect-ratio:var(--photo-ratio); max-width:100%; overflow:hidden; border-radius:5px; background:#f1f3ef; isolation:isolate; }
.comparison-photo { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.photo-untreated { clip-path:inset(0 calc(100% - var(--position)) 0 0); }
.comparison-divider { position:absolute; top:0; bottom:0; left:var(--position); width:2px; background:#fff; transform:translateX(-50%); box-shadow:0 0 4px #0003; pointer-events:none; }
.comparison-divider > span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:36px; height:36px; border:1px solid #d3ddd3; border-radius:50%; background:#fff; color:var(--forest); font:600 17px/1 var(--body); box-shadow:0 2px 10px #0002; white-space:pre; }
.comparison-range { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; appearance:none; -webkit-appearance:none; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.comparison-range::-webkit-slider-runnable-track { height:100%; background:transparent; }
.comparison-range::-webkit-slider-thumb { -webkit-appearance:none; width:1px; height:100%; background:transparent; border:0; }
.comparison-range::-moz-range-track { height:100%; background:transparent; border:0; }
.comparison-range::-moz-range-thumb { width:1px; height:100%; background:transparent; border:0; }
.comparison-surface:has(.comparison-range:focus-visible) { outline:3px solid #507e41; outline-offset:4px; }
.comparison-context { flex:none; font-size:9px; color:var(--muted); line-height:1.4; margin-top:7px; text-align:center; }
.comparison-expand { position:absolute; top:8px; right:10px; z-index:3; width:34px; height:34px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--forest); font-size:19px; opacity:0; pointer-events:none; }
.comparison-expand:hover { background:var(--sage); }
.hover-product.is-comparing .comparison-layer { opacity:1; pointer-events:auto; }
.hover-product.is-comparing .comparison-launch > .product-photo,
.hover-product.is-comparing .compare-hint { opacity:0; }
.hover-product.is-comparing .comparison-expand { opacity:1; pointer-events:auto; }
.hover-product.is-comparing .home-product-label { bottom:8px; padding:9px 13px; }
.hover-product.is-comparing .home-product-label strong { font-size:21px; }
.hover-product.is-comparing .home-product-label small { font-size:9px; margin-top:3px; }
.hover-product.is-comparing .round-arrow { width:28px; height:28px; flex-basis:28px; font-size:15px; }
#hover-comparison-viewer { border:0; border-radius:10px; background:#fff; color:#202820; width:min(780px,calc(100% - 34px)); max-width:780px; max-height:94dvh; padding:25px; overflow:auto; box-shadow:0 25px 90px #0004; }
#hover-comparison-viewer::backdrop { background:#102218cc; backdrop-filter:blur(5px); }
.hover-dialog-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
.hover-dialog-header .eyebrow { font-size:9px; margin:0 0 7px; }
.hover-dialog-header h2 { font-family:var(--serif,Georgia,serif); font-size:31px; }
#hover-comparison-close { border:1px solid #d7e1d8; border-radius:50%; width:44px; height:44px; background:white; flex:none; font:26px/1 Arial; }
#dialog-comparison-slider .comparison-widget { height:min(54dvh,500px); }
#dialog-comparison-slider .comparison-labels { max-width:520px; margin-inline:auto; font-size:12px; padding-bottom:12px; }
#dialog-comparison-slider .comparison-labels strong { font-size:18px; }
#dialog-comparison-slider .comparison-divider > span { width:44px; height:44px; font-size:21px; }
.slider-instruction { text-align:center; font-size:11px; color:var(--muted); margin-top:12px; }
.hover-dialog-summary { margin-top:16px; font-size:12px; line-height:1.55; }
.hover-dialog-summary strong { display:block; color:var(--forest); font-size:14px; margin-bottom:7px; }
.hover-dialog-summary p { margin:5px 0; color:var(--muted); }
.comparison-original { margin-top:15px; border-top:1px solid var(--line); }
.comparison-original summary { font-size:12px; font-weight:500; padding:12px 0; }
.comparison-original summary::after { content:'+'; }
.comparison-original[open] summary::after { content:'−'; }
#hover-comparison-full { width:100%; height:auto; max-height:60dvh; object-fit:contain; background:#fff; }
#hover-comparison-viewer > .text-link { font-size:12px; margin-top:8px; }
body:has(#hover-comparison-viewer[open]) { overflow:hidden; }
/* Fill the original photo cards; the enlarged view shows each complete photo. */
.hover-product .comparison-layer { padding:0; }
.hover-product .comparison-widget { position:absolute; inset:0; display:block; }
.hover-product .comparison-canvas { position:absolute; inset:0; }
.hover-product .comparison-surface { width:100%; height:100%; max-width:none; aspect-ratio:auto; border-radius:0; }
.hover-product .comparison-prompt { z-index:3; top:12px; left:12px; padding:5px 8px; background:#fffffff2; border-radius:4px; }
.hover-product .comparison-labels { position:absolute; top:49px; left:12px; right:12px; z-index:2; width:auto; padding:0; pointer-events:none; }
.hover-product .comparison-labels > span { flex:0 1 auto; padding:6px 9px; background:#fffffff2; border-radius:4px; }
.hover-product .comparison-context { position:absolute; bottom:78px; left:50%; transform:translateX(-50%); padding:4px 8px; background:#fffffff2; border-radius:4px; white-space:nowrap; pointer-events:none; }
@media(max-width:1100px) {
  .compare-hint { font-size:10px; top:10px; right:10px; }
  .comparison-layer { padding-inline:12px; padding-bottom:80px; }
  .comparison-prompt { left:12px; font-size:9px; }
  .comparison-context { font-size:8px; }
}
@media(max-width:800px) {
  .comparison-layer { padding:39px 10px 75px; }
  .comparison-labels { font-size:8px; gap:6px; }
  .comparison-labels strong { font-size:12px; }
  .comparison-context { font-size:7px; }
  .hover-product.is-comparing .home-product-label strong { font-size:18px; }
  .hover-product.is-comparing .home-product-label small { font-size:8px; }
}
@media(max-width:600px) {
  #hover-comparison-viewer { padding:18px; width:calc(100% - 24px); }
  .hover-dialog-header h2 { font-size:25px; }
  .hover-dialog-header .eyebrow { font-size:8px; }
  #dialog-comparison-slider .comparison-widget { height:min(50dvh,420px); }
  #dialog-comparison-slider .comparison-labels { font-size:11px; }
  #dialog-comparison-slider .comparison-labels strong { font-size:16px; }
  .hover-dialog-summary { font-size:11px; }
  .hover-dialog-summary strong { font-size:13px; }
  .comparison-context { font-size:7px; }
  .hover-product:first-child .comparison-context { font-size:9px; }
}
@media(hover:none),(pointer:coarse) {
  .hint-default { display:none; }
  .hint-touch { display:inline; }
  .hover-product .comparison-layer,.hover-product .comparison-expand { display:none; }
  .hover-product.is-comparing .comparison-launch > .product-photo,
  .hover-product.is-comparing .compare-hint { opacity:1; }
}
@media(prefers-reduced-motion:reduce) {
  .comparison-layer,.comparison-launch > .product-photo { transition:none; }
}

/* WordPress page wrapper: retain the comparison viewer type scale. */
#main #hover-comparison-viewer .hover-dialog-header h2 { font-size:31px; }
#main #hover-comparison-viewer .hover-dialog-header .eyebrow { font-size:9px; line-height:1.5; }
#main #hover-comparison-viewer .slider-instruction { font-size:11px; line-height:1.5; }
#main #hover-comparison-viewer .hover-dialog-summary p { font-size:12px; line-height:1.55; }
@media(max-width:600px) {
 #main #hover-comparison-viewer .hover-dialog-header h2 { font-size:25px; }
 #main #hover-comparison-viewer .hover-dialog-header .eyebrow { font-size:8px; }
 #main #hover-comparison-viewer .hover-dialog-summary p { font-size:11px; }
}