/* Galería de producto: fotos y vídeos en el mismo hueco (producto.php) */

/* Reproductor */
#pv {display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff;}
#product_photo.con-video #pv {display: block;}
#product_photo.con-video > strong {display: none;}
#pv video {display: block; width: 100%; height: 100%; object-fit: contain; background-color: #fff;}

#pv .pv-toggle {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer;}
#pv .pv-toggle:after {content: ""; position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 55% center / 34px; opacity: 0; transition: opacity .2s;}
#pv.pausado .pv-toggle:after {opacity: 1;}

#pv .pv-sound {display: none; position: absolute; right: 16px; bottom: 20px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 9v6h4l5 5V4L7 9H3z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M16 9l6 6M22 9l-6 6'/%3E%3C/svg%3E") no-repeat center / 22px;}
#pv .pv-sound.activo {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 9v6h4l5 5V4L7 9H3z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");}
#pv.con-sonido .pv-sound {display: block;}

#pv .pv-progress {position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background-color: rgba(0,0,0,.08); pointer-events: none;}
#pv .pv-progress span {display: block; width: 0; height: 100%; background-color: #b29803;}

/* Flechas anterior / siguiente */
#product_photo .pv-nav {position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.9) no-repeat center / 20px; box-shadow: 0 1px 4px rgba(0,0,0,.25); opacity: .85; transition: opacity .2s;}
#product_photo .pv-nav:hover, #product_photo .pv-nav:focus {opacity: 1;}
#product_photo .pv-prev {left: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23333' stroke-width='2.5' d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");}
#product_photo .pv-next {right: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23333' stroke-width='2.5' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");}

/* Miniaturas: el espacio entre ellas pasa de la imagen al enlace para poder marcar la activa */
#product_gallery {position: relative;}
#product_gallery > a {display: block; position: relative;}
#product_gallery > a img, #product_gallery > a video {display: block; width: 100%; max-width: none; margin-bottom: 0; padding-bottom: 0; border-right: none;}
#product_gallery > a:after {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 3px solid transparent; pointer-events: none; transition: border-color .2s;}
#product_gallery > a.active:after {border-color: #b29803;}

#product_gallery .vthumb img, #product_gallery .vthumb video {aspect-ratio: 1 / 1; object-fit: cover; background-color: #fff;}
#product_gallery .vplay {position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none; background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 55% center / 22px;}
#product_gallery .vdur {position: absolute; right: 6px; bottom: 6px; padding: 2px 5px; border-radius: 3px; background-color: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.2; pointer-events: none;}

@media (min-width: 768px){
	#product_gallery > a {margin-bottom: 10px;}
}

@media (max-width: 767px){
	#product_gallery > a {flex: 1 1 0; min-width: 0; margin-right: 10px; align-self: flex-start;}

	/* Con más de 4 miniaturas la fila se desplaza en horizontal y asoma la siguiente */
	#product_gallery.scroll {overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
	#product_gallery.scroll::-webkit-scrollbar {display: none;}
	#product_gallery.scroll > a {flex: 0 0 20%; scroll-snap-align: start;}

	#product_gallery .vplay {width: 32px; height: 32px; margin: -16px 0 0 -16px; background-size: 16px;}
	#product_gallery .vdur {right: 4px; bottom: 4px; font-size: 10px;}

	#product_photo .pv-nav {width: 36px; height: 36px; margin-top: -18px; background-size: 16px;}
	#product_photo .pv-prev {left: 8px;}
	#product_photo .pv-next {right: 8px;}
}