.product-gallery{position:relative;isolation:isolate;border-radius:25px;overflow:hidden;background:#f4f3e7;touch-action:pan-y}
.gallery-viewport{position:relative;aspect-ratio:4/3;overflow:hidden}
.gallery-frame{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 700ms cubic-bezier(.22,1,.36,1),visibility 700ms}
.gallery-frame.is-current{opacity:1;visibility:visible;z-index:1}
.gallery-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.gallery-controls{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:0;padding:3px 5px;background:#ffffffeb;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid #ffffff;border-radius:30px;box-shadow:0 4px 20px #1a1a1a15;max-width:calc(100% - 20px)}
.gallery-controls button{display:grid;place-items:center;flex-shrink:0;width:38px;min-height:44px;border:0;border-radius:50%;color:#1a1a1a;background:transparent;cursor:pointer;padding:0;transition:background-color 200ms ease}
.gallery-controls button:hover{background:#1a1a1a0b}.gallery-controls button:focus-visible{outline:2px solid #1a1a1a;outline-offset:-2px}
.gallery-dots{display:flex;align-items:center}.gallery-dots button{width:24px;position:relative}.gallery-dots button::after{content:'';width:5px;height:5px;border-radius:10px;background:#1a1a1a55;transition:width 350ms ease,background-color 350ms ease}.gallery-dots button[aria-pressed=true]::after{width:18px;background:#1a1a1a}.gallery-pause{font-size:17px;margin-left:3px}.real-product>img.custom-cuts-cover{aspect-ratio:auto;border-radius:25px}
@media(max-width:580px){.product-gallery,.real-product>img.custom-cuts-cover{border-radius:20px}.gallery-controls{bottom:10px;padding:1px 3px}.gallery-controls button{width:34px}.gallery-dots button{width:23px}}
@media(prefers-reduced-motion:reduce){.gallery-frame,.gallery-controls button,.gallery-dots button::after{transition:none}}

/* Pagination stays present, but the photography remains the surface. */
.gallery-controls{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.gallery-dots{gap:7px}
.gallery-controls .gallery-dots button{width:14px;min-height:26px}
.gallery-controls .gallery-dots button::after{width:5px;height:5px;background:#fff9;box-shadow:0 1px 5px #0007}
.gallery-controls .gallery-dots button[aria-pressed=true]::after{width:14px;background:#fff}