/* Frontend CSS */

:root {
	--global-button-height: 42px;
	--global-button-max-height: 42px;
	--color-alert: #da3f3f;
	--color-star: #ffab00;

	--green-900: #F8FDF9; // bg green
	--green-500: #E1F4E9; // border

	--purple-900: #EFF1FA; // bg purple
	--purple-600: #BCC6E7; // border
	
	body.color-switch-dark{
		
		--gray-010: #030712;
		--gray-050: #1a202c;
		--gray-100: #2d3748;
		--gray-200: #4a5568;
		--gray-300: #718096;
		--gray-400: #a0aec0;
		--gray-500: #ebebeb;
		--gray-600: #edf2f7;
		--gray-700: #f7fafc;
		--gray-800: #f9fafb;
		--gray-900: #fbfbfb;
		--gray-950: #fcfcfc;
		--gray-025: #0f0f0f;
		--gray-150: #191919;
		--gray-250: #232323;
		--gray-550: #292929;

		--gray-400:#2f3336;

		--green-900: #F8FDF9; // bg green
		--green-500: #E1F4E9; // border
	
		--purple-900: #EFF1FA; // bg purple
		--purple-600: #BCC6E7; // border

	}
}

// scrollbar
// For Firefox
/* * {
	scroll-behavior: smooth;
	scrollbar-width: thin; // Makes the scrollbar thinner
	//scrollbar-color: #888 #D6D6D6; /* Thumb color and track color
	scrollbar-color:rgba(0,0,0,.1) rgba(0,0,0,.05);
}
// For Webkit browsers (Chrome, Safari, Edge)
*::-webkit-scrollbar {
	width: 5px;
}
*::-webkit-scrollbar-track {
	background: rgba(0,0,0,.05); // Color of the track (background of scrollbar)
}
*::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,.1); // Color of the scrollbar thumb 
	//border-radius: 5px; /* Optional: makes the scrollbar thumb rounded 
}
*::-webkit-scrollbar-thumb:hover {
	background: #555;
}
// Default scrollbar for the main window (html and body) 
html, body {
	overflow: auto; // Default scrolling behavior 
	scrollbar-width: auto; // Default for Firefox 
	//scrollbar-color:#888888 #f0f0f0;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
	display: none; // Hide the custom scrollbar for the main window 
}
 */


 [type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
  }
  
  /**
   * Remove the X in Chrome and Safari on macOS.
   */
   [type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
  }
  
  [type="search"].no-cancel-button::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
  }
  
  [type="search"].no-decoration::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
  }
  
  [type="search"].no-decoration-no-cancel-button::-webkit-search-decoration,
  [type="search"].no-decoration-no-cancel-button::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
  }
  
  /**
   * Remove the X in IE.
   */
   [type="search"]::-ms-clear {
	display: none;
  }
  

@keyframes progress-loading {
	0% {
		width: 0;
	}
	to {
		width: 80%;
	}
}

@keyframes progress-completed {
	0% {
		width: 80%;
	}
	99% {
		width: 100%;
	}
	100% {
		opacity: 0;
	}
}

@keyframes eye-pulse {
	50% {
		opacity: 0.5;
	}
}

@keyframes icon-flash-animate {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 0.1;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes notification-timer {
	0% {
		width: 100%;
	}
	100% {
		width: 0;
	}
}

@keyframes around-loader {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes zoom-effect {
	0% {
		transform: scale(1);
	}
	45% {
		transform: scale(1);
	}
	47% {
		transform: scale(1.05);
	}
	49% {
		transform: scale(1);
	}
	51% {
		transform: scale(1.05);
	}
	53% {
		transform: scale(1);
	}
	55% {
		transform: scale(1.05);
	}
	57% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes stock-progress-bar {
	0% { width: 100%; }
	100% { width: [data-width]; }
}
@keyframes slide_notif {
	0%, 45% {
		transform: translateY(0);
	}
	50%, 95% {
		transform: translateY(-50%);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes movement {
	0% {
		width: 30px;
	}
	100% {
		width: var(--fsb-percent, 100%);
	}
}

@keyframes progress {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -60px -60px;
    }
}

.zoom-effect {
	animation: zoom-effect 5s infinite linear;
}

/* pointer the ‘X’ from Internet Explorer */
input[type="search"]::-ms-clear {
	cursor: pointer;
}
input[type="search"]::-ms-reveal {
	cursor: pointer;
}
/* pointer the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	cursor: pointer;
}

body {
	&:before {
		transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 0.5);
		z-index: 9999999;
		opacity: 0;
		visibility: hidden;
		cursor: progress;
	}

	&:after {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 0;
		height: 3px;
		background: #000;
		z-index: 9999998;
		opacity: 1;
	}

	&.handling {
		&:before {
			opacity: 1;
			visibility: visible;
		}

		&:after {
			animation: progress-loading 1s ease-in-out forwards;
		}
	}

	&.completed {
		&:after {
			animation: progress-completed 0.3s ease-in-out forwards;
		}
	}
}


.mobile-secondary-navigation {
	border-top: 2px solid var(--global-palette7);
}

.widget-area {
	.widgettitle {
		font-weight: 700;
		font-size: 20px;
		line-height: 1.5;
		color: var(--global-palette3);
		margin-bottom: 0.5em;
		text-transform: uppercase;
		position: relative;
	}
}

// Footer Contact Block
.site-info-inner {
	.contact-info-container {
		p {
			margin: 0;
			&:before {
				margin-inline-end: 10px;
				width: 20px;
				height: 20px;
				line-height: 21px;
				vertical-align: middle;
				text-align: center;
			}
			& + p {
				margin: 5px 0 0 0;
			}
		}
		.contact-item {
			float: left;
			width: 100%;
			.icons {
				width: 30px;
				height: 30px;
				display: block;
				float: left;
				margin: 0 5px 0 0;
			}
			& + .contact-item {
				margin: 5px 0 0 0;
			}
		}
	}
}

.sidebar-widgets-collapsible {
	.wp-block-group__inner-container > h2,
	.widgettitle,
	.widget-title {
		cursor: pointer;
		//margin: 0 !important;
		//line-height: 26px !important;

		&:after {
			content: "\2212";
			font-size: 22px;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.widget-content {
		// Use padding instead of margin for smooth collapsed.
		padding-top: var(--widget-title-spacing);
	}

	.widget.collapsed {
		.wp-block-group__inner-container > h2,
		.widgettitle,
		.widget-title {
			&:after {
				content: "\002B";
			}
		}
	}
}

[class*="hint--"] {
	--hint-background: #000000;
	--hint-text: #fff;
	position: relative;
	display: inline-block;
}

[class*="hint--"]:before,
[class*="hint--"]:after {
	position: absolute;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	visibility: hidden;
	opacity: 0;
	z-index: 1000000;
	pointer-events: none;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
	-webkit-transition-delay: 0ms;
	transition-delay: 0ms;
}

[class*="hint--"]:hover:before,
[class*="hint--"]:hover:after {
	visibility: visible;
	opacity: 1;
}

[class*="hint--"]:hover:before,
[class*="hint--"]:hover:after {
	-webkit-transition-delay: 100ms;
	transition-delay: 100ms;
}

[class*="hint--"]:before {
	content: "";
	position: absolute;
	background: transparent;
	border: 7px solid transparent;
	z-index: 1000001;
}

[class*="hint--"]:after {
	background: var(--hint-background);
	color: var(--hint-text);
	padding: 7px 10px;
	font-size: 14px;
	font-weight: normal;
	line-height: 14px;
	white-space: nowrap;
	border-radius: 3px;
}

[class*="hint--"][aria-label]:after {
	content: attr(aria-label);
}

[class*="hint--"][data-hint]:after {
	content: attr(data-hint);
}

@media (max-width: 1024px) {
	[class*="hint--"]:after {
		padding: 5px 5px;
		font-size: 12px;
	}
}

[aria-label=""]:before,
[aria-label=""]:after,
[data-hint=""]:before,
[data-hint=""]:after {
	display: none !important;
}

.hint--top-left:before {
	border-top-color: var(--hint-background);
}

.hint--top-right:before {
	border-top-color: var(--hint-background);
}

.hint--top:before {
	border-top-color: var(--hint-background);
}

.hint--bottom-left:before {
	border-bottom-color: var(--hint-background);
}

.hint--bottom-right:before {
	border-bottom-color: var(--hint-background);
}

.hint--bottom:before {
	border-bottom-color: var(--hint-background);
}

.hint--left:before {
	border-left-color: var(--hint-background);
}

.hint--right:before {
	border-right-color: var(--hint-background);
}

.hint--top:before {
	margin-bottom: -13px;
}

.hint--top:before,
.hint--top:after {
	bottom: 100%;
	left: 50%;
}

.hint--top:before {
	left: calc(50% - 7px);
}

.hint--top:after {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.hint--top:hover:before {
	-webkit-transform: translateY(-8px);
	transform: translateY(-8px);
}

.hint--top:hover:after {
	-webkit-transform: translateX(-50%) translateY(-8px);
	transform: translateX(-50%) translateY(-8px);
}

.hint--bottom:before {
	margin-top: -13px;
}

.hint--bottom:before,
.hint--bottom:after {
	top: 100%;
	left: 50%;
}

.hint--bottom:before {
	left: calc(50% - 7px);
}

.hint--bottom:after {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.hint--bottom:hover:before {
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
}

.hint--bottom:hover:after {
	-webkit-transform: translateX(-50%) translateY(8px);
	transform: translateX(-50%) translateY(8px);
}

.hint--right:before {
	margin-left: -13px;
	margin-bottom: -7px;
}

.hint--right:after {
	margin-bottom: -14px;
}

.hint--right:before,
.hint--right:after {
	left: 100%;
	bottom: 50%;
}

.hint--right:hover:before {
	-webkit-transform: translateX(8px);
	transform: translateX(8px);
}

.hint--right:hover:after {
	-webkit-transform: translateX(8px);
	transform: translateX(8px);
}

.hint--left:before {
	margin-right: -13px;
	margin-bottom: -7px;
}

.hint--left:after {
	margin-bottom: -14px;
}

.hint--left:before,
.hint--left:after {
	right: 100%;
	bottom: 50%;
}

.hint--left:hover:before {
	-webkit-transform: translateX(-8px);
	transform: translateX(-8px);
}

.hint--left:hover:after {
	-webkit-transform: translateX(-8px);
	transform: translateX(-8px);
}

.hint--top-left:before {
	margin-bottom: -13px;
}

.hint--top-left:before,
.hint--top-left:after {
	bottom: 100%;
	left: 50%;
}

.hint--top-left:before {
	left: calc(50% - 7px);
}

.hint--top-left:after {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.hint--top-left:after {
	margin-left: 14px;
}

.hint--top-left:hover:before {
	-webkit-transform: translateY(-8px);
	transform: translateY(-8px);
}

.hint--top-left:hover:after {
	-webkit-transform: translateX(-100%) translateY(-8px);
	transform: translateX(-100%) translateY(-8px);
}

.hint--top-right:before {
	margin-bottom: -13px;
}

.hint--top-right:before,
.hint--top-right:after {
	bottom: 100%;
	left: 50%;
}

.hint--top-right:before {
	left: calc(50% - 7px);
}

.hint--top-right:after {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.hint--top-right:after {
	margin-left: -14px;
}

.hint--top-right:hover:before {
	-webkit-transform: translateY(-8px);
	transform: translateY(-8px);
}

.hint--top-right:hover:after {
	-webkit-transform: translateY(-8px);
	transform: translateY(-8px);
}

.hint--bottom-left:before {
	margin-top: -13px;
}

.hint--bottom-left:before,
.hint--bottom-left:after {
	top: 100%;
	left: 50%;
}

.hint--bottom-left:before {
	left: calc(50% - 7px);
}

.hint--bottom-left:after {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.hint--bottom-left:after {
	margin-left: 14px;
}

.hint--bottom-left:hover:before {
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
}

.hint--bottom-left:hover:after {
	-webkit-transform: translateX(-100%) translateY(8px);
	transform: translateX(-100%) translateY(8px);
}

.hint--bottom-right:before {
	margin-top: -13px;
}

.hint--bottom-right:before,
.hint--bottom-right:after {
	top: 100%;
	left: 50%;
}

.hint--bottom-right:before {
	left: calc(50% - 7px);
}

.hint--bottom-right:after {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.hint--bottom-right:after {
	margin-left: -14px;
}

.hint--bottom-right:hover:before {
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
}

.hint--bottom-right:hover:after {
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
}

[class*="hint--"] {
}

[class*="hint--"]:after {
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

.hint--white {
	--hint-background: #fff;
	--hint-text: #000000;
}

.hint--primary {
	--hint-background: var(--global-palette-highlight);
	--hint-text: #fff;
}

.hint--rounded:after {
	border-radius: 4px;
}

.hint--no-animate:before,
.hint--no-animate:after {
	-webkit-transition-duration: 0ms;
	transition-duration: 0ms;
}

.hint--bounce:before,
.hint--bounce:after {
	-webkit-transition: opacity 0.3s ease, visibility 0.3s ease,
		-webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: opacity 0.3s ease, visibility 0.3s ease,
		-webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: opacity 0.3s ease, visibility 0.3s ease,
		transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: opacity 0.3s ease, visibility 0.3s ease,
		transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24),
		-webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
}

/* Sticky Scroll-Bar */

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
    opacity: 0.6;
}
.sticky-container .elementor-widget-wrap,
.simple-scroll .elementor-widget-wrap,
.sticky-container .row,
.cms-sticky-container > .elementor-container {
	flex-wrap: nowrap;
	overflow: hidden;
	position: relative;
}
.simple-scroll .elementor-widget-wrap {
	overflow: auto;
}
.sticky-container .elementor-widget-wrap::-webkit-scrollbar,
.simple-scroll .elementor-widget-wrap::-webkit-scrollbar,
.sticky-container .row::-webkit-scrollbar,
.cms-sticky-container > .elementor-container::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	background-color: rgba(0, 0, 0, 0.1);
}
.sticky-container .elementor-widget-wrap::-webkit-scrollbar-thumb,
.simple-scroll .elementor-widget-wrap::-webkit-scrollbar-thumb,
.sticky-container .row::-webkit-scrollbar-thumb,
.cms-sticky-container > .elementor-container::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.3);
}
.sticky-container .elementor-widget-wrap > div,
.simple-scroll .elementor-widget-wrap > div,
.sticky-container .row .column-item,
.cms-sticky-container > .elementor-container > .elementor-column {
	flex-shrink: 0;
}

/* Contact Form */
.contact-form .wpcf7-form input[type="email"],
.contact-form .wpcf7-form input[type="text"],
.contact-form .wpcf7-form textarea {
	width: 100%;
}

/* Stretched Section */
.full_width_section.elementor-section-full_width {
	left: 0 !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Mail-Chimp alert Box */
.mc4wp-form {
	position: relative;
	.mc4wp-response {
		position: absolute;
		z-index: 3;
		@media screen and (max-width: 1024px) {
			position: relative;
		}
		.mc4wp-alert {
			position: relative;
			display: inline-block;
			vertical-align: top;
			margin: 15px 0 0 0;
			padding: 9px 45px 10px 10px;
			background-color: #ffffff;
			color: #111111;
			box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
			&.mc4wp-success {
				background-color: rgb(212 239 212);
			}
			&.mc4wp-success,
			a {
				color: #008000;
			}
			&.mc4wp-error {
				background-color: #ffdada;
			}
			&.mc4wp-error,
			a {
				color: #ff0000;
			}
			a:hover {
				color: inherit;
			}
		}
		p {
			margin: 0;
		}
		.close-btn {
			width: 1em;
			height: 1em;
			position: absolute;
			top: 4px;
			bottom: auto;
			right: 8px;
			left: auto;
			font-size: 20px;
			cursor: pointer;
			text-align: center;
			color: #000;

		}
	}
}

/* Product Extended Description */
.woocommerce-tabs {
	.panel {
		#extended-description {
			.extended-wrapper {
				float: left;
				width: 100%;
				ul {
					margin: 0;
					padding-inline-start: 20px;
				}
				.columns {
					p:empty {
						margin: 0;
					}
				}
				@media screen and (min-width: 1025px) {
					.img-details {
						margin: 0 -10px;
						overflow: hidden;
						.columns {
							float: left;
							padding: 0 10px;
						}
						.col-2 {
							width: 16.66666667%;
						}
						.col-3 {
							width: 25%;
						}
						.col-4 {
							width: 33.33%;
						}
						.col-6 {
							width: 50%;
						}
						.col-7 {
							width: 58.33333333%;
						}
						.col-5 {
							width: 41.66666667%;
						}
						.col-8 {
							width: 66.66666667%;
						}
						.col-9 {
							width: 75%;
						}
						.col-10 {
							width: 83.33333333%;
						}
					}
				}
				@media screen and (max-width: 1024px) {
					.img-details {
						.columns {
							margin: 0 0 30px 0;
							&:last-child {
								margin: 0;
							}
						}
					}
				}
			}
		}
	}
}

#bt-scroll-up.sticky-go-up,
.base-color-palette-fixed-switcher {
	transition: all 700ms ease;
}

@media only screen and (min-width: 768px) {
	#bt-scroll-up.sticky-go-up,
	.base-color-palette-fixed-switcher.sticky-go-up {
		transform: translateY(-60px) !important;
	}
	.base-color-palette-fixed-switcher.tmcore-go-up {
		transform: translateY(-145px) !important;
		transition: all 400ms ease !important;
	}
}

#exit-popup.popup-drawer {
	.exit-product {
		max-height: 365px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.code-discount .code-only{
		font-size: 16px;
		font-weight: 500;
		color: var(--global-palette3);
		text-align: center;
	}
}

#askquestion-popup.popup-drawer,
#share-popup.popup-drawer {
	.drawer-header {
		justify-content: start;
	}
	#copyButton .copied {
		display: none;
	}

	.elementor-editor-active & {
		display: none !important;
	}
}


#askquestion-popup.popup-drawer,
#share-popup.popup-drawer,
#exit-popup.popup-drawer,
#welcome-popup.popup-drawer {
	width: 100%;
	height: 100%;
	top: 0;
	align-items: center;
	.drawer-inner {
		height: auto;
		padding: 0 15px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: var(--global-palette9);
		color: var(--global-palette5);
		padding: 0;
		border-radius: 6px;
		box-shadow: 0 4px 40px rgba(0, 0, 0, 0.12);
		backface-visibility: hidden;
		position: relative;
		max-height: 100%;
		overflow: auto;
		max-width: max-content;
		.drawer-toggle {
			position: absolute;
			right: 10px;
			top: 10px;
			cursor: pointer;
			text-align: center;
			color: var(--global-palette3);
			z-index: 2000;
			padding: 0.15em 0.15em;
			@media only screen and (max-width: 1024px) {
				top: 5px;
			}
		}
		.drawer-header {
			min-height: unset;
		}
		.drawer-content {
			padding: 0;
			max-height: 90vh;
			width: 100%;
			overflow: auto;
			-ms-overflow-style: none;
			scrollbar-width: none;
			.elementor-container {
				@media only screen and (max-width: 480px) {
					max-width: 100%;
				}
			}
		} 
		.model-dismiss {
			display: flex;
			align-items: center;
			justify-content: center;
			input {
				width: auto;
				height: auto;
				margin: 5px;
			}
			span {
				cursor: pointer;
				font-size: 16px;
			}
		}
		@media only screen and (max-width: 480px) {
			max-width: 90%;		
		}
	}
	@media screen and (min-width: 768px) {
		// .drawer-inner {
		// 	/* overflow: inherit; */
		// }
		.drawer-content {
			overflow: inherit;
			max-height: unset;
		}
		.newsletter-scrollbar {
			max-height: 100vh;
			flex-wrap: nowrap;
			overflow-x: hidden;
			overflow-y: auto;
			position: relative;
			scrollbar-width: none;
		}
	}
	.welcome_newsletter {
		text-align: center;
		input[type="email"] {
			padding-left: 15px;
			margin-right: 10px;
			@media screen and (max-width: 767px) {
				width: 100%;
				max-width: 100%;
				margin: 0 0 10px 0;
			}
		}
		input[type="submit"] {
			@media screen and (max-width: 767px) {
				width: 100%;
			}
		}
	}
	.welcome_popup2 { 
		.welcome_newsletter {
			input[type="email"] {
				width: 100%;
				margin: 0 0 10px 0;
			}
			input[type="submit"] {
				width: 100%;
			}
		}
	}
}
#welcome-popup.popup-drawer .drawer-inner .drawer-content {
	scrollbar-width: auto;
	position: relative;
}
#cookie-popup.popup-drawer {
	width: auto;
	height: auto;
	top: 0;
	align-items: center;
	z-index: 99999;

	&.active {
		right: auto;
		left: auto;
		top: auto;
		bottom: auto;
	}

	.drawer-inner {
		background: var(--global-palette9);
		.drawer-content {
			padding: 20px;
			@media only screen and (max-width: 767px) {
				padding: 15px;
			}
			.popup-container {
				h6{
					color: var(--global-palette3);
				}
				p {
					margin: 0 0 10px 0;
					color:var(--global-palette4);
					a {
						color: var(--global-palette1);
						&:hover {
							color: var(--global-palette2);
						}
					}
				}
				p.popup-title{
					color: var(--global-palette3);
				}
			}
		}

		&.banner_top,
		&.banner_bottom {
			max-width: 100%;
			width: 100%;
			height: max-content;
			box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.09);

			.drawer-content {
				display: flex;
				justify-content: space-between;
				align-items: center;

				@media only screen and (max-width: 1366px) {
					display: grid;
				}

				.drawer-toggle {
					height: max-content;
					width: max-content;
				}
			}
		}

		&.banner_bottom {
			bottom: 0;
			top: auto;
		}

		&.banner_left,
		&.banner_right {
			max-width: unset;
			width: 300px;
		}

		&.banner_left {
			right: auto;
			left: 0;
		}

		&.float_left,
		&.float_right {
			max-width: unset;
			width: 300px;
			position: fixed;
			bottom: 30px;
			right: 60px;
			left: auto;
			top: auto;
			width: 315px;
			border-radius: 8px;

			@media only screen and (max-width: 540px) {
				width: 300px;
				right: 10px;
			}
		}

		&.float_left {
			right: auto;
			left: 0;
			bottom: 30px;
			left: 60px;
			right: auto;
			top: auto;

			@media only screen and (max-width: 540px) {
				left: 10px;
			}
		}

		.popup-container {
			@media only screen and (max-width: 540px) {
				.wp-block-heading {
					padding-top: 5px !important;
				}
			}
		}
	}

	&:not(.active) {
		.drawer-inner {
			&.banner_left {
				transform: translateX(-100%);
			}
			&.float_left {
				transform: translateX(-100%);
			}
			&.banner_top {
				transform: translate(0, -100%);
			}
			&.banner_bottom {
				transform: translate(0, 100vh);
			}
		}
	}
}


	.tmc-notification {
		opacity: 0;
		visibility: hidden;
		position: fixed;
		bottom: 30px;
		left: 30px;
		width: auto;
		min-width: 280px;
		max-width: 100%;
		z-index: 1010;
		height: auto;
		background-color: var(--global-palette9);
		padding: 15px;
		// border: 1px solid #eee;
		border-bottom: none;
		overflow: hidden;
		box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.09);
		transform: translateY(30px);
		transition: all 400ms ease;
		border-radius: 4px;

		&.tmcore-active {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		.tmc-time-countdown {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 2px;
			background-color: #000;
			animation-duration: 8000ms;
			animation-name: notification-timer;
			animation-timing-function: linear;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
			box-shadow: 0 5px 30px #0000000d;
			border-radius: 5px;
		}

		.tmc-time-countdown {
			animation-duration: 8000ms;
		}

		&:hover .tmc-time-countdown {
			animation-play-state: paused;
		}

		.close-noti {
			position: absolute;
			width: 20px;
			height: 20px;
			top: 6px;
			right: 6px;
			cursor: pointer;
			border-radius: 50%;
			display: flex;
			justify-content: center;

			svg {
				color: var(--global-palette3);
				transition: all 350ms ease 200ms ease;
				font-size: 18px;
			}
			&:hover {
				background-color: transparent;

				svg {
					color: var(--global-palette1);
				}
			}
		}
	}

@media only screen and (max-width: 479px) {
	.tmc-notification {
		right: 10px; 
		left: 10px;
		padding: 5px;
	}
}

@media only screen and (max-width: 768px) {
	body[class*=showing-popup-drawer-] {
	overflow: auto !important;
	}
}


.noti-wrap {
	align-items: center;
	display: flex;
	margin-right: 20px;
	max-width: 340px;
	gap: 15px;
	@media (max-width: 479px) {
		gap: 10px;
	}

	.noti-details {
		display: flex;
		flex-direction: column;
		min-height: 85px;
	}

	.product-image {
		min-width: 80px;
		img {
			width: 100%;
		}
	}

	.product-title {
		text-decoration: none;
		display: block;

		width: 100%;
		text-align: left;
		color: var(--global-palette3);
		font-size: inherit;
		font-weight: 500;
		margin-bottom: auto;
		padding-block: 5px;
		@media (max-width: 479px) {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}

	.product-title a {
		transition: all 0.4s;
		color: var(--global-palette3);
		text-decoration: none;
	}

	.minutes-ago {
		display: inline-flex;
		margin-bottom: 0;
		margin-right: 15px;
	}

	.text-verify {
		text-transform: capitalize;
		display: inline-flex;
		align-items: center;
		gap: 0 4px;
		color: var(--global-palette5);
		transition: all 0.4s;
		text-decoration: none;
	}

	.noti-title {
		gap: 3px;
		font-size: 90%;
		color: var(--global-palette5);
		display: flex;
	}

	.noti-bottom {
		font-size: 90%;
		display: flex;
		color: var(--global-palette5);
		margin-top: auto;
	}
}


@media (max-width: 1024px) {
	.splide--slide .thumb-wrapper.splide__slider .splide__arrow {
		/*width: max-content!important;*/
	}
	.base-product-gallery-thumbnails .thumb-wrapper.splide__slider {
		max-width: 100% !important;
		padding: 0;
	}
	.base-product-gallery-thumbnails.splide .splide__arrow--prev {
		left: -10px;
	}
	.base-product-gallery-thumbnails.splide .splide__arrow--next {
		right: -10px;
	}
}


.base-svg-icon.base-twitter-x-svg {
	width: .85em;
	height: .85em;
}

.base-svg-icon.base-youtube-alt-svg {
	width: 1.1em;
	height: 1.1em;
}

// Solved Mega Menu - Content compressed
.base-menu-mega-enabled > .sub-menu {
	width: var(--global-calc-content-width);
	display: none;
}
@media only screen and (max-width: 1024px) {
	.base-menu-mega-enabled > .sub-menu {
		width: auto;
	}
}

// Hero section
.entry-hero .entry-header {
	padding: 15px 0;
}

// Menu without mega fixed. Default padding
ul.menu > li.menu-item:not(.base-menu-mega-enabled) ul.sub-menu {
    padding: 20px;
}