.offcanvas_search {

	.search-results-wrapp {
		position: relative;
		margin: 3.5vw 0 0 0;
		@include transition(width 2s, height 2s, transform 2s, -webkit-transform 2s);

		@include breakpoint(small only) {
			margin-top: 40px;
		}

		.barberry-search-loader {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(255, 255, 255, 1);
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			  -ms-flex-pack: center;
			      justify-content: center;
			-webkit-box-align: center;
			  -ms-flex-align: center;
			      align-items: center;
			z-index: 1002;
			opacity: 0;
			// height: 360px;
			visibility: hidden;
			@include transition(opacity 0.1s ease, visibility 0.1s ease);

			@include loader(24px, 24px);

			&:after {
				border-top-color: #000;
				// z-index: 4;
				position: absolute;
			    // top: calc(50% - 12px);
			    top: 0;
			    left: calc(50% - 12px);
			}			
		}

		.search-results-inner {
			margin: 0;
		    justify-content: center;


	    
			.autocomplete-suggestion {
				cursor: pointer;
				display: inline-block;
				vertical-align: top;
				visibility: visible;
				opacity: 0;
				animation: product-fade-in;
				animation-duration: .6s;
				animation-delay: 0s;
				animation-fill-mode: forwards;
				animation-timing-function: ease-in;
				margin-bottom: 20px;
				

				&:hover {
					// display: none;
					.suggestion-inner-wrapper {
						opacity: 0.7;
					}
					
				}

				@include breakpoint(medium down) {
					margin-bottom: 10px;
				}

				@include breakpoint(600px down) {
					width: 100%;
					margin-bottom: 0;
				}					
				
				.suggestion-inner-wrapper {
					position: relative;
					@include transition(opacity .3s);

					.suggestion-inner {
						position: relative;

						.suggestion-image {
							position: relative;
							overflow: hidden;
							margin-bottom: rem-calc(20);
							img {
								width: 100%;
							}

							@include breakpoint(small only) {
								margin-right: rem-calc(20);
								max-width: 80px;
								display: inline-block;
								margin-bottom: 0;
							}							
						}

						.suggestion-details-wrapper {
							display: flex;
							-webkit-justify-content: space-between;
						    -ms-flex-pack: justify;
						    justify-content: space-between;	

						     @include breakpoint(768px down) {
						     	flex-wrap: wrap;
						     }	

							@include breakpoint(small only) {
								padding-top: rem-calc(10);
								vertical-align: top;
								display: inline-block;
								width: 60%;
							}						     
						     
							h4.suggestion-title {
								font-weight: 300;
								font-size: 18px;
								line-height: 1.2;
								letter-spacing: 0;
								margin-right: 15px;
								@include breakpoint(small only) {
									font-size: 16px;
									margin-right: 0;
								}
								strong {
									font-weight: 600;
									border-bottom: 1px solid rgba(0,0,0,.2);
								}
							}	

						    .price {
						    	max-width: 35%;
						    	text-align: right;
						    	font-size: 18px;
						    	line-height: 1.2;
						    	font-weight: 600;

						    	.amount {
						    		line-height: 1.1;
						    	}

						    	.woocommerce-price-suffix {
						    		display: block;
						    		font-weight: 300;
						    	}

						    	sup {
								    font-size: 60%;
								    font-weight: 400;
								    line-height: 1.6;
								    margin-left: 0.1rem;			    		
						    	}

						    	@include breakpoint(768px down) {
						    		font-size: 16px;
						    		max-width: inherit;
						    		text-align: left;
						    	}

						    	del {
						    		text-align: right;
						    		position: relative;
						    		display: inline;
						    		width: 100%;
						    		text-decoration: none;

						    		.amount {
						    			line-height: 1.4;
						    		}

						    		span {
						    			color: #333;
						    			font-size: 88%;
						    			font-weight: 300;
						    		}

						    		sup {
						    			font-weight: 300;
						    		}

							    	@include breakpoint(medium down) {
							    		text-align: left;
							    		width: 100%;

							    	}				    		

						    		.amount:before {
						    			width: 100%;
										position: absolute;
										content: "";
										right: 0;
										top: 50%;
										// right: 0;
										height: 0px;
										border-bottom: 1px solid #f9423a;
										opacity: 0.7;
										transform: rotate(-15deg);			    			
						    		}
						    	}

						    	ins {
						    		color: #f9423a;
						    		text-decoration: none;
						    		display: block;
						    		line-height: 1;
						    		padding: 0;
						    		width: 100%;
						    		// margin-top: -2px;

						    		@include breakpoint(medium down) {
						    			display: inline;
						    		}
						    	}

						    	@include breakpoint(medium down) {
						    		width: 100%;
						    	}

						    	.woocommerce-Price-currencySymbol {
						    		font-size: 70%;
						    		margin-right: 3px;
						    	}

						    	@include breakpoint(small only) {
							    	// font-size: 16px;
							    	line-height: 1.3;

							    	.woocommerce-Price-currencySymbol {
							    		// font-size: 11px;
							    		margin-right: 2px;
							    	}

							    	sup {
							    		// top: -4px;
									    // font-size: 10px;
									    font-weight: 400;
									    // line-height: 1.5rem;
									    margin-left: 0.05rem;			    		
							    	}				    			    		
						    	}
						    }


						}
					}	
				}

				.suggestion-title {
					
					&.no-found-msg {
						text-align: center;
						cursor: default;
						font-weight: 400;
						font-size: 30px;
						line-height: 1.4;
						@include breakpoint(small only) {
							font-size: 18px;
						}
					}
				}

			}

		    &.no-found-inner {
		    	.autocomplete-suggestion {
		    		width: 100%;
		    	}
		    }			

		    .view-all-results {
				-webkit-box-flex: 1;
				-ms-flex: 1 1 100%;
				flex: 1 1 100%;	
				text-align: center;	
				// padding-bottom: 40px;
				// margin: 20px auto 40px auto; 
				@include breakpoint(small only) {
					// margin: 20px auto;
				} 

				.button {
					cursor: pointer;
					margin-bottom: 0;
					@include transition(opacity .3s);
					@include breakpoint(small only) {
						width: 100%;
					}
					&:hover {
						opacity: 0.5;
					}
				}  	
		    }
		}		
	}

	.search-wrapp .search-loading + .search-results-wrapp .barberry-search-loader {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		-webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
	}
}