/*
Theme Name: Cosmestic
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.vicweb-section__index {
    z-index: 9;
}
/*danh mục sản phẩm*/
.ds-category-footer-content{
	position: relative;
}
/* label sản phẩm */
.archive .wpcbm-badges-bottom-left{
	left: 0px;
	bottom: 10px;
}
.wpcbm-badges-bottom-left{
	left: -15px;
	bottom: 15px;
}
.wpcbm-badge-style-image img{
	max-width: 150px;
}

@media (max-width: 740px) {
	.wpcbm-badges-bottom-left{
		bottom: 10px;
	}
	.wpcbm-badge-style-image img{
		max-width: 100px;
	}
}

/* search box */
.searchform .flex-row.relative{
	z-index: 9996;
}
.header-search-form .live-search-results{
	display: flex;
	flex-direction: column-reverse;
}
.header-search-form .live-search-results.active{
	padding-top: 40px;
	top: 0px!important;
	border-radius: 20px 20px 0 0;
}
.search-suggestions, .product-category-list{
	padding: 0 10px 10px;
}
.custom-search,.search-suggestions,.custom-prod-cat,.custom-prod-brand,.custom-prod-brand_related{
	display: none;
}
.custom-search{
	margin-top: 10px;
}
.autocomplete-suggestions{
	height: 40vh;
}
.search-suggestions > a{
	display: inline-block;
	padding: 2px 10px;
	border-radius: 10px;
	background: #e5fbf1;
	margin-top: 5px;
	margin-right: 10px;
	color: #306E51;
	font-size: 13px;
	line-height: 1.5em;
	width: max-content;
}
.product-category-list.cat{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.product-category-list.cat .product-category-link{
	color: #333;
	display: flex;
	gap: 5px;
	padding: 5px;
	overflow: hidden;
	border-radius: 10px;
	background: #F1F1F5;
}
.product-category-list.cat .product-category-link img{
	aspect-ratio: 1/1;
	object-fit: cover;
	height: 50px;
	background: #fff;
	border-radius: 10px;
}
.product-category-list.cat .product-category-link span{
	font-size: 13px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-category-list.brand{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.product-category-list.brand .product-category-link img{
	aspect-ratio: 1/1;
	object-fit: cover;
	width: 100%;
	height: auto;
}
.custom-prod-brand_related{
	padding: 0px 10px;
}
.custom-prod-brand_related > p{
	margin-bottom: 10px;
}
.custom-prod-brand_related > div > span a{
	display: inline-block;
	padding: 5px 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid #d9d9d9;
	border-radius: 3px;
	color: #333;
}
@media (max-width: 740px) {
	#masthead.active  .medium-logo-left{
		padding: 0;
	}
	#masthead.active #logo,#masthead.active .flex-col.show-for-medium.flex-right{
		display: none;
	}
	#masthead.active .searchform {
		width: 100vw;
		left: 0!important;
	} 
	#masthead.active .searchform{
		padding-right: 10%;
	}
	#masthead.active .searchform > span{
		position: absolute;
		right: 0;
		z-index: 10000;
		width: 10%;
		height: 100%;
		cursor: pointer;
	}
	#masthead.active .searchform > span:before{
		content: '\f00d';
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		top: 50%;
		left: 50%;
		transform: translatey(-50%) translatex(-50%);
		position: absolute;
		color: #000;
		font-size: 20px;
	}
	.product-category-list.cat{
		grid-template-columns: repeat(3, 1fr);
	}
	.product-category-list.cat .product-category-link{
		flex-direction: column;
		align-items: center;
	}
	.search-suggestions > a{
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* BRANDS PAGE */
.taxonomy-alphabetical {
	max-width: 1400px;
	margin: auto;
}

.alphabetical-navigation {
	text-align: center;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
}

.alphabetical-navigation a {
	width: 30px;
	text-decoration: none;
	font-weight: bold;
	color: #000;
}

.terms-list h2 {
	margin-top: 40px;
	font-size: 24px;
	font-weight: bold;
	border-bottom: 2px solid #000;
}

.term-group {
	list-style-type: none;
	margin: 10px 0;
	padding: 0;
	columns: 3; /* Adjust this value based on your layout */
}

.term-group li {
	margin: 5px 0;
}

.term-group li a {
	text-decoration: none;
	color: #333;
}

.term-group li a:hover {
	color: #0073aa;
}

/* CART PAGE */
.cart-related-add{
	transition: all .3s;
	width: 100%;
	border: 1px solid rgb(0, 0, 0);
	border-radius: 38px;
	padding: 5px;
	font-size: 14px;
	text-align: center;
	display: block;
	color: #000;
}
.cart-related-add:hover{
	border-color:#e2485a;
}
@media (max-width: 740px) {
	.cart-collaterals {
		position: fixed;
		bottom: 8%;
		background: #fff;
		z-index: 999;
		padding-top: 10px;
	}
}

/* SIDECART */
.cart-popup-inner--sticky {
  min-height: 90vh!important;
  padding-bottom: 30px;
}
#cart-popup .checkout {
  display: none;
}

/* CHECK OUT PAGE */
.product-name .quantity{
	display: flex;
}
.product-total{
	position: relative;
	align-content: flex-end;
}
.product-total .remove{
	position: absolute;
	top: 15px;
	right: 0;
	color: #000;
	background: #dfdfdf;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-name .ux-quantity.quantity{
	background: #fff;
	width: max-content;
	border-radius: 38px;
	overflow: hidden;
	border: 1px solid rgb(223, 223, 223);
	height: 30px;
	margin-top: 10px;
}
.product-name .ux-quantity.quantity .input-text{
	background: #fff;
	border: none;
	box-shadow: none;
	font-size: 12px;
	width: 20px;
}
.product-name .ux-quantity.quantity .ux-quantity__button{
	background: #fff;
	border: none;
	color: #000;
	font-weight: 700;
	font-size: 16px;
	top: -7px;
}
#payment .payment_methods{
	display: none;
}
@media (max-width: 740px) {
	#order_review_heading {
		margin-bottom: 5px;
	}
	#payment .checkout_coupon,
	.payment_methods-wrapper {
		display: none;
	}
	.checkout .large-5 .shop_table > tbody {
		max-height: 245px;
		overflow: auto;
		display: table-caption;
	}
	.coupon-wrapper > form,
	.payment_methods-wrapper {
		display: block!important;
	}
	.checkout .large-5 {
		position: fixed;
		bottom: 8%;
		background: #fff;
		z-index: 999;
		padding: 0;
	}
	.checkout .col-inner.has-border {
		padding: 5px 15px;
	}
	.checkout .col-inner.has-border.mobile-hidden > span {
		top: -15px;
		left: 50%;
		transform: translatex(-50%);
		border: 1px solid rgb(239, 239, 239);
	}
	.checkout .col-inner.has-border > span {
		position: absolute;
		width: 28px;
		height: 28px;
		cursor: pointer;
		top: 14px;
		left: 57%;
		background: #fff;
		border-radius: 50%;
		text-align: center;
		border: none;
	}
	.checkout .col-inner.has-border > span:before {
		content: '\f078';
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
	}
	.checkout .col-inner.has-border.mobile-hidden > span:before {
		content: '\f077';
	}
	.checkout .col-inner.has-border.mobile-hidden #order_review .ux-free-shipping,
	.checkout .col-inner.has-border.mobile-hidden #order_review .shop_table > thead,
	.checkout .col-inner.has-border.mobile-hidden #order_review .shop_table > tbody,
	.checkout .col-inner.has-border.mobile-hidden #order_review .shop_table > tfoot > tr:not(.order-total) {
		display: none;
	}
	#order_review .ux-free-shipping{
		padding: 0;
	}
	#order_review .ux-free-shipping__notice, #order_review .shop_table .cart_item td {
		font-size: 12px;
	}
}

@media only screen and (max-width: 48em) {
	/*************** ADD MOBILE ONLY CSS HERE  ***************/
	/* 	brands page */
	.alphabetical-navigation {
		flex-wrap: wrap;
		column-gap: 3px;
		row-gap: 10px;
		justify-content: flex-start;
	}
	.term-group{
		columns: 1;
	}
	.term-group li {
		margin: 10px 0;
	}

}