/** Shopify CDN: Minification failed

Line 7758:12 Expected "]" to go with "["
Line 7758:18 Unexpected "]"
Line 7766:12 Expected "]" to go with "["
Line 7766:18 Unexpected "]"
Line 7770:12 Expected "]" to go with "["
Line 7770:18 Unexpected "]"
Line 8663:12 Expected "]" to go with "["
Line 8663:26 Unexpected "]"
Line 8667:12 Expected "]" to go with "["
Line 8667:26 Unexpected "]"
... and 2 more hidden warnings

**/
/*
! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: currentColor; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/

html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Arial, sans-serif; /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/*
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;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-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; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-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; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::-webkit-backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
.container {
  width: 100%;
}
.\!container {
  width: 100% !important;
}
@media (min-width: 64.0625rem) {

  .container {
    max-width: 64.0625rem;
  }

  .\!container {
    max-width: 64.0625rem !important;
  }
}
@media (min-width: 340px) {

  .container {
    max-width: 340px;
  }

  .\!container {
    max-width: 340px !important;
  }
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }

  .\!container {
    max-width: 640px !important;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }

  .\!container {
    max-width: 768px !important;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }

  .\!container {
    max-width: 1280px !important;
  }
}
@media (min-width: 1386px) {

  .container {
    max-width: 1386px;
  }

  .\!container {
    max-width: 1386px !important;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }

  .\!container {
    max-width: 1536px !important;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.\!sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}
.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.top-0 {
  top: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.-left-full {
  left: -100%;
}
.left-full {
  left: 100%;
}
.top-1\/2 {
  top: 50%;
}
.right-6 {
  right: 1.5rem;
}
.top-0\.5 {
  top: 0.125rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-0 {
  right: 0px;
}
.right-\[-26rem\] {
  right: -26rem;
}
.right-full {
  right: 100%;
}
.top-4 {
  top: 1rem;
}
.left-4 {
  left: 1rem;
}
.bottom-\[calc\(100\%\+0\.75rem\)\] {
  bottom: calc(100% + 0.75rem);
}
.-left-4 {
  left: -1rem;
}
.left-20 {
  left: 5rem;
}
.right-\[-29\.25rem\] {
  right: -29.25rem;
}
.right-\[0\.1875rem\] {
  right: 0.1875rem;
}
.top-1 {
  top: 0.25rem;
}
.right-1 {
  right: 0.25rem;
}
.right-1\/4 {
  right: 25%;
}
.-bottom-7 {
  bottom: -1.75rem;
}
.-bottom-9 {
  bottom: -2.25rem;
}
.left-1\/2 {
  left: 50%;
}
.-top-32 {
  top: -8rem;
}
.top-2\/4 {
  top: 50%;
}
.left-2\/4 {
  left: 50%;
}
.top-\[6\.1rem\] {
  top: 6.1rem;
}
.bottom-\[1\.75rem\] {
  bottom: 1.75rem;
}
.left-\[-100vw\] {
  left: -100vw;
}
.right-\[-36rem\] {
  right: -36rem;
}
.right-\[-30rem\] {
  right: -30rem;
}
.right-\[-36\.5rem\] {
  right: -36.5rem;
}
.top-full {
  top: 100%;
}
.bottom-\[calc\(100\%\+0\.5rem\)\] {
  bottom: calc(100% + 0.5rem);
}
.-top-1 {
  top: -0.25rem;
}
.-right-1 {
  right: -0.25rem;
}
.bottom-4 {
  bottom: 1rem;
}
.right-4 {
  right: 1rem;
}
.bottom-full {
  bottom: 100%;
}
.left-\[55\%\] {
  left: 55%;
}
.isolate {
  isolation: isolate;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[200\] {
  z-index: 200;
}
.z-\[101\] {
  z-index: 101;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[2\] {
  z-index: 2;
}
.z-\[3\] {
  z-index: 3;
}
.z-20 {
  z-index: 20;
}
.z-\[5\] {
  z-index: 5;
}
.z-\[11\] {
  z-index: 11;
}
.order-\[0\] {
  order: 0;
}
.order-1 {
  order: 1;
}
.order-last {
  order: 9999;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-start-1 {
  grid-column-start: 1;
}
.col-end-3 {
  grid-column-end: 3;
}
.float-left {
  float: left;
}
.\!m-0 {
  margin: 0px !important;
}
.m-0 {
  margin: 0px;
}
.m-auto {
  margin: auto;
}
.m-2 {
  margin: 0.5rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.-my-3 {
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mt-10 {
  margin-top: 2.5rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mt-px {
  margin-top: 1px;
}
.ml-4 {
  margin-left: 1rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.\!mt-1 {
  margin-top: 0.25rem !important;
}
.\!mb-0 {
  margin-bottom: 0px !important;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mb-11 {
  margin-bottom: 2.75rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mr-5 {
  margin-right: 1.25rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mr-8 {
  margin-right: 2rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-36 {
  margin-top: 9rem;
}
.mt-0 {
  margin-top: 0px;
}
.ml-2\.5 {
  margin-left: 0.625rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.mr-6 {
  margin-right: 1.5rem;
}
.mt-\[3\.75rem\] {
  margin-top: 3.75rem;
}
.mt-\[6\.25rem\] {
  margin-top: 6.25rem;
}
.mb-19 {
  margin-bottom: 76px;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-\[2\.125rem\] {
  margin-bottom: 2.125rem;
}
.-ml-2 {
  margin-left: -0.5rem;
}
.-mr-2 {
  margin-right: -0.5rem;
}
.mt-\[2\.75rem\] {
  margin-top: 2.75rem;
}
.mt-\[3\.25rem\] {
  margin-top: 3.25rem;
}
.mr-12 {
  margin-right: 3rem;
}
.mb-\[0\.375rem\] {
  margin-bottom: 0.375rem;
}
.mb-\[1\.1875rem\] {
  margin-bottom: 1.1875rem;
}
.mb-\[2\.375rem\] {
  margin-bottom: 2.375rem;
}
.mt-\[1\.125rem\] {
  margin-top: 1.125rem;
}
.mb-\[22px\] {
  margin-bottom: 22px;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mr-8 {
  margin-right: -2rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mb-\[1\.375rem\] {
  margin-bottom: 1.375rem;
}
.ml-8 {
  margin-left: 2rem;
}
.mb-auto {
  margin-bottom: auto;
}
.mt-auto {
  margin-top: auto;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.mt-12 {
  margin-top: 3rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mr-2\.5 {
  margin-right: 0.625rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mb-\[1\.625rem\] {
  margin-bottom: 1.625rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.ml-0 {
  margin-left: 0px;
}
.ml-\[92px\] {
  margin-left: 92px;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.\!table {
  display: table !important;
}
.table-cell {
  display: table-cell;
}
.flow-root {
  display: flow-root;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-4 {
  height: 1rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-2 {
  height: 0.5rem;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-0 {
  height: 0px;
}
.h-screen {
  height: 100vh;
}
.h-full {
  height: 100%;
}
.h-20 {
  height: 5rem;
}
.h-12 {
  height: 3rem;
}
.h-\[70vh\] {
  height: 70vh;
}
.h-\[38px\] {
  height: 38px;
}
.h-8 {
  height: 2rem;
}
.h-5 {
  height: 1.25rem;
}
.h-\[6\.25rem\] {
  height: 6.25rem;
}
.h-\[3\.75rem\] {
  height: 3.75rem;
}
.h-\[2\.25rem\] {
  height: 2.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-\[0\.875rem\] {
  height: 0.875rem;
}
.h-\[0\.1875rem\] {
  height: 0.1875rem;
}
.h-10\.5 {
  height: 42px;
}
.h-10 {
  height: 2.5rem;
}
.h-\[2\.75rem\] {
  height: 2.75rem;
}
.h-\[1\.25rem\] {
  height: 1.25rem;
}
.h-\[1\.125rem\] {
  height: 1.125rem;
}
.h-\[1\.5625rem\] {
  height: 1.5625rem;
}
.h-\[1\.625rem\] {
  height: 1.625rem;
}
.h-\[3\.125rem\] {
  height: 3.125rem;
}
.h-\[5\.625rem\] {
  height: 5.625rem;
}
.h-\[calc\(100vh-100\%\)\] {
  height: calc(100vh - 100%);
}
.h-\[100\.2\%\] {
  height: 100.2%;
}
.h-9 {
  height: 2.25rem;
}
.h-\[15\.875rem\] {
  height: 15.875rem;
}
.h-\[10\.5rem\] {
  height: 10.5rem;
}
.h-\[0\.625rem\] {
  height: 0.625rem;
}
.h-\[3\.5rem\] {
  height: 3.5rem;
}
.h-\[5rem\] {
  height: 5rem;
}
.h-32 {
  height: 8rem;
}
.h-\[1\.32rem\] {
  height: 1.32rem;
}
.h-\[4\.5rem\] {
  height: 4.5rem;
}
.h-1\/2 {
  height: 50%;
}
.h-1\/3 {
  height: 33.333333%;
}
.h-\[100vw\] {
  height: 100vw;
}
.h-\[26px\] {
  height: 26px;
}
.h-1 {
  height: 0.25rem;
}
.h-3 {
  height: 0.75rem;
}
.h-\[48px\] {
  height: 48px;
}
.\!h-4 {
  height: 1rem !important;
}
.h-\[14px\] {
  height: 14px;
}
.max-h-\[-webkit-fill-available\] {
  max-height: -webkit-fill-available;
}
.max-h-screen {
  max-height: 100vh;
}
.max-h-5\.5 {
  max-height: 22px;
}
.max-h-5 {
  max-height: 1.25rem;
}
.max-h-\[4\.5rem\] {
  max-height: 4.5rem;
}
.max-h-\[23rem\] {
  max-height: 23rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-\[14rem\] {
  max-height: 14rem;
}
.min-h-\[19rem\] {
  min-height: 19rem;
}
.min-h-\[10rem\] {
  min-height: 10rem;
}
.min-h-\[3rem\] {
  min-height: 3rem;
}
.min-h-\[40px\] {
  min-height: 40px;
}
.w-screen {
  width: 100vw;
}
.w-full {
  width: 100%;
}
.w-1\/2 {
  width: 50%;
}
.w-\[90vw\] {
  width: 90vw;
}
.w-\[10vw\] {
  width: 10vw;
}
.w-4 {
  width: 1rem;
}
.w-6 {
  width: 1.5rem;
}
.w-8 {
  width: 2rem;
}
.w-20 {
  width: 5rem;
}
.w-3 {
  width: 0.75rem;
}
.w-12 {
  width: 3rem;
}
.w-\[26rem\] {
  width: 26rem;
}
.w-\[83px\] {
  width: 83px;
}
.w-\[9\.375rem\] {
  width: 9.375rem;
}
.w-5 {
  width: 1.25rem;
}
.w-\[calc\(100\%\+2rem\)\] {
  width: calc(100% + 2rem);
}
.w-7 {
  width: 1.75rem;
}
.w-\[0\.875rem\] {
  width: 0.875rem;
}
.w-11\/12 {
  width: 91.666667%;
}
.w-6\/12 {
  width: 50%;
}
.w-\[38\.356\%\] {
  width: 38.356%;
}
.w-4\/12 {
  width: 33.333333%;
}
.w-\[2\.875rem\] {
  width: 2.875rem;
}
.w-10\.5 {
  width: 42px;
}
.w-10 {
  width: 2.5rem;
}
.w-max {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.w-\[240px\] {
  width: 240px;
}
.w-\[2\.75rem\] {
  width: 2.75rem;
}
.w-\[0\.0625rem\] {
  width: 0.0625rem;
}
.w-\[1\.125rem\] {
  width: 1.125rem;
}
.w-\[5\.625rem\] {
  width: 5.625rem;
}
.w-\[6\.25rem\] {
  width: 6.25rem;
}
.w-\[12\.125rem\] {
  width: 12.125rem;
}
.w-\[20rem\] {
  width: 20rem;
}
.w-\[21\.5625rem\] {
  width: 21.5625rem;
}
.w-\[23\.25rem\] {
  width: 23.25rem;
}
.w-\[30rem\] {
  width: 30rem;
}
.w-\[36\.75rem\] {
  width: 36.75rem;
}
.w-\[45\.625rem\] {
  width: 45.625rem;
}
.w-1\/4 {
  width: 25%;
}
.w-\[calc\(100\%-23\.25rem\)\] {
  width: calc(100% - 23.25rem);
}
.w-\[calc\(100\%-33\.5625rem\)\] {
  width: calc(100% - 33.5625rem);
}
.w-\[29\.25rem\] {
  width: 29.25rem;
}
.w-\[36\.5rem\] {
  width: 36.5rem;
}
.w-\[10\.5rem\] {
  width: 10.5rem;
}
.w-\[1\.25rem\] {
  width: 1.25rem;
}
.w-\[3\.5rem\] {
  width: 3.5rem;
}
.w-\[5rem\] {
  width: 5rem;
}
.w-\[1\.32rem\] {
  width: 1.32rem;
}
.w-\[4\.5rem\] {
  width: 4.5rem;
}
.w-2 {
  width: 0.5rem;
}
.w-\[200vw\] {
  width: 200vw;
}
.w-9 {
  width: 2.25rem;
}
.w-\[11rem\] {
  width: 11rem;
}
.w-\[103px\] {
  width: 103px;
}
.w-3\/4 {
  width: 75%;
}
.w-\[90px\] {
  width: 90px;
}
.\!w-\[212px\] {
  width: 212px !important;
}
.w-\[15px\] {
  width: 15px;
}
.w-\[260px\] {
  width: 260px;
}
.min-w-\[13rem\] {
  min-width: 13rem;
}
.min-w-\[70\%\] {
  min-width: 70%;
}
.min-w-\[9rem\] {
  min-width: 9rem;
}
.min-w-\[10rem\] {
  min-width: 10rem;
}
.\!min-w-0 {
  min-width: 0px !important;
}
.min-w-\[11rem\] {
  min-width: 11rem;
}
.min-w-\[17rem\] {
  min-width: 17rem;
}
.min-w-\[3rem\] {
  min-width: 3rem;
}
.min-w-\[1rem\] {
  min-width: 1rem;
}
.min-w-full {
  min-width: 100%;
}
.min-w-\[16rem\] {
  min-width: 16rem;
}
.min-w-\[30rem\] {
  min-width: 30rem;
}
.min-w-\[6rem\] {
  min-width: 6rem;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-max {
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
.min-w-\[170px\] {
  min-width: 170px;
}
.min-w-\[11\.875rem\] {
  min-width: 11.875rem;
}
.max-w-\[100vw\] {
  max-width: 100vw;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[85\.5rem\] {
  max-width: 85.5rem;
}
.max-w-\[33\.5rem\] {
  max-width: 33.5rem;
}
.max-w-\[14\.0625rem\] {
  max-width: 14.0625rem;
}
.max-w-\[85rem\] {
  max-width: 85rem;
}
.max-w-\[20rem\] {
  max-width: 20rem;
}
.max-w-\[26\.5rem\] {
  max-width: 26.5rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-\[31\.75rem\] {
  max-width: 31.75rem;
}
.max-w-\[15\.1875rem\] {
  max-width: 15.1875rem;
}
.max-w-fit {
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[12rem\] {
  max-width: 12rem;
}
.max-w-\[19\.5rem\] {
  max-width: 19.5rem;
}
.max-w-\[50rem\] {
  max-width: 50rem;
}
.max-w-\[30rem\] {
  max-width: 30rem;
}
.max-w-\[10\.25rem\] {
  max-width: 10.25rem;
}
.max-w-\[19\.9375rem\] {
  max-width: 19.9375rem;
}
.max-w-\[20\.625rem\] {
  max-width: 20.625rem;
}
.max-w-\[24rem\] {
  max-width: 24rem;
}
.max-w-\[33\.5625rem\] {
  max-width: 33.5625rem;
}
.max-w-\[34\.5625rem\] {
  max-width: 34.5625rem;
}
.max-w-\[37rem\] {
  max-width: 37rem;
}
.max-w-\[54\.5rem\] {
  max-width: 54.5rem;
}
.max-w-\[56rem\] {
  max-width: 56rem;
}
.max-w-\[calc\(50vw\+14rem\)\] {
  max-width: calc(50vw + 14rem);
}
.max-w-\[23rem\] {
  max-width: 23rem;
}
.max-w-\[815px\] {
  max-width: 815px;
}
.max-w-\[11rem\] {
  max-width: 11rem;
}
.max-w-\[50\%\] {
  max-width: 50%;
}
.max-w-\[80\%\] {
  max-width: 80%;
}
.max-w-\[100\%\] {
  max-width: 100%;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-\[225px\] {
  max-width: 225px;
}
.max-w-\[87vw\] {
  max-width: 87vw;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-left {
  transform-origin: left;
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-2\/4 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1\/2 {
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-180 {
  --tw-rotate: -180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[0\.8\] {
  --tw-scale-x: 0.8;
  --tw-scale-y: 0.8;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-y-\[-1\] {
  --tw-scale-y: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-y-100 {
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-x-\[-1\] {
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@-webkit-keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}
@-webkit-keyframes pulse {

  50% {
    opacity: .5;
  }
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
          animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cursor-grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.\!cursor-text {
  cursor: text !important;
}
.cursor-default {
  cursor: default;
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.touch-none {
  touch-action: none;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.snap-center {
  scroll-snap-align: center;
}
.list-none {
  list-style-type: none;
}
.list-disc {
  list-style-type: disc;
}
.grid-flow-col {
  grid-auto-flow: column;
}
.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-none {
  grid-template-columns: none;
}
.grid-cols-page {
  grid-template-columns: 23.25rem 1fr;
}
.grid-cols-customizer {
  grid-template-columns: 1fr 36.5rem;
}
.grid-cols-customizer-tiles {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.grid-cols-nutrition-facts {
  grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
}
.grid-cols-buybox {
  grid-template-columns: 1fr 26.75rem;
}
.grid-cols-\[repeat\(6\2c _minmax\(3\.15rem\2c _1fr\)\)\] {
  grid-template-columns: repeat(6, minmax(3.15rem, 1fr));
}
.grid-rows-auto {
  grid-template-rows: auto auto;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-0 {
  gap: 0px;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-x-20 {
  -moz-column-gap: 5rem;
       column-gap: 5rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-y-10 {
  row-gap: 2.5rem;
}
.gap-y-6 {
  row-gap: 1.5rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-x-12 {
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-y-8 {
  row-gap: 2rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-\[100px\] {
  border-radius: 100px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-none {
  border-radius: 0px;
}
.\!rounded-none {
  border-radius: 0px !important;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-\[1\.5rem\] {
  border-radius: 1.5rem;
}
.rounded-\[\.75rem\] {
  border-radius: .75rem;
}
.rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.border {
  border-width: 1px;
}
.border-4 {
  border-width: 4px;
}
.border-2 {
  border-width: 2px;
}
.\!border-0 {
  border-width: 0px !important;
}
.border-0 {
  border-width: 0px;
}
.\!border {
  border-width: 1px !important;
}
.border-t {
  border-top-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l-0 {
  border-left-width: 0px;
}
.border-r-0 {
  border-right-width: 0px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-t-\[0\.0625rem\] {
  border-top-width: 0.0625rem;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-b-\[0\.125rem\] {
  border-bottom-width: 0.125rem;
}
.border-b-\[0\.0625rem\] {
  border-bottom-width: 0.0625rem;
}
.border-b-\[0\.1875rem\] {
  border-bottom-width: 0.1875rem;
}
.border-l {
  border-left-width: 1px;
}
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
}
.border-mid-grey {
  --tw-border-opacity: 1;
  border-color: rgba(217, 217, 217, var(--tw-border-opacity));
}
.border-red {
  --tw-border-opacity: 1;
  border-color: rgba(188, 34, 22, var(--tw-border-opacity));
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
}
.border-grey {
  --tw-border-opacity: 1;
  border-color: rgba(228, 228, 228, var(--tw-border-opacity));
}
.\!border-plain-naked {
  --tw-border-opacity: 1 !important;
  border-color: rgba(242, 242, 240, var(--tw-border-opacity)) !important;
}
.border-dark-grey {
  --tw-border-opacity: 1;
  border-color: rgba(87, 86, 86, var(--tw-border-opacity));
}
.border-slate-grey {
  --tw-border-opacity: 1;
  border-color: rgba(150, 148, 148, var(--tw-border-opacity));
}
.border-light-grey {
  --tw-border-opacity: 1;
  border-color: rgba(247, 247, 247, var(--tw-border-opacity));
}
.border-green {
  --tw-border-opacity: 1;
  border-color: rgba(25, 112, 52, var(--tw-border-opacity));
}
.border-transparent {
  border-color: transparent;
}
.border-moss {
  --tw-border-opacity: 1;
  border-color: rgba(45, 59, 39, var(--tw-border-opacity));
}
.border-white\/30 {
  border-color: rgba(255, 255, 255, 0.3);
}
.border-\[\#e4e4e4\] {
  --tw-border-opacity: 1;
  border-color: rgba(228, 228, 228, var(--tw-border-opacity));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
}
.bg-plain-naked {
  --tw-bg-opacity: 1;
  background-color: rgba(242, 242, 240, var(--tw-bg-opacity));
}
.bg-light-grey {
  --tw-bg-opacity: 1;
  background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
}
.bg-moss {
  --tw-bg-opacity: 1;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity));
}
.bg-slate-grey {
  --tw-bg-opacity: 1;
  background-color: rgba(150, 148, 148, var(--tw-bg-opacity));
}
.bg-red {
  --tw-bg-opacity: 1;
  background-color: rgba(188, 34, 22, var(--tw-bg-opacity));
}
.bg-transparent {
  background-color: transparent;
}
.\!bg-transparent {
  background-color: transparent !important;
}
.bg-dark-grey {
  --tw-bg-opacity: 1;
  background-color: rgba(87, 86, 86, var(--tw-bg-opacity));
}
.bg-grey {
  --tw-bg-opacity: 1;
  background-color: rgba(228, 228, 228, var(--tw-bg-opacity));
}
.bg-aztec-vanilla {
  --tw-bg-opacity: 1;
  background-color: rgba(244, 235, 219, var(--tw-bg-opacity));
}
.bg-dark-grey-paleo {
  --tw-bg-opacity: 1;
  background-color: rgba(44, 44, 46, var(--tw-bg-opacity));
}
.bg-theme-text {
  background-color: var(--text);
}
.bg-mustard {
  --tw-bg-opacity: 1;
  background-color: rgba(213, 149, 41, var(--tw-bg-opacity));
}
.bg-sage {
  --tw-bg-opacity: 1;
  background-color: rgba(152, 166, 147, var(--tw-bg-opacity));
}
.bg-ancient-cacao {
  --tw-bg-opacity: 1;
  background-color: rgba(46, 40, 33, var(--tw-bg-opacity));
}
.bg-mayan-mocha {
  --tw-bg-opacity: 1;
  background-color: rgba(116, 83, 29, var(--tw-bg-opacity));
}
.bg-cream {
  --tw-bg-opacity: 1;
  background-color: rgba(241, 230, 211, var(--tw-bg-opacity));
}
.bg-mocha-mint {
  --tw-bg-opacity: 1;
  background-color: rgba(137, 164, 94, var(--tw-bg-opacity));
}
.bg-sweet-potato {
  --tw-bg-opacity: 1;
  background-color: rgba(203, 83, 20, var(--tw-bg-opacity));
}
.bg-greens-powder {
  --tw-bg-opacity: 1;
  background-color: rgba(93, 118, 53, var(--tw-bg-opacity));
}
.bg-brand-staple {
  --tw-bg-opacity: 1;
  background-color: rgba(213, 149, 41, var(--tw-bg-opacity));
}
.bg-mid-grey {
  --tw-bg-opacity: 1;
  background-color: rgba(217, 217, 217, var(--tw-bg-opacity));
}
.bg-green {
  --tw-bg-opacity: 1;
  background-color: rgba(25, 112, 52, var(--tw-bg-opacity));
}
.bg-theme-tile-bg {
  background-color: var(--tile-bg);
}
.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1);
}
.bg-\[\#00000040\] {
  background-color: rgba(0,0,0,0.25098);
}
.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}
.bg-opacity-94 {
  --tw-bg-opacity: 0.94;
}
.bg-opacity-\[0\.25\] {
  --tw-bg-opacity: 0.25;
}
.bg-opacity-\[0\.36\] {
  --tw-bg-opacity: 0.36;
}
.bg-opacity-\[0\] {
  --tw-bg-opacity: 0;
}
.bg-opacity-0 {
  --tw-bg-opacity: 0;
}
.bg-opacity-\[0\.14\] {
  --tw-bg-opacity: 0.14;
}
.bg-opacity-25 {
  --tw-bg-opacity: 0.25;
}
.bg-opacity-\[0\.5\] {
  --tw-bg-opacity: 0.5;
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.bg-opacity-\[0\.75\] {
  --tw-bg-opacity: 0.75;
}
.bg-opacity-75 {
  --tw-bg-opacity: 0.75;
}
.bg-opacity-\[1\] {
  --tw-bg-opacity: 1;
}
.bg-opacity-100 {
  --tw-bg-opacity: 1;
}
.bg-opacity-80 {
  --tw-bg-opacity: 0.8;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-center {
  -o-object-position: center;
     object-position: center;
}
.p-3 {
  padding: 0.75rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-4 {
  padding: 1rem;
}
.\!p-0 {
  padding: 0px !important;
}
.p-1 {
  padding: 0.25rem;
}
.p-\[\.125rem\] {
  padding: .125rem;
}
.p-0 {
  padding: 0px;
}
.p-6 {
  padding: 1.5rem;
}
.p-\[5px\] {
  padding: 5px;
}
.p-\[10px\] {
  padding: 10px;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-\[0\.84375rem\] {
  padding-top: 0.84375rem;
  padding-bottom: 0.84375rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-\[4\.5rem\] {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.py-\[1\.125rem\] {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}
.px-\[3\.125rem\] {
  padding-left: 3.125rem;
  padding-right: 3.125rem;
}
.px-\[3\.75rem\] {
  padding-left: 3.75rem;
  padding-right: 3.75rem;
}
.py-\[5\.625rem\] {
  padding-top: 5.625rem;
  padding-bottom: 5.625rem;
}
.px-\[6\.75rem\] {
  padding-left: 6.75rem;
  padding-right: 6.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-\[3\.5rem\] {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-\[0\.875rem\] {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.\!px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.pt-8 {
  padding-top: 2rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pl-0 {
  padding-left: 0px;
}
.pt-4 {
  padding-top: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pt-px {
  padding-top: 1px;
}
.\!pr-8 {
  padding-right: 2rem !important;
}
.pb-\[132\%\] {
  padding-bottom: 132%;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pb-\[100\%\] {
  padding-bottom: 100%;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-0 {
  padding-top: 0px;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pr-7 {
  padding-right: 1.75rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pt-\[0\.5625rem\] {
  padding-top: 0.5625rem;
}
.pb-\[1\.09375rem\] {
  padding-bottom: 1.09375rem;
}
.pb-\[4\.6875rem\] {
  padding-bottom: 4.6875rem;
}
.pb-\[83\.835\%\] {
  padding-bottom: 83.835%;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pr-0 {
  padding-right: 0px;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pb-14 {
  padding-bottom: 3.5rem;
}
.pb-\[75\%\] {
  padding-bottom: 75%;
}
.pt-\[2\.875rem\] {
  padding-top: 2.875rem;
}
.pr-\[3\.125rem\] {
  padding-right: 3.125rem;
}
.pl-\[3\.75rem\] {
  padding-left: 3.75rem;
}
.pr-\[3\.75rem\] {
  padding-right: 3.75rem;
}
.pb-\[4\.5rem\] {
  padding-bottom: 4.5rem;
}
.pb-\[5\.5rem\] {
  padding-bottom: 5.5rem;
}
.pt-\[5\.625rem\] {
  padding-top: 5.625rem;
}
.pb-\[5\.625rem\] {
  padding-bottom: 5.625rem;
}
.pl-\[7\.5rem\] {
  padding-left: 7.5rem;
}
.pb-\[66\.66\%\] {
  padding-bottom: 66.66%;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pt-\[1rem\] {
  padding-top: 1rem;
}
.pb-\[4rem\] {
  padding-bottom: 4rem;
}
.pt-\[2rem\] {
  padding-top: 2rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pb-\[1rem\] {
  padding-bottom: 1rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pl-\[5\.75rem\] {
  padding-left: 5.75rem;
}
.pl-14 {
  padding-left: 3.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.\!text-center {
  text-align: center !important;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.text-\[0rem\] {
  font-size: 0rem;
}
.text-\[0\.625rem\] {
  font-size: 0.625rem;
}
.text-\[0\.875rem\] {
  font-size: 0.875rem;
}
.text-\[1\.25rem\] {
  font-size: 1.25rem;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.\!text-\[10px\] {
  font-size: 10px !important;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[10px\] {
  font-size: 10px;
}
.\!text-\[13px\] {
  font-size: 13px !important;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.\!font-normal {
  font-weight: 400 !important;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.\!font-semibold {
  font-weight: 600 !important;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.leading-none {
  line-height: 1;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-\[1\.375rem\] {
  line-height: 1.375rem;
}
.leading-\[1\.625rem\] {
  line-height: 1.625rem;
}
.leading-\[1\.875rem\] {
  line-height: 1.875rem;
}
.leading-\[3rem\] {
  line-height: 3rem;
}
.leading-5 {
  line-height: 1.25rem;
}
.\!leading-3 {
  line-height: .75rem !important;
}
.leading-\[19px\] {
  line-height: 19px;
}
.\!leading-\[\.5rem\] {
  line-height: .5rem !important;
}
.tracking-\[0\.015rem\] {
  letter-spacing: 0.015rem;
}
.tracking-\[0\.12rem\] {
  letter-spacing: 0.12rem;
}
.tracking-\[0\.01375rem\] {
  letter-spacing: 0.01375rem;
}
.tracking-\[0\.015625rem\] {
  letter-spacing: 0.015625rem;
}
.tracking-\[0\.05rem\] {
  letter-spacing: 0.05rem;
}
.text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.text-dark-grey {
  --tw-text-opacity: 1;
  color: rgba(87, 86, 86, var(--tw-text-opacity));
}
.text-red {
  --tw-text-opacity: 1;
  color: rgba(188, 34, 22, var(--tw-text-opacity));
}
.text-dark-grey-paleo {
  --tw-text-opacity: 1;
  color: rgba(44, 44, 46, var(--tw-text-opacity));
}
.text-plain-naked {
  --tw-text-opacity: 1;
  color: rgba(242, 242, 240, var(--tw-text-opacity));
}
.\!text-plain-naked {
  --tw-text-opacity: 1 !important;
  color: rgba(242, 242, 240, var(--tw-text-opacity)) !important;
}
.text-theme-text {
  color: var(--text);
}
.text-theme-bg {
  color: var(--background);
}
.text-mid-grey {
  --tw-text-opacity: 1;
  color: rgba(217, 217, 217, var(--tw-text-opacity));
}
.text-light-grey {
  --tw-text-opacity: 1;
  color: rgba(247, 247, 247, var(--tw-text-opacity));
}
.text-moss {
  --tw-text-opacity: 1;
  color: rgba(45, 59, 39, var(--tw-text-opacity));
}
.text-mustard {
  --tw-text-opacity: 1;
  color: rgba(213, 149, 41, var(--tw-text-opacity));
}
.text-sage {
  --tw-text-opacity: 1;
  color: rgba(152, 166, 147, var(--tw-text-opacity));
}
.text-aztec-vanilla {
  --tw-text-opacity: 1;
  color: rgba(244, 235, 219, var(--tw-text-opacity));
}
.text-ancient-cacao {
  --tw-text-opacity: 1;
  color: rgba(46, 40, 33, var(--tw-text-opacity));
}
.text-mayan-mocha {
  --tw-text-opacity: 1;
  color: rgba(116, 83, 29, var(--tw-text-opacity));
}
.text-cream {
  --tw-text-opacity: 1;
  color: rgba(241, 230, 211, var(--tw-text-opacity));
}
.text-mocha-mint {
  --tw-text-opacity: 1;
  color: rgba(137, 164, 94, var(--tw-text-opacity));
}
.text-sweet-potato {
  --tw-text-opacity: 1;
  color: rgba(203, 83, 20, var(--tw-text-opacity));
}
.text-greens-powder {
  --tw-text-opacity: 1;
  color: rgba(93, 118, 53, var(--tw-text-opacity));
}
.text-brand-staple {
  --tw-text-opacity: 1;
  color: rgba(213, 149, 41, var(--tw-text-opacity));
}
.text-slate-grey {
  --tw-text-opacity: 1;
  color: rgba(150, 148, 148, var(--tw-text-opacity));
}
.text-grey {
  --tw-text-opacity: 1;
  color: rgba(228, 228, 228, var(--tw-text-opacity));
}
.text-green {
  --tw-text-opacity: 1;
  color: rgba(25, 112, 52, var(--tw-text-opacity));
}
.text-transparent {
  color: transparent;
}
.text-\[\#ff0000\] {
  --tw-text-opacity: 1;
  color: rgba(255, 0, 0, var(--tw-text-opacity));
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.line-through {
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}
.no-underline {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-0 {
  opacity: 0;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-100 {
  opacity: 1;
}
.\!shadow-none {
  --tw-shadow: 0 0 rgba(0,0,0,0) !important;
  --tw-shadow-colored: 0 0 rgba(0,0,0,0) !important;
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@-webkit-keyframes enter {

  from {
    opacity: 1;
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes enter {

  from {
    opacity: 1;
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@-webkit-keyframes exit {

  to {
    opacity: 1;
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: 1;
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  -webkit-animation-name: enter;
          animation-name: enter;
  -webkit-animation-duration: 150ms;
          animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-out {
  --tw-exit-opacity: 0;
}
.zoom-in {
  --tw-enter-scale: 0;
}
.slide-in-from-bottom-5 {
  --tw-enter-translate-y: 1.25rem;
}
.slide-in-from-bottom-2 {
  --tw-enter-translate-y: 0.5rem;
}
.duration-200 {
  -webkit-animation-duration: 200ms;
          animation-duration: 200ms;
}
.duration-300 {
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
}
.duration-700 {
  -webkit-animation-duration: 700ms;
          animation-duration: 700ms;
}
.duration-500 {
  -webkit-animation-duration: 500ms;
          animation-duration: 500ms;
}
.duration-1000 {
  -webkit-animation-duration: 1000ms;
          animation-duration: 1000ms;
}
.ease-in-out {
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.\[-webkit-tap-highlight-color\:transparent\] {
  -webkit-tap-highlight-color: transparent;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  max-width: 100vw;
}
/*font-family: Archivo;*/
.paleopro body {
  font-family: interstate, sans-serif;
}
.hide-preview-bar #preview-bar-iframe {
  display: none;
}
.visually-hidden {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.grow {
  flex-grow: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
/* rebuy is pure evil y they do this */
.mt-10.mt-10 {
  margin-top: 2.5rem;
}
.ios-height.ios-height {
  height: -webkit-fill-available;
}
.cursor-zoom-in {
  cursor: zoom-in;
}
#powrIframeLoader {
  display: none;
}
h1, 
.h1 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.5rem;
}
@media (min-width: 64.0625rem) {

  h1, 
.h1 {
    font-size: 3.375rem;
    line-height: 4rem;
  }
}
h2, 
.h2 {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 2.125rem;
}
@media (min-width: 64.0625rem) {

  h2, 
.h2 {
    font-size: 2.625rem;
    line-height: 3.375rem;
  }
}
h3, 
.h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
}
@media (min-width: 64.0625rem) {

  h3, 
.h3 {
    font-size: 2.125rem;
    line-height: 2.75rem;
  }
}
h4, 
.h4 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.875rem;
}
@media (min-width: 64.0625rem) {

  h4, 
.h4 {
    font-size: 1.75rem;
    line-height: 2.375rem;
  }
}
h5, 
.h5 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}
@media (min-width: 64.0625rem) {

  h5, 
.h5 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
h6, 
.h6 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.625rem;
}
@media (min-width: 64.0625rem) {

  h6, 
.h6 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
.sub-small {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}
.sub-regular {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375rem;
}
.sub-large {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
}
.caps-small {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.25rem;
  letter-spacing: 0.025rem;
}
.caps-regular {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.375rem;
  letter-spacing: 0.05rem;
}
.caps-large {
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.5rem;
  letter-spacing: 0.075rem;
}
p, 
.text {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-large {
  font-size: 1.125rem;
  line-height: 1.688rem;
}
.text-small {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xsmall {
  font-size: 0.8125rem;
  line-height: 1.125rem;
}
.p-inherit p {
  color: inherit;
  font-size: inherit;
}
.paleopro {
  font-family: interstate, sans-serif;
  --tw-text-opacity: 1;
  color: rgba(44, 44, 46, var(--tw-text-opacity));
}
.paleopro h1, 
  .paleopro .h1 {
  font-size: 2rem;
}
.paleopro h1, 
  .paleopro .h1 {
  font-weight: 800;
}
.paleopro h1, 
  .paleopro .h1 {
  text-transform: uppercase;
}
.paleopro h1, 
  .paleopro .h1 {
  line-height: 120%;
}
@media (min-width: 64.0625rem) {

  .paleopro h1, 
  .paleopro .h1 {
    font-size: 4.1875rem;
  }
}
.paleopro h2, 
  .paleopro .h2 {
  font-size: 1.625rem;
}
.paleopro h2, 
  .paleopro .h2 {
  font-weight: 400;
}
.paleopro h2, 
  .paleopro .h2 {
  line-height: 120%;
}
@media (min-width: 64.0625rem) {

  .paleopro h2, 
  .paleopro .h2 {
    font-size: 3.125rem;
  }
}
.paleopro h3, 
  .paleopro .h3 {
  font-size: 1.5rem;
}
.paleopro h3, 
  .paleopro .h3 {
  font-weight: 400;
}
.paleopro h3, 
  .paleopro .h3 {
  line-height: 120%;
}
@media (min-width: 64.0625rem) {

  .paleopro h3, 
  .paleopro .h3 {
    font-size: 2.375rem;
  }
}
.paleopro h4, 
  .paleopro .h4 {
  font-size: 1.375rem;
}
.paleopro h4, 
  .paleopro .h4 {
  font-weight: 400;
}
.paleopro h4, 
  .paleopro .h4 {
  line-height: 120%;
}
@media (min-width: 64.0625rem) {

  .paleopro h4, 
  .paleopro .h4 {
    font-size: 1.75rem;
  }
}
.paleopro h5, 
  .paleopro .h5 {
  font-size: 1.25rem;
}
.paleopro h5, 
  .paleopro .h5 {
  font-weight: 400;
}
.paleopro h5, 
  .paleopro .h5 {
  line-height: 120%;
}
@media (min-width: 64.0625rem) {

  .paleopro h5, 
  .paleopro .h5 {
    font-size: 1.5rem;
  }
}
.paleopro h6, 
  .paleopro .h6 {
  font-size: 1.125rem;
}
.paleopro h6, 
  .paleopro .h6 {
  font-weight: 800;
}
.paleopro h6, 
  .paleopro .h6 {
  text-transform: uppercase;
}
.paleopro h6, 
  .paleopro .h6 {
  line-height: 120%;
}
.paleopro h6, 
  .paleopro .h6 {
  letter-spacing: 0.08em;
}
@media (min-width: 64.0625rem) {

  .paleopro h6, 
  .paleopro .h6 {
    font-size: 1.25rem;
  }
}
.paleopro .sub-small {
  font-size: .875rem;
}
.paleopro .sub-small {
  font-weight: 400;
}
.paleopro .sub-small {
  font-weight: 700;
}
.paleopro .sub-small {
  line-height: 1.05rem;
}
.paleopro .sub-regular {
  font-size: 1rem;
}
.paleopro .sub-regular {
  font-weight: 400;
}
.paleopro .sub-regular {
  font-weight: 700;
}
.paleopro .sub-regular {
  line-height: 1.2rem;
}
.paleopro .sub-large {
  font-size: 1.125rem;
}
.paleopro .sub-large {
  font-weight: 400;
}
.paleopro .sub-large {
  font-weight: 700;
}
.paleopro .sub-large {
  line-height: 1.35rem;
}
.paleopro .caps-small {
  font-size: .875rem;
}
.paleopro .caps-small {
  font-weight: 400;
}
.paleopro .caps-small {
  font-weight: 700;
}
.paleopro .caps-small {
  text-transform: uppercase;
}
.paleopro .caps-small {
  line-height: 1.05rem;
}
.paleopro .caps-regular {
  font-size: 1rem;
}
.paleopro .caps-regular {
  font-weight: 400;
}
.paleopro .caps-regular {
  font-weight: 700;
}
.paleopro .caps-regular {
  text-transform: uppercase;
}
.paleopro .caps-regular {
  line-height: 1.2rem;
}
.paleopro .caps-large {
  font-size: 1.125rem;
}
.paleopro .caps-large {
  font-weight: 400;
}
.paleopro .caps-large {
  font-weight: 700;
}
.paleopro .caps-large {
  text-transform: uppercase;
}
.paleopro .caps-large {
  line-height: 1.35rem;
}
.paleopro p, 
  .paleopro .text {
  font-size: 1rem;
}
.paleopro p, 
  .paleopro .text {
  line-height: 1.6rem;
}
.paleopro .text-large {
  font-size: 1.125rem;
}
.paleopro .text-large {
  line-height: 1.8rem;
}
.paleopro .text-small {
  font-size: 0.875rem;
}
.paleopro .text-small {
  line-height: 1.4rem;
}
.paleopro .text-xsmall {
  font-size: 0.8125rem;
}
.paleopro .text-xsmall {
  line-height: 1.3rem;
}
.accordion-item__title {
  width: 100%;
}
.accordion-item__title svg {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-animation-duration: 200ms;
          animation-duration: 200ms;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-item__title.active svg {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-animation-duration: 200ms;
          animation-duration: 200ms;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-item__text {
  display: none;
  overflow: auto;
}
.accordion-item__title.active + .accordion-item__text {
  display: block;
}
.accordion-item__text table {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.accordion-item__text th:first-of-type, 
.accordion-item__text td:first-of-type {
  width: 18.875rem;
  padding: 1rem;
}
.accordion-item__text th:first-of-type {
  padding-left: 0px;
  padding-bottom: 0.625rem;
}
.accordion-item__text th:not(:first-of-type), 
.accordion-item__text td:not(:first-of-type) {
  width: 9rem;
  min-width: auto;
  padding: 1rem;
  text-align: center;
}
.accordion-item__text th:not(:first-of-type) {
  padding-bottom: 0.625rem;
}
.accordion-item__text tr:nth-child(2n+1) {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.accordion-item__text th {
  --tw-bg-opacity: 1;
  background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.accordion-item__text td {
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.arrow-link {
  position: relative;
  display: flex;
  align-items: center;
}
.button {
  display: flex;
  min-width: 14rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.375rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1.5rem;
  letter-spacing: 0.05rem;
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.paleopro .button {
  border-radius: 0px;
}
.paleopro .button {
  --tw-border-opacity: 1;
  border-color: rgba(45, 59, 39, var(--tw-border-opacity));
}
.paleopro .button {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.paleopro .button {
  font-size: 1rem;
}
.paleopro .button {
  font-weight: 700;
}
.paleopro .button {
  text-transform: uppercase;
}
.paleopro .button {
  line-height: 1.2rem;
}
.paleopro .button {
  letter-spacing: 0em;
}
.button--short {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.paleopro .button--short {
  padding-top: .875rem;
  padding-bottom: .875rem;
}
.button.button--narrow {
  min-width: 0px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
@media (min-width: 64.0625rem) {

  .button.button--narrow {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.button--mobile-narrow {
  min-width: 0px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
@media (min-width: 64.0625rem) {

  .button--mobile-narrow {
    min-width: 14rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.button span {
  display: inline-block;
}
.button--secondary {
  --tw-bg-opacity: 1;
  background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.button--secondary:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.paleopro .button--secondary {
  --tw-bg-opacity: 1;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity));
}
.paleopro .button--secondary {
  --tw-text-opacity: 1;
  color: rgba(242, 242, 240, var(--tw-text-opacity));
}
.paleopro .button--secondary:hover {
  background-color: transparent;
}
.paleopro .button--secondary:hover {
  --tw-text-opacity: 1;
  color: rgba(45, 59, 39, var(--tw-text-opacity));
}
.button--secondary-dark {
  --tw-border-opacity: 1;
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.button--secondary-dark:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.paleopro .button--secondary-dark {
  --tw-border-opacity: 1;
  border-color: rgba(244, 235, 219, var(--tw-border-opacity));
}
.paleopro .button--secondary-dark {
  --tw-bg-opacity: 1;
  background-color: rgba(244, 235, 219, var(--tw-bg-opacity));
}
.paleopro .button--secondary-dark {
  --tw-text-opacity: 1;
  color: rgba(44, 44, 46, var(--tw-text-opacity));
}
.paleopro .button--secondary-dark:hover {
  background-color: transparent;
}
.paleopro .button--secondary-dark:hover {
  --tw-text-opacity: 1;
  color: rgba(244, 235, 219, var(--tw-text-opacity));
}
.button--tertiary {
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.button--tertiary:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.paleopro .button--tertiary {
  --tw-border-opacity: 1;
  border-color: rgba(45, 59, 39, var(--tw-border-opacity));
}
.paleopro .button--tertiary {
  --tw-text-opacity: 1;
  color: rgba(45, 59, 39, var(--tw-text-opacity));
}
.paleopro .button--tertiary:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity));
}
.paleopro .button--tertiary:hover {
  --tw-text-opacity: 1;
  color: rgba(242, 242, 240, var(--tw-text-opacity));
}
.button--tertiary-dark {
  --tw-border-opacity: 1;
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.button--tertiary-dark:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.paleopro .button--tertiary-dark {
  --tw-border-opacity: 1;
  border-color: rgba(244, 235, 219, var(--tw-border-opacity));
}
.paleopro .button--tertiary-dark {
  background-color: transparent;
}
.paleopro .button--tertiary-dark {
  --tw-text-opacity: 1;
  color: rgba(244, 235, 219, var(--tw-text-opacity));
}
.paleopro .button--tertiary-dark:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(244, 235, 219, var(--tw-bg-opacity));
}
.paleopro .button--tertiary-dark:hover {
  --tw-text-opacity: 1;
  color: rgba(44, 44, 46, var(--tw-text-opacity));
}
.button[disabled] {
  pointer-events: none;
  --tw-border-opacity: 1;
  border-color: rgba(217, 217, 217, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(217, 217, 217, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(87, 86, 86, var(--tw-text-opacity));
}
.paleopro .button[disabled] {
  --tw-border-opacity: 1;
  border-color: rgba(242, 242, 240, var(--tw-border-opacity));
}
.paleopro .button[disabled] {
  --tw-bg-opacity: 1;
  background-color: rgba(242, 242, 240, var(--tw-bg-opacity));
}
.paleopro .button[disabled] {
  --tw-text-opacity: 1;
  color: rgba(44, 44, 46, var(--tw-text-opacity));
}
.option-selectors input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
.option-selectors input[disabled="disabled"] + label {
  cursor: not-allowed;
  opacity: 0.5;
}
.option-selectors label:not(.color-option) {
  display: inline-block;
  min-width: 8.75rem;
  border-radius: 0.375rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgba(228, 228, 228, var(--tw-border-opacity));
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 2.2rem;
  padding-right: 2.2rem;
  text-align: center;
}
.option-selectors .color-option {
  margin-bottom: 0.75rem;
  margin-right: 0.75rem;
  display: inline-block;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 9999px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgba(228, 228, 228, var(--tw-border-opacity));
}
input[type="radio"]:checked + .color-option {
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
}
.option-selectors label:hover {
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
}
.option-selectors input[type="radio"]:focus + label {
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
}
.option-selectors input[type="radio"]:checked + label:not(.color-option) {
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
}
.atc-container select {
  min-width: 4rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
}
.selected-flavor {
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
}
.quantity-input.quantity-input {
  min-width: 3.25rem;
  max-width: 3.25rem;
  border-bottom-width: 0px;
  background-color: transparent;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  text-align: center;
}
@media (min-width: 64.0625rem) {

  .quantity-input.quantity-input {
    padding-left: 1rem;
  }
}
.button.klaviyo-bis-trigger {
  display: flex !important;
}
.flavor-selector[disabled] {
  cursor: not-allowed;
}
.paleopro .option-selectors input[type="radio"]:checked + label:not(.color-option) {
  --tw-bg-opacity: 1;
  background-color: rgba(242, 242, 240, var(--tw-bg-opacity));
}
.paleopro .quantity-input.quantity-input::-webkit-outer-spin-button,
  .paleopro .quantity-input.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
.paleopro .quantity-input.quantity-input {
    -moz-appearance: textfield;
  }
.ccontain {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 85rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.ccontain-med {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 78rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.ccontain-small {
  margin-left: auto;
  margin-right: auto;
  max-width: 60.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.content-wrapper p {
  color: inherit;
  font-size: inherit;
}
.clamp-3 {
  -webkit-line-clamp: 3;
}
details .filter-open-icon {
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
details[open] .filter-open-icon {
  --tw-scale-y: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.select-wrap.select-wrap--sort-by select {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 64.0625rem) {

  .select-wrap.select-wrap--sort-by select {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.select-wrap.select-wrap--sort-by:after {
  right: 1.25rem;
}
@media (min-width: 64.0625rem) {

  .select-wrap.select-wrap--sort-by:after {
    right: 0px;
  }
}
.product-info-modal h3, 
.product-info-modal h4, 
.product-info-modal h5 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.625rem;
}
@media (min-width: 64.0625rem) {

  .product-info-modal h3, 
.product-info-modal h4, 
.product-info-modal h5 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
.filter-button {
  float:right;
}
/* The footer is a sticky, composited bar whose buttons re-render mid-tap
   (Next/Previous swap panes under the finger). Mobile Safari can strand the
   tap-highlight overlay on the old node or paint the button background at a
   stale, text-hugging size — the "highlight instead of a button" glitch.
   Each button gets its own paint layer and no tap overlay; scoped here so
   .button elsewhere is untouched. */
.step-footer .button {
  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
}
.filters.open {
  left: 0px;
}
.filters.open .filters-close {
  display: block;
}
@media (min-width: 64.0625rem) {

  .filters.open .filters-close {
    display: none;
  }
}
.filter-details::marker, 
.filter-summary::marker, 
.filter-details::-webkit-details-marker, 
.filter-summary::-webkit-details-marker {
  display: none;
}
.filter-summary::after {
  content: '+';
  position: absolute;
  right: 0px;
}
.filter-summary::after,
.filter-summary::before {
  content: '';
  position: absolute;
  right: 0px;
  top: 50%;
  height: 0.125rem;
  width: 1rem;
  transform-origin: center;
  --tw-translate-y: -50%;
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.filter-summary::before {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.filter-details[open] .filter-summary::before {
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.filter-details[open] .filter-summary::after {
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.price-slider {
  -webkit-appearance: none;
  pointer-events: none;
  height: 0.5rem;
  width: 100%;
  touch-action: none;
}
/* Input Thumb */
.price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  height: 1rem;
  width: 1rem;
  cursor: pointer;
  border-radius: 9999px;
  touch-action: auto;
}
/* Input Track */
.price-slider::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  pointer-events: none;
  border-width: 0px;
  touch-action: none;
}
.footer input[type="email"] {
  --tw-border-opacity: 1;
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
  background-color: transparent;
}
.footer .social-container a:first-of-type {
  margin-left: 0px;
}
.footer .footer-nav li {
  --tw-border-opacity: 1;
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
}
.footer .footer-nav .sub-large {
  font-weight: 400;
}
.footer .footer-nav .accordion-item__title {
  font-size: 1.25rem;
}
.right-footer-section {
  position: relative;
  z-index: 1;
}
html:not(.paleopro) .footer .menu-links li a:hover {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
html:not(.paleopro) .menu-links:hover > *:not(:hover) {
  --tw-text-opacity: 1;
  color: rgba(150, 148, 148, var(--tw-text-opacity));
}
.right-footer-section::before {
  --tw-bg-opacity: 1;
  background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
  content: '';
  position:absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100%;
  z-index: -1;
}
.paleopro .right-footer-section::before {
  --tw-bg-opacity: 1;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity));
}
.header-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
}
/* Mobile: trim the header's side padding so the icon row (now incl. the
   country flag) fits without the cart overflowing the right edge. */
@media (max-width: 1024px) {
  .header > .ccontain {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
/* Open Border country picker: keep the flag in line with the 25px header icons */
.header-icons .language-selector .selected-country-data {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.header-icons .language-selector .flag--root {
  display: block;
  width: 1.25rem;
  height: auto;
}
html:not(.paleopro) .header-icons:hover li > label:not(:hover), 
  html:not(.paleopro) .header-icons:hover li > a:not(:hover), 
  html:not(.paleopro) .header-icons:hover li > button:not(:hover) {
  --tw-text-opacity: 1;
  color: rgba(150, 148, 148, var(--tw-text-opacity));
}
html:not(.paleopro) .header-icons:hover li > button:not(:hover) span {
  --tw-bg-opacity: 1;
  background-color: rgba(150, 148, 148, var(--tw-bg-opacity));
}
.header-wrap .header {
  background-color: var(--background);
  box-shadow: var(--header-shadow);
}
.header-wrap.has-transparent.is-full .header {
  background-color: transparent;
  box-shadow: none;
}
.header-wrap.has-transparent.is-full .header:hover {
  background-color: var(--background);
  box-shadow: var(--header-shadow);
}
.header-wrap .discount-banner {
  max-height: 0px;
}
.header-wrap.scrolling-down {
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}
.header-wrap.is-full .header--transparent {
  background-color: transparent;
}
.header-wrap.is-full .discount-banner {
  max-height: 2.5rem;
}
.header-wrap.is-full.scrolling-down {
  opacity: 1;
}
.header .search-input {
  border-radius: 0.25rem;
  background-color: var(--accent);
  padding-right: 3.125rem;
}
.header .search-input:focus {
  outline-width: 1px;
  outline-style: solid;
  outline-color: var(--text);
}
.header .search-header-wrapper.active {
  max-width: 15rem;
  opacity: 1;
}
.header .search-header-wrapper.active .search-input {
  outline-width: 1px;
  outline-style: solid;
  outline-color: var(--text);
}
.boost-pfs-search-suggestion-mobile-top-panel {
  background-color: #F7F7F7 !important;
  height: 88px !important;
}
.boost-pfs-search-suggestion-mobile-top-panel #boost-pfs-search-box-mobile {
  height: 40px !important;
  border-radius: 4px !important;
  border: 1px solid #202020 !important;
}
.boost-pfs-search-suggestion-mobile-top-panel form {
  height: 88px !important;
}
.boost-pfs-search-suggestion-mobile-top-panel form {
  display: flex;
  align-items: center;
}
.boost-pfs-search-suggestion-mobile-top-panel .boost-pfs-search-btn-clear-suggestion {
  display: none;
}
.boost-pfs-search-suggestion-mobile-top-panel .boost-pfs-search-btn-close-suggestion {
  height: 52px !important;
}
.boost-pfs-search-suggestion-mobile-top-panel .boost-pfs-search-btn-close-suggestion:before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTggMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+MTlGMTQ3QzMtNTg3RS00MzE4LThBQ0QtODU0NzVFMjhERTU0QDJ4PC90aXRsZT4KICAgIDxnIGlkPSJIZWFkZXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJNLS0tU2VhcmNoLUhlYWRlci1EZWZhdWx0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjQuMDAwMDAwLCAtMzguMDAwMDAwKSIgZmlsbD0iIzIwMjAyMCIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0LjAwMDAwMCwgMjQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTktQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5LjAwMDAwMCwgMjAuNTAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC05LjAwMDAwMCwgLTIwLjUwMDAwMCkgdHJhbnNsYXRlKDAuMDAwMDAwLCAxNC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTEuNjQzMjk0OCw1LjQ3OTEyNDEzIEwxMS42NDMyOTQ4LDYuODIzNDgyNzYgQzExLjY0MzI5NDgsNy4wODk1ODQwOSAxMS40Mjc1NzcsNy4zMDUzMDE4NCAxMS4xNjE0NzU3LDcuMzA1MzAxODQgTDAuNDgxODE5MDc0LDcuMzA1MzAxODQgQzAuMjE1NzE3NzQ3LDcuMzA1MzAxODQgNi41MDM2MTEwM2UtMTYsNy4wODk1ODQwOSAwLDYuODIzNDgyNzYgTDAsNS40NzkxMjQxMyBDLTMuMjU4ODAxMzhlLTE3LDUuMjEzMDIyODEgMC4yMTU3MTc3NDcsNC45OTczMDUwNiAwLjQ4MTgxOTA3NCw0Ljk5NzMwNTA2IEwxMS4xNjE0NzU3LDQuOTk3MzA1MDYgQzExLjQyNzU3Nyw0Ljk5NzMwNTA2IDExLjY0MzI5NDgsNS4yMTMwMjI4MSAxMS42NDMyOTQ4LDUuNDc5MTI0MTMgWiIgaWQ9IkxpbmUtNC1Db3B5LTMiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuODM5MDI1OSw2LjgyNjQwMDAzIEwxMS4zMTM5NTMsMTIuODY0ODAwNyBDMTEuMTE5MTU4NSwxMy4wNDUwNjY0IDEwLjgyNDI3MzQsMTMuMDQ1MDY2NCAxMC42NTUzMDg4LDEyLjg2NDgwMDcgTDkuNzM3NDk2MDUsMTEuODg1NjAwNiBDOS41Njg1MzE0LDExLjcwNTMzNDggOS41ODk0NzA2MywxMS40MTMwNjYzIDkuNzg0MjY1MTMsMTEuMjMyODAwNSBMMTQuNTQ2MDMwOCw2LjgyNjE5MDkxIEMxNC43NDA4Mzc5LDYuNjQ1OTM4NjQgMTQuNzYxNzc3MSw2LjM1MzY3MDEgMTQuNTkyODEyNSw2LjE3MzQwNDM0IEwxMC40NjI0MzEyLDEuNzY3MTg2IEMxMC4yOTM0NDQsMS41ODY5NDExOSAxMC4zMTQzNzEsMS4yOTQ2NzI2NCAxMC41MDkxNTg1LDEuMTE0Mzk5NDMgTDExLjU2NzMwNTcsMC4xMzUxOTkzMjEgQzExLjc2MjEwMDIsLTAuMDQ1MDY2NDQwNCAxMi4wNTY5ODUyLC0wLjA0NTA2NjQ0MDQgMTIuMjI1OTQ5OSwwLjEzNTE5OTMyMSBMMTcuODg1Nzk0OSw2LjE3MzU5OTk3IEMxOC4wNTQ3NTk2LDYuMzUzODY1NzMgMTguMDMzODIwNCw2LjY0NjEzNDI3IDE3LjgzOTAyNTksNi44MjY0MDAwMyBaIiBpZD0iUGF0aC1Db3B5LTMiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) !important;
  left: 20px !important;
}
.boost-pfs-search-suggestion-mobile-top-panel .boost-pfs-search-btn-close-suggestion:before {
  background-repeat: no-repeat;
  background-position: center;
}
.boost-pfs-search-btn-clear-suggestion {
  top: 22px !important;
}
.boost-pfs-search-btn-clear-suggestion:after {
  display: none !important;
}
.boost-pfs-search-btn-clear-suggestion:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBpZD0iY2xvc2UtaWNvbiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJtMTMuNzY1IDUuMDI1LjAzMi4wMzJhLjUuNSAwIDAgMSAwIC43MDdsLTguMDMzIDguMDMzYS41LjUgMCAwIDEtLjcwNyAwbC0uMDMyLS4wMzJhLjUuNSAwIDAgMSAwLS43MDdsOC4wMzMtOC4wMzNhLjUuNSAwIDAgMSAuNzA3IDBabS0yLjY4MSA1LjMyIDIuNzEzIDIuNzEzYS41LjUgMCAwIDEgMCAuNzA3bC0uMDMyLjAzMmEuNS41IDAgMCAxLS43MDcgMGwtMi43MTMtMi43MTNhLjUuNSAwIDAgMSAwLS43MDdsLjAzMi0uMDMyYS41LjUgMCAwIDEgLjcwNyAwWm0tNS4zMi01LjMyIDIuNzEzIDIuNzEzYS41LjUgMCAwIDEgMCAuNzA3bC0uMDMyLjAzMmEuNS41IDAgMCAxLS43MDcgMEw1LjAyNSA1Ljc2NGEuNS41IDAgMCAxIDAtLjcwN2wuMDMyLS4wMzJhLjUuNSAwIDAgMSAuNzA3IDBaIiBmaWxsPSIjMjAyMDIwIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L2c+PC9zdmc+Cg==) !important;
  background-color: transparent !important;
  width: 30px !important;
  height: 30px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transform: none !important;
  top: 12px !important;
  right: 5px !important;
  background-size: 30px !important;
}
.boost-pfs-search-suggestion-header {
  color: #575656 !important;
  line-height: 24px !important;
  background-color: transparent !important;
}
.boost-pfs-search-suggestion-header {
  position: relative;
}
.boost-pfs-search-suggestion-header:after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background-color: #E4E4E4;
}
.boost-pfs-search-suggestion-item {
  padding-left: 10px !important;
  padding-right: 16px !important;
}
@media screen and (min-width: 1025px) {
  .boost-pfs-search-suggestion-group[aria-label="Recent searches"] {
    max-width: 33.33%;
  }
  .boost-pfs-search-suggestion-groups-others:empty {
    display: none;
  }
  .boost-pfs-search-suggestion-groups-others:not(.boost-pfs-search-suggestion-no-products)::before {
    content: '';
    position: absolute;
    display: block;
    left: 33.33%;
    width: 1px;
    height: 100%;
    background-color: #E4E4E4;
  }
}
.boost-pfs-search-suggestion-groups-pro {
  padding-left: 14px !important;
}
.boost-pfs-search-suggestion-mobile .boost-pfs-search-suggestion {
  background-color: #fff !important;
}
.boost-pfs-search-suggestion-mobile .boost-pfs-search-suggestion {
  padding: 19px 9px 0;
}
.boost-pfs-search-suggestion-mobile .boost-pfs-search-suggestion-header {
  text-align: left !important;
}
.boost-pfs-search-suggestion-mobile .boost-pfs-search-suggestion .boost-pfs-search-suggestion-item {
  border: none !important;
}
.boost-pfs-search-suggestion-mobile.boost-pfs-search-suggestion-wrapper {
  height: calc( 100% - 88px ) !important;
}
.boost-pfs-search-suggestion-mobile.boost-pfs-search-suggestion-wrapper#boost-pfs-search-suggestion-mobile {
  top: 88px !important;
}
.boost-pfs-search-suggestion-header-view-all {
  margin: 0 0 0 -14px !important;
  color: #fff !important;
  background-color: #202020 !important;
}
.boost-pfs-search-suggestion-header-view-all:after {
  display: none !important;
}
[class*=boost-pfs-search-suggestion-column-2-]:not(.boost-pfs-search-suggestion-mobile) .boost-pfs-search-suggestion-header-view-all a {
  color: #fff !important;
}
[class*=boost-pfs-search-suggestion-column-2-]:not(.boost-pfs-search-suggestion-mobile) .boost-pfs-search-suggestion-header-view-all a:hover,
.boost-pfs-search-suggestion-header-view-all:hover {
  background-color: #202020!important;
}
[class*=boost-pfs-search-suggestion-column-2-]:not(.boost-pfs-search-suggestion-mobile) .boost-pfs-search-suggestion-header-view-all a span {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTggMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+MDhBNjZFREMtN0QyNC00RTU5LUIzNzQtRDgzM0Q5Qzc3QkZEQDJ4PC90aXRsZT4KICAgIDxnIGlkPSJIZWFkZXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJELS0tU2VhcmNoLUhlYWRlci1SZXN1bHRzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIyNy4wMDAwMDAsIC00OTAuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQwNi4wMDAwMDAsIDExMi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xOS1Db3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgyMS4wMDAwMDAsIDM3OC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTEuNjQzMjk0OCw1LjQ3OTEyNDEzIEwxMS42NDMyOTQ4LDYuODIzNDgyNzYgQzExLjY0MzI5NDgsNy4wODk1ODQwOSAxMS40Mjc1NzcsNy4zMDUzMDE4NCAxMS4xNjE0NzU3LDcuMzA1MzAxODQgTDAuNDgxODE5MDc0LDcuMzA1MzAxODQgQzAuMjE1NzE3NzQ3LDcuMzA1MzAxODQgNi41MDM2MTEwM2UtMTYsNy4wODk1ODQwOSAwLDYuODIzNDgyNzYgTDAsNS40NzkxMjQxMyBDLTMuMjU4ODAxMzhlLTE3LDUuMjEzMDIyODEgMC4yMTU3MTc3NDcsNC45OTczMDUwNiAwLjQ4MTgxOTA3NCw0Ljk5NzMwNTA2IEwxMS4xNjE0NzU3LDQuOTk3MzA1MDYgQzExLjQyNzU3Nyw0Ljk5NzMwNTA2IDExLjY0MzI5NDgsNS4yMTMwMjI4MSAxMS42NDMyOTQ4LDUuNDc5MTI0MTMgWiIgaWQ9IkxpbmUtNC1Db3B5LTMiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuODM5MDI1OSw2LjgyNjQwMDAzIEwxMS4zMTM5NTMsMTIuODY0ODAwNyBDMTEuMTE5MTU4NSwxMy4wNDUwNjY0IDEwLjgyNDI3MzQsMTMuMDQ1MDY2NCAxMC42NTUzMDg4LDEyLjg2NDgwMDcgTDkuNzM3NDk2MDUsMTEuODg1NjAwNiBDOS41Njg1MzE0LDExLjcwNTMzNDggOS41ODk0NzA2MywxMS40MTMwNjYzIDkuNzg0MjY1MTMsMTEuMjMyODAwNSBMMTQuNTQ2MDMwOCw2LjgyNjE5MDkxIEMxNC43NDA4Mzc5LDYuNjQ1OTM4NjQgMTQuNzYxNzc3MSw2LjM1MzY3MDEgMTQuNTkyODEyNSw2LjE3MzQwNDM0IEwxMC40NjI0MzEyLDEuNzY3MTg2IEMxMC4yOTM0NDQsMS41ODY5NDExOSAxMC4zMTQzNzEsMS4yOTQ2NzI2NCAxMC41MDkxNTg1LDEuMTE0Mzk5NDMgTDExLjU2NzMwNTcsMC4xMzUxOTkzMjEgQzExLjc2MjEwMDIsLTAuMDQ1MDY2NDQwNCAxMi4wNTY5ODUyLC0wLjA0NTA2NjQ0MDQgMTIuMjI1OTQ5OSwwLjEzNTE5OTMyMSBMMTcuODg1Nzk0OSw2LjE3MzU5OTk3IEMxOC4wNTQ3NTk2LDYuMzUzODY1NzMgMTguMDMzODIwNCw2LjY0NjEzNDI3IDE3LjgzOTAyNTksNi44MjY0MDAwMyBaIiBpZD0iUGF0aC1Db3B5LTMiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) !important;
}
.boost-pfs-search-suggestion-header-view-all>a {
  color: #fff !important;
  text-decoration: none !important;
}
.boost-pfs-search-suggestion-mobile .boost-pfs-search-suggestion-header-view-all {
  padding-left: 24px !important;
  margin-top: 24px !important;
  margin: 24px -9px 0 -9px !important;
}
.boost-pfs-search-suggestion-product-vendor {
  font-size: 14px !important;
  color: #575656 !important;
}
.boost-pfs-search-suggestion-product-title {
  color: #202020 !important;
}
.paleopro [data-cart-indicator] {
  position: absolute;
}
.paleopro [data-cart-indicator] {
  right: 0.125rem;
}
.paleopro [data-cart-indicator] {
  top: 0.75rem;
}
.paleopro [data-cart-indicator] {
  display: flex;
}
.paleopro [data-cart-indicator] {
  height: 1rem;
}
.paleopro [data-cart-indicator] {
  width: 1rem;
}
.paleopro [data-cart-indicator] {
  align-items: center;
}
.paleopro [data-cart-indicator] {
  justify-content: center;
}
.paleopro [data-cart-indicator] {
  border-radius: 9999px;
}
.paleopro [data-cart-indicator] {
  --tw-bg-opacity: 1;
  background-color: rgba(213, 149, 41, var(--tw-bg-opacity));
}
.paleopro [data-cart-indicator] {
  padding: 0px;
}
.paleopro [data-cart-indicator] {
  font-size: .75rem;
}
.paleopro [data-cart-indicator] {
  font-weight: 700;
}
.paleopro [data-cart-indicator] {
  line-height: 1;
}
.paleopro [data-cart-indicator] {
  --tw-text-opacity: 1;
  color: rgba(44, 44, 46, var(--tw-text-opacity));
}
.paleopro .boost-pfs-search-suggestion-header-view-all {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity)) !important;
}
.paleopro .boost-pfs-search-suggestion-header-view-all {
  --tw-text-opacity: 1 !important;
  color: rgba(242, 242, 240, var(--tw-text-opacity)) !important;
}
.paleopro [class*=boost-pfs-search-suggestion-column-2-]:not(.boost-pfs-search-suggestion-mobile) .boost-pfs-search-suggestion-header-view-all a:hover, 
  .paleopro .boost-pfs-search-suggestion-header-view-all:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity)) !important;
}
.paleopro [class*=boost-pfs-search-suggestion-column-2-]:not(.boost-pfs-search-suggestion-mobile) .boost-pfs-search-suggestion-header-view-all a span {
    background-image: url("data:image/svg+xml; utf8, <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.02868 0.861888C5.28903 0.601539 5.71114 0.601539 5.97149 0.861888L10.6382 5.52855C10.8985 5.7889 10.8985 6.21101 10.6382 6.47136L5.97149 11.138C5.71114 11.3984 5.28903 11.3984 5.02868 11.138C4.76833 10.8777 4.76833 10.4556 5.02868 10.1952L8.55727 6.66663H0.833415C0.465225 6.66663 0.166748 6.36815 0.166748 5.99996C0.166748 5.63177 0.465225 5.33329 0.833415 5.33329H8.55727L5.02868 1.8047C4.76833 1.54435 4.76833 1.12224 5.02868 0.861888Z\" fill=\"%23F2F2F0\"/></svg>") !important;
  }
.paleopro .boost-pfs-search-suggestion-product-price .boost-pfs-search-suggestion-product-sale-price {
  --tw-text-opacity: 1;
  color: rgba(203, 83, 20, var(--tw-text-opacity));
}
.paleopro .boost-pfs-search-suggestion-item:hover, 
  .paleopro .boost-pfs-search-suggestion-item.selected {
  --tw-bg-opacity: 1;
  background-color: rgba(242, 242, 240, var(--tw-bg-opacity));
}
.paleopro .boost-pfs-search-suggestion-mobile-top-panel .boost-pfs-search-btn-close-suggestion:before {
    background-image: url("data:image/svg+xml; utf8, <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.29289 0.292893C7.68342 -0.0976311 8.31658 -0.0976311 8.70711 0.292893L15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L8.70711 15.7071C8.31658 16.0976 7.68342 16.0976 7.29289 15.7071C6.90237 15.3166 6.90237 14.6834 7.29289 14.2929L12.5858 9H1C0.447715 9 0 8.55228 0 8C0 7.44772 0.447715 7 1 7H12.5858L7.29289 1.70711C6.90237 1.31658 6.90237 0.683417 7.29289 0.292893Z\" fill=\"%232C2C2E\"/></svg>") !important;
  }
.paleopro .boost-pfs-search-suggestion-mobile-top-panel .boost-pfs-search-btn-close-suggestion:before {
    transform: rotate(180deg);
  }
.paleopro .boost-pfs-search-btn-clear-suggestion:before {
    background-image: url("data:image/svg+xml; utf8, <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.492845 0.292893C0.883369 -0.0976311 1.51653 -0.0976311 1.90706 0.292893L8.19995 6.58579L14.4928 0.292896C14.8834 -0.097628 15.5165 -0.0976278 15.9071 0.292896C16.2976 0.683421 16.2976 1.31659 15.9071 1.70711L9.61417 8L15.9071 14.2929C16.2976 14.6834 16.2976 15.3166 15.9071 15.7071C15.5165 16.0976 14.8834 16.0976 14.4928 15.7071L8.19995 9.41421L1.90706 15.7071C1.51653 16.0976 0.883369 16.0976 0.492844 15.7071C0.10232 15.3166 0.10232 14.6834 0.492844 14.2929L6.78574 8L0.492845 1.70711C0.102321 1.31658 0.102321 0.683418 0.492845 0.292893Z\" fill=\"%232C2C2E\"/></svg>") !important;
    width: 16px !important;
    height: 16px !important;
    background-size: 100% !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }
.paleopro .header .search-input {
  color: var(--text);
}
.paleopro [data-discount-banner] a:hover {
  --tw-text-opacity: 1;
  color: rgba(241, 230, 211, var(--tw-text-opacity));
}
input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgba(87, 86, 86, var(--tw-text-opacity));
}
input::placeholder {
  --tw-text-opacity: 1;
  color: rgba(87, 86, 86, var(--tw-text-opacity));
}
input[type="submit"] {
  cursor: pointer;
}
input[type="text"], 
input[type="number"], 
input[type="email"], 
input[type="password"], 
input[type="date"], 
input[type="tel"], 
input[type="search"] {
  min-width: 10rem;
  cursor: pointer;
  border-radius: 0px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.625rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.paleopro input[type="text"], .paleopro input[type="number"], .paleopro input[type="email"], .paleopro input[type="password"], .paleopro input[type="date"], .paleopro input[type="tel"], .paleopro input[type="search"] {
  --tw-border-opacity: 1;
  border-color: rgba(44, 44, 46, var(--tw-border-opacity));
}
.paleopro input[type="text"], .paleopro input[type="number"], .paleopro input[type="email"], .paleopro input[type="password"], .paleopro input[type="date"], .paleopro input[type="tel"], .paleopro input[type="search"] {
  padding-left: 1rem;
  padding-right: 1rem;
}
.paleopro input[type="text"], .paleopro input[type="number"], .paleopro input[type="email"], .paleopro input[type="password"], .paleopro input[type="date"], .paleopro input[type="tel"], .paleopro input[type="search"] {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.paleopro input[type="text"], .paleopro input[type="number"], .paleopro input[type="email"], .paleopro input[type="password"], .paleopro input[type="date"], .paleopro input[type="tel"], .paleopro input[type="search"] {
  --tw-text-opacity: 1;
  color: rgba(44, 44, 46, var(--tw-text-opacity));
}
input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button {
  opacity: 0 !important;
}
.paleopro input[type="text"], 
  .paleopro input[type="number"], 
  .paleopro input[type="email"], 
  .paleopro input[type="password"], 
  .paleopro input[type="date"], 
  .paleopro input[type="tel"] {
  position: relative;
}
.paleopro input[type="text"], 
  .paleopro input[type="number"], 
  .paleopro input[type="email"], 
  .paleopro input[type="password"], 
  .paleopro input[type="date"], 
  .paleopro input[type="tel"] {
  --tw-border-opacity: 1;
  border-color: rgba(44, 44, 46, var(--tw-border-opacity));
}
.paleopro input[type="text"], 
  .paleopro input[type="number"], 
  .paleopro input[type="email"], 
  .paleopro input[type="password"], 
  .paleopro input[type="date"], 
  .paleopro input[type="tel"] {
  padding-left: 1rem;
  padding-right: 1rem;
}
.paleopro input[type="text"], 
  .paleopro input[type="number"], 
  .paleopro input[type="email"], 
  .paleopro input[type="password"], 
  .paleopro input[type="date"], 
  .paleopro input[type="tel"] {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
textarea:-moz-placeholder-shown, input[type="text"]:-moz-placeholder-shown, input[type="number"]:-moz-placeholder-shown, input[type="email"]:-moz-placeholder-shown, input[type="date"]:-moz-placeholder-shown, input[type="tel"]:-moz-placeholder-shown {
}
textarea:placeholder-shown,
input[type="text"]:placeholder-shown,
input[type="number"]:placeholder-shown,
input[type="email"]:placeholder-shown,
input[type="date"]:placeholder-shown,
input[type="tel"]:placeholder-shown {
}
input[type="text"]:active,
input[type="number"]:active,
input[type="email"]:active,
input[type="password"]:active,
input[type="tel"]:active,
input[type="date"]:active,
textarea:active,
select:active,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline-color: #197034;
}
.paleopro input[type="text"]:active, .paleopro input[type="number"]:active, .paleopro input[type="email"]:active, .paleopro input[type="password"]:active, .paleopro input[type="tel"]:active, .paleopro input[type="date"]:active, .paleopro textarea:active, .paleopro select:active, .paleopro input[type="text"]:focus, .paleopro input[type="number"]:focus, .paleopro input[type="email"]:focus, .paleopro input[type="password"]:focus, .paleopro input[type="date"]:focus, .paleopro input[type="tel"]:focus, .paleopro textarea:focus, .paleopro select:focus {
  border-width: 1px;
}
.paleopro input[type="text"]:active, .paleopro input[type="number"]:active, .paleopro input[type="email"]:active, .paleopro input[type="password"]:active, .paleopro input[type="tel"]:active, .paleopro input[type="date"]:active, .paleopro textarea:active, .paleopro select:active, .paleopro input[type="text"]:focus, .paleopro input[type="number"]:focus, .paleopro input[type="email"]:focus, .paleopro input[type="password"]:focus, .paleopro input[type="date"]:focus, .paleopro input[type="tel"]:focus, .paleopro textarea:focus, .paleopro select:focus {
  --tw-border-opacity: 1;
  border-color: rgba(93, 118, 53, var(--tw-border-opacity));
}
.paleopro input[type="text"]:active, .paleopro input[type="number"]:active, .paleopro input[type="email"]:active, .paleopro input[type="password"]:active, .paleopro input[type="tel"]:active, .paleopro input[type="date"]:active, .paleopro textarea:active, .paleopro select:active, .paleopro input[type="text"]:focus, .paleopro input[type="number"]:focus, .paleopro input[type="email"]:focus, .paleopro input[type="password"]:focus, .paleopro input[type="date"]:focus, .paleopro input[type="tel"]:focus, .paleopro textarea:focus, .paleopro select:focus {
  outline-width: 0px;
}
input.input-invalid,
input.input-invalid:active,
input.input-invalid:focus {
  outline-color: #de281b;
  --tw-border-opacity: 1;
  border-color: rgba(188, 34, 22, var(--tw-border-opacity));
}
.paleopro input.input-invalid, .paleopro input.input-invalid:active, .paleopro input.input-invalid:focus {
  --tw-border-opacity: 1 !important;
  border-color: rgba(203, 83, 20, var(--tw-border-opacity)) !important;
}
.paleopro input.input-invalid, .paleopro input.input-invalid:active, .paleopro input.input-invalid:focus {
  outline-width: 0px;
}
.input-wrap__error {
  position: absolute;
  left: 0px;
  top: calc(100% + 0.875rem);
  width: 100%;
  font-size: 0.75rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgba(188, 34, 22, var(--tw-text-opacity));
}
.paleopro .input-wrap__error {
  --tw-text-opacity: 1;
  color: rgba(203, 83, 20, var(--tw-text-opacity));
}
.input-wrap, 
.select-wrap {
  position: relative;
  display: inline-block;
}
.select-wrap label, 
.input-wrap label {
  position: absolute;
  top: 0px;
  left: 0px;
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  padding-left: 0px;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.input-wrap input:-moz-placeholder-shown + label {
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
}
.input-wrap input:placeholder-shown + label {
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
}
.input-wrap input:focus:-moz-placeholder-shown + label, .input-wrap input:active:-moz-placeholder-shown + label {
  padding-left: 1.25rem;
}
.input-wrap input:focus:placeholder-shown + label, 
.input-wrap input:active:placeholder-shown + label {
  padding-left: 1.25rem;
}
.input-wrap textarea:-moz-placeholder-shown + label {
  top: 1.75rem;
  left: 1.5rem;
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
}
.input-wrap textarea:placeholder-shown + label {
  top: 1.75rem;
  left: 1.5rem;
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
}
textarea {
  height: 10.5rem;
  width: 100%;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
select {
  height: 3rem;
  min-width: 10rem;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
  background-color: transparent;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.paleopro select {
  height: auto;
}
.paleopro select {
  --tw-border-opacity: 1;
  border-color: rgba(44, 44, 46, var(--tw-border-opacity));
}
.paleopro select {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.paleopro select {
  padding-left: 0px;
}
.paleopro select:focus, 
    .paleopro select:active {
  border-width: 0px;
}
.paleopro select:focus, 
    .paleopro select:active {
  border-bottom-width: 1px;
}
.select-wrap::after {
  content: url("data:image/svg+xml; utf8, <svg width=\"15\" height=\"10\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.947 9.195-6.54-6.54a.5.5 0 0 1 0-.708l1.06-1.06a.5.5 0 0 1 .707 0L6.947 5.66a.5.5 0 0 0 .638.058l.07-.058L12.426.887a.5.5 0 0 1 .638-.058l.07.057 1.06 1.061a.5.5 0 0 1 0 .707l-6.54 6.541a.5.5 0 0 1-.708 0Z\" fill=\"202020\" fill-rule=\"nonzero\"/></svg>");
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 18px;
  width: 1rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  touch-action: none;
}
.paleopro .select-wrap::after {
    content: url("data:image/svg+xml; utf8, <svg width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.410826 0.910582C0.736263 0.585145 1.2639 0.585145 1.58934 0.910582L6.00008 5.32133L10.4108 0.910582C10.7363 0.585145 11.2639 0.585145 11.5893 0.910582C11.9148 1.23602 11.9148 1.76366 11.5893 2.08909L6.58934 7.08909C6.2639 7.41453 5.73626 7.41453 5.41083 7.08909L0.410826 2.08909C0.0853888 1.76366 0.0853888 1.23602 0.410826 0.910582Z\" fill=\"%232C2C2E\"/></svg>");
  }
.select-wrap--account-nav::after {
  content: url("data:image/svg+xml; utf8, <svg width=\"18\" height=\"18\" viewBox=\"0 0 23 21\" xmlns=\"http://www.w3.org/2000/svg\"><title>Menu</title><g fill=\"currentcolor\" fill-rule=\"nonzero\"><path d=\"M22.5 10v1.5H.5V10zM22.5 19v1.5H.5V19zM22.5 1v1.5H.5V1z\"/></g></svg>");
  top: 50%;
  right: 20px;
  transform: translate(0, -10px);
}
.select-wrap-arrow {
  position: relative;
}
.select-wrap-arrow:after {
  content: url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"8\"><path d=\"M6 8L0 0h12Z\"/></svg>");
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 10px;
  width: 1rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  touch-action: none;
}
.input-error {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgba(188, 34, 22, var(--tw-text-opacity));
}
.paleopro .input-error {
  --tw-text-opacity: 1;
  color: rgba(203, 83, 20, var(--tw-text-opacity));
}
.check-wrap, 
.radio-wrap {
  display: inline-flex;
  align-items: center;
}
input[type="radio"], 
input[type="checkbox"] {
  position: relative;
  margin-right: 0.75rem;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(150, 148, 148, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.paleopro input[type="radio"], .paleopro input[type="checkbox"] {
  border-width: 1.5px;
}
.paleopro input[type="radio"], .paleopro input[type="checkbox"] {
  --tw-border-opacity: 1;
  border-color: rgba(44, 44, 46, var(--tw-border-opacity));
}
input[type="radio"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:active {
  outline-color: #197034;
}
input[type="radio"]:checked, 
input[type="checkbox"]:checked {
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
}
.paleopro input[type="radio"]:checked, .paleopro input[type="checkbox"]:checked {
  --tw-border-opacity: 1;
  border-color: rgba(44, 44, 46, var(--tw-border-opacity));
}
.paleopro input[type="checkbox"]:checked {
  --tw-bg-opacity: 1;
  background-color: rgba(44, 44, 46, var(--tw-bg-opacity));
}
.paleopro input[type="radio"]:checked {
  background-color: transparent;
}
input[type="radio"] {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
}
input[type="radio"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0px;
  width: 0px;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.paleopro input[type="radio"]::before {
  --tw-bg-opacity: 1;
  background-color: rgba(44, 44, 46, var(--tw-bg-opacity));
}
input[type="radio"]:checked::before {
  height: 0.75rem;
  width: 0.75rem;
}
input[type="radio"] + label, 
input[type="checkbox"] + label {
  cursor: pointer;
}
input[type="checkbox"] {
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.125rem;
}
.paleopro input[type="checkbox"] {
  border-radius: 0px;
}
input[type="checkbox"]:checked::after {
  content: url("data:image/svg+xml; utf8, <svg width=\"8\" height=\"11\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.363.57.948.318a.25.25 0 0 1 .157.317L4.34 10.543a.25.25 0 0 1-.206.169l-1.03.128a.25.25 0 0 1-.241-.113L.224 6.615A.25.25 0 0 1 .3 6.27l.842-.54a.25.25 0 0 1 .346.075l1.595 2.488a.25.25 0 0 0 .448-.056L6.046.728A.25.25 0 0 1 6.363.57Z\" fill=\"202020\" fill-rule=\"nonzero\"/></svg>");
  position: absolute;
  top: 50%;
  left: 50%;
  --tw-translate-y: -50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.paleopro input[type="checkbox"]:checked::after {
    content: url("data:image/svg+xml; utf8, <svg width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.7071 0.292893C11.0976 0.683417 11.0976 1.31658 10.7071 1.70711L4.70711 7.70711C4.31658 8.09763 3.68342 8.09763 3.29289 7.70711L0.292893 4.70711C-0.0976311 4.31658 -0.0976311 3.68342 0.292893 3.29289C0.683417 2.90237 1.31658 2.90237 1.70711 3.29289L4 5.58579L9.29289 0.292893C9.68342 -0.0976311 10.3166 -0.0976311 10.7071 0.292893Z\" fill=\"%23F1E6D3\"/></svg>");
    line-height: 0;
  }
a {
  cursor: pointer;
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
a:hover {
  --tw-text-opacity: 1;
  color: rgba(87, 86, 86, var(--tw-text-opacity));
}
.paleopro a:hover {
  --tw-text-opacity: 1;
  color: rgba(213, 149, 41, var(--tw-text-opacity));
}
.focus-link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}
.focus-link:hover {
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.paleopro .focus-link {
  font-weight: 700;
}
.paleopro .focus-link {
  --tw-text-opacity: 1;
  color: rgba(45, 59, 39, var(--tw-text-opacity));
}
.paleopro .focus-link:hover {
  --tw-text-opacity: 1;
  color: rgba(45, 59, 39, var(--tw-text-opacity));
}
.focus-link.focus-link--caps {
  text-transform: capitalize;
}
.focus-link--dark {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.focus-link--dark:hover {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.paleopro .focus-link--dark {
  --tw-text-opacity: 1;
  color: rgba(244, 235, 219, var(--tw-text-opacity));
}
.paleopro .focus-link--dark:hover {
  --tw-text-opacity: 1;
  color: rgba(244, 235, 219, var(--tw-text-opacity));
}
.focus-link .icon {
  margin-right: 0.5rem;
  display: flex;
  height: 1.625rem;
  width: 1.625rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.paleopro .focus-link .icon {
  border-width: 2px;
}
.paleopro .focus-link .icon {
  --tw-border-opacity: 1;
  border-color: rgba(45, 59, 39, var(--tw-border-opacity));
}
.paleopro .focus-link .icon {
  --tw-bg-opacity: 1;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity));
}
.paleopro .focus-link .icon {
  --tw-text-opacity: 1;
  color: rgba(242, 242, 240, var(--tw-text-opacity));
}
.focus-link--dark .icon {
  --tw-border-opacity: 1;
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.paleopro .focus-link--dark .icon {
  --tw-border-opacity: 1;
  border-color: rgba(241, 230, 211, var(--tw-border-opacity));
}
.paleopro .focus-link--dark .icon {
  --tw-bg-opacity: 1;
  background-color: rgba(241, 230, 211, var(--tw-bg-opacity));
}
.paleopro .focus-link--dark .icon {
  --tw-text-opacity: 1;
  color: rgba(44, 44, 46, var(--tw-text-opacity));
}
.focus-link:hover .icon {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.paleopro .focus-link:hover .icon {
  background-color: transparent;
}
.paleopro .focus-link:hover .icon {
  --tw-text-opacity: 1;
  color: rgba(45, 59, 39, var(--tw-text-opacity));
}
.focus-link--dark:hover .icon {
  --tw-bg-opacity: 1;
  background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.paleopro .focus-link--dark:hover .icon {
  background-color: transparent;
}
.paleopro .focus-link--dark:hover .icon {
  --tw-text-opacity: 1;
  color: rgba(241, 230, 211, var(--tw-text-opacity));
}
.focus-link svg {
  max-width: 0.875rem;
}
.paleopro .focus-link svg {
  max-width: 1.25rem;
}
/*
 * Open Border — "CAD" disambiguation label rendered right after a price so the
 * Canadian dollar is not read as USD. Single source of truth for the label's
 * styling, shared by both renderers:
 *   - snippets/open-border/ob-cad-suffix.liquid (Liquid templates)
 *   - scripts/components/CadSuffix.jsx           (React apps)
 *
 * em-based sizing keeps the label proportional to whatever price it trails
 * (large PDP price or small cart line alike). It stays on the baseline — no
 * vertical-align — so it reads as a suffix, not a superscript.
 */
.ob-cad-suffix {
  font-size: 0.65em;
  font-weight: 500;
  letter-spacing: 1px;
  margin-left: 0.25em;
}
.page-nav-select {
  border-bottom-width: 2px;
  --tw-bg-opacity: 1;
  background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
  font-weight: 600;
}
.paleopro .page-nav-select-wrap:after {
  right: 1.5rem;
}
.paleopro .page-nav-select {
  border-bottom-width: 2px;
}
.paleopro .page-nav-select {
  --tw-border-opacity: 1;
  border-color: rgba(44, 44, 46, var(--tw-border-opacity));
}
.paleopro .page-nav-select {
  --tw-bg-opacity: 1;
  background-color: rgba(242, 242, 240, var(--tw-bg-opacity));
}
.paleopro .page-nav-select {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.product-slider::-webkit-scrollbar {
  height: 2px;
}
.product-slider::-webkit-scrollbar-thumb {
  --tw-bg-opacity: 1;
  background-color: rgba(150, 148, 148, var(--tw-bg-opacity));
}
.product-slider::-webkit-scrollbar-track {
  --tw-bg-opacity: 1;
  background-color: rgba(228, 228, 228, var(--tw-bg-opacity));
}
 [data-account-link].product-slider::-webkit-scrollbar-track,  
   [data-nav-link].product-slider::-webkit-scrollbar-track {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity)) !important;
}
 [data-account-link].product-slider::-webkit-scrollbar-track,  
   [data-nav-link].product-slider::-webkit-scrollbar-track {
  --tw-text-opacity: 1 !important;
  color: rgba(244, 235, 219, var(--tw-text-opacity)) !important;
}
 [data-account-link].product-slider::-webkit-scrollbar-track:hover,  
   [data-nav-link].product-slider::-webkit-scrollbar-track:hover {
  --tw-text-opacity: 1 !important;
  color: rgba(244, 235, 219, var(--tw-text-opacity)) !important;
}
 [data-account-link].product-slider::-webkit-scrollbar-track,  
   [data-nav-link].product-slider::-webkit-scrollbar-track {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity)) !important;
}
 [data-account-link].product-slider::-webkit-scrollbar-track,  
   [data-nav-link].product-slider::-webkit-scrollbar-track {
  --tw-text-opacity: 1 !important;
  color: rgba(244, 235, 219, var(--tw-text-opacity)) !important;
}
 [data-account-link].product-slider::-webkit-scrollbar-track:hover,  
   [data-nav-link].product-slider::-webkit-scrollbar-track:hover {
  --tw-text-opacity: 1 !important;
  color: rgba(244, 235, 219, var(--tw-text-opacity)) !important;
}
 [data-account-link].product-slider::-webkit-scrollbar-track,  
   [data-nav-link].product-slider::-webkit-scrollbar-track {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity)) !important;
}
 [data-account-link].product-slider::-webkit-scrollbar-track,  
   [data-nav-link].product-slider::-webkit-scrollbar-track {
  --tw-text-opacity: 1 !important;
  color: rgba(244, 235, 219, var(--tw-text-opacity)) !important;
}
 [data-account-link].product-slider::-webkit-scrollbar-track:hover,  
   [data-nav-link].product-slider::-webkit-scrollbar-track:hover {
  --tw-text-opacity: 1 !important;
  color: rgba(244, 235, 219, var(--tw-text-opacity)) !important;
}
 [data-account-link].product-slider::-webkit-scrollbar-track,  
   [data-nav-link].product-slider::-webkit-scrollbar-track {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity)) !important;
}
 [data-account-link].product-slider::-webkit-scrollbar-track,  
   [data-nav-link].product-slider::-webkit-scrollbar-track {
  --tw-text-opacity: 1 !important;
  color: rgba(244, 235, 219, var(--tw-text-opacity)) !important;
}
 [data-account-link].product-slider::-webkit-scrollbar-track:hover,  
   [data-nav-link].product-slider::-webkit-scrollbar-track:hover {
  --tw-text-opacity: 1 !important;
  color: rgba(244, 235, 219, var(--tw-text-opacity)) !important;
}
.product-slides img {
  flex-shrink: 0;
}
.product-slides img:last-of-type {
  margin-right: 0px;
}
/* Progress bar used to illustrate match percent on coach */
progress {
  
    background-color:#fff;
    border: 1px solid #222;  
    height: 19px;
    border-radius: 10px;
    text-align: center;
    color:#fff;
    width:160px;
  
    }
progress::-webkit-progress-bar {
    background-color:#fff;
    height: 17px;
    border-radius: 10px;
  
    }
progress::-webkit-progress-value {
      background-color:#222;
      border: 1px solid #fff;
      height: 17px;
      border-radius: 10px;
    }
progress::-moz-progress-bar {
      background-color:#222;
      border: 1px solid #fff;
      height: 17px;
      border-radius: 10px;
    }
.progress-text {
      position: relative;
      top: -6px;
      left: -148px;
      color: #fff;
    }
.price-slider {
  -webkit-appearance: none;
  pointer-events: none;
  height: 0.5rem;
  width: 100%;
  background-color: transparent;
  touch-action: none;
}
/* Input Thumb */
.price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  height: 1rem;
  width: 1rem;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  touch-action: auto;
  border: 1px solid black;
}
/* Input Track */
.price-slider::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  pointer-events: none;
  border-width: 0px;
  background-color: transparent;
  touch-action: none;
}
.search-button {
  --tw-text-opacity: 1;
  color: rgba(150, 148, 148, var(--tw-text-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.search-button:hover {
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.group:hover .search-button {
  --tw-text-opacity: 1;
  color: rgba(150, 148, 148, var(--tw-text-opacity));
}
.group:hover .search-button:hover {
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.search-button.selected {
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.search-button-spaced {
  margin-left: 1rem;
}
@media (min-width: 64.0625rem) {

  .search-button-spaced {
    margin-left: 2rem;
  }
}
.search-button.search-button-spaced::before {
  content: '•';
  display: inline-block;
  font-size: 1.5rem;
  --tw-text-opacity: 1;
  color: rgba(150, 148, 148, var(--tw-text-opacity));
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}
@media (min-width: 64.0625rem) {

  .search-button.search-button-spaced::before {
    padding-right: 2rem;
  }
}
.paleopro .search-button {
  --tw-text-opacity: 1;
  color: rgba(44, 44, 46, var(--tw-text-opacity));
}
.paleopro .search-button:hover {
  --tw-text-opacity: 1;
  color: rgba(213, 149, 41, var(--tw-text-opacity));
}
.paleopro .search-button.selected {
  --tw-text-opacity: 1;
  color: rgba(213, 149, 41, var(--tw-text-opacity));
}
.paleopro .search-button.selected {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.paleopro .search-button-spaced {
  }
.paleopro .search-button.search-button-spaced::before {
  padding-right: 1rem;
}
@media (min-width: 64.0625rem) {

  .paleopro .search-button.search-button-spaced::before {
    padding-right: 2rem;
  }
}
.scrollbar {
  overflow-x: auto;
  padding-bottom: 1rem;
}
.scrollbar.scrollbar--vertical {
  padding-bottom: 0px;
}
.scrollbar::-webkit-scrollbar {
  height: 0.25rem;
  width: 0.25rem;
}
.scrollbar::-webkit-scrollbar-thumb {
  --tw-bg-opacity: 1;
  background-color: rgba(87, 86, 86, var(--tw-bg-opacity));
}
.scrollbar::-webkit-scrollbar-track-piece {
  --tw-bg-opacity: 1;
  background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
}
.scrollbar--white::-webkit-scrollbar-track-piece {
  --tw-bg-opacity: 0;
}
@media screen and (min-width: 768px) {
  .md\:scrollbar {
    overflow-x: auto;
    padding-bottom: 1rem;
  }

  .md\:scrollbar.scrollbar--vertical {
    padding-bottom: 0px;
  }

  .md\:scrollbar::-webkit-scrollbar {
    height: 0.25rem;
    width: 0.25rem;
  }

  .md\:scrollbar::-webkit-scrollbar-thumb {
    --tw-bg-opacity: 1;
    background-color: rgba(87, 86, 86, var(--tw-bg-opacity));
  }

  .md\:scrollbar::-webkit-scrollbar-track-piece {
    --tw-bg-opacity: 1;
    background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
  }

  .md\:scrollbar--white::-webkit-scrollbar-track-piece {
    --tw-bg-opacity: 0;
  }
}
.snap-start {
  scroll-snap-align: start;
}
.snap-mandatory {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.snap-center {
  scroll-snap-align: center;
}
.paleopro .scrollbar::-webkit-scrollbar-thumb {
  --tw-bg-opacity: 1;
  background-color: rgba(152, 166, 147, var(--tw-bg-opacity));
}
.paleopro .scrollbar::-webkit-scrollbar-track-piece {
  --tw-bg-opacity: 1;
  background-color: rgba(242, 242, 240, var(--tw-bg-opacity));
}
.table-wrap {
  width: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  border-bottom-width: 0.1875rem;
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
  text-align: left;
}
.paleopro th {
  --tw-border-opacity: 1;
  border-color: rgba(45, 59, 39, var(--tw-border-opacity));
}
th, 
td {
  min-width: 19.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
th:first-of-type, 
td:first-of-type {
  min-width: 14rem;
}
th:not(:first-of-type), 
td:not(:first-of-type) {
  padding-left: 4.5rem;
}
tr:nth-child(2n + 3) {
  --tw-bg-opacity: 1;
  background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
}
.paleopro tr:nth-child(2n + 3) {
  --tw-bg-opacity: 1;
  background-color: rgba(242, 242, 240, var(--tw-bg-opacity));
}
.wysiwyg p {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.wysiwyg ol, 
.wysiwyg ul {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}
.wysiwyg ul {
  list-style-type: disc;
}
.wysiwyg ol {
  list-style-type: decimal;
}
.wysiwyg blockquote {
  position: relative;
}
.wysiwyg blockquote::before {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
}
.paleopro .wysiwyg blockquote::before {
  --tw-bg-opacity: 1;
  background-color: rgba(213, 149, 41, var(--tw-bg-opacity));
}
.wysiwyg blockquote p {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  --tw-bg-opacity: 1;
  background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.875rem;
}
@media (min-width: 64.0625rem) {

  .wysiwyg blockquote p {
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 8.25rem;
    padding-right: 8.25rem;
    font-size: 1.65rem;
    line-height: 2.94rem;
  }
}
.paleopro .wysiwyg blockquote p {
  --tw-bg-opacity: 1;
  background-color: rgba(242, 242, 240, var(--tw-bg-opacity));
}
.wysiwyg blockquote cite {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.375rem;
}
@media (min-width: 64.0625rem) {

  .wysiwyg blockquote cite {
    flex-direction: row;
  }
}
.wysiwyg cite span:first-of-type::after {
  content: '|';
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  display: none;
}
@media (min-width: 64.0625rem) {

  .wysiwyg cite span:first-of-type::after {
    display: inline;
  }
}
.paleopro .wysiwyg blockquote::before {
  --tw-bg-opacity: 1;
  background-color: rgba(213, 149, 41, var(--tw-bg-opacity));
}
.paleopro .wysiwyg blockquote p {
  --tw-bg-opacity: 1;
  background-color: rgba(242, 242, 240, var(--tw-bg-opacity));
}
.paleopro .wysiwyg blockquote p {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.paleopro .wysiwyg blockquote p {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.paleopro .wysiwyg blockquote p {
  font-size: 1.375rem;
}
.paleopro .wysiwyg blockquote p {
  font-weight: 700;
}
.paleopro .wysiwyg blockquote p {
  line-height: 1.925rem;
}
@media (min-width: 64.0625rem) {

  .paleopro .wysiwyg blockquote p {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
@media (min-width: 64.0625rem) {

  .paleopro .wysiwyg blockquote p {
    padding-left: 8.25rem;
    padding-right: 8.25rem;
  }
}
@media (min-width: 64.0625rem) {

  .paleopro .wysiwyg blockquote p {
    font-size: 1.75rem;
  }
}
@media (min-width: 64.0625rem) {

  .paleopro .wysiwyg blockquote p {
    line-height: 2.45rem;
  }
}
.paleopro .wysiwyg blockquote cite {
  margin-top: 3rem;
}
.paleopro .wysiwyg blockquote cite {
  font-size: 1rem;
}
.paleopro .wysiwyg blockquote cite {
  font-weight: 400;
}
.paleopro .wysiwyg blockquote cite {
  line-height: 1.6rem;
}
/* ── Paragraph color + line-height ── */
.wysiwyg p {
  font-size: 0.9375rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgba(102, 102, 102, var(--tw-text-opacity));
}
/* ── Strong/bold used as section labels in accordion content ── */
.wysiwyg strong, 
.wysiwyg b {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
/* ── Tables (Volumetric Measures, Amino Acid, etc.) ── */
.wysiwyg table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.wysiwyg table thead th {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-bottom-color: rgba(32, 32, 32, var(--tw-border-opacity));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-bottom: 0.5rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09375rem;
  --tw-text-opacity: 1;
  color: rgba(102, 102, 102, var(--tw-text-opacity));
}
.wysiwyg table tbody td {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-bottom-color: rgba(232, 232, 232, var(--tw-border-opacity));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.wysiwyg table tbody td:last-child {
  text-align: right;
  --tw-text-opacity: 1;
  color: rgba(102, 102, 102, var(--tw-text-opacity));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.wysiwyg table tbody tr:last-child td {
  border-bottom-width: 0px;
}
.related-grid {
  position: relative;
  width: 100%;
  overflow: auto;
}
.related-grid--scroll {
  display: flex;
}
.related-grid--scroll > div {
  margin-right: 1rem;
  min-width: 11.875rem;
}
@media (min-width: 64.0625rem) {

  .related-grid--scroll > div {
    margin-right: 1.5rem;
    min-width: 18.125rem;
  }
}
.related-grid--scroll:after {

}
.related-grid-layout--scroll {
  position: relative;
}
.related-grid-layout--scroll:after {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  width: 4.75rem;
  background-image: linear-gradient(to right, rgba(255,255,255,0), #fff);
}
.related-grid-layout--scroll [data-grid-render] [product-tile="true"] {
  min-width: 11.875rem;
}
@media (min-width: 64.0625rem) {

  .related-grid-layout--scroll [data-grid-render] [product-tile="true"] {
    min-width: 18.125rem;
  }
}
.tooltip::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: calc(50% - 1.15rem);
  z-index: -1;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-width: 0.5rem;
  --tw-border-opacity: 1;
  border-color: rgba(247, 247, 247, var(--tw-border-opacity));
}
@-webkit-keyframes packaging-flip {
  0%, 100% { transform: perspective(1200px) rotateX(0deg); }
  50% { transform: perspective(1200px) rotateX(90deg); }
}
@keyframes packaging-flip {
  0%, 100% { transform: perspective(1200px) rotateX(0deg); }
  50% { transform: perspective(1200px) rotateX(90deg); }
}
.packaging-flip {
  -webkit-animation: packaging-flip 500ms ease-in-out;
          animation: packaging-flip 500ms ease-in-out;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Respect reduced-motion preferences: skip the 3D flip entirely. */
@media (prefers-reduced-motion: reduce) {
  .packaging-flip {
    -webkit-animation: none;
            animation: none;
  }
}
/* All switch-button hover styles are gated to `(hover: hover)` so touch
 * devices never enter a stuck-black state — :hover persists after tap on
 * mobile and would otherwise leave the button visually pressed.
 *
 * Inversion notes:
 * - bg/text flip from white-on-black to black-on-white via plain rules below.
 * - The main bag/jug shape inside the <use href> sprite uses fill="currentColor"
 *   and follows the text color automatically.
 * - The inner label <rect> is hardcoded white in the sprite. To flip it to
 *   black on hover, the sprite reads fill="var(--bag-label-fill, #fff)" and we
 *   set --bag-label-fill: #000 here. CSS custom properties inherit through
 *   <use> shadow trees, so the rect inside the referenced symbol picks it up. */
@media (hover: hover) {
  .switch-type-btn:hover {
    background-color: #000000;
    color: #ffffff;
    --bag-label-fill: #000000;
  }
}
/* Mobile tap highlight: default is translucent blue. Override to translucent
 * black so the flash matches the site's color palette. Applies inside both
 * the React PackagingPanel ([data-packaging-section]) and the PDP packaging
 * widget ([data-packaging-selector]). */
[data-packaging-section] button,
[data-packaging-selector] button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.4);
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 6rem;
  height: 2.5rem;
}
.lds-ellipsis div {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #555;
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
          animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  -webkit-animation: lds-ellipsis1 0.5s infinite;
          animation: lds-ellipsis1 0.5s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  -webkit-animation: lds-ellipsis2 0.5s infinite;
          animation: lds-ellipsis2 0.5s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  -webkit-animation: lds-ellipsis2 0.5s infinite;
          animation: lds-ellipsis2 0.5s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  -webkit-animation: lds-ellipsis3 0.5s infinite;
          animation: lds-ellipsis3 0.5s infinite;
}
@-webkit-keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@-webkit-keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
.progress-loader {
  display: block;
  --height-of-loader: 4px;
  --loader-color: #555;
  width: 130px;
  height: var(--height-of-loader);
  border-radius: 60px;
  background-color: rgba(0, 0, 0, 0.2);
  position: relative;
}
.progress-loader::before {
  content: "";
  position: absolute;
  background: var(--loader-color);
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: 60px;
  -webkit-animation: progress-loader-moving 1s ease-in-out infinite;
          animation: progress-loader-moving 1s ease-in-out infinite;
}
@-webkit-keyframes progress-loader-moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: auto;
    left: initial;
  }
}
@keyframes progress-loader-moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: auto;
    left: initial;
  }
}
.govx__container {
    font-style: normal; 
    clear: both; 
    width: 100%; 
    padding: 10px 0 0 0; 
    text-transform: none;
    display: flex;
    justify-content: center;
}
.govx__link {
    display: flex; 
    width: 90%; 
    max-width: 400px; 
    border: 1px solid rgb(228, 228, 228); 
    color: #333; 
    background-color: white; 
    flex-direction: row; 
    padding: 10px; 
    justify-content: flex-start; 
    text-align: left; 
    text-decoration: none; 
    border-radius: 5px;
}
.govx__logo {
    display: block; 
    flex-grow: 0; 
    flex-shrink: 0;
    align-self: center; 
    width: 45px; 
    height: 45px
}
.govx__logoimage {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.govx__cta {
    display: block; 
    flex-grow: 2; 
    flex-wrap: wrap; 
    align-self: center; 
    padding-left: 15px; 
}
.govx__text {
    color: #333; 
    line-height: 16px; 
    font-size: 12px; 
    margin: 0px; 
}
/**
 * Swiper 11.2.6
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: March 19, 2025
 */
/* FONT_START */
@font-face {
  font-family: 'swiper-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #202020;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
  padding-bottom: 24px;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: initial;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  /* height: 100%; */
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
[dir="ltr"] .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-left: var(--swiper-centered-offset-before);
}
[dir="rtl"] .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-right: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-top: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(32, 32, 32, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(32, 32, 32, 0.5), rgba(32, 32, 32, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(32, 32, 32, 0.5), rgba(32, 32, 32, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(32, 32, 32, 0.5), rgba(32, 32, 32, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(32, 32, 32, 0.5), rgba(32, 32, 32, 0));
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid #202020;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  -webkit-animation: swiper-preloader-spin 1s infinite linear;
          animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #202020;
}
@-webkit-keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
/**
 * Swiper 11.2.6
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: March 19, 2025
 */
/* FONT_START */
@font-face {
  font-family: 'swiper-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #202020;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
  --swiper-theme-color: #202020;
}
@media screen and (max-width: 767px) {
  .swiper {
    padding-bottom: 24px;
  }
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: initial;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
[dir="ltr"] .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-left: var(--swiper-centered-offset-before);
}
[dir="rtl"] .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-right: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-top: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(32, 32, 32, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(32, 32, 32, 0.5), rgba(32, 32, 32, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(32, 32, 32, 0.5), rgba(32, 32, 32, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(32, 32, 32, 0.5), rgba(32, 32, 32, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(32, 32, 32, 0.5), rgba(32, 32, 32, 0));
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid #202020;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  -webkit-animation: swiper-preloader-spin 1s infinite linear;
          animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #202020;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(44px / 44 * 27);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: 44px;
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (44px / 2));
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #202020;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 10px;
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 10px;
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-lock {
  display: none;
}
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
  text-transform: none !important;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: 44px;
  font-size: var(--swiper-navigation-size);
  letter-spacing: 0;
  font-feature-settings: ;
  font-variant: normal;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 10px;
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
/* Navigation font end */
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #202020;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 8px;
  bottom: var(--swiper-pagination-bottom, 8px);
  top: auto;
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
  bottom: -4px;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: 8px;
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: 8px;
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: #202020;
  background: var(--swiper-pagination-bullet-inactive-color, #202020);
  opacity: 0.2;
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
          -moz-appearance: none;
       appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  /* background: var(--swiper-pagination-color, var(--swiper-theme-color)); */
  background: #202020;
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: 8px;
  right: var(--swiper-pagination-right, 8px);
  left: auto;
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform,
        200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
        200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: inherit;
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: rgba(32, 32, 32, 0.25);
  background: var(--swiper-pagination-progressbar-bg-color, rgba(32, 32, 32, 0.25));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #202020;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: 4px;
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}
:root {
  /*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(32, 32, 32, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(32, 32, 32, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}
.swiper-scrollbar {
  border-radius: 10px;
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: rgba(32, 32, 32, 0.1);
  background: var(--swiper-scrollbar-bg-color, rgba(32, 32, 32, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: 1%;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: 4px;
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: auto;
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: 4px;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * 1%);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-vertical > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-vertical {
  position: absolute;
  left: auto;
  left: var(--swiper-scrollbar-left, auto);
  right: 4px;
  right: var(--swiper-scrollbar-right, 4px);
  top: 1%;
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: 4px;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * 1%);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(32, 32, 32, 0.5);
  background: var(--swiper-scrollbar-drag-bg-color, rgba(32, 32, 32, 0.5));
  border-radius: 10px;
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
/* Zoom container styles start */
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
/* Zoom container styles end */
.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}
/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper.swiper-cube {
  overflow: visible;
}
.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
  content: '';
  background: #202020;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
/* Cube slide shadows start */
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Cube slide shadows end */
.swiper.swiper-flip {
  overflow: visible;
}
.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
/* Flip slide shadows start */
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Flip slide shadows end */
.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}
.swiper.swiper-cards {
  overflow: visible;
}
.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
}
.swiper-slide {
  height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .swiper-pagination {
    position: relative;
    margin-top: 10px;
  }
}
@media (min-width: 64.0625rem) {
    .light-blur {
        background: rgba(32,32,32,0.36);
        -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
    }
.dark-blur {
    background: rgba(247,247,247,0.36);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
}
@media (min-width: 84.125rem) {
    .step-block {
        min-width: 22rem;
    }
    hr {
        width: 16.1rem;
    }
}
@media (min-width: 73.5rem) {
    .blur-container {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}
@media only screen and (min-width: 64rem) and (max-width: 73.5rem) {
    .blur-container {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}
@media only screen and (min-width: 64rem) and (max-width: 84.125rem) {
    .step-block {
        min-width: 15rem;
    }
    hr {
        width: 9.1rem;
    }
}
@media (max-width: 64rem) {
    hr {
        width: 7.5rem;
    }
    .blur-container {
        padding-top: 2.5rem;
        padding-bottom: 3.5rem;
    }
}
.step-block:last-of-type {
    min-width: 14.25rem;
}
.step-block:last-of-type hr {
    display: none;
}
/* ============================================================================
   Goal Research Score — sections/pages/goal-research-score.liquid
   Spec: docs/design_handoff_goal_research_score/README.md

   One breakpoint at 767px, as the handoff specifies: desktop rules first, then a
   single max-width block of mobile overrides at the end. 767 is not a theme
   screen (theme lg is 1025px), so it's a literal media query — deliberately, to
   keep the handoff's "everything mobile lives in one block" structure intact.

   THE SHADE RAMP DEVIATES FROM THE HANDOFF, ON PURPOSE
   ----------------------------------------------------
   The design specifies alpha .55 for scores 4-6 with white text. Against the
   theme's #202020 ink that is 4.35:1 — under the 4.5:1 AA floor for 14px/600,
   which is not large text. The ramp here is .10 / .28 / .68 / .84 / 1: the same
   five buckets the legend and the tier names use, with the mid step darkened
   until white text clears AA. Every step's contrast is noted inline.

   Type is the handoff's scale but not its family: the site renders Archivo/Arial,
   which has 400/700 only, so the design's 500 renders Regular and 600 renders
   Bold — same as every other TN template.
   ============================================================================ */
.grs {
  --grs-ink: #202020;
  --grs-secondary: #575656;
  --grs-border: #e4e4e4;
  --grs-subtle: #f7f7f7;
  --grs-dark: #2c2c2c;
  --grs-focus: #197034;
  --grs-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --grs-duration: 200ms;

  /* Score shades. Contrast measured against #fff page / the fill itself. */
  --grs-s1: rgba(32, 32, 32, 0.1);  /* ink text, 15.9:1 */
  --grs-s2: rgba(32, 32, 32, 0.28); /* ink text,  9.2:1 */
  --grs-s4: rgba(32, 32, 32, 0.68); /* white text, 4.8:1 — the handoff's .55 fails */
  --grs-s7: rgba(32, 32, 32, 0.84); /* white text, 8.9:1 */
  --grs-s9: rgba(32, 32, 32, 1);    /* white text, 15.9:1 */

  color: var(--grs-ink);
  font-family: inherit;
}
.grs__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
/* --- Focus -----------------------------------------------------------------
   The theme green is 6.16:1 on white but only 2.64:1 on a dark score fill, which
   fails WCAG 1.4.11. Score buttons get a white inset ring instead; everything
   else sits on white and takes the green. */
.grs .focus-visible {
  outline: 2px solid var(--grs-focus);
  outline-offset: 2px;
}
.grs :focus-visible {
  outline: 2px solid var(--grs-focus);
  outline-offset: 2px;
}
/* The `hidden` attribute only works while nothing sets `display` on the element.
   `.grs__chip` sets `display: block` and the theme's table rules set display on
   rows, so both silently win over `hidden` and the element stays visible — the JS
   looks broken when it is doing exactly what it was told. `!important` is right
   here: `hidden` means "not relevant", and that should never lose to a layout rule.
   Applies to the empty product-type chips and to grid rows filtered out by type. */
.grs [hidden] {
  display: none !important;
}
.grs__score.focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
.grs__score:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
/* Light fills and the striped/pending cells need an ink ring, not a white one. */
.grs__cell--s1 .grs__score.focus-visible,
.grs__cell--s2 .grs__score.focus-visible,
.grs__cell--s3 .grs__score.focus-visible,
.grs__cell--pending .grs__score.focus-visible {
  outline-color: var(--grs-ink);
}
.grs__cell--s1 .grs__score:focus-visible,
.grs__cell--s2 .grs__score:focus-visible,
.grs__cell--s3 .grs__score:focus-visible,
.grs__cell--pending .grs__score:focus-visible {
  outline-color: var(--grs-ink);
}
/* --- Header ---------------------------------------------------------------- */
.grs__eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--grs-secondary);
  margin: 0 0 8px;
}
.grs__h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.2px;
  /* Display leading, not body leading. Without this the heading inherits the theme's
     paragraph line-height and a two-line headline opens a gap wide enough to read as
     two separate headings. The mobile block always set 1.25; desktop never did, which
     is why it only showed up once the heading grew long enough to wrap. Tighter than
     mobile because the type is larger — leading tightens as size goes up. */
  line-height: 1.15;
  /* No measure limit: at 820px this headline wrapped at every desktop width. A
     heading is scanned, not read line by line, so the usual ~70ch limit that governs
     .grs__sub does not apply to it. */
  margin: 0 0 12px;
}
.grs__sub {
  /* Full width, matching .grs__h1. A 760px measure under a heading spanning the whole
     container read as a narrow column pinned under a wide title.

     This is a deliberate exception to the ~70-character measure, and it holds only
     because the paragraph is SHORT — at full width it runs two or three lines. A long
     measure costs you on the return sweep to the next line, which barely applies over
     three lines and would apply badly over ten. If this intro grows, cap it again. */
  max-width: none;
  /* 0 bottom: the methodology link follows directly and owns the gap via its own
     margin-top, so the intro and the link read as one block. */
  margin: 0;
}
.grs__sub p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--grs-secondary);
  margin: 0;
}
.grs__sub strong,
.grs__sub b {
  font-weight: 700;
  color: var(--grs-ink);
}
/* --- Methodology link ------------------------------------------------------
   Opens the flyout. Sits above the fold because it answers "what is this number",
   which someone needs before reading scores rather than after scrolling past a
   hundred rows. */
.grs__method-line {
  margin: 14px 0 32px;
}
.grs__method-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--grs-ink);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: color var(--grs-duration) var(--grs-ease);
}
.grs__method-link:hover { color: var(--grs-secondary); }
.grs__chev {
  width: 7px;
  height: 11px;
  flex: none;
}
/* --- Tabs ------------------------------------------------------------------ */
.grs__tabs {
  display: flex;
  border-bottom: 1px solid var(--grs-border);
  margin-bottom: 24px;
}
.grs__tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--grs-secondary);
  padding: 12px 0;
  margin-right: 28px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--grs-duration) var(--grs-ease);
}
.grs__tab[aria-selected='true'] {
  color: var(--grs-ink);
  border-bottom-color: var(--grs-ink);
}
/* --- Goal picker ---------------------------------------------------------- */
.grs__picker-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--grs-secondary);
  margin: 0 0 8px;
}
.grs__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
/* Deliberately identical to .recipe-book__pill — same control doing the same job
   (pick one of N filters over the same content), so it should not look like a
   second dialect. Values copied from sections/recipe-book.css, not approximated.

   The view tabs above stay underlined tabs on purpose. They swap the whole
   presentation rather than filtering, and this page is the only one on the site
   with two stacked selectors: if both rows were pills, nothing would tell the
   reader which row does what. */
.grs__chip {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  flex: none;
  padding: 9px 18px;
  border: 1px solid var(--grs-border);
  border-radius: 24px;
  background: var(--grs-subtle);
  color: var(--grs-ink);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.01rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--grs-duration) var(--grs-ease),
              color var(--grs-duration) var(--grs-ease),
              border-color var(--grs-duration) var(--grs-ease);
}
.grs__chip:hover { border-color: var(--grs-ink); }
.grs__chip[aria-pressed='true'] {
  background: var(--grs-ink);
  border-color: var(--grs-ink);
  color: #fff;
}
/* --- Type filter (secondary chip rail) -------------------------------------
   Visually subordinate to the goal chips: the goal is the primary question and the
   type is a narrowing of it. Same control, lighter weight, so the hierarchy is
   readable without a legend. */
/* 4px here was a mistake — `margin-bottom` spaces what FOLLOWS the rail, not its own
   label, so it jammed the legend against the pills on the grid tab and the ranked
   heading against them on the goal tab. 24px, a touch under the primary rail's 28px
   so the secondary rail still reads as subordinate. */
.grs__chips--secondary {
  gap: 4px;
  margin-bottom: 24px;
}
/* No fill, no border, regular weight. The goal is the primary question and the type
   is a narrowing of it, so only ONE rail should read as a set of buttons — an earlier
   pass kept the base pill's grey fill and semibold here, which made both rails look
   equally prominent and lost the hierarchy. Unpressed these read as quiet text; the
   pill shape only appears on hover and when active. */
.grs__chips--secondary .grs__chip {
  background: none;
  border-color: transparent;
  padding: 7px 12px;
  min-height: 32px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--grs-secondary);
}
.grs__chips--secondary .grs__chip:hover {
  background: var(--grs-subtle);
  border-color: transparent;
  color: var(--grs-ink);
}
.grs__chips--secondary .grs__chip[aria-pressed='true'] {
  background: var(--grs-ink);
  border-color: var(--grs-ink);
  color: #fff;
  font-weight: 500;
}
.grs__chip-n {
  margin-left: 5px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
}
/* A type with nothing scored for the active goal stays visible but unusable — its
   emptiness is information about the research, not a rendering fault. */
.grs__chip.is-empty {
  opacity: 0.4;
  cursor: not-allowed;
}
/* aria-disabled, not disabled, so the chip stays in the tab order and screen readers
   still announce it. That also means it keeps matching :hover, so the hover affordance
   is suppressed here — it would invite the click the JS ignores. The focus ring stays. */
.grs__chips--secondary .grs__chip[aria-disabled='true']:hover {
  background: none;
  color: var(--grs-secondary);
}
/* "All" is a different kind of choice from the named types — it clears the filter
   rather than picking one — so a hairline separates it from them. Absolute rather
   than a border-left on the chip itself, which would read as part of the pill.
   margin-left stacks on the rail's 8px gap for 18px total, and the line sits in
   the middle of that. */
.grs__chip--sep {
  position: relative;
  margin-left: 14px;
}
.grs__chip--sep::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--grs-border);
}
/* --- Ranked list ---------------------------------------------------------- */
.grs__rankhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.grs__h2 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.grs__ranknote {
  font-size: 13px;
  color: var(--grs-secondary);
  margin: 0;
}
/* 28px, matching `.grs__tier-section`'s margin, so the gap above the FIRST tier
   heading equals the gap above every later one. */
.grs__list {
  margin-top: 28px;
}
/* The top rule belongs to the flat list only.
   Each tier section opens with its own dark `.grs__tier-head` border, so a border
   on the list stacked a second, lighter line directly above the first heading —
   which is why the first group looked cramped next to the later ones. The
   server-rendered first paint IS flat (Liquid can't group by a computed tier), so
   it still needs the rule; scoping it to a leading `.grs__row` gives it to that
   list and not to the tiered one JS renders over it. */
.grs__list > .grs__row:first-child {
  border-top: 1px solid var(--grs-border);
}
.grs__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-gap: 18px;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--grs-border);
}
.grs__badge {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}
.grs__rowmain p { margin: 0; }
.grs__rowname {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
/* --- Links -----------------------------------------------------------------
   components/links.css underlines every bare `a`, but almost nothing on the site
   is a bare `a` — nav, cards, and CTAs are all `.button`, `.focus-link`, or Boost
   markup, each of which opts out. So an underline here would be the odd one out,
   not the convention.

   Product names opt out the same way those classes do, and keep the theme's hover
   colour (a:hover -> #575656) as the affordance. Study citations DO stay underlined:
   they sit inline inside a sentence, where the underline is what marks them as
   links, and the design specifies it. */
.grs__rowname a,
.grs__name a {
  text-decoration: none;
}
.grs__tier {
  margin-top: 6px !important;
}
.grs__tier {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--grs-secondary);
}
.grs__why {
  margin-top: 8px !important;
}
.grs__why {
  font-size: 14px;
  line-height: 1.6;
  color: var(--grs-secondary);
  max-width: 720px;
}
.grs__basis {
  margin-top: 8px !important;
}
.grs__basis {
  font-size: 12.5px;
  font-style: italic;
  color: var(--grs-secondary);
  max-width: 720px;
}
/* Product type, next to the name — the ranked list mixes types, so a row has to say
   what it is without the reader tracking which section it came from. */
.grs__roletag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border-radius: var(--radius-pill, 999px);
  background: var(--grs-subtle);
  color: var(--grs-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}
/* Authored prose — blend attribution or a packaging note. Never synthesized; a
   previous build generated a second blend sentence from `basis` and it duplicated
   the authored line here and replaced it with a worse one in the panel. */
.grs__variantnote {
  margin-top: 6px !important;
}
.grs__variantnote {
  font-size: 12.5px;
  color: var(--grs-secondary);
  max-width: 720px;
}
.grs__empty {
  padding: 28px 0;
  color: var(--grs-secondary);
  font-size: 14px;
}
/* --- Evidence tiers ---------------------------------------------------------
   The ranked list groups into the same five buckets as the shade ramp. The bottom
   two collapse behind a count: a thin goal puts most of the catalog in them, and a
   wall of 2s reads as a verdict on the products rather than an absence of studies. */
.grs__tier-section {
  margin-top: 28px;
}
.grs__tier-section:first-child { margin-top: 0; }
.grs__tier-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--grs-ink);
}
.grs__t-name {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.grs__t-count {
  font-size: 12.5px;
  color: var(--grs-secondary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* Sits directly above the rows it describes, so its wording is gated on what those
   leading rows actually are — reviewed-but-thin and not-yet-reviewed are different
   statements and must never collapse into one. */
.grs__tier-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--grs-secondary);
  background: var(--grs-subtle);
  padding: 12px 14px;
  margin: 12px 0 0;
  max-width: 720px;
}
.grs__tier-collapsed {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--grs-border);
  padding: 16px 0;
  font: inherit;
  cursor: pointer;
}
.grs__tier-collapsed:hover .grs__t-more { border-color: var(--grs-ink); }
.grs__t-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
}
.grs__t-sub {
  display: block;
  font-size: 12.5px;
  color: var(--grs-secondary);
  margin-top: 3px;
  max-width: 640px;
}
.grs__t-more {
  flex: none;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 14px;
  border: 1px solid var(--grs-border);
  border-radius: 999px;
  border-radius: var(--radius-pill, 999px);
  transition: border-color var(--grs-duration) var(--grs-ease);
}
/* --- Studies accordion ------------------------------------------------------
   The "Research studied" line is itself the trigger. Citations are a list rather
   than a comma-run: a citation is a long string and a run of them is unreadable
   above two. */
.grs__basis-block { margin-top: 10px; }
.grs__studies-toggle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  text-align: left;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.grs__b-line {
  font-size: 12.5px;
  font-style: italic;
  color: var(--grs-secondary);
}
.grs__s-count {
  flex: none;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--grs-ink);
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.grs__studies-body { display: none; }
.grs__studies-body.is-open { display: block; }
.grs__studies-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  max-width: 720px;
}
.grs__studies-list li {
  font-size: 12.5px;
  line-height: 1.55;
  padding: 6px 0;
  border-top: 1px solid var(--grs-subtle);
}
.grs__studies-none {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--grs-secondary);
  max-width: 720px;
  margin: 10px 0 0;
}
.grs__more { display: none; }
/* --- Legend --------------------------------------------------------------- */
.grs__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--grs-secondary);
  margin-bottom: 12px;
}
.grs__legend-title {
  font-weight: 700;
  color: var(--grs-ink);
}
.grs__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.grs__sw {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}
.grs__sw--1 { background: var(--grs-s1); }
.grs__sw--2 { background: var(--grs-s2); }
.grs__sw--4 { background: var(--grs-s4); }
.grs__sw--7 { background: var(--grs-s7); }
.grs__sw--9 { background: var(--grs-s9); }
/* The two non-score states. Both are deliberately outside the ramp — neither is a
   step on it, and reading them as "very low" is the misunderstanding to prevent. */
.grs__sw--pending {
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 3px,
    rgba(32, 32, 32, 0.12) 3px, rgba(32, 32, 32, 0.12) 6px
  );
  box-shadow: inset 0 0 0 1px var(--grs-border);
}
.grs__sw--na {
  background: repeating-linear-gradient(
    -45deg,
    #fff, #fff 3px,
    var(--grs-subtle) 3px, var(--grs-subtle) 6px
  );
  box-shadow: inset 0 0 0 1px var(--grs-border);
}
.grs__key--muted { color: var(--grs-secondary); }
/* --- Grid ----------------------------------------------------------------- */
/* --- Make position: sticky possible at page level --------------------------
   theme.liquid sets `overflow-x: hidden` on BOTH <html> and <body>. Per spec a
   non-`visible` value on one axis computes the other to `auto`, so each becomes a
   scroll container, which breaks `position: sticky` for descendants. `clip` still
   prevents horizontal scrolling but does not create a scroll container. Scoped with
   :has() so no other template is affected; without :has() support the goal header
   simply scrolls away rather than sticking — degraded, not broken.
   Same treatment as sections/pages/recipe-book.liquid. */
html[\:has\(.grs\)],
html[\:has\(.grs\)] body {
  overflow-x: clip;
}
html:has(.grs),
html:has(.grs) body {
  overflow-x: clip;
}
html[\:has\(.grs\)] {
  scroll-padding-top: calc(3.75rem + 8px);
  scroll-padding-top: calc(var(--header-height, 3.75rem) + 8px);
}
html[\:has\(.grs\)] {
  scroll-padding-top: calc(3.75rem + 8px);
  scroll-padding-top: calc(3.75rem + 8px);
  scroll-padding-top: calc(var(--header-height, 3.75rem) + 8px);
}
html:has(.grs) {
  scroll-padding-top: calc(3.75rem + 8px);
  scroll-padding-top: calc(var(--header-height, 3.75rem) + 8px);
}
@media (prefers-reduced-motion: reduce) {
  .grs__table .grs__th-goal,
  .grs__table .grs__th-name,
  .grs__table .grs__th-basis {
    transition: none;
  }
}
/* On desktop the grid does NOT scroll internally in either direction — it fits the
   container and the page scrolls. The goal header row sticks to the viewport under
   the site header instead of to a scroll box. Mobile re-introduces horizontal
   scrolling only, because 13 columns cannot fit a phone. */
.grs__scroll {
  /* `clip`, not `hidden`: both clip the table's square corners to this rounded
     frame, but `hidden` would make this a scroll container again and break the
     page-level sticky header. */
  overflow: clip;
  border: 1px solid var(--grs-border);
  border-radius: 12px;
}
.grs__table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  /* Fixed layout is what makes this read as a grid: column widths come from the
     header row rather than from content, so the 11 goal columns stay equal and
     narrow. It also neutralises the global min-width described below, which fixed
     layout ignores for column sizing. */
  table-layout: fixed;
}
/* --- Undoing the theme's global table rules --------------------------------
   components/tables.css styles bare `th`/`td` for editorial content tables, and
   those selectors are unscoped, so they land on this grid too:

     th, td                          min-width: 19.5rem  -> 312px per column
     th/td:not(:first-of-type)       padding-left: 4.5rem -> 72px
     tr:nth-child(2n + 3)            grey zebra band
     th                              3px black underline

   All four have to go or the grid renders as a handful of enormous columns with
   striping the design doesn't have. Selectors are prefixed with `.grs__table` to
   match the specificity of `th:not(:first-of-type)` (0,1,1); this file is imported
   after tables.css, so the tie resolves here. */
.grs__table th,
.grs__table td {
  min-width: 0;
  padding: 0;
  border-bottom-width: 0;
}
.grs__table tr:nth-child(2n + 3) {
  background: transparent;
}
:root.header-hidden .grs__table .grs__th-goal,
:root.header-hidden .grs__table .grs__th-name,
:root.header-hidden .grs__table .grs__th-basis {
  top: 0;
}
/* Column widths as percentages, not pixels: with table-layout:fixed the 11 goal
   columns divide whatever is left, so the grid shrinks with the viewport rather than
   forcing a horizontal scrollbar. 17% each leaves ~74px per goal column at the 1280
   container, which is what keeps MANAGEMENT on one line. */
.grs__table .grs__th-name,
.grs__table .grs__th-basis {
  width: 17%;
}
/* Below ~1150px there is no longer room for both text columns and 11 legible goal
   columns, so the basis column drops out and the goals take the space. The same
   content is still one tap away in the detail panel, exactly as on mobile. */
@media (max-width: 1150px) {
  .grs__table .grs__th-basis,
  .grs__table .grs__basiscell {
    display: none;
  }

  .grs__table .grs__th-name {
    width: 22%;
  }
}
.grs__table .grs__th-goal,
.grs__table .grs__th-name,
.grs__table .grs__th-basis {
  /* The site header is `fixed top-0` and FADES OUT on scroll-down while still
     occupying the top of the viewport, so a static offset leaves the goal row
     floating mid-table with rows sliding under it. HeaderScroll.js publishes
     --header-height and mirrors the faded state onto <html>, so this rides at top:0
     while the header is hidden and steps back down when it returns. Same mechanism
     as .recipe-book__tabs. */
  position: -webkit-sticky;
  position: sticky;
  top: 3.75rem;
  top: var(--header-height, 3.75rem);
  transition: top var(--grs-duration) var(--grs-ease);
  z-index: 2;
  background: #fff;
  border-bottom: 2px solid var(--grs-ink);
  /* Sized so the longest single word in any goal label — MANAGEMENT, 10 characters —
     fits one line of a goal column. Labels may wrap between words ("STRESS" above
     "MANAGEMENT"); they must never break inside one, which is what `anywhere` did.
     10px uppercase bold with no tracking is ~62px for MANAGEMENT against ~66px of
     usable column at the 1280 container. */
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 10px 4px;
  vertical-align: bottom;
  text-align: center;
  word-wrap: normal;
  word-break: keep-all;
  -webkit-hyphens: none;
          hyphens: none;
}
.grs__table .grs__th-name,
.grs__table .grs__th-basis {
  text-align: left;
  padding: 10px 14px;
}
/* Two levels of grouping now: product type (the section) contains protein bands.
   The type row has to outrank the band row or the hierarchy inverts and the bands
   read as the sections. Ink + heavier for type, dark + lighter for band. */
.grs__table .grs__typerow th {
  background: var(--grs-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 10px 14px;
  text-align: left;
}
.grs__table .grs__catrow th {
  background: var(--grs-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 7px 14px;
  text-align: left;
  padding-left: 28px;
}
.grs__table .grs__name {
  text-align: left;
  padding: 10px 14px;
  border-right: 1px solid var(--grs-border);
  border-bottom: 1px solid var(--grs-border);
  font-size: 13.5px;
  font-weight: 700;
  background: #fff;
}
.grs__meta {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--grs-secondary);
  margin-top: 2px;
}
.grs__table .grs__basiscell {
  padding: 10px 14px;
  border-bottom: 1px solid var(--grs-border);
  font-size: 12.5px;
  font-style: italic;
  color: var(--grs-secondary);
}
/* The shade lives on the <td>, NOT on the button.
   `height: 100%` on a table-cell child resolves against no fixed height, so the
   button collapses to its content and leaves white bands across the row. Colouring
   the cell and making the button transparent is what keeps the fill edge-to-edge. */
.grs__table .grs__cell {
  padding: 0;
  border-bottom: 1px solid var(--grs-border);
  border-left: 1px solid var(--grs-subtle);
}
.grs__score {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  color: inherit;
  width: 100%;
  height: 44px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: block;
}
/* Score fills. Ink text below 4, white at 4 and above — see the ramp note at the
   top of this file. Every step also prints its number, so colour is never the
   only carrier of meaning. */
.grs__cell--s1,  .grs__badge--s1  { background: var(--grs-s1); color: var(--grs-ink); }
.grs__cell--s2,  .grs__badge--s2,
.grs__cell--s3,  .grs__badge--s3  { background: var(--grs-s2); color: var(--grs-ink); }
.grs__cell--s4,  .grs__badge--s4,
.grs__cell--s5,  .grs__badge--s5,
.grs__cell--s6,  .grs__badge--s6  { background: var(--grs-s4); color: #fff; }
.grs__cell--s7,  .grs__badge--s7,
.grs__cell--s8,  .grs__badge--s8  { background: var(--grs-s7); color: #fff; }
.grs__cell--s9,  .grs__badge--s9,
.grs__cell--s10, .grs__badge--s10 { background: var(--grs-s9); color: #fff; }
/* PENDING REVIEW — a number, but no evidence claim.
   Dashed outline rather than a fill, so it reads as "not settled" at a glance and
   can never be mistaken for a step on the shade ramp. */
.grs__cell--pending,
.grs__badge--pending {
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 5px,
    rgba(32, 32, 32, 0.05) 5px, rgba(32, 32, 32, 0.05) 10px
  );
  color: var(--grs-secondary);
  box-shadow: inset 0 0 0 1px var(--grs-border);
}
.grs__badge--pending {
  border: 1px dashed var(--grs-secondary);
  box-shadow: none;
}
/* NOT SCORED — different from a 1, and it must look different.
   The dash is real text, so the meaning survives with CSS off. Not a button:
   there is no reasoning to open. */
.grs__table .grs__cell--na {
  background: repeating-linear-gradient(
    -45deg,
    #fff, #fff 4px,
    var(--grs-subtle) 4px, var(--grs-subtle) 8px
  );
  color: var(--grs-secondary);
  text-align: center;
  font-size: 13px;
  cursor: default;
}
/* Mobile-only affordances — above 767px all 11 columns fit and nothing swipes. */
.grs__swipehint { display: none; }
.grs__scrollwrap { position: relative; }
.grs__hint {
  font-size: 12.5px;
  color: var(--grs-secondary);
  margin: 12px 0 0;
}
/* --- Detail --------------------------------------------------------------- */
/* --- Score detail flyout ---------------------------------------------------
   Dimensions, colour and slide behaviour copied from the Customizer's
   ScoopGuidePanel so the two read as the same component. It replaced an inline
   panel below the table, which with 28 rows was off-screen for anyone not already
   scrolled to the bottom — clicking a score looked like it did nothing.

   Offset from the top by the site header's height: the header is `fixed top-0`, so a
   panel starting at 0 has its eyebrow and title hidden underneath it. Mirrors the
   header-hidden state the same way the sticky goal row does.

   `--header-offset`, NOT `--header-height`. The latter measures the header bar alone
   and excludes the discount banner, which is correct for sticky UI that only appears
   after scrolling — but this panel opens on a click, including at the very top of the
   page where the banner is still on screen. With --header-height the panel's eyebrow
   and the top of its title slide underneath the banner. Both are published by
   HeaderScroll.js; the fallback chain degrades to the old behaviour rather than to 0. */
.grs__flyout {
  position: fixed;
  top: 3.75rem;
  top: var(--header-offset, var(--header-height, 3.75rem));
  bottom: 0;
  right: -29.25rem;
  width: 29.25rem;
  max-width: 100vw;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--grs-subtle);
  border-left: 1px solid var(--grs-border);
  transition: right var(--grs-duration) var(--grs-ease),
              top var(--grs-duration) var(--grs-ease);
}
:root.header-hidden .grs__flyout { top: 0; }
.grs--flyout-open .grs__flyout { right: 0; }
/* Click-anywhere-else to dismiss, matching the Customizer's DimensionsPanel: a
   full-viewport button at 20% black. `visibility` rather than `display` so the fade
   has something to transition, and pointer-events stay off while closed so the grid
   underneath is still clickable. */
.grs__scrim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 39;
  background: #000;
  opacity: 0;
  visibility: hidden;
  cursor: default;
  transition: opacity var(--grs-duration) var(--grs-ease),
              visibility var(--grs-duration) var(--grs-ease);
}
.grs--flyout-open .grs__scrim {
  opacity: 0.2;
  visibility: visible;
}
.grs__flyout-inner {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 20px 8px;
}
.grs__flyout-inner p { margin: 0; }
.grs__flyout-title {
  font-size: 19px;
  font-weight: 700;
  /* Display leading. Without it the title inherits the theme's paragraph
     line-height, and the two-line methodology heading opens a gap wide enough to read
     as two separate headings. Same omission the page H1 had — headings need their own
     leading, because the body value is set for a completely different job. */
  line-height: 1.25;
  margin: 4px 0 0;
}
.grs__flyout-foot {
  flex: none;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--grs-subtle);
  border-top: 1px solid var(--grs-border);
}
.grs__flyout-studieshead {
  margin-top: 20px !important;
}
.grs__flyout-studieshead {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--grs-secondary);
}
.grs__flyout-studies {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.grs__flyout-studies li {
  font-size: 13px;
  line-height: 1.45;
  padding-top: 10px;
  border-top: 1px solid var(--grs-border);
}
.grs__flyout-studies li:first-child { border-top: 0; padding-top: 0; }
.grs__flyout-nostudies {
  margin-top: 16px !important;
}
.grs__flyout-nostudies {
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--grs-secondary);
}
.grs__detail-goal {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--grs-secondary);
}
.grs__detail-tier {
  margin-top: 2px !important;
}
.grs__detail-tier {
  font-size: 13px;
  color: var(--grs-secondary);
}
.grs__detail-why {
  margin-top: 10px !important;
}
.grs__detail-why {
  font-size: 14px;
  line-height: 1.6;
}
.grs__detail-cite {
  margin-top: 10px !important;
}
.grs__detail-cite {
  font-size: 12.5px;
  font-style: italic;
  color: var(--grs-secondary);
}
/* Any score of 3 or below carries the disclaimer with it. A "2" with no context
   reads as a product defect, which is the single thing this page exists to prevent. */
.grs__detail-lowscore {
  margin-top: 12px !important;
}
.grs__detail-lowscore {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--grs-secondary);
  border-top: 1px solid var(--grs-border);
  padding-top: 10px;
}
/* --- Methodology + CTA ---------------------------------------------------- */
/* The accordion supplies its own top border, chevron and heading type from
   components/accordion.css — only the spacing above it and the body copy inside it
   belong to this section. */
.grs__methodbody {
  font-size: 14px;
  line-height: 1.65;
  color: var(--grs-secondary);
  max-width: 820px;
  margin-top: 16px;
}
.grs__methodbody h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--grs-ink);
  /* Tighter than the body copy below it, so a heading that wraps still reads as one
     unit. These are short today but the copy is merchant-adjacent and can grow. */
  line-height: 1.3;
  margin: 20px 0 6px;
}
.grs__tierkey {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  font-size: 13.5px;
  margin: 10px 0 4px;
}
.grs__tierkey p { margin: 0; }
.grs__tierkey b { color: var(--grs-ink); }
.grs__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* Matches the Recipe Book's CTA glyph. `fill: currentColor` is what lets it invert
   with the theme button on hover, when the fill goes transparent and the text turns
   black — a hard-coded colour would vanish or clash. */
.grs__glyph {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  fill: currentColor;
}
.grs__glyph svg {
  width: 100%;
  height: 100%;
}
.grs__ctarow { margin-top: 32px; }
/* No button styles here on purpose — the CTA uses the theme's `.button` component so
   it inherits the site's hover, active and focus treatment. This file only positions
   it. */
/* ==========================================================================
   MOBILE — every override lives in this one block, per the handoff.
   Two enhancements the desktop DOM does not have: a per-row "Read why" toggle
   and a close button on the detail sheet. Both are added by the JS.
   ========================================================================== */
@media (max-width: 767px) {
  /* The bottom padding clears the docked CTA. The handoff puts this on <body>; keeping
     it on the section's own wrapper means the page doesn't reach outside itself for a
     layout it owns, and nothing else on the site inherits a stray offset. */
  .grs__wrap {
    padding: 20px 16px calc(76px + env(safe-area-inset-bottom));
  }

  .grs__h1 { font-size: 24px; line-height: 1.25; }
  .grs__sub { margin-bottom: 24px; }
  .grs__sub p { font-size: 14.5px; }

  /* Tabs become equal halves, 48px tall for the touch target. */
  .grs__tabs { margin-bottom: 0; }

  .grs__tab {
    flex: 1;
    margin-right: 0;
    padding: 14px 0;
    min-height: 48px;
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  /* Full-bleed swipe rail, snapping to chip starts. NOT sticky: two stacked rails
     plus the grid's own header row pinned all three things to the top of a phone
     screen at once, which left almost no room for the table itself. The grid header
     is the one that earns the space. */
  .grs__picker-label { display: none; }

  .grs__chips {
    margin: 0 -16px 18px;
    padding: 12px 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    border-bottom: 1px solid var(--grs-border);
    scrollbar-width: none;
  }

  .grs__chips::-webkit-scrollbar { display: none; }

  /* Only the touch target and the snap behaviour differ on mobile — the pill's
     shape, type and colour are the same as desktop and as the Recipe Book. */
  .grs__chip {
    padding: 11px 18px;
    min-height: 44px;
    scroll-snap-align: start;
  }

  /* The secondary rail keeps its subordinate weight on mobile too. Slightly larger
     than desktop's 32px for a usable touch target, still clearly below the 44px
     primary pill — without this override it inherits the full primary size and the
     two rails become indistinguishable. */
  .grs__chips--secondary .grs__chip {
    min-height: 38px;
    padding: 8px 13px;
    font-size: 12.5px;
  }

  .grs__h2 { font-size: 17px; }
  .grs__ranknote { font-size: 12.5px; }
  .grs__list { margin-top: 14px; }

  .grs__row {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 16px 0;
  }

  .grs__badge {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    font-size: 17px;
  }

  .grs__rowname { font-size: 15px; line-height: 1.3; }
  .grs__tier { margin-top: 4px !important; }
  .grs__tier { font-size: 10.5px; letter-spacing: 1.2px; }

  /* Closed rows clamp the reasoning to two lines and hide the basis line; the
     disclosure button reveals both. */
  .grs__why {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .grs__row.is-open .grs__why {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .grs__basis { display: none; }
  .grs__row.is-open .grs__basis { display: block; }

  .grs__more {
    display: block;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: none;
    border: 0;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--grs-secondary);
    padding: 8px 0 0;
    min-height: 36px;
    cursor: pointer;
  }

  .grs__row.is-open .grs__more { color: var(--grs-ink); }

  .grs__legend { font-size: 11.5px; gap: 8px 14px; }
  .grs__sw { width: 13px; height: 13px; }

  /* Full-bleed table that swipes sideways: 13 columns cannot fit a phone, so this is
     the one place horizontal scrolling is right. No max-height — the PAGE owns
     vertical scrolling, so the grid is never a box you scroll inside.

     ⚠ A STICKY HEADER ROW IS NOT POSSIBLE HERE IN CSS ALONE. `overflow-x: auto`
     makes this a scroll container on both axes (per spec a non-`visible` value on
     one axis computes the other to `auto`), so a sticky <th> resolves against THIS
     box rather than the viewport. Capping the height does make the header stick —
     it was tried — but it turns the grid into a nested scroll area that swallows
     vertical swipes, so you cannot scroll the page with a finger over the table.
     That trade is worse than the missing sticky header.

     The only way to have both is a JS-cloned floating header, which is what
     GoalResearchScore.js does — see buildFloatHeader(). The sticky ingredient COLUMN
     below is plain CSS and works either way: you need to know which row you are
     reading while swiping across goals. */
  /* Full bleed moves to the WRAPPER. The fade is painted on the wrapper's right edge,
     so if the negative margin stayed on the scroller the fade would sit 16px inside
     the table's actual edge. */
  .grs__scrollwrap {
    margin: 0 -16px;
  }

  .grs__scroll {
    overflow-x: auto;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  /* The "there is more" signal. A gradient implies content continues in a way an
     off-screen scrollbar never does — mobile hides those, which is the whole reason
     eleven columns read as two.

     pointer-events:none so it never eats a tap on the score underneath it. JS clears
     it at the end of the scroll via .is-scrolled-end; if that never runs the fade
     simply stays on, which is the safe failure — a slightly over-eager hint rather
     than a missing one. */
  .grs__scrollwrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* 22px, not 44. At 44 the ramp reached across a whole ~64px goal column and
       washed out the score sitting in it — the hint was obscuring the data it was
       pointing at. Half that keeps the falloff inside the column gutter. */
    width: 22px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 88%);
    transition: opacity var(--grs-duration) var(--grs-ease);
  }

  .grs__scrollwrap.is-scrolled-end::after { opacity: 0; }

  .grs__swipehint {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--grs-secondary);
    margin: 0 0 8px;
  }

  /* Reset the desktop offset. These do not actually stick on mobile — see the note
     on .grs__scroll — but leaving a header-height offset on a non-sticking element
     would push the header row down by that amount. */
  .grs__table .grs__th-goal,
  .grs__table .grs__th-name,
  .grs__table .grs__th-basis {
    top: 0;
  }

  /* Fixed clone of the header row, positioned and filled by GoalResearchScore.js.
     Exists only on mobile — desktop has a real sticky header. Empty and display:none
     until JS positions it, so it costs nothing without JS.

     `overflow: hidden` clips the clone as the wrapper scrolls sideways; the JS
     translates the inner table by -scrollLeft to keep it aligned with the live one
     underneath. z-index sits above the sticky name column (3) but below the flyout. */
  .grs__gridfloat {
    position: fixed;
    display: none;
    overflow: hidden;
    z-index: 15;
    background: #fff;
    pointer-events: none;
    border-bottom: 2px solid var(--grs-ink);
  }

  .grs__gridfloat table {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
  }

  /* The clone must not re-declare stickiness — JS counter-translates the name column
     instead, so it holds position without resolving against the float container. */
  .grs__gridfloat th {
    background: #fff;
  }

  /* Content-driven again on mobile: the table is wider than the screen and swipes,
     so columns size to their content rather than dividing a fixed width. */
  .grs__table {
    min-width: 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    table-layout: auto;
  }

  .grs__table .grs__th-goal {
    font-size: 9.5px;
    letter-spacing: 0.3px;
    padding: 8px 4px;
    min-width: 46px;
  }

  .grs__table .grs__th-name {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 134px;
    max-width: 134px;
    padding: 8px 10px 8px 16px;
  }

  .grs__table .grs__name {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 134px;
    max-width: 134px;
    padding: 8px 10px 8px 16px;
    border-right: 0;
    /* A hairline divider, not a shadow — a real shadow reads as a floating panel. */
    box-shadow: 1px 0 0 var(--grs-border);
    font-size: 11.5px;
    line-height: 1.25;
  }

  .grs__meta { font-size: 10px; }

  /* Hidden on mobile, not dropped from the DOM — the same content is reachable in
     the detail sheet, and the markup stays identical across breakpoints. */
  .grs__table .grs__th-basis,
  .grs__table .grs__basiscell { display: none; }

  /* BOTH grouping levels pin left, for the same reason the product-name column does:
     swipe across the goals and the label telling you which group you are in must not
     slide away.

     ⚠ THE STICKY GOES ON THE LABEL, NOT THE CELL. These are <th colspan="13">, so the
     cell already fills its containing block edge to edge and has ZERO range to shift —
     `position: sticky` on it is a silent no-op, which is why an earlier attempt to
     stick the cells changed nothing. An inline-block span inside the cell has the full
     table width to move within, so it can hold position while the cell scrolls under
     it. The cell keeps its background, so the bar still spans the row.

     Padding moves off the cell and onto the span's `left`, or the two would stack and
     the label would start indented by both. */
  .grs__table .grs__typerow th,
  .grs__table .grs__catrow th {
    padding-left: 0;
  }

  .grs__table .grs__typerow .grs__grouplabel,
  .grs__table .grs__catrow .grs__grouplabel {
    position: -webkit-sticky;
    position: sticky;
    left: 16px;
    display: inline-block;
  }

  /* Keep the band indented under its type, as on desktop — otherwise both levels sit
     flush left and the nesting is lost exactly where the screen is narrowest. */
  .grs__table .grs__catrow .grs__grouplabel {
    left: 26px;
  }

  .grs__table .grs__cell { padding: 0; }
  .grs__score { height: 52px; font-size: 13px; min-width: 46px; }
  .grs__hint { font-size: 12px; }

  /* The flyout is the same component at both breakpoints — `max-width: 100vw` makes
     it near-full-width on a phone, which is how the Customizer's panel behaves too. */

  /* Sits at the end of the page like any other button, not docked to the viewport.
     A permanently fixed bar costs ~64px of a phone screen on a page whose whole job
     is showing a wide table, and it covered the last grid row while reading. */
  .grs__ctarow {
    padding-top: 8px;
  }

  /* Full-width on mobile. `.button` is a flex row with a 14rem min-width, so
     width:100% is all it needs — no re-declaring padding or colour. */
  .grs__ctarow .button {
    width: 100%;
  }
}
.hero-button-container a:not(:first-child) {
  margin-top: 1.5rem;
}
.list-by-letters li {
  text-underline-offset: 2px;
}
.fs-slider-prev-button {
  top: 0.5rem;
  left: 0.5rem;
  bottom: 1rem;
}
.fs-slider-next-button {
  top: 0.5rem;
  right: 0.5rem;
  bottom: 1rem;
}
.fs-slider-prev-button,  .fs-slider-next-button {
  min-width: 50px !important;
}
.fs-slider-prev-button,  .fs-slider-next-button {
  background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
  --tw-bg-opacity: 0.36;
}
.fs-slider-prev-button svg path,
.fs-slider-next-button svg path {
  stroke: #fff;
  stroke-width: 3px;
}
.fs-has-links:hover:after {
  color: #000 !important;
}
div.fs-wrapper div.fs-has-links::after {
  min-width: 180px;
}
.fs-wrapper div.fs-text-container .fs-entry-title, div.fs-detail-title {
  font-family: Arial,sans-serif !important;
}
/* ============================================================================
   Recipe Book — sections/pages/recipe-book.liquid
   Spec + decisions: docs/recipe-book-build-plan.md

   Mobile-first with ONE breakpoint at 900px plus a widening step at 1500px.
   Neither is a theme screen (theme lg is 1025px), so these are literal media
   queries rather than Tailwind variants — deliberately, to keep the handoff's
   "everything lives in one media block" structure intact.

   Type is the handoff's scale but NOT its family: the site renders Arial, and
   Arial has only 400/700, so the design's 500 renders Regular and 600 renders
   Bold. That is exactly what every other TN template already does.
   ============================================================================ */
.recipe-book {
  --rb-ink: #202020;
  --rb-secondary: #575656;
  --rb-border: #e4e4e4;
  --rb-subtle: #f7f7f7;
  --rb-fill: #e4e4e4;
  --rb-focus: #197034;
  --rb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --rb-duration: 200ms;
  --rb-gutter: 24px;
  --rb-tabs-height: 4.25rem;

  background: var(--rb-subtle);
  color: var(--rb-ink);
  display: flex;
  justify-content: center;
}
.recipe-book__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.recipe-book__doc {
  width: 100%;
  max-width: 480px;
  background: #fff;
}
/* Off by default: between the real header and the real footer, an ambient shadow
   reads as an embedded frame rather than a page. Opt in via section settings. */
.recipe-book--raised .recipe-book__doc {
  box-shadow: 0 0 48px rgba(32, 32, 32, 0.06);
}
.recipe-book__pad {
  padding-left: var(--rb-gutter);
  padding-right: var(--rb-gutter);
}
/* --- Focus -----------------------------------------------------------------
   The design's green ring is 6.16:1 on white but only 2.64:1 on a black fill,
   which fails WCAG 1.4.11. outline-offset lifts the ring onto the white page so
   it always has a passing background; dark surfaces get a white ring instead. */
.recipe-book .focus-visible {
  outline: 2px solid var(--rb-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.recipe-book :focus-visible {
  outline: 2px solid var(--rb-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.recipe-book__thanks .focus-visible {
  outline-color: #fff;
}
.recipe-book__thanks :focus-visible {
  outline-color: #fff;
}
/* Anchored / focused content must not land under the fixed header + sticky tabs. */
html[\:has\(.recipe-book\)] {
  scroll-padding-top: calc(3.75rem + var(--rb-tabs-height) + 8px);
  scroll-padding-top: calc(var(--header-height, 3.75rem) + var(--rb-tabs-height) + 8px);
}
html[\:has\(.recipe-book\)] {
  scroll-padding-top: calc(3.75rem + var(--rb-tabs-height) + 8px);
  scroll-padding-top: calc(3.75rem + var(--rb-tabs-height) + 8px);
  scroll-padding-top: calc(var(--header-height, 3.75rem) + var(--rb-tabs-height) + 8px);
}
html:has(.recipe-book) {
  scroll-padding-top: calc(3.75rem + var(--rb-tabs-height) + 8px);
  scroll-padding-top: calc(var(--header-height, 3.75rem) + var(--rb-tabs-height) + 8px);
}
/* --- Make position: sticky actually possible on this page ------------------
   theme.liquid sets `overflow-x: hidden` on BOTH <html> and <body>. Per spec, a
   non-`visible` value on one axis computes the other to `auto`, so each element
   becomes a scroll container — which breaks `position: sticky` for descendants.
   (Telling detail: the theme's only other "sticky" bar, in protein-calculator,
   is actually `position: fixed`.)

   `overflow-x: clip` still prevents horizontal scrolling but does NOT create a
   scroll container, so sticky works. Scoped with :has() so no other template is
   affected. If a target browser lacks :has()/clip support, the tab bar simply
   scrolls with the page rather than sticking — degraded, not broken. */
html[\:has\(.recipe-book\)],
html[\:has\(.recipe-book\)] body {
  overflow-x: clip;
}
html:has(.recipe-book),
html:has(.recipe-book) body {
  overflow-x: clip;
}
/* --- 1. Cover --------------------------------------------------------------- */
.recipe-book__cover-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--rb-ink);
}
.recipe-book__cover-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  filter: brightness(0.82);
}
.recipe-book__cover-scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(32, 32, 32, 0) 40%, rgba(32, 32, 32, 0.72) 100%);
}
.recipe-book__cover-overlay {
  position: absolute;
  left: var(--rb-gutter);
  right: var(--rb-gutter);
  bottom: 22px;
  color: #fff;
}
.recipe-book__cover-text {
  padding-top: 26px;
  padding-bottom: 20px;
}
.recipe-book__title {
  font-size: 38px;
  line-height: 42px;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.recipe-book__subline {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
}
/* --- Shared eyebrow --------------------------------------------------------- */
.recipe-book__eyebrow {
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
  color: var(--rb-secondary);
  margin-bottom: 12px;
}
.recipe-book__eyebrow--onDark {
  color: #fff;
  letter-spacing: 0.09rem;
  opacity: 0.85;
  margin-bottom: 8px;
}
.recipe-book__eyebrow--withGlyph {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.recipe-book__glyph {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--rb-ink);
  fill: currentColor;
}
.recipe-book__glyph--sm {
  width: 16px;
  height: 16px;
}
.recipe-book__glyph svg {
  width: 100%;
  height: 100%;
}
/* --- 2. Note from the team -------------------------------------------------- */
.recipe-book__note {
  padding-bottom: 26px;
}
.recipe-book__note-card {
  border: 1px solid var(--rb-border);
  border-radius: 12px;
  padding: 22px;
  background: #fff;
}
/* These wrappers hold `richtext` output, so the type has to be set on the inner <p>:
   the theme's global `p` rule (16px/24px, lib/typography.css) would otherwise win. */
.recipe-book__note-lede,
.recipe-book__note-body {
  margin-bottom: 14px;
}
.recipe-book__note-lede p,
.recipe-book__note-body p {
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 14px;
}
.recipe-book__note-lede p:last-child,
.recipe-book__note-body p:last-child {
  margin-bottom: 0;
}
.recipe-book__note-lede p { color: var(--rb-ink); }
.recipe-book__note-body p { color: var(--rb-secondary); }
.recipe-book__note-body strong {
  color: var(--rb-ink);
  font-weight: 600;
}
.recipe-book__note-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--rb-border);
  margin: 4px 0 14px;
  padding-top: 14px;
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--rb-ink);
  transition: opacity var(--rb-duration) var(--rb-ease);
}
.recipe-book__note-link:hover { opacity: 0.7; }
.recipe-book__note-link span:first-child { flex: 1; }
.recipe-book__note-link-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: var(--rb-ink);
  color: #fff;
}
.recipe-book__note-link-icon svg {
  width: 11px;
  height: 11px;
}
/* #969494 is 3.02:1 on white and fails AA at this size — the design's tertiary
   grey is only safe for non-text or 24px+. Secondary (#575656) is 7.32:1. */
.recipe-book__disclaimer {
  font-size: 12px;
  line-height: 18px;
  color: var(--rb-secondary);
}
/* --- 3. Sticky category tabs ------------------------------------------------
   The site header is `fixed top-0 z-50` and FADES OUT on scroll-down while still
   occupying the top of the viewport, so a static offset would leave a transparent
   gap with cards sliding through it. HeaderScroll.js publishes --header-height and
   mirrors the faded state onto <html>, so the bar rides at top:0 while the header
   is hidden and steps back down when it returns. */
.recipe-book__tabs {
  position: -webkit-sticky;
  position: sticky;
  top: 3.75rem;
  top: var(--header-height, 3.75rem);
  z-index: 30;
  background: #fff;
  border-top: 2px solid var(--rb-ink);
  border-bottom: 2px solid var(--rb-ink);
  transition: top var(--rb-duration) var(--rb-ease);
}
:root.header-hidden .recipe-book__tabs {
  top: 0;
}
.recipe-book__tabtrack {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: 12px var(--rb-gutter);
  scrollbar-width: none;
}
.recipe-book__tabtrack::-webkit-scrollbar {
  width: 0;
  height: 0;
}
/* The track is ~449px against 432px of mobile space, so it scrolls in every font.
   The scrollbar is hidden by design, which leaves no affordance — this fade is the
   only cue that there is more to the right. Trimming pill padding 18px -> 15px
   would make the track fit outright and remove the need for it (open decision). */
.recipe-book__tabs::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 75%);
  transition: opacity var(--rb-duration) var(--rb-ease);
}
/* Tabbing to the last pill scrolls it under the fade, which would wash out its
   focus ring — drop the fade entirely while the track has focus. */
.recipe-book__tabs:focus-within::after {
  opacity: 0;
}
.recipe-book__pill {
  display: block;
  flex: none;
  padding: 9px 18px;
  border: 1px solid var(--rb-border);
  border-radius: 24px;
  background: var(--rb-subtle);
  color: var(--rb-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.01rem;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--rb-duration) var(--rb-ease),
              color var(--rb-duration) var(--rb-ease),
              border-color var(--rb-duration) var(--rb-ease);
}
.recipe-book__pill[aria-current="true"] {
  background: var(--rb-ink);
  border-color: var(--rb-ink);
  color: #fff;
}
/* --- 4. Category header ----------------------------------------------------- */
.recipe-book__cathead {
  padding-top: 28px;
  padding-bottom: 6px;
}
.recipe-book__cattitle {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-bottom: 6px;
}
.recipe-book__catblurb {
  font-size: 14px;
  line-height: 21px;
  color: var(--rb-secondary);
}
/* --- 5. Recipe list --------------------------------------------------------- */
.recipe-book__grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding-top: 18px;
  padding-bottom: 8px;
}
.recipe-book__card {
  border: 1px solid var(--rb-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  height: 100%;
}
.recipe-book__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--rb-fill);
}
.recipe-book__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.recipe-book__cardbody {
  padding: 20px;
}
.recipe-book__index {
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
  color: var(--rb-secondary);
  margin-bottom: 8px;
}
.recipe-book__cardtitle {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-bottom: 12px;
}
.recipe-book__madewith {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 19px;
  color: var(--rb-secondary);
  margin-bottom: 18px;
}
.recipe-book__madewith strong {
  color: var(--rb-ink);
  font-weight: 600;
}
.recipe-book__madewith .recipe-book__glyph {
  margin-top: 1px;
}
/* Macro strip: a <dl> so each value is programmatically paired with its label.
   column-reverse keeps the designed value-above-label order without reversing
   the DOM, which would break the pairing for assistive tech. */
.recipe-book__macros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rb-border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}
.recipe-book__macro {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  text-align: center;
  border-left: 1px solid var(--rb-border);
}
.recipe-book__macro--lead {
  background: var(--rb-subtle);
  border-left: 0;
}
.recipe-book__macro dd {
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  margin: 0;
}
.recipe-book__macro dt {
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
  color: var(--rb-secondary);
  margin-top: 5px;
}
.recipe-book__serving {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 16px;
  margin-bottom: 20px;
  font-size: 11px;
  line-height: 16px;
  color: var(--rb-secondary);
}
.recipe-book__serving-alt {
  text-align: right;
}
/* --- Accordions ------------------------------------------------------------- */
.recipe-book__accordion {
  border-top: 1px solid var(--rb-border);
}
.recipe-book__accordion-heading {
  margin: 0;
  font: inherit;
}
.recipe-book__accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 14px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--rb-ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  text-align: left;
}
.recipe-book__chevron {
  display: inline-flex;
  flex: none;
  width: 15px;
  height: 9px;
  color: var(--rb-secondary);
  fill: currentColor;
  transition: transform var(--rb-duration) var(--rb-ease);
}
.recipe-book__chevron svg {
  width: 100%;
  height: 100%;
}
.recipe-book__accordion-trigger[aria-expanded="true"] .recipe-book__chevron {
  transform: rotate(180deg);
}
.recipe-book__ingredients,
.recipe-book__steps {
  list-style: none;
  margin: 0;
  padding: 0 0 18px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 20px;
}
.recipe-book__ingredients { gap: 9px; }
.recipe-book__steps { gap: 13px; }
.recipe-book__ingredients li {
  display: flex;
  gap: 11px;
}
.recipe-book__ingredients li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--rb-ink);
  margin-top: 7px;
}
.recipe-book__steps li {
  display: flex;
  gap: 12px;
}
.recipe-book__stepnum {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: var(--rb-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
/* --- CTA -------------------------------------------------------------------- */
.recipe-book__cta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--rb-ink);
  border-radius: 6px;
  background: transparent;
  color: var(--rb-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.03rem;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color var(--rb-duration) var(--rb-ease),
              color var(--rb-duration) var(--rb-ease);
}
.recipe-book__cta:hover {
  background: var(--rb-ink);
  color: #fff;
}
/* The glyph hardcodes ink for its standalone uses; inside a CTA it must follow
   the button's text color so it stays visible when hover inverts the fill. */
.recipe-book__cta .recipe-book__glyph {
  color: inherit;
}
.recipe-book__cta--onDark {
  margin-top: 12px;
  padding: 14px 16px;
  border-color: #fff;
  background: #fff;
  color: var(--rb-ink);
}
.recipe-book__cta--onDark:hover {
  background: transparent;
  color: #fff;
}
/* --- 6. Thanks -------------------------------------------------------------- */
.recipe-book__thanks {
  margin-top: 26px;
  background: var(--rb-ink);
  color: #fff;
  padding-top: 40px;
  padding-bottom: 44px;
}
.recipe-book__thanks-title {
  color: #fff;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-bottom: 12px;
}
/* The design's 52ch is font-relative — it measures 405px in Arial vs 417px in
   Archivo, changing the line length for a reason unrelated to design intent. */
.recipe-book__thanks-body {
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 24px;
  max-width: 26rem;
}
.recipe-book__thanks-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
/* ============================================================================
   Tablet: the 480px cap makes a landscape phone or small tablet look like a
   phone screenshot. Let the column breathe before the real 900px switch.
   ============================================================================ */
@media (min-width: 600px) {
  .recipe-book__doc {
    max-width: 640px;
  }
}
/* ============================================================================
   Desktop — the single 900px breakpoint. Everything that differs lives here.
   ============================================================================ */
@media (min-width: 900px) {
  .recipe-book {
    --rb-gutter: 64px;
  }

  .recipe-book__doc {
    max-width: 1240px;
  }

  .recipe-book__cover-media {
    aspect-ratio: 24 / 9;
  }

  .recipe-book__cover-overlay {
    bottom: 32px;
  }

  .recipe-book__title {
    font-size: 54px;
    line-height: 58px;
    margin-bottom: 8px;
  }

  .recipe-book__note {
    padding-bottom: 40px;
  }

  .recipe-book__note-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
    -moz-column-gap: 40px;
         column-gap: 40px;
    grid-row-gap: 4px;
    row-gap: 4px;
    padding: 32px 36px;
  }

  /* Placement is explicit, not auto-placed. Auto-placement puts whatever happens to
     be a child into the next free cell, so one stray element silently reshuffles the
     whole card (exactly what the nested-<p> bug did). */
  .recipe-book__note-card > .recipe-book__eyebrow,
  .recipe-book__note-card > .recipe-book__note-link,
  .recipe-book__note-card > .recipe-book__disclaimer {
    grid-column: 1 / -1;
  }

  .recipe-book__note-card > .recipe-book__note-lede {
    grid-column: 1;
  }

  .recipe-book__note-card > .recipe-book__note-body {
    grid-column: 2;
  }

  .recipe-book__note-lede,
  .recipe-book__note-body {
    margin-bottom: 0;
  }

  .recipe-book__note-link {
    margin-top: 20px;
  }

  .recipe-book__tabs::after {
    display: none;
  }

  .recipe-book__cathead {
    padding-top: 44px;
    padding-bottom: 4px;
  }

  .recipe-book__cattitle {
    font-size: 40px;
    line-height: 46px;
  }

  /* align-items: start matters — cards expand independently and must not be
     stretched to their tallest row sibling. */
  .recipe-book__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    align-items: start;
    grid-gap: 28px;
    gap: 28px;
    padding-top: 28px;
    padding-bottom: 24px;
  }

  .recipe-book__thanks {
    padding-top: 56px;
    padding-bottom: 60px;
  }

  .recipe-book__thanks-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-gap: 56px;
    gap: 56px;
    align-items: start;
  }

  .recipe-book__thanks-actions {
    margin-bottom: 0;
  }

  .recipe-book__cta--onDark {
    width: auto;
    align-self: flex-start;
  }
}
@media (min-width: 1500px) {
  .recipe-book__doc {
    max-width: 1440px;
  }

  /* An explicit 4-column track, per the spec. auto-fill alone would NOT get here:
     4 × 330px + 3 × 28px gap = 1404px, wider than the 1312px content box, so it
     settles at 3 columns. Cards land at 307px (265px of content), which is the
     tightest the design gets — the 4-up macro strip has ~5px of slack at that
     width, so don't narrow the column further without re-measuring it.

     Breakfast has 3 recipes and Drinks 6, so those categories render a partial
     final row. That is ordinary grid behaviour, and confirmed as accepted. */
  .recipe-book__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ============================================================================
   Motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .recipe-book *,
  .recipe-book__tabs {
    transition: none !important;
  }
}
.shop-by-category__cards-wrapper {
  width: calc( 100vw - 1.5rem );
}
.shop-by-category__cards {
  width: 100%;
}
.shop-by-category__card {
  position: relative;
  float: left;
  margin-right: 1rem;
  display: block;
  overflow: hidden;
  text-align: center;
  width: 62vw;
}
@media screen and (min-width: 1025px) {
  .shop-by-category__cards-wrapper {
    width: calc( 100vw - 1.5rem );
  }
  .shop-by-category__cards {
    width: calc( 100% - 24.5625rem );
  }
  .shop-by-category__card {
    width: calc( (100vw - 24.5625rem) / 2 );
  }
}
@media screen and (min-width: 1368px) {
  .shop-by-category__cards-wrapper {
    width: calc( 50vw + 760px );
  }
  .shop-by-category__cards {
    width: calc( 50vw + 275px );
  }
  .shop-by-category__card {
    width: calc( (50vw + 275px) / 3 );
  }
}
#customer_login #rc_login {
  display: none;
}
#recover {
  display: none;
}
#recover:target {
  display: block;
}
#recover:target + #login {
  display: none;
}
#login {
  margin-top: 2.5rem;
}
#login.mt-10 {
  margin-top: 2.5rem;
}
.account-disclaimer-text {
  margin-bottom: 2.5rem;
}
@media (min-width: 64.0625rem) {

  .account-disclaimer-text {
    margin-bottom: 1.5rem;
    max-width: 20.625rem;
  }
}
.account-disclaimer-text {
  text-underline-offset: 2px;
}
.account-disclaimer-text p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.order-history-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  padding: 1.5rem;
}
@media (min-width: 64.0625rem) {

  .order-history-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0px;
    background-color: transparent;
    padding: 0px;
  }

  .order-history-row:nth-child(2n+1) {
    --tw-bg-opacity: 1;
    background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
  }
}
.order-history-row:nth-child(2n) {
  --tw-bg-opacity: 1;
  background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
}
@media (min-width: 64.0625rem) {

  .order-history-row:nth-child(2n) {
    background-color: transparent;
  }
}
.order-history-row:first-child {
  display: none;
  background-color: transparent;
}
@media (min-width: 64.0625rem) {

  .order-history-row:first-child {
    display: grid;
  }
}
.order-history-head {
  display: inline-flex;
  flex-direction: column;
  border-bottom-width: 3px;
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
  padding-left: 1.5rem;
  padding-bottom: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.015625rem;
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.order-history-cell {
  display: inline-flex;
  flex-direction: column;
  font-size: 1rem;
  line-height: 1.125rem;
}
@media (min-width: 64.0625rem) {

  .order-history-cell {
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
  }

  .order-history-cell:first-child,  .order-history-head:first-child {
    padding-left: 2.25rem;
  }
}
.order-history-cell:nth-child(5) {
  padding-left: 0px;
}
@media (min-width: 64.0625rem) {

  .order-history-cell:nth-child(5) {
    align-items: flex-end;
  }
}
@media (min-width: 1280px) {

  .order-history-cell:nth-child(5) {
    padding-right: 1rem;
  }
}
.order-history-cell button {
  min-width: 0;
  min-width: initial;
}
.order-history-subheader {
  margin-bottom: 0.5rem;
  display: block;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.01375rem;
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
@media (min-width: 64.0625rem) {

  .order-history-subheader {
    display: none;
  }
}
.subscriptions-links li:hover::marker {
  content: "\2022";
}
.subscription-link-active::marker {
  content: "\2022";
}
.mobile-nav-select option:nth-child(3) {
  display: none;
}
.order-history-note ul {
  list-style-type: disc;
  padding-left: 1rem;
}
.paleopro [data-account-link], 
  .paleopro [data-nav-link] {
  font-weight: 700 !important;
}
.paleopro [data-account-link], 
  .paleopro [data-nav-link] {
  --tw-text-opacity: 1 !important;
  color: rgba(44, 44, 46, var(--tw-text-opacity)) !important;
}
.paleopro [data-account-link]:hover, 
  .paleopro [data-nav-link]:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(244, 235, 219, var(--tw-bg-opacity)) !important;
}
.paleopro [data-account-link]:hover, 
  .paleopro [data-nav-link]:hover {
  --tw-text-opacity: 1 !important;
  color: rgba(44, 44, 46, var(--tw-text-opacity)) !important;
}
.paleopro [data-account-link].bg-grey, 
  .paleopro [data-nav-link].bg-grey {
  --tw-bg-opacity: 1 !important;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity)) !important;
}
.paleopro [data-account-link].bg-grey, 
  .paleopro [data-nav-link].bg-grey {
  --tw-text-opacity: 1 !important;
  color: rgba(244, 235, 219, var(--tw-text-opacity)) !important;
}
.paleopro [data-account-link].bg-grey:hover, 
  .paleopro [data-nav-link].bg-grey:hover {
  --tw-text-opacity: 1 !important;
  color: rgba(244, 235, 219, var(--tw-text-opacity)) !important;
}
.paleopro .order-history-head {
  --tw-text-opacity: 1;
  color: rgba(44, 44, 46, var(--tw-text-opacity));
}
@media (min-width: 64.0625rem) {

  .paleopro .order-history-row:nth-child(2n+1) {
    --tw-bg-opacity: 1;
    background-color: rgba(242, 242, 240, var(--tw-bg-opacity));
  }
}
.paleopro .select-wrap.select-wrap--account-nav select {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.paleopro .select-wrap.select-wrap--account-nav:after {
  right: 1.5rem;
}
.paleopro .order-history-row:first-child {
  background-color: transparent;
}
.pdp-related-articles {
  display: grid;
  list-style-type: none;
  padding: 0px;
}
.pdp-related-articles li {
  display: none;
}
.pdp-related-articles li:nth-child(1), 
.pdp-related-articles li:nth-child(2), 
.pdp-related-articles li:nth-child(3) {
  display: flex;
}
.pdp-related-articles.expanded li {
  display: flex;
}
.paleopro {
/*
  .stamped-container {
    @apply font-interstate;
  }

  .stamped-review-header-title {
    @apply sub-regular;
  }*/
}
.paleopro [data-review-button] svg {
  --tw-text-opacity: 1;
  color: rgba(213, 149, 41, var(--tw-text-opacity));
}
[data-flavor-item] {
  flex: auto;
}
[data-flavor-item].active {
  --tw-bg-opacity: 1;
  background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.first-letter\:capitalize::first-letter {
  text-transform: capitalize;
}
.last-of-type\:pb-0:last-of-type {
  padding-bottom: 0px;
}
.focus-within\:max-w-\[15rem\]:focus-within {
  max-width: 15rem;
}
.focus-within\:opacity-100:focus-within {
  opacity: 1;
}
.hover\:border-mustard:hover {
  --tw-border-opacity: 1;
  border-color: rgba(213, 149, 41, var(--tw-border-opacity));
}
.hover\:border-white\/60:hover {
  border-color: rgba(255, 255, 255, 0.6);
}
.hover\:border-black:hover {
  --tw-border-opacity: 1;
  border-color: rgba(32, 32, 32, var(--tw-border-opacity));
}
.hover\:bg-light-grey:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
}
.hover\:bg-dark-grey:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(87, 86, 86, var(--tw-bg-opacity));
}
.hover\:bg-moss:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(45, 59, 39, var(--tw-bg-opacity));
}
.hover\:bg-black:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
}
.hover\:bg-white\/10:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.hover\:bg-grey:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(228, 228, 228, var(--tw-bg-opacity));
}
.hover\:bg-aztec-vanilla:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(244, 235, 219, var(--tw-bg-opacity));
}
.hover\:text-dark-grey:hover {
  --tw-text-opacity: 1;
  color: rgba(87, 86, 86, var(--tw-text-opacity));
}
.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.hover\:text-mustard:hover {
  --tw-text-opacity: 1;
  color: rgba(213, 149, 41, var(--tw-text-opacity));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.hover\:text-slate-grey:hover {
  --tw-text-opacity: 1;
  color: rgba(150, 148, 148, var(--tw-text-opacity));
}
.hover\:text-theme-text:hover {
  color: var(--text);
}
.hover\:\!text-theme-text-hover:hover {
  color: var(--text-hover) !important;
}
.hover\:\!text-aztec-vanilla:hover {
  --tw-text-opacity: 1 !important;
  color: rgba(244, 235, 219, var(--tw-text-opacity)) !important;
}
.hover\:\!text-dark-grey-paleo:hover {
  --tw-text-opacity: 1 !important;
  color: rgba(44, 44, 46, var(--tw-text-opacity)) !important;
}
.hover\:underline:hover {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.focus\:\!border-0:focus {
  border-width: 0px !important;
}
.focus\:\!border-greens-powder:focus {
  --tw-border-opacity: 1 !important;
  border-color: rgba(93, 118, 53, var(--tw-border-opacity)) !important;
}
.focus\:border-grey:focus {
  --tw-border-opacity: 1;
  border-color: rgba(228, 228, 228, var(--tw-border-opacity));
}
.focus\:bg-transparent:focus {
  background-color: transparent;
}
.focus\:\!shadow-none:focus {
  --tw-shadow: 0 0 rgba(0,0,0,0) !important;
  --tw-shadow-colored: 0 0 rgba(0,0,0,0) !important;
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
}
.focus\:\!outline-none:focus {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:\!ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0)) !important;
}
.focus-visible\:border-l-0.focus-visible {
  border-left-width: 0px;
}
.focus-visible\:border-l-0:focus-visible {
  border-left-width: 0px;
}
.focus-visible\:border-r-0.focus-visible {
  border-right-width: 0px;
}
.focus-visible\:border-r-0:focus-visible {
  border-right-width: 0px;
}
.focus-visible\:border-t-0.focus-visible {
  border-top-width: 0px;
}
.focus-visible\:border-t-0:focus-visible {
  border-top-width: 0px;
}
.focus-visible\:outline-none.focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.active\:\!border-greens-powder:active {
  --tw-border-opacity: 1 !important;
  border-color: rgba(93, 118, 53, var(--tw-border-opacity)) !important;
}
.group:hover .group-hover\:block {
  display: block;
}
.group:hover .group-hover\:inline {
  display: inline;
}
.group:hover .group-hover\:hidden {
  display: none;
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-slate-grey {
  --tw-text-opacity: 1;
  color: rgba(150, 148, 148, var(--tw-text-opacity));
}
.group:hover .group-hover\:hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.group:hover .group-hover\:hover\:text-theme-text:hover {
  color: var(--text);
}
.group:hover .group-hover\:hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgba(32, 32, 32, var(--tw-text-opacity));
}
.group:focus .group-focus\:opacity-100 {
  opacity: 1;
}
@media (min-width: 340px) {

  .xs\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 640px) {

  .sm\:mb-0 {
    margin-bottom: 0px;
  }

  .sm\:gap-0 {
    gap: 0px;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:text-center {
    text-align: center;
  }
}
@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:top-1\/2 {
    top: 50%;
  }

  .md\:right-0 {
    right: 0px;
  }

  .md\:bottom-\[1\.75rem\] {
    bottom: 1.75rem;
  }

  .md\:left-6 {
    left: 1.5rem;
  }

  .md\:right-6 {
    right: 1.5rem;
  }

  .md\:-bottom-6 {
    bottom: -1.5rem;
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .md\:mb-8 {
    margin-bottom: 2rem;
  }

  .md\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .md\:mb-4 {
    margin-bottom: 1rem;
  }

  .md\:mr-2 {
    margin-right: 0.5rem;
  }

  .md\:ml-2 {
    margin-left: 0.5rem;
  }

  .md\:ml-6 {
    margin-left: 1.5rem;
  }

  .md\:mt-6 {
    margin-top: 1.5rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline-block {
    display: inline-block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-\[0\.1875rem\] {
    height: 0.1875rem;
  }

  .md\:min-h-\[48px\] {
    min-height: 48px;
  }

  .md\:w-2\/5 {
    width: 40%;
  }

  .md\:w-3\/5 {
    width: 60%;
  }

  .md\:w-\[45\.625rem\] {
    width: 45.625rem;
  }

  .md\:w-4\/12 {
    width: 33.333333%;
  }

  .md\:w-\[64\%\] {
    width: 64%;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:w-\[9\.375rem\] {
    width: 9.375rem;
  }

  .md\:max-w-\[34\.5625rem\] {
    max-width: 34.5625rem;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }

  .md\:-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-\[repeat\(6\2c _minmax\(4\.75rem\2c _1fr\)\)\] {
    grid-template-columns: repeat(6, minmax(4.75rem, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-10 {
    gap: 2.5rem;
  }

  .md\:gap-20 {
    gap: 5rem;
  }

  .md\:gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

  .md\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px-\[6\.5rem\] {
    padding-left: 6.5rem;
    padding-right: 6.5rem;
  }

  .md\:px-\[3\.125rem\] {
    padding-left: 3.125rem;
    padding-right: 3.125rem;
  }

  .md\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:\!px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .md\:pl-28 {
    padding-left: 7rem;
  }

  .md\:pr-24 {
    padding-right: 6rem;
  }

  .md\:pt-\[5\.625rem\] {
    padding-top: 5.625rem;
  }

  .md\:pb-\[5\.625rem\] {
    padding-bottom: 5.625rem;
  }

  .md\:pr-4 {
    padding-right: 1rem;
  }

  .md\:pl-6 {
    padding-left: 1.5rem;
  }

  .md\:pr-2 {
    padding-right: 0.5rem;
  }

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

  .md\:text-\[24px\] {
    font-size: 24px;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:font-normal {
    font-weight: 400;
  }

  .md\:text-dark-grey {
    --tw-text-opacity: 1;
    color: rgba(87, 86, 86, var(--tw-text-opacity));
  }

  .md\:text-black {
    --tw-text-opacity: 1;
    color: rgba(32, 32, 32, var(--tw-text-opacity));
  }

  .group:hover .md\:group-hover\:opacity-100 {
    opacity: 1;
  }
}
@media (min-width: 64.0625rem) {

  .lg\:static {
    position: static;
  }

  .lg\:absolute {
    position: absolute;
  }

  .lg\:left-0 {
    left: 0px;
  }

  .lg\:left-1\/2 {
    left: 50%;
  }

  .lg\:right-0 {
    right: 0px;
  }

  .lg\:top-0 {
    top: 0px;
  }

  .lg\:bottom-0 {
    bottom: 0px;
  }

  .lg\:right-2 {
    right: 0.5rem;
  }

  .lg\:top-2\/4 {
    top: 50%;
  }

  .lg\:left-full {
    left: 100%;
  }

  .lg\:z-\[11\] {
    z-index: 11;
  }

  .lg\:order-\[0\] {
    order: 0;
  }

  .lg\:col-start-5 {
    grid-column-start: 5;
  }

  .lg\:col-end-6 {
    grid-column-end: 6;
  }

  .lg\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .lg\:mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .lg\:my-15 {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mb-0 {
    margin-bottom: 0px;
  }

  .lg\:mb-8 {
    margin-bottom: 2rem;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mr-6 {
    margin-right: 1.5rem;
  }

  .lg\:mb-12 {
    margin-bottom: 3rem;
  }

  .lg\:mt-12 {
    margin-top: 3rem;
  }

  .lg\:mt-\[5\.5rem\] {
    margin-top: 5.5rem;
  }

  .lg\:mt-32 {
    margin-top: 8rem;
  }

  .lg\:ml-0 {
    margin-left: 0px;
  }

  .lg\:mr-5 {
    margin-right: 1.25rem;
  }

  .lg\:mb-4 {
    margin-bottom: 1rem;
  }

  .lg\:mt-6 {
    margin-top: 1.5rem;
  }

  .lg\:mb-15 {
    margin-bottom: 60px;
  }

  .lg\:mt-5 {
    margin-top: 1.25rem;
  }

  .lg\:mb-16 {
    margin-bottom: 4rem;
  }

  .lg\:mb-\[1\.1875rem\] {
    margin-bottom: 1.1875rem;
  }

  .lg\:mb-20 {
    margin-bottom: 5rem;
  }

  .lg\:mt-20 {
    margin-top: 5rem;
  }

  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .lg\:mb-14 {
    margin-bottom: 3.5rem;
  }

  .lg\:mt-4 {
    margin-top: 1rem;
  }

  .lg\:mb-\[18px\] {
    margin-bottom: 18px;
  }

  .lg\:mr-10 {
    margin-right: 2.5rem;
  }

  .lg\:mt-8 {
    margin-top: 2rem;
  }

  .lg\:ml-8 {
    margin-left: 2rem;
  }

  .lg\:ml-auto {
    margin-left: auto;
  }

  .lg\:ml-5 {
    margin-left: 1.25rem;
  }

  .lg\:mr-4 {
    margin-right: 1rem;
  }

  .lg\:mt-14 {
    margin-top: 3.5rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-\[5\.5rem\] {
    height: 5.5rem;
  }

  .lg\:h-auto {
    height: auto;
  }

  .lg\:h-0 {
    height: 0px;
  }

  .lg\:h-24 {
    height: 6rem;
  }

  .lg\:h-\[19\.5rem\] {
    height: 19.5rem;
  }

  .lg\:h-\[6\.25rem\] {
    height: 6.25rem;
  }

  .lg\:h-8 {
    height: 2rem;
  }

  .lg\:max-h-10\.5 {
    max-height: 42px;
  }

  .lg\:max-h-10 {
    max-height: 2.5rem;
  }

  .lg\:max-h-\[100vh\] {
    max-height: 100vh;
  }

  .lg\:max-h-\[14rem\] {
    max-height: 14rem;
  }

  .lg\:min-h-\[47rem\] {
    min-height: 47rem;
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

  .lg\:w-auto {
    width: auto;
  }

  .lg\:w-full {
    width: 100%;
  }

  .lg\:w-24 {
    width: 6rem;
  }

  .lg\:w-\[21\.5625rem\] {
    width: 21.5625rem;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:w-2\/3 {
    width: 66.666667%;
  }

  .lg\:w-\[calc\(100\%-23\.25rem\)\] {
    width: calc(100% - 23.25rem);
  }

  .lg\:w-\[24rem\] {
    width: 24rem;
  }

  .lg\:w-\[30rem\] {
    width: 30rem;
  }

  .lg\:w-\[36\.75rem\] {
    width: 36.75rem;
  }

  .lg\:w-\[6\.25rem\] {
    width: 6.25rem;
  }

  .lg\:w-8 {
    width: 2rem;
  }

  .lg\:w-\[23\.25rem\] {
    width: 23.25rem;
  }

  .lg\:min-w-\[30\.5rem\] {
    min-width: 30.5rem;
  }

  .lg\:min-w-0 {
    min-width: 0px;
  }

  .lg\:min-w-\[18rem\] {
    min-width: 18rem;
  }

  .lg\:min-w-\[12\.5rem\] {
    min-width: 12.5rem;
  }

  .lg\:min-w-\[26\.75rem\] {
    min-width: 26.75rem;
  }

  .lg\:min-w-\[18\.125rem\] {
    min-width: 18.125rem;
  }

  .lg\:min-w-\[24rem\] {
    min-width: 24rem;
  }

  .lg\:max-w-\[20rem\] {
    max-width: 20rem;
  }

  .lg\:max-w-\[26\.5rem\] {
    max-width: 26.5rem;
  }

  .lg\:max-w-\[14\.25rem\] {
    max-width: 14.25rem;
  }

  .lg\:max-w-fit {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
  }

  .lg\:max-w-\[10\.25rem\] {
    max-width: 10.25rem;
  }

  .lg\:max-w-\[calc\(50vw\+14rem\)\] {
    max-width: calc(50vw + 14rem);
  }

  .lg\:max-w-\[19\.9375rem\] {
    max-width: 19.9375rem;
  }

  .lg\:max-w-\[26\.75rem\] {
    max-width: 26.75rem;
  }

  .lg\:max-w-none {
    max-width: none;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

  .lg\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:-translate-y-2\/4 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:-translate-x-2\/4 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:rotate-0 {
    --tw-rotate: 0deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-flow-row {
    grid-auto-flow: row;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-customizer {
    grid-template-columns: 1fr 36.5rem;
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-page {
    grid-template-columns: 23.25rem 1fr;
  }

  .lg\:grid-rows-\[unset\] {
    grid-template-rows: initial;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:items-stretch {
    align-items: stretch;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-20 {
    gap: 5rem;
  }

  .lg\:gap-14 {
    gap: 3.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-y-12 {
    row-gap: 3rem;
  }

  .lg\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .lg\:overflow-x-hidden {
    overflow-x: hidden;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-b-0 {
    border-bottom-width: 0px;
  }

  .lg\:border-l-0 {
    border-left-width: 0px;
  }

  .lg\:border-b {
    border-bottom-width: 1px;
  }

  .lg\:border-white {
    --tw-border-opacity: 1;
    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
  }

  .lg\:border-grey {
    --tw-border-opacity: 1;
    border-color: rgba(228, 228, 228, var(--tw-border-opacity));
  }

  .lg\:bg-transparent {
    background-color: transparent;
  }

  .lg\:bg-plain-naked {
    --tw-bg-opacity: 1;
    background-color: rgba(242, 242, 240, var(--tw-bg-opacity));
  }

  .lg\:bg-light-grey {
    --tw-bg-opacity: 1;
    background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
  }

  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .lg\:px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }

  .lg\:px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .lg\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .lg\:px-\[3\.75rem\] {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }

  .lg\:py-\[5\.625rem\] {
    padding-top: 5.625rem;
    padding-bottom: 5.625rem;
  }

  .lg\:px-\[2\.75rem\] {
    padding-left: 2.75rem;
    padding-right: 2.75rem;
  }

  .lg\:px-\[6\.75rem\] {
    padding-left: 6.75rem;
    padding-right: 6.75rem;
  }

  .lg\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .lg\:px-\[4\.625rem\] {
    padding-left: 4.625rem;
    padding-right: 4.625rem;
  }

  .lg\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .lg\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:pt-0 {
    padding-top: 0px;
  }

  .lg\:pl-16 {
    padding-left: 4rem;
  }

  .lg\:pr-8 {
    padding-right: 2rem;
  }

  .lg\:pt-28 {
    padding-top: 7rem;
  }

  .lg\:pl-6 {
    padding-left: 1.5rem;
  }

  .lg\:pr-6 {
    padding-right: 1.5rem;
  }

  .lg\:pt-24 {
    padding-top: 6rem;
  }

  .lg\:pl-0 {
    padding-left: 0px;
  }

  .lg\:pr-0 {
    padding-right: 0px;
  }

  .lg\:pt-4 {
    padding-top: 1rem;
  }

  .lg\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .lg\:pb-\[66\.66\%\] {
    padding-bottom: 66.66%;
  }

  .lg\:pl-15 {
    padding-left: 60px;
  }

  .lg\:pr-33 {
    padding-right: 132px;
  }

  .lg\:pt-6 {
    padding-top: 1.5rem;
  }

  .lg\:pt-\[5\.625rem\] {
    padding-top: 5.625rem;
  }

  .lg\:pb-\[5\.625rem\] {
    padding-bottom: 5.625rem;
  }

  .lg\:pt-20 {
    padding-top: 5rem;
  }

  .lg\:pb-\[4\.5rem\] {
    padding-bottom: 4.5rem;
  }

  .lg\:pt-10 {
    padding-top: 2.5rem;
  }

  .lg\:pb-\[5\.5rem\] {
    padding-bottom: 5.5rem;
  }

  .lg\:pl-\[3\.75rem\] {
    padding-left: 3.75rem;
  }

  .lg\:pl-9 {
    padding-left: 2.25rem;
  }

  .lg\:pb-8 {
    padding-bottom: 2rem;
  }

  .lg\:pt-\[2\.875rem\] {
    padding-top: 2.875rem;
  }

  .lg\:pl-\[7\.5rem\] {
    padding-left: 7.5rem;
  }

  .lg\:pr-\[3\.75rem\] {
    padding-right: 3.75rem;
  }

  .lg\:pb-10 {
    padding-bottom: 2.5rem;
  }

  .lg\:pb-0 {
    padding-bottom: 0px;
  }

  .lg\:pt-8 {
    padding-top: 2rem;
  }

  .lg\:pl-1 {
    padding-left: 0.25rem;
  }

  .lg\:pt-1 {
    padding-top: 0.25rem;
  }

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

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

  .lg\:text-slate-grey {
    --tw-text-opacity: 1;
    color: rgba(150, 148, 148, var(--tw-text-opacity));
  }

  .lg\:no-underline {
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
  }

  .lg\:opacity-0 {
    opacity: 0;
  }

  .lg\:backdrop-blur-none {
    --tw-backdrop-blur: blur(0);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }

  .lg\:transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .lg\:duration-300 {
    transition-duration: 300ms;
  }

  .lg\:ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .lg\:duration-300 {
    -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
  }

  .lg\:ease-in-out {
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .lg\:hover\:bg-moss:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(45, 59, 39, var(--tw-bg-opacity));
  }

  .lg\:hover\:bg-black:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
  }

  .lg\:hover\:text-plain-naked:hover {
    --tw-text-opacity: 1;
    color: rgba(242, 242, 240, var(--tw-text-opacity));
  }

  .lg\:hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
  }

  .lg\:hover\:underline:hover {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
  }

  .group:hover .lg\:group-hover\:block {
    display: block;
  }

  .group:hover .lg\:group-hover\:h-\[1\.625rem\] {
    height: 1.625rem;
  }

  .group:hover .lg\:group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .group:hover .lg\:group-hover\:transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .group:hover .lg\:group-hover\:bg-dark-grey-paleo {
    --tw-bg-opacity: 1;
    background-color: rgba(44, 44, 46, var(--tw-bg-opacity));
  }

  .group:hover .lg\:group-hover\:bg-black {
    --tw-bg-opacity: 1;
    background-color: rgba(32, 32, 32, var(--tw-bg-opacity));
  }

  .group:hover .lg\:group-hover\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  }

  .group:hover .lg\:group-hover\:bg-opacity-0 {
    --tw-bg-opacity: 0;
  }

  .group:hover .lg\:group-hover\:bg-opacity-25 {
    --tw-bg-opacity: 0.25;
  }

  .group:hover .lg\:group-hover\:bg-opacity-50 {
    --tw-bg-opacity: 0.5;
  }

  .group:hover .lg\:group-hover\:bg-opacity-75 {
    --tw-bg-opacity: 0.75;
  }

  .group:hover .lg\:group-hover\:bg-opacity-100 {
    --tw-bg-opacity: 1;
  }

  .group:hover .lg\:group-hover\:opacity-100 {
    opacity: 1;
  }

  .group:hover .lg\:group-hover\:backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }

  .group:hover .lg\:group-hover\:transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .group:hover .lg\:group-hover\:duration-300 {
    transition-duration: 300ms;
  }

  .group:hover .lg\:group-hover\:ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .group:hover .lg\:group-hover\:duration-300 {
    -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
  }

  .group:hover .lg\:group-hover\:ease-in-out {
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@media (min-width: 1280px) {

  .xl\:min-w-\[52\.75rem\] {
    min-width: 52.75rem;
  }

  .xl\:pl-16 {
    padding-left: 4rem;
  }

  .xl\:pr-4 {
    padding-right: 1rem;
  }
}
@media (min-width: 1386px) {

  .xl-wide\:row-span-2 {
    grid-row: span 2 / span 2;
  }

  .xl-wide\:max-w-none {
    max-width: none;
  }

  .xl-wide\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1536px) {

  .\32xl\:order-none {
    order: 0;
  }

  .\32xl\:row-span-2 {
    grid-row: span 2 / span 2;
  }

  .\32xl\:row-span-1 {
    grid-row: span 1 / span 1;
  }

  .\32xl\:w-\[11\.25rem\] {
    width: 11.25rem;
  }

  .\32xl\:grid-cols-\[11\.25rem_1fr_1\.3fr\] {
    grid-template-columns: 11.25rem 1fr 1.3fr;
  }

  .\32xl\:pl-28 {
    padding-left: 7rem;
  }
}
.\[\&\>span\]\:cursor-default>span {
  cursor: default;
}
.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}
.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}