@charset "UTF-8";
/*!
Theme Name: Ddrops US EN
Theme URI: http://underscores.me/
Author: Nate Adshead
Author URI: https://nateweb.ca
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ddrops-us-en
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Ddrops US EN is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Variables
--------------------------------------------- */
:root {
  --header-height: auto;
  --border-radius-blue: 50px;
  --border-radius-faq: 15px;
}

/* Reset
--------------------------------------------- */
img,
svg {
  display: block;
  width: 100%;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

ol {
  list-style: none;
}

a {
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
  overflow-x: hidden;
}

address {
  font-style: normal;
}

main#primary {
  padding-top: var(--header-height);
}

figure {
  margin: 0;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

sub {
  bottom: auto;
  top: -0.75em;
  font-size: 65%;
}

html {
  overflow-x: hidden;
}

/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: black;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Containers
--------------------------------------------- */
.bg-darkblue {
  background-color: #002d73;
}

.color-darkblue {
  color: #002d73;
}

.bg-babyblue {
  background-color: #0080c6;
}

.color-babyblue {
  color: #0080c6;
}

.bg-skyblue {
  background-color: #8ed8f8;
}

.color-skyblue {
  color: #8ed8f8;
}

.bg-lightblue {
  background-color: #d3efff;
}

.color-lightblue {
  color: #d3efff;
}

.bg-brightpink {
  background-color: #d80b8c;
}

.color-brightpink {
  color: #d80b8c;
}

.bg-lightpink {
  background-color: #ffd8f0;
}

.color-lightpink {
  color: #ffd8f0;
}

.color-diffpink {
  color: #F97FB5;
}

.bg-brightyellow {
  background-color: #ffd300;
}

.color-brightyellow {
  color: #ffd300;
}

.bg-lightyellow {
  background-color: #fff7ce;
}

.color-lightyellow {
  color: #fff7ce;
}

.bg-brightorange {
  background-color: #ff901d;
}

.color-brightorange {
  color: #ff901d;
}

.bg-lightorange {
  background-color: #ffe5ca;
}

.color-lightorange {
  color: #ffe5ca;
}

.bg-brightgreen {
  background-color: #8dc63f;
}

.color-brigthgreen {
  color: #8dc63f;
}

.bg-lightgreen {
  background-color: #e2ffba;
}

.color-lightgreen {
  color: #e2ffba;
}

.bg-darkpurple {
  background-color: #582a8a;
}

.color-darkpurple {
  color: #582a8a;
}

.bg-lightpurple {
  background-color: #e8d3ff;
}

.color-lightpurple {
  color: #e8d3ff;
}

.color-diffpurple {
  color: #503D98;
}

.bg-teal {
  background-color: #3bbfad;
}

.color-teal {
  color: #3bbfad;
}

.bg-gray {
  background-color: #eeeeee;
}

.color-gray {
  color: #eeeeee;
}

.bg-lightgray {
  background-color: #d9d9d9;
}

.color-lightgray {
  color: #d9d9d9;
}

.bg-white {
  background-color: white;
}

.color-white {
  color: white;
}

body {
  font-family: museo-sans-rounded, sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: -0.02rem;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
  margin: 0;
  padding: 0;
  text-wrap: pretty;
}

.title-with-sub span {
  font-weight: 500;
  display: block;
  font-size: 1rem;
  margin-bottom: 1em;
  color: #0080C6;
}

.pages {
  font-weight: 700;
  font-size: clamp(2.5rem, 10dvw, 5.5rem);
  color: white;
}

.section-title,
.page-title {
  font-weight: 900;
  text-align: center;
  line-height: 1.2;
}

.section-title {
  font-size: clamp(2.2rem, 1.6613rem + 2.2983vw, 3.5rem);
  padding-top: 0.8em;
  padding-bottom: 0.7em;
}

.quote-box h1 {
  padding-top: 0;
}

.product-page-title {
  text-align: left;
  margin: 0 0 0.5rem 0;
  font-size: clamp(2.7rem, 2.3845rem + 1.3463vw, 4rem);
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .product-page-title {
    margin: 0 0 0.1em 0;
  }
}

.product-sub {
  text-align: left;
  display: block;
  font-size: clamp(1rem, 0.7573rem + 1.0356vw, 2rem);
  margin-bottom: clamp(1rem, 0.9171rem + 0.3536vw, 1.2rem);
}

.section-where-to-buy-title {
  font-size: clamp(2rem, 1.6495rem + 1.4953vw, 3.5rem);
  margin-bottom: 0.3em;
  text-align: center;
  font-weight: 900;
}

.section-title-mid {
  text-align: left;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0.3em;
  font-size: clamp(2rem, 1.6495rem + 1.4953vw, 3.5rem);
}

.section-title-blue {
  text-align: left;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0.3em;
  font-size: clamp(2.3rem, 2.1667rem + 0.2778vw, 2.5rem);
}

.social-title {
  text-transform: uppercase;
  text-align: center;
  font-weight: 900;
  padding-top: 1em;
  padding-bottom: 1em;
  font-size: clamp(2.5rem, 1.5rem + 2.0833vw, 4rem);
}

.section-title-md {
  font-weight: 900;
  text-align: left;
  line-height: 1.25;
  margin-bottom: 1em;
  font-size: 1.8rem;
}

.section-title-sm {
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 1em;
  font-size: clamp(1.8rem, 1.6301rem + 0.7249vw, 2.5rem);
}

.page-title {
  position: relative;
  z-index: 1;
  font-size: clamp(2.7rem, 2.3845rem + 1.3463vw, 4rem);
}

.faq-labels {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: clamp(1.5rem, 1.3786rem + 0.5178vw, 2rem);
  margin: clamp(2.2rem, 1.9514rem + 1.0608vw, 2.8rem) auto clamp(1.4rem, 1.1514rem + 1.0608vw, 2rem) auto;
}
@media screen and (min-width: 768px) {
  .faq-labels {
    text-align: left;
  }
}

p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  letter-spacing: -0.02rem;
}
@media screen and (min-width: 768px) {
  p {
    font-size: 1.1rem;
  }
}
@media screen and (min-width: 1024px) {
  p {
    font-size: 1.2rem;
  }
}

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

strong {
  font-weight: 900;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

sup {
  font-size: 40%;
  top: -0.7em;
}

.text-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  line-height: 1.5;
}
.text-check img {
  display: inline-block;
  width: clamp(1.15rem, 0.9167rem + 0.4861vw, 1.5rem);
}

body {
  width: 100%;
  height: 100%;
  padding: 0;
}

.d-grid {
  display: grid;
}

.d-flex {
  display: flex;
}

.container-thumbs {
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .container-thumbs {
    margin-inline: 1.8rem;
  }
}

.container-sm {
  max-width: 540px;
  padding: 0 clamp(1rem, -0.2431rem + 5.3039vw, 4rem);
  margin: 0 auto;
}

.container-md {
  max-width: 720px;
  padding: 0 clamp(1rem, -0.2431rem + 5.3039vw, 4rem);
  margin: 0 auto;
}

.container-lg {
  max-width: 960px;
  padding: 0 clamp(1rem, -0.2431rem + 5.3039vw, 4rem);
  margin: 0 auto;
}

.container-xl {
  max-width: 1280px;
  padding: 0 clamp(1rem, -0.2431rem + 5.3039vw, 4rem);
  margin: 0 auto;
}

.container-xxl {
  max-width: 1920px;
  padding: 0 clamp(1rem, -0.2431rem + 5.3039vw, 4rem);
  margin: 0 auto;
}

.conditional-container {
  padding: 0;
}
@media screen and (min-width: 1920px) {
  .conditional-container {
    overflow: hidden;
    margin: 0 auto;
  }
}

.container-fluid {
  width: 100%;
  padding: 0 clamp(1rem, -0.2431rem + 5.3039vw, 4rem);
  margin: 0 auto;
}

section {
  position: relative;
  margin: 0 0 clamp(4rem, 3.1713rem + 3.5359vw, 6rem) 0;
  background-color: white;
}

section#sub {
  padding: clamp(2rem, 1.1713rem + 3.5359vw, 4rem) 0;
}
section#sub .btn-container {
  padding: 0;
}

.no-pad {
  padding: 0;
}

.no-margin {
  margin: 0;
}

.round-box-blue {
  border-radius: var(--border-radius-blue);
}

.round-box-sm {
  border-radius: 25px;
}

section#hero {
  margin-bottom: 0;
}

/* Animations
--------------------------------------------- */
@keyframes rotate_animation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Transitions
--------------------------------------------- */
/* Buttons
--------------------------------------------- */
.btn-container {
  display: block;
  width: 100%;
  text-align: center;
  padding-top: clamp(2rem, 1.1713rem + 3.5359vw, 4rem);
  padding-bottom: clamp(4rem, 3.1713rem + 3.5359vw, 6rem);
}

.btn {
  border-radius: 50px;
  position: relative;
  padding: clamp(0.5rem, 0.3239rem + 0.7512vw, 1rem) clamp(2rem, 1.2958rem + 3.0047vw, 4rem);
  overflow: hidden;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.btn span {
  color: white;
  position: relative;
  z-index: 1;
  font-weight: 700;
  display: block;
  font-size: clamp(1.1rem, 1.0171rem + 0.3536vw, 1.3rem);
}
.btn::before, .btn::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.btn::before {
  left: 0;
  transform: translateX(-100%);
}
.btn::after {
  right: 0;
  transform: translateX(100%);
}
.btn:hover::before, .btn:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.btn-hover-orange::before, .btn-hover-orange::after {
  background-color: #ff901d;
}

.btn-hover-babyblue::before, .btn-hover-babyblue::after {
  background-color: #0080c6;
}

@media screen and (min-width: 768px) {
  .btn {
    min-width: 250px;
  }
}
.btn-outline {
  border-radius: 50px;
  position: relative;
  padding: 0.5rem;
  overflow: hidden;
  display: inline-block;
  text-align: center;
  min-width: 200px;
  border: 1px solid white;
}
.btn-outline span {
  position: relative;
  z-index: 1;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  font-size: clamp(1rem, 0.8832rem + 0.4984vw, 1.5rem);
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-outline:hover {
  background-color: white;
}
.btn-outline:hover span {
  color: #d80b8c;
}

.btn-buy-with-prime {
  background-color: #0080c6;
}

.btn-brightorange {
  background-color: #ff901d;
}

.btn-navyblue {
  background-color: #002d73;
}

.btn-purple {
  background-color: #582a8a;
}

.btn-babyblue {
  background-color: #0080c6;
}

.btn-white {
  background-color: white;
}
.btn-white::after {
  background-color: #ff901d;
}
.btn-white span {
  color: #002d73;
  text-transform: none;
}

button {
  all: unset;
}

/* Review Stars
--------------------------------------------- */
.glsr-summary-rating {
  order: 2;
}

.glsr-summary-stars {
  order: 1;
}

.glsr-summary-percentages {
  margin-bottom: 1rem;
}

.glsr-summary {
  margin: 0 auto;
}

.glsr-minimal,
.glsr-review-date {
  font-style: normal;
}

.glsr-review-date .glsr-tag-value,
.glsr-review-author .glsr-tag-value {
  color: grey;
}

.glsr-review {
  padding-bottom: 1rem;
  border-bottom: 1px solid #8ed8f8;
}

section#reviews .page-numbers {
  color: white;
  font-weight: 500;
  text-decoration: none;
  padding: 1rem;
  border-radius: 15px;
  display: inline-block;
  transition: background-color 0.3s ease;
  background-color: #0080c6;
}
section#reviews .page-numbers.current, section#reviews .page-numbers:hover {
  background-color: #ff901d;
}

input,
textarea {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset;
  background-color: #efefef;
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 10px;
  outline: none;
  font-size: 1rem;
}

.glsr-minimal form.glsr-form label.glsr-label span {
  display: block;
  font-weight: 700;
  line-height: 1;
  color: #0080c6;
  margin-bottom: 0.5rem;
}
.glsr-minimal .wp-block-button {
  margin: 2rem auto clamp(4rem, 3.1713rem + 3.5359vw, 6rem) auto !important;
  text-align: center;
}

.glsr-field-rating {
  margin-bottom: 1rem;
}

button[type=submit] {
  color: white;
  padding: 0.5rem 4rem;
  display: inline-block;
  border-radius: 15px;
  background-color: #0080c6;
}
button[type=submit]:hover {
  background-color: #ff901d;
}

.write-review {
  background-color: #0080c6;
}

.glsr-pagination {
  margin-bottom: 3rem;
}

.glsr-field-rating {
  margin-top: 2rem;
}

.glsr-reviews-wrap {
  margin-top: 2rem;
}

p.glsr-no-margins {
  text-align: center;
  color: #002d73;
}

/* Global Elements
--------------------------------------------- */
.award-rotate-container {
  overflow: hidden;
}
.award-rotate-container .coin-animation {
  position: relative;
}
.award-rotate-container .coin-animation .text-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: rotate_animation 90s infinite linear;
}

.drop-label {
  cursor: pointer;
}
.drop-label .label-container {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.drop-label .label {
  font-size: clamp(1rem, 0.8301rem + 0.7249vw, 1.7rem);
  font-weight: 700;
}
.drop-label .plus {
  width: 4vw;
  max-width: 12px;
  transition: transform 0.3s ease;
}
.drop-label .reveal {
  overflow: hidden;
  opacity: 0;
  height: 0;
  transition: height 0.3s ease, opacity 0.3s ease;
}
.drop-label.active .plus {
  transform: rotate(45deg);
}

section#quality {
  overflow: hidden;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
section#quality .section-title-blue {
  text-align: center;
}
@media screen and (min-width: 768px) {
  section#quality .section-title-blue {
    text-align: left;
  }
}
section#quality ul.quality-list .quality-icon {
  padding: 0.4rem;
}
section#quality .quality-bottle-drop {
  margin-bottom: 0.5rem;
}
section#quality .mobile-quality-box {
  padding: 2.2rem 2rem;
  border-radius: var(--border-radius-blue);
}
section#quality .desktop-quality-box {
  border-radius: var(--border-radius-blue);
  padding: clamp(2.2rem, 1.3333rem + 1.8056vw, 3.5rem);
  display: none;
}
section#quality .round-box-blue {
  border-radius: var(--border-radius-blue);
  padding: clamp(2rem, 1.5146rem + 2.0712vw, 4rem);
}
section#quality .quality-bottle-drop {
  width: 30vw;
  max-width: 130px;
  margin: 2rem auto;
}
section#quality .bottle-drop-right {
  width: 80%;
  max-width: 150px;
  margin: 0 auto;
  place-content: center;
}
section#quality p {
  margin-bottom: 2rem;
  text-wrap: pretty;
  font-weight: 700;
}
section#quality h2 {
  text-align: center;
  text-transform: uppercase;
  margin-bottom: clamp(1.2rem, 1.1272rem + 0.3107vw, 1.5rem);
}
section#quality ul.quality-list {
  gap: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
section#quality ul.quality-list li {
  grid-template-columns: none;
  grid-template-rows: auto 1fr;
}
section#quality ul.quality-list li .quality-text {
  display: grid;
  place-content: center;
  color: #002d73;
  font-weight: 700;
  text-wrap: balance;
  text-align: center;
  font-size: clamp(0.8rem, 0.7272rem + 0.3107vw, 1.1rem);
  line-height: 1.2;
}
@media screen and (min-width: 550px) {
  section#quality ul.quality-list li .quality-text br {
    display: none;
  }
}
section#quality ul.quality-list li .quality-icon {
  display: flex;
  max-width: 120px;
  margin: 0 auto;
}
section#quality ul.quality-list li .quality-icon img {
  align-self: center;
}

@media screen and (min-width: 768px) {
  section#quality h2 {
    text-align: left;
    font-size: 1.4rem;
  }
  section#quality .desktop-quality-box {
    display: block;
  }
  section#quality .desktop-quality-box .container-split {
    grid-template-columns: 3fr 1fr;
    gap: 3rem;
  }
  section#quality .desktop-quality-box .quality-bottle-drop {
    display: none;
  }
  section#quality .mobile-quality-box {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  section#award-winning {
    margin-top: clamp(4rem, 3.1713rem + 3.5359vw, 6rem);
  }
}
section#award-winning .container-xl {
  position: relative;
}
section#award-winning h5 {
  text-align: center;
  width: 60%;
  margin: 1rem auto;
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 500;
}
section#award-winning .swiper-slide img {
  margin: 0 auto;
  width: 70%;
  object-fit: contain;
}
section#award-winning .award-hit {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  section#award-winning .award-hit {
    aspect-ratio: 1;
  }
  section#award-winning .award-hit:hover figure.slide-container {
    opacity: 0;
  }
  section#award-winning .award-hit:hover figcaption.hover-description {
    opacity: 1;
  }
}
section#award-winning .swiper-pagination {
  position: relative;
  margin-top: 1rem;
}
section#award-winning .figure-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  section#award-winning .figure-container {
    display: block;
    height: 100%;
  }
}
section#award-winning figure.slide-container {
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: opacity 0.3s ease;
}
section#award-winning figure.slide-container span {
  line-height: 1.1;
}
@media screen and (min-width: 768px) {
  section#award-winning figure.slide-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
section#award-winning figcaption.hover-description {
  padding: 0.5rem 0;
  place-content: center;
  text-align: center;
  transition: opacity 0.3s ease;
  cursor: pointer;
  color: #002d73;
}
@media screen and (min-width: 768px) {
  section#award-winning figcaption.hover-description {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    height: calc(100% - 2rem);
    opacity: 0;
    font-size: 1.1rem;
    box-sizing: border-box;
  }
}
section#award-winning .award-swiper-button-prev,
section#award-winning .award-swiper-button-next {
  display: none;
  width: 2.2rem;
  margin: 0;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
section#award-winning .award-swiper-button-prev:hover,
section#award-winning .award-swiper-button-next:hover {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  section#award-winning .award-swiper-button-prev,
  section#award-winning .award-swiper-button-next {
    display: flex;
  }
}
section#award-winning .award-swiper-pagination {
  margin-top: 2rem;
}
@media screen and (min-width: 768px) {
  section#award-winning h5 {
    margin: 0 auto 1rem auto;
    font-size: 1.1rem;
    line-height: 1.4;
  }
  section#award-winning .award-swiper .swiper-controls {
    display: block;
  }
  section#award-winning .award-swiper .award-swiper-pagination {
    display: none;
  }
}

.rainbow-line {
  background-color: #0080c6;
  background-image: url("img/rainbow_line.svg");
  background-position: center top;
  background-repeat: repeat-x;
  height: 1.2rem;
}

.rainbow-line-head {
  background-color: #0080c6;
  background-image: url("img/rainbow_line.svg");
  background-position: center top;
  background-repeat: repeat-x;
  height: 1.2rem;
}

.page-hero-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #002d73;
  min-height: 180px;
  align-content: center;
  height: 40vh;
  max-height: 400px;
  margin: 0;
}
.page-hero-bg .page-title {
  margin: 0;
}
.page-hero-bg::after {
  content: "";
  display: block;
  background-color: #002d73;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 0;
  opacity: 0.4;
}

section#quote-slider {
  padding-bottom: 0;
}
section#quote-slider h1.section-title span {
  font-weight: 400;
  text-transform: uppercase;
  display: block;
  font-size: clamp(1.3rem, 1.1058rem + 0.8285vw, 2.1rem);
  letter-spacing: 0.02rem;
}
section#quote-slider .quote-box {
  padding: 2.2rem 2rem;
  max-width: 550px;
  margin: 0 auto;
  position: relative;
  border-radius: var(--border-radius-blue);
}
@media screen and (min-width: 768px) {
  section#quote-slider .quote-box .swiper-button-custom-next {
    right: -1.6rem;
  }
  section#quote-slider .quote-box .swiper-button-custom-prev {
    left: -1.6rem;
  }
}
section#quote-slider .quote-box .quote-name {
  font-size: clamp(1.2rem, 1.0058rem + 0.8285vw, 2rem);
  margin: 1rem 0;
}
@media screen and (min-width: 768px) {
  section#quote-slider .quote-box .quote-name {
    margin: 0 0 1em 0;
  }
}
section#quote-slider .quote-box .social-grid {
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
section#quote-slider .quote-box .social-grid .social-container {
  grid-template-columns: 1rem auto;
  gap: 0.5rem;
}
section#quote-slider .quote-box .social-grid .social-container a {
  color: #002d73;
  font-weight: 700;
  transition: color 0.3s ease;
  font-size: 1.2rem;
}
section#quote-slider .quote-box .social-grid .social-container a:hover {
  color: #ff901d;
}
section#quote-slider .quote-box .social-grid .social-icon {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
section#quote-slider .quote-box .social-grid .instagram-icon {
  background-image: url("./img/instagram_icon_blue.svg");
}
section#quote-slider .quote-box .social-grid .tiktok-icon {
  background-image: url("./img/social_tiktok_blue.svg");
}
@media screen and (min-width: 768px) {
  section#quote-slider .quote-box .social-grid {
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 1024px) {
  section#quote-slider .quote-box .social-grid {
    gap: 1.5rem;
  }
}
section#quote-slider .quote-box blockquote {
  margin: 0;
  padding: 0;
  position: relative;
}
@media screen and (min-width: 768px) {
  section#quote-slider .quote-box blockquote {
    font-size: 1.1rem;
  }
}
@media screen and (min-width: 1024px) {
  section#quote-slider .quote-box blockquote {
    font-size: 1.2rem;
  }
}
section#quote-slider .quote-box .quote-img {
  position: relative;
}
section#quote-slider .quote-box .quote-img img {
  border-radius: 50%;
  aspect-ratio: 1/1;
  margin: 2rem auto 3rem auto;
  width: 75%;
}
@media screen and (min-width: 768px) {
  section#quote-slider .quote-box .quote-img img {
    margin-top: 0;
  }
}
section#quote-slider .quote-box .quote-img::before {
  content: url("./img/quotes.svg");
  position: absolute;
  width: 16%;
  top: 10%;
  left: 7%;
}
@media screen and (min-width: 768px) {
  section#quote-slider .quote-box {
    max-width: 100%;
    padding: clamp(2.2rem, 1rem + 2.5vw, 4rem) clamp(2.2rem, 0rem + 4.5833vw, 5.5rem);
  }
}

section#quick-social #social-links {
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto 3rem auto;
  width: 65%;
  max-width: 300px;
  gap: clamp(1rem, 0.7664rem + 0.9969vw, 2rem);
}
section#quick-social #social-links li:last-of-type {
  border-right: none;
}
section#quick-social #social-links li a {
  display: grid;
  place-content: center;
}
section#quick-social #social-links li a img {
  transition: transform 0.3s ease;
}
section#quick-social #social-links li a:hover img {
  transform: rotate(15deg) scale(1.2);
}
section#quick-social #instagram-feed {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  section#quick-social #instagram-feed .conditional-container {
    position: relative;
  }
  section#quick-social #instagram-feed .conditional-container::before, section#quick-social #instagram-feed .conditional-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 3rem;
    height: 100%;
    z-index: 2;
  }
  section#quick-social #instagram-feed .conditional-container::before {
    left: 0;
    background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
  }
  section#quick-social #instagram-feed .conditional-container::after {
    right: 0;
    background: linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0));
  }
}
section#quick-social #instagram-feed #sb_instagram {
  margin-right: 10px;
}
section#quick-social #instagram-feed #sb_instagram a.sbi_photo {
  aspect-ratio: 3/4;
}
section#quick-social #instagram-feed #sb_instagram a.sbi_photo img {
  height: auto;
  width: auto;
}
@keyframes home_logo_scroll {
  0% {
    transform: translateX(0);
  }
  /* Below slide width x amount of slides */
  100% {
    transform: translateX(-1100px);
  }
}
@keyframes instagram_feed_carousel {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1290vw);
  }
}
section#quick-social #instagram-feed .instagram-feed-container {
  display: flex;
  flex-direction: row;
  width: 1720vw;
  animation: instagram_feed_carousel 120s linear infinite;
}

section#ddrops-difference figure .our-story-tiles img {
  cursor: auto;
}
@media screen and (min-width: 768px) {
  section#ddrops-difference figure {
    padding: 1.5rem 2rem;
  }
}
section#ddrops-difference figure .icon {
  margin: 1.5rem auto 1.5rem auto;
  width: 60%;
  max-width: 240px;
}
section#ddrops-difference figure .label {
  color: #002d73;
  text-align: center;
  font-size: clamp(1.4rem, 1.2544rem + 0.6214vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}
section#ddrops-difference figure span.our-story-slider-text-sm {
  padding: 1rem 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 500;
  color: #002d73;
}
section#ddrops-difference figure p {
  color: #002d73;
  font-size: clamp(1rem, 0.9272rem + 0.3107vw, 1.3rem);
  text-align: center;
  padding: 1.5rem 0 0 0;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  section#ddrops-difference figure p {
    max-width: 300px;
    margin: 0 auto;
  }
}

.diff-swiper-pagination {
  position: relative;
  text-align: center;
  margin: 1rem auto 0 auto;
}

section#award-winning figure {
  padding: 2.2rem 2rem;
  position: relative;
}

section#product-benefits ul.benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 80%;
  margin: 0 auto;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  section#product-benefits ul.benefits {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }
}
@media screen and (min-width: 1024px) {
  section#product-benefits ul.benefits {
    grid-template-columns: repeat(6, 1fr);
  }
}
section#product-benefits ul.benefits li .benefit-icon {
  width: 60%;
  margin: 1rem auto;
}
section#product-benefits ul.benefits li .benefit-label {
  color: #002d73;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  text-wrap: balance;
  line-height: 1.1;
  text-transform: uppercase;
}

#icon-boxes ul {
  width: 100%;
  margin: 0 auto;
  grid-template-rows: repeat(2, 1fr);
  gap: 2rem;
  border-radius: 30px;
}
@media screen and (min-width: 768px) {
  #icon-boxes ul {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    background-color: #d3efff;
    padding: clamp(2rem, 0.6667rem + 2.7778vw, 4rem);
  }
}
#icon-boxes ul li {
  position: relative;
}
@media screen and (min-width: 768px) {
  #icon-boxes ul li {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}
#icon-boxes ul li .content-box {
  background-color: #d3efff;
  border-radius: 35px;
  margin-top: -2rem;
  padding: 2.8rem 1.5rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  #icon-boxes ul li .content-box {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    place-content: center;
  }
}
#icon-boxes ul li .content-box h3 {
  color: #0080c6;
  text-align: center;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
  font-size: clamp(1.6rem, 1.5515rem + 0.2071vw, 1.8rem);
  letter-spacing: -0.02rem;
}
#icon-boxes ul li .content-box p {
  color: #002d73;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #icon-boxes ul li .content-box p {
    text-align: left;
  }
}
@media screen and (min-width: 768px) {
  #icon-boxes ul li .content-box h3,
  #icon-boxes ul li .content-box p {
    text-align: left;
  }
}
#icon-boxes ul li .icon {
  position: relative;
  width: 25%;
  max-width: 115px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 1rem;
  top: 0;
  z-index: 1;
  display: block;
  place-content: center;
}
@media screen and (min-width: 768px) {
  #icon-boxes ul li .icon {
    width: 100%;
    align-self: center;
    max-width: 200px;
    padding: clamp(1rem, 0.3333rem + 1.3889vw, 2rem);
  }
}
#icon-boxes ul li .icon::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #0080c6;
  border-radius: 50%;
  aspect-ratio: 1/1;
  position: absolute;
  left: 0;
  top: 0;
}
#icon-boxes ul li .icon img {
  z-index: 9;
  position: relative;
}
@media screen and (min-width: 768px) {
  #icon-boxes ul li .icon img {
    min-width: 2rem;
  }
}
#icon-boxes ul li:last-of-type {
  margin-bottom: 0;
}

.product-list-grid {
  overflow: auto;
}
.product-list-grid .grid-item {
  margin-bottom: clamp(1rem, -0.2673rem + 2.6403vw, 3rem);
}
.product-list-grid .product-list-container .glsr {
  transform: scale(0.8);
}
.product-list-grid .product-list-container .glsr .glsr-summary {
  justify-content: center;
  flex-wrap: nowrap;
}
.product-list-grid .product-list-container span {
  color: #002d73;
  display: block;
  font-weight: 700;
  text-align: center;
  margin: 0.5rem auto 0 auto;
  line-height: 1.2;
  text-wrap-style: balance;
  max-width: 12rem;
  font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
}

.product-new {
  position: relative;
}
.product-new::before {
  content: "";
  background-image: url("./img/new_icon_v3.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 1;
  z-index: 2;
  width: 22.5%;
  z-index: 1;
}

.grid-item {
  float: left;
  width: 50%;
  min-height: 17rem;
}
@media screen and (min-width: 768px) {
  .grid-item {
    width: 32.33%;
  }
}
@media screen and (min-width: 1024px) {
  .grid-item {
    width: 24%;
  }
}
.grid-item::after {
  content: "";
  display: block;
  clear: both;
}

#break-image {
  padding: 0;
}
#break-image .container-xxl {
  padding: 0;
  margin: 0 auto;
  width: 90%;
  max-width: 100vw;
}
#break-image .container-xxl .img-container {
  position: relative;
}
#break-image .container-xxl .img-container .stars01 {
  position: absolute;
  width: 12%;
  top: 3%;
  right: 3%;
  rotate: 344deg;
}
#break-image .container-xxl .img-container .stars02 {
  position: absolute;
  bottom: -12%;
  left: 0;
  width: 35%;
  scale: 1;
}
#break-image .container-xxl .img-container .img-main {
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: 85% center;
  margin: 2% auto 18% auto;
  width: 90%;
}

section#products .product-circle-back {
  display: block;
  width: 70%;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: rgba(211, 239, 255, 0.7137254902);
  position: absolute;
  z-index: 0;
  top: 0.8rem;
  left: 0;
}
section#products .img-place {
  position: relative;
}
section#products img.product {
  position: relative;
  z-index: 1;
  transition: transform 0.35s ease;
}

.scroll-pad {
  scroll-margin-top: calc(var(--header-height) / 3 - 1rem);
  padding-bottom: 0;
}

.reveal {
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease, opacity 0.3s ease;
}
.reveal span {
  display: block;
  margin-top: 1rem;
}
@media screen and (min-width: 1024px) {
  .reveal span {
    font-size: 1.3rem;
  }
}
.reveal span ul {
  list-style-type: disc;
  padding-left: 1.2rem;
  margin-top: 0.5rem;
}
.reveal span ol {
  list-style-type: decimal;
  padding-left: 1.1rem;
}
.reveal span ol li {
  margin-bottom: 0.5rem;
}

#bg-fade {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.white-backing {
  background-color: white;
  width: 100vw;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 991;
}
.white-backing .close-align {
  text-align: right;
}
.white-backing .close-align button {
  cursor: pointer;
}
.white-backing .close-align button svg path {
  transition: fill 0.3s ease;
}
.white-backing .close-align button:hover svg path {
  fill: #ff901d;
}

body.bg-blur #bg-fade {
  visibility: visible;
  opacity: 1;
}

.select-chev {
  position: relative;
  margin-bottom: clamp(1.5rem, 0.0687rem + 6.1069vw, 3rem);
}
.select-chev::after {
  content: "";
  background-image: url("./img/white_chev_down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 1rem;
  aspect-ratio: 1;
  pointer-events: none;
}

select.custom {
  width: 100%;
  font-size: 1rem;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border-radius: 8px;
  background-color: #0080c6;
  color: white;
  cursor: pointer;
  border: none;
  outline: none;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

@media screen and (min-width: 768px) {
  section#award-winning figcaption {
    display: block;
  }
  section#quality ul.quality-list {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    gap: 0 0.5rem;
  }
  section#quality ul.quality-list li {
    grid-template-columns: 75px auto;
    grid-template-rows: none;
    gap: 0.4rem;
  }
  section#quality ul.quality-list li .quality-text {
    text-align: left;
    place-content: baseline;
    align-content: center;
  }
  .home-quote-swiper ul li {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: flex-start;
  }
}
@media screen and (min-width: 768px) and (min-width: 1024px) {
  .home-quote-swiper ul li {
    grid-template-columns: 2fr 1fr;
  }
}
@media screen and (min-width: 1024px) {
  section#quality .quality-bottle-drop {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: none;
  }
  section#quality .content-side .section-title,
  section#quality .content-side p,
  section#quality .content-side h2 {
    text-align: left;
  }
  section#quality .content-side .quality-content-text {
    line-height: 1.5;
  }
}
section#award-winning .section-title {
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  section#award-winning .award-swiper {
    padding: 0 2rem;
  }
  section#award-winning .award-swiper .swiper-controls {
    display: flex;
  }
}
section#award-winning figure .award-swiper-button-prev,
section#award-winning figure .award-swiper-button-next {
  display: none;
  width: 3rem;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
  section#award-winning figure .award-swiper-button-prev,
  section#award-winning figure .award-swiper-button-next {
    display: flex;
  }
}
section#award-winning figure .award-swiper-button-next {
  transform: translateY(-50%) rotate(180deg);
}

section#quote-slider .press-swiper-button-prev,
section#quote-slider .press-swiper-button-next {
  display: none;
  width: 2.5rem;
  margin: 0;
  transition: opacity 0.3s ease;
  opacity: 0.8;
}
section#quote-slider .press-swiper-button-prev:hover,
section#quote-slider .press-swiper-button-next:hover {
  opacity: 1;
}
section#quote-slider .swiper-button-custom-next.swiper-button-disabled,
section#quote-slider .swiper-button-custom-prev.swiper-button-disabled {
  opacity: 0.35;
}
@media screen and (min-width: 768px) {
  section#quote-slider .press-swiper-button-prev,
  section#quote-slider .press-swiper-button-next {
    display: flex;
  }
  section#quote-slider .home-quote-swiper-pagination {
    display: none;
  }
  section#quote-slider .round-box-blue .quote-img::before {
    content: "";
  }
}

#blue-boxes .round-box {
  padding: 1.5rem 2rem;
  margin-bottom: 2.2rem;
}
#blue-boxes .round-box .blue-top {
  position: relative;
}
#blue-boxes .round-box .blue-top::after {
  content: url("./img/plus_symbol_white.svg");
  width: 0.8rem;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: transform 0.4s ease-out;
}
@media screen and (min-width: 1024px) {
  #blue-boxes .round-box .blue-top::after {
    content: "";
  }
}
#blue-boxes .round-box .blue-top label {
  grid-template-columns: 17% auto 1rem;
  gap: clamp(1.2rem, -0.9947rem + 9.3639vw, 3.5rem);
  color: white;
  align-items: center;
  font-size: clamp(1.1rem, 0.8689rem + 0.9861vw, 1.5rem);
}
@media screen and (min-width: 1024px) {
  #blue-boxes .round-box .blue-top label {
    font-size: clamp(1.1rem, 0.84rem + 0.5417vw, 1.49rem);
  }
}
@media screen and (min-width: 1024px) {
  #blue-boxes li:nth-child(3) .round-box .blue-top label img {
    width: 70%;
  }
  #blue-boxes .roll-hit:hover .round-box {
    transform: rotateY(180deg);
  }
  #blue-boxes .round-box {
    aspect-ratio: 1;
    place-content: center;
    transition: transform 0.8s;
    box-shadow: none;
    margin: 0;
  }
  #blue-boxes .round-box .reveal,
  #blue-boxes .round-box .blue-top {
    max-height: 100vh;
    position: absolute;
    backface-visibility: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    place-content: center;
  }
  #blue-boxes .round-box .reveal span,
  #blue-boxes .round-box .blue-top span {
    margin: auto;
    width: 85%;
    opacity: 1;
    font-size: 1rem;
  }
  #blue-boxes .round-box .reveal {
    transform: rotateY(180deg);
  }
  #blue-boxes .round-box label {
    display: block;
    width: 80%;
    margin: auto;
    text-align: center;
    font-size: 1.5rem;
  }
  #blue-boxes .round-box label img {
    width: 60%;
    margin: 0 auto 0.5em;
  }
}

@media screen and (min-width: 1024px) {
  .roll-in li {
    background-color: #0080c6;
    border-radius: 15px;
    overflow: hidden;
  }
  .roll-in li .round-box {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 3rem;
  }
  .roll-in li .round-box .blue-top,
  .roll-in li .round-box .reveal {
    position: relative;
    transform: none;
  }
  .roll-in .blue-product-swiper-button-prev,
  .roll-in .blue-product-swiper-button-next,
  .roll-in .swiper-button-custom-next.swiper-button-disabled,
  .roll-in .swiper-button-custom-prev.swiper-button-disabled {
    width: 1.3vw;
    max-width: 45px;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .roll-in:hover .blue-product-swiper-button-prev,
  .roll-in:hover .blue-product-swiper-button-next,
  .roll-in:hover .swiper-button-custom-next.swiper-button-disabled,
  .roll-in:hover .swiper-button-custom-prev.swiper-button-disabled {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .product-list-container a img {
    transition: transform 0.3s ease;
  }
  .product-list-container a:hover img {
    transform: scale(1.2);
  }
}
body.page-home section#award-winning {
  margin-top: clamp(4rem, 3.1713rem + 3.5359vw, 6rem);
}

/* Cookie Banner
--------------------------------------------- */
body.us-en .cky-notice .cky-title,
body.us-en .cky-preference-header .cky-preference-title {
  font-size: 1.4rem;
}
body.us-en .cky-notice-des *,
body.us-en .cky-preference-content-wrapper *,
body.us-en .cky-accordion-header-des *,
body.us-en .cky-gpc-wrapper .cky-gpc-desc * {
  font-size: 1.1rem;
  font-weight: 300;
}
body.us-en button.cky-show-desc-btn:not(:hover):not(:active) {
  color: white;
}
body.us-en .cky-accordion-header .cky-always-active {
  color: white;
}
body.us-en .cky-notice-des a.cky-policy,
body.us-en .cky-notice-des button.cky-policy {
  font-size: 1.1rem;
}
body.us-en .cky-consent-container .cky-consent-bar {
  box-shadow: 0 -1px 10px 0 rgba(0, 0, 0, 0.3019607843);
}
body.us-en .cky-btn {
  border-radius: 25px;
}

/* UL Drop Menus
--------------------------------------------- */
@media screen and (min-width: 768px) {
  body.page-products-all .select-container {
    display: none;
  }
}

.select-container {
  position: relative;
  z-index: 2;
  margin-bottom: 1.5rem;
  text-align: center;
}
.select-container button {
  background-color: #0080c6;
  border-radius: 50px;
  padding: clamp(0.5rem, 0.3239rem + 0.7512vw, 1rem) clamp(2rem, 1.2958rem + 3.0047vw, 4rem);
  text-align: center;
  color: white;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  font-size: clamp(1rem, 0.9272rem + 0.3107vw, 1.3rem);
}
.select-container button i {
  font-size: 0.7rem;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
.select-container button.active i {
  transform: translateY(-50%) rotate(180deg);
}

body.page-products-all .select-container button {
  max-width: 250px;
}

ul#sort-menu {
  margin: 0 auto;
  padding: 0.5rem 0;
  background-color: #d3efff;
  font-size: clamp(1rem, 0.9272rem + 0.3107vw, 1.3rem);
  text-align: center;
  color: black;
  border-radius: 25px;
  width: 100%;
  max-width: 400px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 9999;
  transition: height 0.3s ease, opacity 0.3s ease;
}
ul#sort-menu li {
  padding: 0.5rem 0;
  color: #002d73;
  padding-left: 1.5rem;
  text-align: left;
}
ul#sort-menu li:hover {
  background-color: #0080c6;
  color: white;
}
ul#sort-menu li:hover a {
  color: white;
}
ul#sort-menu li a {
  color: #002d73;
}

body.page-products-all ul#sort-menu {
  max-width: 250px;
}

/* Instagram Carousel
--------------------------------------------- */
section#instagram-carousel {
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
}
section#instagram-carousel .instagram-carousel-glide {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
@keyframes home_instagram_scroll {
  0% {
    transform: translateX(0);
  }
  /* Below slide width x amount of slides */
  100% {
    transform: translateX(-2200px);
  }
}
section#instagram-carousel ul {
  display: flex;
  flex-direction: row;
  /* Below slide width x amount of slides doubled */
  width: 8800px;
  animation: home_instagram_scroll 80s linear infinite;
}
section#instagram-carousel ul:hover {
  animation-play-state: paused;
}
section#instagram-carousel ul li {
  width: 2200px;
  display: flex;
  padding-right: 10px;
}
section#instagram-carousel ul li img {
  align-self: center;
  width: 100%;
}
section#instagram-carousel #sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play, section#instagram-carousel #sb_instagram.sbi_medium .sbi_playbtn {
  font-size: 35px;
}
section#instagram-carousel #sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone {
  font-size: 25px;
}

/* Global Elements - Blue Boxes
--------------------------------------------- */
section#section-contact-tiles .contact-swiper {
  background-color: #0080c6;
  border-radius: var(--border-radius-faq);
  padding: 1.5rem 2rem;
  width: 75%;
  max-width: 450px;
  aspect-ratio: 1;
}
@media screen and (min-width: 1024px) {
  section#section-contact-tiles .contact-swiper {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    max-width: 100vw;
    aspect-ratio: auto;
    width: 100%;
  }
}
section#section-contact-tiles .contact-swiper-pagination {
  margin-top: 1rem;
}
@media screen and (min-width: 630px) {
  section#section-contact-tiles #contact-boxes {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
}
section#section-contact-tiles #contact-boxes li {
  position: relative;
  place-content: center;
  flex-shrink: 0;
}
@media screen and (min-width: 1024px) {
  section#section-contact-tiles #contact-boxes li {
    flex-shrink: 1;
    aspect-ratio: 1;
    padding: 1.5rem 2rem;
    background-color: #0080c6;
    perspective: 10000px;
    border-radius: var(--border-radius-faq);
  }
}
section#section-contact-tiles #contact-boxes li img {
  object-fit: contain;
}
@media screen and (min-width: 1024px) {
  section#section-contact-tiles #contact-boxes li {
    cursor: pointer;
  }
  section#section-contact-tiles #contact-boxes li:hover .content-container {
    transform: rotateY(0deg);
  }
}
section#section-contact-tiles #contact-boxes li .content-container {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  place-content: center;
}
section#section-contact-tiles #contact-boxes li .content-container a {
  display: block;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
@media screen and (min-width: 1024px) {
  section#section-contact-tiles #contact-boxes li .content-container {
    transform: rotateY(180deg);
  }
}
section#section-contact-tiles #contact-boxes li .blue-front,
section#section-contact-tiles #contact-boxes li .blue-back {
  place-content: center;
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: grid;
}
section#section-contact-tiles #contact-boxes li .blue-front a,
section#section-contact-tiles #contact-boxes li .blue-back a {
  color: white;
}
section#section-contact-tiles #contact-boxes li .blue-front {
  transform: rotateY(0deg);
  z-index: 2;
  position: relative;
  display: block;
}
@media screen and (min-width: 1024px) {
  section#section-contact-tiles #contact-boxes li .blue-front {
    position: absolute;
    display: grid;
  }
}
section#section-contact-tiles #contact-boxes li .blue-front .blue-labels {
  color: white;
  text-align: center;
  font-size: clamp(1rem, 0.4222rem + 2.4653vw, 2rem);
}
@media screen and (min-width: 1024px) {
  section#section-contact-tiles #contact-boxes li .blue-front .blue-labels {
    font-size: 1.2rem;
  }
}
section#section-contact-tiles #contact-boxes li .blue-front img {
  width: 30%;
  max-width: 200px;
  height: auto;
  margin: clamp(1.2rem, 1.0058rem + 0.8285vw, 2rem) auto;
}
section#section-contact-tiles #contact-boxes li .blue-back {
  transform: rotateY(180deg);
  color: white;
  text-align: center;
  place-content: center;
  font-size: 1.3rem;
  grid-template-rows: 1fr 3fr;
  gap: 0.5rem;
  display: none;
}
@media screen and (min-width: 1024px) {
  section#section-contact-tiles #contact-boxes li .blue-back {
    display: grid;
  }
}
section#section-contact-tiles #contact-boxes li .blue-back img {
  width: 50%;
  margin: auto;
  height: auto;
}
section#section-contact-tiles #contact-boxes li:nth-child(4) .blue-backing .blue-front img {
  width: 40%;
}
section#section-contact-tiles #contact-boxes li:nth-child(4) .blue-back img {
  width: 65%;
  margin-top: -0.1rem;
}
section#section-contact-tiles #contact-boxes li:nth-child(4) .blue-front img {
  width: 45%;
}

section#key-ingredients {
  margin-top: clamp(4rem, 3.1713rem + 3.5359vw, 6rem);
}
section#key-ingredients .section-title {
  padding-bottom: 0;
  padding-top: 0;
  margin-bottom: 2rem;
}
section#key-ingredients ul#blue-boxes {
  grid-auto-rows: auto;
  gap: 1.1rem;
}
@media screen and (min-width: 1024px) {
  section#key-ingredients ul#blue-boxes {
    gap: 0;
  }
}
section#key-ingredients ul#blue-boxes li {
  padding: clamp(1rem, 0.8832rem + 0.4984vw, 1.5rem);
  margin: 0;
  cursor: pointer;
  background-color: #0080c6;
}
@media screen and (min-width: 1024px) {
  section#key-ingredients ul#blue-boxes li {
    flex-shrink: 0;
    box-sizing: border-box;
    aspect-ratio: 1;
    overflow: hidden;
  }
  section#key-ingredients ul#blue-boxes li .content-container {
    width: 100%;
    height: 100%;
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
    transition: transform 0.3s ease;
  }
}
section#key-ingredients ul#blue-boxes li .label-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
}
@media screen and (min-width: 1024px) {
  section#key-ingredients ul#blue-boxes li .label-container {
    display: grid;
    grid-template-rows: 3fr auto;
    grid-template-columns: 1fr;
    gap: 1rem;
    position: relative;
    aspect-ratio: 1;
  }
}
section#key-ingredients ul#blue-boxes li .label-container img {
  width: 15%;
  max-width: 240px;
}
@media screen and (min-width: 1024px) {
  section#key-ingredients ul#blue-boxes li .label-container img {
    width: 65%;
    margin: auto;
    object-fit: contain;
  }
}
section#key-ingredients ul#blue-boxes li .label-container .label {
  color: white;
  width: 100%;
  text-wrap: balance;
  font-size: clamp(1.1rem, 1.0182rem + 0.3489vw, 1.45rem);
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  section#key-ingredients ul#blue-boxes li .label-container .label {
    text-align: center;
  }
}
section#key-ingredients ul#blue-boxes li .label-container .plus {
  position: relative;
  width: 13%;
  max-width: 30px;
  padding: 0.45rem;
  transition: 0.3s ease;
}
@media screen and (min-width: 1024px) {
  section#key-ingredients ul#blue-boxes li .label-container .plus {
    transition: transform 0.3s ease;
    width: 10%;
  }
}
section#key-ingredients ul#blue-boxes li .label-container .plus::after {
  content: "";
  display: block;
  border: 2px solid white;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
@media screen and (min-width: 1024px) {
  section#key-ingredients ul#blue-boxes li .label-container .plus {
    position: absolute;
    top: 0;
    right: 0;
  }
}
section#key-ingredients ul#blue-boxes li .label-container .plus svg {
  fill: white;
}
section#key-ingredients ul#blue-boxes li .content-reveal {
  overflow: hidden;
  opacity: 0;
  height: 0;
  transition: height 0.3s ease, opacity 0.3s ease;
}
@media screen and (min-width: 1024px) {
  section#key-ingredients ul#blue-boxes li .content-reveal {
    opacity: 1;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: visible;
    backface-visibility: visible;
    transform: translateY(0);
    aspect-ratio: 1;
    padding-top: 2rem;
    place-content: center;
  }
  section#key-ingredients ul#blue-boxes li .content-reveal .color-darkblue {
    width: 90%;
    margin: 0 auto;
    font-size: 1rem;
  }
}
section#key-ingredients ul#blue-boxes li .content-reveal span {
  margin-top: 1.5rem;
  color: white;
  text-align: center;
  text-wrap: pretty;
  display: block;
}
@media screen and (min-width: 768px) {
  section#key-ingredients ul#blue-boxes li .content-reveal span {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1024px) {
  section#key-ingredients ul#blue-boxes li .content-reveal span {
    margin: 0;
    width: 100%;
    text-align: center;
    display: block;
  }
}
section#key-ingredients ul#blue-boxes li.active-slide .content-container {
  transform: translateY(calc(-100% - 1.5rem));
}
section#key-ingredients ul#blue-boxes li.active-slide .content-container .plus {
  top: calc(100% + 1.5rem);
  transform: rotate(45deg);
}
section#key-ingredients .blue-product-swiper-controls {
  position: relative;
  height: 3rem;
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  section#key-ingredients .blue-product-swiper-controls {
    display: grid;
  }
}
section#key-ingredients .blue-product-swiper-controls .blue-product-swiper-button-next,
section#key-ingredients .blue-product-swiper-controls .blue-product-swiper-button-prev {
  position: relative;
  top: auto;
  left: auto;
  margin-top: 0;
  width: 2.2rem;
}
section#key-ingredients .blue-product-swiper-controls .blue-product-swiper-button-prev {
  margin: 0 0 0 auto;
}
section#key-ingredients .swiper-nav-hover-container {
  position: relative;
  /* When hovering swiper area */
}

/* Links
--------------------------------------------- */
a.inline-link {
  color: inherit;
  text-decoration: none;
}

a.inline-link {
  line-height: 1.3;
  background: linear-gradient(to right, rgb(0, 128, 198), rgb(0, 128, 198)), linear-gradient(to right, rgb(225, 23, 142) 0%, rgb(255, 144, 29) 100%);
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  display: inline-block;
}

a.light-blue-link {
  color: #0080c6;
}

a.inline-link:hover {
  background-size: 0 2px, 100% 2px;
}

a.text-link {
  color: #0080c6;
  transition: color 0.2s ease;
}
a.text-link:hover {
  color: #ff901d;
}

.external-link::after {
  font-family: "Font Awesome 7 Free";
  content: "\f08e";
  margin-left: 0.3rem;
}

/* Language Modal
--------------------------------------------- */
#language-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100dvh;
  width: 100vw;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  padding: 1rem;
  flex-wrap: wrap;
  place-content: center;
  display: none;
}
#language-modal #lang-modal {
  background-color: white;
  border-radius: 15px;
  padding: clamp(1rem, 0.5229rem + 2.0356vw, 1.5rem);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: block;
  align-self: center;
  max-height: 100%;
}
#language-modal #lang-modal ul {
  max-height: 80vh;
  overflow-y: auto;
}
#language-modal #lang-modal .close-container {
  text-align: right;
  margin-bottom: 1rem;
}
#language-modal #lang-modal .close-container button {
  cursor: pointer;
}
#language-modal #lang-modal li {
  border-bottom: 1px solid lightgrey;
}
#language-modal #lang-modal li a {
  display: grid;
  grid-template-columns: auto 10%;
  padding: 1.2rem;
}
#language-modal #lang-modal li a span {
  color: gray;
  font-size: 1.1rem;
  align-self: center;
}
#language-modal #lang-modal li a.current-lang span, #language-modal #lang-modal li a:hover span {
  color: #ff901d;
}
#language-modal #lang-modal li:last-of-type {
  border-bottom: none;
}

body.lang-select-active #language-modal {
  display: flex;
}

/* Navigation
--------------------------------------------- */
#site-navigation {
  display: none;
}
#site-navigation ul#menu-main-navigation {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
#site-navigation ul#menu-main-navigation li {
  place-content: center;
  position: relative;
}
#site-navigation ul#menu-main-navigation li a {
  color: #0080c6;
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: clamp(1rem, 0.8667rem + 0.2778vw, 1.2rem);
  line-height: normal;
  cursor: pointer;
  transition: color 0.3s ease-out;
}
#site-navigation ul#menu-main-navigation li a:hover {
  color: #ff901d;
}
#site-navigation ul#menu-main-navigation li a:hover::after {
  color: #ff901d;
}
#site-navigation ul#menu-main-navigation li a[aria-current=page] {
  color: #ff901d;
}
#site-navigation ul#menu-main-navigation li a[aria-current=page]::after {
  color: #ff901d;
  margin-right: 0.7rem;
  transform: translateY(-50%) rotate(180deg);
}

nav#mobile-navigation {
  align-content: center;
  display: grid;
}
nav#mobile-navigation button#mobile-navigation {
  width: 1.5rem;
  height: 0.8rem;
  position: relative;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
nav#mobile-navigation button#mobile-navigation span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #0080c6;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
nav#mobile-navigation button#mobile-navigation span:nth-child(1) {
  top: 0;
}
nav#mobile-navigation button#mobile-navigation span:nth-child(2), nav#mobile-navigation button#mobile-navigation span:nth-child(3) {
  top: 50%;
}
nav#mobile-navigation button#mobile-navigation span:nth-child(4) {
  top: 100%;
}
nav#mobile-navigation button#mobile-navigation.open {
  width: 1rem;
}
nav#mobile-navigation button#mobile-navigation.open span:nth-child(1) {
  top: 50%;
  width: 0%;
  left: 50%;
}
nav#mobile-navigation button#mobile-navigation.open span:nth-child(2) {
  transform: rotate(45deg);
}
nav#mobile-navigation button#mobile-navigation.open span:nth-child(3) {
  transform: rotate(-45deg);
}
nav#mobile-navigation button#mobile-navigation.open span:nth-child(4) {
  top: 50%;
  width: 0%;
  left: 50%;
}

@media screen and (min-width: 768px) {
  nav#mobile-navigation {
    display: none;
  }
}
#right-side-options #search-btn-container,
#right-side-options #lang-btn-container {
  text-align: right;
  place-content: center;
  position: relative;
}
#right-side-options #search-btn-container::after {
  content: "";
  height: 40%;
  width: 2px;
  background: #0080c6;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
#right-side-options button {
  padding: 0.4rem;
}
#right-side-options button svg {
  transition: stroke 0.3s ease;
}
#right-side-options button:hover svg {
  stroke: #ff901d;
}

#search-btn-container {
  display: none;
}

@media screen and (min-width: 768px) {
  #search-btn-container {
    display: flex;
    place-content: center;
    text-align: center;
  }
  #search-btn-container button#search-btn {
    padding: 0;
  }
  #lang-btn-container {
    display: flex;
    text-align: center;
    padding-left: 0.5rem;
  }
  #lang-btn-container button#lang-button {
    padding: 0;
    cursor: pointer;
  }
  #lang-btn-container button#lang-button #lang-flag {
    margin: 0;
  }
  #lang-btn-container button#lang-button #lang-flag::after {
    transition: color 0.3s ease;
  }
  #lang-btn-container button#lang-button:hover #lang-flag::after {
    color: #ff901d;
  }
}
#mobile-nav-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(100dvh - (var(--header-height)));
  z-index: 999;
  width: 85vw;
  min-width: 350px;
  padding: 2rem;
  background-color: white;
  transform: translateX(calc(-100vw - 50%));
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
  transition: transform 0.5s ease;
  margin-top: var(--header-height);
}
@media screen and (min-width: 768px) {
  #mobile-nav-container {
    display: none;
  }
}
#mobile-nav-container #mnc-top {
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
#mobile-nav-container #mnc-top img.brand-logo {
  width: 75%;
  max-width: 150px;
  margin: 0 auto;
}
#mobile-nav-container #mnc-top button#close-mobile-navigation {
  width: 2rem;
}

nav#mobile-nav {
  overflow: hidden;
}
nav#mobile-nav ul#menu-mobile-menu {
  position: relative;
  transition: transform 0.4s ease-out;
}
nav#mobile-nav a {
  display: block;
  width: 100%;
  font-weight: 500;
  padding: 1rem;
  letter-spacing: 0.02rem;
  padding-right: clamp(1rem, -8.542rem + 40.7125vw, 11rem);
  padding-left: 1rem;
  padding-left: 0;
  text-align: left;
  color: #0080c6;
  position: relative;
  font-size: clamp(1rem, 0.8944rem + 0.4507vw, 1.3rem);
}
nav#mobile-nav a > [aria-current] {
  font-weight: 900;
}
nav#mobile-nav li {
  border-bottom: 1px solid #0080c6;
}
nav#mobile-nav li:last-of-type {
  border: none;
}
nav#mobile-nav li:nth-last-child(2) {
  border: none;
}
nav#mobile-nav li .sub-menu li {
  border: none;
}
nav#mobile-nav .nav-btn a {
  background-color: #002d73;
  margin: 0.5rem 0 0 0;
  color: white;
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-weight: 900;
  border-radius: 50px;
}
nav#mobile-nav .drop > a::after {
  content: url("./img/nav_drop_arrow.svg");
  position: absolute;
  right: 1rem;
  width: clamp(0.35rem, 0.2069rem + 0.6107vw, 0.5rem);
  transform: rotate(180deg);
  transition: transform 0.4s ease;
}
nav#mobile-nav .drop .sub-menu {
  background-color: white;
  position: absolute;
  top: 0;
  left: -100vw;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translateX(0);
  transition: transform 0.4s ease-out, 0.4s opacity ease-out;
}
nav#mobile-nav .drop .sub-menu li a {
  padding: 0.7rem 1rem;
}
nav#mobile-nav .drop .sub-menu li:first-of-type a {
  background-color: #0080c6;
  color: white;
  position: relative;
  padding-left: 1.9rem;
  border-radius: 10px;
  font-weight: 900;
}
nav#mobile-nav .drop .sub-menu li:first-of-type a::before {
  content: url("./img/back_arrow_white.svg");
  position: absolute;
  width: 0.4rem;
  left: 0.8rem;
}
nav#mobile-nav .mobile-sub-specific-active ul.sub-menu {
  opacity: 1;
  transform: translateX(calc(200vw + 1rem));
}

.mobile-sub-active ul#menu-mobile-menu {
  transform: translateX(calc(-100vw - 1rem));
}

#mobile-nav-close-space {
  display: none;
  visibility: hidden;
  width: 100%;
  height: 100dvh;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition-property: visibility opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}

body.mobile-nav-active #mobile-nav-container {
  transform: translateX(0);
}
body.mobile-nav-active #mobile-nav-close-space {
  display: block;
  visibility: visible;
  opacity: 1;
  z-index: 2;
}

#lang-button #lang-flag {
  margin-top: 0.5rem;
}
#lang-button #lang-flag::after {
  display: block;
  width: 2rem;
}

@media screen and (min-width: 768px) {
  #lang-button #lang-flag::after {
    color: #0080c6;
    width: 100%;
    font-size: clamp(1rem, 0.7rem + 0.625vw, 1.2rem);
  }
}
body.us-en #lang-button #lang-flag::after,
body.us-es #lang-button #lang-flag::after {
  content: url("./img/us_flag.svg");
}

@media screen and (min-width: 768px) {
  body.us-en #lang-button #lang-flag::after {
    content: "US (EN)";
  }
  body.us-es #lang-button #lang-flag::after {
    content: "US (ES)";
  }
}
body.ca-en #lang-button #lang-flag::after,
body.ca-fr #lang-button #lang-flag::after {
  content: url("./img/ca_flag.svg");
}

@media screen and (min-width: 768px) {
  body.ca-en #lang-button #lang-flag::after {
    content: "CA (EN)";
  }
  body.ca-fr #lang-button #lang-flag::after {
    content: "CA (FR)";
  }
}
body.uk-en #lang-button #lang-flag::after {
  content: url("./img/uk_flag.svg");
}

@media screen and (min-width: 768px) {
  body.uk-en #lang-button #lang-flag::after {
    content: "UK (EN)";
  }
}
body.cl-es #lang-button #lang-flag::after {
  content: url("./img/cl_flag.svg");
}

@media screen and (min-width: 768px) {
  body.cl-es #lang-button #lang-flag::after {
    content: "CL (ES)";
  }
}
body.au-en #lang-button #lang-flag::after {
  content: url("./img/au_flag.svg");
}

@media screen and (min-width: 768px) {
  body.au-en #lang-button #lang-flag::after {
    content: "AU (EN)";
  }
}
body.cn-en #lang-button #lang-flag::after,
body.cn-cn #lang-button #lang-flag::after {
  content: url("./img/cn_flag.svg");
}

@media screen and (min-width: 768px) {
  body.cn-en #lang-button #lang-flag::after {
    content: "CN (EN)";
  }
  body.cn-cn #lang-button #lang-flag::after {
    content: "CN (CN)";
  }
}
#footer-navigation nav ul li a {
  color: white;
  font-weight: 400;
  padding: 0.4rem 0;
  display: block;
  font-size: clamp(1rem, 0.9515rem + 0.2071vw, 1.2rem);
  transition: color 0.35s ease-out;
}
#footer-navigation nav ul li a:hover, #footer-navigation nav ul li a[aria-current] {
  color: #ff901d;
}

@media screen and (min-width: 768px) {
  #site-navigation {
    display: block;
    align-self: center;
    width: auto;
    text-align: center;
  }
  #site-navigation .menu-main-navigation-container {
    display: inline-block;
  }
}
/* Header
--------------------------------------------- */
/* Mobile Error */
#scroll-to-top {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 999;
  width: 4rem;
  transform: translateY(1rem);
  opacity: 0;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
#scroll-to-top #back-top {
  font-size: 0.7rem;
  color: #0080c6;
  font-weight: 700;
  text-align: center;
}
#scroll-to-top #scroll-arrow {
  position: relative;
  width: 100%;
}
#scroll-to-top #scroll-arrow img {
  width: 50%;
  margin: 0 auto;
  padding: 0.2rem;
}

body.scroll-top #scroll-to-top {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

#header-contains {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  z-index: 999;
}
@media screen and (min-width: 768px) {
  header .header-container {
    max-width: 100%;
  }
}
header #top-blue-banner {
  padding: clamp(0.5rem, 0.4515rem + 0.2071vw, 0.7rem);
  line-height: 1;
  font-weight: 400;
  font-size: clamp(1rem, 0.9272rem + 0.3107vw, 1.3rem);
}
header #header-bar {
  grid-template-columns: 100px auto 100px;
}
header #brand-logo {
  width: 40%;
  min-width: 80px;
  max-width: 100px;
  margin: 0 auto;
  display: block;
  align-self: center;
  margin: 0.5rem auto;
}

#mobile-search {
  margin-bottom: 0.5rem;
}

#mobile-social {
  margin-top: 1.5rem;
}
#mobile-social ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0rem, -1.9084rem + 8.1425vw, 2rem);
  width: 70%;
  margin: 0 auto;
  align-items: center;
}
#mobile-social ul li a {
  display: block;
  margin: 0 auto;
  padding: clamp(0.5rem, -0.0282rem + 2.2535vw, 2rem);
}

@media screen and (min-width: 768px) {
  nav#mobile-navigation,
  #mobile-nav-container,
  #scroll-to-top {
    display: none;
  }
  header #header-bar {
    grid-template-columns: 100px auto 120px;
    gap: clamp(1rem, 0.2718rem + 3.1068vw, 4rem);
    padding: 0.75rem 0;
  }
  header #header-bar #right-side-options {
    grid-template-columns: 1fr 2fr;
  }
  header #header-bar #brand-logo {
    width: 100%;
    max-width: 110px;
    margin: 0;
  }
}
/* Mega Menu
--------------------------------------------- */
nav#site-navigation ul li a {
  padding: 1rem;
}
nav#site-navigation ul li.mega-menu-nav a {
  padding-right: 1.5rem;
}
nav#site-navigation ul li.mega-menu-nav a::after {
  content: "\f078";
  font-family: "Font Awesome 7 Free";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.4s ease, margin 0.4s ease;
  color: #0080c6;
  font-size: 0.8rem;
  margin-left: 0.7rem;
}
nav#site-navigation ul li.mega-menu-nav a[aria-current=page]::after {
  transform: translateY(-50%) rotate(0);
}

#products-mega-menu {
  transform: translateY(calc(-1 * var(--product-mm-height)));
}
#products-mega-menu .d-flex {
  gap: 2rem;
  flex-direction: row;
  align-items: center;
}
#products-mega-menu .d-flex .content {
  width: 40%;
  text-align: left;
}
#products-mega-menu .d-flex .d-grid {
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.3333rem + 1.3889vw, 2rem);
}
#products-mega-menu .d-flex .d-grid img {
  border-radius: 50%;
}
#products-mega-menu .d-flex .d-grid span.label {
  color: #0080c6;
  display: block;
  text-align: center;
  margin-top: 0.5em;
}
#products-mega-menu .container a {
  display: block;
  transition: transform 0.3s ease;
}
#products-mega-menu .container a span {
  transition: color 0.3s ease;
}
#products-mega-menu .container:hover a {
  transform: scale(1.1);
}
#products-mega-menu .container:hover a span {
  color: #ff901d;
}

body.mm-products-active #products-mega-menu {
  width: 100%;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s;
}

#about-mega-menu {
  transform: translateY(calc(-1 * var(--about-mm-height)));
  padding: 2rem 0;
}
#about-mega-menu .d-flex {
  gap: 2rem;
  flex-direction: row;
  align-items: center;
}
#about-mega-menu .d-flex .content {
  width: 40%;
  text-align: left;
}
#about-mega-menu .d-flex .d-grid {
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 0.3333rem + 1.3889vw, 2rem);
  place-items: center;
}
#about-mega-menu .d-flex .d-grid img {
  border-radius: 50%;
  width: 17vw;
  max-width: 350px;
}
#about-mega-menu #menu-main-about-menu li a {
  color: #0080c6;
  font-size: 2rem;
  text-align: left;
  padding: 0.2rem;
  display: block;
  transition: color 0.3s ease;
}
#about-mega-menu #menu-main-about-menu li a:hover {
  color: #ff901d;
}
#about-mega-menu #menu-main-about-menu li:hover::after {
  content: "";
  color: #ff901d;
}

body.mm-about-active #about-mega-menu {
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s;
}

.mega-menu-style {
  padding: 2rem 0;
  top: var(--header-height);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.mega-menu-style .container-xl {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.mega-menu-style .d-flex {
  gap: 2rem;
  flex-direction: row;
  align-items: center;
}
.mega-menu-style .d-flex .content {
  width: 40%;
  text-align: left;
}
.mega-menu-style .d-flex img {
  border-radius: 50%;
}
.mega-menu-style h2.section-title {
  margin-bottom: 0;
  padding: 0;
}
.mega-menu-style p {
  color: #0080c6;
  font-size: 1.1rem;
  width: 90%;
  margin-bottom: 2rem;
  line-height: 1.5;
}
.mega-menu-style .container a {
  display: block;
  transition: transform 0.3s ease;
}
.mega-menu-style .container a span {
  transition: color 0.3s ease;
}

#about-mega-menu .content p {
  margin-top: 0.5rem;
}

/* Swiper Styling
--------------------------------------------- */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.swiper-button-custom-next,
.swiper-button-custom-prev {
  aspect-ratio: 1/1;
  height: auto !important;
  position: absolute;
  z-index: 10;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.swiper-button-custom-next::after,
.swiper-button-custom-prev::after {
  display: none;
}

.swiper-button-custom-prev,
.swiper-button-custom-next {
  width: 2rem;
  top: 50%;
}
.swiper-button-custom-prev::after,
.swiper-button-custom-next::after {
  content: "";
  background-color: #002D73;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
}
.swiper-button-custom-prev img,
.swiper-button-custom-next img {
  padding: 0.4rem;
  z-index: 2;
}

.swiper-button-custom-next {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
  transform: translateY(-50%) rotate(180deg);
}

.swiper-button-custom-prev {
  transform: translateY(-50%);
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}

.swiper-pagination-bullets {
  text-align: center;
}

.swiper-button-custom-next.product-thumb-button-next.swiper-button-disabled,
.swiper-button-custom-prev.product-thumb-button-prev.swiper-button-disabled {
  pointer-events: auto; /* keep clickable */
  opacity: 1; /* remove dimmed look */
  cursor: pointer;
}

.swiper.product-thumbs01,
.swiper.product-thumbs02 {
  padding-right: 3px;
}

/* Home Hero Button Placement
--------------------------------------------- */
.page-home section#hero .swiper-slide .btn-container {
  position: absolute;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  .page-home section#hero .swiper-slide .btn-container .btn {
    min-width: 100px;
  }
}
.page-home section#hero .swiper-slide .btn-container .btn span {
  font-size: clamp(1.1rem, 0.7183rem + 1.6285vw, 1.5rem);
}

/* Page Home
--------------------------------------------- */
.page-home section#hero {
  padding: 0;
  width: 100%;
}
.page-home section#hero .swiper-slide {
  position: relative;
}
.page-home section#hero .swiper-slide .btn-container {
  padding: 0;
  top: 0;
  left: 0;
  display: inline-block;
  width: auto;
  transform-origin: center center;
}
.page-home section#hero .swiper-slide .btn-container a {
  border-radius: 50px;
}
.page-home section#hero .home-hero-swiper-pagination {
  position: relative;
  margin-top: 2rem;
}
.page-home section#sub-hero {
  padding: clamp(1.5rem, 0.9718rem + 2.2535vw, 3rem) 0;
}
.page-home section#products .product-list-grid {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: none;
  gap: 2rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .page-home section#products .product-list-grid {
    row-gap: 2rem;
    column-gap: 0;
  }
}
.page-home section#logo-ticker {
  overflow: hidden;
  position: relative;
  padding-top: 0;
}
.page-home section#logo-ticker .home-ticker-glide {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.page-home section#logo-ticker .home-ticker-glide::before, .page-home section#logo-ticker .home-ticker-glide::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3rem;
  height: 100%;
  z-index: 2;
}
.page-home section#logo-ticker .home-ticker-glide::before {
  left: 0;
  background: linear-gradient(to right, rgb(142, 216, 248), rgba(142, 216, 248, 0));
}
.page-home section#logo-ticker .home-ticker-glide::after {
  right: 0;
  background: linear-gradient(to left, rgb(142, 216, 248), rgba(142, 216, 248, 0));
}
.page-home section#logo-ticker ul {
  display: flex;
  flex-direction: row;
  /* Below slide width x amount of slides doubled */
  width: 5500px;
  animation: home_logo_scroll 80s linear infinite;
}
.page-home section#logo-ticker ul li {
  /* Below slide width */
  width: 1100px;
  display: flex;
  /* Below spacing between logos */
}
.page-home section#logo-ticker ul li img {
  align-self: center;
  width: 100%;
}
.page-home section#logo-ticker ul:hover {
  animation-play-state: paused;
}
.page-home section#why-ddrops {
  margin-bottom: 0;
  gap: 0.5em;
}
.page-home section#why-ddrops .btn-container {
  padding-bottom: 0;
  padding-top: 2rem;
}
.page-home section#why-ddrops .container-split {
  margin-bottom: clamp(4rem, 3.1713rem + 3.5359vw, 6rem);
}
.page-home section#why-ddrops p {
  text-align: left;
  font-weight: 500;
  line-height: 1.5;
}
.page-home section#why-ddrops .img-side {
  position: relative;
  height: auto;
  place-content: center;
}
.page-home section#why-ddrops .img-side .img-container {
  position: relative;
}
.page-home section#why-ddrops .img-side .pic {
  border-radius: 50%;
  width: 85%;
  margin: 10% auto 15% auto;
}
.page-home section#why-ddrops .img-side .award-rotate-container {
  position: absolute;
  width: 37%;
  right: 0;
  top: 0;
}
.page-home section#why-ddrops .img-side .cloud-one,
.page-home section#why-ddrops .img-side .cloud-two {
  position: absolute;
}
.page-home section#why-ddrops .img-side .cloud-one {
  top: -10%;
  left: 0;
  width: 36%;
}
.page-home section#why-ddrops .img-side .cloud-two {
  width: 40%;
  right: 0;
  bottom: -15%;
}
.page-home section#why-ddrops .why-list {
  margin: 2rem 0 0;
  grid-template-rows: repeat(3, 1fr);
  gap: 0.7rem;
}
.page-home section#why-ddrops .why-list li {
  grid-template-columns: clamp(3.5rem, 3.0775rem + 1.8028vw, 4.7rem) auto;
  gap: 1rem;
  text-wrap: balance;
}
.page-home section#why-ddrops .why-list li .why-icon {
  place-content: center;
}
.page-home section#why-ddrops .why-list li .why-text {
  font-weight: 700;
  align-self: center;
  font-size: clamp(1.1rem, 0.9944rem + 0.4507vw, 1.4rem);
  line-height: 1.1;
}
.page-home section#why-ddrops .why-list li:last-of-type {
  margin-bottom: 0;
}
.page-home .award-rotate-container.desktop-award-rotate {
  display: none;
}
@media screen and (min-width: 768px) {
  .page-home .award-rotate-container.desktop-award-rotate {
    display: block;
    width: 50%;
    margin: 0 auto 2rem auto;
  }
  .page-home .award-rotate-container.mobile-award-rotate {
    display: none;
  }
  .page-home section#why-ddrops .container-split {
    grid-template-columns: 50% auto;
    gap: clamp(2rem, 1.3333rem + 1.3889vw, 3rem);
  }
  .page-home section#why-ddrops .container-split p {
    line-height: 1.5;
  }
  .page-home section#why-ddrops .img-side {
    width: 100%;
  }
  .page-home section#why-ddrops .img-side .cloud-one {
    top: -10%;
    width: 35%;
    left: auto;
    right: 0;
  }
  .page-home section#why-ddrops .img-side .cloud-two {
    width: 45%;
    right: auto;
    left: 2rem;
    bottom: -15%;
    top: auto;
  }
  .page-home section#why-ddrops .img-side .pic {
    width: 100%;
    margin-top: 10%;
  }
}
.page-home section#press h1.section-title {
  margin-bottom: 0.6rem;
}
.page-home section#press p,
.page-home section#press h3 {
  text-align: center;
  font-weight: 400;
  margin-bottom: 3rem;
}
.page-home section#press h3 {
  text-transform: uppercase;
  font-size: 1.5rem;
}
.page-home section#press p {
  margin-bottom: 3rem;
  width: 80%;
  margin-inline: auto;
  font-size: 1.4rem;
}
.page-home section#press #featured-in {
  position: relative;
}
.page-home section#press #featured-in .quote-backing {
  position: sticky;
  top: calc(40% - var(--header-height));
  padding: 0;
}
.page-home section#press #featured-in .quote-backing img {
  opacity: 0.5;
  width: 70%;
  margin: 0 auto;
}
.page-home section#press #featured-in .press-btns {
  position: relative;
  padding: 0;
}
.page-home section#press #featured-in button {
  display: block;
  position: relative;
  width: 45vw;
  height: 45vw;
  aspect-ratio: 1/1;
  margin: 0 auto 0 0;
  right: auto;
  padding-bottom: 40vh;
}
.page-home section#press #featured-in button:nth-child(1), .page-home section#press #featured-in button:nth-child(4) {
  transform: scale(1.2);
}
.page-home section#press #featured-in button:nth-child(3), .page-home section#press #featured-in button:nth-child(5) {
  transform: scale(0.9);
}
.page-home section#press #featured-in button .brand {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: grid;
  place-content: center;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.page-home section#press #featured-in button .brand::before {
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.page-home section#press #featured-in button .brand img {
  z-index: 1;
}
.page-home section#press #featured-in button:nth-child(even) {
  margin-inline: auto 0;
  left: auto;
}
.page-home section#press #featured-in .quote-circle {
  position: sticky;
  margin: 0 auto;
}
.page-home section#press #featured-in .quote-in-circle {
  color: #002d73;
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
  text-align: center;
  width: 100%;
  font-size: clamp(2.5rem, 2.3239rem + 0.7512vw, 3rem);
  margin: 0;
  width: 100%;
  height: 100%;
  align-content: center;
  padding: 7rem 0 2rem 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.page-home section#press #featured-in .quote-in-circle img {
  width: 70%;
  margin: 0 auto;
}
.page-home section#press #featured-in .quote-in-circle.reveal {
  opacity: 1;
}
.page-home section#wellness-hub-window .btn-container {
  text-align: left;
}
.page-home #quote-slider {
  margin-bottom: 0;
}

.lightblue-box {
  text-align: center;
  background-color: #d3efff;
  border-radius: var(--border-radius-blue);
  padding: clamp(1rem, 1rem + 2vw, 2.5rem);
  max-width: 976px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 0px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

figure h2 {
  font-weight: 900;
  font-size: clamp(2.5rem, 1.9718rem + 2.2535vw, 4rem);
}
figure span {
  display: block;
  font-weight: 700;
  font-size: 1.3rem;
}
figure figcaption {
  display: block;
  font-size: clamp(1rem, 0.8592rem + 0.6009vw, 1.4rem);
}
figure img.stars {
  width: 50%;
  max-width: 200px;
  margin: 0.5rem auto;
}

.sbi_photo svg {
  width: auto;
}

#quick-social {
  padding-bottom: 0;
  margin-bottom: clamp(3rem, 2.1713rem + 3.5359vw, 5rem);
}

@media screen and (min-width: 768px) {
  .page-home section#products .product-list-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
  }
  .page-home section#hero li:nth-child(1) .btn-container {
    bottom: 3%;
    text-align: left;
    padding: 0 7%;
  }
  .page-home section#hero li:nth-child(2) .btn-container {
    text-align: left;
    padding-left: 3%;
  }
  .page-home section#hero li:nth-child(3) .btn-container {
    text-align: left;
    padding-left: 4%;
    bottom: 10%;
  }
  .page-home section#hero li:nth-child(4) .btn-container {
    text-align: left;
    bottom: 10%;
    padding-left: 6%;
  }
}
/* Page Privacy Policy
--------------------------------------------- */
/* Page FAQs
--------------------------------------------- */
.page-faqs .list-box {
  margin-top: clamp(1.4rem, 1.1514rem + 1.0608vw, 2rem);
}
.page-faqs .faq-list {
  margin: 0 0 clamp(1.4rem, 1.1514rem + 1.0608vw, 2rem) 0;
}
.page-faqs aside#side-right .container-right {
  padding-inline: 0;
}
.page-faqs .faq-container {
  border-radius: var(--border-radius-faq);
}
.page-faqs .faq-container div.question,
.page-faqs .faq-container div.answer {
  display: block;
}
.page-faqs figure.list-box ul li {
  border-bottom: 1px solid rgba(0, 128, 198, 0.5019607843);
}
.page-faqs figure.list-box ul li a {
  display: block;
  padding: 0.5rem 0;
  color: #0080c6;
  font-weight: 700;
  font-size: clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem);
}
.page-faqs figure.list-box ul li a:hover {
  color: #ff901d;
}
.page-faqs figure.list-box ul li:last-of-type {
  border-bottom: none;
}
.page-faqs figure {
  border-radius: 15px;
  padding: 1rem 2rem;
}
.page-faqs figure p {
  color: #002d73;
}
.page-faqs figure p a {
  color: #0080c6;
  transition: color 0.3s ease;
}
.page-faqs figure p a:hover {
  color: #ff901d;
}
.page-faqs figure.contact-box img {
  width: 30%;
  max-width: 140px;
  margin: 0.5rem auto 1.5rem auto;
}
.page-faqs figure.contact-box p {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .page-faqs figure.contact-box p {
    line-height: 1.5;
  }
}
.page-faqs .faq-list .faq-container {
  padding: clamp(1rem, 0.8786rem + 0.5178vw, 1.5rem);
  margin-bottom: 1rem;
  position: relative;
}
.page-faqs .faq-list .faq-container .question {
  position: relative;
  font-weight: 700;
  display: block;
  font-size: clamp(1rem, 0.9515rem + 0.2071vw, 1.2rem);
  cursor: pointer;
}
.page-faqs .faq-list .faq-container .plus {
  place-content: center;
  fill: #002d73;
}
@media screen and (min-width: 1024px) {
  .page-faqs .faq-list .faq-container .plus {
    scale: 1.4;
  }
}
.page-faqs .faq-list .faq-container .plus svg {
  transition: all 0.35s ease-in-out;
  width: 0.7rem;
}
.page-faqs .faq-list .faq-container:last-of-type {
  margin-bottom: 3rem;
}
@media screen and (min-width: 900px) {
  .page-faqs .faq-list .faq-container:last-of-type {
    margin-bottom: 0;
  }
}
.page-faqs .faq-list:last-of-type {
  margin-bottom: 3rem;
}
.page-faqs .question {
  font-size: clamp(1rem, 0.8415rem + 0.6761vw, 1.45rem);
}
.page-faqs .reveal span {
  font-weight: 400;
  font-size: 1rem !important;
}
.page-faqs .faq-bg-lightblue .faq-container {
  background-color: #e4efff;
}
.page-faqs .faq-bg-purple .faq-container {
  background-color: #f3e7ff;
}
.page-faqs .faq-bg-babyblue .faq-container {
  background-color: #cdecfb;
}
.page-faqs .faq-bg-teal .faq-container {
  background-color: #e1f4f1;
}
.page-faqs .faq-bg-green .faq-container {
  background-color: #edf6e1;
}
.page-faqs .faq-bg-pink .faq-container {
  background-color: #ffe1ee;
}
.page-faqs .faq-bg-orange .faq-container {
  background-color: #ffecd8;
}
.page-faqs .faq-container .question {
  color: #002d73;
}
.page-faqs .faq-bg-yellow .faq-container {
  background-color: #fff7ce;
}
.page-faqs .faq-container .question {
  color: #002d73;
}
.page-faqs .contact-box-left {
  display: none;
}
@media screen and (min-width: 900px) {
  .page-faqs .grid-split {
    display: grid;
    grid-template-columns: 30% auto;
    grid-auto-rows: auto;
    gap: clamp(2rem, 1.3333rem + 1.3889vw, 3rem);
  }
  .page-faqs .grid-split .left-container {
    align-self: start;
    position: sticky;
    top: calc(var(--header-height) + 1rem);
  }
  .page-faqs .grid-split .left-container .list-box {
    margin-bottom: 2rem;
  }
  .page-faqs .container-right .faq-list {
    padding-top: 0;
  }
  .page-faqs .container-right .scroll-pad {
    scroll-margin-top: calc(var(--header-height) - 3rem);
  }
  .page-faqs .contact-box-stack {
    display: none;
  }
  .page-faqs .contact-box-left {
    display: block;
  }
  .page-faqs .contact-box-left p {
    font-size: clamp(1rem, 0.8667rem + 0.2778vw, 1.2rem);
  }
}
.page-faqs .container-right .faq-list:last-of-type {
  margin-bottom: 0;
}

.answer {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  grid-column: span 2;
  transition: all 0.35s;
}
.answer span {
  opacity: 0;
  margin: 0;
  transition: opacity 0.4s;
}
.answer ol,
.answer ul {
  margin: 0.7rem 0 0 0;
}
.answer ol {
  list-style-type: decimal;
  padding-left: 1rem;
}
.answer ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

input.faq-check:checked ~ .answer {
  max-height: 90rem;
  margin-top: 1rem;
}
input.faq-check:checked ~ .answer span {
  opacity: 1;
}

input.faq-check:checked ~ .plus svg {
  transform: rotate(45deg);
}

/* Page Where to Buy
--------------------------------------------- */
.where-to-buy .section-where-to-buy-title {
  font-size: clamp(2rem, 1.5856rem + 1.768vw, 3rem);
}
.where-to-buy .product-sub {
  font-size: clamp(1rem, 0.7514rem + 1.0608vw, 1.6rem);
}
.where-to-buy select#product-select {
  width: 100%;
  min-width: 250px;
  font-size: clamp(1rem, 0.9272rem + 0.3107vw, 1.3rem);
  padding: clamp(0.5rem, 0.3239rem + 0.7512vw, 1rem) clamp(2rem, 1.2958rem + 3.0047vw, 4rem);
  border-radius: 50px;
  border: none;
  background-color: #0080c6;
  color: white;
  text-align: center;
  cursor: pointer;
  outline: none;
}
.where-to-buy .product-img-container {
  position: relative;
  margin: 0 auto;
  max-width: 800px;
}
.where-to-buy .product-img-container img {
  position: relative;
  z-index: 1;
}
.where-to-buy .product-img-container .product-circle-back {
  display: block;
  width: 60%;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: rgba(211, 239, 255, 0.7137254902);
  position: absolute;
  z-index: 0;
  top: 3rem;
  left: 1.5rem;
}
.where-to-buy section#product-select {
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: clamp(4rem, 3.1713rem + 3.5359vw, 6rem);
}
.where-to-buy section#retailers {
  padding-top: 0;
}
.where-to-buy section#retailers .store-logo {
  object-fit: contain;
}
.where-to-buy section#retailers ul li a img {
  transition: transform 0.3s ease;
}
.where-to-buy section#retailers ul li a:hover img {
  transform: scale(1.1);
}
.where-to-buy section.disclaimer {
  padding: 0;
  margin-bottom: clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem);
}
.where-to-buy section.disclaimer p {
  color: #002d73;
  text-align: center;
  line-height: 1.5;
  font-size: clamp(1rem, 0.8944rem + 0.4507vw, 1.3rem);
}
.where-to-buy .retailer-buttons {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 0.6359rem + 1.5534vw, 2.5rem);
  max-width: 700px;
  margin: 0 auto 1.5rem;
}
.where-to-buy .retailer-buttons:has(> :only-child) {
  grid-template-columns: 1fr;
}
.where-to-buy .retailer-buttons .store-swiper-button-prev,
.where-to-buy .retailer-buttons .online-swiper-button-next {
  padding: clamp(0.3rem, 0.1301rem + 0.7249vw, 1rem);
  border: 2px solid #002d73;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.35s ease;
}
.where-to-buy .retailer-buttons .store-swiper-button-prev span,
.where-to-buy .retailer-buttons .online-swiper-button-next span {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1rem, 0.9029rem + 0.4142vw, 1.4rem);
  color: #002d73;
  transition: color 0.35s ease;
}
.where-to-buy .retailer-buttons .active {
  background-color: #002d73;
}
.where-to-buy .retailer-buttons .active span {
  color: white;
}
.where-to-buy .retailer-grid {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: clamp(1rem, 0.7573rem + 1.0356vw, 2rem);
}
.where-to-buy .retailer-grid li {
  width: 50%;
}
.where-to-buy .retailer-grid li a {
  padding: 1rem;
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .where-to-buy .retailer-grid li {
    width: 33.3%;
  }
}
@media screen and (min-width: 1024px) {
  .where-to-buy .retailer-grid li {
    width: 50%;
  }
}
.where-to-buy .empty-text {
  margin-top: clamp(1rem, -0.2431rem + 5.3039vw, 4rem);
}

@media screen and (min-width: 1024px) {
  .where-to-buy .grid-split {
    display: flex;
    max-width: 1280px;
    margin: clamp(4rem, 3.1713rem + 3.5359vw, 6rem) auto 0 auto;
    padding: 0 clamp(1rem, -0.2431rem + 5.3039vw, 4rem);
  }
  .where-to-buy section#product-select {
    margin-top: 0;
    width: 50%;
  }
  .where-to-buy section#product-select .container-xl {
    padding: 0;
  }
  .where-to-buy section#product-select .section-where-to-buy-title,
  .where-to-buy section#product-select .product-sub {
    display: none;
  }
  .where-to-buy #retailers {
    width: 50%;
    margin: 0;
  }
  .where-to-buy #retailers .container-xl {
    padding: 0;
  }
  .where-to-buy #retailers .container-xl .section-where-to-buy-title,
  .where-to-buy #retailers .container-xl .product-sub {
    text-align: left;
  }
  .where-to-buy .retailer-buttons {
    margin-bottom: 0;
  }
  .where-to-buy .retailer-grid {
    padding: 2rem 0;
  }
}
/* Page Our Story
--------------------------------------------- */
.page-our-story section.page-hero-bg {
  background-size: cover;
  background-position: top right;
}
@media screen and (min-width: 768px) {
  .page-our-story section.page-hero-bg {
    background-position: center;
  }
}
@media screen and (min-width: 768px) {
  .page-our-story p {
    font-size: 1.1rem;
  }
}
@media screen and (min-width: 1024px) {
  .page-our-story p {
    font-size: 1.3rem;
  }
}
.page-our-story section#ddrops-difference .carousel-to-tile {
  border-radius: var(--border-radius-blue);
  background-color: #d3efff;
  margin: clamp(4rem, 3.1713rem + 3.5359vw, 6rem) 0;
  padding: 2.2rem 2rem;
}
.page-our-story section#ddrops-difference .carousel-to-tile .section-title {
  padding: 0;
}
@media screen and (min-width: 768px) {
  .page-our-story section#ddrops-difference .carousel-to-tile .section-title {
    padding-bottom: 0.7em;
  }
}
@media screen and (min-width: 768px) {
  .page-our-story section#ddrops-difference .carousel-to-tile {
    border-radius: 0;
    background-color: transparent;
    padding: 0;
  }
}
.page-our-story section#our-story-content p {
  color: #002d73;
  margin-bottom: 2rem;
}
.page-our-story section#our-story-content .sparkle01,
.page-our-story section#our-story-content .sparkle02 {
  width: 50%;
  max-width: 250px;
  margin: 0 auto 2.5rem auto;
}
.page-our-story section#our-story-content .sparkle02 {
  margin-right: 2rem;
}
@media screen and (min-width: 768px) {
  .page-our-story section#our-story-content .sparkle02 {
    margin: 0 auto 2.5rem auto;
  }
}
.page-our-story section#our-story-content .sparkle-lineup {
  margin: 0 auto 2rem auto;
  width: 85%;
  max-width: 700px;
}
.page-our-story section#our-story-content .bottle-lineup {
  width: 85%;
  max-width: 700px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .page-our-story section#our-story-content #break-image .img-container {
    margin-top: 3rem;
  }
}
.page-our-story section#section-two {
  padding-bottom: 0;
  padding-top: 0;
}
.page-our-story section#section-two p {
  color: #002d73;
  margin-bottom: 1.5rem;
}
.page-our-story section#section-two p:last-of-type {
  margin-bottom: 0;
}
.page-our-story #our-story-content {
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .page-our-story #our-story-content {
    padding-top: 0;
  }
}
@media screen and (min-width: 768px) {
  .page-our-story #award-winning figure {
    padding-bottom: 3.5rem;
  }
  .page-our-story #award-winning .award-swiper {
    padding: 0;
  }
  .page-our-story #award-winning .swiper-button-custom-prev {
    left: -1.6rem;
  }
  .page-our-story #award-winning .swiper-button-custom-next {
    right: -1.6rem;
  }
}

@media screen and (min-width: 768px) {
  section#ddrops-difference figure {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }
  section#ddrops-difference figure .container-lg {
    padding: 0;
    max-width: 1920px;
  }
  section#ddrops-difference figure .container-lg .ddrops-diff-swiper {
    touch-action: none;
  }
  section#ddrops-difference figure .container-lg .ddrops-diff-swiper ul {
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  section#ddrops-difference figure .container-lg .ddrops-diff-swiper ul li {
    border-radius: 30px;
    box-sizing: border-box;
    background-color: #d3efff;
    padding: 1em 1em clamp(2.7rem, 2.5rem + 0.4167vw, 3rem) 1em;
    width: 100% !important;
    margin: 0 !important;
  }
  section#our-story-content #break-image {
    max-width: 700px;
    margin: 0 auto;
  }
}
/* Page Reseller
--------------------------------------------- */
.page-reseller .product-sub {
  text-align: center;
}
.page-reseller section#sub p {
  color: #0080c6;
  text-align: center;
  font-weight: 900;
}
.page-reseller section#join-program p {
  color: #002d73;
  text-align: center;
}
.page-reseller section#section-one h1 {
  margin-bottom: 0;
}
.page-reseller section#section-one .btn-container {
  padding-bottom: 0;
}
.page-reseller section#section-one #details {
  color: #002d73;
  text-align: center;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .page-reseller section#section-one #details {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    gap: 1rem;
    margin-bottom: 0;
  }
}
.page-reseller section#section-one #details li {
  place-content: center;
}
@media screen and (min-width: 768px) {
  .page-reseller section#section-one #details li {
    display: grid;
    grid-template-rows: 55% 20% 25%;
  }
}
.page-reseller section#section-one #details li .icon img {
  width: auto;
  height: 100%;
}
.page-reseller section#section-one #details span {
  display: block;
  text-align: center;
  margin-bottom: 0;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2137rem + 1.2214vw, 1.8rem);
}
.page-reseller section#section-one #details p {
  font-size: clamp(1rem, 0.5229rem + 2.0356vw, 1.5rem);
  line-height: 1.2;
}
@media screen and (max-width: 1024px) {
  .page-reseller section#section-one #details p br {
    display: none;
  }
}
.page-reseller section#section-one #details .icon {
  width: 45%;
  margin: 0.5rem auto;
}
.page-reseller section#section-one #details li:first-of-type .icon {
  width: 38.25%;
}
.page-reseller section#section-two {
  padding: clamp(2.2rem, 1.4541rem + 3.1823vw, 4rem) 0;
}
.page-reseller section#section-two p {
  color: #002d73;
  text-align: center;
  line-height: 1.4;
}
.page-reseller #product-benefits .section-title {
  padding-top: 0;
}
.page-reseller section#color-break p {
  color: #002d73;
  text-align: center;
}
.page-reseller section#section-three {
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .page-reseller #icon-boxes {
    padding-top: 0;
  }
}
.page-reseller #bottle-lineup {
  padding-top: 0;
}
.page-reseller #bottle-lineup img {
  width: 85%;
  max-width: 700px;
  margin: 0 auto;
}

/* Page Healthcare
--------------------------------------------- */
.page-healthcare .page-hero-bg {
  background-position: top center;
}
.page-healthcare #blue-boxes ul li .icon {
  padding: 0.7rem;
}
.page-healthcare #blue-boxes ul li .icon img {
  transform: translate(0);
}
.page-healthcare #sub h2 {
  text-align: center;
}
.page-healthcare #sub p {
  color: white;
  text-align: center;
  font-size: clamp(1rem, 0.9272rem + 0.3107vw, 1.3rem);
  margin-bottom: 2em;
  font-weight: 300;
}
.page-healthcare section#join-content p {
  color: #002d73;
  margin-bottom: 2rem;
}
.page-healthcare section#join-content p:last-of-type {
  margin-bottom: 0;
}
.page-healthcare #join-content h2 {
  text-align: center;
}
.page-healthcare #join-content p {
  text-align: center;
}
.page-healthcare #icon-boxes {
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  .page-healthcare section#ddrops-difference figure .icon {
    max-width: 200px;
  }
}
.page-healthcare section#ddrops-difference figure .section-title {
  padding-top: 0;
}
.page-healthcare #section-two {
  padding-top: 0;
}
.page-healthcare #section-two .content p {
  margin-bottom: clamp(2rem, 1.6359rem + 1.5534vw, 3.5rem);
}
.page-healthcare #section-two .content .btn-container {
  padding-bottom: 0;
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  .page-healthcare #section-two .content .btn-container {
    text-align: left;
  }
}
@media screen and (min-width: 768px) {
  .page-healthcare #section-two .content-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .page-healthcare #section-two .content-split .content {
    place-content: center;
  }
}
.page-healthcare #section-two .img-container {
  position: relative;
  margin-bottom: clamp(2rem, 1.0458rem + 4.0712vw, 3rem);
}
.page-healthcare #section-two .img-container .stars01 {
  position: absolute;
  width: 15%;
  max-width: 100px;
  top: 0;
  left: 0;
}
.page-healthcare #section-two .img-container .stars02 {
  position: absolute;
  width: 15%;
  max-width: 100px;
  right: 3%;
  bottom: 3%;
}
.page-healthcare #section-two .img-container .img-main {
  border-radius: 50%;
  width: 90%;
  margin: 0 auto;
}
.page-healthcare #section-two .pic {
  border-radius: 50%;
  width: 90%;
  margin: 0 auto 5% auto;
}
.page-healthcare #section-two .stethoscope_sparkles {
  position: absolute;
  right: 1rem;
  bottom: 0;
  width: 52%;
}

/* Page Products All
--------------------------------------------- */
.page-products-all .page-hero-bg::after {
  opacity: 0.7;
}
.page-products-all #filters {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
  margin-bottom: 2rem;
}
.page-products-all #filters li {
  text-align: center;
  justify-items: stretch;
}
.page-products-all #filters li button {
  border-radius: 15px;
  padding: 0.5rem 0;
  text-align: center;
  display: block;
  transition: all 0.2s ease;
  width: 100%;
}
.page-products-all #filters li:nth-child(1) button {
  color: white;
  background-color: #0080c6;
  border: 2px solid #0080c6;
}
.page-products-all #filters li:nth-child(1) button.is-checked {
  background-color: transparent;
  color: #8fd8f9;
}
.page-products-all #filters li:nth-child(2) button {
  color: white;
  background-color: #582a8a;
  border: 2px solid #582a8a;
}
.page-products-all #filters li:nth-child(2) button.is-checked {
  background-color: transparent;
  color: #582a8a;
}
.page-products-all #filters li:nth-child(3) button {
  color: white;
  background-color: #002d73;
  border: 2px solid #002d73;
}
.page-products-all #filters li:nth-child(3) button.is-checked {
  background-color: transparent;
  color: #0080c6;
}
.page-products-all #filters li:nth-child(4) {
  text-align: right;
}
.page-products-all #filters li:nth-child(4) button {
  color: white;
  background-color: #8dc63f;
  border: 2px solid #8dc63f;
}
.page-products-all #filters li:nth-child(4) button.is-checked {
  background-color: transparent;
  color: #d80b8c;
}
.page-products-all .container-product-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.page-products-all section#products {
  margin-top: clamp(3rem, 2.5856rem + 1.768vw, 4rem);
  margin-bottom: clamp(2rem, 1.5856rem + 1.768vw, 3rem);
}
@media screen and (min-width: 768px) {
  .page-products-all section#products {
    margin-bottom: clamp(4rem, 3.1713rem + 3.5359vw, 6rem);
  }
}
.page-products-all section#products #age-select-container {
  margin-bottom: clamp(3rem, 1.9437rem + 4.507vw, 6rem);
}
@media screen and (min-width: 768px) {
  .page-products-all section#products #age-select-container {
    display: none;
  }
}
.page-products-all section#products h3.sort-title {
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  margin-bottom: 1rem;
  color: #002d73;
}
.page-products-all #age-select-tiles {
  flex-direction: row;
  margin-bottom: clamp(2.5rem, 0.25rem + 4.6875vw, 4rem);
  place-content: center;
  gap: 2rem;
  display: none;
}
@media screen and (min-width: 768px) {
  .page-products-all #age-select-tiles {
    display: flex;
  }
}
.page-products-all #age-select-tiles .sort-tiles {
  margin-right: 1rem;
}
.page-products-all #age-select-tiles .sort-title {
  font-size: clamp(1rem, 0.9515rem + 0.2071vw, 1.2rem);
  place-content: center;
}
.page-products-all #age-select-tiles ul {
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.page-products-all #age-select-tiles ul li {
  text-align: center;
}
.page-products-all #age-select-tiles ul li:nth-child(1) a {
  background-color: #0080c6;
  border: 2px solid #0080c6;
}
.page-products-all #age-select-tiles ul li:nth-child(1) a:hover, .page-products-all #age-select-tiles ul li:nth-child(1) a.active {
  background-color: transparent;
  color: #0080c6;
}
.page-products-all #age-select-tiles ul li:nth-child(2) a {
  background-color: #582a8a;
  border: 2px solid #582a8a;
}
.page-products-all #age-select-tiles ul li:nth-child(2) a:hover, .page-products-all #age-select-tiles ul li:nth-child(2) a.active {
  background-color: transparent;
  color: #582a8a;
}
.page-products-all #age-select-tiles ul li:nth-child(3) a {
  background-color: #2C3E98;
  border: 2px solid #2C3E98;
}
.page-products-all #age-select-tiles ul li:nth-child(3) a:hover, .page-products-all #age-select-tiles ul li:nth-child(3) a.active {
  background-color: transparent;
  color: #2C3E98;
}
.page-products-all #age-select-tiles ul li:nth-child(4) a {
  background-color: #002d73;
  border: 2px solid #002d73;
}
.page-products-all #age-select-tiles ul li:nth-child(4) a:hover, .page-products-all #age-select-tiles ul li:nth-child(4) a.active {
  background-color: transparent;
  color: #002d73;
}
.page-products-all #age-select-tiles ul li a {
  color: white;
  padding: clamp(0.5rem, 0.4515rem + 0.2071vw, 0.7rem) clamp(0.9rem, 0.5117rem + 1.657vw, 2.5rem);
  border-radius: 15px;
  display: block;
  font-size: clamp(1rem, 0.9515rem + 0.2071vw, 1.2rem);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Page Contact Us
--------------------------------------------- */
.page-contact-us #section-contact-tiles {
  padding-bottom: 0;
  margin-top: clamp(4rem, 3.1713rem + 3.5359vw, 6rem);
}
.page-contact-us #contact-tiles {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}
.page-contact-us #contact-tiles .title-label {
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.page-contact-us #contact-tiles span {
  color: white;
  font-size: 1rem;
  text-align: center;
  display: block;
}
.page-contact-us #contact-tiles li {
  padding: 1.5rem;
}
.page-contact-us #contact-tiles li img {
  aspect-ratio: 1/1;
  margin: 1rem auto;
  align-self: center;
}
.page-contact-us #contact-tiles li a {
  color: white;
  grid-template-rows: 1.3rem 8rem 3rem;
}
.page-contact-us #contact-tiles li span {
  align-self: center;
}
.page-contact-us #contact-tiles li:nth-child(1) img {
  width: 30%;
}
.page-contact-us #contact-tiles li:nth-child(2) img {
  width: 23%;
}
.page-contact-us #contact-tiles li:nth-child(3) img {
  width: 25%;
}
.page-contact-us #contact-tiles li:nth-child(4) img {
  width: 35%;
}
.page-contact-us #section-one p,
.page-contact-us #section-three p {
  color: #002d73;
}
.page-contact-us #section-two {
  padding-top: 0;
  margin-bottom: clamp(3rem, 2.1713rem + 3.5359vw, 5rem);
}
@media screen and (min-width: 768px) {
  .page-contact-us #section-two .content-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .page-contact-us #section-two .content-split .content {
    place-content: center;
  }
}
.page-contact-us #section-two .img-container {
  position: relative;
  width: 90%;
  margin: 0 auto clamp(2rem, 1.0458rem + 4.0712vw, 3rem) auto;
}
@media screen and (min-width: 768px) {
  .page-contact-us #section-two .img-container {
    margin-bottom: 0;
  }
}
.page-contact-us #section-two .pic {
  border-radius: 50%;
  margin-bottom: 10%;
}
.page-contact-us #section-two .stethoscope_sparkles {
  position: absolute;
  right: -1rem;
  bottom: 0;
  width: 52%;
}
.page-contact-us #icon-boxes {
  padding-top: 0;
  margin-bottom: 0;
}
.page-contact-us #quick-social {
  padding-top: 0;
}

@media screen and (min-width: 530px) {
  .page-contact-us #contact-tiles {
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Page Authenticity
--------------------------------------------- */
.page-authenticity .page-hero-bg {
  background-size: cover;
}
.page-authenticity section#section-one {
  margin-top: clamp(4rem, 3.1713rem + 3.5359vw, 6rem);
}
.page-authenticity section#section-one .container-row .content p {
  color: #002d73;
  margin-bottom: 2rem;
}
.page-authenticity section#section-one .container-row {
  display: grid;
  grid-template-columns: auto;
  gap: clamp(2rem, 0.6667rem + 2.7778vw, 4rem);
}
.page-authenticity section#section-one .stack-high {
  margin-bottom: clamp(4rem, 3.3333rem + 1.3889vw, 5rem);
}
@media screen and (min-width: 768px) {
  .page-authenticity section#section-one .stack-high .side-right {
    grid-column-start: 2;
    grid-row-start: 1;
    place-content: center;
  }
  .page-authenticity section#section-one .stack-high .side-right p {
    margin-bottom: 0;
  }
  .page-authenticity section#section-one .stack-high .side-left {
    grid-column-start: 1;
    grid-row-start: 1;
    width: 35vw;
    max-width: 450px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .page-authenticity section#section-one .stack-authentic .side-right {
    grid-column-start: 1;
    grid-row-start: 1;
    place-content: center;
  }
  .page-authenticity section#section-one .stack-authentic .side-left {
    grid-column-start: 2;
    grid-row-start: 1;
    margin: 0 auto;
    width: 35vw;
    max-width: 450px;
  }
  .page-authenticity section#section-one .stack-authentic .side-left p {
    margin-bottom: 0;
  }
}
.page-authenticity section#section-one .side-left {
  width: 80%;
  margin: 0 auto 2rem auto;
}
.page-authenticity section#reseller {
  padding: 2rem;
  margin-bottom: 0;
}
.page-authenticity section#reseller .btn-container {
  padding-bottom: 0;
  padding-top: clamp(2rem, 1.7928rem + 0.884vw, 2.5rem);
}
@media screen and (min-width: 768px) {
  .page-authenticity section#reseller {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }
  .page-authenticity section#reseller .content {
    aspect-ratio: auto;
    padding-top: clamp(2rem, -2rem + 8.3333vw, 8rem);
    padding-bottom: clamp(2rem, -2rem + 8.3333vw, 8rem);
    padding-left: clamp(1.5rem, 0.6197rem + 3.7559vw, 4rem);
    width: 50vw;
    max-width: 640px;
    margin: 0 0 0 auto;
  }
  .page-authenticity section#reseller .content h2 {
    text-align: left;
  }
  .page-authenticity section#reseller .content p {
    text-align: left;
    width: 80%;
  }
  .page-authenticity section#reseller .content .btn-container {
    text-align: left;
  }
  .page-authenticity section#reseller .scale-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}
.page-authenticity section#reseller p {
  color: #002d73;
  text-align: center;
}

/* Anchor Basic
--------------------------------------------- */
#basic-content {
  margin-top: clamp(4rem, 3.1713rem + 3.5359vw, 6rem);
}
#basic-content strong {
  font-weight: 700;
}
#basic-content a {
  color: #0080c6;
  font-weight: 600;
}
#basic-content dl {
  padding: 0;
  margin: 0;
}
#basic-content dl dt {
  color: #0080c6;
  font-weight: 700;
  margin-bottom: 1em;
  font-size: clamp(1.2rem, 1.1757rem + 0.1036vw, 1.3rem);
}
#basic-content dl ul li {
  font-size: 1rem;
  margin-bottom: 2em;
  letter-spacing: normal;
}
@media screen and (min-width: 768px) {
  #basic-content dl ul li {
    font-size: 1.1rem;
  }
}
#basic-content dl ul li a {
  color: #0080c6;
  font-weight: 700;
  transition: color 0.3s ease;
}
#basic-content dl ul li a:hover {
  color: #ff901d;
}
#basic-content dl ul.table-of-contents li {
  margin-bottom: 0.5em;
}
#basic-content dl dd {
  margin-bottom: 2em;
  font-size: 1rem;
  letter-spacing: normal;
  color: black;
  font-weight: 300;
  margin-left: 0;
}
@media screen and (min-width: 768px) {
  #basic-content dl dd {
    font-size: 1.1rem;
  }
}
#basic-content dl dd ul {
  list-style-type: disc;
  padding-inline-start: 2.5rem;
}
#basic-content dl dd ul li {
  margin-bottom: 0.8em;
  font-size: 1.2rem;
}
#basic-content dl dd p {
  margin-bottom: 1em;
}
#basic-content div.anchor {
  scroll-margin-top: calc(var(--header-height) - 3rem);
}
#basic-content ol {
  list-style: decimal;
}
#basic-content ol li {
  font-size: 1.2rem;
  margin-bottom: 0.8em;
}
#basic-content ol li a:not(.inline-link) {
  color: #0080c6;
  font-weight: 700;
  transition: color 0.3s ease;
}
#basic-content ol li a:not(.inline-link):hover {
  color: #ff901d;
}

/* Single Product
--------------------------------------------- */
.back-to-all {
  display: inline-block;
  color: #0080c6;
  position: relative;
  padding-bottom: 1rem;
  padding-top: 0.5rem;
  font-weight: 400;
  transition: color 0.3s ease;
}
.back-to-all:hover {
  color: #ff901d;
}
.back-to-all::before {
  content: url("./img/product_back_arrow.svg");
  margin-right: 0.6rem;
  display: inline-block;
  height: 100%;
  width: 0.33rem;
}

.product section#product-hero {
  padding-top: 0.5rem;
  padding-bottom: 0;
  margin-bottom: 0;
  min-height: 50vh;
}
.product section#product-hero .hero-split {
  flex-direction: column;
}
.product section#product-hero .phs {
  padding: 0 0 1rem 0;
}
@media screen and (min-width: 768px) {
  .product section#product-hero .hero-split {
    flex-direction: row;
    gap: 4%;
  }
  .product section#product-hero .hero-split aside {
    width: 48%;
  }
}
.product .product-thumbs {
  margin: 1.5rem 0;
}
.product .product-thumbs li img {
  object-fit: cover;
  aspect-ratio: 1/1;
}
.product #reveals .chev {
  place-content: center;
}
@media screen and (min-width: 1024px) {
  .product #reveals .chev {
    scale: 1.4;
  }
}
.product #reveals .chev svg {
  stroke: #002d73;
  transition: all 0.35s ease-in-out;
}
.product #reveals .plus {
  place-content: center;
}
.product #reveals .plus svg {
  fill: #002d73;
  transition: all 0.35s ease-in-out;
}
.product aside.right .star-size {
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  margin: 0.5rem 0 1.5em 0;
}
.product aside.right .star-size #size {
  justify-self: end;
}
.product aside.right .star-size #size .select-container {
  margin-bottom: 0;
}
.product aside.right .star-size #size button.drop-menu-trigger {
  background-color: #002d73;
  padding: 0.2rem 2rem 0.2rem 1rem;
  font-size: clamp(1rem, 0.9515rem + 0.2071vw, 1.2rem);
  width: 100vw;
  min-width: 137px;
  max-width: 150px;
}
.product aside.right .star-size #size button.drop-menu-trigger i {
  right: 0.7rem;
}
.product aside.right .product-sub {
  font-size: clamp(1.2rem, 0.8479rem + 1.5023vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 0;
}
.product aside.right .product-sub span {
  display: block;
  font-weight: 400;
  margin: 0.8rem 0 0 0;
  font-size: clamp(1.2rem, 1.0757rem + 0.5304vw, 1.5rem);
}
.product aside.right .product-description {
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.02rem;
}
.product aside.right .product-info {
  line-height: 1.3;
  letter-spacing: -0.01rem;
}
@media screen and (min-width: 1024px) {
  .product aside.right .product-info {
    font-size: 1.05rem;
    line-height: 1.5;
  }
}
.product aside.right .product-buttons {
  gap: clamp(0.4rem, 0.2544rem + 0.6214vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
  margin: 1rem 0;
}
.product aside.right .product-buttons a {
  min-width: 0;
  align-content: center;
}
@media screen and (min-width: 768px) {
  .product aside.right .product-buttons a {
    padding: 0.5rem;
  }
}
.product aside.right .product-buttons a span {
  text-transform: none;
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  .product aside.right .product-buttons a span {
    font-size: clamp(1rem, 0.6667rem + 0.6944vw, 1.5rem);
  }
}
.product aside.right .product-buttons a img {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 180px;
  z-index: 1;
}
.product aside.right #reveals ul#product-drops > li {
  grid-template-columns: auto 1.5rem;
  padding: 0.9rem 0;
}
.product aside.right #reveals label {
  position: relative;
  font-size: clamp(1.3rem, 1.0535rem + 1.0516vw, 2rem);
  font-weight: 700;
  cursor: pointer;
}
.product aside.right #reveals p {
  margin-bottom: 1.5rem;
  font-weight: 400;
  color: #002d73;
  font-size: 1rem;
}
.product aside.right #reveals .answer ul {
  list-style-type: disc;
  padding-left: 2rem;
}
.product aside.right #reveals .answer ul li {
  color: #002d73;
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}
.product aside.right #reveals .answer ol {
  list-style: auto;
  padding-left: 1.4rem;
}
.product aside.right #reveals .answer ol li {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.2rem;
  color: #002d73;
}
.product .drop-label .label {
  font-size: clamp(1rem, 0.855rem + 0.6188vw, 1.35rem);
}
.product section#section-one {
  padding-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .product section#section-one .masonry {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0;
    column-gap: 1.5rem;
  }
  .product section#section-one .masonry .text-content {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 3;
    margin-bottom: clamp(1rem, -0.3333rem + 2.7778vw, 3rem);
  }
  .product section#section-one .masonry .text-content p {
    margin-bottom: 0;
    font-size: clamp(1.3rem, 1.2515rem + 0.2071vw, 1.5rem);
  }
  .product section#section-one .masonry .image-container {
    grid-row-start: 2;
    grid-column-start: 2;
    grid-row-end: 3;
    margin: 0 auto;
    top: 0;
    padding: 2rem 0;
  }
}
@media screen and (min-width: 1100px) {
  .product section#section-one .masonry {
    grid-template-columns: 2fr 1fr;
  }
}
.product section#section-one .section-title {
  text-align: left;
  margin-bottom: 0.5rem;
  padding-top: 0;
  padding-bottom: 0;
}
.product section#section-one .sub-title {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
}
.product section#section-one .image-container {
  position: relative;
  padding: 2rem 0 5rem 0;
  overflow-x: hidden;
}
.product section#section-one .image-container .circle-image-container {
  position: relative;
}
.product section#section-one .award-rotate-container {
  position: absolute;
  top: -2rem;
  left: 0;
  width: 35%;
}
.product section#section-one img.pic {
  border-radius: 50%;
  width: 90%;
  margin: 0 auto;
}
.product section#section-one .product-dots {
  position: absolute;
}
.product section#section-one .product-dots-tr {
  top: -11%;
  right: 0;
  width: 20%;
  transform: rotate(130deg);
}
@media screen and (min-width: 768px) {
  .product section#section-one .product-dots-tr {
    top: -4rem;
  }
}
.product section#section-one .product-dots-br {
  right: 1.5rem;
  bottom: 2rem;
  width: 15%;
  transform: rotate(337deg);
}
.product section#section-one .product-dots-bl {
  bottom: -7%;
  left: 0;
  width: 20%;
  transform: rotate(184deg) scaleY(-1);
}
.product section#section-one #product-difference-list li {
  grid-template-columns: 15% auto;
  gap: 1.2rem;
  margin-bottom: clamp(1.5rem, 1.3832rem + 0.4984vw, 2rem);
}
.product section#section-one #product-difference-list li .diff-text span {
  color: #002d73;
  font-size: 1.2rem;
  font-weight: 700;
  display: block;
}
.product section#section-one #product-difference-list li .diff-text p {
  color: #0080c6;
  font-size: 1.2rem;
  line-height: 1.5;
}
.product section#section-one #product-difference-list li .diff-icon {
  place-content: center;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .product section#section-one #product-difference-list li .diff-icon {
    max-width: 60px;
  }
}
@media screen and (min-width: 768px) {
  .product section#section-one #backed-science {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    margin-top: 3rem;
  }
}
@media screen and (min-width: 1100px) {
  .product section#section-one #backed-science {
    grid-template-columns: 1fr 2fr;
  }
}
.product section#section-one #backed-science .science-right h1 {
  margin-bottom: 1rem;
}
.product section#section-one #backed-science .science-right p:first-of-type {
  font-size: 1.2rem;
}
.product section#section-one #backed-science .science-right p:last-of-type {
  font-weight: 700;
  font-size: clamp(1rem, 0.8667rem + 0.2778vw, 1.2rem);
}
@media screen and (min-width: 768px) {
  .product section#section-one #backed-science .science-right {
    place-content: center;
  }
}
.product section#section-one #backed-science .science-left {
  position: relative;
  max-width: 530px;
  margin: 2rem auto 4rem auto;
}
.product section#section-one #backed-science .science-left .beaker-img {
  position: absolute;
  bottom: -4.5rem;
  right: -0.5rem;
  width: 45%;
}
.product section#section-one #backed-science .science-left .circle-img {
  border-radius: 50%;
  width: 90%;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) {
  .product section#section-one #backed-science .science-left {
    grid-template-columns: 1fr 2fr;
    margin: 0;
  }
}
.product section#section-two h1.section-title {
  margin-bottom: 2rem;
}
.product section#section-three {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.product section#section-three .section-title {
  padding-top: 0;
}
.product section#section-three #how-to-tutorial {
  padding: 3rem 2rem 1rem 2rem;
}
.product section#section-three #how-to-tutorial .swiper-pagination {
  position: relative;
  margin-top: 1rem;
}
@media screen and (min-width: 900px) {
  .product section#section-three #how-to-tutorial {
    padding: 3rem 2rem;
  }
}
.product section#section-three #how-to-tutorial .tutorial-desc {
  color: #002d73;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .product section#section-three #how-to-tutorial .tutorial-desc {
    width: 75%;
    margin: 0 auto auto;
  }
}
.product section#section-three #how-to-slider {
  margin-bottom: 3rem;
}
@media screen and (min-width: 900px) {
  .product section#section-three #how-to-slider {
    margin-bottom: 0;
  }
}
.product section#section-three #how-to-slider svg {
  margin: 0 auto 2rem auto;
  width: 80%;
}
.product section#section-three #how-to-slider svg.breast {
  transform: scale(0.75);
}
.product section#section-three #how-to-slider li {
  display: grid;
  grid-template-rows: 2fr 0.7fr;
  height: 100%;
}
.product section#section-three .tutorial-disclaimer {
  margin: 1rem auto clamp(4rem, 3.1713rem + 3.5359vw, 6rem) auto;
}
.product section#section-three .tutorial-disclaimer p {
  color: #002d73;
  font-size: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
.product section#section-three .tutorial-disclaimer p:last-of-type {
  margin-bottom: 0;
}
.product section#section-four .section-title {
  padding-top: 0;
}
.product section#section-four section#product-faqs {
  margin-bottom: clamp(2rem, 1.5856rem + 1.768vw, 3rem);
}
@media screen and (min-width: 768px) {
  .product section#section-four section#product-faqs {
    padding-top: 0;
  }
}
.product section#section-four section#product-faqs .faq-container {
  background-color: #d3efff;
  padding: clamp(1rem, 0.8786rem + 0.5178vw, 1.5rem) clamp(1rem, 0.7573rem + 1.0356vw, 2rem);
  margin-bottom: 1rem;
  position: relative;
  border-radius: var(--border-radius-faq);
}
.product section#section-four section#product-faqs .faq-container label {
  position: relative;
  font-weight: 700;
  display: block;
  margin-right: 1.5rem;
  color: #002d73;
  font-size: 1.3rem;
  cursor: pointer;
}
.product section#section-four section#product-faqs .faq-container .plus {
  place-content: center;
}
.product section#section-four section#product-faqs .faq-container .plus svg {
  width: clamp(0.7rem, 0.6272rem + 0.3107vw, 1rem);
  transition: all 0.35s ease-in-out;
  fill: #002d73;
}
.product section#section-four .faq-contact {
  padding: 0 1rem;
}
.product section#section-four .faq-contact p {
  color: #002d73;
  text-align: center;
  font-size: 1.2rem;
}
.product section#reviews {
  padding-top: 0;
  margin-bottom: 0;
}
.product section#reviews .section-title {
  padding-top: 0;
}
.product section#reviews .glsr-review-form {
  display: flex;
  flex-direction: column;
}
.product section#reviews .glsr-review-form .glsr-field-rating {
  margin-top: 0;
}
.product section#reviews .glsr-review-form label.glsr-label span {
  letter-spacing: normal;
}
.product section#reviews .glsr-button {
  border-radius: 50px;
  position: relative;
  padding: clamp(0.5rem, 0.3239rem + 0.7512vw, 1rem) clamp(2rem, 1.2958rem + 3.0047vw, 4rem);
  overflow: hidden;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  color: white;
}
.product section#reviews .review-form {
  overflow: hidden;
  opacity: 0;
  height: 0;
  transition: height 0.3s ease, opacity 0.3s ease;
}
@media screen and (min-width: 1024px) {
  .product .reveal span {
    font-size: 1.1rem;
  }
}

.product-hero-swiper-container.one .product-swiper-wrap {
  display: none;
}
.product-hero-swiper-container.one .product-swiper-wrap:nth-child(1) {
  display: block;
}
.product-hero-swiper-container.two .product-swiper-wrap {
  display: none;
}
.product-hero-swiper-container.two .product-swiper-wrap:nth-child(2) {
  display: block;
}
.product-hero-swiper-container.three .product-swiper-wrap {
  display: none;
}
.product-hero-swiper-container.three .product-swiper-wrap:nth-child(3) {
  display: block;
}
.product-hero-swiper-container.four .product-swiper-wrap {
  display: none;
}
.product-hero-swiper-container.four .product-swiper-wrap:nth-child(4) {
  display: block;
}

#product-btn-container .product-buttons {
  display: none;
}
#product-btn-container.one .product-buttons {
  display: none;
}
#product-btn-container.one .product-buttons:nth-child(1) {
  display: grid;
}
#product-btn-container.two .product-buttons {
  display: none;
}
#product-btn-container.two .product-buttons:nth-child(2) {
  display: grid;
}
#product-btn-container.three .product-buttons {
  display: none;
}
#product-btn-container.three .product-buttons:nth-child(3) {
  display: grid;
}
#product-btn-container.four .product-buttons {
  display: none;
}
#product-btn-container.four .product-buttons:nth-child(4) {
  display: grid;
}

#similar-products .product-list-container {
  width: 50vw;
}
#similar-products .product-list-container .glsr {
  transform: scale(0.8);
}
#similar-products .product-list-container .glsr .glsr-summary {
  justify-content: center;
  max-width: 100vw;
}
#similar-products .product-list-container span {
  color: #002d73;
  display: block;
  font-weight: 700;
  text-align: center;
  margin: 0.5rem auto 0 auto;
  line-height: 1.2;
  text-wrap-style: balance;
  max-width: 12rem;
  font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
}
#similar-products .similar-products-swiper {
  margin-bottom: clamp(2rem, 1.1713rem + 3.5359vw, 4rem);
}
#similar-products section#section-two {
  padding-bottom: 0.5rem;
}
#similar-products section#section-three h1 {
  margin-bottom: 2rem;
}
#similar-products .btn-container {
  padding: 0;
}

/* Center the whole group of slides when we don't have enough slides */
.similar-products-swiper.sp-center-group .swiper-wrapper {
  justify-content: center; /* wrapper is flex — this centers the slides as a group */
}

.product-thumb-nav-container {
  display: block;
  width: 100%;
  place-content: center;
  display: none;
}
@media screen and (min-width: 1024px) {
  .product-thumb-nav-container {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
.product-thumb-nav-container .product-thumb-navigation {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: clamp(1rem, 0.6667rem + 0.6944vw, 1.5rem) auto;
  width: 10%;
  place-content: center;
}
.product-thumb-nav-container .product-thumb-navigation .swiper-button-prev,
.product-thumb-nav-container .product-thumb-navigation .swiper-button-next {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  width: 50vw;
  max-width: 3rem;
}
@media screen and (min-width: 768px) {
  .product-thumb-nav-container .product-thumb-navigation .swiper-button-prev,
  .product-thumb-nav-container .product-thumb-navigation .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
.product-thumb-nav-container .product-thumb-navigation .swiper-button-prev {
  left: -2rem;
}
.product-thumb-nav-container .product-thumb-navigation .swiper-button-next {
  right: -2rem;
}

.swiper-slide-thumb-active {
  border: 2px solid #002d73;
}

.product-thumb-nav-container .product-thumb-button-prev {
  left: -1.5rem;
  transform: translateY(-50%);
}
.product-thumb-nav-container .product-thumb-button-next {
  right: -1.5rem;
  transform: translateY(-50%) rotate(180deg);
}
.product-thumb-nav-container .product-thumb-button-next,
.product-thumb-nav-container .product-thumb-button-prev {
  margin: 0;
  top: 50%;
  width: 1.75rem;
}

body.products-kids-dha-omega-3-spray section#quality .quality-bottle-drop {
  width: 70vw;
  max-width: 300px;
  margin: 2rem auto 2rem -4rem;
}

@media screen and (min-width: 1024px) {
  body.products-baby-ddrops section#key-ingredients ul#blue-boxes li:nth-child(3) .label-container img,
  body.products-adult-vitamin-d3-1000-iu-drops section#key-ingredients ul#blue-boxes li:nth-child(3) .label-container img,
  body.products-adult-vitamin-d3-2000-iu-drops section#key-ingredients ul#blue-boxes li:nth-child(3) .label-container img,
  body.products-vegan-vitamin-d2-1000-iu-drops section#key-ingredients ul#blue-boxes li:nth-child(3) .label-container img {
    width: 53%;
  }
  body.products-ddrops-baby-probiotic section#key-ingredients ul#blue-boxes li:nth-child(5) .label-container img,
  body.products-ddrop-baby-tummy-relief section#key-ingredients ul#blue-boxes li:nth-child(5) .label-container img,
  body.products-kids-probiotic-drops section#key-ingredients ul#blue-boxes li:nth-child(5) .label-container img,
  body.products-bedtime-drops section#key-ingredients ul#blue-boxes li:nth-child(5) .label-container img {
    width: 53%;
  }
  body.products-ddrop-baby-teething section#key-ingredients ul#blue-boxes li:nth-child(4) .label-container img,
  body.products-adult-vitamin-d3-5000-iu-drops section#key-ingredients ul#blue-boxes li:nth-child(4) .label-container img {
    width: 53%;
  }
  body.products-ddrops-baby-probiotic section#key-ingredients ul#blue-boxes li:nth-child(4) .label-container img,
  body.products-kids-probiotic-drops section#key-ingredients ul#blue-boxes li:nth-child(4) .label-container img,
  body.products-bedtime-drops section#key-ingredients ul#blue-boxes li:nth-child(4) .label-container img {
    width: 72%;
  }
  body.products-ddrop-baby-tummy-relief section#key-ingredients ul#blue-boxes li:nth-child(3) .label-container img,
  body.products-adult-vitamin-d3-5000-iu-drops section#key-ingredients ul#blue-boxes li:nth-child(3) .label-container img {
    width: 72%;
  }
  body.products-baby-ddrops section#key-ingredients ul#blue-boxes li:nth-child(2) .label-container img,
  body.products-ddrop-baby-tummy-relief section#key-ingredients ul#blue-boxes li:nth-child(2) .label-container img,
  body.products-kids-vitamin-d3-600-iu-drops section#key-ingredients ul#blue-boxes li:nth-child(2) .label-container img,
  body.products-adult-vitamin-d3-1000-iu-drops section#key-ingredients ul#blue-boxes li:nth-child(2) .label-container img,
  body.products-adult-vitamin-d3-2000-iu-drops section#key-ingredients ul#blue-boxes li:nth-child(2) .label-container img,
  body.products-vegan-vitamin-d2-1000-iu-drops section#key-ingredients ul#blue-boxes li:nth-child(2) .label-container img {
    width: 72%;
  }
  body.products-ddrops-baby-probiotic section#section-three #how-to-slider li:nth-child(4) svg,
  body.products-kids-probiotic-drops section#section-three #how-to-slider li:nth-child(4) svg {
    width: 68%;
  }
  body.products-bedtime-drops section#section-three #how-to-slider svg {
    width: 71%;
  }
}
body.products-kids-probiotic-drops section#section-one #product-difference-list li .diff-text p {
  color: #BB3E96;
}

body.products-kids-probiotic-drops aside.right .product-buttons a:nth-child(1) {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
}
body.products-kids-probiotic-drops aside.right .product-buttons a:nth-child(2) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
}

/* Search Bar
--------------------------------------------- */
#mobile-search input.search-submit {
  display: none;
}
#mobile-search input.search-field {
  background-color: white;
  border: 1px solid #0080c6;
  border-radius: 15px;
  box-shadow: none;
  background-image: url("./img/search_icon.svg");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
}
#mobile-search input.search-field::placeholder {
  color: #0080c6;
}

#search-bar-desktop {
  width: 100%;
  top: var(--header-height);
  transform: translateY(calc(-1 * var(--search-bar-height)));
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
#search-bar-desktop .container-xl {
  padding: 2rem;
}
#search-bar-desktop input[type=submit] {
  display: none;
}

body.search-active #search-bar-desktop {
  visibility: visible;
  transform: translate(0);
  transition-delay: 0s, 0s;
}
body.search-active button#search-button[aria-expanded=true] svg {
  stroke: #ff901d;
}

#search-button {
  cursor: pointer;
}

body.mobile-nav-active .searchwp-live-search-results-showing {
  border-radius: 15px;
  background-color: #d3efff;
}

.searchwp-live-search-result .searchwp-live-search-result--title a {
  color: black;
  font-weight: 500;
}

/* Search Page
--------------------------------------------- */
.page-search h1.page-title {
  padding-top: clamp(3rem, 2.5146rem + 2.0712vw, 5rem);
}
.page-search h1.page-title span {
  color: #0080c6;
}
.page-search h2 {
  font-weight: 700;
}
.page-search #search-results {
  margin: 2rem auto;
}
.page-search #search-results .img-place {
  position: relative;
}
.page-search #search-results .img-place .product-circle-back {
  display: block;
  width: 70%;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: rgba(211, 239, 255, 0.7137254902);
  position: absolute;
  z-index: 0;
  top: 0.8rem;
  left: 0;
}
.page-search #search-results .img-place img.product {
  position: relative;
}
.page-search #search-results span {
  color: #002d73;
  display: block;
  font-weight: 700;
  text-align: center;
  margin: 0.5rem auto 0 auto;
  line-height: 1.2;
  text-wrap-style: balance;
  max-width: 12rem;
  font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
}
.page-search #search-results .product-list-container {
  margin-bottom: clamp(1.5rem, 1.1359rem + 1.5534vw, 3rem);
  width: 49.4%;
  display: inline-block;
  vertical-align: top;
}
@media screen and (min-width: 768px) {
  .page-search #search-results .product-list-container {
    width: 31.9%;
  }
}
@media screen and (min-width: 1024px) {
  .page-search #search-results .product-list-container {
    width: 24.5%;
  }
}
.page-search #search-results .product-list-container .glsr {
  transform: scale(0.8);
}
.page-search #search-results .product-list-container .glsr .glsr-summary {
  justify-content: center;
}
.page-search #search-pages {
  margin-bottom: clamp(3rem, 2.5146rem + 2.0712vw, 5rem);
}
@media screen and (min-width: 768px) {
  .page-search #search-pages .page-result {
    width: 49.5%;
    display: inline-block;
    vertical-align: top;
  }
}
@media screen and (min-width: 1024px) {
  .page-search #search-pages .page-result {
    width: 24.5%;
  }
}
.page-search #search-pages img.featured {
  border-radius: 25px;
  height: auto;
}
.page-search #search-pages a {
  color: #002d73;
}
@media screen and (min-width: 768px) {
  .page-search #search-pages a {
    display: grid;
    gap: 1rem;
  }
}
.page-search #search-pages a span {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 700;
  padding: 0.5rem 0 0 0;
  font-size: clamp(1rem, 0.7928rem + 0.884vw, 1.5rem);
}
@media screen and (min-width: 768px) {
  .page-search #search-pages a span {
    padding: 0;
    text-align: left;
    place-content: center;
  }
}

/* Footer
--------------------------------------------- */
footer .content {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
footer .content .stacks {
  flex-direction: column;
}
footer #footer-navigation {
  background-position: right bottom 3rem;
  background-size: 24vw;
  background-repeat: no-repeat;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  footer #footer-navigation {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
  }
}
footer #footer-navigation nav {
  flex: 1 1 50%;
  margin-bottom: 3rem;
}
footer #footer-navigation nav h6 {
  color: white;
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  footer .footer-split {
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr auto;
  }
  footer .footer-split #footer-social {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    margin: -1rem 0 0 0;
  }
  footer .footer-split #footer-disclaimer {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
  }
}
footer #footer-social {
  margin-bottom: 3rem;
}
footer #footer-social-nav {
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 65%;
  max-width: 250px;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  footer #footer-social-nav {
    margin: 0 0 0 auto;
    width: 100%;
    max-width: 180px;
  }
}
footer #footer-social-nav li a {
  display: grid;
  place-content: center;
}
footer #footer-social-nav li a img {
  transition: transform 0.3s ease;
}
footer #footer-social-nav li a:hover img {
  transform: rotate(15deg) scale(1.2);
}
footer #footer-disclaimer p {
  color: white;
  font-size: 0.85rem;
  line-height: 1.3;
  margin-bottom: 1rem;
  font-weight: 300;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  footer #footer-disclaimer p br {
    display: none;
  }
}
footer #footer-disclaimer p:last-of-type {
  margin-bottom: 0;
}

hr {
  border: 0;
  height: 0;
  width: 100%;
  margin-bottom: calc(5rem - clamp(2rem, 1.7573rem + 1.0356vw, 3rem));
  border-top: 1px solid white;
}/*# sourceMappingURL=style.css.map */