/******************************/
/******** GENERAL *************/
/******************************/

/* New Styles */
.btn-outline-secondary {
	color: var(--baf-color-purple);
	border-color: #dedcdc;
	border-radius: 50px;
	padding: 5px 15px;
}

.btn-outline-secondary:hover {
	background: #f3f3f3;
	color: var(--baf-color-purple);
	border-color: #dedcdc;
}

.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle {
	background: #f3f3f3;
	color: var(--baf-color-purple);
	border-color: #dedcdc;
}

.btn-dark-gray {
	background: #484b4d;
	color: #fff;
}

.btn-dark-gray:hover {
	background: #545759;
	color: #fff;
}

.btn-brand-purple {
	background: var(--baf-color-brand-purple);
	color: #fff;
	padding: 8px 20px;
  border-radius: 20px;   
	border: 1px solid var(--baf-color-brand-purple);
}

.btn-brand-purple:hover {
	color: #fff;
	background: transparent;
	color: var(--baf-color-brand-purple);
}

.br-50 {
	border-radius: 50px;
}

/******************************/
/**** PRODUCT CATEGORY TOP ****/
/******************************/

/* New Styles */
.product-category-title {
	font-size: 28px;
}

.product-category-header .slick-prev, .product-category-header .slick-next {
	top: 40%;
}

.product-category-header .baf-product-carousel .slick-slide a {
	margin: 0 5px;
}

.trending-searches {
	position: relative;
	overflow-x: scroll;
	display: flex;
	-webkit-overflow-scrolling: auto;
	scrollbar-color: var(--baf-color-extra-light-purple) #484b4d;
  scrollbar-width: thin;
	padding-bottom: 3px;
}

.trending-searches:after {
	content: '\f000';
	font-family: BafBootstrap;
  font-weight: 900;
	position: sticky;
	right: 0;
	top: 3px;
	height: 36px;
	font-size: 12px;
	padding-left: 20px;
	display: flex;
	align-items: center;
	color: #fff;
	background: linear-gradient(270deg, var(--baf-color-dark-purple) 50%, rgba(41, 41, 48, 0));
}

.trending-searches a {
	flex: 0 0 auto;
	font-weight: 400;
	font-size: 14px;
}

.top-filters {
	border-bottom: 1px solid #dedcdc;
}

/******************************/
/******* PRODUCT LISTING ******/
/******************************/

/* New Styles */
.product-item .btn.text-secondary {
	font-size: 14px;
}

.product-item .btn.text-secondary .material-symbols-outlined {
	font-size: 19px;
}

.product-item .badge-danger {
	position: relative;
	top: -1px;
	font-weight: 500;
	margin-left: 2px !important;
	padding: 3px 6px !important;
}

/* Add to Exisiting Styles Section */
.rating-box {
	font-size: 15px;
}

.rating-box .rating {
	font-size: 15px;
	color: var(--baf-color-dark-purple);
}

.swatch-circle {
	border-radius: 50%;
}

.slick-product-images .slick-prev, .slick-product-images .slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 50%;
	display: block;
	width: 32px;
	height: 32px;
	padding: 0;
	transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: var(--baf-color-light-purple);
	z-index: 1;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.slick-product-images .slick-prev i, .slick-product-images .slick-next i {
	font-size: 24px;
}

.slick-product-images .slick-prev {
	left: 10px;
}

.slick-product-images .slick-next {
	right: 10px;
}

.slick-product-images .slick-dots {
	width: auto;
	height: auto;
	bottom: 10px;
	left: 10px;
	line-height: 0;
}

.slick-product-images .slick-dots li, .slick-product-images .slick-dots li button, .slick-dots li button:before {
	width: 7px;
	height: 7px;
	padding: 0;
}

.slick-product-images .slick-dots li {
	margin: 0 5px 0 0;
	vertical-align: middle;
}

.slick-product-images .slick-dots li button:before {
	content: '';
	border: 1px solid #000;
  border-radius: 7px;
	opacity: 1;
}

.slick-product-images .slick-dots li.slick-active button:before {
	background: #000;
}

/******************************/
/*********** FILTERS **********/
/******************************/

/* Add to Exisiting Styles Section */
#filters {
	background-color: #fff;
}

#filters .icon {
	border: 1px solid #dedcdc;
	padding: 4px 9px;
	border-radius: 50%;
	top: 13px;
	right: 8px;
}

#filters .acordion-title {
	border-top: 1px solid #dedcdc;
	margin: 0;
	padding-top: 17px;
	padding-left: 10px;
	padding-bottom: 17px;
}

#filters .acordion-title:hover .icon {
	background: #f3f3f3;
}
 
#filters .acordion-content {
	padding-top: 0;
	padding-bottom: 17px;
}

#filters ul li.subtitle {
	color: var(--baf-color-brand-purple);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
}

#filters input[type="radio"] + div {
	border: 1px solid #8d9aa9;
	border-radius: 50%;
	height: 28px;
	width: 28px;
}

#filters input[type="checkbox"] + div {
	border: 1px solid #8d9aa9;
	border-radius: 7px;
	height: 1.4em;
	width: 1.4em;
}

#filters .check-label {
	padding-left: 7px;
	position: relative;
	top: 0px;
}

#form-filters .mcui-checkbox .check-mark, #form-filters .mcui-radio .check-mark {
	position: relative;
	right: 0;
}

#form-filters svg {
	vertical-align: top;
}

#filters .form-check-input {
	right: 100%;
	left: 20px;
	margin-top: 0;
}

/******************************/
/********* PAGINATION *********/
/******************************/

/* Add to Exisiting Styles Section */
.page-item {
	margin: 0 3px;
}

.page-link {
	border-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
  height: 38px;
	border-radius: 50%;
}

.page-link:hover {
	background: transparent;
}

.page-item:first-child .page-link {
	border-top-left-radius: 50%;
	border-bottom-left-radius: 50%;
}

.page-item:last-child .page-link {
	border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.page-link-active {
	border-color: #dee2e6;
}

@media (max-width: 768px) {
	#filters label {
		margin-left: 0em;
	}

	#filters input[type=checkbox], #filters input[type=radio] {
		width: 28px;
		height: 28px;
	}

	.top-filters .dropdown-toggle::after {
		font-size: 17px;
		margin-top: 8px;
	}
}

/* New Styles */
@media (min-width: 576px) {
	.product-category-header .baf-product-carousel .slick-slide a {
		margin: 0 15px;
	}
}

/* Add to Exisiting Styles Section */
@media (min-width: 768px) {
	#filters .icon {
		padding: 4px 8px;
	}

	#filters input[type="radio"] + div {
		height: 22px;
		width: 22px;
	}

	.trending-searches:after {
		content: '';
	}
}

@media (min-width: 992px) {
	/* New Styles */
	.product-category {
		background: #484b4d;
		padding: 15px;
		border-radius: 10px;
	}
	
	.product-category:hover {
		background: #545759;
	}

	.product-category-title {
		font-size: 2.5rem;
	}

	.product-category-header .slick-prev, .product-category-header .slick-next {
		top: 50%;
	}

	.product-item {
		border: 1px solid #DEDCDC;
		border-radius: 10px;
		height: 100%;
		padding: 10px 10px 12px 10px;
	}

	/* Add to Exisiting Styles Section */
	.slick-product-images:hover .slick-prev, .slick-product-images:hover .slick-next {
		opacity: 1;
		pointer-events: all;
	}

	.slick-product-images .slick-dots {
		display: none !important;
	}

	#filters {
		position: sticky !important;
		top: 0;
		left: 0;
		height: 100vh;
		padding-bottom: 100px;
	}
}

/* Add to Exisiting Styles Section */
@media (max-width: 992px) {
	#filters {
		min-height: 100%;
		height: 100%;
		top: 0;
	}
}