.product-photo-open{display:block;position:relative;width:100%;padding:0;border:0;border-radius:10px;background:#fdfdfb;cursor:zoom-in;overflow:hidden;color:var(--ink)}
.product-photo-open .product-main-image{width:100%;margin:0}
.product-photo-hint{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #e4e7df;border-radius:30px;background:#fffefaf2;box-shadow:0 2px 10px #233c3610;font-size:.75rem;font-weight:600;pointer-events:none}
.product-photo-open:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.photo-viewer{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#f5f5ef;color:var(--ink);overflow:hidden}
.photo-viewer[open]{display:flex;flex-direction:column}
.photo-viewer::backdrop{background:#233c36d9}
.photo-viewer button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.photo-viewer button:disabled{opacity:.35;cursor:default}
.photo-viewer button:focus-visible,.photo-viewer-stage:focus-visible{outline:3px solid #507b66;outline-offset:3px}
.photo-viewer-header{display:flex;align-items:center;gap:20px;padding:18px 28px;padding-top:max(18px,env(safe-area-inset-top));padding-right:max(28px,env(safe-area-inset-right));padding-left:max(28px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:var(--paper);flex:none}
.photo-viewer-heading{min-width:0;flex:1}
.photo-viewer-heading p{margin:0 0 3px;font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.photo-viewer-heading h2{margin:0;max-width:900px;font-family:var(--serif);font-size:1.15rem;font-weight:400;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.photo-viewer-count{font-size:.82rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.photo-viewer-close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:1.8rem!important;line-height:1}
.photo-viewer-workspace{flex:1;min-height:0;position:relative;display:flex}
.photo-viewer-stage{position:relative;flex:1;min-width:0;overflow:hidden;touch-action:none;user-select:none;cursor:zoom-in}
.photo-viewer-stage.is-zoomed{cursor:grab}
.photo-viewer-stage.is-dragging{cursor:grabbing}
.photo-viewer-image{position:absolute;left:50%;top:50%;max-width:none;max-height:none;object-fit:contain;transform-origin:center;user-select:none;-webkit-user-drag:none;will-change:transform}
.photo-viewer-feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(80%,360px);text-align:center;pointer-events:none}
.photo-viewer-status{font-size:.9rem;color:var(--muted);line-height:1.5}
.photo-viewer-feedback button{pointer-events:auto;min-height:44px;border:1px solid var(--blue);border-radius:24px;padding:8px 20px;background:var(--paper)}
.photo-viewer-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:#fffefaf0;box-shadow:0 2px 12px #233c3610;font-size:1.8rem!important}
.photo-viewer-arrow[data-viewer-action=previous]{left:max(20px,env(safe-area-inset-left))}
.photo-viewer-arrow[data-viewer-action=next]{right:max(20px,env(safe-area-inset-right))}
.photo-viewer-footer{flex:none;padding:12px 24px max(16px,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
.photo-viewer-tools{display:flex;align-items:center;justify-content:center;gap:12px}
.photo-viewer-zoom-controls{display:flex;align-items:center;border:1px solid var(--line);border-radius:28px;padding:2px}
.photo-viewer-zoom-controls button{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;font-size:1.4rem}
.photo-viewer-zoom{width:46px;text-align:center;font-size:.8rem;font-variant-numeric:tabular-nums}
.photo-viewer-fit{height:44px;min-width:55px;border:1px solid var(--line);border-radius:25px;background:transparent;padding:0 14px;font-size:.8rem!important}
.photo-viewer-help{margin:0;color:var(--muted);font-size:.75rem}
.photo-viewer-thumbnails{display:flex;gap:8px;overflow-x:auto;max-width:100%;width:fit-content;margin:12px auto 0;padding:4px;scrollbar-width:thin}
.photo-viewer-thumbnails button{flex:0 0 52px;width:52px;height:52px;border:2px solid transparent;border-radius:7px;padding:2px;background:transparent}
.photo-viewer-thumbnails button[aria-pressed=true]{border-color:var(--blue)}
.photo-viewer-thumbnails img{width:100%;height:100%;object-fit:cover;border-radius:3px}
@media(hover:hover){.photo-viewer button:not(:disabled):hover{background:#e9eee5}.product-photo-open:hover .product-photo-hint{background:#fffefa}}
@media(max-width:600px){.photo-viewer-header{padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));gap:10px}.photo-viewer-heading h2{font-size:.92rem}.photo-viewer-heading p{font-size:.58rem}.photo-viewer-count{font-size:.72rem}.photo-viewer-close{width:44px;height:44px}.photo-viewer-arrow{width:44px;height:44px}.photo-viewer-arrow[data-viewer-action=previous]{left:8px}.photo-viewer-arrow[data-viewer-action=next]{right:8px}.photo-viewer-footer{padding:9px 12px max(12px,env(safe-area-inset-bottom))}.photo-viewer-tools{flex-wrap:wrap;gap:8px}.photo-viewer-help{flex-basis:100%;text-align:center;font-size:.68rem}.photo-viewer-thumbnails{margin-top:8px}.photo-viewer-thumbnails button{width:46px;height:46px;flex-basis:46px}.product-photo-hint{font-size:.7rem;right:10px;bottom:10px}}
@media(max-height:500px){.photo-viewer-header{padding-top:8px;padding-bottom:8px}.photo-viewer-heading h2{-webkit-line-clamp:1}.photo-viewer-heading p,.photo-viewer-help,.photo-viewer-thumbnails{display:none}.photo-viewer-footer{padding-top:6px;padding-bottom:6px}}