/*------------------------------------------------------------------------------*/
/* Wishlist Toggle Base
/*------------------------------------------------------------------------------*/

.ProductWishlist .AddToWishlist::before,
.ListProductWishlist .AddToWishlist::before {
	color: var(--border-color-strong);
	content: "\f004";
	font-family: var(--fa-style-family);
	font-size: var(--font-size-xlarge);
	transition-duration: var(--transition-fast);
}

.ProductWishlist .AddToWishlist:hover::before {
	color: var(--color-text-accent);
}

.ProductWishlist .ProductWishlistRemove .AddToWishlist::before {
	color: var(--color-text-accent);
}

.ProductWishlist .AddToWishlist:hover::before {
	color: var(--color-text-accent);
}

.ProductWishlist .ProductWishlistRemove .AddToWishlist::before {
	color: var(--color-text-accent);
}

/*------------------------------------------------------------------------------*/
/* Wishlist Toggle on Product Page
/*------------------------------------------------------------------------------*/

.ProductBuy .ProductWishlist .AddToWishlist {
	background-color: var(--background-color-shade-1);
	border: 0;
	font-size: 0;
	gap: 0;
}

.ProductBuy .ProductWishlist .AddToWishlist:hover {
	background-color: var(--background-color-shade-2);
}

.ProductForms .ProductWishlist {
	bottom: 0;
	position: absolute;
	right: 0;
}

/* .ProductForms .AddToWishlist {
	--button-height: 4.5rem;
	padding: 1rem 0;
} */

.ProductForms .ProductWishlist + .BuyForm .FormSubmit {
	margin-right: calc(60px + 1rem);
}

/*------------------------------------------------------------------------------*/
/* Wishlist Toggle on List Product
/*------------------------------------------------------------------------------*/

.ListProductImage .ProductWishlist .AddToWishlist {
	background-color: transparent;
	box-shadow: none;
	border: 0;
	font-size: 0;
	gap: 0;
	display: flex;
	align-items: flex-end;
}

.ListProductImage .ProductWishlist {
	position: absolute;
    bottom: 15px;
    right: 15px;
	z-index: 2;
}

.ListProductImage .ProductWishlistToggle {
	margin: 0;
}

.ListProductImage .AddToWishlist::before {
	font-size: var(--font-size-large);
}

.ListProductImage {
  	position: relative;
}

.ListProductImage .AddToWishlist::before,
.WishlistProductActions .AddToCart::before,
.WishlistProductActions .AddToWishlist::before,
.ProductForms .AddToWishlist::before {
  	font: normal normal normal 15px/1 FontAwesome;
}

.ListProduct .ProductWishlistToggle,
.ListProductImage .ProductWishlist > button {
  	opacity: 1;
}

.ListProductImage:hover .ProductWishlistToggle,
.ListProductImage:hover .ProductWishlist > button {
  	opacity: 1;
}

.ListProductImage .ProductWishlist button,
.ProductWishlist .AddToWishlist::before {
  	color: #434343 !important;
} 

.ProductWishlist .AddToWishlist:hover::before {
  	color: var(--background-accent-color) !important;
} 

.ProductWishlist .AddToWishlist::before {
	margin-right: 1px;
}

.ListProductImage .ProductWishlistToggle:hover,
.ListProductImage .ProductWishlist > button:hover {
	color: var(--background-accent-color);
}

/*------------------------------------------------------------------------------*/
/* Wishlist Product
/*------------------------------------------------------------------------------*/

.WishlistProducts {
	display: flex;
	flex-direction: column;
}

.WishlistProduct {
	--color-link: var(--color-text);
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: .5rem 0;
}

.WishlistProduct:not(:last-child) {
	border-bottom: 1px solid var(--border-color);
}

.WishlistProduct.IsInCart .AddToCart {
	--button-background-color: var(--background-color-shade-2);
	--button-color: var(--color-text);
	box-shadow: none;
}

.WishlistProduct.IsInCart .AddToCart:hover {
	--button-background-color: var(--background-color-shade-1);
}

.WishlistProduct.RemovedProduct .WishlistProductImage {
	background-color: var(--background-color-shade-1);
}

.WishlistProduct.RemovedProduct .WishlistProductInfo,
.WishlistProduct.RemovedProduct .WishlistProductImage {
	opacity: .5;
	pointer-events: none;
}

.WishlistProductImage {
	align-self: flex-start;
	aspect-ratio: 1 / var(--product-image-ratio);
	background-color: var(--image-background-color);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: 0;
	width: 60px;
	width: min(14%, 60px);
	z-index: 1;
}

.WishlistProductImage img {
	border-radius: var(--border-radius);
	object-fit: contain;
}

.WishlistProductContent {
	align-items: center;
	display: flex;
	flex: 1;
	gap: .5rem 1rem;
}

.WishlistProductName {
	display: block;
	font-weight: bold;
	text-decoration: none;
}

.WishlistProductPrices {
	margin: 0;
	white-space: nowrap;
}

/*------------------------------------------------------------------------------*/
/* Wishlist Product Actions
/*------------------------------------------------------------------------------*/

.WishlistProductActions {
	align-items: center;
	display: flex;
	gap: .5rem;
	margin-left: auto;
}

.WishlistProductActions form {
	margin: 0;
}

.WishlistProductActions button {
	aspect-ratio: 1 / 1;
	gap: 0;
	font-size: 0;
	width: 40px;
	padding: 0;
}

.WishlistProductActions button::before {
	font-size: var(--font-size-regular);
	font-family: var(--fa-style-family);
}

.WishlistProductActions .AddToCart::before {
	content: "\f07a";
}

.WishlistProductActions .AddToWishlist::before {
	content: "\f1f8";
}

.WishlistProduct button.AddToWishlist {
	--button-background-color: var(--background-color-shade-1);
	border: 0;
	box-shadow: none;
}

.WishlistProduct button.AddToWishlist:hover {
	--button-background-color: var(--background-color-shade-2);
}

.WishlistProduct.ProductVariations .WishlistProductInfo::after {
	content: attr(data-has-variations);
}

/*------------------------------------------------------------------------------*/
/* Wishlist Total Items Badge
/*------------------------------------------------------------------------------*/

.IconButton .WishlistTotals {
	align-items: center;
	background-color: #ffdf73;
	border-radius: 20px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	color: black;
	display: flex;
	font-size: 10px;
	justify-content: center;
	min-width: 19px;
	padding: 2px 7px;
	position: absolute;
	right: calc(100% - 50px);
	top: 2px;
	text-align: center;
	transition-duration: var(--transition-fast);
	z-index: 2;
}

.IconButton .WishlistTotals[data-wishlist-total-items]::after {
	content: attr(data-wishlist-total-items);
}

.IconButton .WishlistTotals[data-wishlist-total-items="0"],
.IconButton .WishlistTotals[data-wishlist-total-items=""] {
	opacity: 0;
	transform: scale(0);
	transform-origin: center;
}

/*------------------------------------------------------------------------------*/
/* Wishlist Misc
/*------------------------------------------------------------------------------*/

.WishlistNotLogged {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 2rem;
}

.ProductForms {
	position: relative;
}

.DrawerHeader > :first-child {
	margin-right: auto;
}

button {
	gap: .5rem;
}

.ProductWishlistToggle {
	margin-bottom: 0;
}

.WishlistProducts {
 	margin-bottom: 20px;
  	padding-bottom: 20px;
  	border-bottom: 1px solid #eee; 
	display: flex;
	flex-direction: column;
}

.IconButton {
  	align-items: center;	
  	border-radius: 6px;
  	display: flex;
  	text-decoration: none;
  	padding: 0;
	position: relative;
}

.IconButton:hover {
  	background-color: var(--white-10);
  	color: var(--color-light);
}

.IconButton .fa {
  	font-size: 18px;
  	margin-right: 0;
  	padding: 7px;
  	border-radius: 3px
}

/* @media screen and (min-width: 1025px) {
  	.IconButton::after {
    	content: "Toivelista";
    	margin-left: 10px;
    	text-transform: uppercase;
    	font-weight: bold;
  	}
} */

.CustomerNav + .FlexItem {
  	border-right: 1px solid #eee;
}

.ProductWishlistRemove {
  	opacity: 1 !important;
}

.Drawer[data-drawer-side="right"],
.Drawer[data-drawer-side="left"]{
  	width: 450px;
}

@media screen and (max-width: 600px) {
  	.Drawer[data-drawer-side="right"],
  	.Drawer[data-drawer-side="left"] {
    	width: calc(100% - 50px);
  	}
}

.ProductForms {
  	align-items: flex-end;
  	display: flex;
  	gap: 10px;
  	position: relative;
}

.ProductForms .ProductWishlist {
  	position: relative;
  	margin-bottom: 12px;
}

/* .ProductForms .ProductWishlist .AddToWishlist {
  	align-items: center;
  	display: flex;
  	height: 50px;
  	background: #eee;
  	border-radius: 6px;
  	justify-content: center;
  	opacity: .5;
} */

.ProductForms .ProductWishlistRemove .AddToWishlist {
  	opacity: 1;
}

.ProductForms .ProductWishlist:hover .AddToWishlist {
  	opacity: 1;
}

.ProductForms .ProductWishlist .AddToWishlist span {
  	/* display: none; */
	color: black;
}

.ProductForms .BuyForm {
  	flex: 1;
  	max-width: calc(100% - 80px);
}

.ProductForms .ProductWishlistToggle .FormItem {
  	margin-top: 0;
}

.ProductForms .ProductWishlist form {
  	margin-bottom: 0;
}

.ProductForms .SubmitButton {
  	width: 100%;
	background: var(--background-accent-color);
    padding: 6px 12px;
	color: #000;
}

.ProductForms .ProductWishlist .AddToWishlist::before,
.ProductForms .ProductWishlist .AddToWishlist:hover::before {
  	color: #000 !important;
} 

.WishlistProductActions button {
  	align-items: center;
  	display: flex;
  	justify-content: center;
}

.WishlistProductImage img {
  	max-height: 60px;
}