/** Shopify CDN: Minification failed

Line 2103:35 Unexpected "{"

**/
/* Derived from base colors (theme settings) */

:root {
  --color-foreground: var(--color-base-text);
  --color-foreground-lighter: var(--color-base-text-lighter);
  --color-background: var(--color-base-background);
  --color-heading: var(--color-base-heading);
  --color-border: var(--color-base-border);
}

/* Primary button */

:root {
  --color-button-background: var(--color-base-accent);
  --color-button-border: var(--color-base-accent);
  --color-button-text: var(--color-base-solid-button-labels);
}

/* Secondary button */

.button--secondary {
  --color-button-background: var(--color-base-accent);
  --color-button-border: var(--color-base-accent);
  --color-button-text: var(--color-base-solid-button-labels);
}

/* Tertiary button */

.button--tertiary {
  --color-button-background: var(--color-background);
  --color-button-border: var(--color-border);
  --color-button-text: var(--color-base-outline-button-labels);
}

.button--outline {
  --color-button-background: var(--color-base-accent);
  --color-button-border: var(--color-base-accent);
  --color-button-text: var(--color-base-solid-button-labels);
  --button-border-width: 2px;
}

.button.button--outline-primary {
  background-color: transparent;
  color: rgb(var(--color-base-accent));
  --color-button-background: var(--color-base-accent);
  --color-button-border: var(--color-base-accent);
  --color-button-text: var(--color-base-solid-button-labels);
}

/* Links */

:root {
  --color-link: var(--color-base-outline-button-labels);
}

/* Badges */

:root {
  --color-badge-background: rgba(var(--color-background), 0.95);
  --color-badge-foreground: rgb(var(--color-foreground));
  --color-badge-border: rgb(var(--color-border));
}

/* Duration */

:root {
  --duration-short: 100ms;
  --duration-default: 250ms;
  --duration-long: 500ms;
  --duration-animate: 1000ms;
  --image-position: center center;
}

/* base */

.no-js:not(html) {
  display: none !important;
}

html.no-js .no-js:not(html) {
  display: block !important;
}

.no-js-inline {
  display: none !important;
}

html.no-js .no-js-inline {
  display: inline-block !important;
}

html.no-js .no-js-hidden {
  display: none !important;
}

html {
  /* R84 — without this, Chrome's font boosting inflates text on pages whose
     layout is wider than the viewport: the copy renders at its real size and
     then jumps up a moment later. Seen on the cookie notice. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  touch-action: auto !important;
  scrollbar-gutter: auto !important;
}

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 2rem;
}
.page-width-fullwidth {
  padding: 0;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 4rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }
}

@media screen and (min-width: 990px) {
  .page-width--inner {
    padding: 0 15rem;
  }

  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 4rem;
  }
}

.page-width--full-width {
  max-width: 100%;
  padding: 0;
}

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin {
  margin-top: 5rem;
}

.element-margin-small {
  margin-top: 3rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

[data-page-rendering] .shopify-section + .shopify-section {
  content-visibility: auto;
}

.shopify-design-mode[data-page-rendering] .shopify-section + .shopify-section,
.no-js [data-page-rendering] .shopify-section + .shopify-section {
  content-visibility: visible;
}

body {
  color: rgb(var(--color-foreground));
  background-color: rgb(var(--color-background));
  overflow-x: hidden;
}

.background-secondary {
  border-top: 0.1rem solid rgba(var(--color-border), 0.5);
  padding: 4rem 0 5rem;
}

@media screen and (min-width: 750px) {
  .background-secondary {
    padding: 6rem 0 5rem;
  }
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 0.1rem;
  height: 0.1rem;
  margin: -0.1rem;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

body.overflow-hidden {
  padding-inline-end: var(--scrollbar-width);
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.heading,
h1,
h2,
h3,
h4,
h5,
h6,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  color: rgb(var(--color-heading));
}

/* Heading typography groups (line-height / letter-spacing per level) */
.h0 {
  line-height: 100%;
  letter-spacing: -0.01em;
}

h1,
h2,
.h1,
.h1-pdp,
.h2 {
  line-height: 100%;
  letter-spacing: -0.015em;
}

h3,
h4,
.h3,
.h4 {
  line-height: 150%;
  letter-spacing: -0.02em;
}

h5,
h6,
.h5,
.h6 {
  line-height: 150%;
  letter-spacing: -0.001em;
}

p {
  line-height: 150%;
  letter-spacing: -0.005em;
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 3.6rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 6rem);
  }
}

h1,
.h1 {
  font-family: var(--font-h1-family);
  font-style: var(--font-h1-style);
  font-weight: var(--font-h1-weight);
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 2.8rem);
  }
}

.h1-pdp {
  font-family: var(--font-h1-family);
  font-style: var(--font-h1-style);
  font-weight: var(--font-h1-weight);
  font-size: 1.8rem;
  line-height: 100%;
}

@media only screen and (min-width: 750px) {
  .h1-pdp {
    font-size: 2rem;
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 1.6rem);
  font-family: var(--font-h1-family);
  font-style: var(--font-h1-style);
  font-weight: var(--font-h1-weight);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.2rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1rem);
}

@media only screen and (min-width: 750px) {
  h4,
  .h4 {
    font-size: calc(var(--font-heading-scale) * 1.2rem);
  }
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.2rem);
  }
}

h6,
.h6 {
  font-size: calc(var(--font-heading-scale) * 1rem);
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}
@media only screen and (min-width: 750px) {
  h6,
  .h6 {
    font-size: calc(var(--font-heading-scale) * 1.2rem);
  }
}
[data-heading-capitalize] h1,
[data-heading-capitalize] h2,
[data-heading-capitalize] h3,
[data-heading-capitalize] .h0,
[data-heading-capitalize] .h1,
[data-heading-capitalize] .h2,
[data-heading-capitalize] .h3,
[data-heading-capitalize] .card-information__text,
[data-heading-capitalize] .bundle-products .product-title {
  text-transform: uppercase;
}

[data-heading-capitalize] .article-card__title,
[data-heading-capitalize] .article-template__navigation .h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem - 0.2rem);
  letter-spacing: 0.2em;
}

[data-heading-capitalize] .card-information__text.h4,
[data-heading-capitalize] .bundle-products .product-title {
  font-size: calc(var(--font-heading-scale) * 1.5rem - 0.2rem);
  letter-spacing: 0.2em;
}

@media only screen and (min-width: 750px) {
  [data-heading-capitalize] .article-card__title,
  [data-heading-capitalize] .article-template__navigation .h3 {
    font-size: calc(var(--font-heading-scale) * 2rem - 0.2rem);
  }

  [data-heading-capitalize] .card-information__text.h4,
  [data-heading-capitalize] .bundle-products .product-title {
    font-size: calc(var(--font-heading-scale) * 1.6rem - 0.2rem);
  }
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground));
  border-inline-start: 0.2rem solid rgba(var(--color-border), 0.5);
  padding-inline-start: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-inline-start: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.01rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.typeset0,
.typeset,
.typeset2,
.typeset3 {
  line-height: calc(1 + 0.4 / var(--font-body-scale));
  color: rgb(var(--color-foreground));
}

.typeset0 {
  font-size: 1.2rem;
}

@media screen and (min-width: 750px) {
  .typeset0 {
    font-size: 1.4rem;
  }
}

.typeset {
  font-size: 1.5rem;
}

@media screen and (min-width: 750px) {
  .typeset {
    font-size: 1.6rem;
  }
}

.typeset2 {
  font-size: 1.8rem;
}

@media screen and (min-width: 750px) {
  .typeset2 {
    font-size: 2rem;
  }
}

.typeset3 {
  font-size: 2rem;
}

@media screen and (min-width: 750px) {
  .typeset3 {
    font-size: 2.4rem;
  }
}

.typeset .link,
.typeset2 .link,
.typeset3 .link {
  font-size: inherit;
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.01rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
  color: rgba(var(--color-foreground));
}

.caption-with-letter-spacing .link {
  font-size: inherit;
  color: inherit;
}
@media screen and (min-width: 750px) {
  .caption-with-letter-spacing {
    font-size: 1.2rem;
  }
}
.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.2rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.01rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-border));
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-border), 0.5);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 1099px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 1100px) {
  .large-up-hide {
    display: none !important;
  }
}

.center {
  text-align: center;
}

.left {
  text-align: start;
}

.right {
  text-align: end;
}

@media screen and (max-width: 749px) {
  .mobile-center {
    text-align: center;
  }
  
  .mobile-left {
    text-align: start;
  }
  
  .mobile-right {
    text-align: end;
  }
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

/* Utilities */
.block {
  display: block
}

.inline-block {
  display: inline-block
}

.inline {
  display: inline
}

.flex {
  display: flex
}

.inline-flex {
  display: inline-flex
}

.grid {
  display: grid
}

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

.justify-self-start {
  justify-self: flex-start
}

.justify-self-end {
  justify-self: flex-end
}

.justify-self-center {
  justify-self: center
}

.pis-6 {
  padding-inline-start: var(--sp-6);
}

.pbs-4 {
  padding-block-start: var(--sp-4);
}

.pbe-4 {
  padding-block-end: var(--sp-4);
}

.gap-4 {
  gap: var(--sp-4)
}

@media screen and (min-width: 750px) {
  .md\:justify-self-start {
    justify-self: flex-start;
  }

  .md\:justify-self-end {
    justify-self: flex-end;
  }

  .md\:justify-self-center {
    justify-self: center;
  }
}

a:empty:not(.ignore-empty),
ul:empty:not(.ignore-empty),
dl:empty:not(.ignore-empty),
div:empty:not(.ignore-empty),
section:empty:not(.ignore-empty),
article:empty:not(.ignore-empty),
p:empty:not(.ignore-empty),
h1:empty:not(.ignore-empty),
h2:empty:not(.ignore-empty),
h3:empty:not(.ignore-empty),
h4:empty:not(.ignore-empty),
h5:empty:not(.ignore-empty),
h6:empty:not(.ignore-empty) {
  display: none;
}

.link {
  font-family: inherit;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  position: relative;
  border: none;
  box-shadow: none;
  text-decoration: none;
  color: rgb(var(--color-link));
  background-color: transparent;
  background-image: linear-gradient(to top, rgb(var(--color-border)) 0px, rgb(var(--color-border)) 0px), linear-gradient(to top, transparent 0px, transparent 0px);
  background-repeat: no-repeat;
  background-position: right bottom, right bottom;
  background-size: 0% 0.1rem, 100% 0.1rem;
  transition-property: background-size;
  transition-timing-function: ease;
  transition-duration: var(--duration-default);
}

/* @media screen and (hover: hover) {
  .link:hover {
    background-position: left bottom, left bottom;
    background-size: 100% 0.1rem, 100% 0.1rem;
  }
} */

.link--text {
  color: rgb(var(--color-foreground));
}

.link--underline {
  background-image: linear-gradient(to top, rgb(var(--color-link)) 0px, rgb(var(--color-link)) 0px), linear-gradient(to top, rgb(var(--color-border)) 0px, rgb(var(--color-border)) 0px);
}

.link-with-icon {
  background-image: none;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

.link-with-icon .label {
  position: relative;
}

@media screen and (hover: hover) {
  .link-with-icon .label {
    background-color: transparent;
    background-image: linear-gradient(to top, rgb(var(--color-link)) 0px, rgb(var(--color-link)) 0px), linear-gradient(to top, rgb(var(--color-border)) 0px, rgb(var(--color-border)) 0px);
    background-repeat: no-repeat;
    background-position: right bottom, right bottom;
    background-size: 0% 0.1rem, 100% 0.1rem;
    transition: background-size var(--duration-default) ease;
  }

  .link-with-icon:hover .label {
    background-position: left bottom, left bottom;
    background-size: 100% 0.1rem, 100% 0.1rem;
  }
}

.link-with-icon .icon {
  width: 1.8rem;
  height: 1.8rem;
  margin-inline-end: 1rem;
}

.circle-divider::after {
  content: '\2022';
  font-weight: 400;
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  content: none;
}

.dash-divider::after {
  content: '\2014';
  font-weight: 400;
  margin: 0 1rem 0 1.2rem;
}

.dash-divider:last-of-type::after {
  content: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgb(var(--color-border));
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.placeholder {
  background-color: rgba(var(--color-base-text), 0.04);
  color: rgba(var(--color-base-text), 0.55);
  fill: rgba(var(--color-base-text), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

/* arrow animation */
@media screen and (hover: hover) {
  .animate-arrow .icon-arrow path {
    transform: translateX(-0.25rem);
    transition: transform var(--duration-default) ease;
  }

  .animate-arrow:hover .icon-arrow path {
    transform: translateX(-0.05rem);
  }
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  margin-top: -0.3rem;
  height: 0.6rem;
  transition: transform var(--duration-default) ease;
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  display: block;
  cursor: default;
  background: none;
}

.disclosure-has-popup > summary::before {
  content: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 101;
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: 0.2rem solid rgb(var(--color-keyboard-focus));
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-keyboard-focus), 0.5);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused,
.no-js *:focus {
  outline: 0.2rem solid rgb(var(--color-keyboard-focus));
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-keyboard-focus), 0.5);
}

/* Negate the fallback side-effect for browsers that support :focus-visible */
.no-js *:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgb(var(--color-keyboard-focus));
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-keyboard-focus), 0.5);
}

.focused.focus-inset,
.no-js .focus-inset:focus {
  outline: 0.2rem solid rgb(var(--color-keyboard-focus));
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-keyboard-focus), 0.5);
}

.no-js .focus-inset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgb(var(--color-keyboard-focus));
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
    0 0 0.2rem 1.2rem rgba(var(--color-keyboard-focus), 0.5);
}

.focus-offset.focused,
.no-js .focus-offset:focus {
  outline: 0.2rem solid rgb(var(--color-keyboard-focus));
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
    0 0 0.2rem 1.2rem rgba(var(--color-keyboard-focus), 0.5);
}

.no-js .focus-offset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/* component-title */
.title-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

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

.title-wrapper.right {
  justify-content: flex-end;
}

.title-wrapper .title {
  margin: 0;
  letter-spacing: 0.01rem;
}

.title {
  margin: 3rem 0 2rem;
  letter-spacing: 0.2rem;
}

.title--primary {
  margin: 4rem 0;
}

@media screen and (min-width: 990px) {
  .title {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper {
    margin-bottom: 3rem;
    align-items: center;
  }
}

.title-wrapper .link {
  font-size: 1.6rem;
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper .link-with-icon {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-family: var(--font-heading-family);
  font-size: calc(var(--font-heading-scale) * 1.3rem);
  letter-spacing: 0.3rem;
  font-weight: 600;
}

.title-wrapper.right .link-with-icon .icon {
  width: 1.5rem;
}

.title-wrapper--no-margin {
  margin-bottom: 0;
}

.title-wrapper--no-heading {
  display: none;
}

@media screen and (max-width: 989px) {
  .title-wrapper--mobile-link {
    display: flex;
  }
}

[data-heading-center] .title-wrapper:not(.title-wrapper--no-heading) {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

[data-heading-center] .page-title {
  text-align: center;
}

.title .link {
  font-size: inherit;
  line-height: normal;
}

.subtitle {
  font-size: 1.6rem;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  letter-spacing: 0.05rem;
  color: rgba(var(--color-foreground), 0.7);
}

@media screen and (min-width: 750px) {
  .subtitle {
    font-size: 1.8rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
  }
}

/* component-grid */
.flex-grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-horizontal-spacing);
  --grid-horizontal-spacing: 2rem;
}

@media screen and (min-width: 480px) {
  .flex-grid {
    --grid-horizontal-spacing: 2rem;
  }
}

@media screen and (min-width: 750px) {
  .flex-grid {
    --grid-horizontal-spacing: 4rem;
  }
}

.flex-grid__item {
  padding-bottom: 0.5rem;
  flex-grow: 1;
  flex-shrink: 0;
  width: calc(25% - var(--grid-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .flex-grid__item {
    padding-bottom: 1rem;
  }

  .flex-grid__item--one-third {
    max-width: 100%;
    width: calc(33.33% - var(--grid-horizontal-spacing) / 2);
  }

  .flex-grid__item--two-third {
    max-width: 100%;
    width: calc(66.67% - var(--grid-horizontal-spacing) / 2);
  }

  .flex-grid__item--one-quarter {
    max-width: 100%;
    width: calc(25% - var(--grid-horizontal-spacing) / 2);
  }

  .flex-grid__item--three-quarter {
    max-width: 100%;
    width: calc(75% - var(--grid-horizontal-spacing) / 2);
  }
}

.flex-grid--gapless {
  margin-bottom: 0;
  --grid-horizontal-spacing: 0rem;
}

.flex-grid--gapless .flex-grid__item {
  padding-bottom: 0;
}

@media screen and (max-width: 749px) {
  .flex-grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .flex-grid--1-col-tablet .flex-grid__item {
    max-width: 100%;
  }

  .flex-grid--one-third-max.flex-grid--2-col-tablet .flex-grid__item {
    max-width: calc(50% - var(--grid-horizontal-spacing) / 2);
  }

  .flex-grid--one-third-max.flex-grid--3-col-tablet .flex-grid__item {
    max-width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
  }
}

@media screen and (min-width: 990px) {
  .flex-grid--one-third-max.flex-grid--3-col-desktop .flex-grid__item {
    max-width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
  }
}

.flex-grid--1-col .flex-grid__item {
  max-width: 100%;
  width: 100%;
}

.flex-grid--3-col .flex-grid__item {
  width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .flex-grid--3-col .flex-grid__item {
    width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
  }
}

.flex-grid--2-col .flex-grid__item {
  width: calc(50% - var(--grid-horizontal-spacing) / 2);
  max-width: 100%;
}

@media screen and (min-width: 750px) {
  .flex-grid--2-col .flex-grid__item {
    width: calc(50% - var(--grid-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-horizontal-spacing) / 2);
  }

  .flex-grid--4-col-tablet .flex-grid__item {
    width: calc(25% - var(--grid-horizontal-spacing) * 3 / 4);
  }

  .flex-grid--3-col-tablet .flex-grid__item {
    width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
  }

  .flex-grid--3p3-col-tablet .flex-grid__item {
    width: calc(30.3% - var(--grid-horizontal-spacing) * 3 / 3.3);
  }

  .flex-grid--2-col-tablet .flex-grid__item {
    width: calc(50% - var(--grid-horizontal-spacing) / 2);
  }

  .flex-grid--2p3-col-tablet .flex-grid__item {
    width: calc(43.48% - var(--grid-horizontal-spacing) 2 / 2.3);
  }

  .flex-grid--1-col-tablet .flex-grid__item {
    width: 100%;
  }
}

@media screen and (min-width: 990px) {
  .flex-grid--6-col-desktop .flex-grid__item {
    width: calc(16.66% - var(--grid-horizontal-spacing) * 5 / 6);
  }

  .flex-grid--5-col-desktop .flex-grid__item {
    width: calc(20% - var(--grid-horizontal-spacing) * 4 / 5);
  }

  .flex-grid--4-col-desktop .flex-grid__item {
    width: calc(25% - var(--grid-horizontal-spacing) * 3 / 4);
  }

  .flex-grid--4p3-col-desktop .flex-grid__item {
    width: calc(23.26% - var(--grid-horizontal-spacing) * 4 / 4.3);
  }

  .flex-grid--3-col-desktop .flex-grid__item {
    width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
  }

  .flex-grid--3p3-col-desktop .flex-grid__item {
    width: calc(30.3% - var(--grid-horizontal-spacing) * 3 / 3.3);
  }

  .flex-grid--2-col-desktop .flex-grid__item {
    width: calc(50% - var(--grid-horizontal-spacing) / 2);
  }

  .flex-grid--rigid.flex-grid--6-col-desktop .flex-grid__item {
    max-width: calc(16.66% - var(--grid-horizontal-spacing) * 5 / 6);
  }

  .flex-grid--rigid.flex-grid--5-col-desktop .flex-grid__item {
    max-width: calc(20% - var(--grid-horizontal-spacing) * 4 / 5);
  }

  .flex-grid--rigid.flex-grid--4-col-desktop .flex-grid__item {
    max-width: calc(25% - var(--grid-horizontal-spacing) * 3 / 4);
  }

  .flex-grid--rigid.flex-grid--3-col-desktop .flex-grid__item {
    max-width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
  }

  .flex-grid--rigid.flex-grid--2-col-desktop .flex-grid__item {
    max-width: calc(50% - var(--grid-horizontal-spacing) / 2);
  }
}

@media screen and (min-width: 990px) {
  .flex-grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .flex-grid--1-col-desktop .flex-grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .flex-grid--1-col-mobile .flex-grid__item {
    max-width: 100%;
    width: 100%;
  }
}

.flex-grid__item--vertical-align {
  align-self: center;
}

.flex-grid__item--full-width {
  flex: 0 0 100%;
  max-width: 100%;
}

.flex-grid--no-gutters {
  column-gap: 0;
}

.flex-grid--no-gutters .flex-grid__item {
  padding-bottom: 0;
}

/* component-media */

.media-wrapper {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: rgb(var(--color-placeholder));
}

[data-lazy-image] .media-wrapper.loading,
.media-wrapper[loading] {
  position: relative;
}

[data-lazy-image] .media-wrapper.loading::before,
[data-lazy-image] .media-wrapper.loading::after,
.media-wrapper[loading]::before,
.media-wrapper[loading]::after {
  content: '';
  position: absolute;
  width: 5rem;
  height: 0.2rem;
  left: 50%;
  top: 50%;
  margin-top: -0.1rem;
  margin-left: -2.5rem;
  z-index: 1;
  background-color: rgb(var(--color-base-background));
}

[data-lazy-image] .media-wrapper.loading::before,
.media-wrapper[loading]::before {
  opacity: 1;
  background-color: rgb(var(--color-base-text));
}

[data-lazy-image] .media-wrapper.loading::after,
[data-lazy-image] .media-wrapper--small.loading::after,
.media-wrapper[loading]::after {
  animation: preloading 1.5s infinite ease;
  will-change: transform;
}

[data-lazy-image] .media-wrapper.loading img[is=lazy-image],
.media-wrapper[loading] img[is=lazy-image] {
  opacity: 0;
}

.media-wrapper--large[loading]::before,
.media-wrapper--large[loading]::after {
  width: 8rem;
  height: 0.3rem;
  margin-left: -4rem;
  margin-top: -0.15rem;
}

[data-lazy-image] .media-wrapper--small.loading::before,
[data-lazy-image] .media-wrapper--small.loading::after {
  width: 3rem;
  margin-left: -1.5rem;
}

.media {
  display: block;
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

/* .product__video-control is a corner control, not a layer that fills the
   frame — excluded here the same way the poster button is. */
.media > *:not(.zoom, .deferred-media__poster-button, .product__video-control),
.media model-viewer,
.media > picture *:not(.zoom, .deferred-media__poster-button, .product__video-control) {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img,
.media > picture img {
  object-fit: cover;
  object-position: var(--image-position);
}

.media > img,
.media > picture {
  transition: opacity var(--duration-long) ease;
}

.media--image-contain > img,
.media--image-contain > picture img {
  object-fit: contain;
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--wide {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img,
.media.media--hover-effect > picture + picture {
  opacity: 0;
  pointer-events: none;
  background-color: rgb(var(--color-placeholder));
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

.media .image-fit {
  position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	object-position: var(--image-position);
}

.media--image-contain .image-fit {
	object-fit: contain;
}

.media--adapt {
	position: relative;
	height: 0;
	padding-bottom: var(--image-ratio-percent);
}

.media--adapt .image-fit {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0
}

.media--400px {
	height: 260px
}

.media--450px {
	height: 292.5px
}

.media--500px {
	height: 325px
}

.media--550px {
	height: 357.5px
}

.media--600px {
	height: 390px
}

.media--650px {
	height: 422.5px
}

.media--700px {
	height: 455px
}

.media--750px {
	height: 487.5px
}

.media--850px {
	height: 552.5px
}

.media--900px {
	height: 585px
}

.media--100vh {
	height: 100vh
}

@media screen and (min-width: 750px) {
	.media--400px {
		height: 400px
	}

  .media--450px {
		height: 450px
	}

	.media--500px {
		height: 500px
	}

  .media--550px {
		height: 550px
	}

	.media--600px {
		height: 600px
	}

  .media--650px {
		height: 650px
	}

  .media--700px {
		height: 700px
	}

	.media--750px {
		height: 750px
	}

  .media--850px {
		height: 850px
	}

  .media--900px {
		height: 900px
	}
}

@media screen and (max-width: 749px) {
  .media-mobile--200px {
		height: 200px
	}

	.media-mobile--250px {
		height: 250px
	}

	.media-mobile--300px {
		height: 300px
	}

	.media-mobile--400px {
		height: 400px
	}

	.media-mobile--500px {
		height: 500px
	}

  .media-mobile--600px {
		height: 600px
	}

	.media-mobile--100vh {
		height: 90vh
	}

  .media-mobile--square {
    padding-bottom: 100%;
  }
  
  .media-mobile--portrait {
    padding-bottom: 125%;
  }
  
  .media-mobile--landscape {
    padding-bottom: 66.6%;
  }

  .media-mobile--adapt {
    position: relative;
    height: 0;
    padding-bottom: var(--image-ratio-percent);
  }

  .media-mobile--adapt .image-fit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - link (no background/border/padding, button typography) */

.button-link {
  display: inline-block;
  font-family: var(--font-button-family);
  font-size: calc(var(--font-button-size) - 2px);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: currentColor;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--duration-default) ease;
}

@media screen and (hover: hover) {
  .button-link:hover {
    color: rgba(var(--color-foreground), 0.7);
  }
}

.button-link-small {
  display: inline-block;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: currentColor;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

@media screen and (min-width: 750px) {
  .button-link-small {
    font-size: 1.2rem;
  }
  .button-link {
     font-size: var(--font-button-size);
  }
}

/* Button - default */

.button,
.shopify-challenge__button {
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-family: inherit;
  padding: 1rem 4rem;
  text-decoration: none;
  border-radius: var(--button-radius);
  border: var(--button-border-width) solid rgb(var(--color-button-border));
  color: rgb(var(--color-button-text));
  background-color: rgb(var(--color-button-background));
  font-family: var(--font-button-family);
  min-width: 24rem;
  max-width: 100%;
  text-transform: uppercase;
  font-weight: 600;
  transition-property: color, background-color, box-shadow;
  transition-duration: var(--duration-long);
  transition-timing-function: ease;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
  box-shadow: var(--button-shadow-horizontal-offset) var(--button-shadow-vertical-offset) rgba(var(--color-shadow), var(--shadow-opacity));
}

.shopify-challenge__button {
  border: var(--button-border-width) solid rgb(var(--color-button-border));
}

@media screen and (min-width: 750px) {
  .button--large {
    font-size: calc(var(--font-button-size) + 2px);
    padding: 1.5rem 3rem;
    padding-top: calc(1.5rem + var(--font-button-baseline));
  }
}

@media screen and (max-width: 749px) {
  /* R92 — 4rem of inline padding is a lot of a 390px screen; the design's
     proportions want it tighter. */
  .button,
  .shopify-challenge__button {
    padding-inline: 3rem;
  }

  /* A focused field under 16px makes mobile browsers zoom the page in, and iOS
     does not reliably zoom back out afterwards. 16px is the threshold, so
     text-entry fields take it here. Selects and non-text inputs are left alone.

     The bare element selectors below are only 0,1,1 and lost to several
     class-pair rules at 0,2,0 — .search__input.field__input in
     component-search.css and .contact .field__input in section-contact-form.css
     among them — so the header search, the contact fields and the footer signup
     all stayed at 12-14px and still zoomed. The doubled .field__input carries
     this to 0,2,1 so it clears them. */
  input.field__input.field__input,
  textarea.field__input.field__input,
  select.field__input.field__input,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px;
  }
}

.button[disabled],
.button[aria-disabled=true] {
  pointer-events: none;
}

.button,
.button-label,
.shopify-challenge__button {
  font-size: var(--font-button-size);
  letter-spacing: 0.2em;
  line-height: 1;
}

.button--tertiary {
  font-size: calc(var(--font-button-size) - 1px);
  padding: 0.8rem 1.5rem;
  padding-top: calc(0.8rem + var(--font-button-baseline));
  min-width: 9rem;
  min-height: 4rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  border: none;
  box-shadow: inset 0 0 0 0.1rem rgb(var(--color-button-border));
  transition: box-shadow var(--duration-default) ease;
}

.button--small {
  font-size: max(calc(var(--font-button-size) - 2px), 1.2rem);
  padding: 0.6rem 2rem;
  padding-top: calc(0.6rem + var(--font-button-baseline));
  min-height: 4rem;
  min-width: 18rem;
}

.button--compact {
  flex-shrink: 0;
  white-space: nowrap;
  min-width: auto;
}

@media screen and (max-width: 749px) {
  .mobile\:button--small {
    font-size: max(calc(var(--font-button-size) - 2px), 1.2rem);
    padding: 0.6rem 2rem;
    padding-top: calc(0.6rem + var(--font-button-baseline));
    min-height: 4rem;
    min-width: 18rem;
  }

  /* Force all buttons to 1rem font size on mobile */
  .button,
  .button-label,
  .shopify-challenge__button {
    font-size: 1rem;
  }
}

.shopify-challenge__container .shopify-challenge__button {
  min-width: 16rem;
  margin-top: 3rem;
}

@keyframes banner-slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* Close "x" mirrors the newsletter popup's (.popup-close): same close-alt icon,
   size, colour and corner inset, so the two overlays read as one system.
   Scoped to #shopify-pc__banner to outrank Shopify's own button padding. */
#shopify-pc__banner .pc-close-btn {
  position: absolute;
  top: 1.1rem;
  right: 0.8rem;
  /* Shopify margins its banner buttons; zero it or the offsets stack. */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: none;
  border: none;
  line-height: 0;
  opacity: 0.7;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  transition: opacity 0.15s;
}
#shopify-pc__banner .pc-close-btn:hover {
  opacity: 1;
}
#shopify-pc__banner .pc-close-btn .icon {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
}
#shopify-pc__banner{
  max-width: 360px;
  padding: 40px;
  box-shadow: none;
  max-height: 100%;
  border-radius: 0;
  animation: banner-slide-in-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    #shopify-pc__banner__body-title{
      display: none;
    }
    #shopify-pc__banner__btn-accept{
      border-radius: 50px;
      flex: 1 !important;
      min-width: 0 !important;
      font-size: 1.2rem;
      line-height: 1;
      max-height: 3.2rem;
      padding: .9rem 1.5rem;
      font-family: var(--font-button-family);
      text-transform: uppercase;
      letter-spacing: 0.2rem;
      transition: background-color 0.25s ease, color 0.25s ease;
    }
    #shopify-pc__banner__btn-accept:hover{
      background-color: rgba(var(--color-button-background), 0.9) !important;
    }
     #shopify-pc__banner__btn-decline{
      border-radius: 50px;
      background-color: rgb(var(--color-background));
      color: rgb(var(--color-base-text));
      border: 1px solid rgb(var(--color-base-text));
      flex: 1 !important;
      min-width: 0 !important;
      font-size: 1.2rem;
      line-height: 1;
      padding: .9rem 1.5rem;
      font-family: var(--font-button-family);
      text-transform: uppercase;
      letter-spacing: 0.2rem;
      transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }
    #shopify-pc__banner__btn-decline:hover{
      background-color: rgba(var(--color-button-background), 0.9) !important;
      color: rgb(var(--color-background)) !important;
      border-color: transparent !important;
    }
    p{
      margin-bottom: 20px !important;
      line-height: 1.5;
    }
    #shopify-pc__banner__btn-manage-prefs{
      opacity: 0.7;
      font-size: 1.2rem;
    }
}
#shopify-pc__prefs__dialog header {
  flex-direction: column;
}
#shopify-pc__prefs__dialog{
  /* R7 — sharp corners (Shopify ships 3px) */
  border-radius: 0 !important;

  /* R9 — no divider under the button row */
  header{
    border-bottom: none !important;
  }

  /* R7 — close "x" tucked into the corner */
  #shopify-pc__prefs__header-close{
    top: 2rem !important;
    right: 2rem !important;
  }

  #shopify-pc__prefs__header-title{
    font-family: var(--font-h1-family) !important;
    font-style: var(--font-h1-style) !important;
    font-weight: var(--font-h1-weight) !important;
    text-transform: uppercase;
    margin-bottom: 4rem;
  }
  .shopify-pc__prefs__header-actions{
    width: 100%;
  }
  .shopify-pc__prefs__header-actions button {
    border-radius: 50px;
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 1.2rem;
    line-height: 1;
    padding: .9rem 1.5rem;
    font-family: var(--font-button-family);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    transition: background-color 0.25s ease, color 0.25s ease;
  }
  .shopify-pc__prefs__header-actions button:hover{
    background-color: rgba(var(--color-button-background), 0.9) !important;
  }
  .shopify-pc__prefs__intro h3{
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: 1rem;
  }

  /* R9 — no divider above the first option */
  .shopify-pc__prefs__option{
    border-top: none !important;
  }

  /* R8 — bold labels are always all caps in this theme */
  .shopify-pc__prefs__option > label{
    text-transform: uppercase;
  }

  /* R10 — checkbox matches the account page (main-survey) style: 1.5rem
     square, hairline border, solid fill when checked. Shopify's markup is a
     visually-hidden input plus a <span> holding two SVGs; hide the SVGs, paint
     the span, and drive the state off the real input's :checked. */
  .shopify-pc__prefs__option label > span[aria-hidden] svg{
    display: none !important;
  }

  /* Box + label gap mirrors .survey__answer on the account page. */
  .shopify-pc__prefs__option > label{
    gap: 1rem;
    align-items: center;
  }

  .shopify-pc__prefs__option label > span[aria-hidden]{
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    border: 0.1rem solid rgba(var(--color-foreground), 0.55);
    border-radius: 0;
    background-color: transparent;
    transition: background-color 100ms ease, border-color 100ms ease;
  }

  .shopify-pc__prefs__option label:has(input[type="checkbox"]:checked) > span[aria-hidden]{
    background-color: rgb(var(--color-foreground));
    border-color: rgb(var(--color-foreground));
  }

  /* Description text lines up under the label text, not under the box:
     1.5rem box + 1rem gap. */
  .shopify-pc__prefs__option > p{
    padding-left: 2.5rem !important;
  }
}
#shopify-pc__banner *:has(> #shopify-pc__banner__btn-accept) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px;
}
#shopify-pc__banner__btn-manage-prefs {
  flex-basis: 100% !important;
  display: block !important;
  text-align: center;
  order: 10;
}
#shopify-pc__banner__btn-manage-prefs{
  text-align: left !important;
  /* Shopify pads its banner buttons 25px inline; zero it so the link starts on
     the same vertical as the paragraph and the Accept/Decline buttons. */
  padding-left: 0 !important;
}
@media screen and (max-width: 749px) {
  #shopify-pc__banner{
    max-width: 100%;
    padding: 20px;
  }
  #shopify-pc__banner *:has(> #shopify-pc__banner__btn-accept) {
    flex-direction: row !important;
  }
  /* R85 — equal halves filling the row with one even gap. Shopify puts its
     own margins on these, which made the pair unequal and left a lopsided
     inset on the right. */
  #shopify-pc__banner *:has(> #shopify-pc__banner__btn-accept) {
    gap: 2rem;
  }

  #shopify-pc__banner__btn-accept,
  #shopify-pc__banner__btn-decline {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 1rem !important;
  }
  #shopify-pc__banner__btn-manage-prefs{
    font-size: 1rem;
  }
  #shopify-pc__prefs__dialog{
    .shopify-pc__prefs__header-actions button{
      font-size: 1rem;
    }
    .shopify-pc__prefs__intro h3,
    .shopify-pc__prefs__intro-main,{
      font-size: 1rem !important;
    }
    .shopify-pc__prefs__option label{
      font-size: 1.2rem !important;
    }
  }
}
/* Button - hover */

@media screen and (hover: hover) {
  /* Disable shine/glow animation on all buttons */
  .button::after,
  .button--secondary::after,
  .button--tertiary::after {
    content: none;
    animation: none;
    background: none;
    transform: none;
    transition: none;
  }

  .button:hover {
    box-shadow: none;
    background-color: rgba(var(--color-button-background), 0.9);
    color: rgb(var(--color-button-text));
    transition-delay: 0s;
  }

  .button:hover::after,
  .button--secondary:hover::after {
    animation: none;
    transform: none;
  }

  .button--secondary:hover,
  .button--outline:hover {
    background-color: rgba(var(--color-button-background), 0.9);
    color: rgb(var(--color-button-text));
    transition-delay: 0s;
  }

  .button--tertiary:hover {
    color: rgb(var(--color-button-text));
    box-shadow: inset 0 0 0 0.2rem rgb(var(--color-button-border));
    transition-delay: 0s;
  }

  .button.button--outline-primary:hover {
    background-color: rgb(var(--color-button-background));
    color: rgb(var(--color-button-text));
    transition-delay: 0s;
  }
}

/* Button - other */

.button:disabled,
.button[aria-disabled=true],
.button.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.button--full-width {
  display: flex;
  width: 100%;
}

.button.loading {
  color: transparent;
}

.button.loading::after {
  content: '';
  display: block;
  animation: by-loading var(--duration-long) infinite linear;
  border: 0.2rem solid transparent;
  border-inline-start: 0.2rem solid rgb(var(--color-button-text));
  border-radius: 100%;
  height: 1.8rem;
  width: 1.8rem;
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -0.9rem;
  margin-left: -0.9rem;
  right: auto;
  bottom: auto;
  background: none;
  transform: none;
  transform-origin: unset;
}

.button--small.loading:before {
  width: 2rem;
  height: 2rem;
}

@keyframes by-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.button--cta {
  min-height: 4.5rem;
  background: none;
  box-shadow: none;
  min-width: auto;
  max-width: 100%;
  padding: 0;
  border: none;
  justify-content: space-between;
  text-transform: none;
  color: rgb(var(--color-link));
}

.button--cta.button--small {
  min-height: 2.7rem;
  min-width: auto;
}

.button--cta.button--small .label {
  padding-inline-end: 1rem;
  font-size: 1rem;
  line-height: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

@media screen and (min-width: 750px) {
  .button--cta {
    min-width: 22.5rem;
  }

  .button--cta.button--large .label {
    font-size: 1.8rem;
  }
}

@media screen and (hover: hover) {
  .button--cta:hover {
    color: rgb(var(--color-link));
    background-color: transparent;
  }
}

.button--cta::before,
.button--cta::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.1rem;
  bottom: 0;
  right: 0;
  top: auto;
  left: auto;
  transform: none;
  border: none;
  background-image: none;
  background-color: rgb(var(--color-border));
  transition: transform var(--duration-default) ease;
}

.button--cta::before {
  transform: scaleX(0);
  transform-origin: left;
  transition-delay: 0s;
}

.button--cta::after {
  transform-origin: right;
  transition-delay: 0.25s;
}

@media screen and (hover: hover) {
  .button--cta:hover::before {
    transform: scaleX(1);
    transition-delay: 0.25s;
  }

  .button--cta:hover::after {
    transform: scaleX(0);
    transition-delay: 0s;
  }
}

.button--cta .label {
  padding-inline-end: 2rem;
  font-size: 1.6rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.04rem;
  text-align: start;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  transition: transform var(--duration-default) ease;
}

@media screen and (hover: hover) {
  .button--cta:hover .label {
    transform: translateX(0.5rem);
  }
}

.button--cta .icon {
  fill: currentColor;
  width: 1.5rem;
  height: 1.5rem;
}

.button--cta.loading {
  color: rgb(var(--color-link));
}

.button--cta.loading::before {
  content: none;
}

.button--cta.loading::after {
  background-color: transparent;
  border-width: 0.1rem;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.8rem;
  margin-left: 0;
  left: auto;
  right: 0;
}

.button--cta.loading .icon {
  color: transparent;
}

.button--arrow {
  box-shadow: none;
  min-height: auto;
  min-width: auto;
}

/* Button - group */
.button-group {
  display: inline-flex;
  gap: clamp(0.3rem, 2vw, 1.25rem);
  flex-wrap: wrap;
}

.right .button-group {
  justify-content: flex-end;
}

.left .button-group {
  justify-content: flex-start;
}

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

@media screen and (max-width: 749px) {
  .mobile-left .button-group {
    justify-content: flex-start;
  }

  .mobile-right .button-group {
    justify-content: flex-end;
  }

  .mobile-center .button-group {
    justify-content: center;
  }
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: rgb(var(--color-foreground));
  width: 100%;
  box-shadow: inset 0 0 0 0.1rem rgb(var(--color-border));
  height: 4.2rem;
  box-sizing: border-box;
  transition: box-shadow var(--duration-default) ease;
}

@media screen and (min-width: 750px) {
  .field__input,
  .select__select,
  .customer .field input,
  .customer select {
    min-height: 4.5rem;
  }
}

.select__select {
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.select__select option {
  color: initial;
}

@media screen and (hover: hover) {
  .field__input:hover,
  .select__select:hover,
  .customer .field input:hover,
  .customer select:hover {
    box-shadow: inset 0 0 0 0.2rem rgb(var(--color-border));
  }
}

.field__input.invalid,
.select__select.invalid,
.customer .field input.invalid,
.customer select.invalid {
  box-shadow: inset 0 0 0 0.1rem var(--color-critical);
}

@media screen and (hover: hover) {
  .field__input.invalid:hover,
  .select__select.invalid:hover,
  .customer .field input.invalid:hover,
  .customer select.invalid:hover {
    box-shadow: inset 0 0 0 0.2rem var(--color-critical);
  }
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 0.2rem rgb(var(--color-border));
}

.text-area,
.select {
  display: inline-block;
  position: relative;
  width: 100%;
}

/* Select */

.select .icon-caret,
.customer select + svg {
  height: 0.6rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.35rem);
  right: 1.5rem;
}

.select__select,
.customer select {
  cursor: pointer;
  padding: 0;
  padding-inline-start: 1.5rem;
  padding-inline-end: 4rem;;
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
}

.customer .field {
  display: block;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: start;
  padding: 1.5rem;
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  color: rgb(var(--color-foreground));
  opacity: 0.7;
  transition: opacity var(--duration-default) ease;
}

.field__input:focus::placeholder,
.customer .field input:focus::placeholder {
  opacity: 0.4;
}

.field__input:-webkit-autofill,
.customer .field input:-webkit-autofill {
  background-clip: text;
  -webkit-background-clip: text;
}

.field__input::-webkit-search-decoration,
.customer .field input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

@media screen and (hover: hover) {
  .field__button:hover {
    color: currentColor;
  }
}

.field__button::before {
  content: none;
}

.field__button > .icon {
  height: 2.5rem;
  width: 2.5rem;
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  padding: 1.2rem;
  min-height: 10rem;
  resize: none;
}

.text-area--resize-vertical {
  resize: vertical;
}

input[type=checkbox] {
  display: inline-block;
  width: auto;
  margin-inline-end: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  font-family: var(--font-body-family);
  align-items: center;
  display: grid;
  grid-template-columns: auto 1fr;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
  margin-bottom: 0;
  font-weight: 400;
  color: rgb(var(--color-foreground));
}

.form__message.errors {
  color: var(--color-critical);
}

.form__message.errors .rte a {
  color: inherit;
}

.form__message.errors + .errors {
  margin-top: 1rem;
}

.form__message.errors + .errors ul {
  margin-top: 0;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: start;
}

.form__message .icon,
.customer .form__message .icon {
  align-self: flex-start;
  height: 1.6rem;
  width: 1.6rem;
  margin-inline-end: 0.5rem;
}

.customer .field .form__message .icon {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status .icon {
  width: 1.8rem;
  height: 1.8rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  position: relative;
  width: 12rem;
  display: flex;
  align-items: center;
  --color-keyboard-focus: var(--color-border);
}

.form__label + .quantity {
  width: 14rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-border));
}

.no-js .quantity {
  height: 4rem;
  width: 10rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-border));
}

.quantity__input {
  font-family: inherit;
  color: currentColor;
  font-size: 1.4rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  height: 3.6rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.form__label + .quantity .quantity__input {
  height: 4.5rem;
}

.quantity__button {
  padding: 0;
  position: relative;
  flex: 0 0 3.6rem;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-foreground), 0.06);
  transition: color var(--duration-default) ease;
}

.form__label + .quantity .quantity__button {
  flex: 0 0 2.6rem;
  width: 2.6rem;
  height: 2.6rem;
}

.form__label + .quantity .quantity__button:first-child {
  margin-inline-start: 1rem;
}

.form__label + .quantity .quantity__button:last-child {
  margin-inline-end: 1rem;
}

.quantity__button::after {
  content: '';
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: scale(0);
  background-color: rgb(var(--color-foreground));
  transition: transform var(--duration-default) ease;
}

.quantity__button .icon {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  position: relative;
  z-index: 2;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type=number] {
  -moz-appearance: textfield;
}

.with--price-break {
  .product-form__quantity {
    width: clamp(37rem, 50%, 100%);
  }

  quantity-input {
    border: 1px solid rgba(var(--color-foreground), 0.06);
    border-radius: clamp(.4rem, var(--button-radius), 50%);
    overflow: hidden;
  }

  .quantity__button[name=minus],
  .quantity__button[name=minus]::after {
    border-radius: .3rem 0 0 .3rem;
  }

  .quantity__button[name=plus],
  .quantity__button[name=plus]::after {
    border-radius: 0 .3rem .3rem 0;
  }
}

/* component-quantity-rules */
.quantity__rules-cart {
  position: relative;

  .loading-overlay {
    display: inline-block;
    top: 0;
  }

  .loading-overlay__spinner {
    width: 1.6rem;
  }

  .loading-overlay:not(.hidden) ~ * {
    visibility: hidden;
  }
}
.quantity__rules .divider + .divider::before {
  content: "\2022";
  margin: 0 .5rem;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.no-js details[open] .modal__toggle {
  position: absolute;
  z-index: 101;
  height: 3.4rem;
  width: 4.4rem;
  right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .no-js details[open] .modal__toggle {
    height: 4.4rem;
    right: calc(100% / 2 - 30rem);
  }
}

.modal__toggle-close {
  display: none;
}

.no-js details[open] .modal__toggle span {
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgb(var(--color-background));
}

.no-js details[open] .modal__toggle .icon-close {
  display: flex;
  width: 1.2rem;
  height: 1.2rem;
}

.modal__toggle-open {
  display: flex;
}

.no-js details[open] .modal__toggle-open {
  display: none;
}

.no-js .modal__close-button {
  visibility: hidden;
}

.modal__close-button {
  padding: 1.2rem;
  height: 4.4rem;
  width: 4.4rem;
  border: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  color: rgb(var(--color-link));
}

.modal__close-button .icon {
  width: 2rem;
  height: 2rem;
  transition: transform var(--duration-default) ease;
}

@media screen and (hover: hover) {
  .modal__close-button:hover .icon {
    transform: scale(0.8) rotate(90deg);
  }
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(var(--color-background));
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.no-js details[open] .modal__content {
  overflow: visible;
}

.no-js details[open] .modal-overlay {
  display: block;
  animation: fade-in var(--duration-long) ease;
}

.no-js details[open] .modal-overlay::after {
  content: '';
  position: absolute;
  background-color: rgba(var(--color-overlay), 0.05);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-base-accent));
  color: rgb(var(--color-base-solid-button-labels));
  font-family: var(--font-button-family);
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  top: 0;
  right: 0.5rem;
  line-height: 1;
  transition-property: opacity, transform, color, background-color;
  transition-duration: var(--duration-default);
  transition-timing-function: ease;
}

@media screen and (min-width: 750px) {
  .cart-count-bubble {
    top: 0.6rem;
  }
}

.cart-count-bubble--dot {
  top: 1.2rem;
  right: 0.8rem;
  width: 0.4rem;
  height: 0.4rem;
  background-color: rgb(var(--color-header-foreground));
}

/* section-header */
.shopify-section-header.animate {
  transition: transform var(--duration-default) ease;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  /* Above the drawer click-to-close backdrop (z-index: 30) so the header's
     own controls (logo, menu/cart toggles) stay clickable while a drawer
     is open. */
  z-index: 40;
  transition: box-shadow var(--duration-default) ease;
}

.header-wrapper--border-bottom {
  box-shadow: 0 0.1rem 0 rgba(var(--color-header-border), 0.3);
}

.header {
  display: grid;
  grid-template-areas: 'left-icon heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Below the desktop header, keep the logo on the centre line whatever the icons
   either side measure. A 1fr track's minimum is its own content, so once the
   right-hand group (Search / Wishlist / Account / Bag) outgrew its share it
   widened that track and dragged the middle column — and the logo — to the left.
   minmax(0, 1fr) lets both side tracks shrink equally, so the middle stays put. */
@media screen and (max-width: 1099px) {
  .header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

/* Mobile header sizing moved to component-sticky-header.css (render-blocking)
   to prevent the header-height layout jump while base.css loads async. */

@media screen and (min-width: 1100px) {
  .header--top-left {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 2rem;
  }

  .header--top-center {
    grid-template-areas:
      'left-icon heading icons'
      'navigation navigation navigation';
  }

  .header--center-split {
    grid-template-areas: 'left-icon navigation heading navigation-split icons';
    grid-template-columns: auto 1fr auto 1fr auto;
    column-gap: 2rem;
  }

  .header--center-split .header__heading {
    margin: 0 1rem;
  }

  .header--off-canvas {
    grid-template-areas: 'left-icon heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--menu-left-logo-center {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--menu-left-logo-center .header__heading,
  .header--menu-left-logo-center .header__heading-link {
    justify-self: center;
  }

  .header--menu-left-logo-center .header__inline-menu {
    justify-self: start;
  }

  .header--menu-left-logo-center .header__left {
    display: none;
  }

  .header--off-canvas header-drawer {
    display: block;
  }

  .header--off-canvas .header__inline-menu {
    display: none;
  }

  .header--off-canvas .header__heading,
  .header--off-canvas .header__heading-link {
    grid-area: heading;
    justify-self: center;
  }

  .header--middle-left .header__inline-menu {
    min-width: 45rem;
  }

  .header:not(.header--middle-left):not(.header--center-split):not(.header--menu-left-logo-center) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header-wrapper > .header::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-header-background);
  background-color: rgb(var(--color-header-background));
}

@media screen and (min-width: 750px) {
  .header-wrapper > .header::before {
    transition: height var(--duration-default) ease;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: block;
  position: relative;
  word-break: break-word;
  text-decoration: none;
}

.header__heading-link::before,
.header__heading-link::after {
  content: none;
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgb(var(--color-header-foreground));
  transition: color var(--duration-default) ease;
}

@media screen and (hover: hover) {
  .header__heading-link:hover .h2 {
    color: rgb(var(--color-header-foreground), 0.7);
  }
}

.header__heading-logo {
  width: 120px;
  height: 19px;
  max-height: none;
}

@media screen and (min-width: 750px) {
  .header__heading-logo {
    transition: opacity var(--duration-default) ease;
  }
}

.header__heading-logo.inverse {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 1099px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header__heading-logo {
    max-height: 1.46rem;
    width: auto;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: center;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 1100px) {
  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading,
  .header--center-split .header__heading-link,
  .header--center-split .header__heading,
  .header--menu-left-logo-center .header__heading-link,
  .header--menu-left-logo-center .header__heading {
    justify-self: center;
  }
}

/* Header icons */
.header__right {
  display: flex;
  grid-area: icons;
  justify-self: end;
  margin-inline-end: -1.5rem;
}

.header__icon:not(.header__icon--summary),
.header__icon span:not(.cart-count-bubble) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon span:not(.cart-count-bubble) {
  height: 100%;
}

.header__icon {
  color: rgb(var(--color-header-foreground));
  height: 3.4rem;
  width: var(--icon-spacing, 5.2rem);
  text-decoration: none;
}

@media screen and (hover: hover) {
  .header__icon:hover {
    color: rgba(var(--color-header-foreground), 0.7);
  }
}

@media screen and (min-width: 750px) {
  .header__icon {
    height: 4.4rem;
    transition: color var(--duration-default) ease;
  }
}

.header__icon::after {
  content: none;
}

.header__icon .icon {
  stroke-width: var(--icon-weight);
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
  transition: transform var(--duration-default) ease;
  will-change: transform;
}

.header__icon .icon,
#icon-close,
#icon-search,
#icon-cart {
  overflow: visible;
}

@media screen and (hover: hover) {
  .header__icon:hover .icon {
    transform: scale(1.07);
  }
}

.header__icon--cart {
  position: relative;
}

/* Header icon text labels */
.header__icon-text {
  font-family: var(--font-navigation-family);
  font-weight: var(--font-navigation-weight);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space: nowrap;
  background-color: transparent;
  background-image: linear-gradient(to top, rgb(var(--color-header-foreground)) 0px, rgb(var(--color-header-foreground)) 0px), linear-gradient(to top, transparent 0px, transparent 0px);
  background-repeat: no-repeat;
  background-position: left bottom, left bottom;
  background-size: 0% 0.1rem, 0% 0.1rem;
}
@media screen and (min-width: 750px) {
  .header__icon-text {
    font-size: var(--font-navigation-size);
  }

}
@media screen and (hover: hover) {
  .header__icon-text {
    transition-property: background-size;
    transition-timing-function: ease;
    transition-duration: var(--duration-default);
  }

  .header__icon:hover .header__icon-text {
    background-size: 100% 0.1rem, 100% 0.1rem;
  }

  /* Remove hover underline for links inside .header__right; keep underline only for active state */
  .header__right .header__icon:hover .header__icon-text {
    background-size: 0% 0.1rem, 0% 0.1rem;
  }

  .header__right .header__icon[aria-current="page"] .header__icon-text,
  .header__right .header__icon.is-active .header__icon-text {
    background-size: 100% 0.1rem, 100% 0.1rem;
  }
}

.header--icon-text .header__icon {
  width: auto;
  padding: 1.2rem 1.5rem;
}
.header--icon-text .cart-drawer-container .header__icon {
  margin-right: -0.9rem;
}
.header--icon-text .header__icon .header__icon {
  padding: 0;
  width: auto;
  height: auto;
}

.header--icon-text .header__right {
  margin-inline-end: 0;
}

.no-js .cart-drawer-container {
  display: none;
}

@media screen and (max-width: 1099px) {
  menu-drawer ~ .header__right .header__icon--account {
    display: none;
  }
}

/* Search */
.header__left {
  display: flex;
  grid-area: left-icon;
  margin-inline-start: -1.5rem;
}

.header__left header-menu-toggle,
.header__left--localization search-modal,
.header__left--localization > localization-form,
.header--top-center .header__left search-modal,
.header--center-split .header__left search-modal,
.header--menu-left-logo-center .header__left search-modal {
  display: none;
}

search-modal {
  display: inline-flex;
  line-height: 0;
}

.header--top-center .header__right search-modal,
.header--center-split .header__right search-modal,
.header--menu-left-logo-center .header__right search-modal,
.header--top-center .header__left--localization ~ .header__right search-modal,
.header--center-split .header__left--localization ~ .header__right search-modal,
.header--menu-left-logo-center .header__left--localization ~ .header__right search-modal {
  display: inline-flex;
}

@media screen and (min-width: 1100px) {
  .header__left--localization > localization-form,
  .header--top-center .header__left search-modal,
  .header--center-split .header__left search-modal {
    display: block;
  }

  .header--top-center .header__right search-modal,
  .header--center-split .header__right search-modal {
    display: none;
  }
}

.details-modal {
  overflow: hidden;
  height: 0;
}

/* Header localization */
.header .localization-selector {
  width: auto;
  padding: 0;
  height: 3.4rem;
  color: rgb(var(--color-header-foreground));
  background-color: transparent;
  border: none;
}

@media screen and (min-width: 750px) {
  .header .localization-selector {
    height: 4.4rem;
  }
}

.header .localization-selector .icon + .label {
  margin-inline-start: 0.8rem;
}

.header .localization-selector .label {
  font-family: var(--font-navigation-family);
  font-size: calc(var(--font-navigation-size) - 0.2rem);
  font-weight: var(--font-navigation-weight);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.header .menu-drawer .localization-selector {
  color: rgb(var(--color-link));
}

.header__left > localization-form .localization-selector + .disclosure__list,
.header__right > localization-form .localization-selector + .disclosure__list {
  animation-name: animateHeaderLocalization;
  top: calc(100% + 1rem);
  bottom: auto;
  border: none;
  box-shadow: 0 1rem 2rem rgba(var(--color-header-foreground), 0.08);
  --color-background: var(--color-header-background);
  --color-link: var(--color-header-foreground);
}

@keyframes animateHeaderLocalization {
  0% {
    opacity: 0;
    transform: translate(-50%, -1rem);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.header__right .localization-form {
  display: none;
}

@media screen and (min-width: 1100px) {
  .header__right .localization-form {
    display: block;
  }
}

/* Header cart drawer 
summary .header__icon--summary::after,
drawer-close-button.header__icon--summary::after,
drawer-close-button.header__icon--menu::after,
.popover-close-button.header__icon::after {
  content: '';
  position: absolute;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  transform: scale(0);
  background-color: rgba(var(--color-foreground), 0.08);
  transition: transform var(--duration-default) ease;
}*/

details[open].menu-opening > summary .header__icon--summary::after {
  transform: scale(1);
}

drawer-close-button.header__icon--summary,
drawer-close-button.header__icon--menu,
.popover-close-button.header__icon {
  position: absolute;
  top: 0.3rem;
  right: 1rem;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media screen and (max-width: 749px) {
 drawer-close-button.header__icon--summary  {
    display:none;
  }
}
drawer-close-button.header__icon--menu {
  right: auto;
  left: 1rem;
}

drawer-close-button.header__icon--summary .icon-close,
drawer-close-button.header__icon--menu .icon-close,
.popover-close-button.header__icon .icon-close {
  height: 1.4rem;
  width: 1.4rem;
  stroke-width: calc(var(--icon-weight) - 0.1px);
  color: #A9A9A9;
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: var(--duration-default);
  stroke-width: calc(calc(var(--icon-weight) * 2) - 0.4px);
}

.header__icon--menu .icon-close {
  height: 1.4rem;
  width: 1.4rem;
  stroke-width: calc(var(--icon-weight) - 0.1px);
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

details[open].menu-opening > .header__icon--menu span {
  color: rgb(var(--color-header-foreground));
  transition: color var(--duration-default) ease;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

/* Header menu */
.header__inline-menu {
  margin-inline-start: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header__inline-menu-split {
  grid-area: navigation-split;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link,
.header--center-split .header__inline-menu,
.header--center-split .header__heading-link {
  margin-inline-start: 0;
}

@media screen and (min-width: 1100px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--center-split .header__inline-menu:not(.header__inline-menu-split) {
    text-align: end;
  }

  .header--center-split .header__inline-menu .list-menu {
    justify-content: center;
    column-gap: 0;
  }

  .header--middle-left .header__inline-menu {
    margin-inline-start: 0;
    text-align: end;
  }
}

@media screen and (min-width: 1200px) {
  .header--center-split .header__inline-menu .list-menu {
    column-gap: 1.5rem;
  }

  .header--middle-left .header__right {
    margin-inline-start: 8rem;
  }
}

.header__menu {
  padding: 0 1rem;
}

[data-animate-image] .header__menu-item > use-animate {
  transition: none;
}

.header__menu-item {
  font-family: var(--font-navigation-family);
  font-size: var(--font-navigation-size);
  font-weight: var(--font-navigation-weight);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  letter-spacing: 0.2em;
  padding: 1.2rem 1.5rem;
  color: rgb(var(--color-header-foreground));
  transition: color var(--duration-default) ease;
}

.header-wrapper--uppercase .header__menu-item {
  text-transform: uppercase;
}

@media screen and (hover: hover) {
  .header__menu-item:hover {
    color: rgba(var(--color-header-foreground), 0.7);
  }
}

.header__menu-item--top .label {
  --color-border: var(--color-header-foreground);
}

.header__menu-item .label {
  background-color: transparent;
  background-image: linear-gradient(to top, rgb(var(--color-border)) 0px, rgb(var(--color-border)) 0px), linear-gradient(to top, transparent 0px, transparent 0px);
  background-repeat: no-repeat;
  background-position: left bottom, left bottom;
  background-size: 0% 0.1rem, 0% 0.1rem;
}

@media screen and (hover: hover) {
  .header__menu-item .label {
    transition-property: background-size;
    transition-timing-function: ease;
    transition-duration: var(--duration-default);
  }

  details[open].menu-opening > .header__menu-item .label,
  .no-js details[open] > .header__menu-item .label {
    background-size: 100% 0.1rem, 100% 0.1rem;
  }
}

@keyframes nav-underline-in {
  from { background-size: 0% 0.1rem, 0% 0.1rem; }
  to   { background-size: 100% 0.1rem, 100% 0.1rem; }
}

.header__active-menu-item .label,
.list-menu__item--active .label {
  animation: nav-underline-in var(--duration-default) ease forwards;
}

@media screen and (hover: hover) {
  .header__menu-item:not(.header__active-menu-item):hover .label {
    background-size: 0% 0.1rem, 0% 0.1rem !important;
  }
}

.header__menu-item .icon-caret {
  position: static;
  height: .6rem;
  width: auto;
  display: none;
  transition: transform var(--duration-default) ease;
}

.header__submenu .icon-caret {
  margin-inline-start: 1.2rem;
  margin-top: 0.3rem;
  display: block;
}

.header__submenu details[open] > summary .icon-caret {
  transform: scaleY(-1);
}

@keyframes animateMenuOpen {
  0% {
    height: 0;
  }

  100% {
    height: 27rem;
  }
}

@keyframes animateOverlayOpen {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Sections */
.section--divider {
  border-top: 0.1rem solid rgb(var(--color-base-border));
}

.section--divider-top {
  border-top: 0.1rem solid rgb(var(--color-base-border));
}

.section--divider-bottom {
  border-bottom: 0.1rem solid rgb(var(--color-base-border));
}

.section--padding,
.header-section--padding {
  padding-top: var(--section-padding-top-mobile, calc(var(--section-padding-top) * 0.5));
  padding-bottom: var(--section-padding-bottom-mobile, calc(var(--section-padding-bottom) * 0.5));
}

.spacing-section {
  display: block;
  min-height: var(--spacing-section-mobile);
}

@media screen and (min-width: 750px) {
  .section--padding {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
  }

  .spacing-section {
    min-height: var(--spacing-section-desktop);
  }
}

@media screen and (min-width: 990px) {
  .header-section--padding {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
  }
}

.transition-body {
  position: relative;
}

.transition-body::after {
  content: '';
  display: block;
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transition: opacity var(--duration-long) ease;
  background-color: rgba(var(--color-overlay), 0.05);
}

#MainContent,
.shopify-section-footer {
  transition: transform var(--duration-long) ease;
}

.badge {
  border: 0.1rem solid transparent;
  display: inline-block;
  font-size: 1.1rem;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.5rem 1rem;
  text-align: center;
  word-break: break-word;
  width: max-content;
  background-color: var(--color-badge-background);
  border-color: var(--color-badge-border);
  color: var(--color-badge-foreground);
  font-family: var(--font-button-family);
  padding-top: calc(0.5rem + var(--font-button-baseline));
  border-radius: min(var(--button-radius), 0.2rem);
}

@media screen and (max-width: 480px) {
  .badge {
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    padding-top: calc(0.3rem + calc(var(--font-button-baseline) * 0.65));
  }
}

.badge:empty {
  display: none;
}

.badge--onsale {
  color: rgb(var(--color-background));
  background-color: var(--color-sale-badge-background);
  border-color:var(--color-sale-badge-background);
}

.icon-plus-alt {
  position: relative;
}

.icon-plus-alt::before,
.icon-plus-alt::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: currentColor;
}

.icon-plus-alt::before {
  width: 100%;
  height: 0.1rem;
}

.icon-plus-alt::after {
  width: 0.1rem;
  height: 100%;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }
}

quick-view-drawer {
  display: none;
}

/* Animate */

use-animate {
  display: block;
}

[data-animate-image] use-animate {
  transition-duration: var(--duration-long);
  transition-timing-function: ease;
}

[data-animate-image] use-animate[data-animate^=fade] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-animate-image] use-animate[data-animate^=fade][animate],
.no-js [data-animate-image] use-animate[data-animate^=fade] {
  opacity: 1;
  transform: translateZ(0);
}

[data-animate-image] use-animate[data-animate=fade-up] {
  transform: translate3d(0, 5rem, 0);
}

[data-animate-image] use-animate[data-animate^=zoom-fade] .image-animate {
  opacity: 0;
}
[data-animate-image] use-animate[data-animate=zoom-fade][animate]:not(.loading) .image-animate {
  animation: zoom-fade var(--duration-animate) ease forwards;
}
[data-animate-image] use-animate[data-animate=zoom-fade-small][animate]:not(.loading) .image-animate {
  animation: zoom-fade-small var(--duration-animate) ease forwards;
}
.no-js [data-animate-image] use-animate .image-animate {
  opacity: 1;
}

@keyframes zoom-fade {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoom-fade-small {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes appear-down {
  0% {
    opacity: 0;
    transform: translateY(-1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appear-up {
  0% {
    opacity: 0;
    transform: translateY(1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fade-out {
  0% {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

@keyframes preloading {
  0%, 44%, 88.1%, 100% {
		transform-origin: left;
	}
	
	0%, 100%, 88% {
		transform: scaleX(0);
	}
	
	44.1%, 88% {
		transform-origin: right;
	}
	
	33%, 44% {
		transform: scaleX(1);
	}
}

.modal-scrollbar-measure {
  display: block;
  position: absolute;
  top: -100rem;
  width: 5rem;
  height: 5rem;
  overflow: scroll;
}

.breadcrumb {
  line-height: calc(1 + 0.4 / var(--font-body-scale));
  letter-spacing: 0.2rem;
}

.breadcrumb--divider {
  border-bottom: 0.1rem solid rgba(var(--color-border), 0.5);
  padding-bottom: 0.6rem;
}

.breadcrumb .link {
  font-size: inherit;
}

.shopify-policy__container {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .shopify-policy__container {
    margin-bottom: 7rem;
  }
}

/* Flickity v3.0.0 */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
  touch-action: pan-y;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.flickity-rtl .flickity-slider {
  left: unset;
  right: 0;
}

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

.flickity-cell {
  position: absolute;
  left: 0;
}

.flickity-rtl .flickity-cell {
  left: unset;
  right: 0;
}

.flickity-button {
  position: absolute;
  background-color: rgb(var(--color-background));
  border: none;
  color: rgb(var(--color-foreground));
}

.flickity-button:hover {
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
}

.flickity-page-dots {
  position: absolute;
  z-index: 2;
  bottom: 100%;
  padding: 0 1rem;
  background-color: rgb(var(--color-background));
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 0;
  animation: fade-in var(--duration-default) ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  width: 3rem;
  height: 4rem;
  opacity: 0.4;
  cursor: pointer;
  transition: transform var(--duration-default) ease;
  font-size: 0;
}

.flickity-page-dot.is-selected {
  opacity: 1;
}

.flickity-page-dot::after {
  content: '';
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: rgb(var(--color-foreground));
  transition: transform var(--duration-default) ease;
}

.flickity-page-dot.is-selected::after {
  transform: scale(1.5);
}

/* Ambient animation */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > picture,
  .animate--ambient > svg {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% { transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2); }
    100% { transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2); }
  }
}

/* ========================
   Component: Highlight text
   ======================== */

@keyframes strokeAnimation {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  
  1% {
    opacity: 1;
  }
  
  100% {
    stroke-dashoffset: 0;
  }
}
  
.highlighted-text {
  position: relative;
  display: inline-block;
  font-style: normal;
}

.highlighted-text .icon-scribble {
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  stroke: rgb(var(--color-highlight));
  transform: scaleX(1);
}
  
.highlighted-text .icon-circle {
  width: 120%;
  height: 140%;
  inset-block-start: -20%;
  inset-inline-start: -10%;
}

.highlighted-text .icon-scribble path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

[animate] .highlighted-text .icon-scribble path {
  opacity: 1;
  animation: strokeAnimation 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.highlighted-text:is([data-style=marker], [data-style=bold-underline], [data-style=underline]) {
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, rgb(var(--color-highlight)) 0, rgb(var(--color-background)) 100%), linear-gradient(to right, rgb(var(--color-highlight)) 0, rgb(var(--color-background)) 100%);
  transition: background-size .7s cubic-bezier(.7, 0, .3, 1);
}

.highlighted-text[data-style=marker] {
  background-position: left 70%;
  background-size: 0 80%;
}

[animate] .highlighted-text[data-style=marker] {
  background-size: 100% 80%;
}

.highlighted-text[data-style=underline] {
  background-size: 0 3px, 0% 80%;
  background-position: left 90%, left 50%;
}

[animate] .highlighted-text[data-style=underline] {
  background-size: 100% 3px, 0% 80%;
}

.highlighted-text[data-style=bold-underline] {
  background-position: left 90%;
  background-size: 0 28%;
}

[animate] .highlighted-text[data-style=bold-underline] {
  background-size: 100% 28%;
}

.highlighted-text[data-style=solid-color] {
  transition: color 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}

[animate] .highlighted-text[data-style=solid-color] {
  color: rgb(var(--color-highlight));
}

.highlighted-text .icon-modern-underline {
  width: 100%;
  height: 30%;
  inset-block-start: auto;
  inset-block-end: -20%;
}

.highlighted-text .icon-sketch-underline {
  width: 100%;
  height: 60%;
  inset-block-start: auto;
  inset-block-end: -20%;
}

.highlighted-text .icon-squiggle {
  width: 100%;
  height: 50%;
  inset-block-start: auto;
  inset-block-end: -30%;
}

.highlighted-text .icon-heavy-squiggle {
  width: 100%;
  height: 50%;
  inset-block-start: auto;
  inset-block-end: -35%;
}

details em:not(.highlighted-text),
.product__text em:not(.highlighted-text) {
  display: contents;
}

/* ===== End: Highlight text ===== */

[is=scroll-snap-slider]:not(.-show-scroll-bar) {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

[is=scroll-snap-slider]:not(.-show-scroll-bar)::-webkit-scrollbar {
  display: none !important;
}

@supports (-webkit-overflow-scrolling: touch) {
  input::focus,
  select::focus-visible,
  textarea::focus {
    font-size: max(var (--text-sm), 16px) ;
  }
}

/* Account page */
:root {
  --account-bg: rgb(var(--color-background));
  --account-fg: rgb(var(--color-foreground));
  --account-muted: rgba(var(--color-foreground), 0.55);
  --account-border: #D4D4D4;
  --account-discount: rgb(var(--color-base-accent));
  --account-tile: rgba(var(--color-foreground), 0.06);
}

/* The collapsed subnav panel: square corners, no drop shadow, and its own inset
   so the items are not pressed against the panel edge.

   Kept outside the .custlo-t1-wrapper block because it is not known whether the
   app nests .custlo-t1-nav-scroll-wrapper inside it, and doubled up on the class
   so it still outranks the .custlo-t1-wrapper .custlo-t1-tabs rule (0,2,0) that
   sets the strip's padding and border. */
@media screen and (max-width: 768px) {
  .custlo-t1-nav-scroll-wrapper .custlo-t1-tabs.custlo-t1-tabs {
    border-radius: 0;
    box-shadow: none;
    padding: 0 20px 20px;
  }
}

/* The app lays a pair of scroll arrows over the tab strip. The left one sat on
   top of the first tab and swallowed clicks on it — a hit test across "Orders"
   returned .custlo-t1-nav-arrow--left across the middle of the label and the tab
   itself only at the very edges. The strip's own inset used to hold the label
   clear of the arrow; that inset is gone so the tabs can sit flush with the
   headline (see the .custlo-t1-tabs-scroll-inner rule above).

   The arrow lives inside a fading edge the app draws over each side of the
   strip (#custlo-t1-nav-arrow-left inside #custlo-t1-nav-fade-left), so both go.
   Neither is in the design, and the six tabs fit at every width where the strip
   is shown — below 769px the subnav becomes the dropdown instead — so nothing is
   stranded by removing them.

   !important is needed rather than tidier: the app styles these by id (1,0,0)
   and a class selector here cannot outrank that. */
.custlo-t1-nav-fade,
.custlo-t1-nav-arrow {
  display: none !important;
}

/* R39 — the empty-orders headline takes the footer newsletter heading's
   treatment ("JOIN US AS WE EXPAND WHAT STYLE CAN MEAN.").

   That heading resolves to --font-h1-family (Aktiv Grotesk Ex Bold, 700) and the
   theme's -0.015em heading tracking — NOT --font-heading-family, which is XBold
   at 800. The footer's caps are typed into the setting; here they are asked for,
   so uppercase is set explicitly.

   Note the selector: the app gives this heading an id, not a class, unlike the
   rest of its markup. Kept outside the .custlo-t1-wrapper block so it does not
   depend on where the app places the element. */
#custlo-t1-orders-empty-title {
  text-transform: uppercase !important;
  font-family: var(--font-h1-family) !important;
  font-weight: var(--font-h1-weight) !important;
  letter-spacing: -0.015em !important;
}

.custlo-t1-wrapper{
    max-width: 100% !important;
    padding: 2.5rem 4rem 4rem !important;
  .custlo-t1-icon-wrap{
    display: none;
  }
  /* R39 — headlines are all caps throughout the site. */
  .custlo-t1-welcome{
    font-size: 2.8rem;
    text-transform: uppercase;
  }
  .custlo-t1-empty-address{
    background: transparent;
    border: 0;
  }
  .custlo-t1-btn-outline.custlo-t1-desktop-logout,
  .custlo-t1-tab.custlo-t1-mobile-logout{
    padding: 0;
    border: none;
    font-weight: 400;
    font-size: 1.2rem;
    color: #696969 !important;
    text-transform: capitalize;
    font-family: var(--font-body-family);
    /* R39 — the app's own tracking reads too loose beside the body copy. */
    letter-spacing: 0.01rem;
    position: relative;
    svg{
      display: none;
    }
    &:after{
      position: absolute;
      bottom:0;
      content: '';
      height: 1px;
      width: 100%;
      background: #696969;
    }
    &:hover{
      background: transparent !important;
      color: #696969 !important;
    }
  }
  .custlo-t1-empty-orders-illustration{
    display: none;
  }
  .custlo-t1-empty-benefits{
    background: transparent;
  }
  .custlo-t1-badge {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    padding: .9rem 4rem;
    border-radius: var(--button-radius);
    max-height: 3.4rem;
    line-height: 1;
    font-family: 'Aktiv Grotesk XBold', sans-serif;
    letter-spacing: 0.2rem;
  }
  .custlo-t1-header-main{
    gap:2rem;
  }
  .custlo-t1-header{
    margin-bottom: 4rem;
  }
  .custlo-t1-view .custlo-t1-header{
    padding-bottom: 3.5rem;
    margin-bottom: 3rem;
  }
  .custlo-t1-header:not(.custlo-t1-header-main){
    text-transform: uppercase;
    border-bottom: 1px solid var(--account-border);
    button{
      display: none;
    }
  }
  .custlo-t1-tabs,
  .custlo-t1-card{
    background:  var(--account-bg);
    box-shadow: none;
  }
  .custlo-t1-card:not(.custlo-t1-orders):not(.custlo-t1-sh2-info-card):not(.custlo-t1-sh2-summary-card){
    padding: 0;
    border: none;
    border-radius: 0;
  }
  .custlo-t1-tabs{
    overflow: visible;
    padding: 0 0 2.5rem;
    border-bottom: 1px solid var(--account-border);
    border-radius: 0;
  }
  .custlo-t1-tabs-scroll-inner{
    background-color: transparent;
    box-shadow: none;
  }

  /* The horizontal tab strip sits flush with the headline and the divider above
     it: the app insets this wrapper, and the tabs themselves already carry no
     margin (.custlo-t1-tab:first-child), so the wrapper's padding is what moves.

     Scoped to the closed state on purpose. The collapsed subnav reuses the very
     same wrapper inside .custlo-t1-tabs-open, and removing the inset there
     pressed every item against the panel edge. The app owns that class —
     nothing else in the theme styles it. */
  .custlo-t1-tabs:not(.custlo-t1-tabs-open) .custlo-t1-tabs-scroll-inner{
    padding-inline-start: 0;
    margin-inline-start: 0;
  }

  .custlo-t1-dynamic-page-content .page-width.waitlist-page{
    padding-left: 0;
    padding-right: 0;
  }
  .custlo-t1-sh2-info-card{
    padding: 0;
  }
  .custlo-t1-card.custlo-t1-sh2-summary-card{
    border-bottom: 1px solid var(--account-border);
    padding-bottom: 4rem;
    border-radius: 0;
  }
  .custlo-t1-tab, 
  .custlo-t1-tab.custlo-t1-active, .custlo-t1-tab:hover{
    background: transparent;
    color: var(--custlo-t1-text-main);
  }
  .custlo-t1-tab{
    padding: 0;
    margin: 0 1.5rem 0 0;
    position: relative;
    &:first-child{
      margin-left: 0;
    }
    &:last-child{
      margin-right: 0;
    }
  }
  /* Remove the app's default (purple) active-tab underline */
  .custlo-t1-tab.custlo-t1-active::after{
    display: none;
  }
  /* Growing underline for the active tab, matching the main header menu */
  .custlo-t1-tab::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.6rem;
    width: 100%;
    height: 0.1rem;
    background: var(--custlo-t1-text-main);
    border-radius: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-default) ease;
  }
  .custlo-t1-tab.custlo-t1-active::before{
    transform: scaleX(1);
  }
  .custlo-t1-card{
    overflow: visible;
  }
  .custlo-t1-sh2-right{
    width: 100%;
  }
  .custlo-t1-card-title{
    font-family: 'Aktiv Grotesk', sans-serif;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.2rem !important;
    letter-spacing: 0.2rem;
  }
  .custlo-t1-order-view-btn,
  .custlo-t1-btn-outline,
  .custlo-t1-btn-danger, 
  .custlo-t1-btn-primary,
  .custlo-t1-orders .custlo-t1-order-btn-group .custlo-t1-order-view-btn{
    font-family: 'Aktiv Grotesk XBold', sans-serif;
    font-style: normal;
    text-transform: uppercase;
    font-size: 1.2rem;
    padding: .9rem 4rem;
    border-radius: var(--button-radius);
    max-height: 3.4rem;
    letter-spacing: 0.2rem;
  }
  .custlo-t1-btn-primary svg{
    display: none;
  }
  .custlo-t1-add-address-placeholder button{
    width: 100%;
    background: transparent !important;
    color: var(--custlo-t1-primary-btn-bg) !important;
    border: 1px solid var(--custlo-t1-primary-btn-bg) !important;
    &:hover{
      background: var(--custlo-t1-primary-btn-bg) !important;
      color: var(--account-bg) !important;
    }
  }
  .custlo-t1-btn-outline, .custlo-t1-btn-danger,
  .custlo-t1-orders .custlo-t1-order-btn-group .custlo-t1-order-view-btn{
    background: var(--account-bg);
    border: 1px solid var(--custlo-t1-primary-btn-bg);
    &:hover{
      background: var(--custlo-t1-primary-btn-bg);
      color: var(--account-bg);
    }
  }
  /* Router-link outline buttons: no background or colour change on hover */
  .custlo-t1-btn-outline.custlo-t1-router-link:hover,
  a.custlo-t1-btn-outline.custlo-t1-router-link:hover,
  button.custlo-t1-btn-outline.custlo-t1-router-link:hover,
  .custlo-t1-form-actions .custlo-t1-btn-danger.custlo-t1-delete-address-btn:hover{
    background: transparent !important;
    color: var(--custlo-t1-primary-btn-bg) !important;
  }
  /* Delete-address confirm modal: text in body colour; on hover border matches bg */
  .custlo-t1-reorder-modal-footer .custlo-t1-btn-outline,
  .custlo-t1-reorder-modal-footer .custlo-t1-btn-danger{
    color: var(--custlo-t1-text-main) !important;
  }
  .custlo-t1-reorder-modal-footer .custlo-t1-btn-outline:hover,
  .custlo-t1-reorder-modal-footer .custlo-t1-btn-danger:hover{
    background: var(--custlo-t1-primary-btn-bg) !important;
    border-color: var(--custlo-t1-primary-btn-bg) !important;
    color: var(--account-bg) !important;
  }
  .custlo-t1-form-actions{
    justify-content: space-between !important;
    .custlo-t1-btn-outline, .custlo-t1-btn-danger{
      background: transparent;
      border: none;
      padding: 0;
      color: var(--custlo-t1-primary-btn-bg);
      text-transform: capitalize;
      text-decoration: underline;
      font-weight: 400;
      font-size: 1.4rem;
      font-family: 'Aktiv Grotesk', sans-serif;
      letter-spacing: 0;
       &:hover{
        text-decoration: none;
      }
    }
    .custlo-t1-btn-danger.custlo-t1-delete-address-btn{
      color: #696969;
    }
  }
  .custlo-t1-card.custlo-t1-account,
  .custlo-t1-card.custlo-t1-address{
    .custlo-t1-card-body{
      padding: 2rem;
      border: 1px solid var(--account-border);
    }
  }
  .custlo-t1-address-form,
  #custlo-t1-edit-form{
    width: 50% !important;
  }
  .custlo-t1-tab{
    text-transform: uppercase;
    font-family: 'Aktiv Grotesk', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
  }
  .custlo-t1-tab-icon{
    display: none;
  }
  .custlo-t1-card-body{
    font-family: 'Aktiv Grotesk', sans-serif;
    font-style: normal;
    font-weight: 400;
    border: none;
    padding: 0;
  }
  .custlo-t1-order-item{
    border-bottom: 1px solid var(--account-border);
    &:last-child{
      border-bottom: none;
    }
  }
  .custlo-t1-sh2-layout{
    display: flex;
    gap: 24px;
    align-items: start;
    flex-direction: row-reverse;
  }
  .custlo-t1-card-head{
    padding:0 0 3.6rem 0;
  }
  .custlo-t1-orders .custlo-t1-order-item::before{
    background: transparent;
  }
  .custlo-t1-sh2-summary-card{
    padding: 0;
  }
  .custlo-t1-form-input, .custlo-t1-form-textarea{
    border:0;
    border-bottom:0.1rem solid rgb(var(--color-foreground));
    border-radius: 0;
    background: transparent;
    font-size: 1.4rem;
    padding: 1.5rem 0;
  }
  /* Placeholder matches the field's own text colour and full opacity */
  .custlo-t1-form-group .custlo-t1-form-input::placeholder,
  .custlo-t1-form-group .custlo-t1-form-textarea::placeholder{
    color: currentColor;
    opacity: 1;
  }
  .custlo-t1-badge{
    background: transparent;
    border-radius: 32px;
    border: 1px solid var(--custlo-t1-primary-btn-bg);
    color: var(--custlo-t1-primary-btn-bg);
  }
  .custlo-t1-badge.custlo-t1-badge--fulfilled,
  .custlo-t1-badge.custlo-t1-badge--paid{
    background: var(--custlo-t1-primary-btn-bg);
    color: var(--account-bg);
  }
  .custlo-t1-empty-benefits{
    display: none;
  }
  .custlo-t1-form-label{
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.2rem;
  }
  .custlo-t1-sh2-right {
    width: 70%;
  }
  .custlo-t1-sh2-layout{
    gap: 4rem;
  }
  /* Title Case in grey, per the design. The 0.2rem tracking went with the
     uppercase treatment — it reads gappy in mixed case, so it comes down too. */
  .custlo-t1-sh2-info-block h4{
    font-family: 'Aktiv Grotesk', sans-serif;
    font-weight: 400;
    text-transform: none;
    font-size: 1.2rem;
    letter-spacing: 0.01rem;
    color: var(--account-muted);
    margin-bottom: 3rem;
  }
  .custlo-t1-sh2-products{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
  .custlo-t1-sh2-product-img-wrap {
    width: 190px;
    height: auto;
    border-radius: 0;
    border: none;
  }
  .custlo-t1-sh2-product-img{
    border-radius: 0;
  }
  /* Grid: column 1 = image (auto width), column 2 = text (fills the rest).
   Row 1 = title, row 2 = price. The image spans both rows. */
  .custlo-t1-sh2-product-item {
    display: grid;
    grid-template-columns: auto 1fr;   /* image column sizes to the image | text fills rest */
    /* 3 rows: title, price, then a filler that soaks up the tall image's extra height
      so the title and price stay tight together at the top instead of spreading out. */
    grid-template-rows: auto auto 1fr;
    column-gap: 2rem;
    row-gap: 0.5rem;
  }

  .custlo-t1-sh2-product-img-wrap {
    position: relative;                /* anchor the qty badge */
    grid-column: 1;                    /* left column */
    grid-row: 1 / 4;                   /* span all three rows (full image height) */
  }

  .custlo-t1-sh2-product-img img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Sits on the product image (the app puts it there and it cannot be moved
     under the price from CSS alone). Cream disc, charcoal figure, no ring. */
  .custlo-t1-sh2-product-qty {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border: none;
    box-shadow: none;
  }

  .custlo-t1-sh2-product-info {        /* title → right column, top row */
    grid-column: 2;
    grid-row: 1;
    min-width: 0;                      /* let long titles wrap */
  }

  .custlo-t1-sh2-product-price {       /* price → right column, row below title */
    grid-column: 2;
    grid-row: 2;
  }
  .custlo-t1-link-accent{
    text-decoration: underline;
    font-weight: 400;
    &:hover{
      text-decoration: none;
    }
  }

  .custlo-t1-sh2-product-title {
    font-weight: 400;
  }
  .custlo-t1-form-group .custlo-t1-form-label{
    display: none;
  }
  #custlo-t1-add-address-view,
  .custlo-t1-edit-address-view,
  #custlo-t1-edit-profile-view{
    /* .custlo-t1-header{
      display: none;
    } */
    .custlo-t1-card{
      padding:0;
      border: none;
    }
  }
  .custlo-t1-add-address-placeholder{
    justify-content: start;
    min-height: unset;
  }
  .custlo-t1-reorder-modal{
    border-radius: 0 !important;
    .custlo-t1-reorder-modal-title{
      text-transform: uppercase;
    }
  }
  .custlo-t1-add-address-placeholder:hover{
    background: transparent;
  }
  #custlo-t1-dynamic-page-view-wishlist{
    .custlo-t1-header{
      margin-bottom: 0;
    }
    .page-width{
      padding: 0;
    }
  }
}
 @media (max-width: 1200px) {
  .custlo-t1-grid{
    grid-template-columns: repeat(2, 1fr);
  }
 }
@media (max-width: 860px) {
  .custlo-t1-wrapper{
    .custlo-t1-order-view-btn,
    .custlo-t1-btn-outline,
    .custlo-t1-btn-danger, 
    .custlo-t1-btn-primary,
    .custlo-t1-orders .custlo-t1-order-btn-group .custlo-t1-order-view-btn,
    .custlo-t1-btn-outline, .custlo-t1-btn-danger{
        font-size: 1rem;
    }
    .custlo-t1-badge{
      font-size: 1rem;
    }
  .custlo-t1-address-form,
  #custlo-t1-edit-form{
     width: 100% !important;
    }
    .custlo-t1-orders .custlo-t1-order-number::before,
    .custlo-t1-orders .custlo-t1-order-date::before,
    .custlo-t1-orders .custlo-t1-order-items::before{
      display: none;
    }
    .custlo-t1-card-title{
      font-size: 1rem !important;
    }
    #custlo-t1-addresses-view{
      .custlo-t1-grid{
        gap: 6rem
      }
    }
    .custlo-t1-orders .custlo-t1-order-item{
      box-shadow: none !important; 
      border-bottom: 1px solid var(--account-border) !important;
      border-radius: 0;
      padding-bottom: 4rem !important;
      padding-left:0 !important;
      padding-right:0 !important;
    }
    .custlo-t1-orders .custlo-t1-order-main_line_item_img{
      border-radius: 0;
    }
  }
}
@media (max-width: 768px) {
  .custlo-t1-wrapper{
    padding: 2rem !important;

    .custlo-t1-wrapper .custlo-t1-btn-outline,
    .custlo-t1-wrapper .custlo-t1-btn-danger{
      width: fit-content;
    }
    .custlo-t1-orders .custlo-t1-order-item {
      box-shadow: none;
      border-bottom: 1px solid var(--account-border);
      &:last-child{
        border-bottom: none;
      }
    }
    .custlo-t1-welcome{
      font-size: 2rem;
    }
    .custlo-t1-tabs{
      padding: 2rem;
      width: 100vw;
      border-bottom: none;
      left: -2rem;
      right: -2rem;
      align-items: flex-start;
    }
    .custlo-t1-tab {
      padding: 1.5rem 0;
      width: fit-content;
      &:first-child{
        padding-top: 0 ;
      }
    }
    /* Keep the active underline tight to the text on mobile */
    .custlo-t1-tab.custlo-t1-active::before{
      bottom: 1.2rem;
    }
    .custlo-t1-header-main .custlo-t1-welcome.custlo-t1-heading{
      display: none;
    }
    .custlo-t1-tab.custlo-t1-router-link{
      font-size: 1rem;
    }
    a.custlo-t1-tab.custlo-t1-mobile-logout{
      padding-top: 1.5rem !important;
    }
    .custlo-t1-hamburger-btn {
      border-radius: 0;
      display: block;
      border: 0;
      width: 100%;
      text-align: left;
      padding: 0;
      font-size: 1rem;
      border-bottom: 1px solid var(--account-border);
      svg{
        display: none;
      }
      &:after{
        display: block;
        content: 'Account Menu';
        text-transform: uppercase;
        font-family: 'Aktiv Grotesk', sans-serif;
        letter-spacing: 0.2rem;
      }
      &:hover, &:focus, &.custlo-t1-hamburger-active{
        background: transparent;
        color: var(--custlo-t1-text-main);
        border-color:  transparent;
      }
    }
     .custlo-t1-header{
      margin-bottom: 2rem;
     }
    .custlo-t1-view .custlo-t1-header{
      padding-bottom: 2rem;
      margin-bottom: 2rem;
    }
    .custlo-t1-form-input, .custlo-t1-form-textarea{
      font-size: 1.2rem;
    }
    .custlo-t1-address-format{
      font-size: 1.2rem;
    }
    .custlo-t1-form-label{
      font-size: 1.2rem;
    }
    .custlo-t1-sh2-layout{
      flex-direction: column;
      gap: 4rem;
    }
    .custlo-t1-sh2-right,
    .custlo-t1-sh2-left{
      width: 100%;
    }
    .custlo-t1-sh2-info-block h4 {
      font-size: 1rem;
    }
    .custlo-t1-sh2-products{
      display: flex;
      border-bottom: 1px solid var(--account-border);
      padding-bottom: 4rem;
    }
    .custlo-t1-sh2-product-item {
      grid-template-columns: 1fr 1fr;
    }
    .custlo-t1-sh2-product-img-wrap {
      width: 100%;
    }
    .custlo-t1-wrapper .custlo-t1-sh2-product-item {
      grid-template-columns: 60% 1fr;   /* image 60% | text fills remaining 40% */
    }
    .custlo-t1-wrapper .custlo-t1-sh2-product-img-wrap {
      width: 100%;                       /* fill the 60% track */
    }
  }
}
/* Header wishlist count — same font as the "Wishlist" label text. */
.header__icon--wishlist .header__icon-wishlist-count {
  margin-inline-start: 0.4rem;
  font-family: var(--font-navigation-family);
  font-weight: var(--font-navigation-weight);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
}
.header__icon--wishlist .header__icon-wishlist-count[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   Facet "Filter and sort" drawer — match the cart drawer's behavior (applies
   on collections and the wishlist page alike):
   1. drop the header under the page dim while open (the cart drops
      .header-wrapper from z-index 40 to 30) so the overlay covers everything;
   2. same overlay strength as the cart (0.1 — the default 0.5 reads darker).
--------------------------------------------------------------------------- */
.facet-drawer--open .shopify-section-header:not(.shopify-section-header-sticky) .header-wrapper,
.facet-drawer--opening .shopify-section-header:not(.shopify-section-header-sticky) .header-wrapper,
.facet-drawer--closing .shopify-section-header:not(.shopify-section-header-sticky) .header-wrapper {
  z-index: 30;
  overflow: hidden;
}

.facet-drawer--open .transition-body::after,
.facet-drawer--opening .transition-body::after,
.facet-drawer--closing .transition-body::after {
  background-color: rgba(var(--color-overlay), 0.05);
}

/* ---------------------------------------------------------------------------
   Swym wishlist page — cards are real theme card-product markup, so they
   inherit collection styling. Removal is done via Swym's own heart on the card.
--------------------------------------------------------------------------- */
/* No own margins — vertical spacing comes from the section padding settings,
   and the filter bar's horizontal padding from its page-width wrapper. */

/* The grid is a .flex-grid (display:flex), which overrides the [hidden]
   attribute — enforce it so the empty state never shows alongside stale cards. */
.swym-wishlist-grid[hidden] {
  display: none !important;
}

/* Loading spinner shown while Swym returns the list and cards are fetched.
   The JS toggles [hidden] once the grid or empty state is ready. */
.swym-wishlist-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8rem 0;
}
.swym-wishlist-loading[hidden] {
  display: none;
}
.swym-wishlist-loading .loading-overlay__spinner {
  width: 4rem;
  height: 4rem;
}
.swym-wishlist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 0;
  min-height: 300px;
}
.swym-wishlist-empty[hidden] {
  display: none;
}
.swym-wishlist-empty .button {
  margin-top: 2rem;
}

.swym-wishlist-grid__item {
  position: relative;
}
.swym-wishlist-grid__item.is-removing {
  opacity: 0.4;
  pointer-events: none;
}

/* Keep wishlist cards at their column width even when a row isn't full (e.g.
   only 2 items). Without this, flex-grow:1 stretches them to fill the row.
   Cap at 1/4 desktop, 1/3 tablet, 1/2 mobile to mirror the collection grid. */
.swym-wishlist-grid.flex-grid .flex-grid__item {
  flex-grow: 0;
  max-width: calc(50% - var(--grid-horizontal-spacing) / 2);
}
@media screen and (min-width: 750px) {
  .swym-wishlist-empty {
    min-height: 500px;
  }
  .swym-wishlist-grid.flex-grid--3-col-tablet .flex-grid__item {
    max-width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
  }
}
@media screen and (min-width: 990px) {
  .swym-wishlist-grid.flex-grid--4-col-desktop .flex-grid__item {
    max-width: calc(25% - var(--grid-horizontal-spacing) * 3 / 4);
  }
}

/* Suppress Swym's app-injected "Quick Save" button on cards — our own toggle
   (below) is the single wishlist control. Swym's container also overlays the
   left side of cards and blocks clicks through to the product. Primary off
   switch is Swym dashboard → Collections → "Enable Quick Save Button". */
.swym-advanced-wishlist-collections-container,
[class^="swym-advanced-wishlist-collections"] {
  display: none !important;
  pointer-events: none !important;
}

/* Global wishlist heart toggle on every product card (card-product snippet +
   wishlist-toggle.js). Pinned top-right of the image; outline by default,
   filled when the product is wishlisted; clicking a filled heart removes it. */
.card-wishlist-toggle {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgb(var(--color-foreground));
}
/* Collection cards: tuck the heart closer to the corner on mobile (half the
   desktop offset). */
@media screen and (max-width: 749px) {
  .card-wishlist-toggle {
    top: 1rem;
    right: 1rem;
  }
}
swym-storefront-layout-notification[status="toast"]{
   background-color: rgb(var(--color-button-background)) !important;
   border-radius: 0 !important;
}
swym-storefront-layout-notification[status="neutral"],
swym-storefront-layout-notification#swym-storefront-layout-notification{
  background-color: rgb(var(--color-background)) !important;
  color: rgb(var(--color-foreground)) !important;
  border-radius: 0 !important;
  border: 0 !important;
  .swym-storefront-layout-notification-action,
  .swym-aw-nudge-login-btn {
    border-radius: 3.2rem !important;
    font-size: 1rem !important;
    letter-spacing: .2em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-family: var(--font-button-family) !important;
  }
  .swym-aw-nudge-dismiss-btn:hover,
  .swym-aw-nudge-dismiss-btn:focus-visible{
    outline: unset !important;
    outline-offset: unset !important;
  }
  .swym-aw-nudge-thumb{
    border-radius: 0 !important;
    border: 0 !important;
  }
}

.card-wishlist-toggle .icon {
  width: 2rem;
  height: 2rem;
}
/* Custom heart SVGs (snippets/wishlist-heart.liquid): show outline by default,
   filled when the toggle is active. Both SVGs are in the DOM; we swap which one
   displays. The header wishlist link has no .is-active, so it shows the outline. */
.wishlist-heart {
  width: 1.4rem;
  height: 1.2rem; /* keeps the 16:14 aspect ratio of the source SVG */
}
.wishlist-heart--full {
  display: none;
}
.is-active .wishlist-heart--outline {
  display: none;
}
.is-active .wishlist-heart--full {
  display: inline-block;
}
.card-wishlist-toggle.is-busy,
.product__wishlist-toggle.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

/* PDP gallery wishlist heart (same Swym-backed toggle as the cards).
   The .product__wishlist-sticky wrapper reserves no vertical space; the button
   is positioned within it. */
.product__wishlist-sticky {
  position: relative;
  width: 100%;
  height: 0;
  z-index: 3;
  pointer-events: none; /* zero-height strip shouldn't block image clicks */
}
.product__wishlist-toggle {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  .wishlist-heart {
    width: 1.6rem;
    height: 1.5rem;
  }
}
.product__wishlist-toggle .icon {
  width: 2rem;
  height: 2rem;
}
@media screen and (min-width: 750px) {
  .product__wishlist-sticky {
    /* Stick below the header (rest offset stays on the button: 2.2rem). */
    position: sticky;
    top: var(--header-bottom-position, 4rem);
  }
  .product__wishlist-toggle {
    padding: 3rem;
  }
  /* Hidden by product-wishlist-sticky.js once the gallery has scrolled past, so
     the heart doesn't overshoot into the section below the images. */
  .product__wishlist-sticky.is-past-gallery {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@media screen and (hover: hover) {
  .product__wishlist-toggle:hover {
    opacity: 0.7;
  }
}
/* On the wishlist page every card is wishlisted — render filled immediately so
   there's no outline flash while the Swym state sync completes. */
.swym-wishlist-grid .card-wishlist-toggle .icon-heart path {
  fill: currentColor;
  stroke: currentColor;
}
@media screen and (hover: hover) {
  .card-wishlist-toggle:hover {
    opacity: 0.7;
  }
}

/* ---- Wishlist filter + sort bar ----
   Reuses the theme's facet drawer (component-facets.css) for the popup, trigger
   and accordion styling. Only wishlist-specific bits need rules here. */

/* Never show the bar until the JS removes [hidden] (some theme display rules
   would otherwise override the hidden attribute). */
.wishlist-facets-bar[hidden] {
  display: none !important;
}

@media screen and (max-width: 749px) {
  /* The mobile site header is fixed with z-index 102; the facet drawer's
     default top:40px / z-index 101 leaves its own header (BACK / heading /
     count) clipped underneath it. Overlay the full screen instead. */
  .wishlist-facets-bar .mobile-facets {
    top: 0;
    z-index: 103;
  }
}

/* template-collection.css gives .facets-bar__right width:100% + flex-shrink:0
   on mobile (for the collection bar layout); inside our flex row that overflows
   the row and pins "Filter and sort" against the count. Keep it content-sized
   and right-aligned at all widths. */
.wishlist-facets-bar__inner .facets-bar__right {
  width: auto;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-top: 0; /* collection CSS adds 2rem on mobile — misaligns our row */
}

/* Our selected-filter chips are <button>s (the collection's are <a>s) — strip
   the button defaults so they render identically to the collection chips.
   Needs to outweigh .mobile-facets__footer button (padding 1rem 1.5rem), which
   is meant for Clear/Apply but also matches our chip buttons. */
.mobile-facets__footer button.mobile-facets__selected-tag,
button.mobile-facets__selected-tag {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0.5rem 1rem;   /* match .mobile-facets__selected-tag */
  font-size: 1.2rem;
  line-height: 1.5;
}

/* Drawer footer: the theme's .mobile-facets__footer has no horizontal padding
   and .button min-widths make Clear/Apply overflow the viewport on mobile.
   Pad the footer and let the buttons share the row evenly. */
.wishlist-facets-bar .mobile-facets__footer {
  padding-left: 2rem;
  padding-right: 2rem;
}
.wishlist-facets-bar .mobile-facets__footer-buttons .button {
  min-width: 0;
  flex: 1 1 0;
}

/* Top row: count on the left, "Filter and sort" on the right, divider below.
   Baseline-aligned so both texts sit on the same line. */
.wishlist-facets-bar__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  margin-bottom: 0; /* desktop: grid spacing comes from the section's padding-top */
}
.wishlist-facets-bar__inner .facets-bar__right {
  display: flex;
  align-items: baseline;
}

/* Under 750px template-collection.css draws the bar's divider as
   .facets-bar__right::before with width:100%. That works on the PLP, where the
   right group spans the row — but this bar deliberately keeps it content-sized
   (see the width:auto rule above), so the line only covered the "Filter and
   Sort" trigger at the far right. Draw it across the bar instead. */
@media screen and (max-width: 749px) {
  .wishlist-facets-bar__inner .facets-bar__right::before {
    content: none;
  }

  .wishlist-facets-bar__inner {
    border-bottom: 1px solid rgba(var(--color-border), 0.5);
    /* The divider sits at the very bottom of the bar, and on mobile the grid
       below has no top spacing of its own (on desktop that comes from the
       section padding), so the thumbnails sat straight against the line. */
    margin-bottom: 2.5rem;
  }
}
/* The theme zeroes summary line-height (for its icon-only summaries), which
   skews the trigger text off our baseline — restore it inside the bar. */
.wishlist-facets-bar .mobile-facets__wrapper > details > summary {
  line-height: 1.4;
}
/* The drawer trigger should sit flush right with no extra facet padding. */
.wishlist-facets-bar .mobile-facets__open--link {
  padding: 0;
}

/* Count label — own class (the theme's .product-count is display:none by
   default), font matched to the "FILTER AND SORT" trigger. Rendered as the
   page h1, so explicitly reset heading font/size. */
.wishlist-facets-bar__count {
  margin: 0;
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
@media screen and (min-width: 750px) {
  .wishlist-facets-bar__count {
    font-size: 1.2rem;
  }
}
.wishlist-facets__no-results {
  width: 100%;
  text-align: center;
  padding: 4rem 0;
  list-style: none;
}

/* component-facets.css scopes the slide-in transform to a `> facet-filters-form`
   child, which we intentionally don't use (it AJAX-submits to a collection URL).
   Re-apply the open/close transform to our structure: details > div > .mobile-facets. */
.wishlist-facets-bar .js details[open] > div > .mobile-facets,
.js .wishlist-facets-bar details[open] > div > .mobile-facets {
  transition-property: transform, visibility;
  transition-duration: var(--duration-long);
  transition-timing-function: ease;
}
.wishlist-facets-bar details[open].menu-opening > div > .mobile-facets,
.no-js .wishlist-facets-bar details[open] > div > .mobile-facets {
  transform: translateX(0);
  visibility: visible;
}

/* ---------------------------------------------------------------------------
   Klaviyo popup forms (e.g. "Notify when back in stock")
--------------------------------------------------------------------------- */

/* Panel */
.klaviyo-form {
  background-color: rgb(var(--color-background)) !important;
  border-radius: 0 !important;
  padding: 4rem !important;
}

/* Heading + body text: theme foreground colour.. */
.klaviyo-form .klaviyo-form-richtext,
.klaviyo-form .klaviyo-form-richtext * {
  color: rgb(var(--color-foreground)) !important;
}

/* Typography is left to Klaviyo's form editor. There used to be a rule here
   forcing the FIRST form row to the h1 face, on the assumption that row was
   always the title — when the title block was removed in Klaviyo the body copy
   became the first row and inherited the heading. Set heading type on the
   heading block in Klaviyo instead; the theme keeps colour and the field
   styling below. */
/* Email input → underline style like .field__input */
.klaviyo-form .klaviyo-emailinput input,
.klaviyo-form input[type="email"] {
  border: none !important;
  border-bottom: 0.1rem solid rgb(var(--color-foreground)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 1.2rem 0 !important;
  color: rgb(var(--color-foreground)) !important;
  font-family: var(--font-body-family) !important;
  font-size: 1.4rem !important;
  box-shadow: none !important;
}

.klaviyo-form .klaviyo-emailinput input::placeholder,
.klaviyo-form input[type="email"]::placeholder {
  color: rgba(var(--color-foreground), 0.6) !important;
  font-size: 1.4rem !important;
}

.klaviyo-form .klaviyo-emailinput input:focus,
.klaviyo-form input[type="email"]:focus {
  border-bottom-color: rgb(var(--color-foreground)) !important;
  outline: none !important;
}

/* Submit button — the theme sets shape and type so it sits with our other
   buttons; COLOUR is left to Klaviyo's form editor. It used to be forced to the
   solid theme button here, which overrode whatever was configured in Klaviyo. */
.klaviyo-form .klaviyo-form-button {
  border-radius: var(--button-radius) !important;
  padding: 1rem 4rem !important;
  font-family: var(--font-button-family) !important;
  font-size: var(--font-button-size) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  line-height: 1 !important;
  cursor: pointer;
  height: unset !Important; /* Klaviyo sets a fixed height that breaks our padding */
  transition: opacity var(--duration-default) ease;
}

@media screen and (hover: hover) {
  .klaviyo-form .klaviyo-form-button:hover {
    /* Opacity rather than a fixed colour, so hover works whatever palette the
       button is given in Klaviyo. */
    opacity: 0.85;
  }
}

/* Promo opt-in checkbox label text colour */
.klaviyo-form .klaviyo-promocheckbox label,
.klaviyo-form .klaviyo-promocheckbox legend {
  color: rgb(var(--color-foreground)) !important;
}

/* Close (X) button → match the popup close icon colour */
.klaviyo-close-form svg path {
  stroke: rgb(var(--color-foreground)) !important;
}