/*
 * Fixes for the original theme now that its jQuery plugins (MixItUp,
 * animsition, nice-select, Fancybox, ion.rangeSlider) are replaced by React.
 */

/* Product tiles were hidden until MixItUp revealed them. */
.shop-mix-wrap-1 {
	display: block;
}

/* The page fade-in plugin is gone, so the wrapper must stay visible. */
.animsition {
	opacity: 1 !important;
	animation: none !important;
}

/* Links and buttons that were anchors in the old markup. */
button.shop-wrap-2-right-circle {
	cursor: pointer;
	padding: 0;
}

.gardenia-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}
[dir="rtl"] .gardenia-badges {
	left: auto;
	right: 10px;
}
.gardenia-badge {
	border-radius: 10px;
	padding: 3px 10px;
}

/* Square page buttons of the old product lists. */
.gardenia-page-btn {
	width: 40px;
	height: 40px;
	padding: 8px;
	margin: 2px;
	background: #fff;
	border: 1px solid #666;
	color: #000 !important;
	font-weight: 700;
}
.gardenia-page-btn.active,
.gardenia-page-btn:hover {
	background: var(--primary, #9dc94d);
	border-color: var(--primary, #9dc94d);
	color: #fff !important;
}

/* Logo on the sign-in / sign-up pages. */
.gardenia-auth-logo {
	width: 200px;
	display: block;
	margin: auto;
}

/* Validation messages under the theme inputs. */
.gardenia-field-error {
	color: #dc3545;
}
.form-style.is-invalid {
	border-color: #dc3545 !important;
}

/* One-time notices ("Email sent", ...). */
.gardenia-flash {
	position: fixed;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1100;
	min-width: 280px;
	max-width: calc(100vw - 32px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Photo viewer and video above the fixed header. */
.gardenia-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000; /* the fixed header uses 10000 */
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 70px;
}
.gardenia-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	user-select: none;
}
.gardenia-lightbox-button {
	position: absolute;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 10px;
	opacity: 0.8;
}
.gardenia-lightbox-button:hover,
.gardenia-lightbox-button:focus-visible {
	opacity: 1;
}
.gardenia-lightbox-close {
	top: 10px;
	right: 10px;
}
.gardenia-lightbox-prev,
.gardenia-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
}
.gardenia-lightbox-prev {
	left: 10px;
}
.gardenia-lightbox-next {
	right: 10px;
}
.gardenia-lightbox-counter {
	position: absolute;
	top: 20px;
	left: 24px;
	color: #fff;
	font-size: 14px;
}
.gardenia-video-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.gardenia-video-frame {
	width: min(1100px, 100%);
	aspect-ratio: 16 / 9;
}
.gardenia-video-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
.gardenia-video-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
}

/* Formatted texts from the editor. */
.rich-text img {
	max-width: 100%;
	height: auto;
}
.rich-text p:last-child {
	margin-bottom: 0;
}

/* Price slider (replaces ion.rangeSlider). */
.price-range-values {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	margin-bottom: 12px;
}
.price-range-track {
	position: relative;
	height: 24px;
}
.price-range-track::before,
.price-range-fill {
	content: '';
	position: absolute;
	top: 10px;
	height: 4px;
	border-radius: 2px;
}
.price-range-track::before {
	left: 0;
	right: 0;
	background: #e5e5e5;
}
.price-range-fill {
	background: var(--primary, #9dc94d);
}
.price-range-track input[type="range"] {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 24px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.price-range-track input[type="range"]::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--primary, #9dc94d);
	cursor: pointer;
}
.price-range-track input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--primary, #9dc94d);
	cursor: pointer;
}

/* Native select fallback in the theme style. */
.nice-select .list {
	max-height: 260px;
	overflow-y: auto;
}

/* Hero slider image fill (Swiper 14 sets its own heights). */
.swiper-hero-shop-v1,
.swiper-hero-shop-v1 .swiper-wrapper,
.swiper-hero-shop-v1 .swiper-slide {
	height: 100%;
}

/* Hero slider arrows centred in their circles (the old Swiper stylesheet did this). */
.swiper-hero-shop-v1 .swiper-button-next,
.swiper-hero-shop-v1 .swiper-button-prev {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Product gallery thumbnails. */
.swiper-product-page-thumbs .swiper-slide {
	cursor: pointer;
}

/* Google map on the contact page. */
.gardenia-map iframe {
	border: 0;
	width: 100%;
	height: 600px;
	display: block;
}

/* Order status badges (old "badge bg-orange", ...). */
.gardenia-status {
	display: inline-block;
	border-radius: 4px;
	padding: 3px 0;
}

/* Long group names in the "Type" filter wrap neatly. */
.btn-filter-tag-small {
	text-align: start;
	white-space: normal;
}