@import "theme_colors_and_fonts.css";
/* * * * * * * * * * 
/* SCSS VARIABLES  */
/* ~~~~~~~~~~~~~~~~*/
/* Fonts */
/* Colors*/
/* Other variables */
/* Mixins */
/* ~~~~~~~~~~~~~~~~*/
/* END VARIABLES   *
 * * * * * * * * * */
/* * * * * * * * * * 
 * GLOBAL          */
/* ~~~~~~~~~~~~~~~~*/
html, body {
  scroll-behavior: smooth;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  font-family: "Avenir", sans-serif;
  color: #333;
  overflow-x: hidden;
  overflow-y: auto;
}
/* Header */
#header-wrap {
  padding-top: calc(60px/2);
  background-image: linear-gradient(#fff, #fff);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}
#header-wrap.banana {
  background-image: url(assets/images/banana-header2.jpg);
}
#header-wrap.cranberry {
  background-image: url(assets/images/cran-banner.jpg);
}
#header-wrap.dusted {
  background-image: url(assets/images/dusted-banner.jpg);
}
#header-wrap.berry {
  background-image: url(assets/images/berry-banner-2.jpg);
}
#masthead {
  width: 100%;
  max-width: 100vw;
  justify-content: space-between;
  min-height: calc(60px + 2rem);
  display: grid;
  grid-template-columns: calc(80px + calc(calc(100vw - (80vw - (2rem))) / 2)) 1fr;
  gap: 1rem;
}
#masthead .left, #masthead .right {
  background: var(--red);
  border: 2px solid;
  border-image-source: var(--gold-gradient);
  border-image-slice: 1;
  padding: 1rem;
  display: flex;
  align-items: center;
}
#masthead .left {
  justify-content: end;
}
#masthead .right {
  justify-content: start;
}
#masthead .right-inner {
  width: calc(80vw - 80px - 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1rem;
}
#masthead .left img {
  width: 80px;
  min-width: 80px;
}
#masthead .right .right-inner > a, #masthead .right img {
  height: 60px;
}
#masthead .main-navigation ul {
  justify-content: end;
  margin-left: 2rem;
}
#masthead .main-navigation ul li a {
  color: #fff !important;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 1.5rem;
  font-size: 0.8rem;
  transform: translateY(0);
  transition: transform 0.3s var(--transition_time);
  position: relative;
}
#masthead .main-navigation ul li a::after {
  content: "";
  display: block;
  height: 2px;
  width: 60%;
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background-image: var(--gold-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}
#masthead .main-navigation ul li a:hover, #masthead .main-navigation ul li a:focus {
  transform: translateY(-0.5rem);
}
#masthead .main-navigation ul li a:hover::after, #masthead .main-navigation ul li a:focus::after {
  opacity: 1;
}
.entry-content {
  margin-top: 0;
}
.page-id-149 #header-wrap {
  background-image: url(assets/images/cranberries-mini.jpg);
}
.mobile-only {
  display: none;
}
/* ~~~~~~~~~~~~~~~~*/
/* END GLOBAL      *
 * * * * * * * * * */
/* * * * * * * * * * 
 * TYPOGRAPHY      */
/* ~~~~~~~~~~~~~~~~*/
p {
  font-family: "Avenir", sans-serif;
}
h1, h2 {
  font-family: "Tropiline", serif;
}
h3 {
  font-family: "Avenir", sans-serif;
}
a, a:visited {
  color: inherit !important;
}
.tropiline, .is-style-tropiline {
  font-family: "Tropiline", serif;
}
/* ~~~~~~~~~~~~~~~~~~*/
/* END TYPOGRAPHY    *
 * * * * * * * * * * */
/* * * * * * * * * * *
 * BLOCK STYLES      */
/* ~~~~~~~~~~~~~~~~~~*/
/* Buttons */
.wp-block-buttons:not(.is-style-plain) .wp-block-button__link {
  border-radius: 0;
  padding: 1rem 2rem;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff !important;
}
/* Columns */
.is-style-container {
  max-width: 80vw;
  margin: 0 auto;
  padding: 2rem;
}
.is-style-container-no-top-bottom-padding {
  max-width: 80vw;
  margin: 0 auto;
  padding: 2rem;
  padding-top: 0;
  padding-bottom: 0;
}
.is-style-no-gap {
  gap: 0;
  padding: 0;
  margin: 0;
}
.wp-block-columns {
  margin-bottom: 0;
  gap: 2rem;
}
.wp-block-separator {
  border-top: 0;
  background-color: #000;
}
/* Paragraph */
.is-style-subtitle {
  font-size: clamp(0.8rem, 2vw, 1.3rem);
}
/* ~~~~~~~~~~~~~~~~~~*/
/* END BLOCK STYLES  *
 * * * * * * * * * * */
#home-hero {
  min-height: 700px;
  display: block;
}
#hero-banana-leaf-2 {
  right: -100px;
}
#sbi_images {
  gap: 2rem !important;
}
.product-name span {
  display: inline-block;
}
.short-facts {
  gap: 2rem;
}
.short-facts p {
  margin-top: 0;
  margin-bottom: 0;
}
.wood-separator img {
  width: 100%;
}
.social-row p {
  margin-bottom: 0.5rem;
  line-height: 1.1;
}
.social-row p:not(:first-child) {
  margin-top: 0.5rem;
}
.wp-social-link-tiktok svg {
  padding: 4px 0;
}
.nutrition-facts-expandable .wp-block-getwid-accordion__header-wrapper, .nutrition-facts-expandable .wp-block-getwid-accordion__content {
  border: none !important;
}
.nutrition-facts-expandable .wp-block-getwid-accordion__header-wrapper a {
  justify-content: start;
  letter-spacing: 0.15em;
  font-size: 1.25rem;
}
.nutrition-facts-expandable table td {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid #858585;
  font-family: "Avenir", sans-serif;
}
.nutrition-facts-expandable table tr:nth-last-child(5) td {
  border-bottom: 2px solid #000;
}
.nutrition-facts-expandable .wp-block-getwid-accordion__header, .nutrition-facts-expandable .wp-block-getwid-accordion__content {
  padding: 0 !important;
}
.has-banana-soft-background-color h4 {
  color: var(--banana);
}
.has-cranberry-soft-background-color h4 {
  color: var(--cranberry);
}
.lifestyle-photos {
  background: var(--gray-soft);
}
.lifestyle-photos > .wp-block-column {
  margin-top: -400px;
  position: relative;
  z-index: 1;
}
.lifestyle-photos > .wp-block-column:nth-child(odd) {
  margin-top: -400px;
}
.lifestyle-photos > .wp-block-column img {
  width: 100%;
}
#sb_instagram #sbi_images .sbi_item {
  overflow: visible;
}
.slick-arrow {
  width: 42px;
  height: 92px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.slick-arrow:focus, a:focus, button:focus, .slick-dots li button:focus, .product-select-column:focus {
  outline: 2px solid #DDAA51 !important;
  outline-offset: 6px;
}
.homepage-cta .wp-block-button__link {
  position: relative;
  transition: background-color 0.3s var(--transition_time);
}
.homepage-cta .wp-block-button__link::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  border-bottom: 4px solid transparent;
  transition: opacity 0.3s var(--transition_time);
  border-image-source: var(--gold-gradient);
  border-image-slice: 1;
}
.homepage-cta .wp-block-button__link:hover {
  background-color: var(--red);
}
.homepage-cta .wp-block-button__link:hover::before {
  opacity: 1;
}
.product-select-column.active:focus, .product-select-column:active, #masthead a:active:focus {
  outline: 0 !important;
}
.slick-arrow::before {
  content: "";
  display: none;
}
.slick-next {
  background-image: url("assets/images/right.svg") !important;
  right: -42px;
}
.slick-prev {
  background-image: url("assets/images/left.svg") !important;
  left: -42px;
}
.wp-block-getwid-content-slider-slide__wrapper {
  padding: 0 60px;
}
.slick-dots li button:before {
  font-size: 15px;
}
.home .wp-block-getwid-content-slider-slide__wrapper p {
  margin: 0.5rem 0;
}
#primary, .page, .entry-content, #sb_instagram {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#primary {
  position: relative;
  z-index: 2;
}
.facts-floating-image {
  position: absolute;
}
.facts .wp-block-column {
  position: relative;
}
.css-10klw3m {
  height: auto;
}
#home-hero {
  position: relative;
}
#home-hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#home-hero .hero-overlay .wp-block-column {
  position: relative;
}
#home-hero .wp-block-cover .wp-block-image:last-child img {
  object-fit: contain;
  object-position: center center;
}
#home-hero > * {
  opacity: 0;
  animation: fadeIn 1s var(--transition_time);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.hero-floating-image {
  position: absolute;
}
/* Homepage CTA */
#home-cta {
  margin-top: 0;
  transform: translateY(-300px);
  position: relative;
  z-index: 1;
}
.cta-floating-image {
  position: absolute;
}
#home-cta .wp-block-column {
  position: relative;
}
#home-cta .wp-block-cover {
  overflow: visible !important;
}
.cta-floating-image {
  min-width: 100px;
}
.home #colophon {
  margin-top: -300px;
}
#colophon {
  background: var(--red);
  color: #fff;
  text-align: center;
}
#colophon .site-info {
  font-size: 0.8em;
  padding-top: 0;
}
#colophon .footer-logos .wp-block-image {
  padding: 0.5rem 2rem;
}
#colophon .fr-logo-footer {
  border-left: 1px solid #fff;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* * * * * * * * * * *
 * MEDIA QUERIES     */
/* ~~~~~~~~~~~~~~~~~~*/
#home-hero .wp-block-cover {
  min-height: 33vw !important;
}
@media screen and (max-width: 1100px) {
  #masthead {
    grid-template-columns: calc(80px + 2rem) 1fr;
    gap: 1rem;
  }
  #masthead .right-inner {
    width: 100%;
  }
}
@media screen and (max-width: 920px) {
  #masthead .right img {
    max-width: 130px;
  }
  #masthead nav ul li a {
    font-size: 0.7rem !important;
  }
}
@media screen and (max-width: 850px) {
  #masthead .is-style-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #masthead .main-navigation #primary-menu {
    width: 0;
    position: absolute;
    overflow: hidden;
    height: 0;
    transition: opacity 0.3s ease;
    left: 0;
    right: 0;
    margin-top: 1.2rem;
    z-index: 4;
    display: block;
    opacity: 0;
    background: var(--red);
  }
  #masthead .main-navigation #primary-menu li a {
    text-align: center;
    font-family: "Tropiline", serif;
    text-transform: lowercase;
    font-size: 1.5rem !important;
    letter-spacing: 0;
  }
  #masthead .main-navigation.toggled #primary-menu {
    width: 100vw;
    height: 100%;
    margin-left: 0;
    padding: 2rem;
    border: 2px solid;
    border-image-source: var(--gold-gradient);
    border-image-slice: 1;
    opacity: 1;
  }
  #masthead .main-navigation ul {
    justify-content: end;
    margin-left: 2rem;
  }
  #masthead .menu-toggle {
    border-radius: 0;
    padding: 1rem 2rem;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 3px;
    margin-right: 0;
    margin-left: auto;
    display: block;
    font-size: 0;
    color: transparent;
    background-image: url(assets/images/menu.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    background-color: transparent;
    border: transparent;
    transition: background-image 0.3s ease;
  }
  #masthead .menu-toggle[aria-expanded="true"] {
    background-image: url(assets/images/close.svg);
  }
  body.menu-open #hero-berry-2, body.menu-open #hero-cranberry-5 {
    display: none;
  }
  .dusted #masthead .main-navigation #primary-menu {
    background-color: var(--dusted-soft);
  }
  .dusted #masthead .main-navigation #primary-menu li a {
    color: var(--dusted) !important;
  }
  .banana #masthead .main-navigation #primary-menu {
    background-color: var(--banana-soft);
  }
  .banana #masthead .main-navigation #primary-menu li a {
    color: var(--banana) !important;
  }
  .cranberry #masthead .main-navigation #primary-menu {
    background-color: var(--cranberry-soft);
  }
  .cranberry #masthead .main-navigation #primary-menu li a {
    color: var(--cranberry) !important;
  }
  .berry #masthead .main-navigation #primary-menu {
    background-color: var(--berry-soft);
  }
  .berry #masthead .main-navigation #primary-menu li a {
    color: var(--berry) !important;
  }
  .mobile-only {
    display: block;
  }
}
@media screen and (max-width: 800px) {
  #home-hero .wp-block-cover__inner-container > .wp-block-columns {
    padding: 0;
  }
  .is-style-container {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 700px) {
  #home-hero .wp-block-cover__inner-container > .wp-block-columns {
    max-width: 90vw;
  }
  #home-hero .wp-block-cover .wp-block-image:last-child img {
    height: 200px !important;
  }
  #home-hero .wp-block-cover {
    min-height: 600px !important;
  }
}
@media screen and (max-width: 600px) {
  #home-hero .wp-block-cover .wp-block-image:last-child img {
    height: 150px !important;
  }
  #home-hero .wp-block-cover {
    min-height: 500px !important;
  }
}
@media screen and (max-width: 500px) {
  #colophon .footer-logos .wp-block-image {
    padding: 0.5rem 0.5rem;
  }
  #colophon .footer-logos .wp-block-image:first-child img {
    height: auto !important;
    max-height: unset;
    min-height: unset;
    min-width: 70px !important;
    max-width: 100px !important;
  }
  #colophon .footer-logos .wp-block-image:last-child img {
    height: auto !important;
    max-height: unset;
    min-height: unset;
    min-width: 100px;
  }
  #masthead {
    min-height: calc(40px + 1.2rem);
    grid-template-columns: calc(60px + 1.2rem) 1fr;
    gap: 0.6rem;
  }
  #masthead .left img {
    max-width: 60px !important;
    min-width: 50px;
  }
  #masthead .right img {
    max-width: 100px !important;
  }
  #masthead .left, #masthead .right {
    padding: 0.6rem;
  }
  #masthead .right-inner {
    padding: 0;
  }
  .hide-product-details {
    width: 100%;
  }
}
@media screen and (max-width: 350px) {
  .product-name.has-cranberry-color span:last-child {
    font-size: 1.7em !important;
  }
}
@media screen and (max-width: 300px) {
  #colophon .footer-logos .wp-block-image {
    padding: 0.5rem 0.5rem;
  }
  #colophon .footer-logos .wp-block-image:first-child img {
    height: auto !important;
    max-height: unset;
    min-height: unset;
    min-width: 70px !important;
    max-width: 80px !important;
  }
  #colophon .footer-logos .wp-block-image:last-child img {
    height: auto !important;
    max-height: unset;
    min-height: unset;
    min-width: 100px;
  }
}
/* ~~~~~~~~~~~~~~~~~~*/
/* END MEDIA QUERIES *
 * * * * * * * * * * */