.hp {

	/*--------------------------------------------------------------
	Buttons
	--------------------------------------------------------------*/
	&-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;

		&--wide {
			width: 100%;
		}

		&--mobile {
			@media only screen and (min-width: 48em) {
				display: none !important;
			}
		}

		i {
			&:first-child {
				margin-right: 0.5rem;
			}
		}
	}

	/*--------------------------------------------------------------
	Images
	--------------------------------------------------------------*/
	&-image {
		img {
			display: block;
			width: 100%;
			height: auto;

			&[data-zoom] {
				cursor: pointer;
			}
		}
	}

	/*--------------------------------------------------------------
	Meta
	--------------------------------------------------------------*/
	&-meta {
		font-size: 80%;
	}

	/*--------------------------------------------------------------
	Blocks
	--------------------------------------------------------------*/
	&-block {

		.elementor-element-edit-mode &,
		.wp-block & {
			pointer-events: none;
		}

		&__placeholder {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 2em;
			background-color: #f0f0f0;
			pointer-events: none;

			span {
				font-size: 14pt;
				font-weight: 400;
				color: #1e1e1e;
			}
		}
	}

	/*--------------------------------------------------------------
	Forms
	--------------------------------------------------------------*/
	&-form {
		margin: 0;

		&:not(:last-child) {
			margin-bottom: 2rem;
		}

		&--wide {
			display: flex;
			align-items: flex-end;

			@media only screen and (max-width: 47.99em) {
				flex-direction: column;
				align-items: stretch;
			}
		}

		&--wide &__fields,
		&--wide &__footer {
			&:not(:last-child) {
				margin: 0 1rem 0 0;
			}

			@media only screen and (max-width: 47.99em) {
				&:not(:last-child) {
					margin: 0 0 2rem;
				}
			}
		}

		&--wide &__fields {
			display: flex;

			@media only screen and (max-width: 47.99em) {
				flex-direction: column;
			}
		}

		&--wide &__field,
		&--wide &__fields {
			flex: 1;
		}

		&--wide &__button,
		&--wide &__field {
			&:not(:last-child) {
				margin: 0 1rem 0 0;
			}
		}

		&--wide &__field {
			&:not(:last-child) {
				margin-bottom: 0;
			}

			@media only screen and (max-width: 47.99em) {
				&:not(:last-child) {
					margin: 0 0 1.5rem;
				}
			}
		}

		&--wide &__button {
			@media only screen and (max-width: 47.99em) {
				width: 100%;

				&:not(:last-child) {
					margin-bottom: 1rem;
				}
			}
		}

		&--pivot &__field {
			display: flex;
			margin: 0;
			align-items: center;
		}
	}

	&-field {

		&--checkboxes,
		&--radio {
			max-height: 24.33rem;
			overflow-y: auto;

			ul {
				list-style: none;
				margin: 0;
				padding: 0;

				ul {
					margin: 0.5rem 0 0 1.5rem;
				}

				li {
					margin: 0;

					&:not(:last-child) {
						margin-bottom: 0.5rem;
					}

					label {
						cursor: pointer;
					}
				}
			}
		}

		&--number-range {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -0.5rem;

			input[type="number"] {
				width: 100%;
				margin: 0 0.5rem;
				flex: 1;
			}

			>div {
				flex: 0 1 100%;
				margin: 1rem 0.5rem 0;
			}
		}

		&--checkbox {
			span {
				cursor: pointer;
			}
		}

		&--date,
		&--time {
			display: flex;
			align-items: center;

			input[type="text"] {
				flex: 1;
				padding-right: 2.5rem;
				min-width: 0;
			}

			a {
				display: none;
				flex: 0 0 2.5rem;
				margin-left: -2.5rem;
				text-decoration: none;
				text-align: center;
				cursor: pointer;
			}

			i {
				color: #888;
			}
		}

		input[type="checkbox"],
		input[type="radio"] {
			margin-right: 0.5rem;
			cursor: pointer;
			visibility: visible !important;
		}
	}

	&-form--pivot &-field__label {
		margin: 0 0.5rem 0 0;
		white-space: nowrap;
	}

	&-form--primary &-field__label {
		display: none;
	}

	/*--------------------------------------------------------------
	Menus
	--------------------------------------------------------------*/
	&-menu {
		&:not(:last-child) {
			margin-bottom: 2rem;
		}

		li {
			&>a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				text-decoration: none;
			}
		}

		&__item {
			small {
				display: flex;
				justify-content: center;
				align-items: center;
				min-width: 1.5rem;
				min-height: 1.5rem;
				padding: 0 0.5rem;
				margin-left: 0.5rem;
				border-radius: 9999px;
				background-color: #ff5a5f;
				color: #fff;
				font-size: 80%;
				line-height: 1;
				white-space: nowrap;
			}
		}

		&--site-header {
			display: flex;
			align-items: center;
			margin: 0;

			&>.hp-link {
				white-space: nowrap;
			}
		}

		&--site-header &__item {
			&:not(:last-child) {
				margin-right: 2rem;

				@media only screen and (max-width: 47.99em) {
					margin-right: 1.5rem;
				}
			}
		}

		&--breadcrumb {
			ul {
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
				flex-wrap: wrap;

				ul {
					display: none;
				}
			}
		}

		&--breadcrumb &__item {
			margin: 0;
			font-size: 80%;
			display: flex;
			align-items: center;

			&:not(:last-child) {
				margin-right: 0.5rem;

				&::after {
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					font-style: normal;
					font-variant: normal;
					line-height: 1;
					display: inline-block;
					-moz-osx-font-smoothing: grayscale;
					-webkit-font-smoothing: antialiased;
					text-rendering: auto;
					content: "\f105";
					font-size: 14px;
					margin-left: 0.5rem;
					opacity: 0.5;
				}
			}
		}

		&--tabbed {
			border-color: rgba(0, 0, 0, 0.1);
			border-style: solid;
			border-width: 0;

			&:not(:last-child) {
				border-bottom-width: 1px;
			}

			ul {
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				ul {
					display: none;
				}
			}
		}

		&--tabbed &__item {
			padding: 1rem;
			margin: 0;
			position: relative;

			&--current {
				&::before {
					display: block;
					content: "";
					position: absolute;
					left: 0;
					right: 0;
					bottom: -1px;
					height: 3px;
					background-color: rgba(0, 0, 0, 0.5);
				}

				a {
					color: inherit;
					font-weight: bold;
				}
			}
		}
	}

	&-page__topbar--separate &-menu--tabbed {
		margin: -1rem 0;
		border-bottom-width: 0;

		@media only screen and (max-width: 47.99em) {
			margin-bottom: 0;

			&:not(:last-child) {
				margin-bottom: 1rem;
				border-bottom-width: 1px;
				width: 100%;
			}
		}
	}

	/*--------------------------------------------------------------
	Grid
	--------------------------------------------------------------*/
	&-grid {
		&:last-child {
			margin-bottom: -2rem;
		}

		&__item {
			margin-bottom: 2rem;
		}
	}

	/*--------------------------------------------------------------
	Pagination
	--------------------------------------------------------------*/
	&-pagination {
		&:not(:last-child) {
			margin-bottom: 2rem;
		}

		&:empty {
			margin-bottom: 0;
		}

		.nav-links {
			display: flex;
			justify-content: center;
			align-items: center;

			.page-numbers {
				&:not(:last-child) {
					margin-right: 1rem;
				}

				&:not(.prev):not(.next) {
					font-size: 120%;
				}
			}
		}
	}

	/*--------------------------------------------------------------
	Pages
	--------------------------------------------------------------*/
	&-page {
		max-width: 80rem;
		margin: 0 auto;

		&__header {
			&:not(:last-child) {
				margin-bottom: 4rem;
			}
		}

		&__footer {
			&:not(:first-child) {
				margin-top: 4rem;
			}
		}

		&__sidebar {
			@media only screen and (max-width: 47.99em) {
				&:first-child {
					margin-bottom: 3rem;
				}

				&:last-child {
					margin-top: 3rem;
				}
			}
		}

		&__topbar {
			display: flex;
			justify-content: space-between;
			align-items: center;

			@media only screen and (max-width: 47.99em) {
				flex-direction: column;
				align-items: flex-start;
			}

			&:not(:last-child) {
				margin-bottom: 2rem;
			}

			&--separate {
				border-style: solid;
				border-color: rgba(0, 0, 0, 0.1);
				border-width: 0;
				padding: 1rem 0;
				margin-top: -1rem;

				&:not(:last-child) {
					border-bottom-width: 1px;
				}
			}
		}

		&__title {
			&:not(:last-child) {
				margin-bottom: 2rem;
			}

			&:first-child {
				margin-top: 0;
			}
		}

		&__description {
			&:not(:last-child) {
				margin-bottom: 1.5rem;
			}
		}

		&__title+&__description {
			margin-top: -1rem;
		}
	}

	&-section {
		&__title {
			&:not(:last-child) {
				margin-bottom: 1rem;
			}

			&:first-child {
				margin-top: 0;
			}
		}
	}

	&-section,
	&-widget {
		&:not(:last-child) {
			margin-bottom: 2rem;
		}
	}

	/*--------------------------------------------------------------
	Widgets
	--------------------------------------------------------------*/
	&-widget {

		&--listing-filter,
		&--vendor-filter {
			@media only screen and (max-width: 47.99em) {
				display: none;
			}
		}
	}

	/*--------------------------------------------------------------
	Listings
	--------------------------------------------------------------*/
	&-listing {
		&--view-block {
			&:not(:last-child) {
				margin-bottom: 2rem;
			}
		}

		&--view-block &__content,
		&--view-block &__footer,
		&--view-block &__header {
			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}

		&--view-block &__attributes--secondary,
		&--view-block &__attributes--ternary,
		&--view-block &__details--primary,
		&--view-block &__image,
		&--view-block &__title {
			&:not(:last-child) {
				margin-bottom: 0.5rem;
			}
		}

		&--view-block &__header {
			position: relative;
		}

		&--view-block &__footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&--view-block &__actions--primary,
		&--view-block &__attributes--primary {
			display: flex;
			align-items: center;
		}

		&--view-block &__attributes--primary {
			min-width: 0;

			&:not(:last-child) {
				margin-right: 1rem;
			}
		}

		&--view-page &__actions--primary {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		&__actions--secondary {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

		&--view-page &__actions--primary,
		&--view-page &__attributes--primary,
		&--view-page &__attributes--secondary,
		&--view-page &__attributes--ternary,
		&--view-page &__description,
		&--view-page &__details--primary,
		&--view-page &__images,
		&--view-page &__title {
			&:not(:last-child) {
				margin-bottom: 2rem;
			}
		}

		&__image,
		&__images {

			&-slider,
			&-carousel {
				direction: ltr;

				.slick-arrow {
					position: absolute;
					z-index: 1;
					top: 50%;
					display: block;
					width: 32px;
					height: 32px;
					margin-top: -1rem;
					text-align: center;
					line-height: 2rem;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					cursor: pointer;

					&.slick-disabled {
						top: -9999px;
					}
				}

				.slick-prev {
					left: 1rem;
				}

				.slick-next {
					right: 1rem;
				}
			}

			&-slider {
				&:not(:last-child) {
					margin-bottom: 1rem;
				}

				&:not(:hover) .slick-arrow {
					display: none !important;
				}

				.slick-slide:has(+.slick-current),
				.slick-current+.slick-slide {
					img {
						position: relative;
						z-index: -1;
					}
				}

				.slick-slide:has(+.slick-current) img {
					right: -1px;
				}

				.slick-current+.slick-slide img {
					left: -1px;
				}
			}

			&-carousel {
				overflow: hidden;

				.slick-list {
					margin: 0 -0.5rem;
				}

				.slick-slide {
					margin: 0 0.5rem;
					outline: none;
					cursor: pointer;

					img,
					video {
						opacity: 0.5;
						pointer-events: none;
					}
				}

				.slick-current,
				.slick-slide:hover {

					img,
					video {
						opacity: 1;
					}
				}
			}

			img,
			video {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: contain;
				background-color: #f2f2f2;

				&[data-zoom^="http"] {
					cursor: pointer;
				}

				.wp-block &:not(:first-child) {
					display: none;
				}
			}
		}

		&__title {
			margin: 0;
			word-wrap: break-word;

			a {
				text-decoration: none;
				color: inherit;
			}
		}

		&--edit-block &__title span {
			word-break: break-word;
		}

		&--edit-block &__categories {
			@media only screen and (max-width: 47.99em) {
				display: none;
			}
		}

		&__description {
			word-wrap: break-word;
		}

		&__verified-badge {
			color: #15cd72;
			display: inline-block;
			vertical-align: middle;
		}

		&--view-block &__featured-badge {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			z-index: 1;
			left: 1rem;
			top: 1rem;
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			width: 32px;
			height: 32px;
			color: #fff;
		}

		&--view-block &__created-date,
		&--view-page &__created-date {
			font-size: 80%;
			display: block;
		}

		&__attributes--primary &__attribute,
		&__attributes--secondary &__attribute,
		&__attributes--ternary &__attribute {
			word-wrap: break-word;
		}

		&--view-block &__attributes--ternary &__attribute {
			&:not(:last-child) {
				margin-bottom: 0.5rem;
			}
		}

		&--view-page &__attributes--ternary &__attribute {
			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}

		&--view-block &__attributes--primary &__attribute {
			font-size: 120%;
			min-width: 0;

			&:not(:last-child) {
				margin-right: 1rem;
			}
		}

		&--view-page &__attributes--primary &__attribute {
			font-size: 120%;
			text-align: center;
			padding: 1rem 1.5rem;
			background-color: rgba(0, 0, 0, 0.04);

			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}

		&--view-block &__actions--primary &__action {
			opacity: 0.5;
			text-decoration: none;

			&:hover,
			&[data-state="active"] {
				opacity: 1;
			}

			&:not(:last-child) {
				margin-right: 1rem;
			}
		}

		&--view-page &__actions--primary &__action {
			&:not(:last-child) {
				margin-bottom: 0.5rem;
			}
		}

		&--view-page &__actions--primary button&__action {
			width: 100%;

			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}

		&__actions--secondary &__action {
			&:not(:last-child) {
				margin-right: 1.5rem;
			}
		}
	}

	/*--------------------------------------------------------------
	Listing categories
	--------------------------------------------------------------*/
	&-listing-category {
		&--view-block {
			&:not(:last-child) {
				margin-bottom: 2rem;
			}
		}

		&--view-block &__content,
		&--view-block &__header {
			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}

		&--view-block &__description,
		&--view-block &__details--primary,
		&--view-block &__image,
		&--view-block &__name {
			&:not(:last-child) {
				margin-bottom: 0.5rem;
			}
		}

		&__image {
			img {
				display: block;
				width: 100%;
				height: auto;
			}
		}

		&__name {
			margin: 0;
			word-wrap: break-word;

			a {
				text-decoration: none;
				color: inherit;
			}
		}

		&__item-count {
			font-size: 80%;
		}

		&--view-block &__description,
		&--view-block &__item-count,
		&--view-block &__name {
			text-align: center;
		}
	}

	/*--------------------------------------------------------------
	Vendors
	--------------------------------------------------------------*/
	&-vendor {
		&--view-block {
			&:not(:last-child) {
				margin-bottom: 2rem;
			}
		}

		&--view-block &__content,
		&--view-block &__footer,
		&--view-block &__header {
			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}

		&--view-block &__footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&--view-block &__actions--primary,
		&--view-block &__attributes--primary {
			display: flex;
			align-items: center;
		}

		&--view-block &__attributes--primary {
			min-width: 0;

			&:not(:last-child) {
				margin-right: 1rem;
			}
		}

		&__attributes--primary &__attribute,
		&__attributes--secondary &__attribute,
		&__attributes--ternary &__attribute {
			word-wrap: break-word;
		}

		&--view-block &__attributes--ternary &__attribute,
		&--view-page &__attributes--ternary &__attribute {
			&:not(:last-child) {
				margin-bottom: 0.5rem;
			}
		}

		&--view-block &__attributes--primary &__attribute {
			font-size: 120%;
			min-width: 0;

			&:not(:last-child) {
				margin-right: 1rem;
			}
		}

		&--view-block &__actions--primary &__action {
			opacity: 0.5;
			text-decoration: none;

			&:hover,
			&[data-state="active"] {
				opacity: 1;
			}

			&:not(:last-child) {
				margin-right: 1rem;
			}
		}

		&--view-block &__attributes--secondary,
		&--view-block &__attributes--ternary,
		&--view-block &__image,
		&--view-block &__name {
			&:not(:last-child) {
				margin-bottom: 0.5rem;
			}
		}

		&--view-block &__details--primary,
		&--view-page &__attributes--secondary,
		&--view-page &__attributes--ternary,
		&--view-page &__details--primary,
		&--view-page &__image,
		&--view-page &__name {
			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}

		&--view-page &__actions--primary,
		&--view-page &__attributes--primary,
		&--view-page &__summary {
			&:not(:last-child) {
				margin-bottom: 2rem;
			}
		}

		&--view-block &__details--primary,
		&--view-page &__details--primary {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		&--view-page &__actions--primary {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		&__image {
			img {
				display: block;
				width: 100%;
				height: auto;
				border-radius: 50%;
			}
		}

		&--view-block &__image,
		&--view-page &__image {
			width: 10rem;
			margin-left: auto;
			margin-right: auto;
		}

		&__name {
			margin: 0;
			word-wrap: break-word;

			a {
				text-decoration: none;
				color: inherit;
			}
		}

		&__description {
			word-wrap: break-word;
		}

		&__online-badge {
			display: inline-block;
			vertical-align: middle;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background-color: #c1c8d5;

			&--active {
				background-color: #15cd72;
			}
		}

		&--view-page &__online-badge {
			width: 10px;
			height: 10px;
		}

		&__verified-badge {
			color: #15cd72;
			display: inline-block;
			vertical-align: middle;
		}

		&__registered-date {
			font-size: 80%;
			display: block;
		}

		&--view-block &__name,
		&--view-block &__registered-date,
		&--view-page &__name,
		&--view-page &__registered-date {
			text-align: center;
		}

		&--view-page &__attributes--primary &__attribute {
			font-size: 120%;
			text-align: center;
			padding: 1rem 1.5rem;
			background-color: rgba(0, 0, 0, 0.04);

			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}

		&--view-page &__actions--primary &__action {
			&:not(:last-child) {
				margin-bottom: 0.5rem;
			}
		}

		&--view-page &__actions--primary button&__action {
			width: 100%;

			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}
	}

	/*--------------------------------------------------------------
	Themes
	--------------------------------------------------------------*/
	&-theme {
		&--twentyseventeen {
			.single-featured-image-header {
				display: none;
			}
		}

		&--storefront {
			.site-header .site-branding {
				width: auto;
			}

			.menu-toggle {
				@media only screen and (max-width: 47.99em) {
					float: left;
				}
			}

			div.content-area {
				float: left;
				width: 100%;
				margin-right: 0;
				margin-left: 0;
			}
		}

		&--astra {
			#primary {
				width: 100%;
			}
		}
	}

	&-theme--oceanwp &-form {
		input[type="number"] {
			max-width: none;
		}
	}

	&-theme--twentynineteen &-page {
		max-width: 100%;
		margin: 0 0 3rem;
	}

	&-theme--neve &-page,
	&-theme--popularfx &-page {
		padding-top: 2rem;
	}

	&-theme--neve &-page {
		padding-bottom: 2rem;
	}

	&-theme--generatepress #content &-page {
		margin-right: 0;
		padding: 40px;

		@media only screen and (max-width: 768px) {
			padding: 30px;
		}
	}

	&-theme--generatepress #content &-page,
	&-theme--zakra .content-area {
		flex: 1;
	}

	&-theme--storefront &-menu--site-header {
		float: right;
		margin-left: 1.5rem;

		@media only screen and (max-width: 47.99em) {
			float: none;
			clear: both;
			margin: 0;
			padding: 1.5rem 0;
		}
	}
}

/*--------------------------------------------------------------
Select2
--------------------------------------------------------------*/
.select2 {
	&-container {
		min-width: 4.5rem;

		.woocommerce-js & {
			width: auto;
		}
	}

	&-dropdown {
		z-index: 99999;
	}

	.woocommerce-js &-container--default &-selection &-selection__arrow {
		top: 0;
	}
}

body.admin-bar {
	position: relative;
}

#wpadminbar {
	@media screen and (max-width: 600px) {
		top: -46px;
	}
}

/*--------------------------------------------------------------
Menus
--------------------------------------------------------------*/
.menu-item {
	@media only screen and (min-width: 75em) {

		&--user-account&--first,
		&--user-login&--first {
			display: none !important;
		}
	}

	@media only screen and (max-width: 74.99em) {

		&--user-account&--last,
		&--user-login&--last {
			display: none !important;
		}
	}
}