/* Each image layer keeps its own crop during the opening crossfade. */
.hero-visual>.hero-slide-image,.hero-visual.portrait-slide>.hero-slide-image{inset:0;width:100%;height:100%;object-fit:cover}
.hero-visual{isolation:isolate}

/* Non-destructive photo orientation, shared by cards, thumbnails and galleries. */
.photo-surface{position:relative;display:block;width:100%;height:100%;overflow:hidden;container-type:size}
.photo-surface>img{position:absolute;display:block;left:50%;top:50%;width:100%;height:100%;max-width:none;object-fit:var(--photo-fit,contain);object-position:var(--photo-position,50% 50%);filter:brightness(var(--photo-brightness,1));transform:translate(-50%,-50%) rotate(var(--photo-rotation,0deg)) scale(var(--photo-zoom,1))}
.photo-surface.is-rotated>img{width:100cqh;height:100cqw}
.product-photo>.photo-surface{position:absolute;inset:0}
.product-card .product-photo .photo-surface>img{object-fit:var(--photo-fit,contain);transform:translate(-50%,-50%) rotate(var(--photo-rotation,0deg)) scale(var(--photo-zoom,1));transition:none}
#product-dialog .product-gallery-stage{height:320px}
#product-dialog .product-gallery-stage .photo-surface>img{width:100%;height:100%;background:transparent}
#product-dialog .product-gallery-stage .photo-surface.is-rotated>img{width:100cqh;height:100cqw}
.gallery-thumbnails button{position:relative;overflow:hidden}
#product-dialog .gallery-thumbnails .photo-surface.is-rotated>img,.gallery-thumbnails .photo-surface.is-rotated>img{width:100cqh;height:100cqw}
.viewer-stage>.photo-surface{flex:1;min-width:0;min-height:0}
.viewer-stage .photo-surface.is-rotated>img{width:100cqh;height:100cqw}

/* The warehouse photograph itself has an exact 16:9 viewport. */
.warehouse-image-button{aspect-ratio:16/9;overflow:hidden}
.warehouse-image-button>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.warehouse-image-button>.gallery-enlarge{position:absolute;inset:auto 14px 14px auto;z-index:1;margin:0;background:var(--paper);box-shadow:0 2px 12px #14291f30}
.about-images{padding-right:0;padding-bottom:0}
.category-tabs{flex-wrap:wrap;overflow:visible;gap:7px;padding-bottom:0}
.category-tabs button{white-space:normal;text-align:left}
.catalog-search{flex:1;max-width:460px;margin-left:0}
.measurement-help{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.measurement-help .eyebrow{margin-bottom:16px}
.measurement-help figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.diagram-open{display:block;position:relative;width:100%;padding:0;border:0;background:#fff;color:var(--ink)}
.diagram-open>img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain}
.diagram-enlarge{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--soft);font-size:15px;border-top:1px solid var(--line)}
.diagram-enlarge svg{width:16px;height:16px}
.measurement-help figcaption{padding:18px 22px;font-size:16px;line-height:1.6}
.measurement-help figcaption strong{display:block;font-size:19px;margin-bottom:5px}
.measurement-help figcaption p{margin:0}
.diagram-open:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
#viewer-zoom{border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);padding:10px 13px;font:inherit;font-size:15px;min-height:42px}
#viewer-zoom[hidden]{display:none}
.viewer-header h2{margin-right:auto}
.viewer-stage.is-zoomed{overflow:auto;align-items:flex-start;justify-content:flex-start;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
.viewer-stage.is-zoomed>.photo-surface{flex:none;width:var(--diagram-width,1200px);height:var(--diagram-height,760px)}
@media(max-width:760px){
 #product-dialog .product-gallery-stage{height:300px}
 .category-tabs{flex-wrap:wrap;overflow:visible;gap:5px}
 .category-tabs button{padding:9px 10px;font-size:15px}
 .catalog-search{max-width:none}
 .warehouse-image-button>img{height:100%}
 .warehouse-image-button>.gallery-enlarge{inset:auto 10px 10px auto;padding:6px 8px;font-size:13px}
 .measurement-help figcaption{padding:16px}
 .viewer-header{flex-wrap:wrap;gap:10px}
 .viewer-header h2{flex:1;font-size:20px}
 #viewer-zoom{order:3}
}
@media(max-width:360px){#product-dialog .product-gallery-stage{height:270px}.warehouse-image-button>img{height:100%}}