/* v46: full subjects at native browser zoom, with extended lateral scenery. */
.panorama-comparison {
  --panorama-height:min(38.4615vw, calc(100svh - 112px), 738px);
  --edge-blend:6%;
  position:relative;
  height:var(--panorama-height);
  margin:0;
  background-image:var(--panorama-bg);
  background-size:cover;
  background-position:center;
  scroll-margin-top:24px;
}
.panorama-comparison .comparison-stage {height:100%;background:transparent}
.panorama-comparison .comparison-after,
.panorama-comparison .comparison-before {position:absolute;inset:0;height:100%}
.panorama-comparison .comparison-stage img,
.panorama-comparison > .panorama-source {
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:auto;height:100%;max-width:none;max-height:none;object-fit:contain;
  mask-image:linear-gradient(to right,transparent,#000 var(--edge-blend),#000 calc(100% - var(--edge-blend)),transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--edge-blend),#000 calc(100% - var(--edge-blend)),transparent);
}
.panorama-comparison .comparison-label {top:20px;font-size:clamp(12px,.95vw,18px)}
.panorama-comparison {--comparison-handle-size:clamp(44px,3vw,56px)}
.panorama-comparison[data-panorama="under"] {background-size:auto 103.6%;background-position:center top}
.panorama-comparison[data-panorama="under"] .comparison-stage img {
  mask-image:url('assets/panorama/mask-f01b812e8d31.svg');-webkit-mask-image:url('assets/panorama/mask-f01b812e8d31.svg');
  mask-size:100% 100%;-webkit-mask-size:100% 100%;
}
.panorama-comparison[data-panorama="bodyshop"] {--edge-blend:12%;background-size:auto 103%;background-position:center bottom}

.panorama-comparison[data-panorama="bodyshop"] > .panorama-source {top:3.4%;mask-image:url("assets/panorama/mask-25ad026a3033.svg");-webkit-mask-image:url("assets/panorama/mask-25ad026a3033.svg");mask-size:100% 100%;-webkit-mask-size:100% 100%}

@media(min-width:801px){.panorama-comparison[data-panorama="bodyshop"]::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% + var(--panorama-height)*.0435185);width:2px;background:#fff;pointer-events:none}}

/* Keep copy out of the photograph, with compact protection symbols. */
.protection-banner.ppf-protection.panorama-protection {
  display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;
  aspect-ratio:auto;background:#fff;overflow:hidden;scroll-margin-top:20px;
}
.panorama-protection .protection-copy {
  --icon-size:clamp(26px,2.05vw,36px);
  order:0;width:min(84%,1100px);max-width:none;margin:0 auto;
  padding:24px 0 22px;mix-blend-mode:normal;
}
.panorama-protection .protection-copy h2 {
  font-size:clamp(24px,2vw,36px);font-weight:700;line-height:1.2;
  margin:0 0 16px;letter-spacing:.04em;
}
.panorama-protection ul {gap:clamp(12px,1.4vw,24px);grid-template-columns:repeat(4,minmax(0,1fr))}
.panorama-protection .protection-icon {margin-bottom:7px}
.panorama-protection .protection-label {
  min-height:36px;padding:6px 8px;font-size:clamp(12px,.94vw,16px);line-height:1.3;
}
.panorama-protection .protection-art {
  order:1;position:relative;inset:auto;width:100%;
  height:min(38.4615vw, calc(100svh - 220px), 680px);aspect-ratio:auto;
  background:var(--panorama-bg) center/cover no-repeat;
}
.panorama-protection .protection-scene {
  position:absolute;left:50%;top:0;width:auto;height:100%;aspect-ratio:2048/1338;
  transform:translateX(-50%);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.panorama-protection .protection-photo,
.panorama-protection .protection-desaturated {object-fit:contain}
@media(min-width:801px) {
  .panorama-protection .protection-art {height:min(38.4615vw,calc(100svh - 250px),630px)}
  .panorama-protection .protection-scene {width:100%;height:100%;aspect-ratio:auto;mask-image:none;-webkit-mask-image:none}
  .panorama-protection .protection-photo,.panorama-protection .protection-desaturated {object-fit:cover}
  .panorama-protection .protection-desaturated {clip-path:ellipse(17.3% 50% at 49.7% 73%);mask-image:linear-gradient(#000 0 73%,transparent 73%);-webkit-mask-image:linear-gradient(#000 0 73%,transparent 73%)}
  .panorama-protection .protection-dome-motion {left:32.4%;top:23%;width:34.6%;height:50%}
}

/* Phones retain the original closer framing and full image height. */
@media (max-width:800px) {
  .panorama-comparison {height:auto;background-image:none}
  .panorama-comparison .comparison-stage {height:auto}
  .panorama-comparison .comparison-after {position:relative;height:auto}
  .panorama-comparison .comparison-stage img,
  .panorama-comparison > .panorama-source {
    position:static;transform:none;width:100%;height:auto;max-width:100%;
    mask-image:none;-webkit-mask-image:none;
  }
  .panorama-comparison[data-panorama] .comparison-stage img {mask-image:none;-webkit-mask-image:none}
  .panorama-comparison[data-panorama="bodyshop"] > .panorama-source {height:auto;object-fit:contain;mask-image:none;-webkit-mask-image:none}
  .panorama-comparison .comparison-label {top:12px;font-size:11px}
  .panorama-protection .protection-copy {--icon-size:28px;width:90%;padding:24px 0 18px}
  .panorama-protection .protection-copy h2 {font-size:clamp(22px,5vw,30px);margin-bottom:18px}
  .panorama-protection ul {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .panorama-protection .protection-label {font-size:13px;min-height:38px}
  .panorama-protection .protection-art {height:auto;aspect-ratio:2048/1338;background:none}
  .panorama-protection .protection-scene {width:100%;height:auto;left:0;transform:none;mask-image:none;-webkit-mask-image:none}
}

/* Continuous bodyshop panorama, with original close framing on mobile. */
.panorama-comparison[data-panorama="bodyshop"]{background:#151515}
.panorama-comparison[data-panorama="bodyshop"]::after{display:none}
.panorama-comparison[data-panorama="bodyshop"] picture{display:block;width:100%;height:100%}
.panorama-comparison[data-panorama="bodyshop"] .panorama-source{
 position:static;top:auto;left:auto;transform:none;width:100%;height:100%;
 max-width:100%;max-height:none;object-fit:contain;mask-image:none;-webkit-mask-image:none;
}
@media(min-width:801px){
 .panorama-comparison[data-panorama="bodyshop"]{width:min(100%,calc(var(--panorama-height) * 2.603604));margin:0 auto}
 .panorama-protection .protection-art{
  --art-height:min(38.476756vw,calc(100svh - var(--protection-copy-height,180px) - 56px),680px);
  height:var(--art-height);width:calc(var(--art-height) * 2.598972);max-width:100%;margin:0 auto;background:none;
 }
 .panorama-protection .protection-scene{width:100%;height:100%;aspect-ratio:2022/778}
 .panorama-protection .protection-photo,.panorama-protection .protection-desaturated{object-fit:contain}
 .panorama-protection .protection-desaturated{
  clip-path:ellipse(17.3% 45.9% at 49.7% 76.4%);
  mask-image:linear-gradient(#000 0 76.4%,transparent 76.4%);
  -webkit-mask-image:linear-gradient(#000 0 76.4%,transparent 76.4%);
 }
 .panorama-protection .protection-dome-motion{left:32.4%;top:30.5%;width:34.6%;height:45.9%}
}
@media(max-width:800px){
 .panorama-comparison[data-panorama="bodyshop"] picture{height:auto}
 .panorama-comparison[data-panorama="bodyshop"] .panorama-source{height:auto}
}
/* Complete supplied photographs at their original ratio. */
.ceramic-photo-comparison,
.wheel-photo-comparison,
.black-photo-comparison,
.bodyshop-photo-comparison {
  --comparison-handle-size:clamp(44px,3vw,56px);
  width:min(100%,calc((100svh - 112px) * 2.41509434));
  margin:0 auto;
  scroll-margin-top:24px;
}
.ceramic-photo-comparison .comparison-stage img,
.wheel-photo-comparison .comparison-stage img,
.black-photo-comparison .comparison-stage img,
.bodyshop-photo-comparison .comparison-stage img {
  display:block;width:100%;height:auto;max-height:none;object-fit:contain;
}
.ceramic-photo-comparison .comparison-label,
.wheel-photo-comparison .comparison-label,
.black-photo-comparison .comparison-label,
.bodyshop-photo-comparison .comparison-label {top:20px;font-size:clamp(12px,.95vw,18px)}
@media(max-width:800px) {
  .ceramic-photo-comparison .comparison-label,
  .wheel-photo-comparison .comparison-label,
  .black-photo-comparison .comparison-label,
  .bodyshop-photo-comparison .comparison-label {top:12px;font-size:11px}
}
/* The wheel hub is at (1047, 409) in both 2048 × 848 photographs. */
.wheel-photo-comparison {--comparison-position:51.1%}
.wheel-photo-comparison .comparison-handle {top:48.25%}