/**

 * FILE: wp-content/themes/bricks-child/assets/css/main-styles.css

 *

 * Product Gallery – styles.

 * All size variables are set by a scoped <style> block printed by the

 * shortcode (desktop + mobile @media). These rules only consume them.

 */



/* ======================================================================

   Wrapper (fallback vars – overridden by the scoped <style>)

   ====================================================================== */

.pg-gallery-wrap {

	--pg-main-w: 591px;

	--pg-main-h: 707.84px;

	--pg-main-ratio: 0.835;      /* 591 / 707.84 (unitless!) */

	--pg-thumb-w: 103px;

	--pg-thumb-h: 100px;

	--pg-gap-main-thumb: 29.84px;

	--pg-gap-thumbs: 18px;

	--pg-thumbs-visible: 6;

	--pg-zoom-level: 2;



	width: 100%;

	max-width: var(--pg-main-w);

	box-sizing: border-box;

}


button.pg-arrow {
    display: none !important;
}



.pg-main-slider {
    border-radius: 0 40px;
    border: 1px solid var(--logogrey-l-4);
    background: url(<path-to-image>) lightgray 50% / contain no-repeat;
}



/* ======================================================================

   Main Slider

   ====================================================================== */

.pg-main-slider {

	position: relative;

	width: 100%;

	max-width: var(--pg-main-w);

	aspect-ratio: var(--pg-main-ratio);   /* unitless number → valid */

	background-color: #fff !important;

	overflow: hidden;

	/* NO fixed height – height derives from width × ratio */

}



.pg-slides-track {

	position: relative;

	width: 100%;

	height: 100%;

}



/* Every slide (image OR video) fills the slider box identically */

.pg-slide {

	position: absolute;

	inset: 0;

	width: 100%;

	height: 100%;

	display: none;

}



.pg-slide.is-active {

	display: block;

}



/* ── Zoom frame + image ── */

.pg-zoom-frame {

	position: relative;

	width: 100%;

	height: 100%;

	overflow: hidden;

	cursor: zoom-in;

}



.pg-slide-img {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: contain;

	object-position: center;

	transition: transform 0.12s ease-out;

	will-change: transform;

}



.pg-zoom-frame.is-zooming .pg-slide-img {

	transform: scale(var(--pg-zoom-level));

}



/* ======================================================================

   Video Slide  (forced to the same box as image slides)

   ====================================================================== */

.pg-video-wrap {

	position: absolute;

	inset: 0;

	width: 100%;

	height: 100%;

	background-color: #000;

	cursor: pointer;

	user-select: none;

}



.pg-video-poster {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;      /* poster fills box – never dictates height */

	object-position: center;

	transition: opacity 0.25s ease;

}



.pg-play-btn {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	background: none;

	border: none;

	padding: 0;

	cursor: pointer;

	z-index: 5;

	transition: transform 0.2s ease, opacity 0.2s ease;

	line-height: 0;

	outline-offset: 8px;

}



.pg-play-btn:hover,

.pg-play-btn:focus-visible {

	transform: translate(-50%, -50%) scale(1.1);

}



.pg-play-btn img {

	display: block;

	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));

	pointer-events: none;

}



.pg-video-wrap.is-loading .pg-play-btn {

	opacity: 0.4;

	pointer-events: none;

}



.pg-video-wrap.is-playing .pg-video-poster,

.pg-video-wrap.is-playing .pg-play-btn {

	visibility: hidden;

	pointer-events: none;

}



.pg-video-wrap.is-playing .pg-yt-player-outer {

	display: block;

}



.pg-yt-player-outer {

	position: absolute;

	inset: 0;

	width: 100%;

	height: 100%;

	display: none;

	z-index: 10;

}



.pg-yt-player-outer iframe {

	display: block;

	width: 100%;

	height: 100%;

	border: none;

}



/* ======================================================================

   Main Navigation Arrows (uploaded SVG icons)

   ====================================================================== */

.pg-arrow {

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	z-index: 20;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 40px;

	height: 60px;

	padding: 0;

	background-color: transparent;

	border: none;

	cursor: pointer;

	transition: background-color 0.2s ease;

	outline: none;

}



.pg-arrow:hover,

.pg-arrow:focus-visible {

	background-color: var(--orange, #f60);

}



.pg-arrow img {

	display: block;

	width: 24px;

	height: 48px;

	pointer-events: none;

}



.pg-arrow-prev { left: 0; }

.pg-arrow-next { right: 0; }



/* ======================================================================

   Thumbnails – fixed size, scrollable window

   ====================================================================== */

.pg-thumbs-viewport {

	position: relative;

	margin-top: var(--pg-gap-main-thumb);

	width: calc(

		var(--pg-thumb-w) * var(--pg-thumbs-visible)

		+ var(--pg-gap-thumbs) * (var(--pg-thumbs-visible) - 1)

	);

	max-width: 100%;

	overflow: hidden;

}



.pg-thumbs-track {

	display: flex;

	flex-wrap: nowrap;

	gap: var(--pg-gap-thumbs);

	transition: transform 0.3s ease;

	will-change: transform;

}



/* Fixed size – never shrinks regardless of image count */

.pg-thumb {

	position: relative;

	flex: 0 0 auto;

	width: var(--pg-thumb-w);

	height: var(--pg-thumb-h);

	min-width: var(--pg-thumb-w);

	min-height: var(--pg-thumb-h);

	cursor: pointer;

	overflow: hidden;

	outline: none;

	box-sizing: border-box;

}



.pg-thumb:focus-visible .pg-thumb-border {

	border-color: #555;

}



.pg-thumb-inner {

	position: relative;

	width: 100%;

	height: 100%;

	overflow: hidden;

}



.pg-thumb-inner img {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

	object-position: center;

	transition: transform 0.25s ease;

}



.pg-thumb:hover .pg-thumb-inner img {

	transform: scale(1.07);

}



.pg-thumb-border {

	position: absolute;

	inset: 0;

	border: 1px solid #e6e6e6;

	pointer-events: none;

	box-sizing: border-box;

	transition: border-color 0.2s ease, border-width 0.15s ease;

}



.pg-thumb.is-active .pg-thumb-border {

	border: 2px solid var(--primary, var(--orange, #f60));

}



.pg-thumb-play-icon {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	width: 26px;

	height: 26px;

	background-color: rgba(0, 0, 0, 0.55);

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	pointer-events: none;

}



.pg-thumb-play-icon svg {

	display: block;

	margin-left: 2px;

}



/* ── Gradient fade at the edges when scrollable ── */

.pg-thumbs-viewport::before,

.pg-thumbs-viewport::after {

	content: "";

	position: absolute;

	top: 0;

	bottom: 0;

	width: calc(var(--pg-thumb-w) * 0.9);

	pointer-events: none;

	z-index: 4;

	opacity: 0;

	transition: opacity 0.2s ease;

}



.pg-thumbs-viewport::before {

	left: 0;

	background: linear-gradient(to right,

		rgba(255, 255, 255, 0.92) 0%,

		rgba(255, 255, 255, 0) 100%);

}



.pg-thumbs-viewport::after {

	right: 0;

	background: linear-gradient(to left,

		rgba(255, 255, 255, 0.92) 0%,

		rgba(255, 255, 255, 0) 100%);

}



.pg-thumbs-viewport.can-prev::before { opacity: 1; }

.pg-thumbs-viewport.can-next::after  { opacity: 1; }



/* ── Left / Right thumbnail navigation arrows ── */

.pg-thumb-nav {

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	z-index: 6;

	width: 34px;

	height: 34px;

	padding: 0;

	border: none;

	border-radius: 50%;

	background-color: var(--primary);

	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: background-color 0.2s ease;

}



.pg-thumb-nav[hidden] {

	display: none;

}



.pg-thumb-nav:hover,

.pg-thumb-nav:focus-visible {

	background-color: var(--orange, #f60);

	outline: none;

}



.pg-thumb-nav img {

	display: block;

	width: 11px;

	height: 22px;

	pointer-events: none;

}



.pg-thumb-nav-prev { left: 6px; }

.pg-thumb-nav-next { right: 6px; }



/* 1. Apply the standard border to all thumbnails */
.pg-thumb {
    border: 1px solid #E6E6E6;
    border-radius: 0; /* Default square corners for middle items */
    overflow: hidden; /* Ensures the image doesn't poke outside the rounded corners */
}


/* 1. Apply the standard border to all thumbnails */
.pg-thumb {
    border: 1px solid #E6E6E6;
    border-radius: 0; /* Default square corners for middle items */
    overflow: hidden; /* Ensures the image doesn't poke outside the rounded corners */
}

/* 2. Target the FIRST thumbnail (Bottom-Left rounded) */
.pg-thumb:first-child {
    border-radius: 0 0 0 20px;
}

/* 3. Target the LAST thumbnail (Top-Right rounded) */
.pg-thumb:last-child {
    border-radius: 0 20px 0 0;
}



/* Apply the bottom-left curve to the border element of the FIRST thumbnail */
.pg-thumb:first-child .pg-thumb-border {
    border-radius: 0 0 0 20px;
}

/* Apply the top-right curve to the border element of the LAST thumbnail */
.pg-thumb:last-child .pg-thumb-border {
    border-radius: 0 20px 0 0;
}