/* Fullscreen film modal (.pr-vmodal) — built and mounted on by /js/behaviors/product-video-modal.js when a page carries a [data-video-modal] trigger (the product heroes' click-to-play tiles, Sofia 2026-07-28: no autoplay on product heroes). */ .pr-vmodal { position: fixed; inset: 0; z-index: 120; /* above the site header (50) */ display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity 0.25s ease; } .pr-vmodal.is-open { opacity: 1; } .pr-vmodal[hidden] { display: none; } .pr-vmodal__video { width: min(1280px, 100%); max-height: 86svh; border-radius: 16px; background: var(--color-black); } /* Vimeo film variant — an iframe has no intrinsic ratio, so pin 16:9 */ .pr-vmodal__iframe { aspect-ratio: 16 / 9; border: 0; } .pr-vmodal__close { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); color: var(--color-white); cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease; } .pr-vmodal__close:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); } html.pr-vmodal-open { overflow: hidden; }