/* Paired approved photography: explicit controls work on mouse, touch and keyboard. */
.range-swap{--swap-ease:cubic-bezier(.22,1,.36,1);isolation:isolate;aspect-ratio:4/5;background:#e9e4d8}
.range-main{position:absolute;inset:0;display:block;overflow:hidden}
.range-photo{position:absolute;inset:0;transition:opacity .48s var(--swap-ease),transform .65s var(--swap-ease);pointer-events:none}
.range-swap .range-photo img{display:block;width:100%;height:100%;transform:none;transition:none}
.range-photo--scene img{object-fit:cover}
.range-photo--product{background:#e9e4d8;opacity:0;transform:scale(.96)}
.range-photo--product img{object-fit:contain;padding:8% 8% 16%;mix-blend-mode:multiply}
.range-main::after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,rgba(24,23,20,.78));pointer-events:none;opacity:1;transition:opacity .48s}
.range-swap .range-meta{z-index:1;color:#fff;inset:auto 20px 20px;flex-direction:row;align-items:center;gap:12px;font-size:13px;transition:color .48s}
.range-swap .range-meta span:last-child{white-space:nowrap}
.range-swap[data-view="product"] .range-photo--product{opacity:1;transform:scale(1)}
.range-swap[data-view="product"] .range-photo--scene{opacity:0;transform:scale(1.025)}
.range-swap[data-view="product"] .range-main::after{opacity:0}
.range-swap[data-view="product"] .range-meta{color:#272520}
.range-swap-toggle{position:absolute;z-index:2;top:16px;right:16px;width:clamp(94px,8.6vw,132px);aspect-ratio:1/1.17;padding:0;border:3px solid #f1ede3;background:#f1ede3;color:#272520;cursor:pointer;box-shadow:0 3px 18px #27252026;transition:transform .25s var(--swap-ease)}
.range-swap-toggle[hidden]{display:none}
.range-thumb{position:absolute;inset:0 0 27px;overflow:hidden;transition:opacity .35s}
.range-swap .range-thumb img{width:100%;height:100%;display:block;transform:none;transition:none}
.range-thumb--product img{object-fit:contain;padding:6px;mix-blend-mode:multiply}
.range-thumb--scene{opacity:0}
.range-thumb--scene img{object-fit:cover}
.range-swap[data-view="product"] .range-thumb--product{opacity:0}
.range-swap[data-view="product"] .range-thumb--scene{opacity:1}
.range-swap-hint{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:4px;height:27px;padding:0 5px;font:12px/1 Hanken,Arial,sans-serif;white-space:nowrap}
.range-swap-hint svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.range-main:focus-visible{outline:3px solid #272520;outline-offset:5px}
.range-swap-toggle:focus-visible{outline:3px solid #272520;outline-offset:3px;box-shadow:0 0 0 7px #f1ede3}
@media(hover:hover){.range-swap-toggle:hover{transform:translateY(-3px)}.range-main:hover .range-meta span:last-child{text-decoration-thickness:2px}}
@media(min-width:701px) and (max-width:1000px){.range-preview{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.range-swap-toggle{width:104px}}
@media(max-width:700px){.range-preview{grid-template-columns:1fr;gap:28px}.range-swap-toggle{width:clamp(98px,24vw,132px);top:16px;right:16px}.range-swap .range-meta{inset:auto 20px 20px;font-size:14px}}
@media(max-width:360px){.range-swap-toggle{width:92px;top:12px;right:12px}.range-swap .range-meta{inset:auto 14px 16px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.range-swap *,.range-main::after{transition:none!important;transform:none!important}}