/**
 * Cargo Crew–style product media grid.
 * Active when body.aris-pdp-grid (Product Grid Gallery Themer layout).
 * Grid presentation: tablet/desktop only (min-width: 850px).
 * Mobile: default WVG image swipe / thumbnails.
 *
 * Layout selectors use :has() + module types so BB duplicate node IDs
 * (local vs live) do not break the layout.
 */

/* Product row: capped at 1870px (not full bleed); images 70% / summary 30% */
body.aris-pdp-grid .fl-row:has(.fl-module-fl-woo-product-images) .fl-row-content-wrap {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

body.aris-pdp-grid .fl-row:has(.fl-module-fl-woo-product-images) .fl-row-content {
	max-width: 1870px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/*
 * Equal-height columns (so sticky has room to travel), but the summary
 * content itself stays auto-height + position:sticky.
 */
@media (min-width: 850px) {
	body.aris-pdp-grid .fl-row:has(.fl-module-fl-woo-product-images) .fl-col-group {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: stretch !important;
	}

	body.aris-pdp-grid .fl-col:has(.fl-module-fl-woo-product-images) {
		width: 70% !important;
		max-width: 70% !important;
		flex: 0 0 70% !important;
	}

	body.aris-pdp-grid .fl-col:has(.fl-module-fl-woo-product-title) {
		width: 30% !important;
		max-width: 30% !important;
		flex: 0 0 30% !important;
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
	}

	body.aris-pdp-grid .fl-module-fl-woo-product-images .images,
	body.aris-pdp-grid .fl-module-fl-woo-product-images .woo-variation-gallery-wrapper,
	body.aris-pdp-grid .fl-module-fl-woo-product-images .woo-variation-gallery-container,
	body.aris-pdp-grid .fl-module-fl-woo-product-images .woo-variation-gallery-slider-wrapper {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	/* Hide thumbnail strip + slider chrome — grid shows every image */
	body.aris-pdp-grid .woo-variation-gallery-thumbnail-wrapper,
	body.aris-pdp-grid .woo-variation-gallery-trigger,
	body.aris-pdp-grid .wvg-slider-prev-arrow,
	body.aris-pdp-grid .wvg-slider-next-arrow,
	body.aris-pdp-grid .wvg-thumbnail-prev-arrow,
	body.aris-pdp-grid .wvg-thumbnail-next-arrow {
		display: none !important;
	}

	body.aris-pdp-grid .woo-variation-gallery-wrapper {
		display: block !important;
	}

	body.aris-pdp-grid .woo-variation-gallery-container,
	body.aris-pdp-grid .woo-variation-gallery-slider-wrapper {
		display: block !important;
		position: relative;
	}

	/* Force all main slides into a 2-column grid (works with or without slick) */
	body.aris-pdp-grid .woo-variation-gallery-slider,
	body.aris-pdp-grid .woo-variation-gallery-slider.slick-initialized,
	body.aris-pdp-grid .woo-variation-gallery-slider .slick-list,
	body.aris-pdp-grid .woo-variation-gallery-slider .slick-track {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		transform: none !important;
		left: 0 !important;
		right: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box;
	}

	/* Woo clearfix ::before/::after become empty grid cells — kill them */
	body.aris-pdp-grid .woo-variation-gallery-slider::before,
	body.aris-pdp-grid .woo-variation-gallery-slider::after,
	body.aris-pdp-grid .woo-variation-gallery-slider .slick-list::before,
	body.aris-pdp-grid .woo-variation-gallery-slider .slick-list::after,
	body.aris-pdp-grid .woo-variation-gallery-slider .slick-track::before,
	body.aris-pdp-grid .woo-variation-gallery-slider .slick-track::after {
		content: none !important;
		display: none !important;
	}

	body.aris-pdp-grid .woo-variation-gallery-slider .slick-list {
		overflow: visible !important;
	}

	body.aris-pdp-grid .woo-variation-gallery-slider .slick-slide,
	body.aris-pdp-grid .woo-variation-gallery-slider .wvg-gallery-image {
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		opacity: 1 !important;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
	}

	/* One image (common on colour swap) should span the full gallery width */
	body.aris-pdp-grid .woo-variation-gallery-slider .wvg-gallery-image:only-child,
	body.aris-pdp-grid .woo-variation-gallery-slider > .slick-slide:only-child,
	body.aris-pdp-grid .woo-variation-gallery-slider .slick-track > .slick-slide:only-child {
		grid-column: 1 / -1;
	}

	body.aris-pdp-grid .woo-variation-gallery-slider .slick-slide.slick-cloned {
		display: none !important;
	}

	body.aris-pdp-grid .wvg-gallery-image,
	body.aris-pdp-grid .wvg-gallery-image a,
	body.aris-pdp-grid .wvg-single-gallery-image-container {
		display: block;
		width: 100%;
		line-height: 0;
		background: #f3f3f3;
		cursor: zoom-in;
	}

	body.aris-pdp-grid .wvg-gallery-image img,
	body.aris-pdp-grid .wvg-single-gallery-image-container img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 2 / 3;
		object-fit: cover;
	}

	/*
	 * Match stills: same 2/3 crop box so video cells align with image cells.
	 */
	body.aris-pdp-grid .wvg-single-gallery-video-container,
	body.aris-pdp-grid .wvg-single-gallery-iframe-container {
		display: block;
		width: 100%;
		line-height: normal;
		background: #000;
		overflow: hidden;
		aspect-ratio: 2 / 3;
		position: relative;
	}

	body.aris-pdp-grid .wvg-gallery-image video,
	body.aris-pdp-grid .wvg-single-gallery-video-container video,
	body.aris-pdp-grid .wvg-gallery-image iframe,
	body.aris-pdp-grid .wvg-single-gallery-iframe-container iframe {
		display: block;
		width: 100%;
		height: 100%;
		aspect-ratio: 2 / 3;
		object-fit: cover;
		object-position: center center;
		background: #000;
	}

	/* Brief cue while the MP4 is still buffering after Play (poster can linger). */
	body.aris-pdp-grid .wvg-single-gallery-video-container.is-buffering::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 36px;
		height: 36px;
		margin: -18px 0 0 -18px;
		border: 2px solid rgba(255, 255, 255, 0.35);
		border-top-color: #fff;
		border-radius: 50%;
		animation: aris-pdp-video-spin 0.7s linear infinite;
		pointer-events: none;
		z-index: 2;
	}

	/* Sticky right column summary while scrolling the gallery */
	body.aris-pdp-grid .fl-col:has(.fl-module-fl-woo-product-title) > .fl-col-content {
		position: sticky !important;
		/* Cleared below sticky Themer header via --aris-pdp-sticky-top (set in JS) */
		top: var(--aris-pdp-sticky-top, 222px);
		height: auto !important;
		max-height: none !important;
		flex: 0 0 auto !important;
		padding: 0 clamp(16px, 2vw, 32px);
		box-sizing: border-box;
	}
}

@keyframes aris-pdp-video-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 849px) {
	body.aris-pdp-grid .fl-col:has(.fl-module-fl-woo-product-title) > .fl-col-content {
		position: static;
		padding: 16px;
		box-sizing: border-box;
	}

	/* Related + recently viewed: 2 columns on mobile */
	body.aris-pdp-grid .fl-module-fl-woo-related-products ul.products,
	body.aris-pdp-grid .aris-recently-viewed ul.products,
	body.aris-pdp-grid ul.products {
		display: flex !important;
		flex-wrap: wrap !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 8px !important;
		box-sizing: border-box;
	}

	body.aris-pdp-grid .fl-module-fl-woo-related-products ul.products > li.product,
	body.aris-pdp-grid .aris-recently-viewed ul.products > li.product,
	body.aris-pdp-grid ul.products > li.product {
		flex: 0 0 50% !important;
		width: 50% !important;
		max-width: 50% !important;
		margin: 0 !important;
		float: none !important;
		clear: none !important;
		padding: 8px 8px 24px !important;
		box-sizing: border-box;
	}
}

/* Related + recently viewed: match product row 1870px cap */
body.aris-pdp-grid .fl-row:has(.fl-module-fl-woo-related-products) .fl-row-content-wrap {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

body.aris-pdp-grid .fl-row:has(.fl-module-fl-woo-related-products) .fl-row-content {
	max-width: 1870px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

body.aris-pdp-grid .fl-row:has(.fl-module-fl-woo-related-products) .fl-module-content,
body.aris-pdp-grid .aris-recently-viewed {
	max-width: 1870px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
}

body.aris-pdp-grid .aris-recently-viewed {
	padding-left: 10px !important;
	padding-right: 10px !important;
	padding-bottom: 48px;
	box-sizing: border-box;
}

body.aris-pdp-grid .fl-row:has(.fl-module-fl-woo-related-products) .related > h2,
body.aris-pdp-grid .aris-recently-viewed .product-section-title {
	padding-left: 0;
	padding-right: 0;
}

/* Full-viewport PhotoSwipe lightbox on grid PDP */
body.aris-pdp-grid .pswp {
	z-index: 100000;
}

body.aris-pdp-grid .pswp__bg {
	background: #fff !important;
	opacity: 1 !important;
}

body.aris-pdp-grid .pswp__img {
	object-fit: contain;
}

/* Lightbox video/iframe: full frame, no 2:3 grid crop */
body.aris-pdp-grid .pswp .wvg-lightbox-video,
body.aris-pdp-grid .pswp .wvg-lightbox-iframe,
body.aris-pdp-grid .pswp video.wvg-lightbox-video {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	max-height: 100%;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center center;
	background: #000;
}

body.aris-pdp-grid .pswp__zoom-wrap,
body.aris-pdp-grid .pswp__item {
	background: transparent;
}

/* Arrow icons: grey default, black on hover (avoid white-on-white from flatsome-custom) */
body.aris-pdp-grid .pswp__button--arrow--left,
body.aris-pdp-grid .pswp__button--arrow--right {
	color: #888 !important;
	opacity: 1;
}

body.aris-pdp-grid .pswp__button--arrow--left:hover,
body.aris-pdp-grid .pswp__button--arrow--right:hover,
body.aris-pdp-grid .pswp__button--arrow--left:focus,
body.aris-pdp-grid .pswp__button--arrow--right:focus {
	color: #000 !important;
	opacity: 1;
}

body.aris-pdp-grid .pswp .pswp__button--arrow--left::before,
body.aris-pdp-grid .pswp .pswp__button--arrow--right::before {
	background-color: transparent !important;
	background-image: none !important;
	color: inherit !important;
}