.pst-hotspot-loop {
	--pst-list-column-width: 30%;
	--pst-media-column-width: 70%;
	display: grid;
	grid-template-columns: minmax(220px, var(--pst-list-column-width)) minmax(0, var(--pst-media-column-width));
	align-items: stretch;
	min-height: 100%;
	overflow: hidden;
	border-radius: 24px;
	background: #ffffff;
}

.pst-hotspot-loop__list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: auto;
}

.pst-hotspot-loop__list-inner {
	display: flex;
	flex-direction: column;
}

.pst-hotspot-loop__item {
	--pst-list-item-bg: transparent;
	--pst-list-item-bg-hover: var(--pst-accent, #d5332f);
	--pst-list-text-hover: #ffffff;
	--pst-list-icon-color: currentColor;
	--pst-list-icon-hover: var(--pst-list-text-hover);
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 28px;
	align-items: center;
	gap: 16px;
	border-radius: 26px;
	text-decoration: none;
	padding: 16px 10px;
	border-bottom: 1px solid rgba(17, 17, 17, 0.08);
	background-color: var(--pst-list-item-bg);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.pst-hotspot-loop__item:last-child {
	border-bottom: 0;
}

.pst-hotspot-loop__item:hover,
.pst-hotspot-loop__item.is-active {
	background-color: var(--pst-list-item-bg-hover);
	color: var(--pst-list-text-hover);
}

.pst-hotspot-loop__item:hover .pst-hotspot-loop__item-title,
.pst-hotspot-loop__item.is-active .pst-hotspot-loop__item-title,
.pst-hotspot-loop__item:hover .pst-hotspot-loop__item-arrow,
.pst-hotspot-loop__item.is-active .pst-hotspot-loop__item-arrow {
	color: var(--pst-list-text-hover);
}

.pst-hotspot-loop__item:hover {
	transform: translateX(6px);
}

.pst-hotspot-loop__item-media {
	width: 88px;
	height: 88px;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(17, 17, 17, 0.08);
}

.pst-hotspot-loop__item-media img,
.pst-hotspot-loop__item-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pst-hotspot-loop__item-title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
	transition: color 0.25s ease;
}

.pst-hotspot-loop__item-arrow {
	display: inline-flex;
	width: 24px;
	height: 24px;
	color: var(--pst-list-icon-color);
	transition: color 0.25s ease, transform 0.25s ease;
}

.pst-hotspot-loop__item:hover .pst-hotspot-loop__item-arrow,
.pst-hotspot-loop__item.is-active .pst-hotspot-loop__item-arrow {
	color: var(--pst-list-icon-hover);
	transform: translateX(4px);
}

.pst-hotspot-loop__media,
.pst-hotspot-loop__image-wrap {
	position: relative;
	height: 100%;
	min-height: 420px;
}

.pst-hotspot-loop__media {
	width: 100%;
}

.pst-hotspot-loop__image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #f4f4f4;
}

.pst-hotspot-loop__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: auto;
}

.pst-hotspot-loop__hotspot {
	position: absolute;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pst-hotspot-size, 54px);
	height: var(--pst-hotspot-size, 54px);
	border-radius: 999px;
	border: 0;
	background: transparent;
	padding: 0;
	text-decoration: none;
	cursor: pointer;
}

.pst-hotspot-loop__hotspot-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--pst-hotspot-bg, #111111);
	color: var(--pst-hotspot-icon, #ffffff);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.pst-hotspot-loop__hotspot-inner i,
.pst-hotspot-loop__hotspot-inner svg {
	font-size: var(--pst-icon-size, 16px);
	width: var(--pst-icon-size, 16px);
	height: var(--pst-icon-size, 16px);
}

.pst-hotspot-loop__hotspot:hover .pst-hotspot-loop__hotspot-inner,
.pst-hotspot-loop__hotspot.is-active .pst-hotspot-loop__hotspot-inner {
	background: var(--pst-hotspot-bg-hover, #d5332f);
	color: var(--pst-hotspot-icon-hover, #ffffff);
	transform: scale(1.08);
}

@media (max-width: 1024px) {
	.pst-hotspot-loop {
		grid-template-columns: 1fr;
	}

	.pst-hotspot-loop__media,
	.pst-hotspot-loop__image-wrap {
		min-height: 360px;
	}
}

@media (max-width: 767px) {
	.pst-hotspot-loop__item {
		grid-template-columns: 72px minmax(0, 1fr) 24px;
		gap: 12px;
	}

	.pst-hotspot-loop__item-media {
		width: 72px;
		height: 72px;
	}

	.pst-hotspot-loop__media,
	.pst-hotspot-loop__image-wrap {
		min-height: 300px;
	}
}