/* ================================================
Component: CTA Banner
Path: components/flexible/cta_banner/style.css
================================================ */
:is(body, .is-preview) {
	.cta-banner__bg {
		background-color: var(--color-brown, #685040);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		border-radius: var(--radius-md);
		overflow: hidden;
	}
	.cta-banner__bg::before {
		content: '';
		position: absolute;
		inset: 0;
		background: var(--color-brown, #685040);
		opacity: 0.9;
		mix-blend-mode: multiply;
	}
	.cta-banner__content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--gap-md);
		padding: var(--gap-2xl) 31px;
	}
	.outer_cta_banner {
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--gap-md);
		max-width: 227px;
	}
	.shop-cta-banner .outer_cta_banner {max-width: 100%;}
	.cta-banner__logo img {
		width: auto;
		object-fit: contain;
		max-height: 103px;
	}
	.cta-banner__title {
		font-family: var(--font-primary);
		font-size: 32px;
		font-weight: var(--font-weight-medium);
		line-height: 42px;
		color: var(--color-white);
		margin: 0;
	}
	.cta-banner__description {
		font-family: var(--font-display);
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-extrabold);
		line-height: 26px;
		color: var(--color-white);
		margin: 0;
	}
	.recipies-listing-btn-style .button-group {
		padding-top:10px;
	}
	.recipies-listing-btn-style .button-group .btn {
		border: 2px solid var(--color-white);
		padding: 12px 18px;
		gap: 8px;
		background-color: transparent;
		color: var(--color-white);
		font-size: 14px;
		letter-spacing: 0.7px;
	}
	.recipies-listing-btn-style .button-group .btn:hover {
		background-color: var(--color-white);
		color: var(--color-denim);
	}
	.recipies-listing-btn-style .button-group .btn:after {
		content:'';
		background-repeat: no-repeat;
		background-position: center;
		background-size: 12px;
		width: 12.389px;
		height: 11.283px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M11.9978 0.472708C11.997 0.46535 11.9956 0.457992 11.9946 0.450635C11.9931 0.441175 11.9921 0.431365 11.99 0.421905C11.9882 0.413146 11.9857 0.405088 11.9836 0.396679C11.9815 0.38862 11.9797 0.380212 11.9772 0.372153C11.9747 0.363745 11.9716 0.355686 11.9684 0.347628C11.9655 0.33957 11.9627 0.331511 11.9595 0.323803C11.9563 0.316095 11.9524 0.308738 11.9489 0.30138C11.945 0.293322 11.9415 0.285263 11.9372 0.277205C11.9333 0.269847 11.9287 0.26319 11.9245 0.256183C11.9199 0.248475 11.9156 0.240767 11.9103 0.233409C11.905 0.225351 11.899 0.217993 11.8933 0.210636C11.8887 0.20468 11.8845 0.198373 11.8795 0.192417C11.8572 0.165439 11.8324 0.140913 11.8055 0.119191C11.7995 0.114286 11.7932 0.110081 11.7868 0.105176C11.7793 0.0995704 11.7719 0.0936142 11.7638 0.0883588C11.756 0.0834537 11.7482 0.078899 11.7404 0.0743442C11.7333 0.0701399 11.7266 0.0659355 11.7192 0.0620815C11.711 0.0578771 11.7029 0.0543735 11.6947 0.0505195C11.6873 0.0470159 11.6799 0.0431619 11.6721 0.0400086C11.6639 0.0368553 11.6558 0.0340524 11.6477 0.0312495C11.6395 0.0284466 11.6314 0.0252933 11.6229 0.0228408C11.6147 0.0203882 11.6062 0.0186364 11.5981 0.0165342C11.5896 0.014432 11.5811 0.0119795 11.5726 0.0102277C11.5631 0.00847586 11.5532 0.0070744 11.5436 0.00567295C11.5362 0.00462186 11.5287 0.0032204 11.5213 0.00251968C11.5039 0.000767858 11.4862 -0.000283233 11.4686 6.71303e-05H7.25653C6.96379 -0.000983961 6.72591 0.23446 6.72591 0.524562C6.72591 0.814663 6.96379 1.05011 7.25688 1.05011H10.1875L5.23565 5.95134C5.02822 6.15666 5.02822 6.48915 5.23565 6.69447C5.33937 6.79712 5.4753 6.84828 5.61123 6.84828C5.74716 6.84828 5.88308 6.79712 5.9868 6.69447L10.9383 1.79323V4.69389C10.9383 4.98399 11.1762 5.21943 11.4693 5.21943C11.7624 5.21943 12.0002 4.98399 12.0002 4.69389V0.524912C12.0002 0.507394 11.9992 0.490226 11.9978 0.472708Z' fill='white'/%3E%3Cpath d='M9.85837 5.92544C9.56527 5.92544 9.3274 6.16088 9.3274 6.45099V10.9479H1.06194V2.76691H5.60529C5.89839 2.76691 6.13626 2.53147 6.13626 2.24137C6.13626 1.95126 5.89839 1.71582 5.60529 1.71582H0.530971C0.237875 1.71582 0 1.95126 0 2.24137V11.4734C0 11.7636 0.237875 11.999 0.530971 11.999H9.85837C10.1515 11.999 10.3893 11.7636 10.3893 11.4734V6.45099C10.3893 6.16088 10.1515 5.92544 9.85837 5.92544Z' fill='white'/%3E%3C/svg%3E");
		transition: background-image var(--transition-slow);
	}
	.recipies-listing-btn-style .button-group .btn:hover:after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M11.9978 0.472708C11.997 0.46535 11.9956 0.457992 11.9946 0.450635C11.9931 0.441175 11.9921 0.431365 11.99 0.421905C11.9882 0.413146 11.9857 0.405088 11.9836 0.396679C11.9815 0.38862 11.9797 0.380212 11.9772 0.372153C11.9747 0.363745 11.9716 0.355686 11.9684 0.347628C11.9655 0.33957 11.9627 0.331511 11.9595 0.323803C11.9563 0.316095 11.9524 0.308738 11.9489 0.30138C11.945 0.293322 11.9415 0.285263 11.9372 0.277205C11.9333 0.269847 11.9287 0.26319 11.9245 0.256183C11.9199 0.248475 11.9156 0.240767 11.9103 0.233409C11.905 0.225351 11.899 0.217993 11.8933 0.210636C11.8887 0.20468 11.8845 0.198373 11.8795 0.192417C11.8572 0.165439 11.8324 0.140913 11.8055 0.119191C11.7995 0.114286 11.7932 0.110081 11.7868 0.105176C11.7793 0.0995704 11.7719 0.0936142 11.7638 0.0883588C11.756 0.0834537 11.7482 0.078899 11.7404 0.0743442C11.7333 0.0701399 11.7266 0.0659355 11.7192 0.0620815C11.711 0.0578771 11.7029 0.0543735 11.6947 0.0505195C11.6873 0.0470159 11.6799 0.0431619 11.6721 0.0400086C11.6639 0.0368553 11.6558 0.0340524 11.6477 0.0312495C11.6395 0.0284466 11.6314 0.0252933 11.6229 0.0228408C11.6147 0.0203882 11.6062 0.0186364 11.5981 0.0165342C11.5896 0.014432 11.5811 0.0119795 11.5726 0.0102277C11.5631 0.00847586 11.5532 0.0070744 11.5436 0.00567295C11.5362 0.00462186 11.5287 0.0032204 11.5213 0.00251968C11.5039 0.000767858 11.4862 -0.000283233 11.4686 6.71303e-05H7.25653C6.96379 -0.000983961 6.72591 0.23446 6.72591 0.524562C6.72591 0.814663 6.96379 1.05011 7.25688 1.05011H10.1875L5.23565 5.95134C5.02822 6.15666 5.02822 6.48915 5.23565 6.69447C5.33937 6.79712 5.4753 6.84828 5.61123 6.84828C5.74716 6.84828 5.88308 6.79712 5.9868 6.69447L10.9383 1.79323V4.69389C10.9383 4.98399 11.1762 5.21943 11.4693 5.21943C11.7624 5.21943 12.0002 4.98399 12.0002 4.69389V0.524912C12.0002 0.507394 11.9992 0.490226 11.9978 0.472708Z' fill='%233C4559'/%3E%3Cpath d='M9.85837 5.92544C9.56527 5.92544 9.3274 6.16088 9.3274 6.45099V10.9479H1.06194V2.76691H5.60529C5.89839 2.76691 6.13626 2.53147 6.13626 2.24137C6.13626 1.95126 5.89839 1.71582 5.60529 1.71582H0.530971C0.237875 1.71582 0 1.95126 0 2.24137V11.4734C0 11.7636 0.237875 11.999 0.530971 11.999H9.85837C10.1515 11.999 10.3893 11.7636 10.3893 11.4734V6.45099C10.3893 6.16088 10.1515 5.92544 9.85837 5.92544Z' fill='%233C4559'/%3E%3C/svg%3E");
	}
	.shop-cta-banner .cta-banner__content {
		padding: 40px 24px 60px;
	}
	.shop-cta-banner .button-group {
		padding-top:20px;
	}
	.shop-cta-banner .button-group .btn-secondary {
		color: var(--color-earth);
	}
	.shop-cta-banner .button-group .btn-secondary:hover {
		color: var(--color-denim);
	}
	.shop-cta-banner .cta-banner__bg::before {
		background: #968A8C;
		opacity:1
	}
	.single-recipe .cta-banner__title {
		line-height: normal;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		font-size: 30px;
		font-weight: 500;
	}
	.single-recipe .outer_cta_banner {
		max-width: 100%;
	}
	.single-recipe .cta-banner__description {        
		font-family: var(--font-primary);
		font-weight: var(--font-weight-medium);
		line-height: 30px;
	}
	.single-recipe .cta-banner__content .button-group {padding-top:20px;}
	.single-recipe section {margin:0 -14px;}
	@media (min-width: 768px) {
		.cta-banner__title {font-size: 36px;line-height: normal;letter-spacing: 0.36px;}
		.single-recipe .cta-banner__title {text-transform: unset;font-weight: 450;font-size: 36px;letter-spacing: 0.36px;}
		.cta-banner__description {font-size: 28px;line-height: 38px;font-weight: var(--font-weight-medium);font-family: var(--font-primary);}
		.outer_cta_banner {max-width: 772px;}
		.single-recipe .outer_cta_banner {max-width: 900px;}
		.shop-cta-banner .outer_cta_banner {max-width: 1000px;}
		.single-recipe .cta-banner__logo {display:none;}
	}
	@media (min-width: 1024px) {
		.cta-banner__content {padding: 50px 20px;}
		.shop-cta-banner .cta-banner__content,
		.single-recipe .cta-banner__content {padding: 60px 20px;}
		.cta-banner__title {font-size: var(--font-size-3xl);line-height: 1.44;}
		.single-recipe .cta-banner__title {font-size: var(--font-size-3xl);}
		.cta-banner__description {font-size: 32px;line-height: 48px;}
		.single-recipe .cta-banner__description {line-height: 48px;}
		.recipies-listing-btn-style .button-group {padding-top:20px;}
	}
	@media(max-width:767px) {
		.cta-banner__content {padding: 50px 15px;}
		.shop-cta-banner .cta-banner__bg {border-radius: 0;margin: 0 -14px;}
		.shop-cta-banner {padding-bottom:0;}
		.shop-cta-banner .cta-banner__title {font-size: var(--font-size-3xl);line-height: normal;letter-spacing: 0.36px;}
		.shop-cta-banner .cta-banner__description {font-family: var(--font-primary);font-size: 32px;font-weight: var(--font-weight-medium);line-height: 48px;}
	}
}