@charset "UTF-8";

/*
Theme Name: Pacific Foods Twenty Twenty-One child theme
Author: Think33
Author URI: https://think33.ca/
Description: This is a child theme of Twenty Twenty-One made for Pacific Foods.
Template: twentytwentyone
Requires at least: 5.8
Requires PHP: 7.4
Version: 1.5.3
Text Domain: pacificfoods
*/


:root {

	/* colours */
	--beetroot-purple: #553d72;
	--creamy-cauliflower: #f5f1e6;
	--butternut-yellow: #ffd658;
	/* --beef-broth-sunset: #fe4220; */ /* too light to pass WCAG contrast requirements */
	--beef-broth-sunset: #e9310c;
	--organic-eggshell: #f7c995;
	--ultramarine-green: #31771e;
	--celery-green: #d5f04d;

	--global--color-background: var(--creamy-cauliflower);
	--footer--color-link: var(--ultramarine-green);
	--footer--color-link-hover: var(--beef-broth-sunset);


	/* fonts */
	--font-headings: 'Poppins', sans-serif;
	--font-base: 'Poppins', sans-serif;
	--global--font-size-base: 1rem;
	--footer--font-size: 1rem;

	--pacific-font-size-heading-extra: 3.3125rem;
	--pacific-font-size-heading: 3rem;
	--pacific-font-size-extralarge: 1.6875rem;
	--pacific-font-size-large: 1.375rem;
	--pacific-font-size-medium: 1rem;

	/* Headings */
	--heading--font-size-h6: var(--pacific-font-size-medium);
	--heading--font-size-h5: var(--pacific-font-size-medium);
	--heading--font-size-h4: var(--pacific-font-size-large);
	--heading--font-size-h3: var(--pacific-font-size-large);
	--heading--font-size-h2: var(--pacific-font-size-heading);
	--heading--font-size-h1: var(--pacific-font-size-heading-extra);
	--heading--line-height-h2: 1.0833;
	--heading--letter-spacing-h6: var(--global--letter-spacing);
	--heading--letter-spacing-h5: var(--global--letter-spacing);
	--heading--font-weight: bold;
	--heading--font-weight-h2: 800;


	/* Main navigation */
	--branding--logo--max-width: 110px;
	--primary-nav--font-size: 1.125rem;
	--primary-nav--font-weight: 700;
	--primary-nav--font-size-sub-menu: 1.125rem;
	--primary-nav--color-link: var(--ultramarine-green);
	--primary-nav--color-link-hover: var(--beef-broth-sunset);
	--primary-nav--color-text: var(--ultramarine-green);
	--primary-nav--padding: calc(0.75 * var(--global--spacing-unit));


	/* buttons */
	--button--border-width: 0;
	--button--border-radius: 6px;
	/*--button--font-size: 16px;*/
	--button--font-size: 1.1875rem;
	--button--font-weight: 800;
	--button--padding-vertical: 7px;
	--button--padding-horizontal: 30px;


}


/**
 * Root Media Query Variables
 */
:root {
	--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
	--responsive--aligndefault-width: 100%;
	--responsive--alignwide-width: 100%;
	--responsive--alignfull-width: 100%;
	--responsive--alignright-margin: 0;
	--responsive--alignleft-margin: 0;
}

@media screen and (max-width: 1024px) {
	:root {
		--pacific-font-size-heading: 40px;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--pacific-font-size-heading: 32px;
	}
}

@media screen and (max-width: 600px) {
	:root {
		--pacific-font-size-heading: 27px;
	}
}

@media only screen and (min-width: 482px) {

	:root {
		--responsive--aligndefault-width: 100%;
		--responsive--alignwide-width: 100%;
		--responsive--alignright-margin: 0;
		--responsive--alignleft-margin: 0;
	}
}
@media only screen and (min-width: 822px) {

	:root {
		--responsive--aligndefault-width: 100%;
		--responsive--alignwide-width: 100%;
	}
}


body {
}

.entry-content h1 {
	font-size: 53px;
	font-weight: bold;
}

	@media screen and (max-width: 1024px) {
		.entry-content h1 { font-size: 40px; }
	}

.entry-content h2 {
	font-size: var(--pacific-font-size-heading);
	font-weight: 800;
}

	@media screen and (max-width: 1024px) {
		.entry-content h2 { font-size: 36px; }
	}

.entry-content h3 {
	font-size: var(--pacific-font-size-large);
	font-weight: bold;
	/* text-transform: uppercase; */
}

	.entry-content h3 a { color: inherit; }

.entry-content h4 {
	font-size: var(--pacific-font-size-large);
	font-weight: bold;
}

.entry-content h5 {
	font-size: var(--pacific-font-size-medium);
	font-weight: bold;
	text-transform: uppercase;
}

.entry-content h6 {
	font-size: var(--pacific-font-size-medium);
	font-weight: bold;
}

.button {
	transition: all 0.2s ease-in-out;
	display: inline-block;
	text-align: center;
}

 
article > .entry-content > h1,
article > .entry-content > h2,
article > .entry-content > h3 { color: var(--ultramarine-green); }

article > .entry-content > p,
article > .entry-content > h1,
article > .entry-content > h2,
article > .entry-content > h3,
article > .entry-content > h4,
article > .entry-content > h5,
article > .entry-content > h6 { 
	padding-left: 36px;
	padding-right: 36px;

	max-width: 80% !important;
	margin-left: auto;
	margin-right: auto;
}

	@media screen and (max-width: 768px) {
		article > .entry-content > p,
		article > .entry-content > h1,
		article > .entry-content > h2,
		article > .entry-content > h3,
		article > .entry-content > h4,
		article > .entry-content > h5,
		article > .entry-content > h6 { 
			max-width: 90% !important;
		}
	}

	article > .entry-content > p:first-child,
	article > .entry-content > h1:first-child,
	article > .entry-content > h2:first-child,
	article > .entry-content > h3:first-child,
	article > .entry-content > h4:first-child,
	article > .entry-content > h5:first-child,
	article > .entry-content > h6:first-child { 
		margin-top: 60px;
	}

	article > .entry-content > p:last-child,
	article > .entry-content > h1:last-child,
	article > .entry-content > h2:last-child,
	article > .entry-content > h3:last-child,
	article > .entry-content > h4:last-child,
	article > .entry-content > h5:last-child,
	article > .entry-content > h6:last-child { 
		margin-bottom: 60px;
	}

article > .entry-content > h3 + p { margin-top: -1.5em; }
@media screen and (max-width: 480px) {
	article > .entry-content > h3 + p { margin-top: -0.75em; }
}

.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background-color: var(--ultramarine-green); }
.has-background-white .site a.button:focus:not(.wp-block-button__link):not(.wp-block-file__button) { 
	background-color: var(--beef-broth-sunset) !important; 
	color: var(--creamy-cauliflower) !important;
}
.has-background-white .site a:active:not(.wp-block-button__link):not(.wp-block-file__button) { background-color: var(--beef-broth-sunset); }



	html .button:hover {
		background-color: var(--beef-broth-sunset) !important;
		color:  var(--creamy-cauliflower) !important;
	}

.has-beetroot-purple-color { color: var(--beetroot-purple) !important; }
.has-creamy-cauliflower-color { color: var(--creamy-cauliflower) !important; }
.has-butternut-yellow-color { color: var(--butternut-yellow) !important; }
.has-organic-eggshell-color { color: var(--organic-eggshell) !important; }
.has-ultramarine-green-color { color: var(--ultramarine-green) !important; }
.has-celery-green-color { color: var(--celery-green) !important; }

.has-beetroot-purple-background-color { background-color: var(--beetroot-purple); }
.has-creamy-cauliflower-background-color { background-color: var(--creamy-cauliflower); }
.has-butternut-yellow-background-color { background-color: var(--butternut-yellow); }
.has-organic-eggshell-background-color { background-color: var(--organic-eggshell); }
.has-ultramarine-green-background-color { background-color: var(--ultramarine-green); }
.has-celery-green-background-color { background-color: var(--celery-green); }

.bg_color_beetroot-purple,
.text_color_organic-eggshell {
    background-color: var(--beetroot-purple);
    color: var(--organic-eggshell);
}

	.bg_color_beetroot-purple .button,
	.text_color_organic-eggshell .button {
	    color: var(--beetroot-purple) !important;
	    background-color: var(--organic-eggshell) !important;
	}

	.bg_color_beetroot-purple .punctuation,
	.text_color_organic-eggshell .punctuation { color: var(--ultramarine-green); }

.bg_color_creamy-cauliflower {
    background-color: var(--creamy-cauliflower);
    color: var(--ultramarine-green);
}

	.bg_color_creamy-cauliflower .button {
	    color: var(--creamy-cauliflower) !important;
	    background-color: var(--ultramarine-green) !important;
	}

	.bg_color_creamy-cauliflower .punctuation { color: var(--beetroot-purple); }

.bg_color_butternut-yellow,
.text_color_ultramarine-green {
    background-color: var(--butternut-yellow);
    color: var(--ultramarine-green);
}

	.bg_color_butternut-yellow .button,
	.text_color_ultramarine-green .button {
	    color: var(--butternut-yellow) !important;
	    background-color: var(--ultramarine-green) !important;
	}

	.bg_color_butternut-yellow .punctuation,
	.text_color_ultramarine-green .punctuation { color: var(--beef-broth-sunset); }

.bg_color_beef-broth-sunset {
    background-color: var(--beef-broth-sunset);
    color: var(--ultramarine-green);
}

	.bg_color_beef-broth-sunset .button {
	    color: var(--beef-broth-sunset) !important;
	    background-color: var(--ultramarine-green) !important;
	}

	.bg_color_beef-broth-sunset .punctuation { color: var(--creamy-cauliflower); }

.bg_color_organic-eggshell {
    background-color: var(--organic-eggshell);
    color: var(--ultramarine-green);
}

	.bg_color_organic-eggshell .button {
	    color: var(--organic-eggshell) !important;
	    background-color: var(--ultramarine-green) !important;
	}

	.bg_color_organic-eggshell .punctuation { color: var(--beef-broth-sunset); }

.bg_color_ultramarine-green,
.text_color_celery-green {
    background-color: var(--ultramarine-green);
    color: var(--celery-green);
}

	.bg_color_ultramarine-green .button,
	.text_color_celery-green .button {
	    color: var(--ultramarine-green) !important;
	    background-color: var(--celery-green) !important;
	}

	.bg_color_ultramarine-green .punctuation,
	.text_color_celery-green .punctuation { color: var(--butternut-yellow); }

.bg_color_celery-green {
    background-color: var(--celery-green);
    color: var(--ultramarine-green);
}

	.bg_color_celery-green .button {
	    color: var(--celery-green) !important;
	    background-color: var(--ultramarine-green) !important;
	}

	.bg_color_celery-green .punctuation { color: var(--ultramarine-green); }


/* Main nav */
.site-header { padding: 16px 0; }
#masthead { position: relative; }
#masthead > .custom-logo-link { display: none; }
#primary-menu-list { align-items: center; }
#primary-menu-list li:nth-child(1) { order: 3; }
#primary-menu-list li:nth-child(3) { order: 1; }
#primary-menu-list li:nth-child(4) { order: 2; }
#primary-menu-list li:nth-child(5) { order: 4; }
#primary-menu-list li:nth-child(6) { order: 5; }
#primary-menu-list li.site-logo { padding: 0 20px; }
#primary-menu-list li.site-logo .custom-logo-link { padding: 0; }
#primary-menu-list li.lang-item { display: none; }

.primary-navigation { 
	top: 0;
	margin: 0 auto; 
}
.primary-navigation a { 
	transition: color 0.2s ease-in-out; 
	border-radius: var(--button--border-radius);
}
.primary-navigation a:link,
.primary-navigation a:visited {
	color: var(--primary-nav--color-link);
}
.primary-navigation a:hover {
	color: var(--primary-nav--color-link-hover);
	text-decoration: underline;
	text-decoration-style: dotted;
}
.primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle { 
	z-index: 2;
	margin-left: -25px;
}
.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus img, 
.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus img {
	width: 16px;
	height: 16px;
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu { 
	border: none; 
	padding-top: 21px;
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu::before,
.primary-navigation > div > .menu-wrapper > li > .sub-menu::after { content: none; }
.primary-navigation .sub-menu .menu-item > a { 
	padding: calc(0.75 * var(--primary-nav--padding)) var(--primary-nav--padding); 
	border-radius: 0;
}
.primary-navigation .sub-menu .menu-item > a:focus,
.primary-navigation .sub-menu .menu-item > a:active {
	background-color: var(--ultramarine-green);
	color: var(--creamy-cauliflower);
}

@media screen and (min-width: 481px) and (max-width: 640px) {
	.primary-navigation {
		margin: 0 20px;
		width: calc(100% - 40px);
	}
	.primary-navigation > div > .menu-wrapper {
		display: grid;
		grid-template-columns: 1fr 150px 1fr;
		grid-template-rows: 51px 51px;
	}
	.primary-navigation > div > .menu-wrapper > li > .sub-menu { 
		padding-top: 0; 
		padding-bottom: 10px;
	}
	#primary-menu-list li:nth-child(1) {
		grid-row: 1 / 3;
		grid-column: 2;
	}
	#primary-menu-list li:nth-child(2n+1) {
		justify-content: right;
	}
}


#social-navigation,
.top-right-menu-container {
	flex-basis: 180px;
}

#social-navigation { order: -1; }
#social-navigation .wp-block-social-links { gap: 0 !important; }
#social-navigation .wp-block-social-links .wp-social-link.wp-social-link.wp-social-link { margin: 0; }
#social-navigation .wp-block-social-link:hover { transform: none; }
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor { border-radius: var(--button--border-radius); }
.wp-block-social-links.is-style-logos-only .wp-social-link svg { width: 1em; height: 1em; }
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg { transition: all 0.2s ease-in-out; }
.wp-block-social-links .wp-block-social-link:hover .wp-block-social-link-anchor svg {
	color: var(--beef-broth-sunset);
	fill: var(--beef-broth-sunset);
}
.wp-block-social-links.is-style-logos-only .wp-social-link { padding: 4px; }
.wp-block-social-links.is-style-logos-only .wp-social-link a { padding: 0.25em; }


.top-right-menu-container { 
	padding-right: 10px; 
	text-align: right;
}
	.top-right-menu-container ul {
		list-style: none;
		font-size: 11px;
		white-space: nowrap;
	}
		.top-right-menu-container ul a {
			text-decoration: none;
			padding: 2px;
			margin-left: 0.25em;
		}
		.top-right-menu-container ul li {
			display: inline;
		}
		.top-right-menu-container ul li:not(:last-child)::after {
			content: '/';
			margin-left: 0.25em;
		}
		.top-right-menu-container ul li.current-lang a {
			background-color: white;
		}

/* Yext search bar */
.js-header-search-toggle {
	background: none !important;
	padding: 0;
	width: 42px;
	height: 42px;
	text-align: right;
}

	.js-header-search-toggle .state-expanded { display: inline; }
	.js-header-search-toggle[aria-expanded="true"] .state-expanded { display: none; }

	.js-header-search-toggle .state-closed { display: none; }
	.js-header-search-toggle[aria-expanded="true"] .state-closed { display: inline; }

		.js-header-search-toggle .search {
			width: 32px;
			height: 32px;
		}

		.js-header-search-toggle .close {
			width: 32px;
			height: 32px;
			padding: 4px;
		}

		.js-header-search-toggle path {
			fill: var(--ultramarine-green);
			transition: fill 0.2s ease-in-out;
		}

			.js-header-search-toggle:hover path { fill: var(--beef-broth-sunset); }

#search-form { display: none; }
@media screen and (min-width: 481px) {
	.js-header-search-toggle[aria-expanded="true"] + #search-form { display: block; }
}

.jsearch-form .yxt-SearchBar-wrapper {
	position: absolute;
	/* top: 100px; */
	top: 90px;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 20px 30px 30px;
	background-color: var(--creamy-cauliflower);
}

	@media screen and (max-width: 1024px) {
		/* .jsearch-form .yxt-SearchBar-wrapper { top: 170px; } */
		.jsearch-form .yxt-SearchBar-wrapper { top: 150px; }
	}

	@media screen and (max-width: 640px) {
		.jsearch-form .yxt-SearchBar-wrapper { top: 180px; }
	}

	.yxt-SearchBar-wrapper button {
		background: none !important;
		padding: 0;
		width: 42px;
		height: 42px;
		justify-content: center;
		align-self: center;
	}

	@media screen and (max-width: 480px) { 
		body.primary-navigation-open #search-form { 
			opacity: 1; 
			pointer-events: auto; 
			transition: opacity 0.15s ease-in-out 0.1s; 
		} 
		#primary-menu-list { padding-top: 60px; }
		#search-form {
			z-index: 2;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			display: block; 
			pointer-events: none;
			opacity: 0;
		}
		body.primary-navigation-open #search-form {
			display: block;
		}
		.jsearch-form .yxt-SearchBar-wrapper {
			top: 15px;
			padding: 0;
		}
	}

.yxt-SearchBar-container {
	border: none !important;
	border-radius: 0 !important;
}

	.js-yext-query.yxt-SearchBar-input {
		border: none;
		background-color: white;
	}

	.yxt-SearchBar-form .component .Icon {
		display: flex;
		color: black;
		transition: color 0.2s ease-in-out;
	}

		.yxt-SearchBar-form .component:hover .Icon {
			color: var(--ultramarine-green);
		}

		.yxt-SearchBar-form .component .Icon--close svg {
			width: 2em;
			height: 2em;
		}




.menu-button-container #primary-mobile-menu {
	margin-left: 5px;
	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.25 * var(--button--padding-horizontal));
	color: #5e6871;
}
.menu-button-container #primary-mobile-menu .dropdown-icon > span { display: none; }
.menu-button-container #primary-mobile-menu .dropdown-icon .svg-icon { margin-left: 0; }


/* style.css | https://demo.badmath.com/think33/pacificfoods/wp-content/themes/twentytwentyone/style.css?ver=1.0 */

.primary-navigation > .primary-menu-container {
		/* top: 0; */
		top: var(--global--admin-bar--height);
}

.primary-navigation-open .menu-button-container {
		top: var(--global--admin-bar--height);
}



@media screen and (max-width: 1024px) {
	#masthead { row-gap: 0; }
	.primary-navigation  { order: 3; }
	#social-navigation { 
		order: 1; 
		flex-basis: 50%;
	}
	.top-right-menu-container { 
		order: 2; 
		flex-basis: 50%;
	}
}
@media screen and (max-width: 480px) {
	#masthead { 
		display: block; 
		height: 76px;
	}
	#masthead > .custom-logo-link { 
		display: block; 
		text-align: center; 
		position: relative;
		z-index: 2;
		margin: 0 4em;
	}
	#masthead > .custom-logo-link > .custom-logo { width: 79px; height: 43px; }
	#social-navigation { display: none; }
	.top-right-menu-container { 
		/* display: none; */
		position: relative;
		padding-right: 0; 
	}
	.top-right-menu-container > *:not(#search-form) { display: none; }
	.menu-button-container {
		right: auto;
		left: 0;
		width: auto !important;
		padding-top: calc(0.75 * var(--global--spacing-vertical));
	}
	#primary-menu-list li { order: unset !important; }
	#primary-menu-list li.site-logo { display: none; }
	#primary-menu-list li.lang-item { 
		display: block; 
		position: absolute;
		text-align: right;
		top: -60px;
		width: auto;
		right: 0;
	}
	#primary-menu-list li.lang-item a {
		font-size: 14px;
		font-weight: 400;
		color: black;
	}
	.primary-navigation { 
		margin: 0; 
		width: 100%; 
		position: absolute !important;
		top: 24.5px !important;
	}
	.primary-navigation-open .primary-navigation {
		position: fixed !important;
		top: 0 !important;
	}
	.primary-navigation > div > .menu-wrapper > li > .sub-menu { padding-top: 0; }
	#primary-menu-list > .menu-item > a { 
		padding: calc(0.75 * var(--primary-nav--padding)) var(--primary-nav--padding);
		margin: calc(0.25 * var(--primary-nav--padding)) calc(-0.5 * var(--primary-nav--padding));
	}
	.primary-navigation .menu-item > a:focus,
	.primary-navigation .menu-item > a:active {
		background-color: var(--ultramarine-green) !important;
		color: var(--creamy-cauliflower) !important;
		border-radius: 0;
	}
}



.site-header { padding: 16px 16px; }
.site-main { 
	padding-top: 0; 
	padding-bottom: 0;
	background-color: white;
}
.site-main > article > .entry-content {
	margin:  0;
}
.site-main > article > .entry-footer { 
	margin:  0;
	padding-bottom: var(--global--spacing-unit); 
}


/* Footer */
aside.widget-area,
.site-footer {
	margin: 0 70px;
	padding: 0;
	color: #192b46;
}
	@media screen and (max-width: 768px) {
		aside.widget-area,
		.site-footer { margin: 0 30px; }
	}
	@media screen and (max-width: 400px) {
		aside.widget-area,
		.site-footer { margin: 0 20px; }
	}
aside.widget-area {
	/*
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
	*/
	display: block;
	padding-top: 36px;
}
aside.widget-area > * {
	margin-top: 0;
	margin-bottom: 0;
}
/* aside.widget-area > *:first-child { grid-row: 1 / 3; } */
aside.widget-area .wp-block-columns .wp-block-column > * {
	margin-top: 0;
	margin-bottom: 0;
}
aside.widget-area h2,
aside.widget-area h4 {
	color: var(--ultramarine-green);
	font-size: 24px;
	font-weight: 800;
}
aside.widget-area .widget_nav_menu { text-align: right; }
aside.widget-area .widget_nav_menu a { text-decoration: none; }
aside.widget-area > .widget_block .wp-block-social-links {
	justify-content: flex-end;
	margin-right: -18px;
}
	@media screen and (max-width: 600px) {
		aside.widget-area .widget_nav_menu { text-align: left; }
		aside.widget-area > .widget_block .wp-block-social-links { 
			justify-content: flex-start; 
			margin-left: -12px;
		}
	}
.site-footer > .site-info {
	padding: 0 0 1em;
	border: none;
	margin: 0;
	justify-content: end;
}
.site-footer > .site-info .site-logo {
	margin: 0;
}
.site-footer > .site-info .site-logo .custom-logo {
	max-height: 24px;
}

/* Home page */
.page-template-default #main .entry-header { display: none; }

	/* March 2023 promo */
	#homePageTriptych { gap: 0; margin-bottom: 0; }
	#homePageTriptych .wp-block-column { margin-bottom: 0 !important; }
	#homePageTriptych .wp-block-column * { height: 100%; }


/* Banner block */
.wp-block-campbellsoupco-block-pfc-banner .text {
	padding: 72px;
}

	.wp-block-campbellsoupco-block-pfc-banner.no-image .text { padding: 72px 250px; }

	@media screen and (max-width: 1024px) {
		.wp-block-campbellsoupco-block-pfc-banner .text { padding: 54px; }
		.wp-block-campbellsoupco-block-pfc-banner.no-image .text { padding: 54px 180px; }
	}

	@media screen and (max-width: 768px) {
		.wp-block-campbellsoupco-block-pfc-banner .text { padding: 36px; }
		.wp-block-campbellsoupco-block-pfc-banner.no-image .text { padding: 36px 100px; }
	}

	@media screen and (max-width: 640px) {
		.wp-block-campbellsoupco-block-pfc-banner.no-image .text { padding: 36px; }
	}

	.wp-block-campbellsoupco-block-pfc-banner .text h1 {
		font-weight: 700;
		font-size: var(--pacific-font-size-large);
		color: var(--beef-broth-sunset);
		margin-bottom: 0.15em;
	}

	.wp-block-campbellsoupco-block-pfc-banner .text > p { 
		font-weight: 800;
		font-size: var(--pacific-font-size-heading-extra);
		line-height: 1; 
	}

		body.home .wp-block-campbellsoupco-block-pfc-banner .text > p { 
			font-size: var(--pacific-font-size-heading); 
			line-height: 1.1;
		}			

		@media screen and (max-width: 1024px) {
			.wp-block-campbellsoupco-block-pfc-banner .text > p { font-size: 2.5em; }
			body.home .wp-block-campbellsoupco-block-pfc-banner .text > p { font-size: 1.625em; }
		}

		@media screen and (max-width: 768px) {
			.wp-block-campbellsoupco-block-pfc-banner .text > p { font-size: 2.0625em; }
			body.home .wp-block-campbellsoupco-block-pfc-banner .text > p { font-size: 1.875em; }
		}

		@media screen and (max-width: 600px) {
			.wp-block-campbellsoupco-block-pfc-banner .text > p { font-size: 1.875em; }
			body.home .wp-block-campbellsoupco-block-pfc-banner .text > p { font-size: 1.6875em; }
		}

    .wp-block-campbellsoupco-block-pfc-banner .text > p span,
    .wp-block-campbellsoupco-block-pfc-banner .text > p .punctuation { color: var(--beef-broth-sunset); }

		.wp-block-campbellsoupco-block-pfc-banner .bg_color_ultramarine-green .text h1 {
			color: var(--celery-green);
		}

		.wp-block-campbellsoupco-block-pfc-banner .bg_color_beetroot-purple .text h1 {
			color: var(--butternut-yellow);
		}

    .wp-block-campbellsoupco-block-pfc-banner .text .content { 
    	margin-top: 1em; 

    	font-size: 24px;
    	font-weight: 600;
    	line-height: 1.4;
    }

	.wp-block-campbellsoupco-block-pfc-banner .button { 
		display: inline-block;
		margin-top: 24px; 
	}

.wp-block-campbellsoupco-block-pfc-banner .image {
	position: relative;
}

	.wp-block-campbellsoupco-block-pfc-banner .image::before {
		content: '';
		background-image: url('assets/specifically-frame.png');
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
		.wp-block-campbellsoupco-block-pfc-banner.altFrame .image::before {
			background-image: url('assets/specifically-frame-alt.png');
		}
	
	@media screen and (max-width: 600px) {
	    .wp-block-campbellsoupco-block-pfc-banner .banner .image { height: 80vw; } 
	}
	
	@media screen and (max-width: 480px) {
	    .wp-block-campbellsoupco-block-pfc-banner .banner .image { height: 100vw; } 
	}


/* Product Carousel block */
.wp-block-campbellsoupco-block-pfc-product-carousel { margin: 0 !important; }

.wp-block-campbellsoupco-block-pfc-product-carousel .info {
	padding: 25px 30px;
	display: flex;
	align-items: center;
}

	.wp-block-campbellsoupco-block-pfc-product-carousel .info .text {
	}

		.wp-block-campbellsoupco-block-pfc-product-carousel .info .text p {
			font-size: var(--pacific-font-size-large);
			font-weight: 800;
			line-height: 1.136em;
			line-height: 1.5em;
		}

		.wp-block-campbellsoupco-block-pfc-product-carousel .info .text a.button { margin-top: 0; }

		.wp-block-campbellsoupco-block-pfc-product-carousel .info .text a.button span { white-space: nowrap; }

	.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-outer {
		width: 256px;
		margin-left: 38px;
		margin-right: 58px;
		position: relative;
		/* padding-bottom: 25px !important; /* removed after hiding the pagination */
	}

		@media screen and (max-width: 1280px) {
			.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-outer {
				margin-left: 30px;
				margin-right: 30px;
			}
		}

		@media screen and (max-width: 1024px) {
			.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-outer {
				margin-right: 10px;
			}
		}

		@media screen and (max-width: 768px) {
			.wp-block-campbellsoupco-block-pfc-product-carousel.align_right .info .tns-outer {
				margin-left: 10px;
				margin-right: 45px;
			}
		}

		@media screen and (max-width: 540px) {
			.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-outer {
				margin-left: auto !important;
				margin-right: auto !important;
				height: 298px;
			}
			.wp-block-campbellsoupco-block-pfc-product-carousel .info { padding-bottom: 96px; }
			.wp-block-campbellsoupco-block-pfc-product-carousel .info .text { position: relative; }
			.wp-block-campbellsoupco-block-pfc-product-carousel .info .text p { margin-bottom: -15px; }
			.wp-block-campbellsoupco-block-pfc-product-carousel .info .text a.button {
				position: relative;
				top: 362px;
			}
		}

		@media screen and (max-width: 400px) {
			.wp-block-campbellsoupco-block-pfc-product-carousel .info {
				padding-left: 20px;
				padding-right: 20px;
			}
		}

		.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-controls {
			position: absolute;
			left: 0;
			right: 0;
			top: 35%;
			transform: translateY(-50%);
			z-index: 2;
		}

			.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-controls button {
				width: 24px;
				height: 24px;
				padding: 0;
				color: currentColor;
				overflow: hidden;
				background: none;
				position: absolute;
				cursor: pointer;

				/* for outline */
				border-radius: 50%;
				outline-offset: 0;
			}
			
				.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-controls button:nth-child(1) { left: 0; }
				.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-controls button:nth-child(2) { right: 0; }

				.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-controls button svg { transform: scale(2); }

				.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-controls button svg > * { transition: all 0.2s ease-in-out; }

				.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-controls button svg .arrow { stroke: currentColor; }
				.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-controls button svg circle { display: none; } /* decision to remove the circles */

				.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-controls button:hover svg circle { fill: var(--beef-broth-sunset); fill-opacity: 1; }
				.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-controls button:hover svg .arrow { stroke: white; }

		.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-nav {
			display: none; /* decision to hide the pagination */

			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			text-align: center;
			z-index: 2;
		}

			.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-nav button {
				width: 10px;
				height: 10px;
				padding: 0;
				color: inherit;
				overflow: hidden;
				background-color: currentColor;
				margin: 5px;
				position: relative;
				opacity: 0.5;
			}

				.wp-block-campbellsoupco-block-pfc-product-carousel .info .tns-nav button.tns-nav-active { opacity: 1; }


		.wp-block-campbellsoupco-block-pfc-product-carousel .info .product {
			text-align: center;
			font-size: 14px;
			line-height: 1.5em;
			position: relative;
		}

			.wp-block-campbellsoupco-block-pfc-product-carousel .info .product a {
				text-decoration: none;
				color: currentColor;
			}

				.wp-block-campbellsoupco-block-pfc-product-carousel .info .product > .new {
					position: absolute;
					top: 10px;
					right: 20px;
					width: 35px;
					height: 35px;
					pointer-events: none;
				}			

					.wp-block-campbellsoupco-block-pfc-product-carousel .info .product > .new path { fill: currentColor; }

				.wp-block-campbellsoupco-block-pfc-product-carousel .info .product img {
					display: block;
					margin: auto;
					max-height: 256px !important;
					max-width: 256px !important;
				}


/* Product detail page */
body.single-product #main > .container { margin-bottom: 0; }

body.single-product #main > .container > * {
	padding-left: 25%;
	padding-right: 20%;
}

body.single-product #main > .container > p { margin: 1.75em 0; }

.product-header {
	color: var(--organic-eggshell);
	background-color: var(--beetroot-purple);
	padding-top: 40px;
	padding-bottom: 72px;
	margin-bottom: 24px;
	position: relative;
}

	.product-header .breadcrumb {
		font-size: var(--pacific-font-size-medium);
	}

		.product-header .breadcrumb a {
			color: currentColor;
			text-decoration: underline;
		}

			.product-header .breadcrumb a:hover {
				text-decoration: underline;
			}

	.product-header .single-product__title {
		font-size: 52px;
		font-weight: 700;
		line-height: 1.135em;
		width: 70%;
	}

		@media screen and (max-width: 1024px) {
			.product-header .single-product__title { font-size: 40px; }
		}

		@media screen and (max-width: 768px) {
			.product-header .single-product__title { font-size: 33px; }
		}

		@media screen and (max-width: 600px) {
			.product-header .single-product__title { font-size: 30px; }
		}		

	.product-header .product-gallery {
		max-width: 25%;
		position: absolute;
		top: 40px;

		max-width: 35%;
		left: -5%;
		pointer-events: none;

		transition: all 0.2s ease-in-out;
	}

		.product-header.new .product-gallery::after {
			content: 'New';
			position: absolute;
			top: -15px;
			right: 23%;
			width: 35px;
			height: 35px;
			color: transparent;
			overflow: hidden;
			background-image: url('assets/new-butternut.svg');
			background-size: 35px 35px;
			background-repeat: no-repeat;
		}	

	.product-header .product-details__description { margin-top: 10px; }

		.product-header .product-details__description p {
			font-size: 1.25em;
			font-weight: 600;
			line-height: 1.5em;
		}

	@media screen and (max-width: 1024px) {
		body.single-product #main > .container > * {
			padding-left: 10%;
			padding-right: 10%;
		}
		.product-header .single-product__title { display: inline; }
		.product-header .product-gallery {
			position: relative;
			float: right;
			margin: 0 -5%;
			left: auto;
			top: auto;
			max-width: 50%;
			order: -1;
		}
	}

	@media screen and (max-width: 860px) {
		.product-header .product-gallery { max-width: 60%; }
	}

	@media screen and (max-width: 768px) {
		body.single-product #main > .container > * {
			padding-left: 36px;
			padding-right: 36px;
		}
	}

	@media screen and (max-width: 600px) {
		.product-header {
			display: flex;
			flex-direction: column;
		}
		.product-header .single-product__title { order: 1; }
		.product-header .product-gallery { 
			order: 2; 
			max-width: none;
			margin: 36px -10% 0;
		}
		.product-header .product-details__description { order: 3; }
	}


.ingredients {
	font-size: var(--pacific-font-size-medium);
	line-height: 1.25em;
	/* text-transform: uppercase; */ /* removed for WCAG requirements - "Text in all caps" */
}

	.ingredients .title {
		font-size: var(--pacific-font-size-medium);
		font-weight: bold;
		text-transform: uppercase;
		margin-bottom: 0.75em;
	}

	.ingredients p { 
		line-height: 1.5; 
		margin-bottom: 0.25em;
	}

.product-details {
	padding: 0 !important;
	border: 20px solid transparent;
	margin: 35px 20% 60px 25%;
	background-color: var(--creamy-cauliflower);
	display: flex;

	column-gap: 48px;
	row-gap: 36px;
	font-size: 16px;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
}

	@media screen and (max-width: 1024px) {
		.product-details {
			margin-left: 10%;
			margin-right: 10%;
		}
	}

	@media screen and (max-width: 768px) {
		.product-details {
			margin-left: 36px;
			margin-right: 36px;
		}
	}
		
	.product-details h3:not(.nutrition-table__title) {
		font-weight: bold;
		font-size: 12px;
		margin-bottom: 10px;
	}

	.product-details .certifications {
		flex-shrink: 1;
	}

		.product-details .certifications ul {
			list-style-type: none;
			padding: 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			max-width: 160px;
			column-gap: 48px;
			row-gap: 36px;
		}	

			.product-details .certifications ul li {
				display: inline-block;
			}

			.product-details .certifications img {
				max-width: 56px;
			}


	.product-details .sizes {
		flex-shrink: 0;
	}

		.product-details .sizes p {
			margin-bottom: 0.375em;
			line-height: 1.5em;
		}

	.product-details .dietary {
		flex-shrink: 0;
	}

		.product-details .dietary ul {
			list-style-type: none;
			padding: 0;
		}

			.product-details .dietary ul li {
				margin-bottom: 0.375em;
				line-height: 1.5em;
			}


	.product-details .nutrition-facts {
		flex-shrink: 0;
		width: 25%;
		transition: all 0.2s ease-in-out;
		cursor: pointer;
	}

		.product-details .nutrition-facts .nutrition-facts-chart {
			width: 400%;
			transform-origin: 0 0;
			transform: scale(25%);
			margin-right: -75%;
			transition: all 0.2s ease-in-out;

			/* margin-bottom: -75%; */
			max-height: 150px; /* for clearing out the empty space left by its enlargments's footprint */
		}

			.product-details .nutrition-facts .nutrition-facts-chart .nutrition-table {
				min-height: calc(150px * 4); /* "*4" to compensate for the "transform: scale(25%)" on its parent */
				max-height: 150px; /* to keep the thumbnail size from spilling out of the fixed space left for it with the "max-height" on the parent */
				overflow: hidden;
				transition: all 0.2s ease-in-out;
				border-width: 4px;
			}

				.product-details .nutrition-facts .nutrition-facts-chart .nutrition-table .nutrition-table__title { transition: font-size 0.2s ease-in-out; }
				.product-details .nutrition-facts:not(.enlarged) .nutrition-facts-chart .nutrition-table .nutrition-table__title { font-size: 4pc; }

			.product-details .nutrition-facts.enlarged { width: 100%; }

				.product-details .nutrition-facts.enlarged .nutrition-facts-chart {
					transform: scale(100%);
					width: 100%;
					margin-right: 0;

					max-height: none;
				}	

					.product-details .nutrition-facts.enlarged .nutrition-facts-chart .nutrition-table {
						min-height: 0;
						max-height: none;
						border-width: 1px;
					}


		.product-details .nutrition-facts .enlarge {
			font-size: 12px;
			/* color: #038fad; */
			color: var(--beetroot-purple);
			line-height: 20px;
			display: inline-block;
			padding: 6px 6px; /* padding and negative margin are to make its touch area larger */
			margin-top: 6px;
			margin-bottom: -6px;
			cursor: pointer;
			transition: all 0.2s ease-in-out;
			text-decoration: underline;
			border-radius: var(--button--border-radius);
		}

			.product-details .nutrition-facts .enlarge:hover {
				color: var(--beef-broth-sunset);
			}

			.product-details .nutrition-facts .enlarge:active {
				color: var(--creamy-cauliflower);
			}

			.product-details .nutrition-facts .enlarge svg {
				vertical-align: bottom;
				margin-right: 5px;
			}

				.product-details .nutrition-facts .enlarge svg path { fill: currentColor; }

.wp-block-campbellsoupco-page-content > p { margin: 1.7em 0; }

section.product-category {
	margin-top: 80px;
	padding: 216px 80px !important;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

	section.product-category .button { 
		background-color: var(--creamy-cauliflower) !important; 
		color:  var(--ultramarine-green) !important;
	}
	section.product-category .button:hover,
	section.product-category .button:focus { 
		background-color: var(--beef-broth-sunset) !important; 
		color: var(--creamy-cauliflower) !important;
	}

section.recipe-list {
	padding: 60px 90px !important;
	background-color: var(--ultramarine-green);
	color: var(--celery-green);
	text-align: center;
	margin: 0 !important;
}

	section.recipe-list .recipes {
		display: flex;
		margin-top: 50px;
		column-gap: 60px;
		justify-content: center;
	}

		section.recipe-list .recipes .recipe {
			text-align: left;
			flex-basis: calc((100% / 3) - 40px);
		}

			section.recipe-list .recipes .recipe a { 
				text-decoration: none; 
				color: var(--celery-green);
				border-radius: var(--button--border-radius);
				transition: all 0.2s ease-in-out;
				display: block;
				outline: 8px solid transparent;
			}

				section.recipe-list .recipes .recipe a:hover,
				section.recipe-list .recipes .recipe a:focus {
					outline: 8px solid var(--beef-broth-sunset);
					background: var(--beef-broth-sunset);
					color: white;
				}

				section.recipe-list .recipes .recipe a > * { display: block; }

				section.recipe-list .recipes .recipe .image {
					padding-top: 56.25%;
					/* "!important" on all the background declarations to override ":focus" stuff from the parent theme */
					background-color: var(--beetroot-purple) !important;
					background-repeat: no-repeat !important;
					background-position: center !important;
					background-size: cover!important;
					margin-bottom: 22px;
					border-radius: var(--button--border-radius);
				}

					section.recipe-list .recipes .recipe .image:focus { outline: 2px solid var(--beef-broth-sunset); }

				section.recipe-list .recipes .recipe .title {
					font-size: var(--pacific-font-size-large);
					font-weight: var(--heading--font-weight-h2);
					line-height: 25px;
					text-decoration: none;
				}

				section.recipe-list .recipes .recipe .view {
					/*
					font-weight: bold;
					font-size: 14px;
					*/
					font-weight: 700;
					font-size: 19px;
					margin-top: 1em;
					display: inline-block;
					text-decoration: underline;
				}

	section.recipe-list .recipes + .button { margin-top: 60px; }

	@media screen and (max-width: 1024px) {
		section.recipe-list { padding: 60px 70px !important; }
		section.recipe-list .recipes {
			margin-top: 50px;
			column-gap: 42px;
		}
		section.recipe-list .recipes .recipe {
			flex-basis: calc((100% / 3) - 28px);
		}
	}

	@media screen and (max-width: 768px) {
		section.recipe-list { padding: 45px 30px !important; }
		section.recipe-list .recipes,
		section.recipe-list .recipes + .button { margin-top: 45px; }
	}

	@media screen and (max-width: 640px) {
		section.recipe-list { padding: 40px 30px !important; }
		section.recipe-list .recipes,
		section.recipe-list .recipes + .button { margin-top: 40px; }
		section.recipe-list .recipes {
			row-gap: 45px;
			flex-direction: column;
		}
		section.recipe-list .recipes .recipe { flex-basis: auto; }
	}

	@media screen and (max-width: 600px) {
		section.recipe-list { padding: 35px 30px !important; }
		section.recipe-list .recipes,
		section.recipe-list .recipes + .button { margin-top: 35px; }
	}

	@media screen and (max-width: 480px) {
		section.recipe-list h2 { text-align: left; }
	}

	@media screen and (max-width: 400px) {
		section.recipe-list { padding: 35px 20px !important; }
	}

	section.recipe-list > .button { 
		background-color: var(--celery-green) !important; 
		color: var(--ultramarine-green) !important;
	}
	section.recipe-list > .button:hover,
	section.recipe-list > .button:focus { 
		background-color: var(--beef-broth-sunset) !important; 
		color: var(--creamy-cauliflower) !important;
	}


/* Product category page */

body.tax-product_category .banner {
	margin: 0;
    display: flex;
    /*
    background-color: var(--butternut-yellow);
    color: var(--ultramarine-green);
    */
}

	body.tax-product_category .banner > * {
	    flex-basis: 50%;
	}

	body.tax-product_category .banner .text {
		padding: 72px;
	}

		@media screen and (max-width: 1024px) {
			body.tax-product_category .banner .text { padding: 54px; }
		}

		@media screen and (max-width: 768px) {
			body.tax-product_category .banner .text { padding: 36px; }
		}

		@media screen and (max-width: 600px) {
		    body.tax-product_category .banner { flex-wrap: wrap; }
		    body.tax-product_category .banner > * { flex-basis: 100%; }  
		    body.tax-product_category .banner .text { order: 2; } 
		}

		body.tax-product_category .banner .text h1 {
			font-weight: 700;
			font-size: var(--pacific-font-size-large);
			color: var(--beef-broth-sunset);
			margin-bottom: 0.15em;
		}

		body.tax-product_category .banner .text p { 
			font-weight: 800;
			font-size: var(--pacific-font-size-heading-extra);
			line-height: 1; 
		}

		@media screen and (max-width: 1024px) {
			body.tax-product_category .banner .text p { font-size: 2.5rem; }
		}

		@media screen and (max-width: 768px) {
			body.tax-product_category .banner .text p { font-size: 2.0625rem; }
		}

		@media screen and (max-width: 600px) {
			body.tax-product_category .banner .text p { font-size: 1.875rem; }
		}		

	    	body.tax-product_category .banner .text .punctuation { color: var(--beef-broth-sunset); }

			body.tax-product_category .banner .bg_color_ultramarine-green .text h1 {
				color: var(--celery-green);
			}

			body.tax-product_category .banner .bg_color_beetroot-purple .text h1 {
				color: var(--butternut-yellow);
			}

	body.tax-product_category .banner .image {
		position: relative;
	    background-size: cover;
	    background-position: center;
	}

		body.tax-product_category .banner .image::before {
			content: '';
			background-image: url('assets/specifically-frame.png');
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
	
		@media screen and (max-width: 600px) {
		    body.tax-product_category .banner .image { height: 80vw; } 
		}
		
		@media screen and (max-width: 480px) {
		    body.tax-product_category .banner .image { height: 100vw; } 
		}

body.tax-product_category .sub-category {
	margin: 0;
	background-color: white;
	padding: 40px 30px;
}
	body.tax-product_category .sub-category:last-child { padding-bottom: 50px; }

	body.tax-product_category .sub-category h2.title {
		color: var(--ultramarine-green);
		text-transform: uppercase;
		font-size: var(--pacific-font-size-large);
		font-weight: 800;
		margin-bottom: 0.25em;
	}

body.tax-product_category .product-list {
	padding: 0;
	list-style-type: none;
	display: flex;
	margin-top: 40px;
	flex-wrap: wrap;
	column-gap: 30px;
	row-gap: 50px;
}

	@media screen and (max-width: 600px) {
		body.tax-product_category .product-list { justify-content: center; }
	}

	body.tax-product_category .product-list li {
		flex-basis: 256px;
		flex-shrink: 0;
	}

		body.tax-product_category .product-list .product { position: relative; }

			body.tax-product_category .product-list .product a {
				text-decoration: none;
				color: currentColor;
				transition: all 0.2s ease-in-out;
			}

				body.tax-product_category .product-list .product a:hover {
					color: var(--ultramarine-green);
					text-decoration: underline;
				}

				body.tax-product_category .product-list .product a:focus  {
					outline: 2px solid var(--ultramarine-green);
				}

				body.tax-product_category .product-list .product > .new {
					position: absolute;
					top: 10px;
					right: 20px;
					width: 35px;
					height: 35px;
					pointer-events: none;
				}			

					body.tax-product_category .product-list .product > .new path { fill: var(--ultramarine-green); }

				body.tax-product_category .product-list .product img {
					display: block;
					margin: auto;
					max-height: 256px !important;
					max-width: 256px !important;
				}


/* Our Story block */

.our-story-block {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center left;
	padding: 186px 72px !important;
	margin: 0;
	background-color: #222;
}

	@media screen and (max-width: 1024px) {
		.our-story-block { padding: 100px 72px !important; }
	}

	.our-story-block > * {
		margin-left: 210px;
	}

	@media screen and (max-width: 600px) {
		.our-story-block { 
			padding: 100px 36px !important; 
			background-position: center;
		}
		.our-story-block > * { margin-left: 0; }
	}

	.our-story-block p {
		font-size: 1.375em;
		font-weight: 800;
		line-height: 1.125em;
		line-height: 1.5em;
		text-shadow: 0 0 5px rgba(0,0,0,0.5);
	}

		.our-story-block p .punctuation { color: var(--beef-broth-sunset); }

	.our-story-block a.button { box-shadow: 0 0 5px rgba(0,0,0,0.25); }

	.our-story-block p + a.button { margin-top: 1em; }



/* Contact Page */

.wp-block-campbellsoupco-pfc-contact-info {
	margin: 30px !important;
}

	.wp-block-campbellsoupco-pfc-contact-info .wp-block-column {
		padding: 24px 30px;
		background-color: var(--ultramarine-green);
		color: var(--creamy-cauliflower);
	}

		.wp-block-campbellsoupco-pfc-contact-info .wp-block-column h2 {
			font-size: var(--pacific-font-size-large);
			color: var(--celery-green);
			margin-bottom: 1.125em;
		}

		.wp-block-campbellsoupco-pfc-contact-info .wp-block-column a {
			color: var(--creamy-cauliflower);
			text-decoration: none;
		}

			.wp-block-campbellsoupco-pfc-contact-info .wp-block-column a:hover {
				text-decoration: underline;
			}

		.wp-block-campbellsoupco-pfc-contact-info .wp-block-column p {
			margin: calc(var(--global--line-height-body) / 2) 0 !important;
		}

.wp-block-group.contactGroup {
	text-align: center;
	margin-top: calc(var(--global--spacing-vertical) * 2);
	margin-bottom: calc(var(--global--spacing-vertical) * 2);
	padding:  0 36px;
}

	.wp-block-group.contactGroup h2 {
		margin-bottom: calc(0.25 * var(--global--spacing-vertical));
	}
	.wp-block-group.contactGroup p {
		margin: calc(var(--global--line-height-body) / 2) 0 !important;
	}

.csc-contact-form-toggle {
	border: var(--button--border-width) solid transparent;
	border-radius: var(--button--border-radius);
	cursor: pointer;
	font-weight: var(--button--font-weight);
	font-family: var(--button--font-family);
	font-size: var(--button--font-size);
	line-height: var(--button--line-height);
	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
	text-decoration: none;
	background-color: var(--celery-green) !important;
	color: var(--ultramarine-green) !important;
	transition: all 0.2s ease-in-out;
	margin-top: calc(var(--global--spacing-vertical) * 0.5) !important;
}

	.csc-contact-form-toggle:hover, 
	.csc-contact-form-toggle:focus {
		background-color: var(--beef-broth-sunset) !important;
		color: var(--creamy-cauliflower) !important;
	}



/* Contact Form & FAQ block group */

.csc-contact-form:target::before {
	height: 0;
}

#csc-contact-form {
	text-align: center;
	margin: calc(var(--global--spacing-vertical) * -2.5) 30px var(--global--spacing-vertical);
}

#csc-contact-form,
.wp-block-group.faq {
	background-color: var(--creamy-cauliflower);
	padding: 40px 72px 20px;
	border-radius: var(--button--border-radius);
}

.wp-block-group.faq {
	margin: var(--global--spacing-vertical) 30px calc(var(--global--spacing-vertical) * 2) !important;
}

	.wp-block-group.faq h2 {
		color: var(--ultramarine-green);
		text-align: center;
	}
	.wp-block-group.faq h3 {
		color: var(--ultramarine-green);
		text-transform: uppercase;
		margin-bottom: 1.5em;
	}

	.wp-block-group.faq > .wp-block-group__inner-container > h3 {
		text-transform: none;
		font-size: var(--pacific-font-size-extralarge);
		margin-bottom: var(--global--spacing-vertical);
	}

	.wp-block-group.faq > .wp-block-group__inner-container > p {
		font-size: var(--pacific-font-size-large);
		margin-bottom: calc(var(--global--spacing-vertical) * 2);
	}

	@media screen and (max-width: 1024px) {
		#csc-contact-form,
		.wp-block-group.faq { 
			padding-left: 54px; 
			padding-right: 54px;
		}
	}

	@media screen and (max-width: 768px) {
		#csc-contact-form,
		.wp-block-group.faq { 
			padding-left: 36px; 
			padding-right: 36px;
		}
	}

	@media screen and (max-width: 480px) {
		#csc-contact-form,
		.wp-block-group.faq { 
			margin-left: 0 !important;
			margin-right: 0 !important;
		}
	}

.csc-contact-form .legend, 
.csc-contact-form legend {
	font-size: var(--pacific-font-size-large);
	text-align: center;
	padding: 0 0.5em;
}

fieldset input[type="radio"] + label,
fieldset input[type="checkbox"] + label {
	font-size: var(--pacific-font-size-medium);
	text-align: left;
}

fieldset input[type="radio"] + label:last-child, 
fieldset input[type="checkbox"] + label:last-child {
	margin-bottom: 0;
}

.csc-contact-form__form hr {
	margin-bottom: 1rem;
	height: 0;
	border: none;
}

.csc-contact-form fieldset {
	padding: var(--global--spacing-horizontal);
	border: 2px solid var(--global--color-secondary);
}

.csc-contact-form .field-radio fieldset {
	grid-template-columns: 2.25em 1fr;
}

.csc-contact-form .label {
	font-size: var(--pacific-font-size-medium);
}

.csc-contact-form .button-primary {
		margin: var(--global--spacing-vertical) auto calc(var(--global--spacing-vertical) * 0.5);
		color: var(--celery-green) !important;
		background-color: var(--ultramarine-green) !important;
	transition: all 0.2s ease-in-out;
}

	.csc-contact-form .button-primary:hover,
	.csc-contact-form .button-primary:focus {
		background-color: var(--beef-broth-sunset) !important;
		color: var(--creamy-cauliflower) !important;
	}

.csc-contact-form__form * {
		text-align: left;
}

.csc-contact-form #product_feedback {
		border-color: var(--ultramarine-green);
}

.csc-contact-form fieldset {
		border: 3px solid var(--ultramarine-green);
}





/* Accordion block */

.wp-block-campbellsoupco-pfc-accordion {
	margin-bottom: 4em !important;
}

	.campbellsoupco-collapsible-element {
		margin-bottom: 1em;
	}

		.campbellsoupco-collapsible-element.open { margin-bottom: 3em; }

		.campbellsoupco-collapsible-element .title { 
			text-decoration: none; 
			padding: 0.5em calc(40px + 0.5em);
			margin: -0.5em	;
			background: none !important;
			color: inherit !important;
			display: block;
			text-align: left;
			font-size: var(--pacific-font-size-large);
			outline: none;

			position: relative;
			text-transform: none;
			font-weight: 400;
		}

			.campbellsoupco-collapsible-element .title:focus,
			.campbellsoupco-collapsible-element .title:hover { text-decoration: underline; }

			.campbellsoupco-collapsible-element .title::before {
				content: 'Open answer';
				position: absolute;
				pointer-events: none;
				color: transparent;
				width: 32px;
				height: 32px;
				left: 0;
				background-image: url('assets/arrow-open.svg');
				background-position: center;
				background-size: 36px 36px;
				background-repeat: no-repeat;
				transition: transform 0.1s ease-in-out;
			}

				.campbellsoupco-collapsible-element.open .title::before {
					transform: rotate(90deg);
					content: 'Close answer';
				}

		.campbellsoupco-collapsible-element .content { padding: 0 40px; }

			.campbellsoupco-collapsible-element .content p {
				font-size: var(--pacific-font-size-large);
				line-height: 29px;
				margin: 1em 0;
				color: #73839C;
			}



/* Our Story page */

.wp-block-columns.storyBoxes {
	justify-content: center;
	margin: var(--global--spacing-vertical) 36px !important;
	row-gap: var(--global--spacing-vertical);
}

	.wp-block-columns.storyBoxes .wp-block-column {
		flex-basis: 250px;
		flex-grow: 0;
		flex-shrink: 1;
		background-color: var(--ultramarine-green);
		border-radius: var(--button--border-radius);
		color: var(--creamy-cauliflower);
		padding: 13px 18px;
		margin-bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.wp-block-columns.storyBoxes figure {
		margin-bottom: 10px;
	}

		.wp-block-columns.storyBoxes figure img {
			width: 100%;
		}

		.wp-block-columns.storyBoxes figure ~ p {
			margin-top: 0;
			line-height: 1.25;
			line-height: 1.5;
			font-size: var(--pacific-font-size-large);
		}

			@media screen and (max-width: 1024px) {
				.wp-block-columns.storyBoxes figure ~ p { font-size: var(--pacific-font-size-medium); }
			}

.knowingWhere {
	margin: var(--global--spacing-vertical) 36px !important;
	border-radius: var(--button--border-radius);
	padding-top: 2.375em !important;
	padding-bottom: 2.375em !important;
}

	.knowingWhere .wp-block-column > * {
		margin-top: calc(var(--global--spacing-vertical) * 0.5);
		margin-bottom: calc(var(--global--spacing-vertical) * 0.5);
	}


.recipe-wrapper.imperial .metric {
	display: none;
}

.recipe-wrapper.imperial .imperial {
	display: inline;
}

.recipe-wrapper.metric .imperial {
	display: none;
}

.recipe-wrapper.metric .metric {
	display: inline;
}


/* Recipes page */


.post-type-archive-recipe .featured {
	padding: 40px 30px;
	margin: 0;
}

	.post-type-archive-recipe .featured > h1 {
		margin: 0 0 25px 0;
		font-size: 52px;
		font-weight: 700;
		line-height: 1.135em;
		color: var(--ultramarine-green);
	}

		@media screen and (max-width: 1024px) {
			.post-type-archive-recipe .featured > h1 { font-size: 40px; }
		}

		@media screen and (max-width: 768px) {
			.post-type-archive-recipe .featured > h1 { font-size: 33px; }
		}

		@media screen and (max-width: 600px) {
			.post-type-archive-recipe .featured > h1 { font-size: 30px; }
		}

	.post-type-archive-recipe .featured .description {
		font-size: var(--pacific-font-size-large);
		margin-bottom: 55px;
	}

	.post-type-archive-recipe .sub-category h2.title {
		color: var(--ultramarine-green);
		text-transform: uppercase;
		font-size: var(--pacific-font-size-large);
		font-weight: 800;
		margin-bottom: 1em;
	}
/*
ul.recipe-list {
	padding: 60px 90px !important;
	text-align: center;
	margin: 0 !important;
}
*/
.post-type-archive-recipe .sub-category{
	padding: 40px 30px;
	margin: 0;
}

	ul.recipe-list {
		display: flex;
		/* margin-top: 50px; */
		column-gap: 30px;
		row-gap: 30px;
		justify-content: start;
		list-style: none;
		padding: 0;
		flex-wrap: wrap;
		margin-top: 2em;
	}

		ul.recipe-list li {
			text-align: left;
			flex-basis: calc((100% - 90px) / 4);
		}

			.featured ul.recipe-list li {
				flex-basis: calc((100% - 60px) / 3);
			}


			ul.recipe-list .recipe a {
				font-size: 14px;
				line-height: 1.5em;
				font-weight: 700;
				text-decoration: none; 
				border-radius: var(--button--border-radius);
				transition: all 0.2s ease-in-out;
				display: block;
				outline: 8px solid transparent;
				padding-bottom: 1em;
			}

				ul.recipe-list .recipe a:hover,
				ul.recipe-list .recipe a:focus {
					outline: 8px solid var(--beef-broth-sunset) !important;
					background: var(--beef-broth-sunset) !important;
					color: white;
				}
				ul.recipe-list .recipe a:active {
					outline: 8px solid var(--ultramarine-green) !important;
					background: var(--ultramarine-green) !important;
					color: white;
				}

				ul.recipe-list .recipe a > * { display: block; }

				ul.recipe-list .recipe .image {
					padding-top: 56.25%;
					/* "!important" on all the background declarations to override ":focus" stuff from the parent theme */
					background-color: var(--beetroot-purple) !important;
					background-repeat: no-repeat !important;
					background-position: center !important;
					background-size: cover!important;
					margin-bottom: 22px;
					border-radius: var(--button--border-radius);
				}

					ul.recipe-list .recipe .image:focus { outline: 2px solid var(--beef-broth-sunset); }

				ul.recipe-list .recipe .title {
					font-size: var(--pacific-font-size-medium);
					font-weight: normal;
					line-height: 1.5;
					margin-bottom: 14px;
				}

				ul.recipe-list .recipe .view {
					font-weight: 700;
					font-size: 14px;
					display: inline-block;
					text-decoration: underline;
				}

	ul.recipe-list + .button { margin-top: 60px; }

	@media screen and (max-width: 1024px) {

	}

	@media screen and (max-width: 768px) {
		ul.recipe-list li {
			text-align: left;
			flex-basis: calc((100% - 60px) / 3);
		}		
		.featured ul.recipe-list li {
			flex-basis: calc((100% - 30px) / 2);
		}

	}

	@media screen and (max-width: 640px) {
		/*  ul.recipe-list { padding: 40px 30px !important; } */
		ul.recipe-list,
		ul.recipe-list + .button { margin-top: 40px; }
		ul.recipe-list {
			row-gap: 45px;
			flex-direction: column;
			flex-wrap: unset;
		}
		ul.recipe-list li { flex-basis: auto; }
	}

	@media screen and (max-width: 600px) {
		/*  ul.recipe-list { padding: 35px 30px !important; } */
		ul.recipe-list,
		ul.recipe-list + .button { margin-top: 35px; }
	}

	@media screen and (max-width: 480px) {
		ul.recipe-list h2 { text-align: left; }
	}

	@media screen and (max-width: 400px) {
		/* ul.recipe-list { padding: 35px 20px !important; } */
	}

	ul.recipe-list > .button { 
		background-color: var(--celery-green) !important; 
		color: var(--ultramarine-green) !important;
	}
	ul.recipe-list > .button:hover,
	ul.recipe-list > .button:focus { 
		background-color: var(--beef-broth-sunset) !important; 
		color: var(--creamy-cauliflower) !important;
	}		


.single-recipe h1 {
	font-size: var(--pacific-font-size-heading);
	font-weight: var(--heading--font-weight-h2);
	color: var(--ultramarine-green);
	padding: 25px 30px;
}

.recipe-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0 30px;
}

.recipe-header > * {
	background-color: var(--creamy-cauliflower);
}

.recipe-image {
	grid-row: 1 / 3;
	min-height: 420px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.recipe-meta {
	padding: 35px;
}
.recipe-meta ul {
	list-style: none;
	padding: 0;
}
.recipe-meta ul li:not(:last-child) {
	margin-bottom: 12px;
}

.recipe-meta p,
.recipe-sharing p {
	margin: 1em 0 0.75em;
}

.recipe-meta span.time {
		font-size: 12px;
		color: var(--ultramarine-green);
		display: block;
		font-weight: 700;
}
.recipe-meta span.time::before {
	content: '';
	width: 16px;
	height: 16px;
	background-size: 16px;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 2px;
	margin-right: 0.5em;
}

.recipe-meta span.time.total::before { background-image: url('assets/time-clock-circle.png'); }
.recipe-meta span.time.prep::before { background-image: url('assets/shopping-basket.png'); }
.recipe-meta span.time.cook::before { background-image: url('assets/trends-hot-flame.png'); }

#num-servings {
		width: 2.5em;
		box-sizing: content-box;
		padding: 5px;
		border: navajowhite;
}
#num-servings:hover,
#num-servings:focus {
		box-shadow: var(--yxt-searchbar-focus-shadow);
}

.recipe-wrapper .hidden {
		display: none;
}


.recipe-meta {
		grid-column: 1;
		grid-row: 2;
}

.recipe-image ~ .recipe-meta {
		grid-column: 2;
}

.recipe-units {
		margin-bottom: 2em;
}


.recipe-units label {
		font-size: inherit;
		margin-right: 1em;
}

.recipe-units input[type="radio"] {
		vertical-align: middle;
		margin-right: 0.25em;
}

.recipe-units p {
		width: 100%;
}

/*
.recipe-units {
		display: flex;
		align-items: end;
		flex-wrap: wrap;
}
*/



.recipe-servings p {
	display: inline;
}



.recipe-meta {
		flex-direction: column;
		justify-content: space-between;
		display: flex;
}




/* Inline #27 | https://demo.badmath.com/think33/pacificfoods/recipes/beef-broth-marinated-skirt-steak-with-cilantro-lime-sauce/ */

.recipe-wrapper {
		margin: 40px 120px 0;
		padding-bottom: 50px;
}

.recipe-wrapper__inner {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-column-gap: 60px;
}

.recipe-wrapper__description {
		grid-column: 1 / 3;
		font-size: var(--pacific-font-size-large);
		margin-bottom: 3em;
}

.recipe-wrapper__description p {
		line-height: 1.318;
		line-height: 1.5;
}

.recipe-wrapper__products {
		grid-column: 1;
		grid-row: 3;
}

.recipe-wrapper__steps {
		grid-column: 2;
		grid-row: 2 / 4;
}

.recipe-wrapper__ingredients {
		border-radius: var(--button--border-radius);
		background-color: var(--creamy-cauliflower);
		padding: 25px;
		margin-bottom: 2em;
		grid-row: 2;
}

/* Inline #27 | https://demo.badmath.com/think33/pacificfoods/recipes/beef-broth-marinated-skirt-steak-with-cilantro-lime-sauce/ */

.recipe-wrapper h5,
.recipe-wrapper h2.sectionTitle {
		font-size: var(--pacific-font-size-large);
		font-weight: 700;
		margin-bottom: 0.75em;
}

.recipe-wrapper .sidebarTitle {
	font-size: var(--heading--font-size-h6);
	font-weight: var(--heading--font-weight-strong);
	letter-spacing: var(--heading--letter-spacing-h6);
	line-height: var(--heading--line-height-h6);
}

.ingredient-category ul {
		list-style: none;
		padding: 0;
}

.ingredient .amount,
.ingredient .unit {
		font-weight: bold;
}

.ingredient-category:not(:last-child) {
		margin-bottom: 1.5em;
}

.ingredient-category h6,
.ingredient-category div.h6 {
		margin-bottom: 0.25em;
		font-size: 18px;
		font-weight: 700;
}
.ingredient-category div.h6 {
	letter-spacing: var(--heading--letter-spacing-h6);
	line-height: var(--heading--line-height-h6);
}

/* style.css | https://demo.badmath.com/think33/pacificfoods/wp-content/themes/pfw-wp-pacific-foods-canada-theme/style.css?ver=1.0 */

.recipe-units {
		font-size: 14px;
}

.recipe-units input[type="radio"] {
		/* vertical-align: middle; */
		vertical-align: bottom;
		transform: scale(0.75);
}

.recipe-units label {
		cursor: pointer;
}
.ingredient {
	text-indent: -0.5em;
	margin-left: 0.5em;
	line-height: 1.3;
	margin-bottom: 0.5em;
}


.ingredient .note {
		font-size: 0.75em;
}

.ingredient .note:not(:empty)::before {
		content: '(';
}

.ingredient .note:not(:empty)::after {
		content: ')';
}

.recipe-sharing {
		/* grid-column: 2 / 4; */
		grid-column: 2 / 3;
		padding: 25px;
		text-align: right;
}


.recipe-sharing .widgettitle {
		font-size: var(--pacific-font-size-medium);
		font-weight: 700;
		display: inline;
}


.recipe-sharing li {
		list-style: none;
		display: inline-block;
		margin-left: -12px;
}


.recipe-meta {
		/* justify-content: space-between; */
		justify-content: end;
}

/* Inline #27 | https://demo.badmath.com/think33/pacificfoods/recipes/beef-broth-marinated-skirt-steak-with-cilantro-lime-sauce/ */

.recipe-servings {
		margin-bottom: 1em;
		text-align: right;
}

/* Inline #27 | https://demo.badmath.com/think33/pacificfoods/recipes/beef-broth-marinated-skirt-steak-with-cilantro-lime-sauce/ */

.recipe-wrapper__steps h3 {
	margin-bottom: 1em;
}

.recipe-wrapper__steps .notes {
		margin-top: 1em;
		/* font-style: italic; */
}



.recipe-wrapper__products .product a {
		border-radius: var(--button--border-radius);
		background-color: var(--creamy-cauliflower);
		padding: 1em 1em 1em 125px;
		display: block;
}

.recipe-wrapper__products .product img {
		max-width: 125px !important;
		position: absolute;
		left: 0;
		top: 0;
}

.recipe-wrapper__products .product {
		position: relative;
		min-height: 125px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0.5em 0;
		font-size: 18px;
		font-weight: 700;
		line-height: 22px;
}


.recipe-wrapper__steps ol {
	list-style: none;
	counter-reset: item;
	padding-left: 40px;
}
.recipe-wrapper__steps ol li {
	counter-increment: item;
	margin-bottom: 1.5em;
	position: relative;
}
.recipe-wrapper__steps ol li:before {
	margin-right: 10px;
	content: counter(item);
	background-color: var(--ultramarine-green);
	color: white;
	border-radius: 100%;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-weight: 700;
	text-align: center;
	display: block;
	position: absolute;
	left: -40px;
}



/* style.css | https://demo.badmath.com/think33/pacificfoods/wp-content/themes/pfw-wp-pacific-foods-canada-theme/style.css?ver=1.0 */

.recipe-header {
		/* grid-template-columns: 1fr 1fr; */
		grid-template-columns: 2fr 1fr 1fr;
		padding: 30px 30px 0;
}

.recipe-sharing {
		/* grid-column: 2 / 3; */
		/* padding: 25px; */
		text-align: left;
		grid-column: 2 / 4;
		padding: 35px;
		grid-row: 2;
}
.recipe-image ~ .recipe-sharing {
		grid-column: 3;
}

.recipe-meta {
		justify-content: start;
}

/* Inline #29 | https://demo.badmath.com/think33/pacificfoods/recipes/beef-broth-marinated-skirt-steak-with-cilantro-lime-sauce/ */

.recipe-title {
		grid-column: 1 / 4;
}

.recipe-image ~ .recipe-title {
		grid-column: 2 / 4;
}


@media screen and (max-width: 960px) {
	.recipe-wrapper {
		margin-left: 90px;
		margin-right: 90px;
	}
}

@media screen and (max-width: 768px) {
	.recipe-wrapper {
		margin-left: 60px;
		margin-right: 60px;
	}
	.recipe-image {
		grid-row: 1 / 4;
	}
	.recipe-image ~ .recipe-meta {
		grid-column: 2 / 4;
		padding-top: 0;
		padding-bottom: 0;
	}
	.recipe-image ~ .recipe-sharing {
		grid-column: 2 / 4;
		grid-row: 3;
		padding-top: 20px;
	}
}


@media screen and (max-width: 640px) {
	.recipe-wrapper__inner { display: block; }
	.recipe-wrapper__description { margin-bottom: 2em; }
	.recipe-wrapper__steps { margin-top: 2em; }
}

@media screen and (max-width: 600px) {
	.recipe-header { display: block; }
	.recipe-meta {
		padding-top: 0;
		padding-bottom: 0;
	}
	.recipe-meta ul li { display: inline-block; margin-bottom: 12px; }
	.recipe-meta ul li:not(:last-child) { margin-right: 30px; }
	.recipe-sharing { padding-top: 1px !important; }
}

@media screen and (max-width: 480px) {
	.recipe-wrapper {
		margin-left: 30px;
		margin-right: 30px;
	}
}