/* HashOne Product Gallery
-------------------------------------------------- */

.hpg-gallery {
	display: flex;
	gap: var(--hpg-space, 10px);
	align-items: flex-start;
	width: 100%;
	box-sizing: border-box;
}

/* ---- Position modifiers ---- */
.hpg-gallery--bottom { flex-direction: column; }
.hpg-gallery--top    { flex-direction: column; }
.hpg-gallery--top .hpg-thumbs-wrap { order: -1; }

.hpg-gallery--left,
.hpg-gallery--right { flex-direction: row; }
.hpg-gallery--left .hpg-thumbs-wrap { order: -1; }

/* ---- Main image ---- */
.hpg-main {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}
.hpg-gallery--left .hpg-main,
.hpg-gallery--right .hpg-main {
	max-width: var(--hpg-main-w, none);
}
.hpg-gallery--top .hpg-main,
.hpg-gallery--bottom .hpg-main {
	max-width: var(--hpg-main-w, 100%);
	margin-inline: auto;
}

.hpg-main .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
.hpg-main .swiper-slide img,
.hpg-main .swiper-slide a {
	display: block;
	width: 100%;
	height: auto;
}
.hpg-main .swiper-slide a.hpg-glightbox {
	cursor: zoom-in;
}
.hpg-main .swiper-slide img {
	object-fit: contain;
}

/* ---- Thumbnails ---- */
.hpg-thumbs {
	box-sizing: border-box;
}

/* Wrapper holds prev arrow + strip + next arrow.
   Layout is driven entirely by the .gallery-arrow-* class. */
.hpg-thumbs-wrap {
	display: flex;
	align-items: center;
	gap: var(--hpg-arrow-gap, 6px);
	box-sizing: border-box;
	min-width: 0;
}

/* Vertical arrangement: arrows above and below. */
.hpg-thumbs-wrap.gallery-arrow-left,
.hpg-thumbs-wrap.gallery-arrow-right {
	flex-direction: column;
	flex: 0 0 auto;
	width: var(--hpg-thumb-w, 90px);
}
.hpg-thumbs-wrap.gallery-arrow-left .hpg-thumbs,
.hpg-thumbs-wrap.gallery-arrow-right .hpg-thumbs {
	width: 100%;
	height: var(--hpg-thumbs-box, auto);
}

/* Horizontal arrangement: arrows left and right. */
.hpg-thumbs-wrap.gallery-arrow-top,
.hpg-thumbs-wrap.gallery-arrow-bottom {
	flex-direction: row;
	width: 100%;
}
.hpg-thumbs-wrap.gallery-arrow-top .hpg-thumbs,
.hpg-thumbs-wrap.gallery-arrow-bottom .hpg-thumbs {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---- Thumbnail arrows ----
   Selectors are deliberately specific (0,3,0) and reset the properties themes
   most often force onto <button>, so the arrows survive theme button styling. */
.hpg-gallery .hpg-thumbs-wrap .hpg-thumb-nav {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--hpg-arrow-size, 34px);
	height: var(--hpg-arrow-size, 34px);
	min-width: 0;
	min-height: 0;
	max-width: none;
	padding: 0;
	margin: 0;
	border: 1px solid var(--hpg-arrow-border, #e2e2e2);
	background: var(--hpg-arrow-bg, #fff);
	background-image: none;
	color: var(--hpg-arrow-color, #111);
	font-size: 0;
	line-height: 0;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

.hpg-gallery .hpg-thumbs-wrap .hpg-thumb-nav:hover {
	border-color: var(--hpg-arrow-color, #111);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
	transform: scale(1.06);
}
.hpg-gallery .hpg-thumbs-wrap .hpg-thumb-nav:active {
	transform: scale(0.96);
}
.hpg-gallery .hpg-thumbs-wrap .hpg-thumb-nav:focus-visible {
	outline: 2px solid var(--hpg-arrow-color, #111);
	outline-offset: 2px;
}

/* Icon. The stroke is set here so a theme's inherited `color` can never hide it. */
.hpg-gallery .hpg-thumbs-wrap .hpg-thumb-nav svg {
	display: block;
	width: 55%;
	height: 55%;
	max-width: none;
	max-height: none;
	pointer-events: none;
}
.hpg-gallery .hpg-thumbs-wrap .hpg-thumb-nav svg path {
	stroke: var(--hpg-arrow-color, #111);
	fill: none;
}

/* Swiper adds this class when there is nothing left to scroll. */
.hpg-gallery .hpg-thumbs-wrap .hpg-thumb-nav.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
	box-shadow: none;
}
/* Swiper hides nav entirely when all slides already fit (watchOverflow). */
.hpg-gallery .hpg-thumbs-wrap .hpg-thumb-nav.swiper-button-lock {
	display: none;
}

/* ---- Arrow style presets ---- */
.hpg-thumbs-wrap.hpg-arrow-style-circle .hpg-thumb-nav {
	border-radius: 50%;
}
.hpg-thumbs-wrap.hpg-arrow-style-square .hpg-thumb-nav {
	border-radius: 6px;
}
.hpg-gallery .hpg-thumbs-wrap.hpg-arrow-style-minimal .hpg-thumb-nav {
	border: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
.hpg-gallery .hpg-thumbs-wrap.hpg-arrow-style-minimal .hpg-thumb-nav:hover {
	box-shadow: none;
	opacity: 0.65;
}
.hpg-gallery .hpg-thumbs-wrap.hpg-arrow-style-minimal .hpg-thumb-nav svg {
	width: 80%;
	height: 80%;
}

/* Icon direction. Base chevron points left. */
.gallery-arrow-top .hpg-thumb-next svg,
.gallery-arrow-bottom .hpg-thumb-next svg {
	transform: rotate(180deg);
}
.gallery-arrow-left .hpg-thumb-prev svg,
.gallery-arrow-right .hpg-thumb-prev svg {
	transform: rotate(90deg);
}
.gallery-arrow-left .hpg-thumb-next svg,
.gallery-arrow-right .hpg-thumb-next svg {
	transform: rotate(-90deg);
}

.hpg-thumbs .swiper-slide {
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s ease, border-color 0.2s ease;
	border: 1px solid transparent;
	box-sizing: border-box;
	overflow: hidden;
}
.hpg-gallery--top .hpg-thumbs .swiper-slide,
.hpg-gallery--bottom .hpg-thumbs .swiper-slide {
	height: var(--hpg-thumb-h, 90px);
}
.hpg-thumbs .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hpg-thumbs .swiper-slide-thumb-active {
	opacity: 1;
	border-color: var(--hpg-active-border, #111);
}
.hpg-thumbs .swiper-slide:hover {
	opacity: 0.85;
}

/* ---- Arrows ---- */
.hpg-main .swiper-button-prev,
.hpg-main .swiper-button-next {
	color: #111;
	background: rgba(255, 255, 255, 0.85);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.hpg-main .swiper-button-prev:after,
.hpg-main .swiper-button-next:after {
	font-size: 16px;
	font-weight: 700;
}

/* ---- Responsive: collapse vertical layouts to a bottom strip ---- */
@media (max-width: 768px) {
	.hpg-gallery--left,
	.hpg-gallery--right {
		flex-direction: column;
	}
	.hpg-gallery--left .hpg-thumbs-wrap,
	.hpg-gallery--right .hpg-thumbs-wrap {
		order: 0;
		width: 100%;
	}

	/* Vertical arrow arrangement becomes horizontal. */
	.hpg-thumbs-wrap.gallery-arrow-left,
	.hpg-thumbs-wrap.gallery-arrow-right {
		flex-direction: row;
		width: 100%;
	}
	.hpg-thumbs-wrap.gallery-arrow-left .hpg-thumbs,
	.hpg-thumbs-wrap.gallery-arrow-right .hpg-thumbs {
		flex: 1 1 auto;
		min-width: 0;
		height: auto;
	}
	.hpg-gallery--left .hpg-thumbs .swiper-slide,
	.hpg-gallery--right .hpg-thumbs .swiper-slide {
		height: var(--hpg-thumb-h, 90px);
	}

	/* Icons rotate back to left/right. */
	.gallery-arrow-left .hpg-thumb-prev svg,
	.gallery-arrow-right .hpg-thumb-prev svg {
		transform: rotate(0deg);
	}
	.gallery-arrow-left .hpg-thumb-next svg,
	.gallery-arrow-right .hpg-thumb-next svg {
		transform: rotate(180deg);
	}
}