@charset "UTF-8";
/*
Theme Name: Juicies
Author: X Marketing - Ryan Vertulfo
*/
:root {
  --primary-text-color: #ad2a36;
  --reglar-text-color: #323232;
  --link-text-color: #ad2a36;
  --error-text-color: #ad2a36;
  --container-max-width: 100%;
  --h1-size: 136px;
  --h2-size: 32px;
  --h2-lh: 39px;
  --h2-size-footer: 22px;
  --h2-lh-foter: 27px;
  --h3-size: 30px;
  --text-small-size: 24px;
  --text-small-lh: 32px;
  --text-regular-size: 22px;
  --text-regular-lh: 26px;
  --faqs-headng-size: 44px;
  --faqs-headng-lh: 66px;
}

@media screen and (min-width: 769px) {
  :root {
    --container-max-width: 1300px;
    --h1-size: 136px;
    --h2-size: 50px;
    --h2-lh: 62px;
    --h2-size-footer: 44px;
    --h2-lh-foter: 54px;
    --h3-size: 30px;
    --text-small-size: 28px;
    --text-small-lh: 37px;
    --text-regular-size: 24px;
    --text-regular-lh: 32px;
    --faqs-headng-size: 44px;
    --faqs-headng-lh: 66px;
  }
}
@media screen and (min-width: 1280px) {
  :root {
    --container-max-width: 1300px;
    --h1-size: 136px;
    --h2-size: 54px;
    --h2-lh: 66px;
    --h2-size-footer: 44px;
    --h2-lh-foter: 54px;
    --h3-size: 30px;
    --text-small-size: 36px;
    --text-small-lh: 44px;
    --text-regular-size: 30px;
    --text-regular-lh: 37px;
    --faqs-headng-size: 44px;
    --faqs-headng-lh: 66px;
  }
}
@font-face {
  font-family: "Castledown";
  src:
    url("./assets/fonts/Castledown-Regular.woff2") format("woff2"),
    url("./assets/fonts/Castledown-Regular.woff") format("woff"),
    url("./assets/fonts/Castledown-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Castledown";
  src:
    url("./assets/fonts/Castledown-Heavy.woff2") format("woff2"),
    url("./assets/fonts/Castledown-Heavy.woff") format("woff"),
    url("./assets/fonts/Castledown-Heavy.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Castledown";
  src:
    url("./assets/fonts/Castledown-Bold.woff2") format("woff2"),
    url("./assets/fonts/Castledown-Bold.woff") format("woff"),
    url("./assets/fonts/Castledown-Bold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Castledown;
  font-style: normal;
  font-weight: normal;
  background-color: red;
  background: #fff;
  color: var(--reglar-text-color);
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: var(--link-text-color);
  text-decoration: none;
  transition: color 0.2s ease-in;
}
a:hover {
  color: #e85e64;
}

body p:last-of-type {
  margin-bottom: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 60px 15px;
}
@media screen and (min-width: 769px) {
  .container {
    padding: 110px 80px;
  }
}

.row {
  display: flex;
  flex-direction: column;
}
.row .column {
  width: 100%;
}
.row .column:first-child {
  margin-bottom: 40px;
}
@media screen and (min-width: 769px) {
  .row {
    flex-direction: row;
  }
  .row .column {
    width: 50%;
  }
  .row .column:first-child {
    margin-bottom: 0;
  }
}

.desktop {
  display: none;
}

.mobile {
  display: flex;
}

@media screen and (min-width: 769px) {
  .mobile {
    display: none;
  }
  .desktop {
    display: flex;
  }
}
.btn,
footer .container .footer-mailing form button,
footer .container .footer-mailing form .gform_button {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 182px;
  height: 100vh;
  max-height: 58px;
  text-decoration: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 20px;
}
.btn.btn-purple,
footer .container .footer-mailing form button,
footer .container .footer-mailing form .gform_button {
  color: #ffceb9;
  background-image: url('data:image/svg+xml;utf8,<svg width="182" height="58" viewBox="0 0 182 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M110.704 1.58254C135.287 -0.675002 157.963 3.14664 161.475 3.82469C164.987 4.50274 171.064 7.00579 173.231 8.01019C174.958 8.81146 177.131 9.9425 178.385 11.5798C179.638 13.2172 181.14 15.8158 181.41 18.0072C181.681 20.1986 181.532 22.0903 181.501 24.3417C181.461 26.1783 180.868 28.7811 180.576 30.5875C180.332 32.0963 180.041 33.6496 179.304 34.9787C178.691 36.0857 177.961 37.0741 177.37 38.2167C176.834 39.2477 176.205 40.2047 175.496 41.0696C171.618 45.8554 167.262 49.7661 162.032 51.8092L161.636 51.9639C157.978 53.3943 154.336 54.8184 150.571 55.6866C147.929 56.2982 141.754 56.7608 139.077 57.0519C136.95 57.2781 126.736 56.9435 120.328 56.2518C113.92 55.56 108.055 54.5164 97.4489 54.2391C86.8422 53.9618 68.5893 54.4795 60.7886 54.773C47.7481 55.8076 34.6767 56.7396 21.6296 57.4755C17.7186 57.6966 13.0565 56.0212 9.65503 53.7523C6.85559 51.901 5.59688 50.1722 3.94749 46.9484C3.06541 45.1766 2.31204 43.3118 1.69569 41.3747C-0.642124 34.3304 -0.807551 22.1677 2.85295 15.3489C6.51346 8.53004 18.6147 6.03346 25.923 5.75849L48.7614 4.8992L69.3142 4.12591C80.7352 3.6962 102.693 2.31927 110.704 1.58254Z" fill="%23AD2A36"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.2s ease-in-out;
}
.btn.btn-purple:hover,
footer .container .footer-mailing form button:hover,
footer .container .footer-mailing form .gform_button:hover {
  transform: scale(1.1);
}
.btn.btn-white,
footer .container .footer-mailing form button.btn-white,
footer .container .footer-mailing form .btn-white.gform_button {
  color: #000;
  background-image: url('data:image/svg+xml;utf8,<svg width="182" height="58" viewBox="0 0 182 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M110.704 1.58254C135.287 -0.675002 157.963 3.14664 161.475 3.82469C164.987 4.50274 171.064 7.00579 173.231 8.01019C174.958 8.81146 177.131 9.9425 178.385 11.5798C179.638 13.2172 181.14 15.8158 181.41 18.0072C181.681 20.1986 181.532 22.0903 181.501 24.3417C181.461 26.1783 180.868 28.7811 180.576 30.5875C180.332 32.0963 180.041 33.6496 179.304 34.9787C178.691 36.0857 177.961 37.0741 177.37 38.2167C176.834 39.2477 176.205 40.2047 175.496 41.0696C171.618 45.8554 167.262 49.7661 162.032 51.8092L161.636 51.9639C157.978 53.3943 154.336 54.8184 150.571 55.6866C147.929 56.2982 141.754 56.7608 139.077 57.0519C136.95 57.2781 126.736 56.9435 120.328 56.2518C113.92 55.56 108.055 54.5164 97.4489 54.2391C86.8422 53.9618 68.5893 54.4795 60.7886 54.773C47.7481 55.8076 34.6767 56.7396 21.6296 57.4755C17.7186 57.6966 13.0565 56.0212 9.65503 53.7523C6.85559 51.901 5.59688 50.1722 3.94749 46.9484C3.06541 45.1766 2.31204 43.3118 1.69569 41.3747C-0.642124 34.3304 -0.807551 22.1677 2.85295 15.3489C6.51346 8.53004 18.6147 6.03346 25.923 5.75849L48.7614 4.8992L69.3142 4.12591C80.7352 3.6962 102.693 2.31927 110.704 1.58254Z" fill="%23FFFFFF"/></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.2s ease-in-out;
}
.btn.btn-white:hover,
footer .container .footer-mailing form button.btn-white:hover,
footer .container .footer-mailing form .btn-white.gform_button:hover {
  transform: scale(1.1);
}
.btn span,
footer .container .footer-mailing form button span,
footer .container .footer-mailing form .gform_button span {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  transform: matrix(1, -0.01, -0.01, 1, 0, 0);
  text-align: center;
  font-style: normal;
  font-weight: 800;
  font-size: 24px;
  line-height: 20px;
  letter-spacing: -0.02em;
}

.header {
  position: relative;
}
.header .overlap-bottom {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  margin-top: -52.8vw;
  background-color: #debc8e;
  background-image: url("./assets/images/paper-bg.jpg");
  background-size: contain;
  background-position: center;
  z-index: 0;
}
@media screen and (min-width: 769px) {
  .header .overlap-bottom {
    margin-top: -18.4vw;
  }
}
@media screen and (min-width: 1210px) {
  .header .overlap-bottom {
    margin-top: -225px;
  }
}
.header .container {
  display: block;
  position: relative;
  height: 100%;
  padding: 0 15px;
  overflow: hidden;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .header .container {
    overflow: visible;
    padding: 0 7vw;
  }
}
@media screen and (min-width: 1170px) {
  .header .container {
    padding: 0 80px;
  }
}
.header.header-secondary {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #debc8e;
  background-image: url("./assets/images/paper-bg.jpg");
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 769px) {
  .header.header-secondary {
    padding: 0;
  }
}
.header.header-secondary .container .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 769px) {
  .header.header-secondary .container .row {
    align-items: flex-end;
  }
}
.header.header-secondary .page-title {
  font-weight: 800;
  font-size: 86px;
  line-height: 130px;
  text-align: center;
  color: #ffffff;
}
@media screen and (min-width: 769px) {
  .header.header-secondary .page-title {
    font-size: 136px;
    line-height: 130px;
    text-align: right;
  }
}

.navigation {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.logo {
  display: block;
  margin: 0;
  padding-top: 10px;
  width: 170px;
}
@media screen and (min-width: 769px) {
  .logo {
    min-width: clamp(150px, 18vw, 200px);
    width: clamp(150px, 18vw, 200px);
    margin: 0;
    padding-top: 15px;
    flex-shrink: 2;
  }
}

nav {
  display: none;
  flex-shrink: 1;
  z-index: 10;
}
@media screen and (min-width: 769px) {
  nav {
    display: inline-flex;
  }
}

nav ul {
  display: flex;
  margin: 4.4vw 0 0 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 1170px) {
  nav ul {
    margin: 20px 0 0 0;
  }
}

nav ul li {
  display: inline-block;
  font-size: 1em;
  padding-left: clamp(6px, 0.8vw, 15px);
  list-style: none;
  text-align: center;
}

nav a {
  font-size: clamp(0.9rem, 1.1vw, 1.15rem);
  font-weight: 800;
  white-space: nowrap;
  color: var(--link-text-color);
  text-decoration: none;
  transition: color 0.2s ease-in;
}
nav a:hover {
  color: #e85e64;
}

/** Mobile Menu **/
body.no-scroll {
  overflow: hidden;
}
.nav-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nav-hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--link-text-color);
  border-radius: 2px;
  transition: all 0.3s ease;
}
@media screen and (min-width: 769px) {
  .nav-hamburger {
    display: none;
  }
}
.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.97);
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mobile-nav-overlay.is-open {
  display: flex;
}
.mobile-nav-overlay nav {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--link-text-color);
  line-height: 1;
}
.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mobile-nav ul li {
  margin: 20px 0;
  padding: 0;
}
.mobile-nav ul li a {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--link-text-color);
  text-decoration: none;
}
.mobile-nav ul li a:hover {
  color: #e85e64;
}

/** Hero  **/
.hero-moosies {
  padding: 0 15px;
  text-align: center;
  padding-bottom: 60px;
}

.hero-moosies h2 {
  margin-bottom: 40px;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}

.hero-moosies p {
  margin: 0px auto;
  padding: 0;
  width: 100%;
  max-width: 844px;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}

.hero {
  padding: 0;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 769px) {
  .hero {
    flex-direction: row;
    align-items: flex-start;
  }
}

.hero-text {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
}
.hero-text .hero-text__main {
  margin-bottom: 15px;
  font-weight: 900;
  font-size: 70px;
  line-height: 72px;
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.hero-text .hero-text__main span {
  display: block;
}
.hero-text .hero-text__sub {
  color: var(--primary-text-color);
  font-size: 28px;
  line-height: 32px;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .hero-text {
    padding-top: 30px;
    flex-basis: 40%;
  }
  .hero-text .hero-text__main {
    margin-bottom: 4vw;
    font-size: 10.6vw;
    line-height: 10.2vw;
    text-align: left;
  }
  .hero-text .hero-text__sub {
    text-align: left;
    font-size: 29px;
    line-height: 36px;
  }
}
@media screen and (min-width: 769px) and (min-width: 945px) {
  .hero-text .hero-text__sub {
    font-size: 36px;
  }
}
@media screen and (min-width: 1170px) {
  .hero-text .hero-text__main {
    font-size: 125px;
    line-height: 120px;
  }
  .hero-text .hero-text__sub {
    font-size: 44px;
  }
}
@media screen and (min-width: 1250px) {
  .hero-text .hero-text__main {
    margin-bottom: 50px;
  }
}

.hero-image {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
}
@media screen and (min-width: 769px) {
  .hero-image {
    max-width: 740px;
    margin-top: -7vw;
    margin-right: -60px;
    flex-shrink: 3;
  }
}
@media screen and (min-width: 1600px) {
  .hero-image {
    /* margin-top: -120px; */
    margin-top: -50px;
  }
}

.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 160.4166666667%;
  height: 100%;
  max-height: 1100px;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .image-wrapper {
    padding-top: 114.5833333333%;
  }
}
.image-wrapper img {
  position: absolute;
  top: 0;
  left: -26vw;
  width: 140%;
  max-width: 140%;
  height: auto;
}
@media screen and (min-width: 769px) {
  .image-wrapper img {
    left: -20px;
    width: 100%;
    max-width: 100%;
  }
}

.hero-image-other {
  position: absolute;
  width: 100%;
  bottom: 56vw;
  left: 0;
  right: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
@media screen and (min-width: 549px) {
  .hero-image-other {
    bottom: 56vw;
  }
}
@media screen and (min-width: 769px) {
  .hero-image-other {
    /* top: 25px; */
    top: 190px;
    right: 30px;
    left: auto;
    bottom: auto;
    flex-direction: column;
    max-width: 308px;
    width: 54%;
  }
}
.hero-image-other .image-rating {
  width: 70%;
  min-width: 86px;
  overflow: hidden;
}
@media screen and (min-width: 340px) {
  .hero-image-other .image-rating {
    width: 45%;
  }
}
@media screen and (min-width: 769px) {
  .hero-image-other .image-rating {
    width: 100%;
    margin-top: 74px;
    margin-bottom: 20px;
  }
}
.hero-image-other .image-rating img {
  width: 100%;
  height: auto;
  min-width: 145px;
  margin-left: -25px;
}
@media screen and (min-width: 769px) {
  .hero-image-other .image-rating img {
    margin-left: auto;
    max-width: 100%;
    max-height: 100%;
  }
}
.hero-image-other .ribbons {
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: 65px;
}
@media screen and (min-width: 340px) {
  .hero-image-other .ribbons {
    padding-left: 45px;
  }
}
@media screen and (min-width: 769px) {
  .hero-image-other .ribbons {
    padding-left: 0;
    padding-right: 20px;
    margin-bottom: 0;
  }
}
.hero-image-other .ribbons img {
  width: 100%;
  max-width: 288px;
}
.hero-image-other .ribbons .image-no-added-sugar {
  width: 100%;
  margin-bottom: 17px;
}
@media screen and (min-width: 769px) {
  .hero-image-other .ribbons .image-no-added-sugar {
    margin-bottom: 27px;
  }
}
.hero-image-other .ribbons .image-no-added-sugar img {
  width: 100%;
  height: auto;
}
.hero-image-other .ribbons .image-all-natural {
  width: 100%;
  height: 100%;
  margin-bottom: 18px;
}
@media screen and (min-width: 1250px) {
  .hero-image-other .ribbons .image-all-natural {
    margin-bottom: 20px;
  }
}

/** Boxes **/
.boxes {
  margin-top: 0;
}
@media screen and (min-width: 769px) {
  .boxes {
    margin-top: -110px;
  }
}
.boxes .container {
  padding: 0 0 80px 0;
  display: flex;
  flex-direction: column;
  /* overflow: hidden; */
}
@media screen and (min-width: 769px) {
  .boxes .container {
    padding: 0 0 125px 0;
    overflow: visible;
  }
}
.boxes .boxes-image {
  width: 110%;
  margin-bottom: 0;
  /* margin-top: -100px; */
}
.boxes .boxes-image img {
  margin-left: -4.4vw;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .boxes .boxes-image {
    width: 100%;
    margin-bottom: 0;
    margin-top: -50px;
  }
  .boxes .boxes-image img {
    margin-left: 0;
    width: 100%;
  }
}
.boxes .boxes-text {
  text-align: center;
  padding: 0 20px;
}
@media screen and (min-width: 769px) {
  .boxes .boxes-text {
    padding: 0;
  }
}
.boxes .boxes-text h2 {
  width: 100%;
  margin: 0 auto 32px auto;
  text-align: center;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
@media screen and (min-width: 769px) {
  .boxes .boxes-text h2 {
    margin-top: -17px;
  }
}
.boxes .boxes-text h2 span {
  display: block;
}
@media screen and (min-width: 769px) {
  .boxes .boxes-text h2 {
    margin: 0 auto 40px auto;
    width: 45%;
  }
}
.boxes .boxes-text p {
  margin: 0 auto;
  width: 100%;
  max-width: 740px;
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  text-align: center;
}

/** Loved **/
.loved {
  background-color: #debc8e;
  background-image: url("./assets/images/paper-bg.jpg");
  background-size: contain;
  background-position: center;
}
.loved .container {
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .loved .container {
    flex-direction: row-reverse;
    padding-right: 0;
  }
}
.loved .loved-image {
  width: 100%;
}
.loved .loved-image img {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .loved .loved-image {
    width: 52%;
  }
}
.loved .loved-text {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}
@media screen and (min-width: 769px) {
  .loved .loved-text {
    padding-left: 0;
    padding-right: 8.5vw;
    width: 48%;
  }
}
@media screen and (min-width: 1315px) {
  .loved .loved-text {
    padding-left: 0;
    padding-right: 110px;
    width: 48%;
  }
}
.loved .loved-text h2 {
  margin: 40px auto 40px auto;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
@media screen and (min-width: 769px) {
  .loved .loved-text h2 {
    margin-top: -17px;
  }
}
.loved .loved-text h2 span {
  display: block;
}
@media screen and (min-width: 769px) {
  .loved .loved-text h2 {
    margin: -17px auto 40px auto;
  }
}
.loved .loved-text p {
  margin: 0 auto;
  padding: 0 0 28px 0;
  width: 100%;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}

/** Grown **/
.grown .container {
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .grown .container {
    flex-direction: row;
    padding-left: 0;
  }
}
.grown .grown-image {
  width: 100%;
}
.grown .grown-image img {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .grown .grown-image {
    width: calc(48% + 80px);
    padding-right: 6vw;
  }
}
.grown .grown-text {
  width: 100%;
  padding-right: 0;
}
@media screen and (min-width: 769px) {
  .grown .grown-text {
    width: calc(52% - 80px);
  }
}
.grown .grown-text h2 {
  margin: 40px auto 40px auto;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
@media screen and (min-width: 769px) {
  .grown .grown-text h2 {
    margin-top: -17px;
  }
}
.grown .grown-text h2 span {
  display: block;
}
@media screen and (min-width: 769px) {
  .grown .grown-text h2 {
    margin: 0 auto 40px auto;
  }
}
.grown .grown-text p {
  margin: 0 auto;
  padding: 0 0 28px 0;
  width: 100%;
  max-width: 844px;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}

/** Special **/
.special {
  background: #badbe9;
}
.special .container {
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .special .container {
    flex-direction: row;
    /* padding-left: 0; */
  }
}
.special .special-image {
  width: 100%;
}
.special .special-image img {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .special .special-image {
    width: calc(48% + 80px);
    padding-right: 6vw;
  }
}
.special .special-text {
  width: 100%;
  padding-right: 0;
}
@media screen and (min-width: 769px) {
  .special .special-text {
    width: calc(52% - 80px);
  }
}
.special .special-text h2 {
  margin: 40px auto 40px auto;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
@media screen and (min-width: 769px) {
  .special .special-text h2 {
    margin-top: -17px;
  }
}
.special .special-text h2 span {
  display: block;
}
@media screen and (min-width: 769px) {
  .special .special-text h2 {
    margin: 0 auto 40px auto;
  }
}
.special .special-text p {
  margin: 0 auto;
  padding: 0 0 28px 0;
  width: 100%;
  max-width: 844px;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}

/** Ideas **/
.ideas {
  background: #bd444c;
}
.ideas .container {
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .ideas .container {
    /* flex-direction: row-reverse; */
    flex-direction: row;
    /* padding-right: 0; */
  }
}
.ideas .ideas-image {
  width: 100%;
}
.ideas .ideas-image img {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .ideas .ideas-image {
    width: calc(30% + 80px);
    padding-left: 6vw;
  }
}
.ideas .ideas-text {
  width: 100%;
  padding-left: 0;
  color: #ffffff;
}
@media screen and (min-width: 769px) {
  .ideas .ideas-text {
    width: calc(70% - 80px);
  }
}
.ideas .ideas-text h2 {
  margin: 40px auto 40px auto;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  color: #ffffff;
}
@media screen and (min-width: 769px) {
  .ideas .ideas-text h2 {
    margin-top: -17px;
  }
}
.ideas .ideas-text h2 span {
  display: block;
}
@media screen and (min-width: 769px) {
  .ideas .ideas-text h2 {
    margin: 0 auto 40px auto;
  }
}
.ideas .ideas-text p {
  margin: 0 auto;
  padding: 0 0 28px 0;
  width: 100%;
  max-width: 844px;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}

/** Stockists **/
.stockists {
  background: #ddb999;
  position: relative;
}
.stockists .container {
  flex-direction: column;
  padding: 0;
}
@media screen and (min-width: 769px) {
  .stockists .container {
    flex-direction: row;
    align-items: stretch;
    padding: 110px 80px;
  }
}
.stockists .stockists-text {
  width: 100%;
  padding: 60px 15px;
}
@media screen and (min-width: 769px) {
  .stockists .stockists-text {
    width: 50%;
    padding-right: 40px;
  }
}
.stockists .stockists-text h2 {
  margin: 0 auto 40px auto;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
.stockists .stockists-text p {
  margin: 0 auto;
  padding: 0 0 28px 0;
  width: 100%;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}
.stockists .stockists-image {
  width: 100%;
}
.stockists .stockists-image img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 769px) {
  .stockists .stockists-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100%;
  }
  .stockists .stockists-image img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/** Recipes **/
.recipes .container {
  display: block;
}
.recipes-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px auto;
}
.recipes-intro h2 {
  margin-bottom: 30px;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
.recipes-intro p {
  font-size: 24px;
  line-height: 32px;
}
.recipes-intro p:not(:last-child) {
  margin-bottom: 15px;
}
.recipes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media screen and (min-width: 479px) {
  .recipes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 769px) {
  .recipes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.recipe-card {
  cursor: pointer;
  transition: transform 0.3s ease;
}
.recipe-card:hover {
  transform: translateY(-5px);
}
.recipe-card-image {
  position: relative;
  width: 100%;
  padding-top: 133.33%;
  overflow: hidden;
  border-radius: 8px;
}
.recipe-card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.recipe-card-title {
  margin-top: 20px;
  text-align: center;
  font-weight: 800;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}
a.recipe-card {
  color: var(--regular-text-color);
}

/** Recipe Single **/
.recipe-single .container {
  display: block;
  position: relative;
}
.back-to-recipes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  font-weight: 800;
  font-size: 18px;
  color: var(--link-text-color);
  text-decoration: none;
  transition: color 0.2s ease-in;
}
.back-to-recipes i {
  font-size: 16px;
}
.recipe-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px auto;
}
.recipe-intro h2 {
  margin-bottom: 30px;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
.recipe-intro p {
  font-size: 24px;
  line-height: 32px;
}
.recipe-intro p:not(:last-child) {
  margin-bottom: 15px;
}
.recipe-details {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .recipe-details {
    flex-direction: row;
    gap: 60px;
  }
}
.recipe-details-content {
  width: 100%;
  margin-bottom: 40px;
}
@media screen and (min-width: 769px) {
  .recipe-details-content {
    width: 50%;
    margin-bottom: 0;
  }
}
.recipe-details-content p {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 15px;
}
.recipe-details-content ul,
.recipe-details-content ol {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 15px;
}
.recipe-details-content li {
  margin-bottom: 10px;
}
.recipe-intro ul,
.recipe-intro ol {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 15px;
  text-align: left;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.recipe-intro li {
  margin-bottom: 10px;
}
.recipe-details-image {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .recipe-details-image {
    width: 50%;
  }
}
.recipe-details-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/** Apples **/
.apples {
  background-color: #debc8e;
  background-image: url("./assets/images/paper-bg.jpg");
  background-size: contain;
  background-position: center;
}
.apples .container {
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .apples .container {
    flex-direction: row-reverse;
    padding-right: 0;
  }
}
.apples .apples-image {
  width: 100%;
}
.apples .apples-image img {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .apples .apples-image {
    flex-basis: 49%;
    padding-left: 90px;
    flex-shrink: 2;
  }
}
.apples .apples-text {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 769px) {
  .apples .apples-text {
    flex-basis: 51%;
    flex-shrink: 1;
  }
}
.apples .apples-text h2 {
  margin: 40px auto 40px auto;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
@media screen and (min-width: 769px) {
  .apples .apples-text h2 {
    margin-top: -17px;
  }
}
.apples .apples-text h2 span {
  display: block;
}
@media screen and (min-width: 769px) {
  .apples .apples-text h2 {
    margin: 0 auto 40px auto;
  }
}
.apples .apples-text p {
  margin: 0 auto;
  padding: 0 0 28px 0;
  width: 100%;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}

/** Sustainability **/
.sustainability {
  background: #fff;
}
.sustainability .container {
  display: block;
}
@media screen and (min-width: 769px) {
  .sustainability .container {
    display: flex;
  }
}
.sustainability .sustainability-image {
  width: 100%;
  justify-content: center;
  overflow: hidden;
}
.sustainability .sustainability-image img {
  width: 100%;
  max-width: 300px;
  margin: 0 auto 50px auto;
  transform: rotate(-8.44deg);
}
@media screen and (min-width: 769px) {
  .sustainability .sustainability-image img {
    width: 100%;
    max-width: 400px;
    margin: 0;
  }
}
@media screen and (min-width: 769px) {
  .sustainability .sustainability-image {
    width: 42%;
    padding-right: 6vw;
    flex-shrink: 1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
.sustainability .sustainability-text {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .sustainability .sustainability-text {
    width: 58%;
  }
}
.sustainability .sustainability-text h2 {
  margin: 0 auto 40px auto;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
@media screen and (min-width: 769px) {
  .sustainability .sustainability-text h2 {
    margin-top: -17px;
  }
}
.sustainability .sustainability-text h2 span {
  display: block;
}
.sustainability .sustainability-text p {
  margin: 0 auto;
  padding: 0 0 28px 0;
  width: 100%;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}
body.page-id-297 .sustainability .sustainability-text p {
  font-size: 24px;
  line-height: 32px;
}
.sustainability .sustainability-text .btn.btn-read-more,
.sustainability
  .sustainability-text
  footer
  .container
  .footer-mailing
  form
  button.btn-read-more,
footer
  .container
  .footer-mailing
  form
  .sustainability
  .sustainability-text
  button.btn-read-more,
.sustainability
  .sustainability-text
  footer
  .container
  .footer-mailing
  form
  .btn-read-more.gform_button,
footer
  .container
  .footer-mailing
  form
  .sustainability
  .sustainability-text
  .btn-read-more.gform_button {
  margin-top: 24px;
}
@media screen and (min-width: 769px) {
  .sustainability .sustainability-text .btn.btn-read-more,
  .sustainability
    .sustainability-text
    footer
    .container
    .footer-mailing
    form
    button.btn-read-more,
  footer
    .container
    .footer-mailing
    form
    .sustainability
    .sustainability-text
    button.btn-read-more,
  .sustainability
    .sustainability-text
    footer
    .container
    .footer-mailing
    form
    .btn-read-more.gform_button,
  footer
    .container
    .footer-mailing
    form
    .sustainability
    .sustainability-text
    .btn-read-more.gform_button {
    margin-top: 64px;
  }
}

/** Woolworths **/
.woolworths {
  background-image: url("assets/images/woolworths/woolworths-background.jpg");
}
.woolworths .woolworths-slider {
  margin-bottom: 0;
}
.woolworths .slick-prev {
  left: 20px;
  background-image: url("./assets/images/btn-slider-prev.png");
}
.woolworths .slick-next {
  right: 20px;
  background-image: url("./assets/images/btn-slider-next.png");
}
.woolworths .slick-arrow {
  display: block;
  top: calc(50% - 30px);
  width: 50px;
  height: 50px;
  z-index: 100;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 0.2s ease-in-out;
}
.woolworths .container {
  align-items: center;
  flex-direction: column-reverse;
  padding: 60px 80px;
}
.woolworths .woolworths-text {
  text-align: center;
}
.woolworths .woolworths-text h2 {
  margin: 0 auto 40px auto;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
.woolworths .woolworths-text p {
  margin: 0 auto;
  padding: 0 0 28px 0;
  width: 100%;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}

@media screen and (min-width: 769px) {
  .woolworths .container {
    flex-direction: row;
    padding: 110px 80px;
  }
  .woolworths .woolworths-text {
    width: 50%;
    padding-right: 30px;
    text-align: center;
  }
  .woolworths .woolworths-image {
    width: 50%;
  }
  .woolworths .slick-arrow {
    top: calc(50% - 60px);
    width: 86px;
    height: 86px;
  }
}
/** Where to buy **/
.where-to-buy {
  background: #ddb999;
}
.where-to-buy .where-to-buy-slider {
  margin-bottom: 0;
}
.where-to-buy .slick-prev {
  left: 20px;
  background-image: url("./assets/images/btn-slider-prev.png");
}
.where-to-buy .slick-next {
  right: 20px;
  background-image: url("./assets/images/btn-slider-next.png");
}
.where-to-buy .slick-arrow {
  display: block;
  top: calc(50% - 30px);
  width: 50px;
  height: 50px;
  z-index: 100;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 0.2s ease-in-out;
}
.where-to-buy .container {
  align-items: center;
  flex-direction: column-reverse;
  padding: 60px 80px;
}
.where-to-buy .where-to-buy-text {
  text-align: left;
}
.where-to-buy .where-to-buy-text h2 {
  margin: 0 auto 40px auto;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
.where-to-buy .where-to-buy-text p {
  margin: 0 auto;
  padding: 0 0 28px 0;
  width: 100%;
  /* font-size: var(--text-small-size);
  line-height: var(--text-small-lh); */
  font-size: 24px;
  line-height: 32px;
}

@media screen and (min-width: 769px) {
  .where-to-buy .container {
    flex-direction: row;
    padding: 110px 80px;
  }
  .where-to-buy .where-to-buy-text {
    width: 50%;
    padding-right: 60px;
    text-align: left;
  }
  .where-to-buy .where-to-buy-image {
    width: 48%;
    margin-left: auto;
  }
  .where-to-buy .slick-arrow {
    top: calc(50% - 60px);
    width: 86px;
    height: 86px;
  }
}
/** Social **/
.juicies-social {
  text-align: center;
}
.juicies-social .container {
  display: block;
}
.juicies-social .container h2 {
  margin-bottom: 72px;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
@media screen and (min-width: 769px) {
  .juicies-social .container h2 {
    margin-top: -17px;
  }
}
.juicies-social .container .social-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.juicies-social .container .social-list .social-item {
  flex: 1 0 33.333%;
  padding: 4px;
}
@media screen and (min-width: 769px) {
  .juicies-social .container .social-list .social-item {
    padding: 10px;
  }
}
.juicies-social .container .social-list .social-item img {
  width: 100%;
}

/** Footer **/
footer {
  color: var(--primary-text-color);
  background-color: #debc8e;
  background-image: url("./assets/images/paper-bg.jpg");
  background-size: contain;
  background-position: center;
}
body.page-id-297 footer,
body.page-id-299 footer,
body.single-recipe footer {
  background-color: #badbe9;
  background-image: none;
}
footer .container {
  display: block;
  justify-content: space-between;
  padding: 75px 15px;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}
@media screen and (min-width: 769px) {
  footer .container {
    display: flex;
    padding: 80px;
  }
}
footer .container .footer-mailing {
  width: 100%;
  margin-bottom: 50px;
}
@media screen and (min-width: 769px) {
  footer .container .footer-mailing {
    width: 51.2%;
    margin-bottom: 0;
  }
}
footer .container .footer-mailing h3 {
  margin-bottom: 30px;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
  font-size: normal;
  font-weight: 800;
}
@media screen and (min-width: 769px) {
  footer .container .footer-mailing h3 {
    margin-top: 0;
  }
}
footer .container .footer-mailing ul,
footer .container .footer-mailing li {
  list-style: none;
}
footer .container .footer-mailing div,
footer .container .footer-mailing ul,
footer .container .footer-mailing li {
  margin: 0 !important;
  padding: 0 !important;
}
footer .container .footer-mailing form {
  height: 100%;
  /** gravity form css customization **/
}
footer .container .footer-mailing form input[type="text"],
footer .container .footer-mailing form input[type="email"] {
  width: 100%;
  height: 54px;
  border: 1px solid #fff;
  margin-bottom: 1em;
  padding: 0 30px !important;
  border: none;
  border-radius: 80px;
  font-style: normal;
  font-weight: 800;
  font-size: 24px;
  line-height: 20px;
  letter-spacing: -0.02em;
  font-weight: normal;
  color: #323232;
}
footer .container .footer-mailing form input[type="text"]:focus,
footer .container .footer-mailing form input[type="email"]:focus {
  outline: none;
}
@media screen and (min-width: 769px) {
  footer .container .footer-mailing form input[type="text"],
  footer .container .footer-mailing form input[type="email"] {
    margin-bottom: 0;
    width: 90% !important;
  }
}
footer .container .footer-mailing form button,
footer .container .footer-mailing form .gform_button {
  font-style: normal;
  font-weight: 800;
  font-size: 24px;
  line-height: 20px;
  letter-spacing: -0.02em;
  background-color: transparent;
  border: none;
  transform: matrix(1, -0.01, -0.01, 1, 0, 0);
  margin-top: 20px !important;
}
@media screen and (min-width: 769px) {
  footer .container .footer-mailing form button,
  footer .container .footer-mailing form .gform_button {
    margin-top: 0;
  }
}
footer .container .footer-mailing form .gform_fields .gfield.gfield_error {
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
footer
  .container
  .footer-mailing
  form
  .gform_fields
  .gfield.gfield_error
  input {
  border: 1px solid #c02b0a;
}
footer .container .footer-mailing form .gfield_validation_message {
  display: none;
  padding: 0;
}
footer .container .footer-mailing .gform_confirmation_message {
  width: 90%;
  border: 2px solid #67a037;
  padding: 18px 26px !important;
  background-color: rgba(234, 247, 235, 0.3);
  color: #578632;
  font-weight: normal;
  text-align: left;
  font-size: 24px;
  line-height: 29px;
  margin-bottom: 16px !important;
  border-radius: 30px;
}
footer .container .footer-mailing .gform_validation_errors {
  border: none;
  background: none;
}
footer .container .footer-mailing .gform_validation_errors h2 {
  width: 90%;
  border: 2px solid #ac2b36;
  padding: 18px 26px !important;
  background-color: rgba(254, 246, 246, 0.3);
  color: var(--error-text-color);
  font-weight: normal;
  text-align: left;
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 16px !important;
  border-radius: 30px;
}
footer .container .footer-mailing .gform_validation_errors h2:before {
  display: none;
}
footer .container .footer-mailing .gform_validation_errors h2 .gform-icon {
  display: none;
}
footer .container .footer-contacts {
  width: 100%;
  font-size: 20px;
  line-height: 24px;
}
footer .container .footer-contacts h2 {
  margin-bottom: 0;
  font-weight: 800;
  font-size: var(--h2-size-footer);
  line-height: 50px;
}
footer .container .footer-contacts p {
  width: 100%;
  margin-bottom: 15px;
}
footer .container .footer-contacts a {
  color: var(--link-text-color);
  text-decoration: underline;
}
footer .container .footer-contacts a:hover {
  color: #e85e64;
}
footer .container .footer-contacts .link-socials-wrapper {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (min-width: 769px) {
  footer .container .footer-contacts .link-socials-wrapper {
    margin-top: 45px;
    flex-direction: row;
  }
}
footer .container .footer-contacts .link-socials-wrapper .link-socials a {
  display: inline-block;
  margin-right: 20px;
  font-size: 48px;
  color: #fff;
  transition: color 0.3s ease-in;
}
footer .container .footer-contacts .link-socials-wrapper .link-socials a:hover {
  color: var(--link-text-color);
}
footer
  .container
  .footer-contacts
  .link-socials-wrapper
  .link-socials
  a:last-of-type {
  margin-right: 0;
}
footer .container .footer-contacts .link-socials-wrapper .link-download-faqs {
  font-weight: 800;
  margin-top: 16px;
}
@media screen and (min-width: 769px) {
  footer .container .footer-contacts .link-socials-wrapper .link-download-faqs {
    margin-top: 6px;
  }
}
@media screen and (min-width: 769px) {
  footer .container .footer-contacts {
    width: 43%;
    font-size: 24px;
    line-height: 32px;
  }
  footer .container .footer-contacts h2 {
    margin-bottom: 30px;
  }
  footer .container .footer-contacts p {
    width: 100%;
    margin-bottom: 30px;
  }
}

#gform_wrapper_1 li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half) {
  max-width: 100% !important;
}

/** Slider **/
.product-strawberry {
  background-color: #bd444c;
}

.product-strawberry h2,
.product-chocolate h2,
.product-blue-moon h2 {
  color: #ffffff;
}

.product-chocolate {
  background-color: #ddb999;
}

.product-blue-moon {
  background-color: #badbe9;
}

.product-lemonade {
  background-color: #adba00;
}
.product-lemonade h2 {
  color: #f2eeb6;
}

.product-tropical {
  background-color: #ad2a36;
}

.product-tropical h2 {
  color: #f4d283;
}

.product-wildberry {
  background-color: #e793c5;
}
.product-wildberry h2 {
  color: #ad2a36;
}

.product-orange {
  background-color: #f25d1d;
}

.product-watermelon {
  background-color: #f47a6f;
}

.product-orange h2 {
  color: #fad796;
}

.product-watermelon h2 {
  color: #01a767;
}

/** Product Slider **/
.product-slider .container {
  max-width: 100%;
  padding: 0;
  display: block;
}

.product-item {
  height: 100vh;
  max-height: 330px;
  padding: 30px 20px 30px 20px;
  transition: max-height 300ms ease-out;
  transition-delay: 200ms;
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .product-item {
    padding: 30px;
    max-height: 500px;
    height: 100vw;
  }
}
.product-item h2 {
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}
@media screen and (min-width: 769px) {
  .product-item h2 {
    margin-top: -17px;
  }
}
.product-item img {
  display: flex;
  margin-top: 40px;
  margin-left: auto;
  margin-right: 15px;
  width: 80px;
  transition: transform 300ms ease-out;
  transition-delay: 200ms;
}
@media screen and (min-width: 769px) {
  .product-item img {
    margin-top: 70px;
    width: 100%;
    max-width: 140px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: 20px;
  }
}

/* slide when not active/center*/
.slick-slide.slick-active[aria-hidden="false"]
  + .slick-slide[aria-hidden="true"] {
  transition: none;
}
.slick-slide.slick-active[aria-hidden="false"]
  + .slick-slide[aria-hidden="true"]
  img {
  transition: none;
}

.slider-wrapper {
  width: 100%;
}
.slider-wrapper .slider {
  height: 360px;
  /* slide when active/center */
}
@media screen and (min-width: 769px) {
  .slider-wrapper .slider {
    height: 550px;
  }
}
.slider-wrapper .slider .slick-list {
  margin-left: -60px;
}
.slider-wrapper .slider .slick-center,
.slider-wrapper
  .slider
  .slick-slide[aria-hidden="true"]:not([tabindex="-1"])
  + .slick-cloned[aria-hidden="true"] {
  max-height: 360px;
}
@media screen and (min-width: 769px) {
  .slider-wrapper .slider .slick-center,
  .slider-wrapper
    .slider
    .slick-slide[aria-hidden="true"]:not([tabindex="-1"])
    + .slick-cloned[aria-hidden="true"] {
    max-height: 550px;
  }
}
.slider-wrapper .slider .slick-center img,
.slider-wrapper
  .slider
  .slick-slide[aria-hidden="true"]:not([tabindex="-1"])
  + .slick-cloned[aria-hidden="true"]
  img {
  transform: scale(1.2);
}
.slider-wrapper .slider .slick-arrow {
  display: block;
  top: calc(50% - 30px);
  width: 50px;
  height: 50px;
  z-index: 100;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 0.2s ease-in-out;
}
.slider-wrapper .slider .slick-arrow:hover {
  transform: scale(1.1);
}
.slider-wrapper .slider .slick-arrow::before {
  content: "";
}
@media screen and (min-width: 769px) {
  .slider-wrapper .slider .slick-arrow {
    top: calc(50% - 60px);
    width: 86px;
    height: 86px;
  }
}
.slider-wrapper .slider .slick-prev {
  left: 20px;
  background-image: url("./assets/images/btn-slider-prev.png");
}
.slider-wrapper .slider .slick-next {
  right: 20px;
  background-image: url("./assets/images/btn-slider-next.png");
}
.slider-wrapper .slider:not(.slick-initialized) {
  visibility: hidden;
  height: 566px;
}

/** Product Moosies Grid **/
.product-moosies {
  width: 100%;
  max-width: 100%;
  margin-top: 40px;
}

.product-moosies-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
}

@media screen and (min-width: 769px) {
  .product-moosies-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-moosies-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.product-moosies-header {
  padding: 40px 20px;
  text-align: left;
}

@media screen and (min-width: 769px) {
  .product-moosies-header {
    padding: 60px 40px;
    min-height: 300px;
  }
}

.product-moosies-header h2 {
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  margin-bottom: 20px;
}

@media screen and (min-width: 769px) {
  .product-moosies-header h2 {
    margin-top: -17px;
  }
}

.product-moosies-header img {
  display: block;
  width: 100px;
  margin-left: auto;
  margin-right: 20px;
  margin-top: 20px;
}

@media screen and (min-width: 769px) {
  .product-moosies-header img {
    width: 140px;
    margin-top: auto;
  }
}

.product-moosies-ingredients {
  background: #fff;
  padding: 40px 20px;
  flex-grow: 1;
}

@media screen and (min-width: 769px) {
  .product-moosies-ingredients {
    padding: 40px;
  }
}

.product-moosies-ingredients h3 {
  margin-bottom: 20px;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
  color: var(--primary-text-color);
  font-weight: 800;
}

.product-moosies-ingredients p {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 30px;
}

@media screen and (min-width: 769px) {
  .product-moosies-ingredients p {
    font-size: 22px;
    line-height: 30px;
  }
}

.product-moosies-badges {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.product-moosies-badges img {
  max-width: 180px;
  height: auto;
}

.product-moosies-nutritional {
  background: #f8f8f8;
  padding: 40px 20px;
}

@media screen and (min-width: 769px) {
  .product-moosies-nutritional {
    padding: 40px;
  }
}

.product-moosies-nutritional h3 {
  margin-bottom: 20px;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
  color: var(--primary-text-color);
  font-weight: 800;
}

.product-moosies-nutritional dl {
  display: flex;
  flex-flow: row wrap;
  font-size: 18px;
  line-height: 28px;
}

@media screen and (min-width: 769px) {
  .product-moosies-nutritional dl {
    font-size: 20px;
    line-height: 30px;
  }
}

.product-moosies-nutritional dt {
  flex-basis: 65%;
  padding: 8px 4px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.product-moosies-nutritional dd {
  flex-basis: 35%;
  flex-grow: 1;
  margin: 0;
  padding: 8px 4px;
  border-bottom: 1px solid #ddd;
  font-weight: 900;
  text-align: right;
}

/** Nutritional-Facts **/
.wrapper-nutritional-facts {
  position: relative;
  display: block;
}

.nutritional-facts {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: var(--container-max-width);
  padding: 40px 20px 40px 20px;
  margin: 0 auto;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 32px;
}
@media screen and (min-width: 769px) {
  .nutritional-facts {
    flex-direction: row;
    padding: 60px 80px 125px 80px;
    font-size: 24px;
    line-height: 32px;
  }
}
.nutritional-facts.active {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .nutritional-facts.active {
    display: flex;
    flex-direction: row;
  }
}
.nutritional-facts h3 {
  margin-bottom: 40px;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
  color: var(--primary-text-color);
}
.nutritional-facts .nutritional-facts__ingredients-list {
  width: 100%;
  padding-right: 0;
}
.nutritional-facts .nutritional-facts__ingredients-list p {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .nutritional-facts .nutritional-facts__ingredients-list {
    width: 55%;
    padding-right: 30px;
  }
  .nutritional-facts .nutritional-facts__ingredients-list p {
    width: 75%;
  }
}
.nutritional-facts .nutritional-facts__ingredients-list .images {
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
}
.nutritional-facts .nutritional-facts__ingredients-list .images .images-col-1 {
  margin-right: 40px;
  flex-shrink: 1;
}
.nutritional-facts
  .nutritional-facts__ingredients-list
  .images
  .images-col-1
  img {
  width: 100%;
  max-width: 158px;
}
.nutritional-facts .nutritional-facts__ingredients-list .images .images-col-2 {
  flex-shrink: 1;
}
.nutritional-facts
  .nutritional-facts__ingredients-list
  .images
  .images-col-2
  img {
  width: 100%;
  max-width: 220px;
  display: block;
  margin: 0 auto 14px auto;
}
@media screen and (min-width: 769px) {
  .nutritional-facts .nutritional-facts__ingredients-list .images {
    margin-top: 80px;
    margin-bottom: 0;
  }
}
.nutritional-facts .nutritional-facts__nutritional-info {
  width: 100%;
}
.nutritional-facts .nutritional-facts__nutritional-info dl {
  display: flex;
  flex-flow: row wrap;
}
.nutritional-facts .nutritional-facts__nutritional-info dt {
  flex-basis: 72%;
  padding: 2px 4px;
  text-align: left;
  border-bottom: 1px solid #eac9d3;
}
.nutritional-facts .nutritional-facts__nutritional-info dd {
  flex-basis: 28%;
  flex-grow: 1;
  margin: 0;
  padding: 2px 4px;
  border-bottom: 1px solid #eac9d3;
  font-weight: 900;
}
@media screen and (min-width: 769px) {
  .nutritional-facts .nutritional-facts__nutritional-info {
    width: 45%;
  }
  .nutritional-facts .nutritional-facts__nutritional-info dt {
    flex-basis: 65%;
  }
  .nutritional-facts .nutritional-facts__nutritional-info dd {
    flex-basis: 35%;
  }
}

/** MODAL **/
.modal {
  display: none;
}

.modal.is-open {
  display: block;
}

.modal {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    avenir next,
    avenir,
    helvetica neue,
    helvetica,
    ubuntu,
    roboto,
    noto,
    segoe ui,
    arial,
    sans-serif;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.modal__container {
  position: relative;
  background-image: url(./assets/images/bg-popup-mobile.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  max-width: 1100px;
  padding-bottom: 30px;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}
@media screen and (min-width: 769px) {
  .modal__container {
    background-image: url(./assets/images/bg-popup.png);
  }
}

.modal__header {
  display: flex;
  justify-content: flex-end;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
  margin-top: 0;
  top: 25px;
  right: 49px;
  position: absolute;
  font-size: 24px;
  color: var(--link-text-color);
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .modal__close {
    top: 60px;
    right: 75px;
  }
}

.modal__header .modal__close:before {
  content: "✕";
}

.modal__content {
  padding: 40px 30px;
}
@media screen and (min-width: 769px) {
  .modal__content {
    padding: 60px;
  }
}
.modal__content h3 {
  margin-bottom: 40px;
  padding-right: 50px;
  color: var(--primary-text-color);
  font-weight: 800;
  font-size: 18px;
  line-height: 24px;
}
@media screen and (min-width: 769px) {
  .modal__content h3 {
    margin-bottom: 40px;
    padding-right: 100px;
    font-size: var(--text-regular-size);
    line-height: var(--text-regular-lh);
  }
}
.modal__content p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 20px;
}
@media screen and (min-width: 769px) {
  .modal__content p {
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 24px;
  }
}

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

body.blur {
  overflow: hidden;
}

.blur > :not(.modal) {
  -webkit-filter: blur(5px) grayscale(0.7);
  filter: blur(5px) grayscale(0.7);
}

/** FAQs **/
.faqs .container {
  display: block;
  width: 100%;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}
.faqs .container > div {
  margin-bottom: 100px;
}
.faqs .container > div:last-of-type {
  margin-bottom: 0;
}
@media screen and (min-width: 769px) {
  .faqs .container > div {
    width: 85%;
  }
}
.faqs .faqs-item {
  margin-bottom: 100px;
}
.faqs .faqs-item:last-of-type {
  margin-bottom: 0;
}
@media screen and (min-width: 769px) {
  .faqs .faqs-item {
    width: 85%;
  }
}
.faqs h3 {
  margin-bottom: 0;
  color: var(--primary-text-color);
  font-weight: 800;
  font-size: var(--faqs-headng-size);
  line-height: var(--faqs-headng-lh);
}
.faqs h4 {
  margin-top: 55px;
  margin-bottom: 25px;
  font-weight: 900;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
}
.faqs p {
  margin-bottom: 30px;
}
.faqs .fa-smile-beam {
  color: #ffc129;
  display: inline-block;
  margin-left: 6px;
}
.faqs .fa-smile-beam::before {
  border-radius: 50%;
  display: inline-flex;
  background-color: #000;
  width: 20px;
  height: 20px;
  align-self: center;
  justify-content: center;
  align-items: center;
}

.link-back {
  display: inline-block;
  margin: 30px 0 20px 0;
  font-weight: 800;
  font-size: 24px;
  line-height: 54px;
}
.link-back .fa-chevron-left {
  margin-right: 10px;
}

.keep-together {
  white-space: nowrap;
}

/** Fundraiser **/
.fundraiser-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 400px;
}
@media screen and (min-width: 769px) {
  .fundraiser-header {
    height: 700px;
  }
}
.fundraiser-header .background {
  position: absolute;
  z-index: -10;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.fundraiser-header .overlay {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(
    to top,
    rgba(68, 175, 217, 0.95),
    rgba(68, 175, 217, 0)
  );
  height: 66.666667%;
  z-index: -10;
}
.fundraiser-header .container {
  padding-top: 0;
  padding-bottom: 0;
}
.fundraiser-header .navigation {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}
.fundraiser-header .navigation .logo {
  margin: 0;
}
.fundraiser-header .text {
  padding-top: 36px;
  color: #ffffff;
  font-weight: 600;
  text-align: right;
}
@media screen and (min-width: 769px) {
  .fundraiser-header .text {
    font-size: var(--text-regular-size);
  }
}
.fundraiser-header .content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  font-size: var(--text-regular-size);
  line-height: var(--text-regular-lh);
  font-weight: 400;
  color: #fff;
  text-align: left;
}
.fundraiser-header .content span {
  font-size: var(--h2-size-footer);
  font-weight: 600;
}

.fundraiser-pack {
  background-color: #44afd9;
  color: #ffffff;
}
@media screen and (min-width: 769px) {
  .fundraiser-pack .container {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
@media screen and (min-width: 769px) {
  .fundraiser-pack .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    width: 100%;
  }
}
.fundraiser-pack .row img {
  width: 100%;
  margin: 15px 0 0 0;
}
@media screen and (min-width: 769px) {
  .fundraiser-pack .row img {
    width: 350px;
    margin-left: auto;
  }
}
.fundraiser-pack h2 {
  margin-bottom: 20px;
}
.fundraiser-pack ul {
  padding: 0 0 0 20px;
}
.fundraiser-pack ul li:not(:last-child) {
  margin-bottom: 10px;
}
.fundraiser-pack ul li span {
  background: #308db2;
  padding: 0px 6px 2px 6px;
  border-radius: 5px;
}
.fundraiser-pack ul li span a {
  color: #fff;
}

@media screen and (min-width: 769px) {
  .fundraiser-juicies .container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.fundraiser-juicies .row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}
@media screen and (min-width: 479px) {
  .fundraiser-juicies .row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.fundraiser-juicies img {
  width: 100%;
}
.fundraiser-juicies p {
  text-align: center;
  margin-top: 5px;
  color: #308db2;
}
.fundraiser-juicies p span {
  font-size: 12px;
}

.fundraiser-order .container {
  padding-top: 0;
  padding-bottom: 0;
}
.fundraiser-order .container .row {
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}
@media screen and (min-width: 1024px) {
  .fundraiser-order .container .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.fundraiser-order .container .row .order-details {
  background-color: rgba(68, 175, 217, 0.2);
  border-radius: 10px;
  padding: 20px;
  color: #308db2;
}
@media screen and (min-width: 1024px) {
  .fundraiser-order .container .row .order-details {
    grid-column: span 9;
  }
}
.fundraiser-order .container .row .order-details .order-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.fundraiser-order .container .row .order-details .order-date input {
  border: 1px solid rgba(68, 175, 217, 0.3);
  background: white;
  padding: 10px 15px;
  color: rgb(68, 175, 217);
}
.fundraiser-order .container .row .order-details h3 {
  color: #b0322e;
  margin: 15px 0 10px 0;
}
.fundraiser-order .container .row .order-details .order-minimum {
  font-size: 12px;
}
.fundraiser-order .container .row .order-details table {
  margin-top: 15px;
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.fundraiser-order .container .row .order-details table thead {
  background-color: rgb(68, 175, 217);
  color: #ffffff;
  text-align: left;
  font-size: 12px;
}
.fundraiser-order .container .row .order-details table th,
.fundraiser-order .container .row .order-details table td {
  width: 100%;
  padding: 10px 10px;
}
.fundraiser-order .container .row .order-details table tbody tr:nth-child(odd) {
  background-color: rgba(68, 175, 217, 0.1);
}
.fundraiser-order .container .row .order-details table tbody tr:last-child {
  border-top: 1px solid rgb(68, 175, 217);
  font-weight: 600;
}
.fundraiser-order .container .row .order-details table .flavour-description {
  font-size: 12px;
}
/* .fundraiser-order
  .container
  .row
  .order-details
  table
  input[data-flavour="watermelon"] {
  opacity: 0.25;
} */
.fundraiser-order .container .row .order-details table input {
  border: 1px solid rgba(82, 142, 126, 0.3);
  background: white;
  padding: 4px 6px;
  color: rgb(68, 175, 217);
}
.fundraiser-order .container .row .order-details table input:focus {
  border: 1px solid rgb(68, 175, 217);
  outline: none;
}
.fundraiser-order .container .row .order-details .order-total {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media screen and (min-width: 479px) {
  .fundraiser-order .container .row .order-details .order-total {
    flex-direction: row;
    justify-content: end;
    align-items: center;
    text-align: right;
  }
}
.fundraiser-order .container .row .order-details .order-total p {
  color: #b0322e;
  font-weight: 600;
}
.fundraiser-order .container .row .order-details .order-total button {
  background-color: rgb(68, 175, 217);
  color: #ffffff;
  font-weight: 600;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}
.fundraiser-order .container .row .order-details .order-message {
  margin-top: 10px;
  background-color: #b0322e;
  color: #ffffff;
  padding: 10px;
  font-weight: 600;
  text-align: center;
}
.fundraiser-order .container .row .order-details .order-message a {
  color: #ffffff !important;
  text-decoration: underline;
}
.fundraiser-order .container .row .order-kits {
  background-color: rgba(68, 175, 217, 0.2);
  border-radius: 10px;
  padding: 20px;
  color: #308db2;
}
@media screen and (min-width: 1024px) {
  .fundraiser-order .container .row .order-kits {
    grid-column: span 3;
  }
}
.fundraiser-order .container .row .order-kits ul {
  padding: 0 0 0 20px;
}
.fundraiser-order .container .row .order-kits ul li:not(:last-child) {
  margin-bottom: 10px;
}
.fundraiser-order .container .row .order-kits p:not(:last-child) {
  margin-bottom: 10px;
}

@media screen and (min-width: 769px) {
  .fundraise-info .container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.fundraise-info p {
  color: #308db2;
}
.fundraise-info p:not(:last-child) {
  margin-bottom: 10px;
}
.fundraise-info p a {
  color: #308db2;
  font-weight: 600;
}

.fundraise-checkout {
  margin: 1rem 0;
}
.fundraise-checkout .date {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.fundraise-checkout .date .edit,
.fundraise-checkout .date .save {
  color: #b0322e;
}
.fundraise-checkout .date-new {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

/** WooCommerce **/
.custom-nav {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1.5rem;
  margin: 40px 0 40px 0;
}
@media screen and (min-width: 769px) {
  .custom-nav {
    margin-left: 1.5rem;
    display: inline-flex;
    flex-direction: row;
    text-align: left;
  }
}
.custom-nav .link-back {
  margin: 0;
  line-height: 1;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: rgb(82, 142, 126) !important;
}

.woocommerce-cart .woocommerce {
  width: 100%;
}

.cart_totals h2 {
  margin-bottom: 1rem;
}

#order_review_heading {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.woocommerce-thankyou-order-received {
  margin-bottom: 1rem !important;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
  margin-bottom: 1rem;
}

/* =============================================
   Shop Archive Page
   ============================================= */

.shop-archive .container {
  flex-direction: column;
}

.shop-archive ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.shop-archive ul.products li.product {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .shop-archive ul.products li.product {
    width: calc(50% - 15px);
  }
}

@media screen and (min-width: 1280px) {
  .shop-archive ul.products li.product {
    width: calc(33.333% - 20px);
  }
}

.shop-archive ul.products li.product a img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.shop-archive ul.products li.product .woocommerce-loop-product__title {
  font-size: 22px;
  font-weight: 800;
  color: #ad2a36;
  margin: 12px 0 6px;
}

.shop-archive ul.products li.product .price {
  font-size: 18px;
  font-weight: 800;
  color: #323232;
}

/* =============================================
   Single Product Page
   ============================================= */

.product-single {
  background-color: #fff;
}

.product-single .container {
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 80px;
}

@media screen and (min-width: 769px) {
  .product-single .container {
    padding-top: 60px;
    padding-bottom: 100px;
  }
}

.product-single .woocommerce-notices-wrapper {
  margin-bottom: 24px;
}

.product-single .woocommerce-message,
.product-single .woocommerce-error,
.product-single .woocommerce-info {
  margin: 0;
}

.product-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media screen and (min-width: 769px) {
  .product-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
  }
}

.product-image {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .product-image {
    width: 50%;
    flex-shrink: 0;
  }
}

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-gallery__main img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.product-gallery__thumbs {
  display: flex;
  gap: 10px;
}

.product-gallery__thumb {
  flex: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.product-gallery__thumb.active {
  border-color: #ad2a36;
}

.product-gallery__thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.product-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media screen and (min-width: 769px) {
  .product-content {
    width: 50%;
    padding-top: 10px;
  }
}

.product-title {
  font-weight: 800;
  font-size: 36px;
  line-height: 1.2;
  color: #ad2a36;
  margin: 0;
}

@media screen and (min-width: 769px) {
  .product-title {
    font-size: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .product-title {
    font-size: 56px;
  }
}

.product-price .price {
  font-size: 28px;
  font-weight: 800;
  color: #323232;
}

@media screen and (min-width: 769px) {
  .product-price .price {
    font-size: 34px;
  }
}

.product-price .price ins {
  text-decoration: none;
}

.product-price .price del {
  opacity: 0.5;
  font-size: 0.75em;
}

.product-description {
  font-size: 18px;
  line-height: 1.6;
  color: #323232;
}

@media screen and (min-width: 769px) {
  .product-description {
    font-size: 20px;
  }
}

.product-description p {
  margin-bottom: 0.75em;
}

.product-description p:last-child {
  margin-bottom: 0;
}

.product-add-to-cart .cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
}

.product-add-to-cart .quantity {
  display: flex;
  align-items: center;
}

.product-add-to-cart .quantity .qty {
  width: 70px;
  height: 50px;
  border: 2px solid #ad2a36;
  border-radius: 4px;
  font-size: 18px;
  text-align: center;
  color: #323232;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.product-add-to-cart .quantity .qty:focus {
  outline: none;
  border-color: #e85e64;
}

.product-add-to-cart .single_add_to_cart_button {
  border: 0;
  background-color: #fff;
}

.product-add-to-cart .single_add_to_cart_button.loading {
  opacity: 0.7;
  cursor: wait;
}

/*# sourceMappingURL=style.css.map */