.ps-viewer, .ps-viewer * { box-sizing: border-box; }
.ps-viewer { position: relative; width: 100%; max-width: 100%; background: #fff; border: 1px solid #e2e4e8; border-radius: 8px; overflow: hidden; color: #252525; font-family: inherit; line-height: 1.4; }
.ps-viewer[hidden], .ps-viewer [hidden], .ps-gallery-shell [hidden] { display: none !important; }
.ps-stage { display: flex; position: relative; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; min-height: 200px; background: #fafafa; overflow: hidden; cursor: ew-resize; touch-action: pan-y; outline-offset: -3px; user-select: none; --ps-origin-x: 50%; --ps-origin-y: 50%; }
.ps-ratio-landscape .ps-stage { aspect-ratio: 4 / 3; }
.ps-ratio-portrait .ps-stage { aspect-ratio: 3 / 4; }
.ps-stage:focus-visible { outline: 3px solid #2563eb; }
.ps-stage.ps-dragging { cursor: grabbing; }
.ps-video, .ps-image { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0 !important; max-width: none !important; object-fit: contain; object-position: center; pointer-events: none; -webkit-user-drag: none; background: #fafafa; }
.ps-stage.ps-zoomed .ps-video, .ps-stage.ps-zoomed .ps-image { transform: scale(1.8); transform-origin: var(--ps-origin-x) var(--ps-origin-y); }
.ps-drag-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; border-radius: 30px; font-size: 12px; font-weight: 600; color: #303030; background: rgba(255,255,255,.92); padding: 7px 14px; box-shadow: 0 1px 7px rgba(0,0,0,.08); pointer-events: none; white-space: nowrap; }
.ps-drag-hint span { margin-right: 3px; }
.ps-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid #ededed; min-height: 52px; }
.ps-sources, .ps-actions { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ps-viewer button, .ps-gallery-toolbar button { cursor: pointer; font: inherit; line-height: 1.3; background: #fff; color: #333; border: 1px solid #ddd; border-radius: 5px; padding: 8px 10px; margin: 0; box-shadow: none; min-height: 35px; }
.ps-viewer button:hover, .ps-gallery-toolbar button:hover { border-color: #555; }
.ps-viewer button:focus-visible, .ps-gallery-toolbar button:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.ps-viewer button.is-current, .ps-gallery-toolbar button.is-current { background: #292929; color: #fff; border-color: #292929; }
.ps-actions { margin-left: auto; }
.ps-viewer .ps-spinner, .ps-viewer .ps-error { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2; border-radius: 5px; max-width: calc(100% - 30px); padding: 9px 12px; font-size: 12px; color: #333; text-align: center; background: rgba(255,255,255,.95); }
.ps-viewer .ps-error { background: #fef2f2; color: #842323; }
.ps-viewer .ps-sr-only { position: absolute; height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; margin: -1px; border: 0; }
.ps-gallery-shell { position: relative; width: 48%; max-width: 100%; float: left; margin-bottom: 2em; }
.ps-gallery-shell .woocommerce-product-gallery { width: 100% !important; max-width: 100%; float: none !important; margin: 0 !important; }
.ps-gallery-toolbar { display: flex; gap: 7px; margin-bottom: 9px; }
.ps-gallery-native { width: 100%; }
.ps-gallery-shell:after { content: ''; display: block; clear: both; }
.ps-viewer:fullscreen { display: flex; flex-direction: column; border-radius: 0; width: 100vw; height: 100vh; padding: 2vh; }
.ps-viewer:fullscreen .ps-stage { flex: 1; min-height: 0; aspect-ratio: auto; }
.ps-viewer.ps-pseudo-fullscreen { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; width: 100vw; height: 100dvh; border-radius: 0; }
.ps-viewer.ps-pseudo-fullscreen .ps-stage { flex: 1; min-height: 0; aspect-ratio: auto; }
.ps-no-scroll { overflow: hidden !important; }
@media (max-width: 767px) { .ps-gallery-shell { float: none; width: 100%; } .ps-controls { flex-wrap: wrap; } .ps-viewer .ps-actions span { display: none; } .ps-viewer button { padding: 9px 11px; } }
@media (prefers-reduced-motion: reduce) { .ps-viewer *, .ps-viewer *:before, .ps-viewer *:after { animation: none !important; transition: none !important; } }