/** Shopify CDN: Minification failed

Line 2130:20 Unexpected ")"

**/
/* WEB COMPONENTS */

quantity-input {
  display: block;
}

/* BASE */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;

  min-height: 100vh;
  min-height: -webkit-fill-available;

  height: -webkit-fill-available;

  scroll-behavior: smooth;
  font-size: var(--font-body--size);
  accent-color: var(--color-accent);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

a {
  text-decoration: none;
}

address {
  font-style: normal;
}

ul,
ol,
li {
  list-style-type: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

/* STYLEGUIDE */

body {
  color: var(--color-main);
  background-color: var(--color-white);

  font-family: var(--font-body--family);
  font-size: var(--font-body--size);
  font-style: normal;
  letter-spacing: var(--font-body--letter);
  font-weight: var(--font-body--weight);
  line-height: var(--font-body--line);
}

main {
  scroll-behavior: smooth;
  margin-top: 0;
  margin-left: var(--menu-width--closed);
  margin-top: var(--header-height);

  height: auto; 
  min-height: var(--main-minheight);
}

.show-banner main {
  margin-top: var(--banner-height);
}

.template-page main :has(.section-page-hero) {
  margin-top: 0;
}

p {
  margin-bottom: 1em;
}

a {
  color: var(--color-main);
  display: inline-block;
}

[popover] {
  width: fit-content;
  height: fit-content;
  color: var(--color-main);
  background-color: var(--color-white);
  inset: 0px;
  margin: 0 auto;
  border: none;
  padding: 1rem;
  overflow: auto;
}

strong,
b {
  font-family: var(--font-body--family);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--font-body--letter);
  line-height: var(--font-body--line);
  font-variant: all-small-caps;
}

h1,
.h1 {
  font-size: var(--font-body--size-xl);
  color: currentColor;
}

h2,
.h2 {
  font-size: var(--font-body--size-l);
  color: currentColor;
}

h3,
.h3 {
  font-size: var(--font-body--size);
  color: currentColor;
}

h4,
.h4 {
  font-size: var(--font-body--size-s);
  color: currentColor;
  font-variant: all-small-caps;
}

pre {
  display: none;
}

.rte {
  max-width: var(--measure);
}
.uppercase {
  text-transform: uppercase;
}
.small-caps {
  font-variant: all-small-caps;
}

i, em, .i, p i, p em, .rte i, .rte p em {
  font-style: italic;
  font-family: var(--font-italic--family);
  font-weight: var(--font-italic--weight);
}

p a,
.rte p a,
.rte a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-size);
  display: inline;
  transition:
    text-decoration 180ms ease-in-out,
    color 180ms ease-in-out;
  color: var(--color-blue);
}

.rte p:last-child,
.rte p:last-of-type,
p:last-child {
  margin-bottom: 0;
}

label {
  font-size: var(--font-body--size);
}

select {
  position: relative;
  width: 100%;
  padding: 0.5rem 1rem;

  color: var(--color-main);
  background-color: var(--color-white);

  letter-spacing: inherit;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: left;
  appearance: auto;
  cursor: default;
  margin: 0em;
  border: none;
  appearance: none;
}

.select {
  position: relative;
  display: flex;
  justify-content: space-between;

  background-color: var(--color-white);
  border: var(--rule);
  border-radius: var(--radius-s);
}

button,
input[type="submit"] {
  color: var(--color-main);
  background-color: var(--color-white);

  padding: 0;
  letter-spacing: inherit;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: left;
  appearance: auto;
  background-color: transparent;
  cursor: pointer;
  margin: 0;
  border: none;
  appearance: none;
}

input[type="checkbox"] {
  border-radius: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: transparent;
  appearance: auto;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  border-radius: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
  border-radius: var(--radius-s);
  border: var(--rule);
  background: transparent;
  appearance: none;
  padding: 0.66rem 0.66rem;
  cursor: text;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
  color: var(--color-grey);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
input[type="text"]:active,
input[type="email"]:active,
input[type="password"]:active,
input[type="tel"]:active,
textarea:active {
  background-color: var(--color-white);
  outline-color: var(--outline-color);
  outline-offset: var(--outline-offset);
  border-color: transparent;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto;
  margin: 0;
  padding: 0;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -text-align: left;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

input[type="radio"] + label {
  display: flex;
  align-items: center;
  height: 1.5rem;

  cursor: pointer;

  position: relative;

  color: var(--color-grey);
  line-height: var(--font-btn--line);
}
input[type="radio"] + label::before,
input[type="radio"] + label::after {
  content: "";

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  border-radius: var(--radius-50);
  border: var(--rule-grey);

  width: 1.5rem;
  height: 1.5rem;

  padding: 0.02rem;

  position: absolute;
  left: 0;
}

input[type="radio"] + label:after {
  opacity: 0;

  top: 2px;
  left: 2px;

  width: calc(1.5rem - 4px);
  height: calc(1.5rem - 4px);
  background-color: var(--color-main);
  border: var(--rule-white);

  transition: opacity 240ms ease-in-out 0s;
}

input[type="radio"]:checked + label,
input[type="radio"]:focus + label,
input[type="radio"]:hover + label {
  color: var(--color-main);
}
input[type="radio"]:checked + label::before,
input[type="radio"]:focus + label::before,
input[type="radio"]:hover + label::before {
  background-color: var(--color-white);
  border: var(--rule);
}

input[type="radio"]:focus + label::after,
input[type="radio"]:hover + label::after,
input[type="radio"]:checked + label::after {
  opacity: 1;
}

fieldset {
  display: block;
  margin: 0;
  padding: 0;
  appearance: none;
  border: none;
}

textarea {
  resize: none;
  appearance: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  appearance: none;
  border: none;
}

table {
  width: 100%;
}

.product-main__description table
 {
  display: none;
}

table th {
  /* font-family: var(--font-heading-family); */
  font-size: calc(var(--font-body--size));

  letter-spacing: 0.1em;
  line-height: var(--font-btn--line);
  font-style: normal;
  font-weight: 400;

  padding: 0;
  text-align: left;
}

table tr {
  text-align: left;
}

li.list-menu__item {
  width: 100%;
  padding: 0;
}

li.list-menu__item a {
  width: 100%;
  padding: 0.25rem 0;

  transition-property: color, text-underline-offset;
  transition: 400ms ease-in-out;

  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-size);
}

li.list-menu__item a:hover,
li.list-menu__item a:focus-visible {
  color: var(--color-main);
  text-decoration-color: var(--color-main);
  text-underline-offset: var(--underline-offset);
}
/* Utility Classes */

.pointer-none {
  pointer-events: none;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.ovh {
  overflow: hidden;
}

.ov-x {
  overflow-x: scroll;
}
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.absolute-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.absolute-center-y {
  top: 50%;
  transform: translateY(-50%);
}

.absolute-center-x {
  left: 50%;
  transform: translateX(-50%);
}

.left-0 {
  left: 0;
}

.left-center {
  left: 50%;
  transform: translateX(-50%);
}

.right-0 {
  right: 0;
}

.top-0 {
  top: 0;
}

.bottom-0 {
  bottom: 0;
}

.fixed {
  position: fixed;
}

.fixed-center {
  top: 0;
}

.sticky {
  position: sticky;
}

.pad-1 {
  padding: 1rem;
}

.pad-2 {
  padding: 2rem;
}

.pad-3 {
  padding: 3rem;
}

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

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

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

.text-i,
em {
  font-style: italic;
}

.font-reg {
  font-family: var(--font-body--family);
  font-weight: 400;
}

.font-med {
  font-family: var(--font-body-medium);
  font-weight: 500;
}

.font-body-s {
  font-size: var(--font-body--size-s);
}

.font-body-l {
  font-size: var(--font-body--size-l);
}

.width-50 {
  width: 50%;
}

.grid {
  display: grid;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0.5rem, 1fr));
  grid-gap: 2rem;
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0.5rem, 1fr));
  grid-gap: 1rem;
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0.5rem, 1fr));
  grid-gap: 1rem;
}

.grid-6 {
  grid-template-columns: repeat(6, minmax(0.5rem, 1fr));
  grid-gap: 1rem;
}

.grid-8 {
  grid-template-columns: repeat(8, minmax(0.5rem, 1fr));
  grid-gap: 2rem;
}

.col-span-1 {
  grid-column: span 1;
}

.col-span-2 {
  grid-column: span 2;
}

.row-span-1 {
  grid-row: span 1;
}

.row-span-2 {
  grid-row: span 2;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.row-reverse {
  flex-direction: row-reverse;
}

.justify-start {
  justify-content: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}

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

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

.items-end {
  align-items: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-1 {
  gap: 1rem;
}

.gap-075 {
  gap: 0.75rem;
}

.gap-05 {
  gap: 0.5rem;
}

.color-grey {
  color: var(--color-grey);
}

.color-white {
  color: var(--color-white);
}

.color-red {
  color: red;
}

.color-main {
  color: var(--color-main);
}

.bg-main {
  background-color: var(--color-main);
}

.bg-green {
  background-color: var(--color-main);
}

.bg-grey {
  background-color: var(--color-grey);
}

.bg-white {
  background-color: var(--color-white);
}

.border-main {
  border: var(--rule);
}

.border-grey {
  border: var(--rule-grey);
}

.border-white {
  border: var(--rule-white);
}

.bt-grey {
  border-top: var(--rule-grey);
}

.bg-blur {
  background: var(--color-blur, rgba(255, 255, 255, 0.01));
  backdrop-filter: var(--blur);
}

.bg-blur-s {
  background: var(--color-blur, rgba(255, 255, 255, 0.01));
  backdrop-filter: var(--blur-s);
}

.rad-xs {
  border-radius: var(--radius-xs);
}

.rad-s {
  border-radius: var(--radius-s);
}

.rad-m {
  border-radius: var(--radius-m);
}

.rad-l {
  border-radius: var(--radius-l);
}

.rad-100 {
  border-radius: 100%;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.ratio-57 {
  aspect-ratio: 5/7;
}

@supports not (aspect-ratio: 5/7) {
  .ratio-57 {
    padding-top: 140%;
  }

  .ratio-57 > * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  .ratio-57 > img {
    width: 100%;
    height: auto;
  }

  .ratio-57 > video {
    width: 100%;
    height: auto;
  }
}

.ratio-1 {
  aspect-ratio: 1/1;
}

@supports not (aspect-ratio: 1/1) {
  .ratio-1 {
    padding-top: 100%;
  }

  .ratio-1 > * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  .ratio-1 > img {
    width: 100%;
    height: auto;
  }

  .ratio-1 > video {
    width: 100%;
    height: auto;
  }
}

.ratio-46 {
  aspect-ratio: 4/6;
}

@supports not (aspect-ratio: 4/6) {
  .ratio-46 {
    padding-top: 150%;
  }

  .ratio-46 > * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  .ratio-46 > img {
    width: 100%;
    height: auto;
  }

  .ratio-46 > video {
    width: 100%;
    height: auto;
  }
}

.ratio-64 {
  aspect-ratio: 6/4;
}

@supports not (aspect-ratio: 6/4) {
  .ratio-64 {
    padding-top: 66.6666666667%;
  }

  .ratio-64 > * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  .ratio-64 > img {
    width: 100%;
    height: auto;
  }

  .ratio-64 > video {
    width: 100%;
    height: auto;
  }
}

.ratio-169 {
  aspect-ratio: 16/9;
}

@supports not (aspect-ratio: 16/9) {
  .ratio-169 {
    padding-top: 56.25%;
  }

  .ratio-169 > * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  .ratio-169 > img {
    width: 100%;
    height: auto;
  }

  .ratio-169 > video {
    width: 100%;
    height: auto;
  }
}

.obj-cover {
  object-fit: cover;
}

.obj-fill {
  object-fit: fill;
}

.opacity-0 {
  opacity: 0;
}

.opacity-025 {
  opacity: 0.25;
}

.opacity-05 {
  opacity: 0.5;
}

.opacity-075 {
  opacity: 0.75;
}

.opacity-1 {
  opacity: 1;
}

/* no-js */
.no-js,
.no-js-list {
  display: none;
}

.wrapper {
  padding: 0 var(--container-2);
}

.m-auto {
  margin: 0 auto;
}

.z-base {
  z-index: var(--z-base);
}
.z-filter {
  z-index: var(--z-filter);
}
.z-header {
  z-index: var(--z-header);
}
.z-modal {
  z-index: var(--z-modal);
}

.nowrap {
  white-space: nowrap;
}

details {
  --present: 0;
  border-bottom: var(--rule);
}

details summary,
summary,
.styled-select select {
  padding: var(--container-2) 0;

  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;

  color: currentColor;
  line-height: 1;
}

summary .summary__toggle {
  pointer-events: none;
  width: 1em;
  height: 1em;

  display: flex;
  align-items: center;
}

details summary svg {
  transform: rotate(0);
  /* transition-property: transform, opacity; */
  transition: transform 180ms linear 0s;
  width: 100%;
  height: 100%;
}

details[open] > summary {
  cursor: pointer;
}

details[open] > summary svg:first-child {
  transform: rotate(45deg);
}
.styled-select {
    display: block;
    position: relative;
}

.styled-select select {
    border: var(--rule);
    padding: var(--container-2);
}

svg.styled-select__icon {
    position: absolute;
    /* right: 0; */
    top: 50%;
    right: var(--container-2);
    transform: translateY(-50%);
}
/* --Buttons */

.btn,
input[type="submit"].btn {
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--container-3) var(--container-2);
  cursor: pointer;
  line-height: var(--font-btn--line);
  font-style: normal;
  border: var(--rule-trans);
  color: var(--color-white);
  background: var(--color-main);
  transition:
    background 240ms ease-in-out 0s,
    color 240ms ease-in-out 0s;
}


input[type="submit"].btn:focus-visible {
  color: var(--color-main);
  background: var(--color-white);
  border-color: currentColor;
}


input[type="submit"].btn.btn--disabled,
.btn.btn--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

input[type="submit"].btn.btn--primary,
.btn.btn--primary {
  color: var(--color-white);
  background: var(--color-main);
  text-align: center;
}

input[type="submit"].btn.btn--primary:hover,
.btn.btn--primary:focus-visible {
  color: var(--color-main);
  background: var(--color-white);
}

.btn.btn--secondary,
input[type="submit"].btn.btn--secondary {
  color: currentColor;
  background: var(--color-blur);
  backdrop-filter: var(--blur);
  border-color: currentColor;
  text-align: center;

  align-self: start;
}

input[type="submit"].btn.btn.btn--secondary:hover,
input[type="submit"].btn.btn--secondary:focus-visible,
.btn.btn--secondary:hover,
.btn.btn--secondary:focus-visible {
  color: var(--color-white);
  background: currentColor;
}

.btn.btn--tertiary,
input[type="submit"].btn.btn--tertiary {
  color: var(--color-blue);
  background: transparent;
  border: none;
  box-shadow: none;

  font-style: italic;
  font-family: var(--font-italic--family);
  font-weight: var(--font-italic--weight);
  font-size: var(--font-italic--size);
  line-height: var(--font-italic--line);
  letter-spacing: var(--font-italic--letter);

  padding: 0.66rem 0;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-size);
  text-decoration: none;
  transition: none;
}
.btn.btn--tertiary:hover,
.btn.btn--tertiary:focus-visible,
input[type="submit"].btn.btn--tertiary:hover,
input[type="submit"].btn.btn--tertiary:focus-visible {
  color: var(--color-main);
  background: transparent;
  text-decoration: underline;
}

.add-to-cart-button {
  width: 100%;
  padding: 0.66rem 1rem;
  min-height: var(--container-x2);
  background: var(--color-blue);
}

.add-to-cart-button.quick-add-to-cart-button,
.quick-add-to-cart-button,
.add-to-cart-button.quick-add-to-cart-button {
  margin: 0;
  align-self: flex-start;

  width: auto;
  height: auto;
  padding: 0.33rem 0.66rem;
  border-radius: var(--radius-l);

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: var(--font-body-medium);
  font-weight: 500;
  font-size: var(--font-body--size-s);
  line-height: var(--font-btn--line);

  font-style: normal;

  background-color: var(--color-main);
  color: var(--color-white);
  border: var(--rule-trans);
}

.add-to-cart-button.quick-add-to-cart-button:hover,
.quick-add-to-cart-button:hover,
.add-to-cart-button.quick-add-to-cart-button:hover {
  background-color: var(--color-white);
  color: var(--color-main);
}

.add-to-cart-button.quick-add-to-cart-button span.quick-cta,
.quick-add-to-cart-button span.quick-cta,
.add-to-cart-button.quick-add-to-cart-button span.quick-cta {
  display: block;
}

.add-to-cart-button.quick-add-to-cart-button span.confirmation-cta,
.quick-add-to-cart-button span.confirmation-cta,
.add-to-cart-button.quick-add-to-cart-button span.confirmation-cta {
  display: none;
  color: var(--color-main);
}

.add-to-cart-button.quick-add-to-cart-button.confirmation,
.quick-add-to-cart-button.confirmation,
.add-to-cart-button.quick-add-to-cart-button.confirmation {
  background-color: var(--color-white);
  border: var(--rule-main);
}

.add-to-cart-button.quick-add-to-cart-button.confirmation span.quick-cta,
.quick-add-to-cart-button.confirmation span.quick-cta,
.add-to-cart-button.quick-add-to-cart-button.confirmation span.quick-cta {
  display: none;
}

.add-to-cart-button.quick-add-to-cart-button.confirmation span.confirmation-cta,
.quick-add-to-cart-button.confirmation span.confirmation-cta,
.add-to-cart-button.quick-add-to-cart-button.confirmation
  span.confirmation-cta {
  display: block;
}

.add-to-cart-button.quick-add-to-cart-button.disabled--button,
.quick-add-to-cart-button.disabled--button,
.add-to-cart-button.quick-add-to-cart-button.disabled--button {
  background-color: var(--color-grey);
  color: var(--color-white);
  cursor: not-allowed;
}

.add-to-cart-button--popover :hover {
  background-color: var(--color-white);
  color: var(--color-main);
}

.add-to-cart-button--popover span.quick-cta {
  display: block;
}

.add-to-cart-button--popover span.confirmation-cta {
  display: none;
  color: var(--color-main);
}

.add-to-cart-button--popover.confirmation {
  background-color: var(--color-white);
}
.add-to-cart-button--popover.confirmation span.quick-cta {
  display: none;
}
.add-to-cart-button--popover.confirmation span.confirmation-cta {
  display: block;
}
.add-to-cart-button--popover.disabled--button {
  background-color: var(--color-grey);
  color: var(--color-white);
  cursor: not-allowed;
}

.add-to-cart-button .confirmation-message,
.add-to-cart-button .disabled-text {
  display: none;
}

.add-to-cart-button.confirmation .confirmation-message {
  display: flex;
}
.add-to-cart-button.confirmation .call-to-action,
.add-to-cart-button.confirmation.disabled--button .disabled-text {
  display: none;
}

.add-to-cart-button span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: var(--font-btn--line);
}

.add-to-cart-button .call-to-action {
  display: flex;
  align-items: center;
}

.add-to-cart-button.disabled--button .disabled-text {
  display: flex;
}

.add-to-cart-button.disabled--button .disabled-text.in-cart-text {
  display: none;
}

.product-main__info
  .add-to-cart-form
  .add-to-cart-button.disabled--button
  .call-to-action,
.product-main__info
  .add-to-cart-form
  .add-to-cart-button.confirmation
  .call-to-action {
  display: none;
}

button.read-more {
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-size);
  text-decoration: underline;

  transition-property: text-decoration;
  transition: 240ms ease-in-out 0s;

  display: inline;
  padding: 1em 0;
  color: var(--color-main);
}

button.read-more[aria-expanded="true"] {
  opacity: 0.33;
}

/* HTML Classes */

html.mini-cart-open body,
html.menu-active body,
html.search-active body,
html.quick-add-popover-open body {
  overflow: hidden;
  max-height: 100vh;
}

/* Annuouncement Bar */
html.show-banner body {
  margin-top: var(--banner-height);
}

html.show-banner header.main-header {
  top: var(--banner-height);
}

/* Overflow Gallerys */

ul.ov-gallery {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  scrollbar-width: thin;
  scrollbar-color: var(--color-grey) transparent;
}

li.ov-gallery__item {
  scroll-snap-align: start;
  flex: 0 0 calc(100% - 3rem);
  max-width: 80%;
}
li.ov-gallery__item:last-child {
  margin-right: 1rem;
}

/* Mini Components */

/* Icons */
.icon {
  max-width: 2rem;
}

.header__item:hover .icon,
.header__item:focus-visible .icon {
  pointer-events: none;
}

/* linklists */
.linklist {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.linklist__title {
  margin-bottom: 0.5rem;
}

.linklist__item {
  display: flex;
  padding: 0.25rem 0;
}

.linklist li:first-child {
  padding-top: 0;
}

/* Labels */
.product-labels {
  z-index: 1;

  display: flex;
  flex-direction: row;

  top: 0;
  left: 0;
}

.product-labels.show-desktop {
  display: none;
}

.product-card .product-labels {
  top: 0;
  left: 0;
  margin: 0;
  flex-wrap: wrap;
}

.product-main .product-labels {
  top: 0;
  left: 0;
}

.product-labels__item {
  padding: 0.5rem 1rem;
  font-size: var(--font-body--size--s);
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.product-labels__item.bg-blur {
  background: var(--color-blur);
  backdrop-filter: var(--blur);
}

/* rte */
.rte ul li,
.metafield-rich_text_field ul li {
  list-style: disc;
  margin-left: 1rem;
}

.rte strong,
.rte b {
  font-family: var(--font-body--family);
}

.rte em,
.rte i {
  font-style: italic;
  font-family: var(--font-italic--family);
}

.rte img {
  background-color: transparent;
  max-width: 50%;
}
.rte img.w-100 {
  max-width: 100%;
  width: 100%;
}

.rte img.w-66 {
  max-width: 66%;
  width: 100%;
}

.rte img.w-50 {
  max-width: 50%;
  width: 100%;
}

.rte img.w-33 {
  max-width: 33%;
  width: 100%;
}

/* Search Form */
.form-search__terms {
  display: flex;
  flex-flow: row wrap;
  gap: var(--container-2);
}

html.search-active .form-search-hidden .form-search__terms {
  width: 100%;
  opacity: 1;
}

html.search-active .form-search-hidden .form-search__button-open {
  display: none;
}

html.search-active .form-search-hidden .form-search__button-close {
  display: block;
}

/* Price */

.price > * {
  display: inline-block;
  vertical-align: top;
}

.price.price--unavailable {
  visibility: hidden;
}

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

.price .price-item {
  margin: 0 0.33rem 0 0;
}


.price__regular .price-item--regular {
  margin-right: 0;
}

.price:not(.price--show-badge) .price-item--last:last-of-type {
  margin: 0;
}

.price--large {
  font-size: 1.6rem;
  line-height: var(--font-btn--line);
  letter-spacing: 0.13rem;
}

.price--sold-out .price__availability,
.price__regular {
  display: block;
}

.price__sale,
.price__availability,
.price .price__badge-sale,
.price .price__badge-sold-out,
.price--on-sale .price__regular,
.price--on-sale .price__availability {
  display: none;
}

.price--sold-out .price__badge-sold-out,
.price--on-sale .price__badge-sale {
  display: inline-block;
}

.price--on-sale .price__sale {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.price--center {
  display: initial;
  justify-content: center;
}

.price--on-sale .price-item--regular {
  text-decoration: line-through;
  color: var(--color-grey);
}

.add-to-cart-button .price--on-sale .price-item--regular {
  color: var(--color-white);
  opacity: 0.7;
}

.unit-price {
  display: block;
}

/* Show and Hide */

.show-mobile,
.large-hide {
  display: block;
}

.show-desktop,
.small-hide {
  display: none;
}

.page-404__title {
  padding: 2rem 1rem;
  margin: 0 auto;
}

.page-404 .page-content {
  padding: 1rem 1rem 3rem;
  margin: 0 auto;
}

.below-1 {
  margin-bottom: 1rem;
}

.below-2 {
  margin-bottom: 2rem;
}

.below-3 {
  margin-bottom: 3rem;
}

@media (pointer: fine) and (hover: hover) {

  
  p a:hover,
  .rte p a:hover,
  .rte a:hover {
    text-decoration: none;
  }

  button.read-more:hover {
    text-decoration: none;
  }

  .btn:hover {
    color: var(--color-blue);
    background: var(--color-white);
    border-color: currentColor;
  }
  input[type="submit"].btn.btn--primary:hover {
    color: var(--color-main);
    background: var(--color-white);
  }
  input[type="submit"].btn.btn.btn--secondary:hover,
  .btn.btn--secondary:hover {
    color: var(--color-white);
    background: currentColor;
  }
  .btn.btn--tertiary:hover,
  input[type="submit"].btn.btn--tertiary:hover {
    color: var(--color-main);
    background: transparent;
    text-decoration: underline;
  }
  .add-to-cart-button.quick-add-to-cart-button:hover,
  .quick-add-to-cart-button:hover,
  .add-to-cart-button.quick-add-to-cart-button:hover {
    background-color: var(--color-white);
    color: var(--color-main);
  }
  .header__item:hover .icon {
    pointer-events: none;
  }
}

/* General Desktop */
@media screen and (min-width: 800px) {
  .wrapper {
    padding: 0 var(--container);
  }

  .show-mobile,
  .large-hide,
  .medium-hide {
    display: none;
  }

  .show-desktop,
  .small-hide {
    display: inherit;
  }

  .btn,
  input[type="submit"].btn {
    padding: 0.5rem 0.75rem;
  }

  .grid-2 {
    grid-gap: 1rem;
  }

  .show-mobile.form-search__button {
    display: flex;
    width: 2rem;
  }

  .linklist--title {
    margin-bottom: 1rem;
  }

  .linklist li:first-child {
    padding-top: 0;
  }

  .product-labels {
    top: 0.66rem;
    left: 0.66rem;
  }

  .product-main .product-labels {
    top: 1rem;
    bottom: auto;
  }

  .product-main .product-labels__item {
    font-size: var(--font-body--size-s);
    padding: 0.33em 0.5em;
  }

  .add-to-cart-button.quick-add-to-cart-button,
  .quick-add-to-cart-button.disabled--button {
    font-size: var(--font-body--size);
    padding: 0.5rem 1rem;
    line-height: var(--font-btn--line);
  }

  .show-banner main {
    margin-top: calc(var(--header-height) + var(--banner-height));
  }

  .grid--right {
    grid-column: 2 / span 1;
  }

  .grid--left {
    grid-column: 1 / span 1;
  }

  .grid-row--1 {
    grid-row: span 1;
  }

  .grid-row--1--start-1 {
    grid-row: 1 / span 1;
  }

  .grid-row--1--start-2 {
    grid-row: 2 / span 1;
  }

  .grid-row--1--start-3 {
    grid-row: 3 / span 1;
  }
  .grid-row--1--start-4 {
    grid-row: 4 / span 1;
  }
  .grid-row--1--start-5 {
    grid-row: 5 / span 1;
  }
  .grid-row--1--start-6 {
    grid-row: 6 / span 1;
  }

  .grid-row--2 {
    grid-row: span 2;
  }

  .grid-row--2--start-1 {
    grid-row: 1 / span 2;
  }

  .grid-row--2--start-2 {
    grid-row: 2 / span 2;
  }

  .grid-row--2--start-3 {
    grid-row: 3 / span 2;
  }

  .grid-row--2--start-4 {
    grid-row: 4 / span 2;
  }

  .grid-row--2--start-5 {
    grid-row: 5 / span 2;
  }

  .grid-row--2--start-6 {
    grid-row: 6 / span 2;
  }

  .grid-row--3 {
    grid-row: span 3;
  }

  .grid-row--3--start-1 {
    grid-row: 1 / span 3;
  }

  .grid-row--3--start-2 {
    grid-row: 2 / span 3;
  }

  .grid-row--3--start-3 {
    grid-row: 3 / span 3;
  }

  .grid-row--3--start-4 {
    grid-row: 4 / span 3;
  }

  .grid-row--3--start-5 {
    grid-row: 5 / span 3;
  }

  .grid-row--3--start-6 {
    grid-row: 6 / span 3;
  }

  .grid-row--4 {
    grid-row: span 4;
  }

  .grid-row--4--start-1 {
    grid-row: 1 / span 4;
  }

  .grid-row--4--start-2 {
    grid-row: 2 / span 4;
  }

  .grid-row--4--start-3 {
    grid-row: 3 / span 4;
  }

  .grid-row--4--start-4 {
    grid-row: 4 / span 4;
  }

  .grid-row--4--start-5 {
    grid-row: 5 / span 4;
  }

  .grid-row--4--start-6 {
    grid-row: 6 / span 4;
  }

  .grid-row--5 {
    grid-row: span 5;
  }

  .grid-row--5--start-1 {
    grid-row: 1 / span 5;
  }

  .grid-row--5--start-2 {
    grid-row: 2 / span 5;
  }

  .grid-row--5--start-3 {
    grid-row: 3 / span 5;
  }

  .grid-row--5--start-4 {
    grid-row: 4 / span 5;
  }

  .grid-row--5--start-5 {
    grid-row: 5 / span 5;
  }

  .grid-row--5--start-6 {
    grid-row: 6 / span 5;
  }

  .grid-row--6 {
    grid-row: span 6;
  }

  .grid-row--6--start-1 {
    grid-row: 1 / span 6;
  }

  .grid-row--6--start-2 {
    grid-row: 2 / span 6;
  }

  .grid-row--6--start-3 {
    grid-row: 3 / span 6;
  }

  .grid-row--6--start-4 {
    grid-row: 4 / span 6;
  }

  .grid-row--6--start-5 {
    grid-row: 5 / span 6;
  }

  .grid-row--6--start-6 {
    grid-row: 6 / span 6;
  }

  .grid--full {
    grid-column: 1 / span 2;
  }
  .grid--full video {
    width: 100%;
  }

  main {
    margin-top: var(--header-height);
  }

  .template-index main {
    margin-top: 0;
  }

  .rte img {
    max-width: 33%;
  }
  .rte img.w-100--l {
    width: 100%;
    max-width: 100%;
  }

  .rte img.w-66--l {
    width: 100%;
    max-width: 66%;
  }

  .rte img.w-50--l {
    width: 100%;
    max-width: 50%;
  }

  .rte img.w-33--l {
    width: 100%;
    max-width: 33%;
  }

  body:has(header.transparent) main,
  .show-banner body:has(header.transparent) main {
    margin-top: 0;
  }
  a/* WEB COMPONENTS */

quantity-input {
    display: block;
  }

  /* BASE */

  * {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    margin: 0;
    padding: 0;

    min-height: 100vh;
    min-height: -webkit-fill-available;

    height: -webkit-fill-available;

    scroll-behavior: smooth;
    font-size: var(--font-body--size);
    accent-color: var(--color-accent);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol {
    margin: 0;
    padding: 0;
    font-weight: normal;
  }

  a {
    text-decoration: none;
  }

  address {
    font-style: normal;
  }

  ul,
  ol,
  li {
    list-style-type: none;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* STYLEGUIDE */

  body {
    color: var(--color-main);
    background-color: var(--color-white);

    font-family: var(--font-body--family);
    font-size: var(--font-body--size);
    font-style: normal;
    letter-spacing: var(--font-body--letter);
    font-weight: var(--font-body--weight);
    line-height: var(--font-body--line);
  }

  main {
    scroll-behavior: smooth;
    margin-top: 0;
    margin-left: var(--menu-width--closed);
    margin-top: var(--header-height);
  }

  .show-banner main {
    margin-top: var(--banner-height);
  }

  .template-page main :has(.section-page-hero) {
    margin-top: 0;
  }

  p {
    margin-bottom: 1em;
  }

  a {
    color: var(--color-main);
    display: inline-block;
  }

  [popover] {
    width: fit-content;
    height: fit-content;
    color: var(--color-main);
    background-color: var(--color-white);
    inset: 0px;
    margin: 0 auto;
    border: none;
    padding: 1rem;
    overflow: auto;
  }

  strong,
  b {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-style: normal;
    letter-spacing: var(--font-body--letter);
    line-height: var(--font-body--line);
    font-variant: all-small-caps;
  }

  h1,
  .h1 {
    font-size: var(--font-body--size-xl);
    color: currentColor;
  }

  h2,
  .h2 {
    font-size: var(--font-body--size-l);
    color: currentColor;
  }

  h3,
  .h3 {
    font-size: var(--font-body--size);
    color: currentColor;
  }

 
  pre {
    display: none;
  }

  .rte {
    max-width: var(--measure);
  }

  p a,
  .rte p a,
  .rte a {
    transition: color 180ms ease-in-out;
    color: var(--color-blue);
    /* text-decoration: underline; */
  }

  .rte p:last-child(),
  .rte p:last-of-type,
  p:last-child {
    margin-bottom: 0;
  }

  label {
    font-size: var(--font-body--size);
  }

  select {
    position: relative;
    width: 100%;
    padding: 0.5rem 1rem;

    color: var(--color-main);
    background-color: var(--color-white);

    letter-spacing: inherit;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: left;
    appearance: auto;
    cursor: default;
    margin: 0em;
    border: none;
    appearance: none;
  }

  .select {
    position: relative;
    display: flex;
    justify-content: space-between;

    background-color: var(--color-white);
    border: var(--rule);
    border-radius: var(--radius-s);
  }

  button,
  input[type="submit"] {
    color: var(--color-main);
    background-color: var(--color-white);

    padding: 0;
    letter-spacing: inherit;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: left;
    appearance: auto;
    background-color: transparent;
    cursor: pointer;
    margin: 0;
    border: none;
    appearance: none;
  }

  input[type="checkbox"] {
    border-radius: 0;
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
    appearance: auto;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 0;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  textarea {
    border-radius: var(--radius-s);
    border: var(--rule);
    background: transparent;
    appearance: none;
    padding: 0.66rem 0.66rem;
    cursor: text;
  }

  input[type="text"]::placeholder,
  input[type="email"]::placeholder,
  input[type="password"]::placeholder,
  input[type="tel"]::placeholder,
  textarea::placeholder {
    color: var(--color-grey);
  }

  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="tel"]:focus,
  textarea:focus,
  input[type="text"]:active,
  input[type="email"]:active,
  input[type="password"]:active,
  input[type="tel"]:active,
  textarea:active {
    background-color: var(--color-white);
    outline-color: var(--outline-color);
    outline-offset: var(--outline-offset);
    border-color: transparent;
  }

  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 0;
    width: auto;
    margin: 0;
    padding: 0;
    line-height: normal;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -text-align: left;
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
  }

  input[type="radio"] + label {
    display: flex;
    align-items: center;
    height: 1.5rem;

    cursor: pointer;

    position: relative;

    color: var(--color-grey);
    line-height: var(--font-btn--line);
  }
  input[type="radio"] + label::before,
  input[type="radio"] + label::after {
    content: "";

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    border-radius: var(--radius-50);
    border: var(--rule-grey);

    width: 1.5rem;
    height: 1.5rem;

    padding: 0.02rem;

    position: absolute;
    left: 0;
  }

  input[type="radio"] + label:after {
    opacity: 0;

    top: 2px;
    left: 2px;

    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    background-color: var(--color-main);
    border: var(--rule-white);

    transition: opacity 240ms ease-in-out 0s;
  }

  input[type="radio"]:checked + label,
  input[type="radio"]:focus + label,
  input[type="radio"]:hover + label {
    color: var(--color-main);
  }
  input[type="radio"]:checked + label::before,
  input[type="radio"]:focus + label::before,
  input[type="radio"]:hover + label::before {
    background-color: var(--color-white);
    border: var(--rule);
  }

  input[type="radio"]:focus + label::after,
  input[type="radio"]:hover + label::after,
  input[type="radio"]:checked + label::after {
    opacity: 1;
  }

  fieldset {
    display: block;
    margin: 0;
    padding: 0;
    appearance: none;
    border: none;
  }

  textarea {
    resize: none;
    appearance: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    appearance: none;
    border: none;
  }

  table {
    width: 100%;
  }

  table th {
    /* font-family: var(--font-heading-family); */
    font-size: calc(var(--font-body--size));

    letter-spacing: 0.1em;
    line-height: var(--font-btn--line);
    font-style: normal;
    font-weight: 400;

    padding: 0;
    text-align: left;
  }

  table tr {
    text-align: left;
  }

  li.list-menu__item {
    width: 100%;
    padding: 0;
  }

  li.list-menu__item a {
    width: 100%;
    padding: 0.25rem 0;

    transition-property: color, text-underline-offset;
    transition: 400ms ease-in-out;

    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: var(--underline-size);
  }

  li.list-menu__item a:hover,
  li.list-menu__item a:focus-visible {
    color: var(--color-main);
    text-decoration-color: var(--color-main);
    text-underline-offset: var(--underline-offset);
  }
  /* Utility Classes */

  .pointer-none {
    pointer-events: none;
  }

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .ovh {
    overflow: hidden;
  }

  .ov-x {
    overflow-x: scroll;
  }
  .uppercase {
    text-transform: uppercase;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .relative {
    position: relative;
  }

  .absolute {
    position: absolute;
  }

  .absolute-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .absolute-center-y {
    top: 50%;
    transform: translateY(-50%);
  }

  .absolute-center-x {
    left: 50%;
    transform: translateX(-50%);
  }

  .left-0 {
    left: 0;
  }

  .left-center {
    left: 50%;
    transform: translateX(-50%);
  }

  .right-0 {
    right: 0;
  }

  .top-0 {
    top: 0;
  }

  .bottom-0 {
    bottom: 0;
  }

  .fixed {
    position: fixed;
  }

  .fixed-center {
    top: 0;
  }

  .sticky {
    position: sticky;
  }

  .pad-1 {
    padding: 1rem;
  }

  .pad-2 {
    padding: 2rem;
  }

  .pad-3 {
    padding: 3rem;
  }

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

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

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

  .text-i,
  em {
    font-style: italic;
  }

  .font-reg {
    font-family: var(--font-body--family);
    font-weight: 400;
  }

  .font-med {
    font-family: var(--font-body-medium);
    font-weight: 500;
  }

  .font-body-s {
    font-size: var(--font-body--size-s);
  }

  .font-body-l {
    font-size: var(--font-body--size-l);
  }

  .width-50 {
    width: 50%;
  }

  .grid {
    display: grid;
  }

  .grid-2 {
    grid-template-columns: repeat(2, minmax(0.5rem, 1fr));
    grid-gap: 2rem;
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0.5rem, 1fr));
    grid-gap: 1rem;
  }

  .grid-4 {
    grid-template-columns: repeat(4, minmax(0.5rem, 1fr));
    grid-gap: 1rem;
  }

  .grid-6 {
    grid-template-columns: repeat(6, minmax(0.5rem, 1fr));
    grid-gap: 1rem;
  }

  .grid-8 {
    grid-template-columns: repeat(8, minmax(0.5rem, 1fr));
    grid-gap: 2rem;
  }

  .col-span-1 {
    grid-column: span 1;
  }

  .col-span-2 {
    grid-column: span 2;
  }

  .row-span-1 {
    grid-row: span 1;
  }

  .row-span-2 {
    grid-row: span 2;
  }

  .flex {
    display: flex;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .row-reverse {
    flex-direction: row-reverse;
  }

  .justify-start {
    justify-content: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-end {
    justify-content: flex-end;
  }

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

  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

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

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

  .items-end {
    align-items: flex-end;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .gap-1 {
    gap: 1rem;
  }

  .gap-075 {
    gap: 0.75rem;
  }

  .gap-05 {
    gap: 0.5rem;
  }

  .color-grey {
    color: var(--color-grey);
  }

  .color-white {
    color: var(--color-white);
  }

  .color-red {
    color: red;
  }

  .color-main {
    color: var(--color-main);
  }

  .bg-main {
    background-color: var(--color-main);
  }

  .bg-green {
    background-color: var(--color-main);
  }

  .bg-grey {
    background-color: var(--color-grey);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .border-main {
    border: var(--rule);
  }

  .border-grey {
    border: var(--rule-grey);
  }

  .border-white {
    border: var(--rule-white);
  }

  .bt-grey {
    border-top: var(--rule-grey);
  }

  .bg-blur {
    background: var(--color-blur, rgba(255, 255, 255, 0.01));
    backdrop-filter: var(--blur);
  }

  .bg-blur-s {
    background: var(--color-blur, rgba(255, 255, 255, 0.01));
    backdrop-filter: var(--blur-s);
  }

  .rad-xs {
    border-radius: var(--radius-xs);
  }

  .rad-s {
    border-radius: var(--radius-s);
  }

  .rad-m {
    border-radius: var(--radius-m);
  }

  .rad-l {
    border-radius: var(--radius-l);
  }

  .rad-100 {
    border-radius: 100%;
  }

  .w-10 {
    width: 10%;
  }

  .w-20 {
    width: 20%;
  }

  .w-25 {
    width: 25%;
  }

  .w-30 {
    width: 30%;
  }

  .w-40 {
    width: 40%;
  }

  .w-50 {
    width: 50%;
  }

  .w-60 {
    width: 60%;
  }

  .w-70 {
    width: 70%;
  }

  .w-75 {
    width: 75%;
  }

  .w-80 {
    width: 80%;
  }

  .w-90 {
    width: 90%;
  }

  .w-100 {
    width: 100%;
  }

  .h-100 {
    height: 100%;
  }

  .ratio-57 {
    aspect-ratio: 5/7;
  }

  @supports not (aspect-ratio: 5/7) {
    .ratio-57 {
      padding-top: 140%;
    }

    .ratio-57 > * {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
    }

    .ratio-57 > img {
      width: 100%;
      height: auto;
    }

    .ratio-57 > video {
      width: 100%;
      height: auto;
    }
  }

  .ratio-1 {
    aspect-ratio: 1/1;
  }

  @supports not (aspect-ratio: 1/1) {
    .ratio-1 {
      padding-top: 100%;
    }

    .ratio-1 > * {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
    }

    .ratio-1 > img {
      width: 100%;
      height: auto;
    }

    .ratio-1 > video {
      width: 100%;
      height: auto;
    }
  }

  .ratio-46 {
    aspect-ratio: 4/6;
  }

  @supports not (aspect-ratio: 4/6) {
    .ratio-46 {
      padding-top: 150%;
    }

    .ratio-46 > * {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
    }

    .ratio-46 > img {
      width: 100%;
      height: auto;
    }

    .ratio-46 > video {
      width: 100%;
      height: auto;
    }
  }

  .ratio-64 {
    aspect-ratio: 6/4;
  }

  @supports not (aspect-ratio: 6/4) {
    .ratio-64 {
      padding-top: 66.6666666667%;
    }

    .ratio-64 > * {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
    }

    .ratio-64 > img {
      width: 100%;
      height: auto;
    }

    .ratio-64 > video {
      width: 100%;
      height: auto;
    }
  }

  .ratio-169 {
    aspect-ratio: 16/9;
  }

  @supports not (aspect-ratio: 16/9) {
    .ratio-169 {
      padding-top: 56.25%;
    }

    .ratio-169 > * {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
    }

    .ratio-169 > img {
      width: 100%;
      height: auto;
    }

    .ratio-169 > video {
      width: 100%;
      height: auto;
    }
  }

  .obj-cover {
    object-fit: cover;
  }

  .obj-fill {
    object-fit: fill;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-025 {
    opacity: 0.25;
  }

  .opacity-05 {
    opacity: 0.5;
  }

  .opacity-075 {
    opacity: 0.75;
  }

  .opacity-1 {
    opacity: 1;
  }

  /* no-js */
  .no-js,
  .no-js-list {
    display: none;
  }

  .wrapper {
    padding: 0 var(--container-2);
  }

  .m-auto {
    margin: 0 auto;
  }

  .z-base {
    z-index: var(--z-base);
  }
  .z-filter {
    z-index: var(--z-filter);
  }
  .z-header {
    z-index: var(--z-header);
  }
  .z-modal {
    z-index: var(--z-modal);
  }

  .nowrap {
    white-space: nowrap;
  }

  details {
    --present: 0;
    border-bottom: var(--rule);
    border-top: var(--rule-trans);
  }

  details summary,
  summary {
    padding: var(--container-2) 0 calc(var(--container-2) + var(--rule-width));
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: currentColor;
    line-height: 1;
  }

  summary .summary__toggle {
    pointer-events: none;
    width: 1rem;
    height: 1rem;

    display: flex;
    align-items: center;
  }

  details summary svg {
    transform: rotate(0);
    /* transition-property: transform, opacity; */
    transition: transform 180ms linear 0s;
    width: 100%;
    height: 100%;
  }

  details[open] > summary {
    cursor: pointer;
  }

  details[open] > summary svg:first-child {
    transform: rotate(45deg);
  }

  .details__content {
    padding-bottom: var(--container);
  }

  /* --Buttons */

  .btn,
  input[type="submit"].btn {
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--container-3) var(--container-2);
    cursor: pointer;
    line-height: var(--font-btn--line);
    font-style: normal;
    border: var(--rule-trans);
    color: var(--color-white);
    background: var(--color-main);
    transition:
      background 240ms ease-in-out 0s,
      color 240ms ease-in-out 0s;
  }

  input[type="submit"].btn:focus-visible {
    color: var(--color-main);
    background: var(--color-white);
    border-color: currentColor;
  }

  input[type="submit"].btn.btn--disabled,
  .btn.btn--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  input[type="submit"].btn.btn--primary,
  .btn.btn--primary {
    color: var(--color-white);
    background: var(--color-main);
    text-align: center;
  }

  .btn.btn--primary:focus-visible {
    color: var(--color-main);
    background: var(--color-white);
  }

  .btn.btn--secondary,
  input[type="submit"].btn.btn--secondary {
    color: currentColor;
    background: var(--color-blur);
    backdrop-filter: var(--blur);
    border-color: currentColor;
    text-align: center;

    align-self: start;
  }

  input[type="submit"].btn.btn--secondary:focus-visible,
  .btn.btn--secondary:focus-visible {
    color: var(--color-white);
    background: currentColor;
  }

  .btn.btn--tertiary,
  input[type="submit"].btn.btn--tertiary {
    color: var(--color-blue);
    background: transparent;
    border: none;
    box-shadow: none;

    font-style: italic;
    font-family: var(--font-italic--family);
    font-weight: var(--font-italic--weight);
    font-size: var(--font-italic--size);
    line-height: var(--font-italic--line);
    letter-spacing: var(--font-italic--letter);

    padding: 0.66rem 0;
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: var(--underline-size);
    text-decoration: none;
    transition: none;
  }
  .btn.btn--tertiary:focus-visible,
  input[type="submit"].btn.btn--tertiary:focus-visible {
    color: var(--color-main);
    background: transparent;
    text-decoration: underline;
  }

  .add-to-cart-button {
    width: 100%;
    padding: 0.66rem 1rem;
    min-height: 3rem;
    background: var(--color-blue);
  }

  .add-to-cart-button.quick-add-to-cart-button,
  .quick-add-to-cart-button,
  .add-to-cart-button.quick-add-to-cart-button {
    margin: 0;
    align-self: flex-start;

    width: auto;
    height: auto;
    padding: 0.33rem 0.66rem;
    border-radius: var(--radius-l);

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: var(--font-body-medium);
    font-weight: 500;
    font-size: var(--font-body--size-s);
    line-height: var(--font-btn--line);

    font-style: normal;

    background-color: var(--color-main);
    color: var(--color-white);
    border: var(--rule-trans);
  }

  .add-to-cart-button.quick-add-to-cart-button span.quick-cta,
  .quick-add-to-cart-button span.quick-cta,
  .add-to-cart-button.quick-add-to-cart-button span.quick-cta {
    display: block;
  }

  .add-to-cart-button.quick-add-to-cart-button span.confirmation-cta,
  .quick-add-to-cart-button span.confirmation-cta,
  .add-to-cart-button.quick-add-to-cart-button span.confirmation-cta {
    display: none;
    color: var(--color-main);
  }

  .add-to-cart-button.quick-add-to-cart-button.confirmation,
  .quick-add-to-cart-button.confirmation,
  .add-to-cart-button.quick-add-to-cart-button.confirmation {
    background-color: var(--color-white);
    border: var(--rule-main);
  }

  .add-to-cart-button.quick-add-to-cart-button.confirmation span.quick-cta,
  .quick-add-to-cart-button.confirmation span.quick-cta,
  .add-to-cart-button.quick-add-to-cart-button.confirmation span.quick-cta {
    display: none;
  }

  .add-to-cart-button.quick-add-to-cart-button.confirmation
    span.confirmation-cta,
  .quick-add-to-cart-button.confirmation span.confirmation-cta,
  .add-to-cart-button.quick-add-to-cart-button.confirmation
    span.confirmation-cta {
    display: block;
  }

  .add-to-cart-button.quick-add-to-cart-button.disabled--button,
  .quick-add-to-cart-button.disabled--button,
  .add-to-cart-button.quick-add-to-cart-button.disabled--button {
    background-color: var(--color-grey);
    color: var(--color-white);
    cursor: not-allowed;
  }

  .add-to-cart-button--popover span.quick-cta {
    display: block;
  }

  .add-to-cart-button--popover span.confirmation-cta {
    display: none;
    color: var(--color-main);
  }

  .add-to-cart-button--popover.confirmation {
    background-color: var(--color-white);
  }
  .add-to-cart-button--popover.confirmation span.quick-cta {
    display: none;
  }
  .add-to-cart-button--popover.confirmation span.confirmation-cta {
    display: block;
  }
  .add-to-cart-button--popover.disabled--button {
    background-color: var(--color-grey);
    color: var(--color-white);
    cursor: not-allowed;
  }

  .add-to-cart-button .confirmation-message,
  .add-to-cart-button .disabled-text {
    display: none;
  }

  .add-to-cart-button.confirmation .confirmation-message {
    display: flex;
  }
  .add-to-cart-button.confirmation .call-to-action,
  .add-to-cart-button.confirmation.disabled--button .disabled-text {
    display: none;
  }

  .add-to-cart-button span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: var(--font-btn--line);
  }

  .add-to-cart-button .call-to-action {
    display: flex;
    align-items: center;
  }

  .add-to-cart-button.disabled--button .disabled-text {
    display: flex;
  }

  .add-to-cart-button.disabled--button .disabled-text.in-cart-text {
    display: none;
  }

  .product-main__info
    .add-to-cart-form
    .add-to-cart-button.disabled--button
    .call-to-action,
  .product-main__info
    .add-to-cart-form
    .add-to-cart-button.confirmation
    .call-to-action {
    display: none;
  }

  button.read-more {
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: var(--underline-size);
    text-decoration: underline;

    transition-property: text-decoration;
    transition: 240ms ease-in-out 0s;

    display: inline;
    color: var(--color-main);
  }

  button.read-more[aria-expanded="true"] {
    opacity: 0.33;
  }

  /* HTML Classes */

  html.mini-cart-open body,
  html.menu-active body,
  html.search-active body,
  html.quick-add-popover-open body {
    overflow: hidden;
    max-height: 100vh;
  }

  /* Annuouncement Bar */
  html.show-banner body {
    margin-top: var(--banner-height);
  }

  html.show-banner header.main-header {
    top: var(--banner-height);
  }

  /* Overflow Gallerys */

  ul.ov-gallery {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;

    scrollbar-width: thin;
    scrollbar-color: var(--color-grey) transparent;
  }

  li.ov-gallery__item {
    scroll-snap-align: start;
    flex: 0 0 calc(100% - 3rem);
    max-width: 80%;
  }
  li.ov-gallery__item:last-child {
    margin-right: 1rem;
  }

  /* Mini Components */

  /* Icons */
  .icon {
    max-width: 2rem;
  }

  .header__item:focus-visible .icon {
    pointer-events: none;
  }

  /* linklists */
  .linklist {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .linklist__title {
    margin-bottom: 0.5rem;
  }

  .linklist__item {
    display: flex;
    padding: 0.25rem 0;
  }

  .linklist li:first-child {
    padding-top: 0;
  }

  /* Labels */
  .product-labels {
    z-index: 1;

    display: flex;
    flex-direction: row;

    top: 0;
    left: 0;
  }

  .product-labels.show-desktop {
    display: none;
  }

  .product-card .product-labels {
    top: 0;
    left: 0;
    margin: 0;
    flex-wrap: wrap;
  }

  .product-main .product-labels {
    top: 0;
    left: 0;
  }

  .product-labels__item {
    padding: 0.5rem 1rem;
    font-size: var(--font-body--size--s);
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
  }

  .product-labels__item.bg-blur {
    background: var(--color-blur);
    backdrop-filter: var(--blur);
  }

  /* rte */
  .rte ul li,
  .metafield-rich_text_field ul li {
    list-style: disc;
    margin-left: 1rem;
  }

  .rte strong,
  .rte b {
    font-family: var(--font-body--family);
  }

  .rte em,
  .rte i {
    font-style: italic;
    font-family: var(--font-italic--family);
  }

  .rte img {
    background-color: transparent;
    max-width: 50%;
  }
  .rte img.w-100 {
    max-width: 100%;
    width: 100%;
  }

  .rte img.w-66 {
    max-width: 66%;
    width: 100%;
  }

  .rte img.w-50 {
    max-width: 50%;
    width: 100%;
  }

  .rte img.w-33 {
    max-width: 33%;
    width: 100%;
  }

  /* Search Form */
  .form-search__terms {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
  }

  html.search-active .form-search-hidden .form-search__terms {
    width: 100%;
    opacity: 1;
  }

  html.search-active .form-search-hidden .form-search__button-open {
    display: none;
  }

  html.search-active .form-search-hidden .form-search__button-close {
    display: block;
  }

  /* Price */

  .price > * {
    display: inline-block;
    vertical-align: top;
  }

  .price.price--unavailable {
    visibility: hidden;
  }

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

  .price .price-item {
    margin: 0 0.33rem 0 0;
  }


  .price__regular .price-item--regular {
    margin-right: 0;
  }

  .price:not(.price--show-badge) .price-item--last:last-of-type {
    margin: 0;
  }

  .price--large {
    font-size: 1.6rem;
    line-height: var(--font-btn--line);
    letter-spacing: 0.13rem;
  }

  .price--sold-out .price__availability,
  .price__regular {
    display: block;
  }

  .price__sale,
  .price__availability,
  .price .price__badge-sale,
  .price .price__badge-sold-out,
  .price--on-sale .price__regular,
  .price--on-sale .price__availability {
    display: none;
  }

  .price--sold-out .price__badge-sold-out,
  .price--on-sale .price__badge-sale {
    display: inline-block;
  }

  .price--on-sale .price__sale {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .price--center {
    display: initial;
    justify-content: center;
  }

  .price--on-sale .price-item--regular {
    text-decoration: line-through;
    color: var(--color-grey);
  }

  .add-to-cart-button .price--on-sale .price-item--regular {
    color: var(--color-white);
    opacity: 0.7;
  }

  .unit-price {
    display: block;
  }

  /* Show and Hide */

  .show-mobile,
  .large-hide {
    display: block;
  }

  .show-desktop,
  .small-hide {
    display: none;
  }

  .page-404__title {
    padding: 2rem 1rem;
    margin: 0 auto;
  }

  .page-404 .page-content {
    padding: 1rem 1rem 3rem;
    margin: 0 auto;
  }

  .below-1 {
    margin-bottom: 1rem;
  }

  .below-2 {
    margin-bottom: 2rem;
  }

  .below-3 {
    margin-bottom: 3rem;
  }

  /* Smaller Desktop */
  @media screen and (min-width: 800px) {
  }

  /* General Desktop */
  @media screen and (min-width: 800px) {
    .wrapper {
      padding: 0 var(--container);
    }

    .show-mobile,
    .large-hide,
    .medium-hide {
      display: none;
    }

    .show-desktop,
    .small-hide {
      display: inherit;
    }

    .btn,
    input[type="submit"].btn {
      padding: 0.5rem 0.75rem;
    }

    .grid-2 {
      grid-gap: 1rem;
    }

    .show-mobile.form-search__button {
      display: flex;
      width: 2rem;
    }

    .linklist--title {
      margin-bottom: 1rem;
    }

    .linklist li:first-child {
      padding-top: 0;
    }

    .product-labels {
      top: 0.66rem;
      left: 0.66rem;
    }

    .product-main .product-labels {
      top: 1rem;
      bottom: auto;
    }

    .product-main .product-labels__item {
      font-size: var(--font-body--size-s);
      padding: 0.33em 0.5em;
    }

    .add-to-cart-button.quick-add-to-cart-button,
    .quick-add-to-cart-button.disabled--button {
      font-size: var(--font-body--size);
      padding: 0.5rem 1rem;
      line-height: var(--font-btn--line);
    }

    .show-banner main {
      margin-top: calc(var(--header-height) + var(--banner-height));
    }

    .grid--right {
      grid-column: 2 / span 1;
    }

    .grid--left {
      grid-column: 1 / span 1;
    }

    .grid-row--1 {
      grid-row: span 1;
    }

    .grid-row--1--start-1 {
      grid-row: 1 / span 1;
    }

    .grid-row--1--start-2 {
      grid-row: 2 / span 1;
    }

    .grid-row--1--start-3 {
      grid-row: 3 / span 1;
    }
    .grid-row--1--start-4 {
      grid-row: 4 / span 1;
    }
    .grid-row--1--start-5 {
      grid-row: 5 / span 1;
    }
    .grid-row--1--start-6 {
      grid-row: 6 / span 1;
    }

    .grid-row--2 {
      grid-row: span 2;
    }

    .grid-row--2--start-1 {
      grid-row: 1 / span 2;
    }

    .grid-row--2--start-2 {
      grid-row: 2 / span 2;
    }

    .grid-row--2--start-3 {
      grid-row: 3 / span 2;
    }

    .grid-row--2--start-4 {
      grid-row: 4 / span 2;
    }

    .grid-row--2--start-5 {
      grid-row: 5 / span 2;
    }

    .grid-row--2--start-6 {
      grid-row: 6 / span 2;
    }

    .grid-row--3 {
      grid-row: span 3;
    }

    .grid-row--3--start-1 {
      grid-row: 1 / span 3;
    }

    .grid-row--3--start-2 {
      grid-row: 2 / span 3;
    }

    .grid-row--3--start-3 {
      grid-row: 3 / span 3;
    }

    .grid-row--3--start-4 {
      grid-row: 4 / span 3;
    }

    .grid-row--3--start-5 {
      grid-row: 5 / span 3;
    }

    .grid-row--3--start-6 {
      grid-row: 6 / span 3;
    }

    .grid-row--4 {
      grid-row: span 4;
    }

    .grid-row--4--start-1 {
      grid-row: 1 / span 4;
    }

    .grid-row--4--start-2 {
      grid-row: 2 / span 4;
    }

    .grid-row--4--start-3 {
      grid-row: 3 / span 4;
    }

    .grid-row--4--start-4 {
      grid-row: 4 / span 4;
    }

    .grid-row--4--start-5 {
      grid-row: 5 / span 4;
    }

    .grid-row--4--start-6 {
      grid-row: 6 / span 4;
    }

    .grid-row--5 {
      grid-row: span 5;
    }

    .grid-row--5--start-1 {
      grid-row: 1 / span 5;
    }

    .grid-row--5--start-2 {
      grid-row: 2 / span 5;
    }

    .grid-row--5--start-3 {
      grid-row: 3 / span 5;
    }

    .grid-row--5--start-4 {
      grid-row: 4 / span 5;
    }

    .grid-row--5--start-5 {
      grid-row: 5 / span 5;
    }

    .grid-row--5--start-6 {
      grid-row: 6 / span 5;
    }

    .grid-row--6 {
      grid-row: span 6;
    }

    .grid-row--6--start-1 {
      grid-row: 1 / span 6;
    }

    .grid-row--6--start-2 {
      grid-row: 2 / span 6;
    }

    .grid-row--6--start-3 {
      grid-row: 3 / span 6;
    }

    .grid-row--6--start-4 {
      grid-row: 4 / span 6;
    }

    .grid-row--6--start-5 {
      grid-row: 5 / span 6;
    }

    .grid-row--6--start-6 {
      grid-row: 6 / span 6;
    }

    .grid--full {
      grid-column: 1 / span 2;
    }
    .grid--full video {
      width: 100%;
    }

    main {
      margin-top: var(--header-height);
    }

    .template-index main {
      margin-top: 0;
    }

    .rte img {
      max-width: 33%;
    }
    .rte img.w-100--l {
      width: 100%;
      max-width: 100%;
    }

    .rte img.w-66--l {
      width: 100%;
      max-width: 66%;
    }

    .rte img.w-50--l {
      width: 100%;
      max-width: 50%;
    }

    .rte img.w-33--l {
      width: 100%;
      max-width: 33%;
    }

    body:has(header.transparent) main,
    .show-banner body:has(header.transparent) main {
      margin-top: 0;
    }

    .show-banner main {
      margin-top: var(--header-height-banner);
    }

    .show-banner main :has(.page-404) {
      margin-top: var(--header-height-wpad);
    }
    .template-page main {
      margin-top: var(--header-height-wpad);
    }

    .template-page main:has(.section-page-hero) {
      margin-top: var(--header-height);
    }

    .show-banner .template-page main {
      margin-top: var(--header-height-banner-wpad);
    }

    .show-banner .template-page main:has(.section-page-hero) {
      margin-top: var(--header-height-banner);
    }
  }

  .show-banner main {
    margin-top: var(--header-height-banner);
  }

  .show-banner main :has(.page-404) {
    margin-top: var(--header-height-wpad);
  }
  .template-page main {
    margin-top: var(--header-height);
  }

  .template-page main:has(.section-page-hero) {
    margin-top: var(--header-height);
  }

  .show-banner .template-pagea main {
    margin-top: var(--header-height-banner-wpad);
  }

  .show-banner .template-page main:has(.section-page-hero) {
    margin-top: var(--header-height-banner);
  }
}