/* <video-link> — uniform inline cards (thumb opens overlay, link under opens new tab) + overlay player */

.product-videos { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }

video-link { display: block; }
.video-link { width: 200px; }

/* thumbnail (click -> overlay player) */
.video-link__thumb-a { display: block; width: 200px; }
.video-link__thumb {
	position: relative; display: block; width: 200px; height: 112px;
	border-radius: 6px; overflow: hidden; background: #1c1f24; cursor: pointer;
}
.video-link__thumb--empty { background: linear-gradient(135deg, #2b2f36, #14161a); }
.video-link__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-link__play {
	position: absolute; top: 50%; left: 50%; width: 48px; height: 48px;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, .55); border-radius: 50%;
	transition: background .15s, transform .15s;
}
.video-link__thumb-a:hover .video-link__play { background: rgba(0, 0, 0, .8); transform: translate(-50%, -50%) scale(1.15); }
.video-link__play::before {
	content: ""; position: absolute; top: 50%; left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid; border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent #fff;
}

/* truncated link caption under the thumb (click -> opens video URL in a new tab) */
.video-link__caption {
	display: block; width: 200px; margin-top: 6px;
	font-size: 12px; line-height: 1.35; color: #6b7177; text-decoration: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.video-link__caption:hover { color: #2275a8; text-decoration: underline; }

/* Overlay — created hidden; [hidden] guard prevents it ever covering the page on load */
.vl-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.vl-overlay[hidden] { display: none !important; }
.vl-overlay__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .82); }
.vl-overlay__dialog { position: relative; width: min(92vw, 960px); max-height: 90vh; }
.vl-overlay__body { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
.vl-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vl-overlay__close {
	position: absolute; top: -40px; right: 0; width: 36px; height: 36px;
	padding: 0; font-size: 30px; line-height: 1; color: #fff;
	background: transparent; border: 0; cursor: pointer; opacity: .85;
}
.vl-overlay__close:hover { opacity: 1; }
html.vl-noscroll { overflow: hidden; }