/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

#wc_cdp_product_bundle_modal img {
	width: 100%;
	height: auto;
}

.wc_cdp_modal_title,
.wc_cdp_modal_description,
.wc_cdp_modal_product_title,
.wc_cdp_modal_product_already_on_cart,
.wc_cdp_bundle_amount,
.wc_cdp_bundle_action_row {
	text-align: center;
}

.wc_cdp_modal_product_title {
	font-size: 1rem;
	margin-top: 0.5rem;
}

.wc_cdp_modal_product_separator {
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
}

.wc_cdp_bundle_amount {
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.wc_cdp_modal_products_row {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin-left: -15px;
		margin-right: -15px;
	}

	.wc_cdp_modal_product {
		flex: 0 0 25%;
		max-width: 25%;
		align-self: stretch;
		padding-left: 15px;
		padding-right: 15px;
	}

	.wc_cdp_modal_product_separator {
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
		padding-right: 15px;
		padding-left: 15px;
	}
}