section[data-name="elf_shop-listing"] .shop-card {
    display: block;
    text-decoration: block; /* Remove underline */
    color: inherit; /* Maintain default text color */
    position: relative; /* Needed for overlay */
}


section[data-name="elf_shop-listing"] .shop-card .image-container {
    position: relative;
    overflow: hidden; /* Ensure overlays are contained */
	height: 350px;
	width: 460px;
    border-radius: 20px;
}

section[data-name="elf_shop-listing"] .shop-card .gradient-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0); /* Initially transparent */
    transition: background-color 0.3s ease; /* Smooth transition effect */
    z-index: 1; /* Place overlay above background content */
}

section[data-name="elf_shop-listing"] .shop-card .hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0); /* Initially transparent */
    z-index: 2;
    transition: background 0.3s ease; /* Smooth transition */
}

section[data-name="elf_shop-listing"] .shop-card:hover .hover-overlay {
    background: rgba(255, 255, 255, 0.4); /* White overlay with 40% opacity */
}

section[data-name="elf_shop-listing"] .shop-card .image-container img {
    display: block;
    width: 100%;
    height: 350px;
    z-index: 0;
}

section[data-name="elf_shop-listing"] .shop-card .shop-details h4 {
    font-size: 1.5rem; /* Adjust as needed */
    transition: color 0.3s ease; /* Smooth color transition */
	line-height: 1.1;
	color: #000;
}

section[data-name="elf_shop-listing"] .shop-card:hover .shop-details h4 {
    color: #FE661B; /* Change color on hover */
}


section[data-name="elf_shop-listing"] .listSearch{
	display: flex;
  	flex-wrap: wrap;
  	align-items: stretch;
  	margin: 15px auto;
  	width: 1475px;
	min-height: 240px;
  	justify-content: center;
}

section[data-name="elf_shop-listing"] .shop-card {
    position: relative; /* Ensure pseudo-element is positioned relative to this */
    overflow: hidden; /* Prevent overlay from spilling out */
}

section[data-name="elf_shop-listing"] .shop-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0); /* Initially transparent */
    transition: background-color 0.3s ease; /* Smooth transition effect */
    z-index: 1; /* Place overlay above background content */
}

section[data-name="elf_shop-listing"] .shop-card:hover::before {
    background-color: rgba(255, 255, 255, 0.4); /* White overlay at 40% opacity */
}

section[data-name="elf_shop-listing"] .fade-in-item {
    opacity: 0; /* Start invisible */
    transform: translateY(20px); /* Start slightly shifted down */
    animation: fadeIn 0.6s ease forwards; /* Animation with easing and forward state */
}

/* Keyframes for the fade-in effect */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Center the form itself */
section[data-name="elf_shop-listing"] form.formSearch {
    display: flex;
    justify-content: center; /* Center elements horizontally */
    align-items: center; /* Center elements vertically */
    gap: 20px; /* Add spacing between child elements */
    background-color: #F5F5DD; /* Light background color */
    padding: 20px; /* Add padding around the form */
    border-radius: 10px; /* Rounded corners */
    width: auto; /* Automatically size based on content */
    max-width: 720px; /* Optional: Limit the maximum width */
    margin: -70px auto 20px;
}

/* Styling for form blocks */
section[data-name="elf_shop-listing"] form.formSearch .block {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-align block content */
    text-align: center;
}

/* Vertical divider styling */
section[data-name="elf_shop-listing"] form.formSearch .vertical-divider {
    width: 1.5px;
  	height: 35px;
  	background-color: #FF661A;
  	margin: 0 20px;
}

/* Label styling */
section[data-name="elf_shop-listing"] form.formSearch .title {
    font-weight: bold;
    font-size: 18px;
    color: #333; /* Text color */
	margin-bottom: 0px;
}

/* Text input styling */
section[data-name="elf_shop-listing"] form.formSearch .form-control {
    border: none;
    background: none;
    border-bottom: 2px solid #f4a261; /* Orange underline */
    font-size: 16px;
    padding: 5px 10px;
    color: #333;
    text-align: center;
}

/* Input placeholder styling */
section[data-name="elf_shop-listing"] form.formSearch .form-control::placeholder {
    color: #999;
}

/* Input focus styling */
section[data-name="elf_shop-listing"] form.formSearch .form-control:focus {
    outline: none;
    border-bottom-color: #e76f51; /* Darker orange on focus */
}

section[data-name="elf_shop-listing"] .image-container {
  position: relative;
  overflow: hidden;
}

section[data-name="elf_shop-listing"] a:hover {
	color: #FE732E;
}

section[data-name="elf_shop-listing"] a:focus {
  color: #FE6D25;
}

section[data-name="elf_shop-listing"] .shop-details {
  z-index: 20;
  position: relative;
  bottom: 20px;
  left: 0px;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

section[data-name="elf_shop-listing"] .image-container::before {
  content: '';
  position: absolute;
  top: 85px;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}

section[data-name="elf_shop-listing"] .list-item-image {
    width: 463px;
    height: 394px;
    overflow: hidden;
    border-radius: 40px;
}

section[data-name="elf_shop-listing"] .list-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

section[data-name="elf_shop-listing"] .label-category {
  margin-left: 25px;
  font-size: 16px;
}


section[data-name="elf_shop-listing"] .shop-card .label {
  position: absolute;
  background-color: #fe661b;
  padding: 10px 20px; /* Add horizontal padding for better spacing */
  border-radius: 0px 20px 0px 20px;
  color: #fff;
  max-width: calc(100% - 20px); /* Ensure it doesn't exceed the parent container */
  white-space: nowrap; /* Prevent text wrapping */
  text-align: center;
  margin-bottom: -46px;
  margin-left: auto; /* Automatically adjust based on content */
  margin-right: 0px; /* Add a gap between the right edge */
  right: 0;
  z-index: 2;
  width: 145px;
}


section[data-name="elf_shop-listing"] .shop-card:hover .label {
  background-color: #000;
  color: #fff;
}

section[data-name="elf_shop-listing"] .floor {
  position: absolute;
  color: #000;
  background-color: #fe661b;
  top: 0;
  right: 0;
  padding: 10px;
  border-radius: 0px 20px 0px 20px;
  color: #fff;
}

section[data-name="elf_shop-listing"] h4 {
  margin-top: -80px;
  margin-left: 25px;
  font-size: 28px;
  width: 380px;
}

section[data-name="elf_shop-listing"] p {
  margin-left: 25px;
}

section[data-name="elf_shop-listing"] .full-size-thumbnail img {
    width: 100%;      /* Make the image take up the full width of its container */
    height: auto;     /* Maintain aspect ratio */
    display: block;   /* Remove any spacing under the image */
}


section[data-name="elf_shop-listing"]  .list-inline-item.mt-10.py-10 {
  margin-bottom: 30px !important;
}

section[data-name="elf_shop-listing"] .form-control {
  	text-align: center;
	color: #000;
  	border-bottom: solid 1px #ff661a !important;
  	border: none;
  	border-radius: 0px !important;
  	background-color: transparent !important;
  	width: 120px !important;
  	font-size: 18px !important;
}

section[data-name="elf_shop-listing"] select {
  border: none;
  background-color: transparent;
  margin-right: 20px;
  width: 95%;
}


section[data-name="elf_shop-listing"] ul.grid,
section[data-name="elf_shop-listing"] ul.grid > li{
    padding: 0px;
    margin: 0px;
}
section[data-name="elf_shop-listing"] ul.grid > li{
    list-style: none;
    display: inline-block;
    vertical-align: top;
}

section[data-name="elf_shop-listing"] ul.ul-checkbox.grid > li{
	padding: 5px;
}

section[data-name="elf_shop-listing"] .listSearch .list-inline-item{
	display: inline-block;
}

section[data-name="elf_shop-listing"]  .wrapper_pagination{
	display: block;
	clear:both;
	width: 100%;
	margin-top: 40px;
}

section[data-name="elf_shop-listing"] ul.page-pagination,
section[data-name="elf_shop-listing"] ul.page-pagination > li{
	display: flex !important;
  	gap: 30px;
  	justify-content: center;
}

section[data-name="elf_shop-listing"]  ul.page-pagination > li.page-item.active{
	font-weight: normal;
  	background-color: #FE661B;
  	width: 30px;
  	display: inline-block;
  	height: 30px;
  	text-align: center;
  	border-radius: 50px;
}

section[data-name="elf_shop-listing"] .page-link {
  	color: #000;
	border: none;
}

section[data-name="elf_shop-listing"] .page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #FE6A21;
  border: solid 2px #FE6A21;
  margin-bottom: -8px;
  border-radius: 50px;
}

section[data-name="elf_shop-listing"] .fa {
  font-weight: 900;
  font-size: 13px;
}

section[data-name="elf_shop-listing"] .page-link:hover {
  color: #fff !important;
  background-color: #FE732E;
  border: solid 2px #FE732E;
  border-radius: 50px;
  height: 38px;
}



/* General styling for screen sizes below 1400px */
@media screen and (max-width: 1400px) {
  section[data-name="elf_shop-listing"] .listSearch {
   		 width: 1149px;
    	padding: 0px;
  }
	

    section[data-name="elf_shop-listing"] form.formSearch {
        max-width: 60%; /* Reduce the width of the form */
        padding: 15px; /* Adjust padding */
    }

    section[data-name="elf_shop-listing"] .attachment-full.size-full.wp-post-image {
        height: 300px;
    	width: 355px;
    }

    section[data-name="elf_shop-listing"] h4 {
        font-size: 22px;
   	 	margin-left: 24px;
		width: 300px;
		margin-top: -95px;
    }
	section[data-name="elf_shop-listing"] .label-category {
  		margin-left: 24px;
  	font-size: 14px;
 	 margin-top: -5px;
	}

    section[data-name="elf_shop-listing"] .label {
        margin-left: 0; /* Remove large margin */
        width: 80px; /* Adjust label width */
    }

    section[data-name="elf_shop-listing"] .form-control {
        width: 100%; /* Make input fields responsive */
        font-size: 14px; /* Adjust font size */
    }
}

@media screen and (max-width: 1388px) {
section[data-name="elf_shop-listing"] .fl-col-content.fl-node-content 
    padding-right: 0px !important;
    padding-left: 0px!important;
  }
section[data-name="elf_shop-listing"] .fl-col-content.fl-node-content {
  padding-right: 0px !important;
  padding-left: 0px !important;
}
}

@media screen and (max-width: 1265px) {
section[data-name="elf_shop-listing"] .listSearch {
    width: 1260px;
    margin-left: -138px;
}
section[data-name="elf_shop-listing"] .label {
    margin-left: 0;
    width: 145px;
}
section[data-name="elf_shop-listing"] form.formSearch {
    max-width: 66%;

}
}



/* Specific styling for screen sizes below 480px */
@media screen and (max-width: 480px) {
    section[data-name="elf_shop-listing"] .listSearch {
        flex-direction: column; /* Stack items vertically */
        padding: 0px; /* Reduce padding */
		flex-wrap: inherit;
		width: auto;
    	margin-left: 0px;
    }
	
	
	section[data-name="elf_shop-listing"] .image-container::before {
  		top: 61px;
}

    section[data-name="elf_shop-listing"] form.formSearch {
        flex-direction: column;
    	gap: 15px;
    	max-width: 100%;
    	z-index: 1;
    	position: relative;
    	width: 60%;
    }
	
	section[data-name="elf_shop-listing"] select {
  		width: 60%;
		margin-right: 0px;
	}
	
	section[data-name="elf_shop-listing"] form.formSearch .form-control {
  		font-size: 16px !important;
	}
	
	section[data-name="elf_shop-listing"] .shop-details {
  		z-index: 20;
  		position: relative;
  		bottom: 75px;
	}
	
	section[data-name="elf_shop-listing"] .list-inline-item.mt-10.py-10 {
  		margin-bottom: -50px !important;
  		margin-right: 0px;
	}
	
	section[data-name="elf_shop-listing"] .page-item.active .page-link {
  		margin-bottom: -3px;
	}

    section[data-name="elf_shop-listing"] .vertical-divider {
        display: none; /* Hide vertical divider on small screens */
    }

    section[data-name="elf_shop-listing"] .attachment-full.size-full.wp-post-image {
        width: 100%; /* Make images responsive */
    }
	
    section[data-name="elf_shop-listing"] h4 {
        font-size: 18px; /* Smaller font size for headings */
        margin-top: 0; /* Adjust margins */
    }

    section[data-name="elf_shop-listing"] .label {
        width: auto; /* Make labels auto-width */
        margin-left: 0; /* Remove margin */
        font-size: 12px; /* Adjust label font size */
    }

    section[data-name="elf_shop-listing"] .form-control {
        font-size: 12px; /* Smaller font size for input fields */
        padding: 5px; /* Reduce padding */
    }

    section[data-name="elf_shop-listing"] ul.page-pagination {
        flex-wrap: wrap; /* Allow pagination to wrap */
        gap: 10px; /* Reduce gap between items */
    }

    section[data-name="elf_shop-listing"] .page-item.active .page-link {
        width: auto; /* Adjust active page size */
        padding: 5px 10px; /* Adjust padding */
    }
}