:root {
  --proximaNovaRegular: "ProximaNova-Regular"; 
  --proximaNovaBold: "ProximaNova-Bold";
  --proximaNovaSemibold:"ProximaNova-Semibold";
  --font48: 48px;
  --font40: 40px;
  --font32: 32px;
  --font30: 30px;
  --font24: 24px;
  --font20: 20px;
  --font18: 18px;
  --font16: 16px;
  --font14: 14px;
  --font12: 12px;
  --clrwhite: #ffffff;
  --clrblack: #000000;
  --campbellsRed: #BA0018;
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  margin: 0;
  padding: 0;
  font-family: var(--proximaNovaRegular);
}
@media only screen and (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }
}

body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  overflow-x: hidden;
  font-family: var(--proximaNovaRegular);
}
p, div {
  line-height: normal;
}
footer p, footer div {
  line-height: inherit;
}
footer nav {
  text-align: left;
}

a {
  line-height: normal;
  text-decoration: none;
}

h2, h3 {
  line-height: normal;
}
button {
  font-family: var(--proximaNovaRegular);
}
/* Base CSS = Desktop 1024px - 1439px */
.main-container {
  position: relative;
  z-index: 0;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/*pdp hero component css starts*/
.pdp-hero-component-wrapper {
    background-color: var(--clrwhite);
    position: relative;
    z-index: 1;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    position: relative;
}
.pdp-hero-component-inner {
    margin: 0 auto;
    text-align: center;
    padding: 0;
    position: relative;
    width: 100%;
    max-width: 1440px;
}
.pdp-hero-content-container {
  width: 100%;
  display: flex;
  padding: 40px 80px;
}
.pdp-hero-left-content {
  width: 50%;
  display: flex;
  justify-content: flex-start;
}
.pdp-hero-right-content {
  width: 50%;
}
.pdp-hero-right-content #bvsection {
  margin-bottom: 30px;
}
#tns2-ow {
  width: 80px;
  order: 1;
  position: relative;
}
#tns1-ow {
  width: 425px;
  order: 2;
  position: relative;
  box-shadow: 0px 0px 4px 0px #00000040;
  border-radius: 8px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  height: 400px;
}

.pdp-hero-slider-item {
  width: 100%;
  max-width: 100%;
}
.pdp-hero-slider-item img {
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  min-height: 300px;
}
.pdp-hero-thumb-slider {
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 4px;
}

.pdp-hero-thumb-item {
  border-top: 1.64px solid #DEDEDE;
  box-shadow: 0px 0px 0px 3px #BA001826;
  border-radius: 8px;
  width: 60px;
  height: 60px;
  padding: 10px;
  margin-bottom: 15px;
}
.pdp-hero-thumb-slider .tns-nav-active{
  border: 2px solid var(--campbellsRed);
}
.pdp-hero-thumb-item img {
  width: 30px;
  max-width: 100%;
  margin: 0 auto;
}
#tns2-mw {
  height: auto!important;
}
.pdp-hero-sub-title {
  font-weight: 700;
  font-size: var(--font14);
  line-height: 16px;
  letter-spacing: 2px;
  color: var(--clrblack);
  text-align: left;
  margin: 10px 0;
}
.pdp-hero-heading {
  font-weight: 700;
  font-size: var(--font48);
  line-height: 58px;
  letter-spacing: -2px;
  color: var(--clrblack);
  text-align: left;
  margin: 10px 0;
}
.pdp-ratings-reviews {
  width: 100%;
}
.hero-pdp-text {
  color: #1B1C1C;
  font-weight: 400;
  font-size: var(--font14);
  text-align: left;
  margin-bottom: 30px;
}
.varient-card-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.varient-card {
  width: 80px;
  height: 40px;
  border-radius: 24px;
  padding: 4px 16px;
  white-space: nowrap;
  border: 1px solid #00000033;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 30px 20px 0;
  font-size: var(--font14);
  line-height: 24px;
  font-weight: 700;
  color: var(--clrblack);
  outline: 0;
  text-decoration: none;
}
.varient-card-active, .varient-card-active:hover {
  color: var(--campbellsRed);
  border: 1px solid var(--campbellsRed);
  outline: 0;
}
/*pdp hero component css ends*/

/*pdp-content-component css starts*/
.pdp-content-component {
    background-color: #F5F5F5;
    position: relative;
    z-index: 1;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    position: relative;
}
.pdp-content-component-inner {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 80px;
    position: relative;
    display: flex;
}
.pdp-content-component-left {
  width: 50%;
}
.pdp-content-component-right {
  width: 50%;
}
.pdp-content-heading {
  font-size: var(--font32);
  line-height: 38px;
  font-weight: bold;
  color: #000000;
  margin: 20px 0;
  text-align: left;
}
.pdp-content-list-wrapper {
  width: 100%;
}
.pdp-content-list-wrapper ul {
  margin: 0;
  padding: 0;
}
.pdp-content-list-wrapper ul li {
  list-style-type: none;
  background: url('./../../images/dot.svg') no-repeat 10px 22px var(--clrwhite);
  padding: 16px 16px 16px 30px;
  border-radius: 8px;
  color: #1B1C1C;
  margin-bottom: 8px;
  text-align: left;
  font-size: var(--font14);
  line-height: 24px;
}

.dietary-allergens-heading {
  font-size: var(--font20);
  line-height: 24px;
  font-weight: 600;
  color: #000000;
  margin: 20px 0 20px 40px;
  text-align: left;
}
.dietary-allergens-list-wrapper {
  width: 100%;
}
.dietary-allergens-list-wrapper ul {
  margin: 0 0 0 40px;
  padding: 0;
}
.dietary-allergens-list-wrapper ul li {
  list-style-type: none;
  background: var(--clrwhite);
  padding: 16px;
  border-radius: 8px;
  color: var(--clrblack);
  margin-bottom: 8px;
  text-align: left;
  border: 1px solid #DEDEDE;
  display: flex;
  align-items: center;
  font-size: var(--font14);
  line-height: 20px;
  font-weight: 600;
}
.dietary-allergens-list-wrapper ul li img {
  margin-right: 10px;
}
.pdp-recipe-contains {
  background: var(--clrwhite);
  padding: 16px;
  border-radius: 8px;
  color: var(--clrblack);
  margin: 12px 0 0 40px;
  text-align: left;
  border: 1px solid var(--campbellsRed);
}
.contains-heading {
  font-size: var(--font12);
  line-height: 18px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--campbellsRed);
  width: 100%;
  text-align: left;
  margin: 5px 0;
  letter-spacing: 2px;
}
.contains-text {
  font-size: var(--font14);
  line-height: 21px;
  font-weight: 400;
  color: #1B1C1C;
  width: 100%;
  text-align: left;
  margin: 5px 0;
}
/*pdp-content-component css ends*/

/*cook with it css starts*/
.pdp-cook-with-component {
    background-color: var(--campbellsRed);
    position: relative;
    z-index: 1;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    position: relative;
}
.pdp-cook-with-component-inner {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 80px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.pdp-cook-with-component-left {
  width: 50%;
}
.pdp-cook-with-component-right {
  width: 45%;
}
.pdp-cook-with-heading {
  font-size: var(--font32);
  line-height: 38px;
  font-weight: bold;
  color: var(--clrwhite);
  margin: 20px 0;
  text-align: left;
  width: 100%;
}
.pdp-cook-with-component-recipe {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.pdp-cook-recipe-details {
  display: flex;
  padding: 18px 20px;
  background: var(--clrwhite);
  width: 100%;
  flex-wrap: wrap;
  flex-direction: column;
}
.pdp-cook-recipe-heading {
  font-size: var(--font20);
  line-height: 30px;
  font-weight: bold;
  color: var(--clrblack);
  margin: 10px 0;
  text-align: left;
}
.pdp-cook-recipe-time {
  color: #767676;
  font-size: var(--font12);
  line-height: 18px;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  text-align: left;
}
.pdp-cook-recipe-text {
  color: #1B1C1C;
  font-size: var(--font14);
  line-height: 24px;
  position: relative;
  width: 100%;
  text-align: left;
}
.pdp-cook-recipe-text-arrow {
  width: 21px;
  height: 20px;
  background: url('./../../assets/images/arrow-right-pdp.svg') no-repeat 0 0;
  position: absolute;
  bottom: 0;
  right: 0;
}
.pdp-recipe-card-wrapper {
  width: 100%;
  display: flex;
  background: var(--clrwhite);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.pdp-recipe-card-left {
  width: 20%;
  display: flex;
}
.pdp-recipe-card-left img {
  width: 100%;
  max-width: 100%;
}
.pdp-recipe-card-right {
  width: 75%;
  margin-left: 20px;
}
.pdp-recipe-collection-heading {
  font-size: var(--font16);
  line-height: 24px;
  color: var(--campbellsRed);
  font-weight: bold;
  width: 100%;
}
.pdp-recipe-collection-text {
  font-size: var(--font12);
  line-height: 18px;
  color: var(--campbellsRed);
  font-weight: 400;
  width: 100%;
}
/*cook with it css ends*/

/*how to prepare component css starts*/
.pdp-how-to-prepare-component {
    background-color: var(--clrwhite);
    position: relative;
    z-index: 1;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    position: relative;
}
.pdp-how-to-prepare-component-inner {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 80px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.how-to-prepare-heading {
  font-size: var(--font32);
  line-height: 40px;
  color: var(--clrblack);
  width: 100%;
  text-align: left;
  margin: 10px 0;
  font-weight: bold;
}

.pdp-how-to-prepare-card-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pdp-how-to-prepare-card {
  padding: 24px 16px;
  width: 350px;
  border-radius: 8px;
  border: 1px solid #DEDEDE;
  margin-right: 15px;
}
.pdp-how-to-prepare-card .how-to-prepare-heading {
  color: var(--campbellsRed);
  font-size: var(--font20);
  line-height: 24px;
}
.how-to-prepare-text {
  width: 100%;
  font-size: var(--font14);
  line-height: 24px;
  color: #1B1C1C;
  font-weight: 400;
  margin: 10px 0;
  text-align: left;
}

.how-to-prepare-description-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin: 24px 0;
}
.how-to-prepare-description-left {
  width: 30%;
  text-align: left;
  font-size: var(--font32);
  line-height: 40px;
  font-weight: bold;
}
.how-to-prepare-description-right {
  width: 65%;
  text-align: left;
  font-size: var(--font16);
  line-height: 28px;
  color: #1B1C1C;
}
/*how to prepare component css ends*/

/*ways to enjoy it css starts*/
.pdp-ways-to-enjoy-component {
    background-color: var(--campbellsRed);
    position: relative;
    z-index: 1;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    position: relative;
}
.pdp-ways-to-enjoy-component-inner {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 80px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.pdp-ways-to-enjoy-heading {
  width: 100%;
  font-size: var(--font20);
  line-height: 24px;
  color: var(--clrwhite);
  font-weight: 600;
  margin: 10px 0 20px 0;
  text-align: left;
}
.pdp-ways-to-enjoy-caurosel {
  width: 100%;
  border-radius: 0;
  background-color: transparent;
  padding: 16px;
  display: flex;
}
.ways-to-enjoy-caurosel-item {
  width: 100%;
  display: flex !important;
  margin: 0 20px;
  border-radius: 24px;
}
.ways-to-enjoy-caurosel-item-left {
  width: 65%;
}
.ways-to-enjoy-caurosel-item-left img {
  border-radius: 24px;
}
.ways-to-enjoy-caurosel-item-right {
  width: 35%;
  padding: 10px;
  position: relative;
}
.ways-to-enjoy-caurosel-item-right .read_more {
  position: absolute;
  right: 20px;
  bottom: 20px
}
.ways-to-enjoy-caurosel-item-right .read_more a, .ways-to-enjoy-caurosel-item-right .read_more a:hover {
  color: var(--campbellsRed);
  text-decoration: none;
  border: 0;
  outline: 0;
}
.pdp-cauroesl-sub-heading {
  font-size: var(--font12);
  line-height: 16px;
  font-weight: bold;
  text-align: left;
  color: var(--campbellsRed);
  margin: 10px 0;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.pdp-cauroesl-heading {
  font-size: var(--font20);
  line-height: 140%;
  font-weight: 600;
  text-align: left;
  color: var(--clrblack);
  margin: 10px 0;
  letter-spacing: -5%;
}
.pdp-cauroesl-text {
  font-size: var(--font14);
  line-height: 24px;
  font-weight: 400;
  color: var(--clrblack);
  text-align: left;
}
.pdp-ways-to-enjoy-component-inner .tns-nav {
    position: absolute;
    bottom: 0;
    left: 49%;
    transform: translateX(-49%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.pdp-ways-to-enjoy-component-inner .tns-nav button {
    background-color: var(--clrwhite);
    margin: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--clrwhite);
    opacity: .5;
}
.pdp-ways-to-enjoy-component-inner .tns-nav button.tns-nav-active {
    background-color: var(--clrwhite);
    opacity: 1;
    width: 24px;
    height: 8px;
    border-radius: 4px;
}
/**/

/*more recipes component css starts*/
.pdp-more-recipes-component {
    background-color: #F5F5F5;
    position: relative;
    z-index: 1;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    position: relative;
}
.pdp-more-recipes-component-inner {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 80px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.pdp-more-recipes-heading2 {
  font-size: var(--font32);
  line-height: 24px;
  color: var(--clrblack);
  margin: 10px 0 30px 0;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
.pdp-more-recipes-component-inner .product-card-list-inner .product-card-grid-btn,
.pdp-more-recipes-component-inner .product-card-list-inner .product-card-grid-btn:hover {
  font-size: var(--font12);
  line-height: 24px;
  color: var(--clrwhite) !important;
  margin: 10px 0;
  border-radius: 24px;
  height: 48px;
  width: 90%;
  background: var(--campbellsRed) !important;
  text-decoration: none;
  border: 0;
  outline: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.pdp-more-recipes-component-inner .product-card-list-inner .buy-now-btn,
.pdp-more-recipes-component-inner .product-card-list-inner .buy-now-btn:hover {
  font-size: var(--font12);
  line-height: 24px;
  color: var(--campbellsRed);
  margin: 0;
  width: 100%;
  text-decoration: none;
  border: 0;
  outline: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: var(--clrwhite);
  padding-bottom: 20px;
  position: relative;
  margin-top: -20px;
}
/*more recipes component css starts*/
/*Nutrition & Ingredients*/
.pdp-nutrition-ingredients-wrapper {
    background-color: var(--clrwhite);
    position: relative;
    z-index: 1;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    position: relative;
}
.pdp-nutrition-ingredients-inner {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 80px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.pdp-nutrition-ingredients-heading {
  font-size: var(--font32);
  line-height: 40px;
  font-weight: 700;
  text-align: left;
  color: var(--clrblack);
  margin: 10px 0;
  letter-spacing: -1.6px;
  width: 100%;
}
.pdp-nutrition-ingredients-left {
  width: 30%;
  background: var(--clrwhite);
  min-height: 300px;
}

.pdp-nutrition-ingredients-right {
  width: 65%;
  background: #F5F5F5;
  padding: 16px;
}
.ingredients-box {
  padding: 12px 16px;
  background: var(--clrwhite);
  margin-bottom: 10px;
}
.pdp-nutrition-ingredients-right .ingredients-box .nutrition-table-ingredients p strong, 
.ingredients-box-heading {
  font-size: var(--font16);
  line-height: 32px;
  color: #1B1C1C;
  text-align: left;
}
.ingredients-box-text, .pdp-nutrition-ingredients-right .ingredients-box .nutrition-table-ingredients p {
  font-size: var(--font14);
  line-height: 24px;
  color: #1B1C1C;
  text-align: left;
}
/*Nutrition & Ingredients*/
/*pdp faq css stars*/
.pdp-faq-component {
    position: relative;
    z-index: 1;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    position: relative;
    background: #F5F5F5;
}
.pdp-faq-inner {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 80px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.faq-content-wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.pdp-faq-text-heading {
  width: 100%;
  padding: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: var(--font24);
  background: var(--clrwhite);
  margin-bottom: 16px;
}
.pdp-faq-wrapper {
  width: 100%;
  background: var(--clrwhite);
  border: 1px solid #E3BFB14D;
  box-shadow: 0px 1px 2px 0px #0000000D;
  display: inline-block;
  margin-bottom: 10px;
  padding: 24px;
}
.pdp-faq-content {
  width: 100%;
  position: relative;
  top: 0;
  font-size: var(--font16);
  line-height: 24px;
  color: #555555;
  text-align: left;
}
.arrow-grey {
  background: url('./../../images/chevron-down-brown.svg') 0 0;
  width: 25px;
  height: 20px;
  display: block;
}
.grey-arrow-animate {
  transform: rotate(-180deg);
}
.pdp-component-heading {
  font-size: var(--font32);
  font-weight: bold;
  color: var(--clrblack);
  width: 100%;
  text-align: center;
  margin: 10px 0;
}
.pdp-component-sub-heading {
  font-size: var(--font16);
  font-weight: 600;
  color: var(--clrblack);
  width: 100%;
  text-align: center;
  margin: 0 0 20px 0;
}
/*pdp faq css ends*/
.desktop-view {
  display: block;
}
.mobile-view {
  display: none;
}
#tns3-mw {
  padding: 0;
}
#tns3-ow {
  background: var(--clrwhite);
  border-radius: 24px;
  margin-bottom: 40px;
}
.pdp-nutrition-ingredients-left .nfp-nutrition-facts tbody tr.serving-size {
  padding: 25px 0;
}
/* Extra Large Desktop */
@media screen and (min-width: 1920px) {

}
/* Large Desktop */
@media screen and (min-width: 1440px) {

}
/* Mobile + Tablet */
@media screen and (max-width: 1023px) {
  .desktop-view {
    display: none;
  }
  .mobile-view {
    display: block;
  }
  /* Common component spacing */
  .pdp-hero-content-container,
  .pdp-content-component-inner,
  .pdp-cook-with-component-inner,
  .pdp-how-to-prepare-component-inner,
  .pdp-ways-to-enjoy-component-inner,
  .pdp-more-recipes-component-inner,
  .pdp-nutrition-ingredients-inner,
  .pdp-faq-inner {
    padding-left: 20px;
    padding-right: 20px;
  }


  /* =====================================================
     PDP HERO
  ===================================================== */

  .pdp-hero-content-container {
    padding-top: 24px;
    padding-bottom: 32px;
    flex-direction: column;
  }

  .pdp-hero-left-content,
  .pdp-hero-right-content {
    width: 100%;
  }

  .pdp-hero-left-content {
    flex-direction: column;
    align-items: center;
  }

  #tns1-ow {
    width: 100%;
    max-width: 100%;
    order: 1;
    margin-left: 0;
  }

  #tns2-ow {
    width: 100%;
    order: 2;
    margin-top: 16px;
  }

  .pdp-hero-slider-item img {
    width: auto;
    max-width: 100%;
    min-height: auto;
    max-height: 350px;
    object-fit: contain;
  }

  .pdp-hero-thumb-slider {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    overflow-x: auto;
    gap: 12px;

    /* Optional */
    scrollbar-width: none;
  }
  .pdp-hero-thumb-item img {
    display: none;
  }
  .pdp-hero-thumb-slider::-webkit-scrollbar {
    display: none;
  }

  .pdp-hero-thumb-item {
    width: 8px;
    min-width: 8px;
    height: 8px;
    margin: 0;
    box-shadow: none;
    border: 0;
    background: #DEDEDE;
    padding: 0;
  }
.pdp-hero-thumb-slider .tns-nav-active {
  background: var(--campbellsRed);
  width: 24px;
  height: 8px;
  padding: 0;
}
  .pdp-hero-right-content {
    margin-top: 24px;
  }

  .pdp-hero-sub-title {
    margin-top: 0;
  }

  .pdp-hero-heading {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -1px;
  }

  .hero-pdp-text {
    line-height: 22px;
    margin-bottom: 24px;
    font-size: var(--font16);
  }

  .varient-card-wrapper {
    gap: 10px;
  }

  .varient-card {
    width: auto;
    min-width: 80px;
    margin: 0 0 10px;
  }


  /* =====================================================
     PDP CONTENT
  ===================================================== */

  .pdp-content-component-inner {
    padding-top: 32px;
    padding-bottom: 32px;
    flex-direction: column;
  }

  .pdp-content-component-left,
  .pdp-content-component-right {
    width: 100%;
  }

  .pdp-content-heading {
    font-size: 24px;
    line-height: 28px;
  }

  .dietary-allergens-heading {
    margin: 30px 0 16px;
  }

  .dietary-allergens-list-wrapper ul {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .dietary-allergens-list-wrapper ul li {
    width: 180px;
  }
  .pdp-recipe-contains {
    margin: 12px 0 0;
  }


  /* =====================================================
     COOK WITH IT
  ===================================================== */

  .pdp-cook-with-component-inner {
    padding-top: 32px;
    padding-bottom: 32px;
    flex-direction: column;
  }

  .pdp-cook-with-component-left,
  .pdp-cook-with-component-right {
    width: 100%;
  }

  .pdp-cook-with-component-right {
    margin-top: 30px;
  }

  .pdp-cook-with-heading {
    font-size: 28px;
    line-height: 34px;
  }

  .pdp-recipe-card-wrapper {
    padding: 12px;
  }

  .pdp-recipe-card-left {
    width: 30%;
  }

  .pdp-recipe-card-right {
    width: calc(70% - 15px);
    margin-left: 15px;
  }

  .pdp-cook-recipe-heading {
    font-size: 20px;
    line-height: 30px;
  }


  /* =====================================================
     HOW TO PREPARE
  ===================================================== */

  .pdp-how-to-prepare-component-inner {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .pdp-how-to-prepare-card-wrapper {
    flex-direction: column;
  }

  .pdp-how-to-prepare-card {
    width: 100%;
    margin-right: 0;
    margin-bottom: 16px;
  }

  .how-to-prepare-description-wrapper {
    flex-direction: column;
    margin: 20px 0;
  }

  .how-to-prepare-description-left,
  .how-to-prepare-description-right {
    width: 100%;
  }

  .how-to-prepare-description-left {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 16px;
  }

  .how-to-prepare-description-right {
    font-size: 16px;
    line-height: 26px;
  }
  .how-to-prepare-heading {
    font-size: 24px;
    line-height: 28px;
  }
  
  /* =====================================================
     WAYS TO ENJOY
  ===================================================== */
  .pdp-ways-to-enjoy-component {
    padding: 20px;
  }
  .pdp-ways-to-enjoy-component-inner {
    padding-top: 0;
    padding-bottom: 45px;
    max-width: 430px;
    padding-left: 0;
    padding-right: 0;
  }

  .pdp-ways-to-enjoy-caurosel {
    padding: 0;
    background: transparent;
  }
  .pdp-ways-to-enjoy-heading {
    margin: 10px 0 20px 0;
  }
  .ways-to-enjoy-caurosel-item {
    flex-direction: column;
    padding: 0;
    max-width: 460px;
    justify-content: center;
    align-items: center;
  }

  .ways-to-enjoy-caurosel-item-left,
  .ways-to-enjoy-caurosel-item-right {
    width: 100%;
    
  }

  .ways-to-enjoy-caurosel-item-left img {
    width: 100%;
    height: auto;
    display: block;
  }

  .ways-to-enjoy-caurosel-item-right {
    padding: 15px 5px 5px;
  }

  .pdp-ways-to-enjoy-component-inner .tns-nav {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
  }


  /* =====================================================
     MORE RECIPES
  ===================================================== */

  .pdp-more-recipes-component-inner {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .pdp-more-recipes-heading {
    font-size: 28px;
    line-height: 34px;
  }

  .pdp-more-recipes-caurosel-item {
    padding: 0;
    margin-right: 10px;
  }
 .pdp-more-recipes-caurosel-item img {
    margin: 0 auto;
 }
 .pdp-more-recipes-description {
  padding: 20px;
 }
 .pdp-more-recipes-btn {
    margin: 0 auto !important;
    width: 90%;
  }
  .pdp-more-recipes-heading2 {
    font-size: 24px;
    line-height: 30px;
  }
  #tns3-ow {
    padding: 20px !important;
    background: #fff;
    border-radius: 20px;
    width: 100%;
    margin-bottom: 10px;
  }
  .ways-to-enjoy-caurosel-item-right .read_more {
    position: absolute;
    right: -20px;
    bottom: 0px;
}

  /* =====================================================
     NUTRITION & INGREDIENTS
  ===================================================== */

  .pdp-nutrition-ingredients-inner {
    padding-top: 32px;
    padding-bottom: 32px;
    flex-direction: column;
  }

  .pdp-nutrition-ingredients-heading {
    font-size: 28px;
    line-height: 34px;
  }

  .pdp-nutrition-ingredients-left,
  .pdp-nutrition-ingredients-right {
    width: 100%;
  }

  .pdp-nutrition-ingredients-left {
    margin-bottom: 20px;
  }

  .pdp-nutrition-ingredients-right {
    padding: 12px;
  }

  .pdp-nutrition-ingredients-left .nfp-nutrition-facts {
    max-width: 100%;
  }
  /* =====================================================
     FAQ
  ===================================================== */

  .pdp-faq-inner {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .pdp-component-heading {
    font-size: 28px;
    line-height: 34px;
  }

  .pdp-faq-wrapper {
    padding: 18px;
  }

  .pdp-faq-text-heading {
    font-size: 20px;
    line-height: 26px;
    text-align: left;
    gap: 15px;
  }

  .pdp-faq-content {
    font-size: 14px;
    line-height: 22px;
  }
}
/* Small Mobile */
@media screen and (max-width: 405px) {
  .pdp-hero-content-container,
  .pdp-content-component-inner,
  .pdp-cook-with-component-inner,
  .pdp-how-to-prepare-component-inner,
  .pdp-ways-to-enjoy-component-inner,
  .pdp-more-recipes-component-inner,
  .pdp-nutrition-ingredients-inner,
  .pdp-faq-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .pdp-hero-heading {
    font-size: 32px;
    line-height: 38px;
  }

  .pdp-hero-slider-item img {
    max-height: 300px;
  }

  .pdp-hero-thumb-item {
    width: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
  }

  .pdp-content-heading,
  .pdp-cook-with-heading,
  .pdp-more-recipes-heading,
  .pdp-nutrition-ingredients-heading,
  .pdp-component-heading {
    font-size: 26px;
    line-height: 32px;
  }

  .pdp-recipe-card-wrapper {
    padding: 10px;
  }

  .pdp-recipe-card-left {
    width: 32%;
  }

  .pdp-recipe-card-right {
    width: calc(68% - 12px);
    margin-left: 12px;
  }

  .pdp-faq-wrapper {
    padding: 16px;
  }
  .dietary-allergens-list-wrapper ul li {
        width: 175px;
    }
  .pdp-nutrition-ingredients-right .nutrition-table-ingredients {
    width: 320px;
  }
}

.buy-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 999999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.buy-popup-content {
    position: relative;
    background: #fff;
    width: auto;
    overflow-y: auto;
    border-radius: 12px;
    padding: 30px;
    height: 500px;
}
.close-popup {
    position: absolute;
    top: 4px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    background: #000;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 9999;
}


@media (max-width: 767px) {

    .buy-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
  }
}