/* Los Virtuality – product gallery
 * Reusable styles for the Jssor main slider, the responsive thumbnail strip/grid,
 * and the inline-YouTube video slide. Pair with /assets/js/lv-gallery.js.
 */

/* Main slides – rounded corners (relies on the slider container's overflow:hidden) */
.lv-jssor > [data-u="slides"],
#product-gallery > [data-u="slides"] {border-radius:15px;}

/* Desktop: 4-column thumbnail grid (matches main gallery width) */
.lv-thumbs {margin-top:30px;display:grid;grid-template-columns:repeat(4, 1fr);gap:14px;width:100%;max-width:1000px;margin-left:auto;margin-right:auto;padding:4px 4px 12px;overflow:visible;cursor:default;user-select:none;-webkit-user-select:none;}
.lv-thumbs.lv-thumbs--strip {display:flex;gap:14px;max-width:none;margin-left:0;margin-right:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth;cursor:grab;}
.lv-thumbs::-webkit-scrollbar {height:0;display:none;}
.lv-thumbs.is-dragging {cursor:grabbing;scroll-behavior:auto;}
.lv-thumbs.is-dragging .lv-thumb {pointer-events:none;}

.lv-thumb {width:100%;aspect-ratio:1;border-radius:15px;overflow:hidden;background:#0a0a0a;border:0;padding:0;margin:0;cursor:pointer;position:relative;transition:box-shadow .25s ease, transform .25s ease;}
.lv-thumbs.lv-thumbs--strip .lv-thumb {flex:0 0 auto;width:134px;height:134px;aspect-ratio:auto;}
.lv-thumb img {width:100%!important;height:100%!important;object-fit:cover!important;display:block;-webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:none;}
.lv-thumb:hover {transform:translateY(-2px);box-shadow:0 6px 14px rgba(255,233,168,.45);}
.lv-thumb.is-active {box-shadow:0 0 0 1px #ffe9a8, 0 0 14px rgba(255,233,168,.6);}

/* Brand-gradient play badge (thumbnail) */
.lv-thumb--video::after {content:"";position:absolute;top:50%;left:50%;width:52px;height:36px;margin:-18px 0 0 -26px;border-radius:9px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>") center/18px 18px no-repeat,linear-gradient(135deg,#4589d6 0%,#9048c8 50%,#d951a5 100%);box-shadow:0 2px 8px rgba(0,0,0,.55);pointer-events:none;z-index:5;}

/* Inline-video slide */
.video-slide {cursor:pointer;}
.video-slide::after {content:"";position:absolute;top:50%;left:50%;width:124px;height:86px;margin:-43px 0 0 -62px;border-radius:21px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>") center/42px 42px no-repeat,linear-gradient(135deg,#4589d6 0%,#9048c8 50%,#d951a5 100%);box-shadow:0 6px 22px rgba(0,0,0,.55);pointer-events:none;z-index:10;transition:transform .25s ease, box-shadow .25s ease;}
.video-slide:hover::after {transform:scale(1.06);box-shadow:0 8px 28px rgba(0,0,0,.65);}
.video-slide.is-playing {cursor:default;}
.video-slide.is-playing::after {display:none;}
.video-slide .video-iframe {position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:#000;z-index:20;}

@media only screen and (max-width:768px) {
	.lv-thumbs.lv-thumbs--strip {gap:8px;margin-top:20px;cursor:auto;}
	.lv-thumbs.lv-thumbs--strip .lv-thumb {width:84px;height:84px;}
	.lv-thumb.is-active {box-shadow:0 0 0 1px #ffe9a8, 0 0 10px rgba(255,233,168,.55);}
	.lv-thumb--video::after {width:36px;height:26px;margin:-13px 0 0 -18px;border-radius:7px;background-size:13px 13px,auto;}
	.video-slide::after {width:252px;height:174px;margin:-87px 0 0 -126px;border-radius:42px;background-size:84px 84px,auto;}
}
@media only screen and (min-width:769px) and (max-width:1200px) {
	.lv-thumbs {gap:12px;}
	.lv-thumb--video::after {width:44px;height:32px;margin:-16px 0 0 -22px;border-radius:8px;background-size:16px 16px,auto;}
}