: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);
}

.grid__item {
	& .product-card-wrapper {
		background-color: var(--white);
		padding: 20px;
		margin: 0;
		border-radius: var(--border-radius-l);
		& .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);
				}
			}
		}
		&.bundle_product {
			background-color: var(--Yellow);
		}
	}
	& .quick-add {
		display: flex;
		flex-flow: column;
		margin: 0;
		& .trade_button {
			grid-column: 1 / span 2;
			justify-content: center;
		}
		& > .button {
			flex: 1;
		}
		& .quick-add__submit {
			&: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: var(--Navy);
					&: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='%2312265A' 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);
					padding: 0 0 0 5px;
				}
			}
			&.trade_hidden {
				justify-content: center;
				& .price__regular {
					display: none;
				}
			}
		}
	}
	& .visually-hidden--inline {
		display: none;
	}

	& .in_store_only_product {
		& .card__media {
			background-color: var(--Blue-2);
			border-radius: 20px;
		}
	}
}

.product_tags {
	display: flex;
	flex-wrap: wrap;
	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;
		}
		&.easter_favourites {
			background: var(--Pink);
		}
	}
}

@media (width < 1200px) {
	.grid__item {
		.product-card-wrapper {
			padding: 15px;
		}
	}
}

@media (width < 800px) {
	.grid__item {
		.quick-add {
			gap: 15px;
		}
	}
}