:root {
	--light-grey: #F4F5F5;
	--mid-grey: #5A5A5B;
	--baby-pink: #FABDCB;
	--navy: #12265A;
	--green: #D0F277;
	--white: #FFFFFF;
	--border-radius-s: 10px;
	--border-radius-l: 20px;
	--blur: blur(4px);
}

/* REMOVE BEFORE LAUNCH */
.shopify-pc__banner__dialog {
	display: none !important;
}

/* REMOVE BEFORE LAUNCH */
.card__heading a:after {
	content: none !important;
}

.grid__item {
	.product-card-wrapper {
		background-color: var(--white);
		padding: 20px;
		margin: 0;
		border-radius: var(--border-radius-l);
		box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.10);
		
		& .card__content {
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			gap: 20px;
		}
		
		& .card__information {
			display: flex;
			flex-flow: column;
			gap: 20px;
			flex: 1;
			padding: 0;
		}
		
		& .card__heading {
			color: var(--navy);
			font-size: 16px;
			line-height: 1.25;
			letter-spacing: 0.5px;
		}
		
		& .product_rating {
			display: none;
		}
		
		& .product_pack_size {
			display: block;
			font-weight: 400;
			padding-top: 5px;
		}
		
		&.hide_trade_info {
			& .trade_info_container {
				& .trade_box_value {
					filter: var(--blur);
				}
			}
			
			& .product_price_container {
				& .price__regular {
					filter: var(--blur);
				}
			}
		}
	}
	
	.quick-add {
		display: flex;
		flex-flow: column-reverse;
		margin: 0;
		grid-row-start: unset;
		
		& > .button {
			flex: 1;
		}
		
		& .quick-add__submit {
			display: inline-block;
			
			&:disabled {
				background: #D9D9D9;
				opacity: 1;
				
				& span {
					display: none;
				}
			}
		}
	}
	
	.product_buy_container {
		display: flex;
		flex-flow: column;
		justify-content: center;
		gap: 20px;
		
		& .trade_info_container {
			display: flex;
			align-items: center;
			gap: 5px;
			
			&.trade_hidden {
				display: none;
			}
			
			& > div {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 20px;
				border-radius: var(--border-radius-s);
				background: var(--light-grey);
				color: var(--mid-grey)
			}
			
			& .trade_box_label {
				font-weight: 700;
			}
			
		}
		
		& .product_price_container {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			margin: 0;
			
			& .product_inventory {
				font-size: 15px;
				font-weight: 700;
				line-height: 20px;
				letter-spacing: 0.5px;
				
				> span {
					display: flex;
					align-items: center;
					gap: 5px;
					
					&:before {
						content: '';
						display: inline-block;
						height: 10px;
						aspect-ratio: 1 / 1;
						background: center / contain no-repeat;
					}
				}
				
				& .product_in_stock {
					color: #5AC230;
					
					&:before {
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%235AC230' fill-rule='evenodd' d='M8.5.8c.3-.3.8-.4 1.2-.1.3.3.4.8.1 1.1l-6 7.4c-.2.4-.8.4-1.2 0L.2 7a.8.8 0 0 1 0-1.2c.4-.3.9-.3 1.2 0l1.7 1.7L8.5.8Z' clip-rule='evenodd'/%3E%3C/svg%3E");
					}
				}
				
				& .product_not_in_stock {
					color: var(--Red);
					
					&:before {
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23E1251B' d='M0 9c0-.3.1-.6.4-.8l3-3.3L.6 2C.4 1.7.2 1.4.2 1 .2.5.7 0 1.4 0c.5 0 .8.2 1.2.5L5 3.4 7.5.6C7.8.2 8 0 8.7 0s1.1.4 1.1 1c0 .3 0 .6-.3.8l-3 3 3.1 3.3c.2.2.4.5.4.8 0 .6-.5 1.1-1.2 1.1-.6 0-.9-.2-1.2-.5L5 6.5l-2.7 3c-.3.3-.6.5-1.2.5C.6 10 0 9.6 0 9Z'/%3E%3C/svg%3E");
					}
				}
			}
			
			& .price__regular {
				display: inline-block;
				
				& .price-item {
					display: inline-block;
					font-size: 19px;
					font-weight: 700;
					color: var(--navy);
				}
				
				& .product__tax {
					display: inline-block;
					font-size: 14px;
					color: var(--navy);
				}
			}
			
			&.trade_hidden {
				justify-content: center;
				
				& .price__regular {
					display: none;
				}
			}
		}
	}
}

.product_tags {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	
	& .product_tag {
		font-size: 12px;
		font-weight: 700;
		color: var(--navy);
		line-height: 20px;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		padding: 5px 10px;
		border-radius: var(--border-radius-s);
		
		&.best_seller {
			background: var(--green);
		}
		
		&.new_in {
			background: #FFC862
		}
		
		&.perfect_for_halloween {
			background: #FABDCB;
		}
		
		&.free_delivery_over_20 {
			background: #A4E4FF;
		}
	}
}


@media (width < 1200px) {
	#product-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	
	.grid__item {
		.product-card-wrapper {
			padding: 15px;
		}
	}
	
	.category_list_wrapper {
		display: block !important;
		padding-inline: 0;
		
		.category_list {
			position: relative;
			justify-content: flex-start;
			overflow: auto;
			white-space: nowrap;
			flex-wrap: nowrap;
			-ms-overflow-style: none; /* IE and Edge */
			scrollbar-width: none; /* Firefox */
			
			&::-webkit-scrollbar {
				display: none;
			}
			
			&:before {
				content: '';
				position: fixed;
				top: 0;
				left: 0;
				height: 100%;
				width: 80px;
				background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
			}
			
			&:after {
				content: '';
				position: fixed;
				top: 0;
				right: 0;
				height: 100%;
				width: 80px;
				background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
			}
		}
	}
}

@media (width < 800px) {
	#product-grid {
		grid-template-columns: 1fr !important;
	}
	
	.grid__item {
		.product-card-wrapper {
			& .card__content {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: unset !important;
			}
			
			& .card__media {
				grid-row-start: 2;
			}
			
			& .card__information {
				grid-row-start: 1;
				grid-column: 1 / span 2;
				flex-flow: column-reverse;
			}
			
			&.bundle_product,
			&.in_store_only_product {
				& .card__content {
					display: flex;
					flex-flow: column;
				}
				
				& .product_buy_container {
					& .product_price_container {
						flex-flow: row;
					}
				}
			}
		}
		
		.quick-add {
			grid-column: 1 / span 2;
			gap: 15px;
		}
		
		.product_buy_container {
			justify-content: space-between;
			
			& .trade_info_container {
				flex-flow: column;
				align-items: unset;
				
				&.trade_hidden {
					display: flex;
				}
			}
			
			& .product_price_container {
				flex-flow: column;
				align-items: flex-end;
				gap: 15px;
				
				&.trade_hidden {
					& .price__regular {
						display: flex;
					}
				}
			}
		}
	}
}