/* User Story 131607: Add Additional Sections on Recipe Detail Pages */
.view-more-btn {
  display: inline;
  margin-left: 4px;
  padding: 0;
  background: transparent;
  color: var(--red);
  font-size: var(--font14);
  line-height: 24px;
  text-decoration: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  bottom: -40px;
}
.view-more-btn:focus {
  border: 0;
  outline: 0;
}
.jump-to-recipe-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px 0;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}
.jump-to-recipe-btn a {
  width: 185px;
  display: flex;
  border-radius: 24px;
  border: 1px solid var(--red);
  padding: 8px;
  font-size: var(--font18);
  font-weight: 700;
  text-decoration: none;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  color: var(--red);
  outline: none;
  background: var(--clrwhite);
}
.jump-to-recipe-btn a span {
  background: url('./../../images/arrow-right-red-fill.svg') 0 0;
  width: 24px;
  height: 24px;
  display: block;
  transform: rotate(-180deg);
}
.recipe-template-default .container-with-sidebar__main {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
}
.recipe-template-default .add-recip {
  margin: 20px 0;
  display: flex;
  border-radius: 24px;
  border: 1px solid var(--red);
  padding: 8px;
  font-size: var(--font18);
  font-weight: 700;
  text-decoration: none;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  color: var(--red);
  outline: none;
  background: var(--clrwhite);
  line-height: normal;
  height: auto!important;
  width: 230px;
}
#single-recipe-ingredients .recipe-ingredients li { border-bottom: 0; }
.substitutions-variations-wrapper, .alternate-cooking-wrapper,
.substitutions-variations-accordian-wrapper, .alternate-cooking-accordian-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.substitutions-variations-wrapper {
  margin-top: 50px;
}
.substitutions-variations-heading, .alternate-cooking-heading, .tips-heading, .recipe-storage-heading {
  width: 100%;
  font-size: var(--font24);
  font-weight: 600;
  color: var(--colorBlack);
  display: block;
  margin: 10px 0 20px;
}
.substitutions-variations-text-heading, .additional-ingredient-swaps-heading,
.product-swaps-text-heading, .traditional-oven-text-heading, .slow-cooker-text-heading,
.instant-pot-text-heading, .air-frier-text-heading {
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e7e7e7;
  font-size: var(--font16);
  line-height: 24px;
  font-weight: bold;
  background: var(--clrwhite);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  align-items: center;
  border-radius: 5px;
}
.substitutions-variations-content, .additional-ingredient-swaps-content,
.product-swaps-content-wrapper, .traditional-oven-content, .slow-cooker-content,
.instant-pot-content, .air-frier-content {
  display: none;
  padding: 12px;
  background: var(--clrwhite);
  width: 100%;
  margin-top: -8px;
  margin-bottom: 10px;
}
.variations-content-wrapper {
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #e5e5e5;
}
.variations-heading { font-size: var(--font16); font-weight: bold; line-height: 24px; padding-left: 30px; white-space: nowrap; }
.variations-text { font-size: var(--font14); line-height: 24px; color: var(--darkGrey); padding-left: 30px; }
.slide-active { color: var(--red); }
.traditional-oven-content ul, .slow-cooker-content ul, .instant-pot-content ul, .air-frier-content ul { margin: 0; padding: 0; }
.traditional-oven-content ul li, .slow-cooker-content ul li, .instant-pot-content ul li, .air-frier-content ul li {
  counter-increment: inst;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--font14);
  line-height: 24px;
  border-bottom: 1px solid #e7e7e7;
  position: relative;
  padding-left: 30px;
}
.traditional-oven-content ul li::before, .slow-cooker-content ul li::before,
.instant-pot-content ul li::before, .air-frier-content ul li::before {
  background: #f0f0f0;
  width: 22px;
  content: counter(inst);
  height: 22px;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--red);
  font-size: 10px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: 0;
}
.traditional-oven-content ul {
  margin: 0;
}
.arrow-grey { background: url('./../../images/arrow-down-grey.svg') 0 0; width: 16px; height: 16px; }
.grey-arrow-animate { transform: rotate(-180deg); }
.btn-default-recipe { border-radius: 3px; background: var(--red); padding: 3px 5px; color: var(--clrwhite); font-size: 10px; line-height: 15px; font-weight: bold; border: none; outline: none; position: absolute; right: 35px; }
.vegetarian-icon, .gluten-free-icon, .vegan-icon { width: 20px; height: 20px; background-image: url('./../../images/recipe-details-icons.png'); background-repeat: no-repeat; }
.vegetarian-icon { background-position: -20px -63px; }
.gluten-free-icon { background-position: -60px -63px; }
.vegan-icon { background-position: -100px -62px; }
.ingredient-swaps-content-wrapper { border-radius: 6px; border: 1px solid #e5e5e5; background: #f5f5f5; padding: 12px; margin-bottom: 8px; }
.ingredient-swaps-heading, .product-swaps-content-heading { color: #666; font-size: var(--font14); line-height: 24px; }
.ingredient-swaps-text { color: #333; font-size: var(--font14); line-height: 24px; }
.product-swaps-content { border-radius: 6px; padding: 12px; border: 1px solid var(--red); margin-bottom: 8px; }
.product-swaps-content-text { font-size: var(--font14); line-height: 24px; color: var(--red); }
.product-swaps-content-text a { text-decoration: none; border: none; outline: none; color: var(--red); }
.recipes-tips-wrapper { width: 100%; margin: 20px 0; position: relative; }
.tips-recipe-item-wrapper { background: #fff9e8; border-radius: 8px; border: 1px solid #f5c842; border-left-width: 4px; padding: 12px 12px 12px 50px; margin-right: 1%; position: relative; min-height: 150px; }
.recipe-tips-heading { color: #7a5800; font-size: var(--font16); line-height: 24px; font-weight: bold; text-align: left; }
.recipe-tips-text { color: #8a6500; font-size: var(--font14); line-height: 24px; text-align: left; }
.recipe-tips-icon { width: 20px; height: 20px; background: url('./../../images/recipe-details-icons.png') no-repeat -140px -100px transparent; position: absolute; top: 20px; left: 20px; }
.recipes-tips-wrapper .tns-outer {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recipes-tips-wrapper .tns-nav { position: absolute; display: flex; justify-content: center; align-items: center; z-index: 10;bottom: -80px; }
.recipes-tips-wrapper .tns-nav button { background-color: var(--red); margin: 4px; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--brown); opacity: .3; }
.recipes-tips-wrapper .tns-nav button.tns-nav-active { opacity: 1; }
.recipes-tips-wrapper .tns-controls { position: absolute; bottom: -20px; width: 100%; display: flex !important; flex-wrap: wrap; justify-content: space-around; z-index: 5; }
.recipes-tips-wrapper .tns-controls button[data-controls="prev"], .recipes-tips-wrapper .tns-controls button[data-controls="next"] { cursor: pointer; text-indent: -5000px; background-repeat: no-repeat; position: absolute; color: transparent; width: 20px; height: 20px; top: 15px; }
.recipes-tips-wrapper .tns-controls button[data-controls="prev"] { background-image: url('./../../images/recipe-arrow-left.svg'); left: 40%; }
.recipes-tips-wrapper .tns-controls button[data-controls="next"] { background-image: url('./../../images/recipe-arrow-right.svg'); right: 40%; }
.recipes-tips-wrapper #tns2 > .tns-item {padding-right: 20px !important;}
.recipe-storage-wrapper { width: 100%; }
.recipe-storage-inner { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }
.recipe-storage-item { width: 165px; border-radius: 8px; border: 1px solid #e7e7e7; background: var(--clrwhite); padding: 16px 16px 16px 50px; min-height: 320px; margin-right: 10px; }
.recipe-storage-item .heading { font-size: var(--font16); line-height: 24px; color: var(--colorBlack); font-weight: 600; position: relative; }
.recipe-storage-item .text, .recipe-storage-item .sub-text { font-size: var(--font14); line-height: 24px; }
.recipe-storage-item .sub-text { color: #00000099; }
.refrigerate, .freeze, .thaw, .reheat { width: 20px; height: 20px; background-image: url('./../../images/recipe-details-icons.png'); background-repeat: no-repeat; display: block; position: absolute; left: -35px; z-index: 5; }
.refrigerate { background-position: -20px -22px; }
.freeze { background-position: -60px -22px; }
.thaw { background-position: -100px -22px; }
.reheat { background-position: -140px -22px; }
.recipe-recommended-section-wrapper {
  background: #BA0018;
  position: relative;
  z-index: 1;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  position: relative;
}
.buy-ingredient-online {
  padding: 0;
}
h3.buy-online {
  font-size: 24px;
}
#single-recipe-ingredients {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.recipe-ingredients {
  padding: 24px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px #00000033;
}
.recipe-ingredients li {
  padding: 10px 0;
}
.recipe-instructions {
  padding: 0;
}
.recipe-instructions > ul > li {
  padding: 24px;
  border-radius: 8px;
  background: #ffffff;
}
.recipe-instructions__step strong {
  font-size: 18px;
  font-weight: 500;
  padding: 10px 0;
  display: block;
}
.recipe-instructions__step {
  font-size: 18px;
  line-height: 24px;
}
.recipe-template-default body {
  background: #F5F5F5;
}
.single-recipe .buy-ingredient-sec {
    margin-top: 0;
    text-align: left;
    padding: 24px;
    display: block;
}
.recipe-template-default .recipe-description p {
  font-size: 14px;
  line-height: 24px;
}
.recipe-template-default .container-with-sidebar__main h2 {
  font-size: 32px;
  margin: 24px 0;
}
.recipe-template-default .faq-container {
  background: #e5e5e5;
  position: relative;
  z-index: 1;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  position: relative;
  padding-bottom: 40px;
  max-width: 1920px;
}
.recipe-template-default .faq-header {
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}
.recipe-template-default .faq-section {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 0;
}
.recipe-template-default .faq-item.active .faq-answer {
  text-align: left !important;
}
.recipe-description {
  position: relative;
  margin-bottom: 30px;
}
.reently-viewed-wrapper {
  background: #ffffff;
  position: relative;
  z-index: 1;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  position: relative;
  padding-bottom: 40px;
  max-width: 1920px;
}
.recently-viewed {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
}
.recently-viewed > h3 {
  margin: 20px 0;
  text-align: left;
  padding: 0;
  font-size: 22px;
  border-bottom: 2px solid #ccc;
}

.recently-viewed-card-list .recipe-card .recipe-card__image {
  width: 100px;
  max-width: 100px;
}
.recipe-card__image img {
  border-radius: 6px;
  max-width: 100%;
}
.recently-viewed-card-list .recipe-card__content {
  height: auto;
    min-height: auto;
    min-width: 200px;
}
.recipe-template-default .recipe-card__title {
  background-image: none;
}
.rating-reviews-wrapper {
  background: #F5F5F5;
  position: relative;
  z-index: 1;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  position: relative;
  padding-bottom: 40px;
  max-width: 1920px;
  border-top: 1px solid #E5E5E5;
}
#single-recipe-reviews {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
header.recipe-hero__heading {
  margin-bottom: 20px !important;
}
.related-content__title {
  font-size: var(--font28);
  line-height: 42px;
}
.related-content .tns-outer {
  max-width: 1365px;
}
.related-content .wp-block-button__link.is-style-outline-light {
  border-radius: 4px;
  background-color: var(--clrwhite);
  color: var(--mainBgcolor);
  font-size: var(--font14);
  line-height: 20px;
  font-weight: bold;
}
.related-content h3 {
  font-size: var(--font14);
  line-height: 18px;
  font-weight: bold;
}
.recently-viewed-card-list .recipe-card a {
  display: flex;
}
.recently-viewed-wrapper .wp-block-button__link.is-style-outline {
  border-radius: 4px;
  background-color: var(--clrwhite);
  color: var(--black);
  font-size: var(--font18);
  line-height: 18px;
  font-weight: bold;
  border: 1px solid #E5E5E5;
}
.js-related-content .related-content__item-recipe {
  border-radius: 8px;
}
.text-ellipsis {
	display: block;
	display: -webkit-box;
	max-width: 100%;
	height: 43px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.desktop-left-sidebar {
  display: block;
}
.mobile-left-sidebar {
  display: none;
}
.recipe-write-review-btn {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.recipe-write-review-btn a, .recipe-write-review-btn a:hover {
  width: 150px;
  height: 40px;
  border-radius: 4px;
  background: var(--c-footer-collapsible-hover);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
}
.related-content .tns-controls button[data-controls=prev] {
  text-indent: -10000px;
  left: 5px;
}
.related-content .tns-controls button[data-controls=next] {
  text-indent: -10000px;
   right: 5px;
}
@media screen and (min-width: 390px) and (max-width: 1023px) {
  .recipe-storage-item { width: 100%; min-height: auto; margin-bottom: 10px; }
  .guided-ccoking-btns { margin-top: 75px; }
  .recipes-tips-wrapper .tns-controls button[data-controls="next"] { right: 25%; }
  .recipes-tips-wrapper .tns-controls button[data-controls="prev"] { left: 25%; }
  .recipe-template-default #faq-container {
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
  .recipe-template-default .faq-section {max-width: 390px;}
  .recipe-template-default .faq-question {text-align: left;}
  .sticky-recipe-btn {
	position: fixed;
  top: 60px;
  left: 0;
  z-index: 99;
  display: none;
  border-bottom: 0;
  }
  .related-content .tns-controls button[data-controls="prev"] {
    left: 15px;
  }
  .related-content .tns-controls button[data-controls="next"] {
    right: 15px;
  }
  .text-ellipsis {
	display: block;
	display: -webkit-box;
	max-width: 100%;
	height: 70px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
  }
  .recipe-template-default .container-with-sidebar__main {
    border: 0;
  }
  .desktop-left-sidebar {
  display: none;
  }
  .mobile-left-sidebar {
    display: block;
  }
   .recipe-template-default .recipe-meta {
    margin-bottom: 0;
  }
}