/* only screen and (max-width: 786px)  */

/* prevent pinch zoom gestures propagate to body when carousel is visible */
body.carousel-visible {
	overscroll-behavior: contain;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

[data-toggle="carousel"] a:hover > .ui-carousel-info,
[data-toggle="carousel"] a:hover > .ui-carousel-info + .ui-carousel-description {
	opacity: 1;
	visibility: visible;
	transition: visibility 0s linear 0s, opacity 0.15s ease, transform 0.15s ease;
}

[data-toggle="carousel"] a:hover > .ui-carousel-info::after {
	color: var(--button-text-color);
}

[data-toggle="carousel"] a > .ui-carousel-description {
	padding: 0 5px 0 45px;
	min-height: 40px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

[data-toggle="carousel"] a > .ui-carousel-description > span:first-child {
	margin-bottom: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

[data-toggle="carousel"] a > .ui-carousel-description > span + span {
	display: none;
}

[data-toggle="carousel"] a > .ui-carousel-info::after {
	top: -5px;
	right: 8px;
}

.ui-carousel > .btn-close, .ui-carousel > .btn-info {
	top: 8px;
	right: 8px;
}

.ui-carousel > .btn-close + .btn-info {
	top: 8px;
	left: 8px;
	right: auto;
}

.ui-carousel:not(.description-visible) > .btn-close::before, .ui-carousel:not(.description-visible) > .btn-info::before {
	width: 40px;
	height: 40px;
}

/* remove tap highlight on the buttons */
.ui-carousel > .btn-close,
.ui-carousel > .btn-info {
	-webkit-tap-highlight-color: transparent;
}

.ui-carousel > .btn-close > span,
.ui-carousel > .btn-info > span {
	font-size: 24px;
}

.ui-carousel > .ui-prev-next {
	display: none;
}

.ui-carousel > .ui-prev-next a {
	transform: unset;
	transition: none;
}

.ui-carousel > .ui-carousel-wrapper > .ui-carousel-item > .ui-carousel-description {
	padding-top: 20px;
	padding-bottom: 20px;
}

.ui-carousel > .ui-carousel-wrapper > .ui-carousel-item > .ui-carousel-description > span > .review-stars {
	display: flex;
	margin-right: 0;
	margin-bottom: 5px;
}

.ui-carousel > .ui-carousel-wrapper > .ui-carousel-item > .ui-carousel-description > span:first-child {
	margin-left: -55px;
	margin-right: -55px;
}

.ui-carousel > .ui-carousel-wrapper > .ui-carousel-item > .ui-carousel-description > span + span {
	margin-left: -95px;
	margin-right: -95px;
}