/*
Theme Name: Ponti QNY
Author: QNY Creative
Author URI: http://qnycreative.com
Version: 1.0
*/

/* Fonts */
@import url("https://use.typekit.net/jhx1ubd.css");

/* Colors */
:root{
	--green:#093c33;
	--gold:#c1ab60;
	--cream:#faf8d7;
	--white:#fff;
	--text:#202020;
	--light-bg:#f4f4f4;
	--border:#ccc;
}

/* WordPress Core */
.alignleft{float:left; margin-right:1.5rem; margin-bottom:1rem}
.alignright{float:right; margin-left:1.5rem; margin-bottom:1rem}
.aligncenter{display:block; margin-left:auto; margin-right:auto; margin-bottom:1rem}
.alignwide{max-width:100%; margin-left:auto; margin-right:auto}
.alignfull{max-width:100vw; margin-left:calc(-50vw + 50%); width:100vw}
.wp-caption{max-width:100%; margin-bottom:1rem}
.wp-caption img{display:block; max-width:100%; height:auto}
.wp-caption-text,.wp-block-image figcaption,.gallery-caption{font-size:.875rem; color:#666; margin-top:.5rem; text-align:center}
img{max-width:100%; height:auto}
.screen-reader-text{clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute}
.entry-content::after{content:""; display:table; clear:both}

/* Reset */
*, *::before, *::after{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; font-size:16px}
body { font-family: "din-2014", sans-serif; min-height: 100vh; line-height: 1.5; overflow-x: hidden; font-weight: 400; font-size: 1.1rem; color: var(--text);}
img, picture, video, canvas, svg{display:block; max-width:100%; height:auto}
button{font:inherit; cursor:pointer; border:none; background:none}
a{text-decoration:none; color:inherit}
table{border-collapse:collapse; border-spacing:0}
h1,h2,h3,h4,h5,h6{font-family:"copperplate", serif; font-size:inherit; font-weight:inherit}
input, select, textarea{width:100%; padding:10px; border:1px solid var(--border); background:var(--white); font:inherit; border-radius:0; -webkit-appearance:none}
textarea{resize:none; min-height:120px}

/* Layout */
.content{width:1300px; margin:0 auto; padding:0}
.content:after{content:''; display:table; clear:both;}
.hidden{display:none !important}
.center{text-align:center !important}
.bg{display:flow-root}
.clearfix::after{content:''; display:table; clear:both}
.displayTable{ width: 100%; height: 100%; display: table;}
.tableCell { width: 100%; height: 100%; display: table-cell; vertical-align: middle;}

/* Column Layout */
.row{display:flex; flex-wrap:wrap; gap:15px}
.col{flex:1}
.col-1{flex:0 0 100%}
.col-2{flex:0 0 calc(50% - 7.5px)}
.col-3{flex:0 0 calc(33.333% - 10px)}
.col-4{flex:0 0 calc(25% - 11.25px)}
.col-5{flex:0 0 calc(20% - 12px)}

/* Notifications */
.msg{padding:12px 16px; font-size:1rem; margin:20px 0 0; display:none}
.msg.visible{display:block !important}
.msg.success{background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7}
.msg.error{background:#fbe9e7; color:#c62828; border:1px solid #ef9a9a}
.msg.warning{background:#fff8e1; color:#f57f17; border:1px solid #ffe082}

/* Button */
.btnGold{display:inline-block; background:var(--gold); color:var(--white); font-family: "din-2014", sans-serif; font-weight:500; font-size:20px; padding:10px 30px; border-radius:7px; text-transform:uppercase; letter-spacing:0.5px}
.btnGold:hover{opacity:0.9}

/* Blocks */
.block { position: relative; margin: 40px auto;}

/* header */
header{position:fixed; z-index:1000; left:0; top:0; width:100%; background:var(--green); height:76px; transition:height 0.3s, background 0.3s}
body.admin-bar header{top:32px}
header .logo { text-indent: -5000px; overflow: hidden; background: url("img/logo.svg") center center / contain no-repeat; aspect-ratio: 212 / 123; height: 105px; display: block; margin: 27px auto 0px;}
header .logo img{height:90px; width:auto}
body.scrolled header{height:60px; background:rgba(9,60,51,0.95)}
body.scrolled header .logo img{height:65px}

/* footer */
footer { background-color: var(--green); padding: 16px 0px; overflow: hidden;}
.footLogo{ text-indent: -5000px; overflow: hidden; float:left; width:200px; background:url(img/logo.svg) no-repeat center center / contain; aspect-ratio: 212/123;}
.footRight { float: right; color: var(--white); font-size: 14px; line-height: 1.25; text-align: left; padding: 26px 0px 0px; width: 198px;}

/* section */
section{ padding: 76px 0 0 0;}
.button { background: rgb(193, 171, 96); color: rgb(255, 255, 255); border-radius: 6px; padding: 7px 33px; text-transform: uppercase; display: inline-block; font-size: 20px;}

/* banner */
.banner{ margin: 0; height:477px; background: #000 no-repeat center center / cover;}
.banner h2 { font-family: "copperplate", serif; font-size: 86px; color: rgb(225, 212, 167); text-transform: uppercase; line-height: 1.1; margin: 0px; font-weight: 700; letter-spacing: 0.4rem;}
.banner h2 span { font-weight: 500; font-size: 46px; color: var(--white); text-transform: uppercase; letter-spacing: 0.36rem;}

body.home .banner{ height: 785px;}
body.home .banner h2{ color: #003C33; margin: 48px auto 0; font-size: 76px;}
body.home .banner h2 span{ font-size: 23px; display: block; letter-spacing: 0.24rem; margin: 0 0 7px;}
body.home .banner .tableCell{ vertical-align: top;}

/* recipe detail */
.rHero{ height:516px; background: #000 no-repeat center center / cover;}

/* featured recipes */
.rFeatured { text-align: center; margin-bottom: 18px;}
.recipeGridTitle { font-family: "din-2014", sans-serif; line-height: 1; font-weight: 500; font-size: 52px; color: var(--green); margin-bottom: 55px;}
.recipeGridInner { text-align: center; font-size: 0px; margin: 0px -5px;}
.recipeGridItem { display: inline-block; width: calc(25% - 10px); margin: 0px 5px 42px; vertical-align: top; font-size: 1rem; text-align: center;}
.recipeGridPhoto { width: 100%; position: relative; margin-bottom: 22px; background: rgb(204, 204, 204) center center / cover no-repeat; display: block; aspect-ratio: 1 / 1;}
.recipeGridItem h3{font-family: "din-2014", sans-serif; font-weight:400; font-size:24px; color:var(--green); line-height:1.3}

.rProduct { width: 527px; padding: 46px 40px; background: var(--green); text-align: center; display: table-cell; vertical-align: top;}
.rProductLabel { font-family: "din-2014", sans-serif; font-weight: 700; font-size: 18px; color: var(--gold); text-transform: uppercase;}
.rProductCard { background: var(--white) no-repeat center center / contain; border-radius: 25px; width: 265px; aspect-ratio: 1 / 1; margin: 30px auto 29px; position: relative; overflow: hidden; }
.rProductName { font-family: "din-2014", sans-serif; font-size: 25px; color: var(--white); margin-bottom: 28px;}
.btnSmall{font-size:15px; padding:10px 25px}
.rPrepCard ol { list-style-position: inside; padding-left: 0;}
.rPrepCard ol li{ margin-bottom: 15px;}
.rPrep{background:var(--light-bg); padding:60px 0}
.rPrepCard{max-width:939px; margin:0 auto; background:var(--white); border-radius:37px; box-shadow:0 4px 54px rgba(0,0,0,0.05); padding:60px 50px; text-align:center; font-size: 25px;}
.rPrepCard h3{font-family: "din-2014", sans-serif; font-weight:700; font-size:25px; color:var(--green); margin-bottom:20px}
.rInfo{background:var(--cream); overflow:hidden; position:relative}
.rInfoLeft { padding: 88px 60px 78px 0px; display: table-cell; vertical-align: top;}
.rTitle { font-family: "copperplate", serif; font-weight: 700; font-size: 36px; color: var(--green); text-transform: uppercase; line-height: 1.3; margin-bottom: 32px; letter-spacing: 0.27rem;}
.rIngredients h2 { font-family: "din-2014", sans-serif; font-weight: 700; font-size: 24px; color: var(--green); margin-bottom: 23px;}
.rIngredients{font-size:24px; line-height:1.6}
.rIngredients p{margin-bottom:4px}
.rIngredients ul { padding-left: 1.25rem; line-height: 1.3; margin-bottom: 20px;}

/* home slider */
.homeSlider { margin: 0px; height: 678px; position: relative; overflow: hidden; background: #093c33;}
.homeSlider ul{ list-style-type: none; width: 9999px; position: absolute; left: 0; top:0; height: 100%;}
.homeSlider ul li{ float: left; position: relative; width: 100vw; height: 100%;}
.homeSlider ul li .theBg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; filter: blur(4px); opacity: 0.4; }
.homeSlider .paginator { position: absolute; left: calc(50% - 630px); bottom: 12px; z-index: 2;}
.homeSlider .paginator span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgb(9, 60, 51); margin: 0px 4px; cursor: pointer; opacity: 0.4; transition: 0.3s;}
.homeSlider .paginator span:hover,
.homeSlider .paginator span.active{ opacity: 1;}
.homeSlider .content{ width: 100%; height: 100%; position: relative; z-index: 2;}
.homeSlider .filler{ display: table-cell; width: calc(100% - 534px); position: relative;}
.homeSlider .filler .img{ position: absolute; width:100%; height:100%; right:0; top:0; background: no-repeat center center / cover; }
.homeSlider .text{ text-align: center; background: #FAF8D7; display: table-cell; vertical-align: middle;  width: 534px; height: 100%;}
.homeSlider .text h1, .homeSlider .text h2 { font-family: "copperplate", serif; font-size: 36px; color: var(--green); text-transform: uppercase; line-height: 1.6; margin: 0px auto 27px; letter-spacing: 0.25rem;}
.homeSlider .text h2 span, .homeSlider .text h1 span { display: block; font-family: "din-2014", sans-serif; font-weight: 700; font-size: 32px; text-transform: uppercase; color: var(--green); letter-spacing: 3.2px; line-height: 1;}
.homeSlider .text .product{ background: no-repeat center center / contain; aspect-ratio: 1/1; margin: 0 auto; width: 480px;}

/* sustainability */
.sustainability { background:#0a3328 no-repeat center center / cover; padding: 50px 0px 104px; text-align: center; margin: 0px;}
.sustainability h2 { font-family: "copperplate", serif; font-size: 38px; color: var(--gold); text-transform: uppercase; margin-bottom: 30px; letter-spacing: 0.25rem;}
.sustainability .row h2 { font-family: "din-2014", sans-serif; font-weight: 700; font-size: 26px; color: var(--white); text-transform: uppercase; line-height: 1.25; margin-bottom: 31px; letter-spacing: 0px; border-bottom: 1px solid rgb(255, 255, 255); padding: 0px 0px 30px;}
.sustainability .row .image { background: center center / contain no-repeat; aspect-ratio: 1 / 1; margin: 0px auto 23px; width: 90%;}
.sustainability .row .text { padding: 0px 35px; color: rgb(255, 255, 255); line-height: 1.2;}
.sustainability .row .col-4:first-of-type .image{ background-size: 140px auto;}
.sustainability .paginator { display: none;margin-top: 62px; text-align: center;}
.sustainability .paginator span { display: inline-block; width: 17px; height: 17px; border-radius: 50%; background: rgb(217, 217, 217); margin-right: 10px; cursor: pointer;}
.sustainability .paginator span:hover { background: rgb(0, 0, 0);}
.sustainability .paginator span.active{background:#BAA769;}

/* productShowcase */
.productShowcase{ padding:60px 0 0}
.productShowcase .content{ display: table;}
.productShowcase .left{  display: table-cell; width:50%; background:var(--white); position:relative; box-shadow:1px 4px 20px 10px rgba(0,0,0,0.02)}
.productShowcase .left .border{position:absolute; left:23px; top:23px; right:23px; bottom:23px; border:2px solid var(--gold)}
.productShowcase .left h2{font-family:"copperplate", serif; font-size:48px; color:var(--green); text-transform:uppercase; text-align:center; line-height:1.2}
.productShowcase .left .productAwards{display:block; margin:40px auto 0; max-width:484px}
.productShowcase .right { background-color: var(--green); display: table-cell; width: 50%; position: relative; padding: 80px 40px 65px 297px;}
.productShowcase .right h2 { font-family: "din-2014", sans-serif; font-weight: 700; font-size: 36px; color: var(--white); margin-bottom: 32px;}
.productShowcase .right h2 img { display: inline-block; vertical-align: sub; margin: 0px 10px 0px 0px;}
.productShowcase .right .paginator { margin-top: 25px;}
.productShowcase .right .paginator span { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); margin-right: 6px; cursor: pointer;}
.productShowcase .right .paginator span:hover{ background: rgba(255,255,255,1);}
.productShowcase .right .paginator span.active{background:#BAA769;}
.productShowcase .right .product { position: absolute; left: -129px; top: -83px; width: 550px; aspect-ratio: 1 / 1; max-width: none; z-index: 2; pointer-events: none;}
.productShowcase:first-of-type .right .product { left: -154px; top: -123px; width: 600px;}
.productShowcase .right .textSlides ul { transition: 0.3s ease; list-style-type: none; position: relative; width: 100%; height: 196px;}
.productShowcase .right .textSlides ul li { display: none; color: rgb(255, 255, 255); font-size: 24.5px; position: absolute; left: 0px; top: 0px; width: 100%; line-height: 1.2; font-weight: 300;}
.productShowcase .right .textSlides ul li:first-of-type{ display: block;}
.productShowcase .right .button { margin: 27px 0 0;}

hr{ background: none; border: solid #C1AB60; border-width: 2px 0; height: 8px; margin: 20px auto 30px;}

/* textWithImageSlides */
.textWithImageSlides { margin: 0px;}
.textWithImageSlides .content{ width: 100%; display: table; overflow-x: hidden;}
.textWithImageSlides .left{ display: table-cell; width:50%; position: relative;}
.textWithImageSlides .left .theBg{ position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover;}
.textWithImageSlides .left ul { list-style-type: none; width: 100%; height: 100%;}
.textWithImageSlides .left ul li { display: none; }
.textWithImageSlides .left ul li.contain{ background-color: #EAEADF; background-size: contain; background-position: center center; padding: 20px 0;}
.textWithImageSlides .left ul li:first-of-type{ display: block;}

.textWithImageSlides .right { color: rgb(0, 0, 0); display: table-cell; width: 50%; padding: 95px 0px 90px;}
.textWithImageSlides .right h2 { color: var(--green); font-weight: bold; font-size: 40px; letter-spacing: 0.16rem; margin: 0px 0px 27px;}
.textWithImageSlides .textSlides { text-align: center; }
.textWithImageSlides .textSlides ul { transition: 0.3s ease; list-style-type: none; position: relative; width: 100%; height: 196px;}
.textWithImageSlides .textSlides ul li { display: none; font-size: 24.5px; position: absolute; left: 0px; top: 0px; width: 100%; line-height: 1.2; font-weight: 300;}
.textWithImageSlides .textSlides ul li img { display: block; margin: 0px auto 28px;}
.textWithImageSlides .textSlides ul li:first-of-type{ display: block;}
.textWithImageSlides .paginator { margin-top: 62px; text-align: center;}
.textWithImageSlides .paginator span { display: inline-block; width: 17px; height: 17px; border-radius: 50%; background: rgb(217, 217, 217); margin-right: 10px; cursor: pointer;}
.textWithImageSlides .paginator span:hover { background: rgb(0, 0, 0);}
.textWithImageSlides .paginator span.active{background:#BAA769;}

/* fullwidthText */
.fullwidthText ul, .fullwidthText ol{padding-left:1.25em}
.sourcingArea{ text-align: center; color: #fff; font-size: 20px;}
.sourcingArea h2{ color: #C1AB60; font-size: 38px; letter-spacing: 0.25rem;}
.sourcingArea.row { align-items: center; padding: 70px 0px;}

/* textWithImage */
.textWithImage .content{display:flex; align-items:stretch; overflow-x: hidden;}
.textWithImage .image{flex:0 0 50%; position:relative}
.textWithImage .image img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; display:block}
.textWithImage .text{flex:1 1 0%; display:flex; align-items:center; font-size: 21px;}
.textWithImage.Left .content{flex-direction:row}
.textWithImage.Right .content{flex-direction:row-reverse}
.textWithImage .text p{margin-bottom:1em}
.textWithImage .text p:last-child{margin-bottom:0}
.textWithImage.Left .text{padding:30px 60px}
.textWithImage.Right .text{padding:30px 60px 30px 0}

body.home .twi0{ margin: 0;}
body.home .twi0 .content{ width: 100%;}
body.home .twi0 .theBg{ aspect-ratio: 322/354; background: no-repeat center center / contain; width: 310px; margin: 0 auto;}
body.home .twi0 .image{ padding: 50px 0;}
body.home .twi0 .image:before{ z-index: -1; content: ''; position: absolute; right: 0; top: 0; width:50vw; height: 100%; background: url(img/HeritageBG.jpg) no-repeat center center / cover;}
body.home .twi0 .text{ text-align: center; padding: 0; background:url(img/number1Brand2.svg) no-repeat center center / auto 80%; flex-direction:column; justify-content:center; }

/* walmart bar */
.walmartHome{ align-items: center;}
.fullwidthText:has(.walmartHome){ margin: 25px auto;}
.walmartHome img{ vertical-align: middle; display: inline-block;}
.walmartHome .button{ vertical-align: middle; color: #fff; background-color: #FFC220; border-radius: 0; margin-right: 70px; text-transform: none;}
.walmartHome .left{ text-align: left;}
.walmartHome .right{ text-align: right;}

/* Responsive BG */
.rbg{background-image:var(--bg-desktop) !important;}

/*body{ background:url(screenshot.png) no-repeat center -8px / 1518px auto;}*/

/* desktop */
@media(min-width:1300px){
	.showMobile{ display: none;}
}

/* tablet and desktop */
@media(min-width:768px){
	.showIphone{display:none !important;}
	.content.secondary{ width: 100%;}
}

/* tablet */
@media(max-width:1299px){
	html{font-size:14px}
	.content,
	.content.secondary,
	.textWithImageSlides .content{width:780px; padding:0}
	body{min-width:810px}
	.showDesktop, 
	.hideMobile{display:none !important}
	.showMobile{ display: block;}

	.productCardTable{ display: table; width: 100%; margin: 0 0 20px;}
	.productCardTable:last-child{ margin: 0;}

	/* Banner */
	.banner{height:350px}
	.banner h2{font-size:56px; letter-spacing:0.3rem}
	.banner h2 span{font-size:32px}
	body.home .banner h2 { margin: 27px auto 0; font-size: 52px; line-height: 1.2;}
	body.home .banner h2 span { font-size: 27px; margin: 0 0 -3px;}
	body.home .banner .content{ width: 100%;}

	/* Home Slider */
	.homeSlider .content{ width: 780px;}
	.homeSlider .paginator { left: calc(50% - 370px);}
	.homeSlider .text{ width: 380px;}
	.homeSlider .filler{ width: calc(100% - 380px);}
	.homeSlider .text h1, .homeSlider .text h2{ font-size: 28px; letter-spacing: 0.18rem;}
	.homeSlider .text h2 span, .homeSlider .text h1 span{ font-size: 24px;}
	.homeSlider .text .product{ width: 350px;}

	/* textWithImage */
	.textWithImage .content{flex-direction:column !important}
	.textWithImage .image{min-height:250px}
	.textWithImage .text{padding:20px !important}

	/* Heritage (twi0) */
	body.home .twi0 .content{ width: 100%;}
	body.home .twi0 .image::before{ width: 100%;}
	body.home .twi0 .theBg{ width: 236px;}

	/* Sourcing */
	.row { display: block;}
	.sustainability .row{ display: flex; flex-wrap: wrap; gap: 15px;}
	.sustainability .row .col-4{ flex: 0 0 calc(50% - 7.5px);}
	.sourcingArea h2 { color: #C1AB60; line-height: 1.2; font-size: 30px;}
	.sourcingArea.row{ padding: 0;}
	.sourcingArea .center { text-align: center !important; font-size: 18px; padding: 23px 30px 95px; line-height: 1.3;}

	/* textWithImageSlides */
	.textWithImageSlides { margin: -99px auto 0; position: relative; z-index: 2;}
	.textWithImageSlides .left .theBg{ width: 100%; height: 300px; border-radius: 20px; position: relative; left: auto; top: auto;}
	.textWithImageSlides .left { background:none; display: block; width: 100%; position: relative; }
	.textWithImageSlides .right { padding: 30px 0; display: block; width: 100%;}
	.textWithImageSlides .right h2{ font-size: 32px; margin: 0 0 11px;}
	.textWithImageSlides .textSlides ul li{ font-size: 20px;}
	.textWithImageSlides .paginator { margin-top: 40px;}

	/* Product Showcase */
	.productShowcase{ padding: 0; margin: 60px auto; overflow: hidden;}
	.productShowcase.ps1{ margin: 0 auto; }
	.productShowcase .content,
	.productShowcase .left,
	.productShowcase .right{ width: 100%; display: block;}
	.productShowcase .left{ padding: 0 0 66px; background: none; width: 780px; margin: 0 auto; box-shadow: none;}
	.productShowcase .left .border { position: relative; left: auto; top: auto; right: auto; bottom: auto; border: none;}
	.productShowcase .left h2{ font-size: 36px; margin-bottom: -23px;}
	.productShowcase .left .productAwards { max-width: 400px;}
	.productShowcase:first-of-type .right .product { left: calc(50% - 372px); top: -111px; width: 496px;}
	.productShowcase .right { padding: 30px 175px 30px 390px; width: 780px; position: relative; margin: 0 auto; }
	.productShowcase .right::before { content: ''; width: 500vw; position: absolute; left: -250vw; height: 100%; background: var(--green); top: 0px;}
	.productShowcase .right h2{ font-size: 28px; margin-bottom: 37px;}
	.productShowcase .right .textSlides ul li{ font-size: 20px;}
	.productShowcase .right .displayTable{ position: relative; z-index: 1;}
	.productShowcase.ps1 .right .product { left: calc(50% - 336px); top: -67px; width: 425px;}
	hr{ margin: 20px auto 0px}

	/* Recipe */
	.recipeGridTitle{font-size:40px}
	.recipeGridItem h3{font-size:20px}
	.rFeatured .recipeGridTitle{font-size:36px; margin-bottom:35px}
	.rFeatured .recipeGridItem h3{font-size:20px}
	.rFeatured .content{ width: 100%;}
	.rFeatured{ overflow: hidden;}

	/* walmart bar */
	.walmartHome.row{ display: flex;}
	.walmartHome .col-2.left{ flex:0 0 calc(40% - 7.5px);}
	.walmartHome .col-2.right{ flex:0 0 calc(60% - 7.5px);}
	.walmartHome .button{ margin-right: 30px;}
	.walmartHome img{ transform: scale(0.8);}

	/* Recipe Detail */
	.rHero{height:380px}
	.rInfo{display:block}
	.rInfoLeft{display:block; width:100%; padding:50px 40px}
	.rTitle{font-size:30px; letter-spacing:0.2rem}
	.rIngredients{font-size:20px}
	.rIngredients h3{font-size:20px}
	.rProduct{display:block; width:100%; padding:35px 40px; min-height:auto; overflow:hidden}
	.rProductCard{ width:200px; aspect-ratio:auto; height:240px; display: table-cell; margin: 0;}
	.rProductLabel{margin-bottom:12px}
	.rProductName{font-size:22px; margin-bottom:18px}
	.rPrep{padding:50px 0}
	.rPrepCard{max-width:700px; padding:40px 35px; font-size:20px; border-radius:30px}
	.rPrepCard h3{font-size:20px}
	.rPrepCard p, .rPrepCard ol, .rPrepCard li{font-size:20px}

	.tGroup{ vertical-align: middle; display: table-cell;}
	.rProduct .content.secondary{ display: table;}
	.content.primary{ width: 100%;}

	.homeSlider .content{ width: 100%;}
	.homeSlider .paginator { left: calc(50% - 400px);}

	.productShowcase .right h2 img { transform: translateY(5px);}
}

/* phone */
@media(max-width:767px){
	html{font-size:11px}
	.content, 
	.content.secondary,
	.textWithImageSlides .content{width:370px; padding:0}
	body{min-width:390px}

	#wpadminbar,
	.hideIphone{ display: none !important;}
	body.admin-bar header { top: 0;}
	body.admin-bar{ margin-top: -46px;}
	
	section { padding: 80px 0 0 0;}

	.recipeGridInner { margin: 0px -2px;}

	.banner{ height: 245px;}
	.banner h2 { font-size: 34px;line-height: 1.1; letter-spacing: 0.4rem;}
	.banner h2 span {  font-size: 24px; letter-spacing: 0.36rem; display: block; margin: 0 0 -38px;}
	body.home .banner { height: 475px; border-radius: 33px; width: 360px; margin: 23px auto;}
	body.home .banner h2 { font-size: 34px;}

	/* Header */
	header{height:80px}
	header .logo img{height:55px}
	body.scrolled header .logo img{height:50px}

	.productAwards{max-width:300px}

	/* Home Slider */
	.homeSlider { height: 734px;}
	.homeSlider .paginator { left: auto; bottom: auto; top: 210px; right: 10px;}
	.homeSlider ul li .theBg{ display: none;}
	.homeSlider .content{ width: 100%;}
	.homeSlider .text{ position: relative; display: block; width: 100%; height: 503px;}
	.homeSlider .filler { display: block; width: 100%; height: 232px;}
	.homeSlider .text .product{ position: absolute; left: calc(50% - 344px); top: -133px; width: 480px;}
	.homeSlider .text h1,
	.homeSlider .text h2{ font-size: 33px; position: absolute; left: 0; bottom: 0; width: 100%;}
	.homeSlider .text h2 span, .homeSlider .text h1 span{ font-size: 27px;}
	.homeSlider .text:before{ content: ''; background: url(img/number1Brand.svg) no-repeat center center / contain; width: 180px; aspect-ratio: 1/1; position: absolute; left: calc(50% + 17px); top: 74px; opacity: 0.9;}

	/* Heritage (twi0) */
	body.home .twi0 .image { padding: 21px 0 50px}
	body.home .twi0 .text { width: 370px; margin: 0 auto; padding: 30px 17px 30px !important; font-size: 18px; line-height: 1.28; background: none;}

	/* Sourcing */
	.sourcingArea h2 { font-size: 24px;}
	.sourcingArea .center { font-size: 17px;}

	/* textWithImageSlides */
	.textWithImageSlides { margin: -99px auto 0; position: relative; z-index: 2;}
	.textWithImageSlides .left .theBg{ height: 190px;}
	.textWithImageSlides .textSlides ul li img{ max-width: 145px;}
	.textWithImageSlides .right h2{ font-size: 27px;}
	.textWithImageSlides .textSlides ul li img{ margin: 0 auto 17px;}
	.textWithImageSlides .textSlides ul li{ font-size: 18px;}
	.textWithImageSlides .textSlides ul li .center{ padding: 0 50px;}
	.textWithImageSlides .paginator span{ width: 14px; height: 14px;}

	/* Product Showcase */
	.productShowcase .left{ width: 370px;}
	.productShowcase .left h2{ font-size: 30px;}
	.productShowcase .left .productAwards { max-width: 310px;}
	.productShowcase .right { padding: 30px 0 30px 175px; width: 370px;}
	.productShowcase .right h2{ font-size: 23px;}
	.productShowcase .right .textSlides ul li{ font-size: 17.5px;}
	.productShowcase.ps1 .right .product { left: calc(50% - 336px); top: -67px; width: 425px;}
	hr{ margin: 20px auto -10px;}

	/* Recipe */
	.recipeGridTitle{font-size:32px}
	.rFeatured .recipeGridInner{ display: flex; overflow: visible; margin: 0; padding: 0; transition: transform 0.35s ease;}
	.rFeatured .recipeGridItem{ flex: 0 0 40%; width: auto; margin: 0 2%;}
	.recipeGridItem:not(.rFeatured .recipeGridItem) { width: calc(50% - 4px); margin: 0px 2px 30px;}
	.recipeGridItem h3{font-size:18px; padding: 0 10px;}
	.rFeatured .recipeGridTitle { font-size: 22px; font-weight: 700; margin-bottom: 44px;}
	.rFeatured .recipeGridPhoto { aspect-ratio: 1 / 0.9; margin-bottom: 14px;}
	.rFeatured .recipeGridItem h3 { font-size: 16px; line-height: 1.2;}

	/* Recipe Detail */
	.rHero{height:262px}
	.rInfoLeft { padding: 34px 0px;}
	.rTitle { font-size: 20px; letter-spacing: 0.13rem; margin-bottom: 31px; line-height: 1.24;}
	.rIngredients{font-size:16px; line-height:1.4}
	.rIngredients h3 { font-size: 16px; margin-bottom: 20px;}
	.rProduct { padding: 30px 20px; text-align: left;}
	.rProductCard { float: left; width: 142px; aspect-ratio: auto; height: 190px; margin: 0px 24px 0px 0px; border-radius: 25px;}
	.rProductLabel { font-size: 19px;}
	.rProductName { font-size: 18px; margin-bottom: 15px;}
	.btnSmall{font-size:15px; padding:10px 20px}
	.rPrep{padding:40px 0}
	.rPrepCard { border-radius: 23px; padding: 22px 18px; font-size: 16px;}
	.rPrepCard h3 { font-size: 16px; margin-bottom: 16px;}
	.rPrepCard p, .rPrepCard ol, .rPrepCard li{font-size:16px}

	/* Sustainability slider */
	.sustainability .wrapper{ overflow: hidden;}
	.sustainability .row{ display: flex; flex-wrap: nowrap; transition: transform 0.3s ease; gap: 0;}
	.sustainability .row .col-4{ flex: 0 0 100%; min-width: 100%; padding: 0 20px;}
	.sustainability .paginator{ display: block;}
	.sustainability .paginator span:first-child{ background: #BAA769;}
	.sustainability{ padding:50px 0 40px;}
	.sustainability h2{ margin-bottom: 60px; letter-spacing: 0.3rem; font-size: 27px; line-height: 1.4; padding: 0 0 20px;}
	.sustainability .row .image{ width: 61%;}
	.sustainability .row .col-4:first-of-type .image { background-size: contain;}
	.sustainability .row .text{ font-size: 20px;}
	.sustainability .paginator { margin-top: 40px;}
	.sustainability .paginator span {width: 14px; height: 14px;}

	/* walmart bar */
	.walmartHome.row{ display: block;}
	.walmartHome .col-2.left,
	.walmartHome .col-2.right{ text-align: center;}
	.walmartHome .button{ margin: 30px auto 10px;}
	.walmartHome img{ transform: scale(0.8); display: block; margin: 0 auto;}

	/* Footer */
	.footLogo { width: 146px; }
	.footRight { padding: 0px;}

	.productShowcase .right h2 img { transform: translateY(8px);}
}