/* yal-item1-photoswipe — editorial chrome over PhotoSwipe v5. Translucent blurred backdrop + cream-chip controls matching outfit-quickview register. */ .pswp { --yal-cream: oklch(98.2% 0.006 75); --yal-ink: oklch(22% 0.022 40); } /* ── Backdrop blur ── PhotoSwipe sets `z-index: 100000; position: fixed` on `.pswp`, plus `contain: layout style size; transform: translateZ(0)`. Together these create a stacking context — and `backdrop-filter` on a child of a stacking context can only sample what's painted INSIDE that context, never the page behind it. So we put the blur on `.pswp` itself (whose ancestor is `` = root) and leave `.pswp__bg` transparent. `.pswp` fade comes from `showHideAnimationType: 'fade'`, so the blur fades in/out with the lightbox naturally. */ .pswp { contain: none !important; transform: none !important; will-change: opacity; background: oklch(14% 0.022 35 / 0.32) !important; -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1); } .pswp__bg { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Top bar — transparent strip above the slide. `min-height` (not fixed) so the strip grows with the user's text-zoom instead of clipping the counter at 200% browser zoom. */ .pswp__top-bar { background: transparent !important; min-height: 64px; height: auto !important; } /* PhotoSwipe auto-registers a zoom button when `zoom: true`. We use single-tap on the image instead, so the bundled button is just visual noise. */ .pswp__button--zoom { display: none !important; } /* Counter — cream serif label with subtle ink shadow for legibility. No fixed pixel height: at 200% browser zoom the digits grow but the strip needs to grow with them (CLAUDE.md WCAG rule). Flex centering keeps the label optically centered against the chip-row baseline. */ .pswp__counter { font-family: Georgia, "Times New Roman", serif; font-size: 14px; letter-spacing: 0.04em; color: oklch(98.2% 0.006 75) !important; opacity: 0.92; background: transparent; text-shadow: 0 1px 2px oklch(14% 0.022 35 / 0.45); display: flex; align-items: center; min-height: 64px; padding: 0 20px; line-height: 1.4; } /* ── Buttons (close + arrows): cream chip via ::before, custom thin glyph via ::after ── */ .pswp__button { width: 64px; height: 64px; background: transparent !important; position: relative; opacity: 1; border: 0; cursor: pointer; } .pswp__button:disabled { opacity: 0.4; cursor: default; } /* Arrow buttons — pin to viewport edges */ .pswp__button--arrow { position: absolute !important; top: 50% !important; margin: 0 !important; transform: translateY(-50%) !important; } .pswp__button--arrow--prev { left: 16px !important; right: auto !important; } .pswp__button--arrow--next { right: 16px !important; left: auto !important; } /* Close — same 16px viewport offset as arrows (top + right) so the cream chip aligns visually with the arrow chips on every edge */ .pswp__button--close { position: absolute !important; top: 16px !important; right: 16px !important; margin: 0 !important; } /* Cream chip backplate */ .pswp__button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); background: color-mix(in oklch, oklch(98.2% 0.006 75) 80%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 50%; box-shadow: 0 2px 10px -2px oklch(20% 0.022 40 / 0.25); transition: background-color .2s ease; z-index: 0; } .pswp__button:hover::before, .pswp__button:focus-visible::before { background: color-mix(in oklch, oklch(98.2% 0.006 75) 96%, transparent); } /* Hide PhotoSwipe's bundled chevron/X glyphs — we draw our own thin ones */ .pswp__button .pswp__icn { display: none !important; } /* Custom thin glyph via mask, so it inherits color and stays crisp */ .pswp__button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); background-color: oklch(22% 0.022 40); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; z-index: 1; pointer-events: none; } /* X for close — URL-encoded data URI (Safari is strict about <,>,#) */ .pswp__button--close::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%3E%3Cpath%20d%3D'M6%206L18%2018M18%206L6%2018'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%3E%3Cpath%20d%3D'M6%206L18%2018M18%206L6%2018'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'/%3E%3C/svg%3E"); } /* Chevron pointing left — prev */ .pswp__button--arrow--prev::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%3E%3Cpath%20d%3D'M14.5%205.5L8%2012L14.5%2018.5'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%3E%3Cpath%20d%3D'M14.5%205.5L8%2012L14.5%2018.5'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E"); } /* Chevron pointing right — next */ .pswp__button--arrow--next::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%3E%3Cpath%20d%3D'M9.5%205.5L16%2012L9.5%2018.5'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%3E%3Cpath%20d%3D'M9.5%205.5L16%2012L9.5%2018.5'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E"); } /* ── Video slide ── */ .pswp__yal-video { position: relative; display: flex; align-items: center; justify-content: center; background: transparent; } .pswp__yal-video video { width: 100%; height: 100%; object-fit: contain; display: block; outline: none; background: oklch(14% 0.022 35); border-radius: 2px; } /* Custom play/pause toggle — same cream-chip register as nav buttons. */ .pswp__yal-video-toggle { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%); border: 0; padding: 0; background: color-mix(in oklch, oklch(98.2% 0.006 75) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 50%; box-shadow: 0 2px 14px -2px oklch(20% 0.022 40 / 0.3); cursor: pointer; transition: opacity .25s ease, background-color .2s ease; z-index: 2; } .pswp__yal-video-toggle:hover, .pswp__yal-video-toggle:focus-visible { background: color-mix(in oklch, oklch(98.2% 0.006 75) 96%, transparent); } .pswp__yal-video-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); background-color: oklch(22% 0.022 40); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; /* Play triangle (offset slightly right to look optically centered) */ -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M8%205L19%2012L8%2019z'%20fill%3D'%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M8%205L19%2012L8%2019z'%20fill%3D'%23000'/%3E%3C/svg%3E"); } /* Playing — swap glyph to pause */ .pswp__yal-video.is-playing .pswp__yal-video-toggle::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M7%205h3v14H7zM14%205h3v14h-3z'%20fill%3D'%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M7%205h3v14H7zM14%205h3v14h-3z'%20fill%3D'%23000'/%3E%3C/svg%3E"); } /* Playing — fade chip out. On desktop, hover/focus brings it back so user can pause without leaving the slide. On touch we can't use :focus-within here because the chip retains focus after the very tap that started playback, which would pin the chip visible — so the reveal rules are confined to (hover: hover). On mobile, tap on the video itself toggles play/pause via the JS handler. */ .pswp__yal-video.is-playing .pswp__yal-video-toggle { opacity: 0; pointer-events: none; } @media (hover: hover) { .pswp__yal-video.is-playing:hover .pswp__yal-video-toggle, .pswp__yal-video.is-playing:focus-within .pswp__yal-video-toggle { opacity: 1; pointer-events: auto; } } /* Loading — pulse a soft cream ring out from the chip until playback actually starts (or 'waiting' fires mid-playback while buffering). */ .pswp__yal-video.is-loading .pswp__yal-video-toggle { opacity: 1; animation: pswpYalPulse 1.4s ease-out infinite; } @keyframes pswpYalPulse { 0% { box-shadow: 0 2px 14px -2px oklch(20% 0.022 40 / 0.3), 0 0 0 0 oklch(98.2% 0.006 75 / 0.55); } 100% { box-shadow: 0 2px 14px -2px oklch(20% 0.022 40 / 0.3), 0 0 0 22px oklch(98.2% 0.006 75 / 0); } } @media (prefers-reduced-motion: reduce) { .pswp__yal-video.is-loading .pswp__yal-video-toggle { animation: none; } } /* ── Mobile tightenings ── */ @media (max-width: 768px) { .pswp__button { width: 56px; height: 56px; } .pswp__button::before { width: 40px; height: 40px; } .pswp__button::after { width: 16px; height: 16px; } .pswp__button--arrow--prev { left: 8px !important; } .pswp__button--arrow--next { right: 8px !important; } .pswp__button--close { top: 8px !important; right: 8px !important; } .pswp__counter { font-size: 13px; padding-left: 16px; } .pswp__yal-video-toggle { width: 64px; height: 64px; } .pswp__yal-video-toggle::after { width: 24px; height: 24px; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .pswp { --pswp-transition-duration: 0ms; } .pswp__button::before { transition: none; } } /* ── Page-side affordance ── */ .sc-product-images-main-swiper video[data-yal-video-trigger], .sc-product-images-main-swiper a.thumbnail { cursor: zoom-in; }